Add action prop to WalletKitButton & WalletKitButton.Custom to supp…

…ort the case of adding network. (#56) * docs: Add test result table to PULL_REQUEST_TEMPLATE * fix: fixed multiple wallet conflicts resulting in undetectable issues * chore: Add changeset log * feat: add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network.
node-real · Dec 12, 2023 · c431545 · c431545
1 parent 35b3794
commit c431545
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 36 deletions.
diff --git a/.changeset/pretty-flowers-rhyme.md b/.changeset/pretty-flowers-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Add `action` prop to WalletKitButton & WalletKitButton.Custom to support the case of adding network.
diff --git a/packages/walletkit/src/components/ModalProvider/context.ts b/packages/walletkit/src/components/ModalProvider/context.ts
@@ -1,16 +1,21 @@
 import React, { useContext } from 'react';
+import { Action } from '../WalletKitProvider/context';
 
 export interface OpenSwitchNetworkOptions {
   isClosable?: boolean;
 }
 
+export interface OpenOptions {
+  action?: Action;
+}
+
 export interface ModalContextProps {
   isClosable: boolean;
   closeOnEsc?: boolean;
   closeOnOverlayClick?: boolean;
   isOpen: boolean;
   onClose: () => void;
-  onOpen: () => void;
+  onOpen: (options?: OpenOptions) => void;
   onOpenProfile: () => void;
   onOpenSwitchNetwork: (options?: OpenSwitchNetworkOptions) => void;
 }

diff --git a/packages/walletkit/src/components/ModalProvider/index.tsx b/packages/walletkit/src/components/ModalProvider/index.tsx
@@ -5,7 +5,7 @@ import { useAccount, useNetwork } from 'wagmi';
 import { routes } from '../RouteProvider';
 import { useRouter } from '../RouteProvider/context';
 import { useWalletKitContext } from '../WalletKitProvider/context';
-import { OpenSwitchNetworkOptions, ModalContext } from './context';
+import { OpenSwitchNetworkOptions, ModalContext, OpenOptions } from './context';
 
 export interface ModalProviderProps {
   children: React.ReactNode;
@@ -21,7 +21,7 @@ export function ModalProvider(props: ModalProviderProps) {
   const { chain } = useNetwork();
   const router = useRouter();
 
-  const { options } = useWalletKitContext();
+  const { options, setAction } = useWalletKitContext();
   const { closeModalAfterConnected, closeModalOnEsc, closeModalOnOverlayClick } = options;
 
   useEffect(() => {
@@ -43,7 +43,8 @@ export function ModalProvider(props: ModalProviderProps) {
           router.reset();
         }, 300);
       },
-      onOpen() {
+      onOpen(options?: OpenOptions) {
+        setAction(options?.action);
         router.push(routes.CONNECTORS);
         onOpen();
       },
@@ -80,6 +81,7 @@ export function ModalProvider(props: ModalProviderProps) {
     onClose,
     onOpen,
     router,
+    setAction,
   ]);
 
   useEffect(() => {

diff --git a/packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx b/packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx
@@ -1,31 +1,30 @@
 import { ButtonProps, Button } from '@/base/components/Button';
 import { useIsMounted } from '@/base/hooks/useIsMounted';
-import { ConnectRole, useWalletKitContext, useModal, cx } from '@/index';
+import { useModal, cx, Action } from '@/index';
 import React, { useCallback } from 'react';
 import { useAccount } from 'wagmi';
 import { ConnectedInfo } from './ConnectedInfo';
 import { clsWalletkitButton } from './styles.css';
 
 export interface ConnectButtonProps extends ButtonProps {
-  role?: ConnectRole;
+  action?: Action;
 }
 
 export const ConnectButton = React.forwardRef((props: ConnectButtonProps, ref: any) => {
-  const { className, role = 'default', onClick, ...restProps } = props;
+  const { className, action, onClick, ...restProps } = props;
 
-  const { setConnectRole } = useWalletKitContext();
   const { onOpen } = useModal();
   const { isConnected } = useAccount();
   const isMounted = useIsMounted();
 
   const onClickButton = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
-      setConnectRole(role);
-
-      onOpen();
+      onOpen({
+        action,
+      });
       onClick?.(e);
     },
-    [role, onClick, onOpen, setConnectRole],
+    [action, onClick, onOpen],
   );
 
   if (!isMounted) return null;

diff --git a/packages/walletkit/src/components/WalletKitButton/ConnectButtonRenderer/index.tsx b/packages/walletkit/src/components/WalletKitButton/ConnectButtonRenderer/index.tsx
@@ -1,12 +1,12 @@
 import { routes } from '@/components/RouteProvider';
 import { useRouter } from '@/components/RouteProvider/context';
-import { ConnectRole, useWalletKitContext, useModal } from '@/index';
+import { Action, useModal } from '@/index';
 import { truncateAddress } from '@/utils/account';
 import { useCallback } from 'react';
 import { Chain, useAccount, useEnsName, useNetwork } from 'wagmi';
 
 export interface ConnectButtonRendererProps {
-  role?: ConnectRole;
+  action?: Action;
 
   children?: (renderProps: {
     show: () => void;
@@ -24,9 +24,7 @@ export interface ConnectButtonRendererProps {
 }
 
 export function ConnectButtonRenderer(props: ConnectButtonRendererProps) {
-  const { role = 'default', children } = props;
-
-  const { setConnectRole } = useWalletKitContext();
+  const { action, children } = props;
   const { isOpen, onOpen, onClose, onOpenProfile } = useModal();
 
   const router = useRouter();
@@ -39,9 +37,10 @@ export function ConnectButtonRenderer(props: ConnectButtonRendererProps) {
   });
 
   const onOpenModal = useCallback(() => {
-    setConnectRole(role);
-    onOpen();
-  }, [setConnectRole, role, onOpen]);
+    onOpen({
+      action,
+    });
+  }, [action, onOpen]);
 
   if (!children) return null;
 

diff --git a/packages/walletkit/src/components/WalletKitProvider/context.ts b/packages/walletkit/src/components/WalletKitProvider/context.ts
@@ -2,7 +2,7 @@ import { ChainProps } from '@/chains/types';
 import { ReactNode, createContext, useContext } from 'react';
 import { Connector } from 'wagmi';
 
-export type ConnectRole = 'add-network' | 'default';
+export type Action = 'add-network' | undefined;
 
 export type WalletErrorProps = {
   description?: string;
@@ -30,8 +30,8 @@ export interface WalletKitContextProps {
   options: WalletKitOptions;
   supportedChains: ChainProps[];
 
-  connectRole: ConnectRole;
-  setConnectRole: (role: ConnectRole) => void;
+  action: Action;
+  setAction: (action: Action) => void;
 
   selectedConnector: Connector;
   setSelectedConnector: (connector: Connector) => void;

diff --git a/packages/walletkit/src/components/WalletKitProvider/index.tsx b/packages/walletkit/src/components/WalletKitProvider/index.tsx
@@ -9,7 +9,7 @@ import { ModalProvider } from '../ModalProvider';
 import { RouteProvider } from '../RouteProvider';
 import { ThemeVariant, ThemeMode, ThemeProvider } from '../ThemeProvider';
 import { WalletKitModal } from '../WalletKitModal';
-import { WalletKitOptions, ConnectRole, WalletKitContextProps, WalletKitContext } from './context';
+import { WalletKitOptions, WalletKitContextProps, WalletKitContext, Action } from './context';
 
 export interface WalletKitProviderProps {
   options: WalletKitOptions;
@@ -30,7 +30,7 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
     customTheme,
   } = props;
 
-  const [connectRole, setConnectRole] = useState<ConnectRole>('default');
+  const [action, setAction] = useState<Action>();
   const [selectedConnector, setSelectedConnector] = useState<Connector>({} as Connector);
 
   const chains = useChains();
@@ -44,13 +44,13 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
       log: debugMode ? console.log : () => {},
       options: finalOptions,
       supportedChains: finalChains,
-      connectRole,
-      setConnectRole,
+      action,
+      setAction,
       selectedConnector,
       setSelectedConnector,
     };
     return finalValue;
-  }, [options, chains, connectRole, selectedConnector, debugMode]);
+  }, [options, chains, debugMode, action, selectedConnector]);
 
   return (
     <WalletKitContext.Provider value={value}>

diff --git a/packages/walletkit/src/pages/Connecting/index.tsx b/packages/walletkit/src/pages/Connecting/index.tsx
@@ -28,7 +28,7 @@ export const states = {
 };
 
 export function ConnectingPage() {
-  const { selectedConnector, options, connectRole, log } = useWalletKitContext();
+  const { selectedConnector, options, action, log } = useWalletKitContext();
 
   const wallet = useWalletConfig(selectedConnector);
   const logos = useWalletLogos(wallet.logos);
@@ -78,7 +78,7 @@ export function ConnectingPage() {
         if (
           options.initialChainId &&
           data.chain.id === options.initialChainId &&
-          connectRole === 'add-network'
+          action === 'add-network'
         ) {
           options.onChainAlreadyAdded?.(selectedConnector, options.initialChainId);
         }

diff --git a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx
@@ -19,9 +19,20 @@ export const CoinbaseWalletIcon = (props: SVGIconProps) => {
         d="M0 18.1333C0 8.11857 8.11857 0 18.1333 0H49.8667C59.8814 0 68 8.11857 68 18.1333V49.8667C68 59.8814 59.8814 68 49.8667 68H18.1333C8.11857 68 0 59.8814 0 49.8667V18.1333Z"
         fill="#0051FE"
       />
-      <rect x="2.2666" y="2.26758" width="63.4667" height="63.4667" fill="url(#cbpattern0)" />
+      <rect
+        x="2.2666"
+        y="2.26758"
+        width="63.4667"
+        height="63.4667"
+        fill="url(#pattern0_coinbase)"
+      />
       <defs>
-        <pattern id="cbpattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+        <pattern
+          id="pattern0_coinbase"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
           <use xlinkHref="#image0_6070_1983" transform="scale(0.00166667)" />
         </pattern>
         <image

diff --git a/packages/walletkit/src/wallets/metaMask/icon.tsx b/packages/walletkit/src/wallets/metaMask/icon.tsx
@@ -134,10 +134,21 @@ export function MetaMaskIcon(props: SVGIconProps) {
     >
       <g clipPath="url(#clip0_6070_1947)">
         <rect width="68" height="68" rx="16" fill="#3375BB" />
-        <rect x="-5.6665" y="-3.40039" width="79.3333" height="74.8" fill="url(#pattern0)" />
+        <rect
+          x="-5.6665"
+          y="-3.40039"
+          width="79.3333"
+          height="74.8"
+          fill="url(#pattern0_metamask)"
+        />
       </g>
       <defs>
-        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+        <pattern
+          id="pattern0_metamask"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
           <use
             xlinkHref="#image0_6070_1947"
             transform="matrix(0.00217391 0 0 0.00230567 0 -0.00724637)"

diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
@@ -170,7 +170,8 @@ const config = createConfig(
 
 ## Customizing ConnectButton
 
-`WalletKitButton.Custom`
+Note that `show()` will open the `connected page` instead of the `connectors page` once the wallet
+is connected.
 
 ```tsx live=false
 <WalletKitButton.Custom>
@@ -419,7 +420,7 @@ interface WalletKitOptions {
   onClickWallet?: (connector: Connector, e?: React.MouseEvent) => undefined | boolean;
 
   // !!! Notice
-  // This callback takes effect only if WalletKitButton's connectRole='add-network'
+  // This callback takes effect only if WalletKitButton's action='add-network'
   // will be called if network has already added to the wallet
   onChainAlreadyAdded?: (connector: Connector, chainId: number) => void;