fix: complete and check missing translations

rango-exchange · Dec 31, 2023 · e4815ca · e4815ca
1 parent e122f3b
commit e4815ca
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 18 deletions.
diff --git a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
@@ -274,7 +274,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
               type="primary"
               fullWidth
               size="large">
-              Confirm
+              {i18n.t('Confirm')}
             </Button>
           </ConfirmButton>
         ),

diff --git a/widget/embedded/src/components/HeaderButtons/HeaderButtons.styles.ts b/widget/embedded/src/components/HeaderButtons/HeaderButtons.styles.ts
@@ -23,7 +23,10 @@ export const ConnectedIcon = styled('div', {
 export const SuffixContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  width: '$40',
+  minWidth: '$40',
+  button: {
+    padding: 0,
+  },
 });
 
 export const NotificationsBadgeContainer = styled('div', {

diff --git a/widget/embedded/src/components/Quote/QuoteSummary.tsx b/widget/embedded/src/components/Quote/QuoteSummary.tsx
@@ -1,5 +1,6 @@
 import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 
+import { i18n } from '@lingui/core';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
@@ -21,7 +22,7 @@ export function QuoteSummary(props: PropTypes) {
     <Container>
       <TokenAmount
         direction="horizontal"
-        label="Swap input"
+        label={i18n.t('Swap input')}
         type="input"
         tooltipContainer={getContainer()}
         price={{
@@ -39,8 +40,8 @@ export function QuoteSummary(props: PropTypes) {
       <div className={separatorStyles()} />
       <TokenAmount
         direction="horizontal"
-        label="Estimated output"
         tooltipContainer={getContainer()}
+        label={i18n.t('Estimated output')}
         type="output"
         price={{
           value: to.price.value,

diff --git a/widget/embedded/src/components/SwapsGroup/SwapsGroup.tsx b/widget/embedded/src/components/SwapsGroup/SwapsGroup.tsx
@@ -18,11 +18,11 @@ export function SwapsGroup(props: PropTypes) {
 
     const loadingGroups = [
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps,
       },
       {
-        title: 'This month',
+        title: i18n.t('Last month'),
         swaps,
       },
     ];
@@ -36,7 +36,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -69,7 +69,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -85,8 +85,8 @@ export function SwapsGroup(props: PropTypes) {
                         creationTime={swap.creationTime}
                         status={swap.status}
                         onClick={onSwapClick}
-                        onlyShowTime={group.title === 'Today'}
                         tooltipContainer={getContainer()}
+                        onlyShowTime={group.title === i18n.t('Today')}
                         swapTokenData={{
                           from: {
                             token: {

diff --git a/widget/embedded/src/pages/LiquiditySourcePage.tsx b/widget/embedded/src/pages/LiquiditySourcePage.tsx
@@ -40,6 +40,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
@@ -103,7 +104,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         suffix: (
           <LiquiditySourceSuffix>
             <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
-              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
         ),
@@ -115,7 +116,9 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Search {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
           onChange={searchHandler}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}

diff --git a/widget/embedded/src/pages/SelectBlockchainPage.tsx b/widget/embedded/src/pages/SelectBlockchainPage.tsx
@@ -2,7 +2,7 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   getCountCategories,
-  SelectableCategoryList
+  SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
@@ -27,7 +27,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type,
   });
 
   const countActiveCategories = getCountCategories(blockchains);
@@ -37,7 +37,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
 

diff --git a/widget/embedded/src/pages/SelectSwapItemsPage.tsx b/widget/embedded/src/pages/SelectSwapItemsPage.tsx
@@ -68,11 +68,15 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains, tokens } });
     }
   };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        title: i18n.t('Swap {type}', { type: types[type] }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}

diff --git a/widget/embedded/src/utils/date.ts b/widget/embedded/src/utils/date.ts
@@ -1,6 +1,7 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
 import type { PendingSwap } from 'rango-types';
 
+import { i18n } from '@lingui/core';
 import dayjs from 'dayjs';
 
 export const groupSwapsByDate: GroupBy = (swaps) => {
@@ -14,7 +15,7 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     [
       'today',
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps: [],
       },
     ],
@@ -28,14 +29,21 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     [
       'month',
       {
-        title: 'This month',
+        title: i18n.t('Last month'),
         swaps: [],
       },
     ],
     [
       'year',
       {
-        title: 'This year',
+        title: i18n.t('Last year'),
+        swaps: [],
+      },
+    ],
+    [
+      'history',
+      {
+        title: i18n.t('History'),
         swaps: [],
       },
     ],