feat: Update theme & add website

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.npmrc

examples/vite/src/App.tsx

@@ -1,49 +1,83 @@
-import { WagmiConfig, createConfig } from 'wagmi';
+import {
+  WagmiConfig,
+  createConfig,
+  useAccount,
+  useDisconnect,
+  useNetwork,
+  useSwitchNetwork,
+} from 'wagmi';
 import VConsole from 'vconsole';
 import { chains } from './chains';
 import {
   WalletKitButton,
   WalletKitProvider,
   getDefaultConfig,
   WalletKitOptions,
-  toast,
+  SwitchNetworkModal,
 } from '@totejs/walletkit';
 import { metaMask, trustWallet, walletConnect } from '@totejs/walletkit/wallets';
+import { useState } from 'react';
 
 new VConsole();
 
 const config = createConfig(
   getDefaultConfig({
-    appName: 'Test Connect Wallet',
+    appName: 'WalletKit',
     chains,
-    walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
+    walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', //
     autoConnect: true,
     connectors: [trustWallet(), metaMask(), walletConnect()],
   }),
 );
 
 const options: WalletKitOptions = {
   initialChainId: 5600,
-  // onError(_, description) {
-  //   console.log(description);
-  // },
 };
 
 export default function App() {
+  const [mode, setMode] = useState<any>('light');
+  const nextMode = mode === 'light' ? 'dark' : 'light';
+
   return (
     <WagmiConfig config={config}>
-      <WalletKitProvider options={options}>
+      <div>mode: {mode} </div>
+      <button onClick={() => setMode(nextMode)}>switch to {nextMode}</button>
+      <div style={{ height: 20 }} />
+
+      <WalletKitProvider options={options} mode={mode}>
         <Example />
       </WalletKitProvider>
     </WagmiConfig>
   );
 }
 
 function Example() {
+  const { address, isConnected } = useAccount();
+  const { chain } = useNetwork();
+  const { disconnect } = useDisconnect();
+  const { switchNetwork } = useSwitchNetwork();
+
   return (
     <>
-      <WalletKitButton />
-      <button onClick={() => toast.error({ description: 'test' })}>test</button>
+      <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>
+        </>
+      ) : (
+        <WalletKitButton.Custom>
+          {({ show }) => {
+            return <button onClick={show}>connect</button>;
+          }}
+        </WalletKitButton.Custom>
+      )}
+
+      <SwitchNetworkModal />
     </>
   );
 }

packages/walletkit/package.json

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

packages/walletkit/rollup.config.js

@@ -18,7 +18,7 @@ export default {
     nodeResolve(),
     typescript({
       useTsconfigDeclarationDir: true,
-      // exclude: 'node_modules/**',
+      exclude: 'node_modules/**',
     }),
   ],
 };

packages/walletkit/src/components/SwitchNetworkModal/ChainOption/index.tsx

@@ -0,0 +1,20 @@
+import { ChainProps } from '../../../chains/types';
+import { cx } from '../../../utils/css';
+import { Box } from '../../base/Box';
+import { Button, ButtonProps } from '../../base/Button';
+import { chainOptionLogo, chainOptionName, container } from './styles.css';
+
+export interface ChainOptionProps extends Omit<ButtonProps, 'data'> {
+  data: ChainProps;
+}
+
+export function ChainOption(props: ChainOptionProps) {
+  const { data, ...restProps } = props;
+
+  return (
+    <Button className={cx('wk-chain-option', container)} {...restProps}>
+      <Box className={cx('wk-chain-option-logo', chainOptionLogo)}>{data.logo}</Box>
+      <Box className={cx('wk-chain-option-name', chainOptionName)}>{data.name}</Box>
+    </Button>
+  );
+}

packages/walletkit/src/components/SwitchNetworkModal/ChainOption/styles.css.ts

@@ -0,0 +1,42 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { cssVar } from '../../../utils/css';
+
+export const container = style({
+  color: cssVar('chainOptionText'),
+  background: cssVar('chainOptionBackground'),
+  padding: '16px',
+  gap: 20,
+  width: '100%',
+  borderRadius: cssVar('chainOption', 'radii'),
+  height: 'auto',
+  ':hover': {
+    color: cssVar('chainOptionTextHover'),
+    background: cssVar('chainOptionBackgroundHover'),
+  },
+});
+
+export const chainOptionLogo = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 36,
+  height: 36,
+  borderRadius: '50%',
+  overflow: 'hidden',
+  background: '#fff',
+  flexShrink: 0,
+});
+
+globalStyle(`${chainOptionLogo} > svg`, {
+  width: 26,
+  height: 26,
+});
+
+export const chainOptionName = style({
+  display: 'flex',
+  flex: 1,
+  textAlign: 'left',
+  fontSize: 18,
+  lineHeight: '22px',
+  fontWeight: 600,
+});

packages/walletkit/src/components/SwitchNetworkModal/DividerWithText/index.tsx

