Merge pull request #1 from node-real/docs

refactor: Update example & refactor add-network logic

.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.npmrc
+.npmrc
+!website/dist

examples/vite/src/App.tsx

@@ -6,26 +6,28 @@ import {
   useNetwork,
   useSwitchNetwork,
 } from 'wagmi';
-import VConsole from 'vconsole';
 import { chains } from './chains';
 import {
   WalletKitButton,
   WalletKitProvider,
   getDefaultConfig,
   WalletKitOptions,
   SwitchNetworkModal,
+  ThemeMode,
 } from '@totejs/walletkit';
 import { metaMask, trustWallet, walletConnect } from '@totejs/walletkit/wallets';
 import { useState } from 'react';
 
-new VConsole();
-
 const config = createConfig(
   getDefaultConfig({
+    autoConnect: true,
     appName: 'WalletKit',
+
+    // WalletConnect 2.0 requires a projectId which you can create quickly
+    // and easily for free over at WalletConnect Cloud https://cloud.walletconnect.com/sign-in
+    walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
+
     chains,
-    walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', //
-    autoConnect: true,
     connectors: [trustWallet(), metaMask(), walletConnect()],
   }),
 );
@@ -35,7 +37,7 @@ const options: WalletKitOptions = {
 };
 
 export default function App() {
-  const [mode, setMode] = useState<any>('light');
+  const [mode, setMode] = useState<ThemeMode>('light');
   const nextMode = mode === 'light' ? 'dark' : 'light';
 
   return (
@@ -45,29 +47,47 @@ export default function App() {
       <div style={{ height: 20 }} />
 
       <WalletKitProvider options={options} mode={mode}>
-        <Example />
+        <ConnectInfo />
+        <ConnectButton />
+
+        {/*
+          👇 Here's the SwitchNetworkModal
+          If the user switches to a network that is not supported by our dapp,
+          this modal will be displayed to remind the user to switch to our supported networks.
+        */}
+        <SwitchNetworkModal />
       </WalletKitProvider>
     </WagmiConfig>
   );
 }
 
-function Example() {
-  const { address, isConnected } = useAccount();
+function ConnectInfo() {
+  const { address } = useAccount();
   const { chain } = useNetwork();
+
+  return (
+    <div>
+      <div>address: {address || '-'}</div>
+      <div>chainId: {chain?.id || '-'}</div>
+    </div>
+  );
+}
+
+function ConnectButton() {
+  const { isConnected } = useAccount();
   const { disconnect } = useDisconnect();
   const { switchNetwork } = useSwitchNetwork();
 
   return (
     <>
-      <div>address: {address}</div>
-      <div>chainId: {chain?.id}</div>
       {isConnected ? (
         <>
           <button onClick={() => disconnect()}>disconnect</button>
-          <button onClick={() => switchNetwork?.(56)}>switch 56</button>
-          <button onClick={() => switchNetwork?.(97)}>switch 97</button>
-          <button onClick={() => switchNetwork?.(204)}>switch 204</button>
-          <button onClick={() => switchNetwork?.(5600)}>switch 5600</button>
+
+          <button onClick={() => switchNetwork?.(56)}>chainId 56</button>
+          <button onClick={() => switchNetwork?.(97)}>chainId 97</button>
+          <button onClick={() => switchNetwork?.(204)}>chainId 204</button>
+          <button onClick={() => switchNetwork?.(5600)}>chainId 5600</button>
         </>
       ) : (
         <WalletKitButton.Custom>
@@ -76,8 +96,6 @@ function Example() {
           }}
         </WalletKitButton.Custom>
       )}
-
-      <SwitchNetworkModal />
     </>
   );
 }

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/index.ts

@@ -7,6 +7,8 @@ export * from './components/WalletKitProvider';
 export * from './components/WalletKitProvider/context';
 export * from './components/SwitchNetworkModal';
 
+export { type ThemeMode, type ThemeVariant } from './components/ThemeProvider';
+
 // utils
 export * from './utils/mobile';
 export * from './utils/css';

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);
         }