From ce51c1ad5b7f0cf19e620cf385922bc022b20abb Mon Sep 17 00:00:00 2001 From: "gaoyizhuo.gyz" Date: Tue, 27 Feb 2024 17:40:05 +0800 Subject: [PATCH 01/13] fix: icon miss fill attribute --- .../icons/src/svgs/qtum-circle-colorful.svg | 20 ++++++++++++++++++- .../icons/src/svgs/rif-circle-colorful.svg | 2 +- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/icons/src/svgs/qtum-circle-colorful.svg b/packages/icons/src/svgs/qtum-circle-colorful.svg index 912ef16d9..928304e82 100644 --- a/packages/icons/src/svgs/qtum-circle-colorful.svg +++ b/packages/icons/src/svgs/qtum-circle-colorful.svg @@ -1,2 +1,20 @@ - + + + + + + + + + + + + diff --git a/packages/icons/src/svgs/rif-circle-colorful.svg b/packages/icons/src/svgs/rif-circle-colorful.svg index c52098cac..b2d5e32cb 100644 --- a/packages/icons/src/svgs/rif-circle-colorful.svg +++ b/packages/icons/src/svgs/rif-circle-colorful.svg @@ -1,4 +1,4 @@ - + From dcde243e721472e483ed99b99ee9d340cf2ad609 Mon Sep 17 00:00:00 2001 From: "gaoyizhuo.gyz" Date: Tue, 27 Feb 2024 17:43:18 +0800 Subject: [PATCH 02/13] feat: update test snapshot --- .../icons/src/__tests__/__snapshots__/index.test.tsx.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap b/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap index 31955f593..c99244639 100644 --- a/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap @@ -9643,15 +9643,18 @@ exports[`Test Icons > should render all icons 175`] = ` @@ -10678,6 +10681,7 @@ exports[`Test Icons > should render all icons 186`] = ` > should render all icons 186`] = ` > From 9c4d495666fb718c69afb9f9c57561165e948399 Mon Sep 17 00:00:00 2001 From: "gaoyizhuo.gyz" Date: Thu, 29 Feb 2024 14:17:17 +0800 Subject: [PATCH 03/13] feat: scroll when wallets list overflow --- packages/web3/src/connect-modal/style/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/web3/src/connect-modal/style/index.tsx b/packages/web3/src/connect-modal/style/index.tsx index a60730919..c56cda29f 100644 --- a/packages/web3/src/connect-modal/style/index.tsx +++ b/packages/web3/src/connect-modal/style/index.tsx @@ -100,6 +100,12 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { marginBlock: token.marginSM, overflow: 'auto', [`${componentCls}-wallet-list`]: { + maxHeight: 390, + overflow: 'scroll', + ['::-webkit-scrollbar']: { + display: 'none', + }, + scrollbarWidth: 'none', [`${componentCls}-group`]: { marginBlockEnd: token.marginSM, [`${componentCls}-group-title`]: { From d09a8f66b7bdd6ff49c111b1c9046c888886351f Mon Sep 17 00:00:00 2001 From: "gaoyizhuo.gyz" Date: Thu, 29 Feb 2024 16:52:08 +0800 Subject: [PATCH 04/13] feat: update connect modal --- packages/common/src/locale/en_US.ts | 1 + packages/common/src/locale/zh_CN.ts | 1 + packages/common/src/types.ts | 1 + .../connect-modal/components/PluginTag.tsx | 33 +++++++++++++++ .../connect-modal/components/WalletList.tsx | 42 ++++++++++++++----- .../web3/src/connect-modal/demos/panel.tsx | 2 +- packages/web3/src/connect-modal/index.tsx | 2 +- .../web3/src/connect-modal/style/index.tsx | 18 +++++--- 8 files changed, 81 insertions(+), 19 deletions(-) create mode 100644 packages/web3/src/connect-modal/components/PluginTag.tsx diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts index 938f0222f..16dba902b 100644 --- a/packages/common/src/locale/en_US.ts +++ b/packages/common/src/locale/en_US.ts @@ -35,6 +35,7 @@ const localeValues: RequiredLocale = { walletCardAppTitle: '{selectedWalletName} for Mobile', walletCardAppDesc: 'Use the mobile wallet to explore the world of Ethereum.', walletCardExtensionTitle: '{selectedWalletName} for {selectedExtensionBrowserName}', + walletPanelPluginTitle: 'PLUGIN', }, NFTCard: { actionText: 'Buy Now', diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts index e5d8d341e..0c3b7900d 100644 --- a/packages/common/src/locale/zh_CN.ts +++ b/packages/common/src/locale/zh_CN.ts @@ -33,6 +33,7 @@ const localeValues: RequiredLocale = { walletCardAppTitle: '在手机使用 {selectedWalletName}', walletCardAppDesc: '使用移动钱包探索以太坊世界。', walletCardExtensionTitle: '在 {selectedExtensionBrowserName} 浏览器中使用 {selectedWalletName}', + walletPanelPluginTitle: '钱包插件', }, NFTCard: { actionText: '立即购买', diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 8af9b3ee2..619520384 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -210,6 +210,7 @@ export interface RequiredLocale { walletCardAppTitle: string; walletCardAppDesc: string; walletCardExtensionTitle: string; + walletPanelPluginTitle: string; }; NFTCard: { actionText: string; diff --git a/packages/web3/src/connect-modal/components/PluginTag.tsx b/packages/web3/src/connect-modal/components/PluginTag.tsx new file mode 100644 index 000000000..73b400c5d --- /dev/null +++ b/packages/web3/src/connect-modal/components/PluginTag.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Badge, Button } from 'antd'; + +import { connectModalContext } from '../context'; +import type { Wallet } from '../interface'; + +const PluginTag: React.FC<{ wallet: Wallet }> = ({ wallet }) => { + const [hasExtension, setHasExtension] = React.useState(false); + const [extensionInstalled, setExtensionInstalled] = React.useState(false); + + const { getMessage, localeMessage } = React.useContext(connectModalContext); + + React.useEffect(() => { + if (wallet.hasExtensionInstalled) { + setHasExtension(true); + wallet.hasWalletReady?.().then((res) => { + if (res) { + wallet.hasExtensionInstalled?.().then((result) => { + setExtensionInstalled(result); + }); + } + }); + } + }, [wallet]); + + return hasExtension ? ( + + + + ) : null; +}; + +export default PluginTag; diff --git a/packages/web3/src/connect-modal/components/WalletList.tsx b/packages/web3/src/connect-modal/components/WalletList.tsx index 3f6d2820a..11fed136f 100644 --- a/packages/web3/src/connect-modal/components/WalletList.tsx +++ b/packages/web3/src/connect-modal/components/WalletList.tsx @@ -1,10 +1,12 @@ import React, { useContext, useMemo } from 'react'; -import { List } from 'antd'; +import { QrcodeOutlined } from '@ant-design/icons'; +import { Col, List, Row } from 'antd'; import classNames from 'classnames'; import { connectModalContext } from '../context'; import type { ConnectModalProps, Wallet } from '../interface'; import { defaultGroupOrder } from '../utils'; +import PluginTag from './PluginTag'; export type WalletListProps = Pick; @@ -67,16 +69,34 @@ const WalletList: React.FC = (props) => { updatePanelRoute('wallet', true); }} > -
-
- {typeof item.icon === 'string' || item.icon === undefined ? ( - {item.name} - ) : ( - item.icon - )} -
-
{item.name}
-
+ + +
+
+ {typeof item.icon === 'string' || item.icon === undefined ? ( + {item.name} + ) : ( + item.icon + )} +
+
{item.name}
+
+ + + + + + {item.getQrCode ? ( + { + e.stopPropagation(); + updateSelectedWallet(item, true); + updatePanelRoute('qrCode', true); + }} + /> + ) : null} + + )} /> diff --git a/packages/web3/src/connect-modal/demos/panel.tsx b/packages/web3/src/connect-modal/demos/panel.tsx index 427aea8f2..7ae43a4a2 100644 --- a/packages/web3/src/connect-modal/demos/panel.tsx +++ b/packages/web3/src/connect-modal/demos/panel.tsx @@ -55,7 +55,7 @@ const App: React.FC = () => { return ( & { return wrapSSR( { [`${componentCls}-list-panel`]: { paddingInline: 18, paddingBlock: 24, - width: 268, + width: 328, flexShrink: 0, borderRight: `1px solid ${token.splitColor}`, display: 'flex', @@ -102,7 +102,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { [`${componentCls}-wallet-list`]: { maxHeight: 390, overflow: 'scroll', - ['::-webkit-scrollbar']: { + '&::-webkit-scrollbar': { display: 'none', }, scrollbarWidth: 'none', @@ -126,6 +126,14 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { fontSize: token.fontSizeSM, color: token.colorTextDescription, }, + [`${componentCls}-row`]: { + width: '100%', + fontSize: token.fontSizeLG, + [`${componentCls}-qc-icon`]: { + fontSize: 16, + textAlign: 'right', + }, + }, [`${componentCls}-content`]: { display: 'flex', alignItems: 'center', @@ -146,6 +154,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { justifySelf: 'flex-start', marginInlineStart: token.marginSM, color: token.colorText, + wordBreak: 'break-word', }, }, '&:last-child': { @@ -155,10 +164,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { background: token.hoverBg, }, '&.selected': { - background: token.selectedBg, - [`${componentCls}-name`]: { - color: token.selectedColor, - }, + background: 'rgba(0,0,0,0.03)', }, }, }, From de20292447030dc624f20e42b1c72af1281fca81 Mon Sep 17 00:00:00 2001 From: "gaoyizhuo.gyz" Date: Thu, 29 Feb 2024 18:19:15 +0800 Subject: [PATCH 05/13] feat: add test sample --- .../__snapshots__/basic.test.tsx.snap | 1370 +++++++++++------ .../__snapshots__/simple.test.tsx.snap | 460 ++++-- .../__tests__/pluginTag.test.tsx | 115 ++ .../connect-modal/components/PluginTag.tsx | 6 +- 4 files changed, 1378 insertions(+), 573 deletions(-) create mode 100644 packages/web3/src/connect-modal/__tests__/pluginTag.test.tsx 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 d95b735b5..03d3b482d 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 @@ -18,7 +18,7 @@ exports[`ConnectModal with guide > panel route change 1`] = ` aria-modal="true" class="ant-modal css-dev-only-do-not-override-1qhpsh8 ant-web3-connect-modal css-dev-only-do-not-override-1qhpsh8 ant-zoom-appear ant-zoom-appear-prepare ant-zoom" role="dialog" - style="width: 737px;" + style="width: 797px;" >