From 41dfdb9f75685e79b77f84d560c0f020b768ef8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Thu, 28 Dec 2023 08:35:28 +0800 Subject: [PATCH 1/9] feat: intl --- packages/common/src/locale/en_US.ts | 20 +++++++- packages/common/src/locale/index.ts | 1 + packages/common/src/locale/zh_CN.ts | 18 ++++++- packages/common/src/types.ts | 17 +++++++ .../src/web3-config-provider/context.ts | 2 +- .../common/src/web3-config-provider/index.tsx | 2 +- .../components/DefaultGuidePanel.tsx | 49 +++++++++---------- .../components/GetWalletPanel.tsx | 13 ++--- .../connect-modal/components/MainPanel.tsx | 2 +- .../connect-modal/components/ModalPanel.tsx | 7 ++- .../web3/src/connect-modal/context/index.ts | 4 ++ packages/web3/src/connect-modal/interface.ts | 7 ++- packages/web3/src/hooks/useIntl.tsx | 28 ++++------- 13 files changed, 112 insertions(+), 58 deletions(-) diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts index faa80f474..e653e2409 100644 --- a/packages/common/src/locale/en_US.ts +++ b/packages/common/src/locale/en_US.ts @@ -1,4 +1,4 @@ -import { RequiredLocale } from '../types'; +import type { RequiredLocale } from '../types'; const localeValues: RequiredLocale = { ConnectButton: { @@ -8,6 +8,24 @@ const localeValues: RequiredLocale = { addressCopied: 'Address Copied!', walletAddress: 'Wallet address', }, + ConnectModal: { + title: 'Connect Wallet', + guideTitle: 'What is a wallet?', + guideInfos1Title: 'Manage your private key and assets', + guideInfos1Desc: 'Manage your private key and the assets of the corresponding chain address', + guideInfos2Title: 'Help you connect to DApp', + guideInfos2Desc: 'Authorize DApp to get your address, similar to login', + guideInfos3Title: 'Call smart contract', + guideInfos3Desc: + 'Through authorization of private key signature, initiate interaction with smart contract on the chain', + guideInfosGetWalletBtnText: 'Get Wallet', + guideInfosMoreLinkText: 'Learn more', + getWalletBtnText: 'Get', + 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.', + }, }; export default localeValues; diff --git a/packages/common/src/locale/index.ts b/packages/common/src/locale/index.ts index bb1f93c73..562075d51 100644 --- a/packages/common/src/locale/index.ts +++ b/packages/common/src/locale/index.ts @@ -1,2 +1,3 @@ export { default as en_US } from './en_US'; export { default as zh_CN } from './zh_CN'; +export { default as defaultLocale } from './default'; diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts index f43b7f729..2a3f4631b 100644 --- a/packages/common/src/locale/zh_CN.ts +++ b/packages/common/src/locale/zh_CN.ts @@ -1,4 +1,4 @@ -import { RequiredLocale } from '../types'; +import type { RequiredLocale } from '../types'; const localeValues: RequiredLocale = { ConnectButton: { @@ -8,6 +8,22 @@ const localeValues: RequiredLocale = { addressCopied: '地址复制成功！', walletAddress: '钱包地址', }, + ConnectModal: { + title: '连接钱包', + guideTitle: '什么是钱包？', + guideInfos1Title: '管理私钥和资产', + guideInfos1Desc: '管理私钥和对应链地址的资产', + guideInfos2Title: '帮助你连接 DApp', + guideInfos2Desc: '授权 DApp 获取你的地址，类似登录', + guideInfos3Title: '调用智能合约', + guideInfos3Desc: '通过授权私钥签名，发起与链上智能合约的交互', + guideInfosGetWalletBtnText: '获取钱包', + guideInfosMoreLinkText: '了解更多', + getWalletBtnText: '获取', + getWalletPanelTitle: '获取钱包', + getWalletPanelInfoTitle: '没有找到你想要的？', + getWalletPanelInfoDesc: '在左侧选择钱包，以开始使用不同的钱包提供商。', + }, }; export default localeValues; diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 1c337de53..c65ac75f3 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -173,8 +173,25 @@ export interface RequiredLocale { addressCopied: string; walletAddress: string; }; + ConnectModal: { + title: string; + guideTitle: string; + guideInfos1Title: string; + guideInfos1Desc: string; + guideInfos2Title: string; + guideInfos2Desc: string; + guideInfos3Title: string; + guideInfos3Desc: string; + guideInfosGetWalletBtnText: string; + guideInfosMoreLinkText: string; + getWalletBtnText: string; + getWalletPanelTitle: string; + getWalletPanelInfoTitle: string; + getWalletPanelInfoDesc: string; + }; } export interface Locale { ConnectButton?: Partial; + ConnectModal?: Partial; } diff --git a/packages/common/src/web3-config-provider/context.ts b/packages/common/src/web3-config-provider/context.ts index 8841bcd71..bf9d67d0e 100644 --- a/packages/common/src/web3-config-provider/context.ts +++ b/packages/common/src/web3-config-provider/context.ts @@ -1,6 +1,6 @@ import React from 'react'; import type { RequiredLocale, Locale, UniversalWeb3ProviderInterface } from '../types'; -import defaultLocale from '../locale/en_US'; +import defaultLocale from '../locale/default'; export interface Web3ConfigProviderProps extends UniversalWeb3ProviderInterface { children?: React.ReactNode; diff --git a/packages/common/src/web3-config-provider/index.tsx b/packages/common/src/web3-config-provider/index.tsx index 352d69291..60febff34 100644 --- a/packages/common/src/web3-config-provider/index.tsx +++ b/packages/common/src/web3-config-provider/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ConfigContext, type Web3ConfigProviderProps, type ConfigConsumerProps } from './context'; -import defaultLocale from '../locale/en_US'; +import defaultLocale from '../locale/default'; const ProviderChildren: React.FC = ( props, diff --git a/packages/web3/src/connect-modal/components/DefaultGuidePanel.tsx b/packages/web3/src/connect-modal/components/DefaultGuidePanel.tsx index ff799b911..32326ed95 100644 --- a/packages/web3/src/connect-modal/components/DefaultGuidePanel.tsx +++ b/packages/web3/src/connect-modal/components/DefaultGuidePanel.tsx @@ -3,34 +3,33 @@ import React, { useContext } from 'react'; import { connectModalContext } from '../context'; import type { ConnectModalProps } from '../interface'; -const defaultGuide: ConnectModalProps['guide'] = { - title: 'What is a Wallet?', - infos: [ - { - icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*ApSUSaoUa_sAAAAAAAAAAAAADlrGAQ/original', - title: 'Manage your private key and assets', - description: 'Manage your private key and the assets of the corresponding chain address', - }, - { - icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*3lD7QpnbCPcAAAAAAAAAAAAADlrGAQ/original', - title: 'Help you connect to DApp', - description: 'Authorize DApp to get your address, similar to login', - }, - { - icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*gTROQqEY_TcAAAAAAAAAAAAADlrGAQ/original', - title: 'Call smart contract', - description: - 'Through authorization of private key signature, initiate interaction with smart contract on the chain', - }, - ], - moreLink: 'https://ethereum.org/en/wallets/', - getWalletBtnText: 'Get a Wallet', - moreLinkText: 'Learn More', -}; - const DefaultGuidePanel: React.FC<{ guide?: ConnectModalProps['guide']; }> = (props) => { + const { localeMessage } = useContext(connectModalContext); + const defaultGuide: ConnectModalProps['guide'] = { + title: localeMessage.guideTitle, + infos: [ + { + icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*ApSUSaoUa_sAAAAAAAAAAAAADlrGAQ/original', + title: localeMessage.guideInfos1Title, + description: localeMessage.guideInfos1Desc, + }, + { + icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*3lD7QpnbCPcAAAAAAAAAAAAADlrGAQ/original', + title: localeMessage.guideInfos2Title, + description: localeMessage.guideInfos2Desc, + }, + { + icon: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*gTROQqEY_TcAAAAAAAAAAAAADlrGAQ/original', + title: localeMessage.guideInfos3Title, + description: localeMessage.guideInfos3Desc, + }, + ], + moreLink: 'https://ethereum.org/en/wallets/', + getWalletBtnText: localeMessage.guideInfosGetWalletBtnText, + moreLinkText: localeMessage.guideInfosMoreLinkText, + }; const { guide = defaultGuide } = props; const { prefixCls, updatePanelRoute } = useContext(connectModalContext); diff --git a/packages/web3/src/connect-modal/components/GetWalletPanel.tsx b/packages/web3/src/connect-modal/components/GetWalletPanel.tsx index 74ff44725..7057e48ac 100644 --- a/packages/web3/src/connect-modal/components/GetWalletPanel.tsx +++ b/packages/web3/src/connect-modal/components/GetWalletPanel.tsx @@ -8,8 +8,9 @@ export type GetWalletPanelProps = Pick; const GetWalletPanel: React.FC = (props) => { const { walletList = [] } = props; - const [messageApi, contextHolder] = message.useMessage(); - const { prefixCls, updateSelectedWallet, updatePanelRoute } = useContext(connectModalContext); + const [, contextHolder] = message.useMessage(); + const { prefixCls, updateSelectedWallet, updatePanelRoute, localeMessage } = + useContext(connectModalContext); const list = ( <> @@ -32,7 +33,7 @@ const GetWalletPanel: React.FC = (props) => { updatePanelRoute('wallet'); }} > - Get + {localeMessage.getWalletBtnText} , ]} > @@ -50,15 +51,15 @@ const GetWalletPanel: React.FC = (props) => { />
-

Not what you're looking for?

-
Select a wallet on the left to get started with a different wallet provider.
+

{localeMessage.getWalletPanelInfoTitle}

+
{localeMessage.getWalletPanelInfoDesc}
); return (
- + {list}
); diff --git a/packages/web3/src/connect-modal/components/MainPanel.tsx b/packages/web3/src/connect-modal/components/MainPanel.tsx index f56401333..ff86cdaa5 100644 --- a/packages/web3/src/connect-modal/components/MainPanel.tsx +++ b/packages/web3/src/connect-modal/components/MainPanel.tsx @@ -6,7 +6,7 @@ import GetWalletPanel from './GetWalletPanel'; import QrCode from './QrCode'; import WalletCard from './WalletCard'; -export type MainPanelProps = Pick & { +export type MainPanelProps = Pick & { simple: boolean; }; diff --git a/packages/web3/src/connect-modal/components/ModalPanel.tsx b/packages/web3/src/connect-modal/components/ModalPanel.tsx index bd7d11bb6..614212b91 100644 --- a/packages/web3/src/connect-modal/components/ModalPanel.tsx +++ b/packages/web3/src/connect-modal/components/ModalPanel.tsx @@ -9,11 +9,13 @@ import { ConnectModalContextProvider } from '../context'; import { useStyle } from '../style'; import useMode from '../hooks/useMode'; import type { PanelRoute, Wallet } from '../interface'; +import useIntl from '../../hooks/useIntl'; export type ModalPanelProps = ConnectModalProps; const ModalPanel: React.FC = (props) => { - const { title, footer, walletList, groupOrder, guide, mode, onWalletSelected } = props; + const { title, footer, walletList, groupOrder, guide, mode, onWalletSelected, locale } = props; + const intl = useIntl('ConnectModal', locale); const [panelRoute, setPanelRoute] = React.useState('init'); const routeStack = React.useRef(['init']); @@ -24,7 +26,7 @@ const ModalPanel: React.FC = (props) => { const mergedTitle = mergeReactNodeProps( title, -

Connect Modal

, +

{intl.messages.title}

, (node) =>

{node}

, ); @@ -72,6 +74,7 @@ const ModalPanel: React.FC = (props) => { updatePanelRoute, panelRouteBack, canBack: routeStack.current.length > 1, + localeMessage: intl.messages, }} >
void; panelRouteBack: () => void; canBack: boolean; + localeMessage: IntlType<'ConnectModal'>['messages']; }; export const connectModalContext = React.createContext({ @@ -19,6 +22,7 @@ export const connectModalContext = React.createContext({ updatePanelRoute: () => {}, panelRouteBack: () => {}, canBack: false, + localeMessage: defaultLocale.ConnectModal, }); export const ConnectModalContextProvider = connectModalContext.Provider; diff --git a/packages/web3/src/connect-modal/interface.ts b/packages/web3/src/connect-modal/interface.ts index e2053f45a..fbb524ae1 100644 --- a/packages/web3/src/connect-modal/interface.ts +++ b/packages/web3/src/connect-modal/interface.ts @@ -1,6 +1,6 @@ import type React from 'react'; import type { ModalProps } from 'antd'; -import type { Wallet } from '@ant-design/web3-common'; +import type { Locale, Wallet } from '@ant-design/web3-common'; import { get } from 'lodash'; export type { Wallet, WalletExtensionItem } from '@ant-design/web3-common'; @@ -96,6 +96,11 @@ export type ConnectModalProps = ModalProps & { * @descEn modal mode */ mode?: 'simple' | 'normal' | 'auto'; + /** + * @desc 自定义本地化配置 + * @descEn Custom localization configuration + */ + locale?: Locale['ConnectModal']; }; export type PanelRoute = 'init' | 'guide' | 'getWallet' | 'wallet' | 'qrCode' | 'downloadQrCode'; diff --git a/packages/web3/src/hooks/useIntl.tsx b/packages/web3/src/hooks/useIntl.tsx index 63ee1070e..8e05a64f1 100644 --- a/packages/web3/src/hooks/useIntl.tsx +++ b/packages/web3/src/hooks/useIntl.tsx @@ -4,22 +4,17 @@ import type { Locale, ConfigConsumerProps, RequiredLocale } from '@ant-design/we type ComponentName = keyof Locale; -interface IntlType { - messages: RequiredLocale[ComponentName]; - getMessage: ( - message: RequiredLocale[ComponentName][keyof RequiredLocale[ComponentName]], - values?: { - [key: string]: string; - }, - ) => string; +interface IntlType { + messages: RequiredLocale[T]; + getMessage: (message: string, values?: Record) => string; } -export default function useIntl( - componentName: ComponentName, - componentLocale?: Locale[ComponentName], -): IntlType { +export default function useIntl( + componentName: T, + componentLocale?: Locale[T], +): IntlType { const context = React.useContext(ConfigContext); - const locale: RequiredLocale[ComponentName] = { + const locale: RequiredLocale[T] = { ...context.defaultLocale[componentName], ...context?.locale?.[componentName], ...componentLocale, @@ -27,12 +22,7 @@ export default function useIntl( return { messages: locale, - getMessage: ( - message: (typeof locale)[keyof typeof locale], - values?: { - [key: string]: string; - }, - ) => { + getMessage: (message, values) => { if (values) { return message.replace(/\{(\w+)\}/g, (_, key) => values[key]); } From c11a6880250f3cd8464eb1745e36c8a1487162e5 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 15:00:30 +0800 Subject: [PATCH 2/9] feat: ConnectModal support intl --- .dumi/theme/layouts/GlobalLayout.tsx | 12 ++++++---- packages/common/src/locale/en_US.ts | 17 ++++++++++--- packages/common/src/locale/zh_CN.ts | 12 ++++++++++ packages/common/src/types.ts | 11 +++++++++ .../__snapshots__/basic.test.tsx.snap | 8 +++---- .../__tests__/get-wallet.test.tsx | 2 +- .../src/connect-modal/__tests__/mock/index.ts | 2 +- .../connect-modal/components/ModalPanel.tsx | 9 ++++++- .../src/connect-modal/components/QrCode.tsx | 24 ++++++++++++++----- .../connect-modal/components/WalletCard.tsx | 20 ++++++++++++---- .../web3/src/connect-modal/context/index.ts | 2 ++ .../web3/src/connect-modal/demos/basic.tsx | 4 +--- .../src/connect-modal/demos/customGuide.tsx | 4 +--- .../web3/src/connect-modal/demos/panel.tsx | 9 ++----- .../web3/src/connect-modal/demos/simple.tsx | 4 +--- .../web3/src/connect-modal/style/index.tsx | 2 +- packages/web3/src/hooks/useIntl.tsx | 2 +- 17 files changed, 101 insertions(+), 43 deletions(-) diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 46d551e02..1f37295df 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -1,5 +1,6 @@ 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'; @@ -7,11 +8,14 @@ const GlobalLayout: React.FC = () => { const outlet = useOutlet(); const { pathname } = useLocation(); const [color] = usePrefersColor(); + const { locale } = useIntl(); return ( - -
{outlet}
- + + +
{outlet}
+ + ); }; diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts index e653e2409..b084b92c6 100644 --- 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'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 index 2a3f4631b..da0cbfd86 100644 --- 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 index c65ac75f3..c9b330abb 100644 --- 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 index c4abd9d32..d8c73bbb0 100644 --- 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`] = `

- What is a Wallet? + What is a wallet?

should display default guide 1`] = ` target="_blank" > - Learn More + Learn more
@@ -1679,7 +1679,7 @@ exports[`ConnectModal with guide > should render in dark mode 1`] = ` target="_blank" > - Learn More + Learn more
@@ -2120,7 +2120,7 @@ exports[`ConnectModal with guide > should render in light mode 1`] = ` target="_blank" > - Learn More + Learn more diff --git a/packages/web3/src/connect-modal/__tests__/get-wallet.test.tsx b/packages/web3/src/connect-modal/__tests__/get-wallet.test.tsx index 1cd837ee1..aeee1c3a0 100644 --- 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 index 3c8ff3c2a..90f99ce94 100644 --- 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 index 614212b91..503a290c9 100644 --- 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 = (props) => { (node) =>

{node}

, ); + const mergedFooter = mergeReactNodeProps( + footer, +
{intl.messages.footer}
, + (node) =>
{node}
, + ); + const updatePanelRoute = React.useCallback((route: PanelRoute, clear: boolean = false) => { if (clear) { routeStack.current = ['init']; @@ -75,6 +81,7 @@ const ModalPanel: React.FC = (props) => { panelRouteBack, canBack: routeStack.current.length > 1, localeMessage: intl.messages, + getMessage: intl.getMessage, }} >
= (props) => {
- {footer &&
{footer}
} + {mergedFooter}
)} {!(panelRoute === 'init' && isSimple) && ( diff --git a/packages/web3/src/connect-modal/components/QrCode.tsx b/packages/web3/src/connect-modal/components/QrCode.tsx index 8d7c5201d..d02675637 100644 --- 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 = (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 = (props) => { }; return (
- +
= (props) => { > - {download ? 'Click to go to the download page' : 'Click to connect directly'} + {download + ? localeMessage.qrCodePanelLinkForDownload + : localeMessage.qrCodePanelLinkForConnect} @@ -71,17 +83,17 @@ const QrCode: React.FC = (props) => {
{download ? (
- Scan the QR code to download the wallet. + {localeMessage.qrCodePanelDownloadTipForReady}
) : ( <> - Don't have {wallet.name}? + {localeMessage.qrCodePanelDownloadTipForNotReady} {wallet.name}? )} diff --git a/packages/web3/src/connect-modal/components/WalletCard.tsx b/packages/web3/src/connect-modal/components/WalletCard.tsx index 6144f918a..9cd139629 100644 --- 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 ( <> - +
{selectedExtension && ( { 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 index a1e1dcea2..81bb6822b 100644 --- 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({ @@ -23,6 +24,7 @@ export const connectModalContext = React.createContext({ 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 index b94e0e4bc..eede5fa55 100644 --- 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 = () => { setOpen(false)} diff --git a/packages/web3/src/connect-modal/demos/customGuide.tsx b/packages/web3/src/connect-modal/demos/customGuide.tsx index 9a16d9dda..6fbd87d2e 100644 --- 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 = () => { setOpen(false)} diff --git a/packages/web3/src/connect-modal/demos/panel.tsx b/packages/web3/src/connect-modal/demos/panel.tsx index af849aed6..5628add68 100644 --- 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, }} > - + ); }; diff --git a/packages/web3/src/connect-modal/demos/simple.tsx b/packages/web3/src/connect-modal/demos/simple.tsx index 43151462d..52f8628e4 100644 --- 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 = () => { setOpen(false)} diff --git a/packages/web3/src/connect-modal/style/index.tsx b/packages/web3/src/connect-modal/style/index.tsx index 2e67a906a..e0a67185f 100644 --- 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 index 8e05a64f1..94807c05e 100644 --- a/packages/web3/src/hooks/useIntl.tsx +++ b/packages/web3/src/hooks/useIntl.tsx @@ -24,7 +24,7 @@ export default function useIntl( 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; }, From 4c8faced6d79a5a1791558ef7efd82afd96941f4 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 15:01:22 +0800 Subject: [PATCH 3/9] chore: update changelog --- .changeset/eight-lizards-peel.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/eight-lizards-peel.md diff --git a/.changeset/eight-lizards-peel.md b/.changeset/eight-lizards-peel.md new file mode 100644 index 000000000..c595a883c --- /dev/null +++ b/.changeset/eight-lizards-peel.md @@ -0,0 +1,6 @@ +--- +'@ant-design/web3-common': patch +'@ant-design/web3': patch +--- + +feat: ConnectModal support Intl From fe7ee1bacab65affaf57363df69789c5dc5d0c39 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 15:05:14 +0800 Subject: [PATCH 4/9] feat: optimize code --- packages/common/src/locale/en_US.ts | 2 +- .../connect-modal/__tests__/__snapshots__/basic.test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts index b084b92c6..8b85d02e8 100644 --- a/packages/common/src/locale/en_US.ts +++ b/packages/common/src/locale/en_US.ts @@ -10,7 +10,7 @@ const localeValues: RequiredLocale = { }, ConnectModal: { title: 'Connect Wallet', - guideTitle: 'What is a wallet?', + guideTitle: 'What is a Wallet?', guideInfos1Title: 'Manage your private key and assets', guideInfos1Desc: 'Manage your private key and the assets of the corresponding chain address', guideInfos2Title: 'Help you connect to DApp', 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 index d8c73bbb0..2b02cc2aa 100644 --- 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`] = `

- What is a wallet? + What is a Wallet?

Date: Thu, 28 Dec 2023 15:09:02 +0800 Subject: [PATCH 5/9] feat: optimize code --- packages/common/src/locale/en_US.ts | 2 +- .../__tests__/__snapshots__/basic.test.tsx.snap | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts index 8b85d02e8..531e252c7 100644 --- a/packages/common/src/locale/en_US.ts +++ b/packages/common/src/locale/en_US.ts @@ -19,7 +19,7 @@ const localeValues: RequiredLocale = { guideInfos3Desc: 'Through authorization of private key signature, initiate interaction with smart contract on the chain', guideInfosGetWalletBtnText: 'Get a Wallet', - guideInfosMoreLinkText: 'Learn more', + guideInfosMoreLinkText: 'Learn More', getWalletBtnText: 'Get', getWalletPanelTitle: 'Get a Wallet', getWalletPanelInfoTitle: "Not what you're looking for?", 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 index 2b02cc2aa..c4abd9d32 100644 --- a/packages/web3/src/connect-modal/__tests__/__snapshots__/basic.test.tsx.snap +++ b/packages/web3/src/connect-modal/__tests__/__snapshots__/basic.test.tsx.snap @@ -1238,7 +1238,7 @@ exports[`ConnectModal with guide > should display default guide 1`] = ` target="_blank" > - Learn more + Learn More
@@ -1679,7 +1679,7 @@ exports[`ConnectModal with guide > should render in dark mode 1`] = ` target="_blank" > - Learn more + Learn More
@@ -2120,7 +2120,7 @@ exports[`ConnectModal with guide > should render in light mode 1`] = ` target="_blank" > - Learn more + Learn More
From b2d39969097a41c0c84e7ee66f6b833d30e56628 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 15:34:32 +0800 Subject: [PATCH 6/9] feat: optimize code --- packages/web3/src/hooks/useIntl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web3/src/hooks/useIntl.tsx b/packages/web3/src/hooks/useIntl.tsx index 94807c05e..855a883f6 100644 --- a/packages/web3/src/hooks/useIntl.tsx +++ b/packages/web3/src/hooks/useIntl.tsx @@ -9,7 +9,7 @@ interface IntlType { getMessage: (message: string, values?: Record) => string; } -export default function useIntl( +export default function useIntl( componentName: T, componentLocale?: Locale[T], ): IntlType { From 03f880f3fa0fec40d7c384c4e1ce30a7a47dd9e0 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 15:40:50 +0800 Subject: [PATCH 7/9] feat: optimize code --- packages/web3/src/hooks/useIntl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web3/src/hooks/useIntl.tsx b/packages/web3/src/hooks/useIntl.tsx index 855a883f6..9eadd06a6 100644 --- a/packages/web3/src/hooks/useIntl.tsx +++ b/packages/web3/src/hooks/useIntl.tsx @@ -4,7 +4,7 @@ import type { Locale, ConfigConsumerProps, RequiredLocale } from '@ant-design/we type ComponentName = keyof Locale; -interface IntlType { +interface IntlType { messages: RequiredLocale[T]; getMessage: (message: string, values?: Record) => string; } From 35d2b4ad451574fe2646cd581768487d7454b435 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 17:36:31 +0800 Subject: [PATCH 8/9] feat: optimize code --- packages/common/src/locale/en_US.ts | 11 +++++------ packages/common/src/locale/zh_CN.ts | 1 - packages/common/src/types.ts | 1 - .../web3/src/connect-modal/components/ModalPanel.tsx | 8 +------- packages/web3/src/connect-modal/components/QrCode.tsx | 2 +- .../web3/src/connect-modal/components/WalletCard.tsx | 8 ++++---- packages/web3/src/connect-modal/demos/basic.tsx | 3 +++ 7 files changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts index 531e252c7..032b9df43 100644 --- a/packages/common/src/locale/en_US.ts +++ b/packages/common/src/locale/en_US.ts @@ -25,17 +25,16 @@ const localeValues: RequiredLocale = { 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}', + qrCodePanelTitleForDownload: 'Download {walletName}', + qrCodePanelTitleForScan: 'Scan with {walletName}', 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', + walletCardPanelTitle: 'Get {selectedWalletName}', + walletCardAppTitle: '{selectedWalletName} for Mobile', walletCardAppDesc: 'Use the mobile wallet to explore the world of Ethereum.', - walletCardExtensionTitle: '{selectedWallet.name} for {selectedExtension.browserName}', - footer: 'Powered by AntChain', + walletCardExtensionTitle: '{selectedWalletName} for {selectedExtensionBrowserName}', }, }; diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts index da0cbfd86..f6b94b80a 100644 --- a/packages/common/src/locale/zh_CN.ts +++ b/packages/common/src/locale/zh_CN.ts @@ -34,7 +34,6 @@ const localeValues: RequiredLocale = { walletCardAppDesc: '使用移动钱包探索以太坊世界。', walletCardExtensionTitle: '在 {selectedExtension.browserName} 浏览器中使用 {selectedWallet.name}', - footer: '蚂蚁链提供技术支持', }, }; diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index c9b330abb..3030fe3f9 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -198,7 +198,6 @@ export interface RequiredLocale { walletCardAppTitle: string; walletCardAppDesc: string; walletCardExtensionTitle: string; - footer: string; }; } diff --git a/packages/web3/src/connect-modal/components/ModalPanel.tsx b/packages/web3/src/connect-modal/components/ModalPanel.tsx index 503a290c9..ba6b29684 100644 --- a/packages/web3/src/connect-modal/components/ModalPanel.tsx +++ b/packages/web3/src/connect-modal/components/ModalPanel.tsx @@ -30,12 +30,6 @@ const ModalPanel: React.FC = (props) => { (node) =>

{node}

, ); - const mergedFooter = mergeReactNodeProps( - footer, -
{intl.messages.footer}
, - (node) =>
{node}
, - ); - const updatePanelRoute = React.useCallback((route: PanelRoute, clear: boolean = false) => { if (clear) { routeStack.current = ['init']; @@ -99,7 +93,7 @@ const ModalPanel: React.FC = (props) => {
- {mergedFooter} + {footer &&
{footer}
}
)} {!(panelRoute === 'init' && isSimple) && ( diff --git a/packages/web3/src/connect-modal/components/QrCode.tsx b/packages/web3/src/connect-modal/components/QrCode.tsx index d02675637..6dd27af45 100644 --- a/packages/web3/src/connect-modal/components/QrCode.tsx +++ b/packages/web3/src/connect-modal/components/QrCode.tsx @@ -49,7 +49,7 @@ const QrCode: React.FC = (props) => { ? localeMessage.qrCodePanelTitleForDownload : localeMessage.qrCodePanelTitleForScan, { - 'wallet.name': wallet.name, + walletName: wallet.name, }, )} /> diff --git a/packages/web3/src/connect-modal/components/WalletCard.tsx b/packages/web3/src/connect-modal/components/WalletCard.tsx index 9cd139629..4f331ef32 100644 --- a/packages/web3/src/connect-modal/components/WalletCard.tsx +++ b/packages/web3/src/connect-modal/components/WalletCard.tsx @@ -47,7 +47,7 @@ const WalletCard: React.FC = () => { <>
@@ -62,8 +62,8 @@ const WalletCard: React.FC = () => { ) } title={getMessage(localeMessage.walletCardExtensionTitle, { - 'selectedWallet.name': selectedWallet!.name, - 'selectedExtension.browserName': selectedExtension.browserName, + selectedWalletName: selectedWallet!.name, + selectedExtensionBrowserName: selectedExtension.browserName, })} desc={selectedExtension.description} /> @@ -78,7 +78,7 @@ const WalletCard: React.FC = () => { ) } title={getMessage(localeMessage.walletCardAppTitle, { - 'selectedWallet.name': selectedWallet.name, + selectedWalletName: selectedWallet.name, })} desc={localeMessage.walletCardAppDesc} onClick={() => { diff --git a/packages/web3/src/connect-modal/demos/basic.tsx b/packages/web3/src/connect-modal/demos/basic.tsx index eede5fa55..f0b7ca805 100644 --- a/packages/web3/src/connect-modal/demos/basic.tsx +++ b/packages/web3/src/connect-modal/demos/basic.tsx @@ -3,6 +3,7 @@ import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-asse import { Button } from 'antd'; import React from 'react'; import type { Wallet } from '../interface'; +import { useIntl } from 'dumi'; const walletList: Wallet[] = [ metadata_MetaMask, @@ -52,6 +53,7 @@ const groupOrder = (a: string, b: string) => { const App: React.FC = () => { const [open, setOpen] = React.useState(false); + const { locale } = useIntl(); return ( <> setOpen(false)} From 1a08f2666cf9d5f3f66e94f4b7acf59f1ab4b09b Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 28 Dec 2023 17:38:03 +0800 Subject: [PATCH 9/9] feat: optimize code --- packages/common/src/locale/zh_CN.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts index f6b94b80a..3a89c1b21 100644 --- a/packages/common/src/locale/zh_CN.ts +++ b/packages/common/src/locale/zh_CN.ts @@ -23,17 +23,16 @@ const localeValues: RequiredLocale = { getWalletPanelTitle: '获取钱包', getWalletPanelInfoTitle: '没有找到你想要的？', getWalletPanelInfoDesc: '在左侧选择钱包，以开始使用不同的钱包提供商。', - qrCodePanelTitleForDownload: '下载 {wallet.name}', - qrCodePanelTitleForScan: '使用 {wallet.name} 扫描', + qrCodePanelTitleForDownload: '下载 {walletName}', + qrCodePanelTitleForScan: '使用 {walletName} 扫描', qrCodePanelLinkForDownload: '点击前往下载页面', qrCodePanelLinkForConnect: '点击直接连接', qrCodePanelDownloadTipForReady: '扫描二维码下载钱包', qrCodePanelDownloadTipForNotReady: '暂无', - walletCardPanelTitle: '获取 {selectedWallet.name}', - walletCardAppTitle: '在手机使用 {selectedWallet.name}', + walletCardPanelTitle: '获取 {selectedWalletName}', + walletCardAppTitle: '在手机使用 {selectedWalletName}', walletCardAppDesc: '使用移动钱包探索以太坊世界。', - walletCardExtensionTitle: - '在 {selectedExtension.browserName} 浏览器中使用 {selectedWallet.name}', + walletCardExtensionTitle: '在 {selectedExtensionBrowserName} 浏览器中使用 {selectedWalletName}', }, };