[NO CHANGELOG] [Add tokens Widget] feat: Add Internationalisation (#2386

)

packages/checkout/widgets-lib/src/components/EOAWarningDrawer/EOAWarningDrawer.tsx

@@ -5,6 +5,7 @@ import {
   Drawer,
   Heading,
 } from '@biom3/react';
+import { useTranslation } from 'react-i18next';
 import { WarningHero } from '../Hero/WarningHero';
 
 export function EOAWarningDrawer({
@@ -16,6 +17,7 @@ export function EOAWarningDrawer({
   onProceedClick: () => void;
   onCloseDrawer: () => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Drawer
       size="threeQuarter"
@@ -32,7 +34,7 @@ export function EOAWarningDrawer({
             textAlign="center"
             sx={{ mb: 'base.spacing.x2' }}
           >
-            WARNING
+            {t('drawers.eoaWarning.dividerText')}
           </Divider>
           <Box sx={{ px: 'base.spacing.x4' }}>
             <Heading
@@ -42,7 +44,7 @@ export function EOAWarningDrawer({
                 textAlign: 'center',
               }}
             >
-              You could lose sight of your assets if you don’t deliver them to Passport
+              {t('drawers.eoaWarning.heading')}
             </Heading>
           </Box>
           <Box
@@ -59,7 +61,7 @@ export function EOAWarningDrawer({
               size="large"
               onClick={onCloseDrawer}
             >
-              Deliver to Passport instead
+              {t('drawers.eoaWarning.passportButtonText')}
             </Button>
 
             <Button
@@ -69,7 +71,7 @@ export function EOAWarningDrawer({
               size="large"
               onClick={onProceedClick}
             >
-              Proceed anyway
+              {t('drawers.eoaWarning.proceedButtonText')}
             </Button>
           </Box>
         </Box>

packages/checkout/widgets-lib/src/components/WalletDrawer/DeliverToWalletDrawer.tsx

@@ -4,6 +4,7 @@ import {
 } from '@imtbl/checkout-sdk';
 import { Web3Provider } from '@ethersproject/providers';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ConnectWalletDrawer } from './ConnectWalletDrawer';
 import { ConnectEIP6963ProviderError } from '../../lib/connectEIP6963Provider';
 import {
@@ -64,10 +65,10 @@ export function DeliverToWalletDrawer({
   const selectedSameFromWalletType = (
     providerInfo: EIP6963ProviderInfo,
   ): boolean | undefined => (fromProviderInfo?.rdns !== providerInfo.rdns ? undefined : false);
-
+  const { t } = useTranslation();
   return (
     <ConnectWalletDrawer
-      heading="Deliver To"
+      heading={t('drawers.wallet.deliverToHeading')}
       visible={visible}
       onClose={onClose}
       providerType="to"

packages/checkout/widgets-lib/src/components/WalletDrawer/PayWithWalletDrawer.tsx

@@ -2,6 +2,7 @@ import { EIP6963ProviderDetail, EIP6963ProviderInfo } from '@imtbl/checkout-sdk'
 import { useContext, useMemo } from 'react';
 import { MenuItem } from '@biom3/react';
 import { Web3Provider } from '@ethersproject/providers';
+import { useTranslation } from 'react-i18next';
 import { ConnectWalletDrawer } from './ConnectWalletDrawer';
 import { useProvidersContext } from '../../context/providers-context/ProvidersContext';
 import { ConnectEIP6963ProviderError } from '../../lib/connectEIP6963Provider';
@@ -26,19 +27,20 @@ export function PayWithWalletDrawer({
   insufficientBalance,
   showOnRampOption = true,
 }: PayWithWalletDrawerProps) {
+  const { t } = useTranslation();
   const { providersState: { fromProviderInfo } } = useProvidersContext();
   const { viewDispatch } = useContext(ViewContext);
 
   const disabledOptions = useMemo(() => {
     if (insufficientBalance && fromProviderInfo) {
       return [{
-        label: 'insufficient funds',
+        label: t('drawers.wallet.insufficientFunds'),
         rdns: fromProviderInfo.rdns,
       }];
     }
 
     return [];
-  }, [insufficientBalance, fromProviderInfo]);
+  }, [t, insufficientBalance, fromProviderInfo]);
 
   const handleOnConnect = (provider: Web3Provider, providerInfo: EIP6963ProviderInfo) => {
     onConnect('from', provider, providerInfo);
@@ -59,34 +61,35 @@ export function PayWithWalletDrawer({
     }
   };
 
-  const payWithCardItem = useMemo(
-    () => {
-      if (!showOnRampOption) return null;
+  const payWithCardItem = useMemo(() => {
+    if (!showOnRampOption) return null;
 
-      return (
-        <MenuItem
-          size="small"
-          emphasized
-          onClick={() => {
-            onClose();
-            onPayWithCard?.();
-          }}
-        >
-          <MenuItem.FramedIcon
-            icon="BankCard"
-            variant="bold"
-            emphasized={false}
-          />
-          <MenuItem.Label>Pay with Card</MenuItem.Label>
-        </MenuItem>
-      );
-    },
-    [onClose, onPayWithCard],
-  );
+    return (
+      <MenuItem
+        size="small"
+        emphasized
+        onClick={() => {
+          onClose();
+          onPayWithCard?.();
+        }}
+      >
+        <MenuItem.FramedIcon
+          icon="BankCard"
+          variant="bold"
+          emphasized={false}
+        />
+        <MenuItem.Label>{t('drawers.wallet.payWithCard')}</MenuItem.Label>
+      </MenuItem>
+    );
+  }, [onClose, onPayWithCard]);
 
   return (
     <ConnectWalletDrawer
-      heading={insufficientBalance ? 'Choose another option' : 'Send from'}
+      heading={
+        insufficientBalance
+          ? t('drawers.wallet.payWithHeadingInsufficientBalance')
+          : t('drawers.wallet.payWithHeading')
+      }
       visible={visible}
       onClose={onClose}
       providerType="from"

packages/checkout/widgets-lib/src/components/WalletDrawer/WalletDrawer.tsx

@@ -4,6 +4,7 @@ import {
 import { ReactNode, useState } from 'react';
 import { motion } from 'framer-motion';
 import { EIP1193Provider, EIP6963ProviderDetail, WalletProviderRdns } from '@imtbl/checkout-sdk';
+import { useTranslation } from 'react-i18next';
 import { FormControlWrapper } from '../FormComponents/FormControlWrapper/FormControlWrapper';
 import { WalletItem } from './WalletItem';
 import { walletItemListStyles } from './WalletDrawerStyles';
@@ -48,6 +49,7 @@ export function WalletDrawer({
   bottomSlot,
   disabledOptions,
 }: WalletDrawerProps) {
+  const { t } = useTranslation();
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
   const [walletItemLoading, setWalletItemLoading] = useState(false);
   const { heading, defaultText } = drawerText;
@@ -136,7 +138,7 @@ export function WalletDrawer({
             <MenuItem.Badge
               variant="dark"
               badgeContent={
-                disabledOptions?.[unavailableIndex]?.label ?? 'no funds'
+                disabledOptions?.[unavailableIndex]?.label ?? t('drawers.wallet.noFunds')
               }
             />
           ) : undefined;

packages/checkout/widgets-lib/src/locales/en.json

@@ -65,7 +65,11 @@
     },
     "ERROR_VIEW": {
       "heading": "Something's gone wrong",
-      "body": ["You can try again or contact", "support", "for help."],
+      "body": [
+        "You can try again or contact",
+        "support",
+        "for help."
+      ],
       "actionText": "Try again"
     },
     "SERVICE_UNAVAILABLE_ERROR_VIEW": {
@@ -647,8 +651,35 @@
       }
     },
     "ADD_TOKENS": {
+      "tokenSelection": {
+        "buttonText": "Add Token",
+        "tokenLabel": "Add",
+        "drawerHeading": "Add Token",
+        "searchPlaceholder": "Search tokens"
+      },
+      "walletSelection": {
+        "fromText": "Send from",
+        "toText": "Deliver to"
+      },
+      "routeSelection": {
+        "loadingText": "Finding the best payment route...",
+        "noRoute": "No routes found, choose a different wallet, token or amount.",
+        "payWithCard": "No routes found, pay with card available",
+        "fastestBadge": "Fastest",
+        "minutesText": "mins",
+        "minuteText": "min",
+        "secondsText": "s"
+      },
       "drawer": {
         "options": {
+          "heading": "Pay from",
+          "moreOptionsDividerText": "More ways to Pay",
+          "loadingText1": "Finding the best value",
+          "loadingText2": "across all chains",
+          "noRoutes": {
+            "heading": "No routes found",
+            "caption": "Choose a different wallet, token or amount and try again."
+          },
           "swap": {
             "heading": "Swap",
             "caption": "Swap tokens on this network.",
@@ -666,6 +697,110 @@
           }
         }
       },
+      "error": {
+        "default": {
+          "heading": "Sorry, something went wrong. Please try again later.",
+          "secondaryButtonText": "Close"
+        },
+        "invalidParameters": {
+          "heading": "Invalid parameters",
+          "subHeading": "The widget parameters provided are invalid. Please check again.",
+          "secondaryButtonText": "Close"
+        },
+        "serviceBreakdown": {
+          "heading": "Our system is currently down",
+          "subHeading": "We are currently experiencing technical difficulties. Please try again later.",
+          "secondaryButtonText": "Close"
+        },
+        "transactionFailed": {
+          "heading": "Transaction failed",
+          "subHeading": "The transaction failed. Please try again.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "unrecognisedChain": {
+          "heading": "Unrecognised chain",
+          "subHeading": "Please add the chain to your account and try again.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "providerError": {
+          "heading": "Wallet cannot be found",
+          "subHeading": "Please try to connect your wallet and try again.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "walletFailed": {
+          "heading": "Transaction failed",
+          "subHeading": "The transaction failed. Please try again.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "walletRejected": {
+          "heading": "Transaction rejected",
+          "subHeading": "You'll need to approve the transaction in your wallet to proceed.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "walletRejectedNoFunds": {
+          "heading": "Insufficient funds",
+          "subHeading": "You do not have enough funds to complete the transaction.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "walletPopupBlocked": {
+          "heading": "Browser's popup blocked",
+          "subHeading": "Please allow pop-ups in your browser to proceed.",
+          "primaryButtonText": "Retry",
+          "secondaryButtonText": "Close"
+        },
+        "environmentError": {
+          "heading": "Unsupported environment",
+          "subHeading": "This is only supported in production environment.",
+          "secondaryButtonText": "Close"
+        },
+        "addressMismatch": {
+          "heading": "Oops! It seems your payment wallet has changed",
+          "body": "You'll be ask to re-connect the same wallet you selected to pay with before proceeding",
+          "buttonText": "Re-select payment wallet"
+        }
+      },
+      "review": {
+        "buttonText": "Review",
+        "heading": "Review",
+        "send": "Send",
+        "receive": "Receive",
+        "swap": "Swap",
+        "to": "to",
+        "loadingText": "Securing quote",
+        "processingButtonText": "Processing",
+        "proceedButtonText": "Proceed",
+        "poweredBySquid": "Powered by Squid"
+      },
+      "handover": {
+        "preparing": {
+          "heading": "Preparing"
+        },
+        "requestingApproval": {
+          "heading": "Waiting for access approval in your wallet",
+          "subHeading": "Approve the transaction request to complete this transaction"
+        },
+        "approved": {
+          "heading": "Granted access to your tokens"
+        },
+        "requestingExecution": {
+          "heading": "Waiting for transaction confirmation in your wallet",
+          "subHeading": "Confirm the transaction request to complete this transaction"
+        },
+        "executing": {
+          "heading": "Processing"
+        },
+        "executed": {
+          "heading": "Funds added successfully",
+          "subHeadingGoTo": "Go to",
+          "subHeadingTransactionDetails": "for transaction details"
+        }
+      },
       "onboarding": {
         "screen1": {
           "title": "We've changed a few things\nto make it easier",
@@ -684,14 +819,18 @@
         }
       },
       "footer": {
-        "body":  "Swap functionality is powered by a third party, Squid. Immutable neither builds, owns, operates or deploys <squidLink>Squid</squidLink>."
+        "body": "Swap functionality is powered by a third party, Squid. Immutable neither builds, owns, operates or deploys <squidLink>Squid</squidLink>."
       },
       "geoBlockError": {
         "buyTokenButton": "Buy tokens",
         "bridgeTokenButton": "Bridge tokens"
       },
       "fees": {
-        "fiatPricePrefix": "≈ USD"
+        "fee": "Fee",
+        "balance": "Balance",
+        "fiatPricePrefix": "≈ USD",
+        "zeroFees": "Zero fees",
+        "includedFees": "Included fees"
       }
     }
   },
@@ -847,6 +986,20 @@
           "proceed": "I understand"
         }
       }
+    },
+    "wallet": {
+      "payWithHeading": "Send from",
+      "payWithHeadingInsufficientBalance": "Choose another option",
+      "deliverToHeading": "Deliver to",
+      "payWithCard": "Pay with Card",
+      "insufficientFunds": "insufficient funds",
+      "noFunds": "no funds"
+    },
+    "eoaWarning": {
+      "dividerText": "WARNING",
+      "heading": "You could lose sight of your assets if you don’t deliver them to Passport",
+      "passportButtonText": "Deliver to Passport instead",
+      "proceedButtonText": "Proceed anyway"
     }
   }
 }