Merge pull request #21 from ant-design/feat-connect-modal-opt

feat: Support ConnectModal
ant-design · Oct 6, 2023 · 710b175 · 710b175
2 parents 4bbe52e + 524174a
commit 710b175
Show file tree

Hide file tree

Showing 22 changed files with 770 additions and 219 deletions.
diff --git a/packages/web3/package.json b/packages/web3/package.json
@@ -15,6 +15,7 @@
     "build": "father build"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.17.0",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/web3-icons": "workspace:*",
     "@ctrl/tinycolor": "^4.0.2",

diff --git a/packages/web3/src/ConnectModal/assets/chrome.svg b/packages/web3/src/ConnectModal/assets/chrome.svg
diff --git a/packages/web3/src/ConnectModal/components/GetWalletPanel.tsx b/packages/web3/src/ConnectModal/components/GetWalletPanel.tsx
@@ -2,14 +2,15 @@ import { useContext } from 'react';
 import type { ConnectModalProps } from '../interface';
 import { connectModalContext } from '../context';
 import MainPanelHeader from './MainPanelHeader';
-import { Avatar, Button, List } from 'antd';
+import { Avatar, Button, List, message } from 'antd';
+import { getWalletRoute } from '../utils';
 
 export type GetWalletPanelProps = Pick<ConnectModalProps, 'walletList'>;
 
 const GetWalletPanel: React.FC<GetWalletPanelProps> = (props) => {
   const { walletList = [] } = props;
-  const { prefixCls, updateSelectedWallet, selectedWallet, updatePanelRoute } =
-    useContext(connectModalContext);
+  const { prefixCls, updateSelectedWallet, updatePanelRoute } = useContext(connectModalContext);
+
   const list = (
     <>
       <div className={`${prefixCls}-list`}>
@@ -26,8 +27,14 @@ const GetWalletPanel: React.FC<GetWalletPanelProps> = (props) => {
                   shape="round"
                   className={`${prefixCls}-get-wallet-btn`}
                   onClick={() => {
+                    const route = getWalletRoute(item);
+                    if (route === 'unknown') {
+                      // TODO: add error message
+                      message.error('Wallet is not supported');
+                      return;
+                    }
                     updateSelectedWallet(item);
-                    updatePanelRoute('wallet');
+                    updatePanelRoute(route);
                   }}
                 >
                   Get
@@ -54,17 +61,9 @@ const GetWalletPanel: React.FC<GetWalletPanelProps> = (props) => {
     </>
   );
 
-  const handleBack = () => {
-    if (selectedWallet) {
-      updateSelectedWallet(undefined);
-      return false;
-    }
-    return true;
-  };
-
   return (
     <div className={`${prefixCls}-get-wallet-panel`}>
-      <MainPanelHeader title="Get a Wallet" onBack={handleBack} />
+      <MainPanelHeader title="Get a Wallet" />
       {list}
     </div>
   );

diff --git a/packages/web3/src/ConnectModal/components/MainPanel.tsx b/packages/web3/src/ConnectModal/components/MainPanel.tsx
@@ -15,7 +15,9 @@ const MainPanel: React.FC<MainPanelProps> = (props) => {
       {panelRoute === 'guide' ? <DefaultGuidePanel guide={guide} /> : null}
       {panelRoute === 'getWallet' ? <GetWalletPanel walletList={walletList} /> : null}
       {panelRoute === 'wallet' && selectedWallet ? <WalletCard /> : null}
-      {panelRoute === 'qrCode' && selectedWallet ? <QrCode wallet={selectedWallet} /> : null}
+      {panelRoute === 'qrCode' && selectedWallet ? (
+        <QrCode wallet={selectedWallet} isSimple={!guide} />
+      ) : null}
     </div>
   );
 };

diff --git a/packages/web3/src/ConnectModal/components/ModalPanel.tsx b/packages/web3/src/ConnectModal/components/ModalPanel.tsx
@@ -3,11 +3,14 @@ import type { ConnectModalProps } from '../interface';
 import classNames from 'classnames';
 import WalletList from './WalletList';
 import MainPanel from './MainPanel';
+import { useContext } from 'react';
+import { connectModalContext } from '../context';
 
 export type ModalPanelProps = ConnectModalProps;
 
 const ModalPanel: React.FC<ModalPanelProps> = (props) => {
   const { prefixCls, title, footer, walletList, groupOrder, guide } = props;
+  const { panelRoute } = useContext(connectModalContext);
 
   const mergedTitle = mergeReactNodeProps(
     title,
@@ -16,22 +19,21 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
   );
 
   return (
-    <div className={classNames(`${prefixCls}-body`)}>
-      <div
-        className={classNames(`${prefixCls}-list-panel`, {
-          simple: !guide,
-        })}
-      >
+    <div
+      className={classNames(`${prefixCls}-body`, {
+        simple: !guide,
+        mini: panelRoute === 'qrCode' && !guide,
+      })}
+    >
+      <div className={classNames(`${prefixCls}-list-panel`)}>
         <div className={`${prefixCls}-header`}>{mergedTitle}</div>
         <div className={`${prefixCls}-list-container`}>
           <WalletList walletList={walletList} groupOrder={groupOrder} />
         </div>
         {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
       </div>
-      {guide && (
-        <div className={`${prefixCls}-main-panel`}>
-          <MainPanel guide={guide} walletList={walletList} />
-        </div>
+      {((panelRoute !== 'guide' && !guide) || guide) && (
+        <MainPanel guide={guide} walletList={walletList} />
       )}
     </div>
   );

diff --git a/packages/web3/src/ConnectModal/components/QrCode.tsx b/packages/web3/src/ConnectModal/components/QrCode.tsx
@@ -1,30 +1,50 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import type { Wallet } from '../interface';
 import MainPanelHeader from './MainPanelHeader';
 import { connectModalContext } from '../context';
 import { Button, QRCode } from 'antd';
+import useProvider from '../../hooks/useProvider';
 
 export type QrCodeProps = {
   wallet: Wallet;
+  isSimple?: boolean;
 };
 
 const QrCode: React.FC<QrCodeProps> = (props) => {
-  const { wallet } = props;
-  const { prefixCls, updatePanelRoute, updateSelectedWallet } = useContext(connectModalContext);
+  const { wallet, isSimple } = props;
+  const { prefixCls, updatePanelRoute, updateSelectedWallet, theme } =
+    useContext(connectModalContext);
+  const { provider } = useProvider();
+  const [qrCodeValue, setQrCodeValue] = useState('https://ant-design.github.io/ant-design-web3');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (provider && wallet) {
+      setLoading(true);
+      provider.getQrCodeLink().then((link) => {
+        setQrCodeValue(link);
+        setLoading(false);
+      });
+    }
+  }, [wallet, provider]);
 
   const handleGetWallet = () => {
     updateSelectedWallet(wallet);
     updatePanelRoute('wallet');
   };
   return (
-    <div className={`${prefixCls}-qr-code`}>
+    <div className={`${prefixCls}-qr-code-container`}>
       <MainPanelHeader title={`Scan with ${wallet.name}`} />
       <div className={`${prefixCls}-qr-code-box`}>
         <QRCode
-          value="https://ant.design/docs/react/migrate-less-variables-cn#avatar-%E5%A4%B4%E5%83%8F"
-          size={400}
-          icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          className={`${prefixCls}-qr-code`}
+          value={qrCodeValue}
+          status={!loading ? 'active' : 'loading'}
+          size={isSimple ? 334 : 400}
+          icon={wallet.icon as string}
           iconSize={60}
+          color={theme === 'dark' ? '#000' : '#000'}
+          bgColor={theme === 'dark' ? '#fff' : 'transparent'}
         />
       </div>
       <div className={`${prefixCls}-qr-code-tips`}>

diff --git a/packages/web3/src/ConnectModal/components/WalletCard.tsx b/packages/web3/src/ConnectModal/components/WalletCard.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable react/no-unknown-property */
 import type { ReactNode } from 'react';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { connectModalContext } from '../context';
 import MainPanelHeader from './MainPanelHeader';
+import { getPlatform } from '../../utils';
 
 const CardItem: React.FC<{
   icon: ReactNode;
@@ -36,9 +37,13 @@ export type WalletCardProps = {};
 
 const WalletCard: React.FC<WalletCardProps> = (props) => {
   const { prefixCls, selectedWallet, updatePanelRoute } = useContext(connectModalContext);
-  const selectedExtension = selectedWallet?.extensions
-    ? selectedWallet?.extensions?.[0]
-    : undefined;
+  const selectedExtension = useMemo(
+    () =>
+      selectedWallet?.extensions
+        ? selectedWallet.extensions.find((item) => item.key === getPlatform())
+        : undefined,
+    [selectedWallet?.extensions],
+  );
   return (
     <>
       <MainPanelHeader title="Get a Wallet" />

diff --git a/packages/web3/src/ConnectModal/components/WalletList.tsx b/packages/web3/src/ConnectModal/components/WalletList.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import { Avatar, List, message } from 'antd';
 import type { ConnectModalProps, Wallet } from '../interface';
-import { defaultGroupOrder } from '../utils';
+import { defaultGroupOrder, getWalletRoute } from '../utils';
 import { connectModalContext } from '../context';
 import classNames from 'classnames';
 
@@ -47,11 +47,10 @@ const WalletList: React.FC<WalletListProps> = (props) => {
                         : selectedWallet?.name === item.name,
                   })}
                   onClick={() => {
-                    updateSelectedWallet(item);
-                    if (item.app && item.extensions) {
-                      updatePanelRoute('wallet', true);
-                    } else if (item.app || item.extensions) {
-                      updatePanelRoute('qrCode', true);
+                    const route = getWalletRoute(item);
+                    if (route !== 'unknown') {
+                      updateSelectedWallet(item);
+                      updatePanelRoute(route, true);
                     } else {
                       // TODO: add error message
                       message.error('Wallet is not supported');

diff --git a/packages/web3/src/ConnectModal/context/index.ts b/packages/web3/src/ConnectModal/context/index.ts
@@ -1,8 +1,9 @@
 import React from 'react';
-import type { PanelRoute, Wallet } from '../interface';
+import type { PanelRoute, Theme, Wallet } from '../interface';
 
 export type ConnectModalContext = {
   prefixCls: string;
+  theme: Theme;
   selectedWallet: Wallet | undefined;
   updateSelectedWallet: (wallet: Wallet | undefined) => void;
   panelRoute: PanelRoute;
@@ -13,6 +14,7 @@ export type ConnectModalContext = {
 
 export const connectModalContext = React.createContext<ConnectModalContext>({
   prefixCls: 'ant-connect-modal',
+  theme: 'light',
   selectedWallet: undefined,
   updateSelectedWallet: () => {},
   panelRoute: 'guide',