feat: Add wallets (#28)

* feat: Add test example

* feat: Update examples

* feat: Add disclaimer & download url

* docs: Update example

* docs: Update docs

* docs: Update docs

* docs: Update gitignore

* docs: Update docs

* feat: Add zIndices theme config

* feat: Update examples

* feat: Refactor switch network modal

* refactor: Clean code

* feat: Update examples

* refactor: Update dependencies

* feat: Update version

* docs: Update docs

* chore: Add changeset

* test: Test changeset version

* docs: Create LICENSE

* docs: Update packages info

* chore: Add husky & lint-staged

* abc: test commit lint

* chore: Update husky

* chore: Update husky

* test: test husky

* chore: Add issue & pr template

* fix: Update OpenSwitchNetworkOptions type

* feat: Add options to control modal close

* feat: Add default wallets to walletConnect

* docs: Update useModal document

* refactor: Add className to base components

* chore: Add release github acton

* chore: Add publish ci script

* chore: Fix github action

* chore: Update github action

* test: Test github action

* chore: Add  .pnpm-store to gitignore

* chore: Update github action

* chore: Copy readme to walletkit package when publish

* chore: Update issue_template

* chore: Update pr & issue template

* Update bug_report.yml

* chore: Update issue template

* feat: Add okx wallet

* feat: Add wallets

* feat: Update changeset

.changeset/smooth-drinks-walk.md

@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Support more wallets.

examples/test/package.json

@@ -10,17 +10,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@totejs/walletkit": "workspace:*",
+    "next": "^13",
     "react": "^18",
     "react-dom": "^18",
-    "next": "^13",
-    "@totejs/walletkit": "workspace:*",
     "viem": "^1.0.0",
     "wagmi": "^1.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
-    "@types/react-dom": "^18"
+    "@types/react-dom": "^18",
+    "typescript": "^5"
   }
 }

examples/test/pages/_app.tsx

@@ -13,28 +13,41 @@ import {
   useModal,
 } from '@totejs/walletkit';
 
