refactor: refine translations and titles

lifinance · May 25, 2022 · c8ecde7 · c8ecde7
1 parent 5f9d32d
commit c8ecde7
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 40 deletions.
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -122,7 +122,7 @@ export const CrossStepDetailsLabel: React.FC<
       color="text.secondary"
       {...other}
     >
-      {t('swapping.crossStepDetails', {
+      {t('swap.crossStepDetails', {
         from: getChainById(step.action.fromChainId)?.name,
         to: getChainById(step.action.toChainId)?.name,
         tool: step.toolDetails.name,
@@ -142,7 +142,7 @@ export const SwapStepDetailsLabel: React.FC<
       color="text.secondary"
       {...other}
     >
-      {t('swapping.swapStepDetails', {
+      {t('swap.swapStepDetails', {
         value: step.toolDetails.name,
       })}
     </Typography>

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -7,8 +7,7 @@
     "from": "Swap from",
     "to": "Swap to",
     "settings": "Settings",
-    "routes": "Routes",
-    "swapping": "Swapping"
+    "routes": "Routes"
   },
   "button": {
     "swap": "Swap",
@@ -33,7 +32,7 @@
     "recipientsAddress": "Recipient's {{chain}} address",
     "addressConfirmation": "I confirm that the address above is correct",
     "gas": "gas fee",
-    "minutes": "mins",
+    "minutes": "minutes",
     "tokenSearch": "Search your token",
     "selectChain": "Chain",
     "selectToken": "Token",
@@ -42,12 +41,11 @@
     "insufficientFunds": "Insufficient funds",
     "insufficientGasOnStartChain": "Insufficient gas on start chain",
     "insufficientGasOnDestinationChain": "Insufficient gas on destination chain",
-    "insufficientGasOnDestinationChainTooltip": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there."
-  },
-  "swapping": {
-    "swap": "Swap",
+    "insufficientGasOnDestinationChainTooltip": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there.",
+    "stepSwap": "Swap",
+    "stepBridge": "Bridge",
+    "stepSwapAndBridge": "SwapAndBridge",
     "estimatedTime": "~{{value}} min.",
-    "done": "Done",
     "networkIsBusy": "Network is busy...",
     "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
     "swapStepDetails": "Swap on {{value}}",

diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -44,8 +44,8 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
     switch (status) {
       case 'success':
         return {
-          title: t('swapping.success.title.fundsReceived'),
-          message: t('swapping.success.message.fundsReceived', {
+          title: t('swap.success.title.fundsReceived'),
+          message: t('swap.success.message.fundsReceived', {
             amount: token?.amount,
             tokenSymbol: token?.symbol,
             chainName: getChainById(route.toChainId)?.name,

diff --git a/packages/widget/src/pages/SwapPage/StepItem.tsx b/packages/widget/src/pages/SwapPage/StepItem.tsx
@@ -19,6 +19,19 @@ export const StepItem: React.FC<{
     (process) => process.status === 'FAILED',
   );
 
+  const getCardTitle = () => {
+    switch (step.type) {
+      case 'lifi':
+        return t('swap.stepSwapAndBridge');
+      case 'swap':
+        return t('swap.stepSwap');
+      case 'cross':
+        return t('swap.stepBridge');
+      default:
+        return t('swap.stepSwap');
+    }
+  };
+
   return (
     <CardContainer isError={stepHasError}>
       <Box
@@ -27,7 +40,7 @@ export const StepItem: React.FC<{
           flex: 1,
         }}
       >
-        <CardTitle flex={1}>{t('swapping.swap')}</CardTitle>
+        <CardTitle flex={1}>{getCardTitle()}</CardTitle>
         <CardTitle>
           <StepTimer step={step} />
         </CardTitle>

diff --git a/packages/widget/src/pages/SwapPage/StepTimer.tsx b/packages/widget/src/pages/SwapPage/StepTimer.tsx
@@ -53,7 +53,7 @@ export const StepTimer: React.FC<{ step: Step }> = ({ step }) => {
   if (!isExecutionStarted) {
     return (
       <>
-        {t('swapping.estimatedTime', {
+        {t('swap.estimatedTime', {
           value: (step.estimate.executionDuration / 60).toFixed(0),
         })}
       </>
@@ -63,7 +63,7 @@ export const StepTimer: React.FC<{ step: Step }> = ({ step }) => {
     return null;
   }
   return isExpired ? (
-    <>{t('swapping.networkIsBusy')}</>
+    <>{t('swap.networkIsBusy')}</>
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     <>{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</>

diff --git a/packages/widget/src/pages/SwapPage/utils.ts b/packages/widget/src/pages/SwapPage/utils.ts
@@ -24,29 +24,29 @@ const processMessages: Record<
   Partial<Record<Status, (t: TFunction<'translation', undefined>) => string>>
 > = {
   TOKEN_ALLOWANCE: {
-    STARTED: (t) => t(`swapping.process.tokenAllowance.started`),
-    PENDING: (t) => t(`swapping.process.tokenAllowance.pending`),
-    DONE: (t) => t(`swapping.process.tokenAllowance.done`),
+    STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+    PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
+    DONE: (t) => t(`swap.process.tokenAllowance.done`),
   },
   SWITCH_CHAIN: {
-    PENDING: (t) => t(`swapping.process.switchChain.pending`),
-    DONE: (t) => t(`swapping.process.switchChain.done`),
+    PENDING: (t) => t(`swap.process.switchChain.pending`),
+    DONE: (t) => t(`swap.process.switchChain.done`),
   },
   SWAP: {
-    STARTED: (t) => t(`swapping.process.swap.started`),
-    ACTION_REQUIRED: (t) => t(`swapping.process.swap.actionRequired`),
-    PENDING: (t) => t(`swapping.process.swap.pending`),
-    DONE: (t) => t(`swapping.process.swap.done`),
+    STARTED: (t) => t(`swap.process.swap.started`),
+    ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
+    PENDING: (t) => t(`swap.process.swap.pending`),
+    DONE: (t) => t(`swap.process.swap.done`),
   },
   CROSS_CHAIN: {
-    STARTED: (t) => t(`swapping.process.crossChain.started`),
-    ACTION_REQUIRED: (t) => t(`swapping.process.crossChain.actionRequired`),
-    PENDING: (t) => t(`swapping.process.crossChain.pending`),
-    DONE: (t) => t(`swapping.process.crossChain.done`),
+    STARTED: (t) => t(`swap.process.crossChain.started`),
+    ACTION_REQUIRED: (t) => t(`swap.process.crossChain.actionRequired`),
+    PENDING: (t) => t(`swap.process.crossChain.pending`),
+    DONE: (t) => t(`swap.process.crossChain.done`),
   },
   RECEIVING_CHAIN: {
-    PENDING: (t) => t(`swapping.process.receivingChain.pending`),
-    DONE: (t) => t(`swapping.process.receivingChain.done`),
+    PENDING: (t) => t(`swap.process.receivingChain.pending`),
+    DONE: (t) => t(`swap.process.receivingChain.done`),
   },
   TRANSACTION: {},
 };
@@ -62,7 +62,7 @@ export function getProcessMessage(
 } {
   if (process.error && process.status === 'FAILED') {
     const getTransactionNotSentMessage = () =>
-      t(`swapping.error.message.transactionNotSent`, {
+      t(`swap.error.message.transactionNotSent`, {
         amount: formatTokenAmount(
           step.action.fromAmount,
           step.action.fromToken.decimals,
@@ -74,24 +74,24 @@ export function getProcessMessage(
     let message: string = '';
     switch (process.error.code) {
       case LifiErrorCode.ChainSwitchError:
-        title = t(`swapping.error.title.chainSwitch`);
+        title = t(`swap.error.title.chainSwitch`);
         message = getTransactionNotSentMessage();
         break;
       case LifiErrorCode.TransactionFailed:
-        title = t(`swapping.error.title.transactionFailed`);
-        message = t(`swapping.error.message.transactionFailed`);
+        title = t(`swap.error.title.transactionFailed`);
+        message = t(`swap.error.message.transactionFailed`);
         break;
       case LifiErrorCode.TransactionUnderpriced:
-        title = t(`swapping.error.title.transactionUnderpriced`);
+        title = t(`swap.error.title.transactionUnderpriced`);
         message = getTransactionNotSentMessage();
         break;
       case LifiErrorCode.TransactionUnprepared:
-        title = t(`swapping.error.title.transactionUnprepared`);
+        title = t(`swap.error.title.transactionUnprepared`);
         message = getTransactionNotSentMessage();
         break;
       case MetaMaskProviderErrorCode.userRejectedRequest:
-        title = t(`swapping.error.title.userRejectedSignatureRequest`);
-        message = t(`swapping.error.message.signatureRequired`, {
+        title = t(`swap.error.title.userRejectedSignatureRequest`);
+        message = t(`swap.error.message.signatureRequired`, {
           amount: formatTokenAmount(
             step.action.fromAmount,
             step.action.fromToken.decimals,
@@ -101,9 +101,9 @@ export function getProcessMessage(
         });
         break;
       default:
-        title = t(`swapping.error.title.unknown`);
+        title = t(`swap.error.title.unknown`);
         if (process.txLink) {
-          message = t(`swapping.error.message.transactionFailed`);
+          message = t(`swap.error.message.transactionFailed`);
         }
         break;
     }