From c431545370e35240c218422c46d79d506efcd28f Mon Sep 17 00:00:00 2001 From: Wenty Li <105278450+wenty22@users.noreply.github.com> Date: Tue, 12 Dec 2023 17:24:14 +0800 Subject: [PATCH] Add `action` prop to WalletKitButton & WalletKitButton.Custom to support 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. --- .changeset/pretty-flowers-rhyme.md | 5 +++++ .../src/components/ModalProvider/context.ts | 7 ++++++- .../src/components/ModalProvider/index.tsx | 8 +++++--- .../WalletKitButton/ConnectButton/index.tsx | 15 +++++++-------- .../ConnectButtonRenderer/index.tsx | 15 +++++++-------- .../src/components/WalletKitProvider/context.ts | 6 +++--- .../src/components/WalletKitProvider/index.tsx | 10 +++++----- packages/walletkit/src/pages/Connecting/index.tsx | 4 ++-- .../walletkit/src/wallets/coinbaseWallet/icon.tsx | 15 +++++++++++++-- packages/walletkit/src/wallets/metaMask/icon.tsx | 15 +++++++++++++-- website/src/pages/index.mdx | 5 +++-- 11 files changed, 69 insertions(+), 36 deletions(-) create mode 100644 .changeset/pretty-flowers-rhyme.md diff --git a/.changeset/pretty-flowers-rhyme.md b/.changeset/pretty-flowers-rhyme.md new file mode 100644 index 00000000..261fa305 --- /dev/null +++ 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 index 3fc56aa4..23f27519 100644 --- 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 index 858f0edd..762a7bc7 100644 --- 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 index e3581c44..2d860a9d 100644 --- 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) => { - 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 index 842c9256..7809ffca 100644 --- 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 index ffde24bf..fa7cf50b 100644 --- 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 index f34dc867..f357fec8 100644 --- 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('default'); + const [action, setAction] = useState(); const [selectedConnector, setSelectedConnector] = useState({} 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 ( diff --git a/packages/walletkit/src/pages/Connecting/index.tsx b/packages/walletkit/src/pages/Connecting/index.tsx index 148be0da..e5ab361c 100644 --- 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 index 513d4b51..62c443a2 100644 --- 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" /> - + - + - + - + @@ -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;