refactor: Update connect-mode -> variant

packages/walletkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@totejs/walletkit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist",

packages/walletkit/src/components/WalletKitButton/ConnectButton/index.tsx

@@ -1,28 +1,28 @@
 import React, { useCallback } from 'react';
 import { useOpenModal } from '../../../hooks/useOpenModal';
-import { ConnectMode, useWalletKitContext } from '../../WalletKitProvider/context';
+import { ConnectVariant, useWalletKitContext } from '../../WalletKitProvider/context';
 import { cx } from '../../../utils/css';
 import { Button, ButtonProps } from '../../base/Button';
 import { walletkitButton } from './styles.css';
 
 export interface ConnectButtonProps extends ButtonProps {
-  connectMode?: ConnectMode;
+  variant?: ConnectVariant;
 }
 
 export const ConnectButton = React.forwardRef((props: ConnectButtonProps, ref: any) => {
-  const { className, children, connectMode = 'default', onClick, ...restProps } = props;
+  const { className, children, variant = 'default', onClick, ...restProps } = props;
 
-  const { setConnectMode } = useWalletKitContext();
+  const { setConnectVariant } = useWalletKitContext();
   const { onOpenModal } = useOpenModal();
 
   const onClickButton = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
-      setConnectMode(connectMode);
+      setConnectVariant(variant);
 
       onOpenModal();
       onClick?.(e);
     },
-    [connectMode, onClick, onOpenModal, setConnectMode],
+    [variant, onClick, onOpenModal, setConnectVariant],
   );
 
   return (

packages/walletkit/src/components/WalletKitButton/ConnectButtonRenderer/index.tsx

@@ -1,9 +1,12 @@
 import { Chain, useAccount, useNetwork } from 'wagmi';
 import { useIsMounted } from '../../../hooks/useIsMounted';
-import { useWalletKitContext } from '../../WalletKitProvider/context';
+import { ConnectVariant, useWalletKitContext } from '../../WalletKitProvider/context';
 import { useOpenModal } from '../../../hooks/useOpenModal';
+import { useCallback } from 'react';
 
 export interface ConnectButtonRendererProps {
+  variant?: ConnectVariant;
+
   children?: (renderProps: {
     show: () => void;
     hide: () => void;
@@ -18,21 +21,26 @@ export interface ConnectButtonRendererProps {
 }
 
 export function ConnectButtonRenderer(props: ConnectButtonRendererProps) {
-  const { children } = props;
+  const { variant = 'default', children } = props;
 
   const isMounted = useIsMounted();
-  const { isOpen, onClose } = useWalletKitContext();
+  const { isOpen, onClose, setConnectVariant } = useWalletKitContext();
   const { onOpenModal } = useOpenModal();
 
   const { chain } = useNetwork();
   const { address } = useAccount();
 
+  const onOpen = useCallback(() => {
+    setConnectVariant(variant);
+    onOpenModal();
+  }, [onOpenModal, setConnectVariant, variant]);
+
   if (!children || !isMounted) return null;
 
   return (
     <>
       {children({
-        show: onOpenModal,
+        show: onOpen,
         hide: onClose,
         chain: chain,
         unsupported: !!chain?.unsupported,

packages/walletkit/src/components/WalletKitProvider/context.ts

@@ -2,7 +2,7 @@ import { createContext, useContext } from 'react';
 import { Connector } from 'wagmi';
 import { ChainProps } from '../../chains/types';
 
-export type ConnectMode = 'add-network' | 'default';
+export type ConnectVariant = 'add-network' | 'default';
 
 export type WalletErrorProps = {
   description?: string;
@@ -27,8 +27,8 @@ export interface WalletKitContextProps {
   onOpen: () => void;
   onClose: () => void;
 
-  connectMode: ConnectMode;
-  setConnectMode: (mode: ConnectMode) => void;
+  connectVariant: ConnectVariant;
+  setConnectVariant: (variant: ConnectVariant) => void;
 
   selectedConnector: Connector;
   setSelectedConnector: (connector: Connector) => void;

packages/walletkit/src/components/WalletKitProvider/index.tsx

@@ -1,6 +1,11 @@
 import { useMemo, useState } from 'react';
 import { Connector } from 'wagmi';
-import { ConnectMode, WalletKitContext, WalletKitContextProps, WalletKitOptions } from './context';
+import {
+  ConnectVariant,
+  WalletKitContext,
+  WalletKitContextProps,
+  WalletKitOptions,
+} from './context';
 import { useDisclosure } from '../../hooks/useDisclosure';
 import { useChains } from '../../hooks/useChains';
 import { getDefaultProviderOptions } from '../../defaultConfig/getDefaultProviderOptions';
@@ -30,7 +35,7 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
     customTheme,
   } = props;
 
-  const [connectMode, setConnectMode] = useState<ConnectMode>('default');
+  const [connectVariant, setConnectVariant] = useState<ConnectVariant>('default');
   const [selectedConnector, setSelectedConnector] = useState<Connector>({} as Connector);
 
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -46,15 +51,15 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
       isOpen,
       onOpen,
       onClose,
-      connectMode,
-      setConnectMode,
+      connectVariant,
+      setConnectVariant,
       selectedConnector,
       setSelectedConnector,
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       log: debugMode ? console.log : () => {},
     };
     return finalValue;
-  }, [options, chains, isOpen, onOpen, onClose, connectMode, selectedConnector, debugMode]);
+  }, [options, chains, isOpen, onOpen, onClose, connectVariant, selectedConnector, debugMode]);
 
   return (
     <WalletKitContext.Provider value={value}>

packages/walletkit/src/pages/Connecting/index.tsx

@@ -25,7 +25,7 @@ export const states = {
 };
 
 export function ConnectingPage() {
-  const { selectedConnector, options, connectMode, log } = useWalletKitContext();
+  const { selectedConnector, options, connectVariant, log } = useWalletKitContext();
 
   const wallet = useWalletConfig(selectedConnector);
 
@@ -71,7 +71,7 @@ export function ConnectingPage() {
         if (
           options.initialChainId &&
           data.chain.id === options.initialChainId &&
-          connectMode === 'add-network'
+          connectVariant === 'add-network'
         ) {
           options.onChainAlreadyAdded?.(selectedConnector, options.initialChainId);
         }