@@ -0,0 +1,16 @@
+import { cx } from '../../../utils/css';
+import { Box, BoxProps } from '../../base/Box';
+import { divider, dividerLine, dividerText } from './styles.css';
+
+export type DividerWithTextProps = BoxProps;
+
+export function DividerWithText(props: DividerWithTextProps) {
+  const { className, children, ...restProps } = props;
+
+  return (
+    <Box className={cx('wk-divider', divider, className)} {...restProps}>
+      <Box className={cx('wk-divider-line', dividerLine)} />
+      <Box className={cx('wk-divider-text', dividerText)}>{children}</Box>
+    </Box>
+  );
+}

packages/walletkit/src/components/SwitchNetworkModal/DividerWithText/styles.css.ts

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+import { cssVar } from '../../../utils/css';
+
+export const divider = style({
+  display: 'flex',
+  position: 'relative',
+  margin: '24px auto',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const dividerLine = style({
+  background: cssVar('border'),
+  height: 1,
+  position: 'absolute',
+  left: 0,
+  width: '100%',
+  top: '50%',
+  transform: 'translateY(-50%)',
+});
+
+export const dividerText = style({
+  position: 'relative',
+  zIndex: 1,
+  padding: '0 16px',
+  background: cssVar('modalBackground'),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: cssVar('textSecondary'),
+  fontSize: 16,
+  fontWeight: 500,
+  lineHeight: '22px',
+});

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

@@ -0,0 +1,97 @@
+import { useAccount, useConnect, useDisconnect, useNetwork } from 'wagmi';
+import { useEffect } from 'react';
+import { useWalletKitSwitchNetwork } from '../../hooks/useWalletKitSwitchNetwork';
+import { useWalletKitContext } from '../WalletKitProvider/context';
+import { Box, BoxProps } from '../base/Box';
+import { useDisclosure } from '../../hooks/useDisclosure';
+import { useIsMounted } from '../../hooks/useIsMounted';
+import { ModalHeader } from '../base/Modal/ModalHeader';
+import { cx } from '../../utils/css';
+import { Modal } from '../base/Modal';
+import { chainList, container, content, description, disconnectButton } from './styles.css';
+import { Description } from '../../pages/Connecting/Content/Description';
+import { ChainOption } from './ChainOption';
+import { Button } from '../base/Button';
+import { ExitIcon } from '../icons/ExitIcon';
+import { DividerWithText } from './DividerWithText';
+
+export type SwitchNetworkModalProps = BoxProps;
+
+export function SwitchNetworkModal(props: SwitchNetworkModalProps) {
+  const { className, ...restProps } = props;
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const isMounted = useIsMounted();
+
+  const { chain } = useNetwork();
+  const { isConnected } = useAccount();
+  const { reset } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { isLoading, switchNetwork } = useWalletKitSwitchNetwork();
+
+  const { supportedChains } = useWalletKitContext();
+
+  const onDisconnect = () => {
+    disconnect();
+    reset();
+    onClose();
+  };
+
+  const onSwitchNetwork = (chainId: number) => {
+    if (switchNetwork && !isLoading) {
+      switchNetwork(chainId);
+    }
+  };
+
+  useEffect(() => {
+    if (isConnected) {
+      const timer = setTimeout(() => {
+        if (chain?.unsupported) {
+          onOpen();
+        } else {
+          onClose();
+        }
+      }, 300);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    } else {
+      onClose();
+    }
+  }, [chain?.unsupported, isConnected, onClose, onOpen]);
+
+  if (!isMounted) return null;
+
+  return (
+    <Modal
+      className={cx('wk-switch-network-modal', container, className)}
+      isOpen={isOpen}
+      onClose={onClose}
+      closeOnEsc={false}
+      closeOnOverlayClick={false}
+      {...restProps}
+    >
+      <ModalHeader>Switch Network</ModalHeader>
+      <Box className={cx('wk-modal-body', content)}>
+        <Description className={description}>
+          This app does not support the current connected network. Switch or disconnect to continue.
+        </Description>
+        <Box className={cx('wk-chains', chainList)}>
+          {supportedChains?.map((item) => {
+            return (
+              <ChainOption key={item.id} data={item} onClick={() => onSwitchNetwork(item.id)} />
+            );
+          })}
+        </Box>
+
+        <DividerWithText>or</DividerWithText>
+
+        <Button className={cx('wk-disconnect-button', disconnectButton)} onClick={onDisconnect}>
+          <ExitIcon />
+          Disconnect
+        </Button>
+      </Box>
+    </Modal>
+  );
+}

packages/walletkit/src/components/SwitchNetworkModal/styles.css.ts

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+import { cssVar } from '../../utils/css';
+
+export const container = style({});
+
+export const content = style({});
+
+export const description = style({
+  margin: '32px auto  24px auto',
+});
+
+export const chainList = style({
+  overflowY: 'auto',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 16,
+  lineHeight: 1.5,
+  maxHeight: 324,
+});
+
+export const disconnectButton = style({
+  width: '100%',
+  gap: 8,
+  borderRadius: cssVar('disconnectButton', 'radii'),
+  background: cssVar('disconnectButtonBackground'),
+  color: cssVar('disconnectButtonBackgroundText'),
+  ':hover': {
+    background: cssVar('disconnectButtonBackgroundHover'),
+    color: cssVar('disconnectButtonBackgroundTextHover'),
+  },
+});