feat: Add binance web3 wallet & coinbase wallet & okx wallet & mathwa…

…llet

examples/test/package.json

@@ -13,7 +13,8 @@
     "@totejs/walletkit": "workspace:*",
     "next": "^13",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "vconsole": "^3.15.1"
   },
   "devDependencies": {
     "@types/node": "^20",

examples/test/pages/_app.tsx

@@ -21,12 +21,13 @@ import {
   mathWallet,
   binanceWeb3Wallet,
   coinbaseWallet,
+  tokenPocket,
 } from '@totejs/walletkit/wallets';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const client = createClient(
   getDefaultConfig({
-    autoConnect: false,
+    autoConnect: true,
     appName: 'WalletKit',
 
     // WalletConnect 2.0 requires a projectId which you can create quickly
@@ -42,6 +43,7 @@ const client = createClient(
       binanceWeb3Wallet(),
       coinbaseWallet(),
       walletConnect(),
+      tokenPocket(),
     ],
   }),
 );
@@ -54,13 +56,19 @@ export default function App({ Component, pageProps }: AppProps) {
   const [mode, setMode] = useState<ThemeMode>('light');
   const nextMode = mode === 'light' ? 'dark' : 'light';
 
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const VConsole = require('vconsole');
+    new VConsole();
+  }, []);
+
   return (
     <WagmiConfig client={client}>
       <div>mode: {mode} </div>
       <button onClick={() => setMode(nextMode)}>switch to {nextMode}</button>
       <div style={{ height: 20 }} />
 
-      <WalletKitProvider options={options} mode={mode} debugMode>
+      <WalletKitProvider options={options} mode={mode} debugMode={true}>
         <WalletKitButton />
         <Example />
         <Component {...pageProps} />

examples/test/pages/chains.ts

@@ -1,50 +1,50 @@
 import { bsc, mainnet } from 'wagmi/chains';
 
 export const chains = [
-  {
-    id: 204,
-    name: 'opBNB Mainnet',
-    network: 'opBNB Mainnet',
-    nativeCurrency: {
-      name: 'tcBNB',
-      symbol: 'tcBNB',
-      decimals: 18,
-    },
-    rpcUrls: {
-      default: {
-        http: ['https://opbnb-mainnet-rpc.bnbchain.org'],
-      },
-      public: {
-        http: ['https://opbnb-mainnet-rpc.bnbchain.org'],
-      },
-    },
-    blockExplorers: {
-      etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` },
-      default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` },
-    },
-  },
-  {
-    id: 97,
-    name: 'BSC Testnet',
-    network: 'BSC Testnet',
-    nativeCurrency: {
-      name: 'tBNB',
-      symbol: 'tBNB',
-      decimals: 18,
-    },
-    rpcUrls: {
-      default: {
-        http: [`https://data-seed-prebsc-1-s1.binance.org:8545`],
-      },
-      public: {
-        http: [`https://data-seed-prebsc-1-s1.binance.org:8545`],
-      },
-    },
-    blockExplorers: {
-      etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` },
-      default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` },
-    },
-  },
+  // {
+  //   id: 204,
+  //   name: 'opBNB Mainnet',
+  //   network: 'opBNB Mainnet',
+  //   nativeCurrency: {
+  //     name: 'tcBNB',
+  //     symbol: 'tcBNB',
+  //     decimals: 18,
+  //   },
+  //   rpcUrls: {
+  //     default: {
+  //       http: ['https://opbnb-mainnet-rpc.bnbchain.org'],
+  //     },
+  //     public: {
+  //       http: ['https://opbnb-mainnet-rpc.bnbchain.org'],
+  //     },
+  //   },
+  //   blockExplorers: {
+  //     etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` },
+  //     default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` },
+  //   },
+  // },
+  // {
+  //   id: 97,
+  //   name: 'BSC Testnet',
+  //   network: 'BSC Testnet',
+  //   nativeCurrency: {
+  //     name: 'tBNB',
+  //     symbol: 'tBNB',
+  //     decimals: 18,
+  //   },
+  //   rpcUrls: {
+  //     default: {
+  //       http: [`https://data-seed-prebsc-1-s1.binance.org:8545`],
+  //     },
+  //     public: {
+  //       http: [`https://data-seed-prebsc-1-s1.binance.org:8545`],
+  //     },
+  //   },
+  //   blockExplorers: {
+  //     etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` },
+  //     default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` },
+  //   },
+  // },
   bsc,
   mainnet,
 ];

examples/vite/src/App.tsx

