feat: ConnectModal support intl

ant-design · Dec 28, 2023 · c11a688 · c11a688
1 parent 41dfdb9
commit c11a688
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 43 deletions.
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
-import { useOutlet, usePrefersColor, useLocation } from 'dumi';
+import { useOutlet, usePrefersColor, useLocation, useIntl } from 'dumi';
+import { Web3ConfigProvider, en_US, zh_CN } from '@ant-design/web3-common';
 
 import SiteThemeProvider from '../SiteThemeProvider';
 
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
   const [color] = usePrefersColor();
+  const { locale } = useIntl();
 
   return (
-    <SiteThemeProvider themeMode={color || 'auto'}>
-      <div className={pathname === '/' || pathname === '/zh-CN' ? 'home' : ''}>{outlet}</div>
-    </SiteThemeProvider>
+    <Web3ConfigProvider locale={locale === 'zh-CN' ? zh_CN : en_US}>
+      <SiteThemeProvider themeMode={color || 'auto'}>
+        <div className={pathname === '/' || pathname === '/zh-CN' ? 'home' : ''}>{outlet}</div>
+      </SiteThemeProvider>
+    </Web3ConfigProvider>
   );
 };
 

diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts
@@ -18,13 +18,24 @@ const localeValues: RequiredLocale = {
     guideInfos3Title: 'Call smart contract',
     guideInfos3Desc:
       'Through authorization of private key signature, initiate interaction with smart contract on the chain',
-    guideInfosGetWalletBtnText: 'Get Wallet',
+    guideInfosGetWalletBtnText: 'Get a Wallet',
     guideInfosMoreLinkText: 'Learn more',
     getWalletBtnText: 'Get',
-    getWalletPanelTitle: 'Get a wallet',
-    getWalletPanelInfoTitle: 'Not what you&apos;re looking for?',
+    getWalletPanelTitle: 'Get a Wallet',
+    getWalletPanelInfoTitle: "Not what you're looking for?",
     getWalletPanelInfoDesc:
       'Select a wallet on the left to get started with a different wallet provider.',
+    qrCodePanelTitleForDownload: 'Download {wallet.name}',
+    qrCodePanelTitleForScan: 'Scan with {wallet.name}',
+    qrCodePanelLinkForDownload: 'Click to go to the download page',
+    qrCodePanelLinkForConnect: 'Click to connect directly',
+    qrCodePanelDownloadTipForReady: 'Scan the QR code to download the wallet.',
+    qrCodePanelDownloadTipForNotReady: "Don't have",
+    walletCardPanelTitle: 'Get {selectedWallet.name}',
+    walletCardAppTitle: '{selectedWallet.name} for Mobile',
+    walletCardAppDesc: 'Use the mobile wallet to explore the world of Ethereum.',
+    walletCardExtensionTitle: '{selectedWallet.name} for {selectedExtension.browserName}',
+    footer: 'Powered by AntChain',
   },
 };
 

diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts
@@ -23,6 +23,18 @@ const localeValues: RequiredLocale = {
     getWalletPanelTitle: '获取钱包',
     getWalletPanelInfoTitle: '没有找到你想要的？',
     getWalletPanelInfoDesc: '在左侧选择钱包，以开始使用不同的钱包提供商。',
+    qrCodePanelTitleForDownload: '下载 {wallet.name}',
+    qrCodePanelTitleForScan: '使用 {wallet.name} 扫描',
+    qrCodePanelLinkForDownload: '点击前往下载页面',
+    qrCodePanelLinkForConnect: '点击直接连接',
+    qrCodePanelDownloadTipForReady: '扫描二维码下载钱包',
+    qrCodePanelDownloadTipForNotReady: '暂无',
+    walletCardPanelTitle: '获取 {selectedWallet.name}',
+    walletCardAppTitle: '在手机使用 {selectedWallet.name}',
+    walletCardAppDesc: '使用移动钱包探索以太坊世界。',
+    walletCardExtensionTitle:
+      '在 {selectedExtension.browserName} 浏览器中使用 {selectedWallet.name}',
+    footer: '蚂蚁链提供技术支持',
   },
 };
 

diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
@@ -188,6 +188,17 @@ export interface RequiredLocale {
     getWalletPanelTitle: string;
     getWalletPanelInfoTitle: string;
     getWalletPanelInfoDesc: string;
+    qrCodePanelTitleForDownload: string;
+    qrCodePanelTitleForScan: string;
+    qrCodePanelLinkForDownload: string;
+    qrCodePanelLinkForConnect: string;
+    qrCodePanelDownloadTipForReady: string;
+    qrCodePanelDownloadTipForNotReady: string;
+    walletCardPanelTitle: string;
+    walletCardAppTitle: string;
+    walletCardAppDesc: string;
+    walletCardExtensionTitle: string;
+    footer: string;
   };
 }
 

diff --git a/packages/web3/src/connect-modal/__tests__/__snapshots__/basic.test.tsx.snap b/packages/web3/src/connect-modal/__tests__/__snapshots__/basic.test.tsx.snap
@@ -1142,7 +1142,7 @@ exports[`ConnectModal with guide > should display default guide 1`] = `
                     <h2
                       class="ant-web3-connect-modal-guide-title"
                     >
-                      What is a Wallet?
+                      What is a wallet?
                     </h2>
                     <div
                       class="ant-web3-connect-modal-guide-list"
@@ -1238,7 +1238,7 @@ exports[`ConnectModal with guide > should display default guide 1`] = `
                       target="_blank"
                     >
                       <span>
-                        Learn More
+                        Learn more
                       </span>
                     </a>
                   </div>
@@ -1679,7 +1679,7 @@ exports[`ConnectModal with guide > should render in dark mode 1`] = `
                       target="_blank"
                     >
                       <span>
-                        Learn More
+                        Learn more
                       </span>
                     </a>
                   </div>
@@ -2120,7 +2120,7 @@ exports[`ConnectModal with guide > should render in light mode 1`] = `
                       target="_blank"
                     >
                       <span>
-                        Learn More
+                        Learn more
                       </span>
                     </a>
                   </div>