-import { trustWallet, metaMask, walletConnect } from '@totejs/walletkit/wallets';
+import {
+  trustWallet,
+  metaMask,
+  walletConnect,
+  okxWallet,
+  mathWallet,
+  binanceWeb3Wallet,
+  coinbaseWallet,
+} from '@totejs/walletkit/wallets';
 import { useState } from 'react';
 
 const config = createConfig(
   getDefaultConfig({
-    autoConnect: true,
+    autoConnect: false,
     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,
-    connectors: [trustWallet(), metaMask(), walletConnect()],
+    connectors: [
+      trustWallet(),
+      metaMask(),
+      okxWallet(),
+      mathWallet(),
+      binanceWeb3Wallet(),
+      coinbaseWallet(),
+      walletConnect(),
+    ],
   }),
 );
 
 const options: WalletKitOptions = {
   initialChainId: 56,
-  closeModalAfterConnected: false,
-  closeModalOnEsc: true,
-  closeModalOnOverlayClick: false,
 };
 
 export default function App({ Component, pageProps }: AppProps) {

examples/vite/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -14,7 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^1.0.0",
-    "wagmi": "^1.0.0"
+    "wagmi": "^1.0.0",
+    "vconsole": "^3.15.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

examples/vite/src/App.tsx

@@ -8,7 +8,11 @@ import {
   WalletKitOptions,
   SwitchNetworkModal,
 } from '@totejs/walletkit';
-import { metaMask, trustWallet, walletConnect } from '@totejs/walletkit/wallets';
+import { trustWallet, metaMask, walletConnect } from '@totejs/walletkit/wallets';
+
+import VConsole from 'vconsole';
+
+new VConsole();
 
 const config = createConfig(
   getDefaultConfig({
@@ -20,7 +24,22 @@ const config = createConfig(
     walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767',
 
     chains,
-    connectors: [trustWallet(), metaMask(), walletConnect()],
+    connectors: [
+      trustWallet(),
+      metaMask(),
+      walletConnect({
+        connectorOptions: {
+          showQrModal: true,
+          qrModalOptions: {
+            explorerRecommendedWalletIds: [
+              '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4',
+              'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
+              '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
+            ],
+          },
+        },
+      }),
+    ],
   }),
 );
 
@@ -33,7 +52,6 @@ export default function App() {
     <WagmiConfig config={config}>
       <WalletKitProvider options={options} mode="light">
         <WalletKitButton />
-
         {/*
           👇 Here's the SwitchNetworkModal
           If the user switches to a network that is not supported by our dapp,

package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "prepare": "husky install",
-    "dev": "pnpm --recursive --parallel --filter example-test --filter @totejs/walletkit dev",
+    "dev": "pnpm --recursive --parallel --filter example-vite --filter @totejs/walletkit dev",
     "ci:version": "pnpm changeset version && pnpm install && cp README.md packages/walletkit/README.md",
     "ci:publish": "pnpm publish -r"
   },

packages/walletkit/package.json

@@ -30,7 +30,7 @@
     "./wallets": "./dist/wallets/index.js"
   },
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --emptyOutDir=false",
     "build": "vite build"
   },
   "peerDependencies": {

packages/walletkit/src/defaultConfig/getDefaultConfig.ts

@@ -14,7 +14,6 @@ import { WalletProps } from '../wallets/types';
 import { WALLET_CONNECT_PROJECT_ID } from '../constants/common';
 import { setGlobalData } from '../globalData';
 import { getDefaultWallets } from './getDefaultWallets';
-import { getWalletById, isMetaMaskConnector } from '../wallets';
 
 export interface DefaultConfigProps {
   appName: string;
@@ -28,7 +27,7 @@ export interface DefaultConfigProps {
   infuraId?: string;
 
   chains?: Chain[];
-  connectors?: Array<WalletProps | Connector>;
+  connectors?: WalletProps[];
 
   autoConnect?: boolean;
   publicClient?: any;
@@ -115,61 +114,11 @@ export const getDefaultConfig = (props: DefaultConfigProps) => {
   };
 };
 
-// 1. if item is a connector object, add the `_wallet` field directly
-// 2. if item is a wallet config object, calling `createConnector` to get a new connector
-//    and keeping the wallet config object to the `_wallet` field
-function createConnectors(input: Array<WalletProps | Connector> = [], chains: Chain[]) {
-  const connectors = input.map((w: any) => {
-    if (w.createConnector) {
-      const c = w.createConnector(chains);
-      c._wallet = w;
-      return withHackHandler(c);
-    } else {
-      w._wallet = getWalletById(w.id);
-      return withHackHandler(w);
-    }
+function createConnectors(input: WalletProps[], chains: Chain[]) {
+  const connectors = input.map((w) => {
+    const c = w.createConnector(chains);
+    c._wallet = w;
+    return c;
   });
   return connectors;
 }
-
-// !!!hack
-// sometimes provider isn't ready, requests will be pending and no responses,
-function withHackHandler(c: Connector) {
-  return c;
-
-  const provider = c?.options?.getProvider?.();
-
-  if (provider && !provider.__hasWrappedRequest && isMetaMaskConnector(c)) {
-    provider.__hasWrappedRequest = true;
-
-    const originalReq = provider.request;
-
-    const run = (duration = 0, timerArr: any = [], ...params: any) => {
-      return new Promise((resolve, reject) => {
-        const timer = setTimeout(() => {
-          originalReq
-            .call(provider, ...params)
-            .then((res: any) => {
-              // recovery
-              provider.request = originalReq;
-              timerArr.forEach((item: any) => {
-                clearTimeout(item);
-              });
-              resolve(res);
-            })
-            .catch(reject);
-        }, duration);
-
-        timerArr.push(timer);
-      });
-    };
-
-    provider.request = async function (...params: any) {
-      const durationArr = [0, 500, 1000, 1500, 2000, 3000];
-      const timerArr: any = [];
-      return Promise.race(durationArr.map((t) => run(t, timerArr, ...params)));
-    };
-  }
-
-  return c;
-}

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

@@ -1,5 +1,5 @@
 import { cx } from '../../../base/utils/css';
-import { clsContainer, clsChildren, clsErrorCircle, clsLoading } from './styles.css';
+import { clsContainer, clsLogo, clsErrorCircle, clsLoading } from './styles.css';
 import { Box, BoxProps } from '../../../base/components/Box';
 import { CircleLoadingIcon } from '../../../base/icons/CircleLoadingIcon';
 
@@ -28,7 +28,7 @@ export function ConnectSpinner(props: ConnectSpinnerProps) {
       )}
       {isError && <Box className={clsErrorCircle} />}
 
-      <Box className={clsChildren}>{children}</Box>
+      <Box className={clsLogo}>{children}</Box>
     </Box>
   );
 }

packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts

@@ -1,4 +1,4 @@
-import { keyframes, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 import { cssVar } from '../../../base/utils/css';
 
 export const clsContainer = style({
@@ -10,9 +10,17 @@ export const clsContainer = style({
   justifyContent: 'center',
 });
 
-export const clsChildren = style({
+export const clsLogo = style({
   borderRadius: '50%',
   overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+globalStyle(`${clsLogo} > *`, {
+  width: 80,
+  height: 80,
 });
 
 export const clsErrorCircle = style({

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

@@ -11,7 +11,7 @@ import { Description } from './Content/Description';
 import { InfoTitle } from './Content/InfoTitle';
 import { UnsupportedContent } from './UnsupportedContent';
 import { ConnectSpinner } from './ConnectSpinner';
-import { clsContent, clsGap, clsLogoWrapper, clsButton, clsFooter } from './styles.css';
+import { clsContent, clsGap, clsButton, clsFooter } from './styles.css';
 import { ModalBody } from '../../base/components/Modal/ModalBody';
 import { ModalFooter } from '../../base/components/Modal/ModalFooter';
 import { Button } from '../../base/components/Button';
@@ -116,7 +116,7 @@ export function ConnectingPage() {
 
       <ModalBody className={clsContent}>
         <ConnectSpinner isLoading={isLoading} isError={isError} loadingColor={wallet.spinnerColor}>
-          <Box className={clsLogoWrapper}>{logos.default}</Box>
+          {logos.default}
         </ConnectSpinner>
 
         <Box className={clsGap} />

packages/walletkit/src/pages/Connecting/styles.css.ts

@@ -1,21 +1,10 @@
-import { style, globalStyle } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { cssVar } from '../..';
 
 export const clsContent = style({
   overflowY: 'auto',
 });
 
-export const clsLogoWrapper = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-globalStyle(`${clsLogoWrapper} > svg`, {
-  width: 80,
-  height: 80,
-});
-
 export const clsGap = style({
   marginTop: 32,
 });

packages/walletkit/src/typings.d.ts

@@ -1,4 +1,5 @@
 import { Connector as WagmiConnector } from 'wagmi';
+import type { WindowProvider } from 'wagmi/window';
 
 import { WalletProps } from './wallets/types';
 
@@ -8,6 +9,7 @@ declare global {
     trustWallet: any;
     trustwallet: any;
     tokenpocket: any;
+    okexchain: any;
   }
 }
 

packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx

@@ -0,0 +1,13 @@
+export const BinanceWeb3WalletIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg viewBox="0 0 126.61 126.61" {...props}>
+      <g fill="#f3ba2f">
+        <path d="m38.73 53.2 24.59-24.58 24.6 24.6 14.3-14.31-38.9-38.91-38.9 38.9z" />
+        <path d="m0 63.31 14.3-14.31 14.31 14.31-14.31 14.3z" />
+        <path d="m38.73 73.41 24.59 24.59 24.6-24.6 14.31 14.29-38.9 38.91-38.91-38.88z" />
+        <path d="m98 63.31 14.3-14.31 14.31 14.3-14.31 14.32z" />
+        <path d="m77.83 63.3-14.51-14.52-10.73 10.73-1.24 1.23-2.54 2.54 14.51 14.5 14.51-14.47z" />
+      </g>
+    </svg>
+  );
+};