feat: Translation support for connect and account modal (#257)

pancakeswap · Aug 30, 2021 · 6d97f2e · 6d97f2e
1 parent f1905af
commit 6d97f2e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx
@@ -4,7 +4,7 @@ import { renderWithTheme } from "../../testHelpers";
 import ConnectModal from "../../widgets/WalletModal/ConnectModal";
 
 it("renders ConnectModal correctly", () => {
-  const { asFragment } = renderWithTheme(<ConnectModal login={noop} />);
+  const { asFragment } = renderWithTheme(<ConnectModal login={noop} t={(key: string) => key} />);
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c0 {
@@ -651,7 +651,7 @@ it("renders ConnectModal correctly", () => {
               class="c21"
               color="textSubtle"
             >
-              Haven't got a crypto wallet yet?
+              Haven’t got a crypto wallet yet?
             </p>
             <a
               class="c22"

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/AccountModal.tsx b/packages/pancake-uikit/src/widgets/WalletModal/AccountModal.tsx
@@ -11,10 +11,11 @@ interface Props {
   account: string;
   logout: () => void;
   onDismiss?: () => void;
+  t: (key: string) => string;
 }
 
-const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null }) => (
-  <Modal title="Your wallet" onDismiss={onDismiss}>
+const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null, t }) => (
+  <Modal title={t("Your wallet")} onDismiss={onDismiss}>
     <Text
       fontSize="20px"
       bold
@@ -24,9 +25,9 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
     </Text>
     <Flex mb="32px">
       <LinkExternal small href={`https://bscscan.com/address/${account}`} mr="16px">
-        View on BscScan
+        {t("View on BscScan")}
       </LinkExternal>
-      <CopyToClipboard toCopy={account}>Copy Address</CopyToClipboard>
+      <CopyToClipboard toCopy={account}>{t("Copy Address")}</CopyToClipboard>
     </Flex>
     <Flex justifyContent="center">
       <Button
@@ -38,7 +39,7 @@ const AccountModal: React.FC<Props> = ({ account, logout, onDismiss = () => null
           onDismiss();
         }}
       >
-        Logout
+        {t("Logout")}
       </Button>
     </Flex>
   </Modal>

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx b/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx
@@ -16,6 +16,7 @@ interface Props {
   login: Login;
   onDismiss?: () => void;
   displayCount?: number;
+  t: (key: string) => string;
 }
 
 const WalletWrapper = styled(Box)`
@@ -48,7 +49,7 @@ const getPreferredConfig = (walletConfig: Config[]) => {
   ];
 };
 
-const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayCount = 3 }) => {
+const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayCount = 3, t }) => {
   const [showMore, setShowMore] = useState(false);
   const theme = useTheme();
   const sortedConfig = getPreferredConfig(config);
@@ -58,7 +59,7 @@ const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayC
     <ModalContainer minWidth="320px">
       <ModalHeader background={getThemeValue("colors.gradients.bubblegum")(theme)}>
         <ModalTitle>
-          <Heading>Connect Wallet</Heading>
+          <Heading>{t("Connect Wallet")}</Heading>
         </ModalTitle>
         <ModalCloseButton onDismiss={onDismiss} />
       </ModalHeader>
@@ -70,12 +71,12 @@ const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayC
                 <WalletCard walletConfig={wallet} login={login} onDismiss={onDismiss} />
               </Box>
             ))}
-            {!showMore && <MoreWalletCard onClick={() => setShowMore(true)} />}
+            {!showMore && <MoreWalletCard t={t} onClick={() => setShowMore(true)} />}
           </Grid>
         </WalletWrapper>
         <Box p="24px">
           <Text textAlign="center" color="textSubtle" as="p" mb="16px">
-            Haven&#39;t got a crypto wallet yet?
+            {t("Haven’t got a crypto wallet yet?")}
           </Text>
           <Button
             as="a"
@@ -84,7 +85,7 @@ const ConnectModal: React.FC<Props> = ({ login, onDismiss = () => null, displayC
             width="100%"
             {...getExternalLinkProps()}
           >
-            Learn How to Connect
+            {t("Learn How to Connect")}
           </Button>
         </Box>
       </ModalBody>

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx b/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx
@@ -23,11 +23,15 @@ const WalletButton = styled(Button).attrs({ width: "100%", variant: "text", py:
   margin-right: auto;
 `;
 
-export const MoreWalletCard: React.FC<ButtonProps> = (props) => {
+interface MoreWalletCardProps extends ButtonProps {
+  t: (key: string) => string;
+}
+
+export const MoreWalletCard: React.FC<MoreWalletCardProps> = ({ t, ...props }) => {
   return (
     <WalletButton variant="tertiary" {...props}>
       <MoreHorizontal width="40px" mb="8px" color="textSubtle" />
-      <Text fontSize="14px">More</Text>
+      <Text fontSize="14px">{t("More")}</Text>
     </WalletButton>
   );
 };

diff --git a/packages/pancake-uikit/src/widgets/WalletModal/useWalletModal.tsx b/packages/pancake-uikit/src/widgets/WalletModal/useWalletModal.tsx
@@ -9,9 +9,9 @@ interface ReturnType {
   onPresentAccountModal: () => void;
 }
 
-const useWalletModal = (login: Login, logout: () => void, account?: string): ReturnType => {
-  const [onPresentConnectModal] = useModal(<ConnectModal login={login} />);
-  const [onPresentAccountModal] = useModal(<AccountModal account={account || ""} logout={logout} />);
+const useWalletModal = (login: Login, logout: () => void, t: (key: string) => string, account?: string): ReturnType => {
+  const [onPresentConnectModal] = useModal(<ConnectModal login={login} t={t} />);
+  const [onPresentAccountModal] = useModal(<AccountModal account={account || ""} logout={logout} t={t} />);
   return { onPresentConnectModal, onPresentAccountModal };
 };