diff --git a/packages/web3/src/connect-modal/__tests__/get-wallet.test.tsx b/packages/web3/src/connect-modal/__tests__/get-wallet.test.tsx
@@ -36,7 +36,7 @@ describe('Get wallet', () => {
     fireEvent.click(baseElement.querySelector('.ant-web3-connect-modal-wallet-item')!);
     await waitFor(() => {
       expect(baseElement.querySelector('.ant-web3-connect-modal-get-wallet-btn')?.textContent).toBe(
-        'GET',
+        'Get',
       );
     });
 

diff --git a/packages/web3/src/connect-modal/__tests__/mock/index.ts b/packages/web3/src/connect-modal/__tests__/mock/index.ts
@@ -49,7 +49,7 @@ export const walletList = [
   {
     icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
     name: 'Test Wallet3',
-    remark: '备注3',
+    remark: 'remark 3',
     group: 'Popular',
     app: {
       link: 'https://test.com/xxx',

diff --git a/packages/web3/src/connect-modal/components/ModalPanel.tsx b/packages/web3/src/connect-modal/components/ModalPanel.tsx
@@ -30,6 +30,12 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
     (node) => <h2 className={`${prefixCls}-title`}>{node}</h2>,
   );
 
+  const mergedFooter = mergeReactNodeProps(
+    footer,
+    <div className={`${prefixCls}-footer`}>{intl.messages.footer}</div>,
+    (node) => <div className={`${prefixCls}-footer`}>{node}</div>,
+  );
+
   const updatePanelRoute = React.useCallback((route: PanelRoute, clear: boolean = false) => {
     if (clear) {
       routeStack.current = ['init'];
@@ -75,6 +81,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
         panelRouteBack,
         canBack: routeStack.current.length > 1,
         localeMessage: intl.messages,
+        getMessage: intl.getMessage,
       }}
     >
       <div
@@ -92,7 +99,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
             <div className={`${prefixCls}-list-container`}>
               <WalletList walletList={walletList} groupOrder={groupOrder} />
             </div>
-            {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
+            {mergedFooter}
           </div>
         )}
         {!(panelRoute === 'init' && isSimple) && (

diff --git a/packages/web3/src/connect-modal/components/QrCode.tsx b/packages/web3/src/connect-modal/components/QrCode.tsx
@@ -14,7 +14,8 @@ export type QrCodeProps = {
 
 const QrCode: React.FC<QrCodeProps> = (props) => {
   const { wallet, simple, download } = props;
-  const { prefixCls, updatePanelRoute, updateSelectedWallet } = useContext(connectModalContext);
+  const { prefixCls, updatePanelRoute, updateSelectedWallet, localeMessage, getMessage } =
+    useContext(connectModalContext);
   const [qrCodeValue, setQrCodeValue] = useState('QR code not ready');
   const [loading, setLoading] = useState(false);
 
@@ -42,7 +43,16 @@ const QrCode: React.FC<QrCodeProps> = (props) => {
   };
   return (
     <div className={`${prefixCls}-qr-code-container`}>
-      <MainPanelHeader title={download ? `Download ${wallet.name}` : `Scan with ${wallet.name}`} />
+      <MainPanelHeader
+        title={getMessage(
+          download
+            ? localeMessage.qrCodePanelTitleForDownload
+            : localeMessage.qrCodePanelTitleForScan,
+          {
+            'wallet.name': wallet.name,
+          },
+        )}
+      />
       <div className={`${prefixCls}-qr-code-box`}>
         <QRCode
           className={`${prefixCls}-qr-code`}
@@ -62,7 +72,9 @@ const QrCode: React.FC<QrCodeProps> = (props) => {
         >
           <Space>
             <span>
-              {download ? 'Click to go to the download page' : 'Click to connect directly'}
+              {download
+                ? localeMessage.qrCodePanelLinkForDownload
+                : localeMessage.qrCodePanelLinkForConnect}
             </span>
             <ArrowRightOutlined />
           </Space>
@@ -71,17 +83,17 @@ const QrCode: React.FC<QrCodeProps> = (props) => {
       <div className={`${prefixCls}-qr-code-tips`}>
         {download ? (
           <div className={`${prefixCls}-qr-code-tips-download`}>
-            Scan the QR code to download the wallet.
+            {localeMessage.qrCodePanelDownloadTipForReady}
           </div>
         ) : (
           <>
-            Don&apos;t have {wallet.name}?
+            {localeMessage.qrCodePanelDownloadTipForNotReady} {wallet.name}?
             <Button
               type="default"
               className={`${prefixCls}-get-wallet-btn`}
               onClick={handleGetWallet}
             >
-              GET
+              {localeMessage.getWalletBtnText}
             </Button>
           </>
         )}

diff --git a/packages/web3/src/connect-modal/components/WalletCard.tsx b/packages/web3/src/connect-modal/components/WalletCard.tsx
@@ -34,7 +34,8 @@ const CardItem: React.FC<{
 };
 
 const WalletCard: React.FC = () => {
-  const { prefixCls, selectedWallet, updatePanelRoute } = useContext(connectModalContext);
+  const { prefixCls, selectedWallet, updatePanelRoute, localeMessage, getMessage } =
+    useContext(connectModalContext);
   const selectedExtension = useMemo(
     () =>
       selectedWallet?.extensions
@@ -44,7 +45,11 @@ const WalletCard: React.FC = () => {
   );
   return (
     <>
-      <MainPanelHeader title={`Get ${selectedWallet?.name}`} />
+      <MainPanelHeader
+        title={getMessage(localeMessage.walletCardPanelTitle, {
+          'selectedWallet.name': selectedWallet!.name,
+        })}
+      />
       <div className={`${prefixCls}-card-list`}>
         {selectedExtension && (
           <CardItem
@@ -56,7 +61,10 @@ const WalletCard: React.FC = () => {
                 selectedExtension.browserIcon
               )
             }
-            title={`${selectedWallet!.name} for ${selectedExtension.browserName}`}
+            title={getMessage(localeMessage.walletCardExtensionTitle, {
+              'selectedWallet.name': selectedWallet!.name,
+              'selectedExtension.browserName': selectedExtension.browserName,
+            })}
             desc={selectedExtension.description}
           />
         )}
@@ -69,8 +77,10 @@ const WalletCard: React.FC = () => {
                 selectedWallet.icon
               )
             }
-            title={`${selectedWallet.name} for Mobile`}
-            desc="Use the mobile wallet to explore the world of Ethereum."
+            title={getMessage(localeMessage.walletCardAppTitle, {
+              'selectedWallet.name': selectedWallet.name,
+            })}
+            desc={localeMessage.walletCardAppDesc}
             onClick={() => {
               updatePanelRoute('downloadQrCode');
             }}

diff --git a/packages/web3/src/connect-modal/context/index.ts b/packages/web3/src/connect-modal/context/index.ts
@@ -12,6 +12,7 @@ export type ConnectModalContext = {
   panelRouteBack: () => void;
   canBack: boolean;
   localeMessage: IntlType<'ConnectModal'>['messages'];
+  getMessage: IntlType<'ConnectModal'>['getMessage'];
 };
 
 export const connectModalContext = React.createContext<ConnectModalContext>({
@@ -23,6 +24,7 @@ export const connectModalContext = React.createContext<ConnectModalContext>({
   panelRouteBack: () => {},
   canBack: false,
   localeMessage: defaultLocale.ConnectModal,
+  getMessage: () => '',
 });
 
 export const ConnectModalContextProvider = connectModalContext.Provider;
diff --git a/packages/web3/src/connect-modal/demos/basic.tsx b/packages/web3/src/connect-modal/demos/basic.tsx
@@ -25,7 +25,7 @@ const walletList: Wallet[] = [
   {
     icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
     name: 'Test Wallet3',
-    remark: '备注3',
+    remark: 'remark 3',
     app: {
       link: 'https://test.com/xxx',
     },
@@ -59,8 +59,6 @@ const App: React.FC = () => {
       </Button>
       <ConnectModal
         open={open}
-        title="Connect Wallet"
-        footer="Powered by AntChain"
         groupOrder={groupOrder}
         walletList={walletList}
         onCancel={() => setOpen(false)}

diff --git a/packages/web3/src/connect-modal/demos/customGuide.tsx b/packages/web3/src/connect-modal/demos/customGuide.tsx
@@ -25,7 +25,7 @@ const walletList: Wallet[] = [
   {
     icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
     name: 'Test Wallet3',
-    remark: '备注3',
+    remark: 'remark 3',
     app: {
       link: 'https://test.com/xxx',
     },
@@ -89,8 +89,6 @@ const App: React.FC = () => {
       </Button>
       <ConnectModal
         open={open}
-        title="Connect Wallet"
-        footer="Powered by AntChain"
         groupOrder={groupOrder}
         walletList={walletList}
         onCancel={() => setOpen(false)}

diff --git a/packages/web3/src/connect-modal/demos/panel.tsx b/packages/web3/src/connect-modal/demos/panel.tsx
@@ -25,7 +25,7 @@ const walletList: Wallet[] = [
   {
     icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
     name: 'Test Wallet3',
-    remark: '备注3',
+    remark: 'remark 3',
     app: {
       link: 'https://test.com/xxx',
     },
@@ -60,12 +60,7 @@ const App: React.FC = () => {
         padding: 0,
       }}
     >
-      <ConnectModal.ModalPanel
-        title="ConnectModal"
-        footer="Powered by AntChain"
-        groupOrder={groupOrder}
-        walletList={walletList}
-      />
+      <ConnectModal.ModalPanel groupOrder={groupOrder} walletList={walletList} />
     </Card>
   );
 };

diff --git a/packages/web3/src/connect-modal/demos/simple.tsx b/packages/web3/src/connect-modal/demos/simple.tsx
@@ -25,7 +25,7 @@ const walletList: Wallet[] = [
   {
     icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
     name: 'Test Wallet3',
-    remark: '备注3',
+    remark: 'remark 3',
     app: {
       link: 'https://test.com/xxx',
     },
@@ -60,8 +60,6 @@ const App: React.FC = () => {
       </Button>
       <ConnectModal
         open={open}
-        title="ConnectModal"
-        footer="Powered by AntChain"
         groupOrder={groupOrder}
         walletList={walletList}
         onCancel={() => setOpen(false)}

diff --git a/packages/web3/src/connect-modal/style/index.tsx b/packages/web3/src/connect-modal/style/index.tsx
@@ -316,7 +316,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
               justifyContent: 'center',
               marginBlockEnd: 16,
               boxSizing: 'border-box',
-              paddingInline: 58,
+              paddingInline: 30,
               background: token.cardBg,
               borderRadius: 16,
               cursor: 'pointer',

diff --git a/packages/web3/src/hooks/useIntl.tsx b/packages/web3/src/hooks/useIntl.tsx
@@ -24,7 +24,7 @@ export default function useIntl<T extends ComponentName>(
     messages: locale,
     getMessage: (message, values) => {
       if (values) {
-        return message.replace(/\{(\w+)\}/g, (_, key) => values[key]);
+        return message.replace(/\{([\w\.]+)\}/g, (_, key) => values[key]);
       }
       return message;
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ describe('Get wallet', () => { @@
         fireEvent.click(baseElement.querySelector('.ant-web3-connect-modal-wallet-item')!);
         await waitFor(() => {
           expect(baseElement.querySelector('.ant-web3-connect-modal-get-wallet-btn')?.textContent).toBe(
-            'GET',
+            'Get',
           );
         });
@@ Expand Down @@