@@ -24,22 +24,7 @@ const client = createClient(
     walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
 
     chains,
-    connectors: [
-      trustWallet(),
-      metaMask(),
-      walletConnect({
-        connectorOptions: {
-          showQrModal: true,
-          qrModalOptions: {
-            explorerRecommendedWalletIds: [
-              '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4',
-              'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
-              '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
-            ],
-          },
-        },
-      }),
-    ],
+    connectors: [trustWallet(), metaMask(), walletConnect()],
   }),
 );
 

packages/walletkit/src/base/components/Box/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { clsBox } from './styles.css';
-import { cx } from '../../utils/css';
+import { cx } from '@/base/utils/css';
 
 type HTMLProperties<T = HTMLElement> = Omit<React.AllHTMLAttributes<T>, 'as'>;
 

packages/walletkit/src/base/components/Box/styles.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 export const clsBox = style({
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
   margin: 0,
   padding: 0,
   boxSizing: 'border-box',

packages/walletkit/src/base/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { cx } from '../../utils/css';
 import { clsButton } from './styles.css';
 import { Box, BoxProps } from '../Box';
+import { cx } from '@/base/utils/css';
 
 export type ButtonProps = BoxProps;
 

packages/walletkit/src/base/components/IconButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { cx } from '../../utils/css';
-import { Button, ButtonProps } from '../Button';
+import { ButtonProps, Button } from '../Button';
 import { clsIconButton } from './styles.css';
+import { cx } from '@/base/utils/css';
 
 export interface IconButtonProps extends ButtonProps {
   icon: React.ReactElement;

packages/walletkit/src/base/components/IconButton/styles.css.ts

@@ -1,5 +1,5 @@
+import { cssVar } from '@/base/utils/css';
 import { style } from '@vanilla-extract/css';
-import { cssVar } from '../../utils/css';
 
 export const clsIconButton = style({
   width: 24,

packages/walletkit/src/base/components/Link/index.tsx

@@ -1,4 +1,4 @@
-import { cx } from '../../utils/css';
+import { cx } from '@/base/utils/css';
 import { Box, BoxProps } from '../Box';
 import { clsLink } from './styles.css';
 

packages/walletkit/src/base/components/Link/styles.css.ts

@@ -1,5 +1,5 @@
+import { cssVar } from '@/base/utils/css';
 import { style } from '@vanilla-extract/css';
-import { cssVar } from '../../utils/css';
 
 export const clsLink = style({
   textDecoration: 'none',

packages/walletkit/src/base/components/Modal/ModalBody/index.tsx

@@ -1,6 +1,6 @@
-import { cx } from '../../../utils/css';
-import { Box, BoxProps } from '../../Box';
+import { cx } from '@/base/utils/css';
 import { clsModalBody } from './styles.css';
+import { Box, BoxProps } from '../../Box';
 
 export type ModalBodyProps = BoxProps;
 

packages/walletkit/src/base/components/Modal/ModalFooter/index.tsx

@@ -1,4 +1,4 @@
-import { cx } from '../../../utils/css';
+import { cx } from '@/base/utils/css';
 import { Box, BoxProps } from '../../Box';
 import { clsModalFooter } from './styles.css';
 

packages/walletkit/src/base/components/Modal/ModalHeader/index.tsx

@@ -1,6 +1,6 @@
-import { cx } from '../../../utils/css';
-import { Box, BoxProps } from '../../Box';
+import { cx } from '@/base/utils/css';
 import { clsModalHeader } from './styles.css';
+import { Box, BoxProps } from '../../Box';
 
 export type ModalHeaderProps = BoxProps;
 

packages/walletkit/src/base/components/Modal/ModalHeader/styles.css.ts

@@ -1,3 +1,4 @@
+import { MOBILE_MEDIA } from '@/base/constant';
 import { style } from '@vanilla-extract/css';
 
 export const clsModalHeader = style({
@@ -7,4 +8,11 @@ export const clsModalHeader = style({
   lineHeight: '29px',
   justifyContent: 'center',
   textAlign: 'center',
+
+  '@media': {
+    [MOBILE_MEDIA]: {
+      fontSize: 18,
+      lineHeight: '22px',
+    },
+  },
 });

packages/walletkit/src/base/components/Modal/index.tsx

@@ -1,9 +1,9 @@
-import { cx } from '../../utils/css';
-import { Box, BoxProps } from '../Box';
+import { useKeyDown } from '@/base/hooks/useKeyDown';
+import { cx } from '@/base/utils/css';
+import { BoxProps, Box } from '../Box';
 import { Portal } from '../Portal';
-import { clsModal, clsModalContent, clsModalOverlay } from './styles.css';
-import { Animation } from '../Animation';
-import { useKeyDown } from '../../hooks/useKeyDown';
+import { Transition } from '../Transition';
+import { clsModal, clsModalOverlay, clsModalContent } from './styles.css';
 
 export interface ModalProps extends BoxProps {
   isOpen: boolean;
@@ -36,7 +36,7 @@ export function Modal(props: ModalProps) {
 
   return (
     <Portal>
-      <Animation in={isOpen} variant="fade">
+      <Transition in={isOpen} variant="fade">
         <Box className={cx('wk-modal', clsModal, className)} {...restProps}>
           <Box
             className={cx('wk-modal-overlay', clsModalOverlay)}
@@ -46,7 +46,7 @@ export function Modal(props: ModalProps) {
             {children}
           </Box>
         </Box>
-      </Animation>
+      </Transition>
     </Portal>
   );
 }

packages/walletkit/src/base/components/Modal/styles.css.ts

@@ -1,5 +1,6 @@
+import { MOBILE_MEDIA } from '@/base/constant';
+import { cssVar } from '@/base/utils/css';
 import { style } from '@vanilla-extract/css';
-import { cssVar } from '../../utils/css';
 
 export const clsModal = style({
   zIndex: cssVar('modal', 'zIndices'),
@@ -16,6 +17,11 @@ export const clsModal = style({
   padding: 0,
   transition: 'all 0.3s',
   boxSizing: 'border-box',
+  '@media': {
+    [MOBILE_MEDIA]: {
+      alignItems: 'flex-end',
+    },
+  },
 });
 
 export const clsModalOverlay = style({
@@ -32,4 +38,13 @@ export const clsModalContent = style({
   width: 'calc(100% - 32px)',
   maxWidth: 484,
   borderRadius: cssVar('modal', 'radii'),
+  '@media': {
+    [MOBILE_MEDIA]: {
+      width: '100%',
+      maxWidth: 'unset',
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      paddingBottom: 40,
+    },
+  },
 });

packages/walletkit/src/base/components/Animation/index.tsx → packages/walletkit/src/base/components/Transition/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { cx } from '../../utils/css';
+import { cx } from '@/base/utils/css';
 import { clsFadeIn, clsFadeOut } from './fade.css';
 import { clsToastSlideIn, clsToastSlideOut } from './toastSlide.css';
 
@@ -8,14 +8,14 @@ const animationMap = {
   'toast-slide': [clsToastSlideOut, clsToastSlideIn],
 };
 
-export interface AnimationProps {
+export interface TransitionProps {
   in: boolean;
   children: React.ReactElement;
   variant?: 'fade' | 'toast-slide';
   onExit?: () => void;
 }
 
-export const Animation = (props: AnimationProps) => {
+export const Transition = (props: TransitionProps) => {
   const { in: show, children, variant = 'fade', onExit } = props;
 
   const { className, onAnimationEnd, ...restProps } = children.props;

packages/walletkit/src/base/components/toast/ToastComponent.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
+import { clsIconWrapper, clsDescWrapper, clsContainer } from './styles.css';
+import { ErrorIcon } from '@/base/icons/ErrorIcon';
+import { InfoIcon } from '@/base/icons/InfoIcon';
 import { ToastOptions } from '.';
-import { ToastManager } from './ToastManager';
 import { Box } from '../Box';
-import { clsContainer, clsDescWrapper, clsIconWrapper } from './styles.css';
-import { Animation } from '../Animation';
-import { InfoIcon } from '../../icons/InfoIcon';
-import { ErrorIcon } from '../../icons/ErrorIcon';
+import { Transition } from '../Transition';
+import { ToastManager } from './ToastManager';
 
 const iconMap: Record<string, React.ReactNode> = {
   info: <InfoIcon />,
@@ -43,13 +43,13 @@ export function ToastComponent(props: ToastOptions) {
   };
 
   return (
-    <Animation in={show} variant="toast-slide" onExit={onExit}>
+    <Transition in={show} variant="toast-slide" onExit={onExit}>
       <Box className="wk-toast">
         <Box className={clsContainer} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
           <Box className={clsIconWrapper}>{iconMap[variant]}</Box>
           <Box className={clsDescWrapper}>{description}</Box>
         </Box>
       </Box>
-    </Animation>
+    </Transition>
   );
 }