diff --git a/.changeset/smooth-drinks-walk.md b/.changeset/smooth-drinks-walk.md
new file mode 100644
index 00000000..1036148d
--- /dev/null
+++ b/.changeset/smooth-drinks-walk.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Support more wallets.
diff --git a/examples/test/package.json b/examples/test/package.json
index d3b49a5b..04ee6060 100644
--- a/examples/test/package.json
+++ b/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"
}
}
diff --git a/examples/test/pages/_app.tsx b/examples/test/pages/_app.tsx
index 759d4deb..fa3927f1 100644
--- a/examples/test/pages/_app.tsx
+++ b/examples/test/pages/_app.tsx
@@ -13,12 +13,20 @@ 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
@@ -26,15 +34,20 @@ const config = createConfig(
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) {
diff --git a/examples/vite/package.json b/examples/vite/package.json
index ba5ed4dc..ff8ebf40 100644
--- a/examples/vite/package.json
+++ b/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",
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index a4fc8a5e..3cee4021 100644
--- a/examples/vite/src/App.tsx
+++ b/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,
diff --git a/package.json b/package.json
index f6c8c972..362dfbeb 100644
--- a/package.json
+++ b/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"
},
diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
index e6c9ab04..16cfde4c 100644
--- a/packages/walletkit/package.json
+++ b/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": {
diff --git a/packages/walletkit/src/defaultConfig/getDefaultConfig.ts b/packages/walletkit/src/defaultConfig/getDefaultConfig.ts
index 00d0f812..0364ff61 100644
--- a/packages/walletkit/src/defaultConfig/getDefaultConfig.ts
+++ b/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;
-}
diff --git a/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx b/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx
index c45b0933..04671c9b 100644
--- a/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx
+++ b/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>
);
}
diff --git a/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts b/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts
index 69858b16..fd595f9d 100644
--- a/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts
+++ b/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({
diff --git a/packages/walletkit/src/pages/Connecting/index.tsx b/packages/walletkit/src/pages/Connecting/index.tsx
index eb5503a4..ced0aa10 100644
--- a/packages/walletkit/src/pages/Connecting/index.tsx
+++ b/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} />
diff --git a/packages/walletkit/src/pages/Connecting/styles.css.ts b/packages/walletkit/src/pages/Connecting/styles.css.ts
index b4fef201..c1e336ae 100644
--- a/packages/walletkit/src/pages/Connecting/styles.css.ts
+++ b/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,
});
diff --git a/packages/walletkit/src/typings.d.ts b/packages/walletkit/src/typings.d.ts
index 48b34505..79e81685 100644
--- a/packages/walletkit/src/typings.d.ts
+++ b/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;
}
}
diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx
new file mode 100644
index 00000000..4c9ae87b
--- /dev/null
+++ b/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>
+ );
+};
diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx
new file mode 100644
index 00000000..03b7aa15
--- /dev/null
+++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx
@@ -0,0 +1,53 @@
+import { Chain } from 'wagmi';
+
+import { WalletProps } from '../types';
+import { BinanceWeb3WalletIcon } from './icon';
+import { CustomConnector } from '../custom/connector';
+import { getInjectedProvider } from '../utils';
+import { PartialCustomProps } from '../custom';
+
+export const BINANCE_WEB3_WALLET_ID = 'binanceWeb3Wallet';
+
+export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps {
+ const { connectorOptions, ...restProps } = props;
+
+ return {
+ id: BINANCE_WEB3_WALLET_ID,
+ name: 'Binance Web3 Wallet',
+ logos: {
+ default: <BinanceWeb3WalletIcon />,
+ },
+ downloadUrls: {
+ default: 'https://www.binance.com/en/web3wallet',
+ },
+ spinnerColor: undefined,
+ installed: isBinanceWeb3Wallet(),
+ createConnector: (chains: Chain[]) => {
+ return new CustomConnector({
+ id: BINANCE_WEB3_WALLET_ID,
+ chains,
+ options: {
+ name: 'Binance Web3 Wallet',
+ shimDisconnect: true,
+ getProvider() {
+ if (typeof window === 'undefined') return;
+
+ const provider = getInjectedProvider('isOkxWallet') ?? window.okexchain;
+ return provider;
+ },
+ ...connectorOptions,
+ },
+ });
+ },
+ getUri: () => {
+ return undefined;
+ },
+ ...restProps,
+ };
+}
+
+export function isBinanceWeb3Wallet() {
+ if (typeof window === 'undefined') return false;
+
+ return false;
+}
diff --git a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx
new file mode 100644
index 00000000..ce7e86f7
--- /dev/null
+++ b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx
@@ -0,0 +1,13 @@
+export const CoinbaseWalletIcon = (props: React.SVGProps<SVGSVGElement>) => {
+ return (
+ <svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" {...props}>
+ <rect width="1024" height="1024" fill="#0052FF" />
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z"
+ fill="white"
+ />
+ </svg>
+ );
+};
diff --git a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx
new file mode 100644
index 00000000..77bcdc19
--- /dev/null
+++ b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx
@@ -0,0 +1,57 @@
+import { Chain } from 'wagmi';
+
+import { PartialWalletProps, WalletProps } from '../types';
+import { CoinbaseWalletIcon } from './icon';
+import { hasInjectedProvider } from '../utils';
+import { getGlobalData } from '../../globalData';
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
+
+export const COINBASE_WALLET_ID = 'coinbaseWallet';
+
+export type CoinbaseWalletConnectorOptions = Required<
+ ConstructorParameters<typeof CoinbaseWalletConnector>
+>[0]['options'];
+
+export interface CoinbaseWalletProps extends PartialWalletProps {
+ connectorOptions?: CoinbaseWalletConnectorOptions;
+}
+
+export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps {
+ const { connectorOptions, ...restProps } = props;
+
+ return {
+ id: COINBASE_WALLET_ID,
+ name: 'Coinbase Wallet',
+ logos: {
+ default: <CoinbaseWalletIcon />,
+ },
+ downloadUrls: {
+ default: 'https://coinbase.com/wallet',
+ },
+ spinnerColor: undefined,
+ installed: isCoinbaseWallet(),
+ createConnector: (chains: Chain[]) => {
+ const { walletConnectDefaultOptions } = getGlobalData();
+ const { appName } = walletConnectDefaultOptions;
+
+ return new CoinbaseWalletConnector({
+ chains,
+ options: {
+ appName,
+ headlessMode: true,
+ ...connectorOptions,
+ },
+ });
+ },
+ getUri: () => {
+ return `https://go.cb-w.com/dapp?cb_url=${encodeURIComponent(window.location.href)}`;
+ },
+ ...restProps,
+ };
+}
+
+export function isCoinbaseWallet() {
+ if (typeof window === 'undefined') return false;
+
+ return hasInjectedProvider('isCoinbaseWallet');
+}
diff --git a/packages/walletkit/src/wallets/custom/connector.ts b/packages/walletkit/src/wallets/custom/connector.ts
new file mode 100644
index 00000000..f2eda2f7
--- /dev/null
+++ b/packages/walletkit/src/wallets/custom/connector.ts
@@ -0,0 +1,29 @@
+import { Chain } from 'wagmi';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+
+export type CustomConnectorOptions = Required<
+ ConstructorParameters<typeof InjectedConnector>
+>[0]['options'];
+
+export interface CustomConstructorParams {
+ id: string;
+ chains?: Chain[];
+ options?: CustomConnectorOptions;
+}
+
+export class CustomConnector extends InjectedConnector {
+ public id: string;
+ public shimDisconnectKey;
+
+ constructor(props: CustomConstructorParams) {
+ const { id, chains, options } = props ?? {};
+
+ super({
+ chains,
+ options,
+ });
+
+ this.id = id;
+ this.shimDisconnectKey = `${this.id}.shimDisconnect`;
+ }
+}
diff --git a/packages/walletkit/src/wallets/custom/index.tsx b/packages/walletkit/src/wallets/custom/index.tsx
new file mode 100644
index 00000000..d10a271f
--- /dev/null
+++ b/packages/walletkit/src/wallets/custom/index.tsx
@@ -0,0 +1,18 @@
+import { PartialWalletProps, WalletProps } from '../types';
+import { CustomConnectorOptions } from './connector';
+
+export interface PartialCustomProps extends PartialWalletProps {
+ connectorOptions?: CustomConnectorOptions;
+}
+
+export interface CustomProps extends WalletProps {
+ connectorOptions?: CustomConnectorOptions;
+}
+
+export function custom(props: CustomProps): WalletProps {
+ const { ...restProps } = props ?? {};
+
+ return {
+ ...restProps,
+ };
+}
diff --git a/packages/walletkit/src/wallets/index.ts b/packages/walletkit/src/wallets/index.ts
index 8c389049..28dd0538 100644
--- a/packages/walletkit/src/wallets/index.ts
+++ b/packages/walletkit/src/wallets/index.ts
@@ -1,16 +1,17 @@
+// types
+export * from './types';
+
// wallets
+export * from './custom';
export * from './injected';
export * from './metaMask';
export * from './safe';
export * from './tokenPocket';
-export * from './tokenPocket/connector';
export * from './trustWallet';
export * from './trustWallet/connector';
export * from './walletConnect';
export * from './walletConnect/connector';
-
-// utils
-export * from './utils';
-
-// types
-export * from './types';
+// export * from './okxWallet';
+// export * from './mathWallet';
+// export * from './binanceWeb3Wallet';
+// export * from './coinbaseWallet';
diff --git a/packages/walletkit/src/wallets/injected/index.tsx b/packages/walletkit/src/wallets/injected/index.tsx
index a26c23d0..c8b15545 100644
--- a/packages/walletkit/src/wallets/injected/index.tsx
+++ b/packages/walletkit/src/wallets/injected/index.tsx
@@ -1,5 +1,5 @@
import { InjectedConnector } from 'wagmi/connectors/injected';
-import { Chain, Connector } from 'wagmi';
+import { Chain } from 'wagmi';
import { PartialWalletProps, WalletProps } from '../types';
import { InjectedIcon } from './icon';
@@ -45,7 +45,3 @@ export function injected(props: InjectedProps = {}): WalletProps {
export function isInjected() {
return typeof window !== 'undefined' && Boolean(window.ethereum);
}
-
-export function isInjectedConnector(connector?: Connector) {
- return connector?.id === INJECTED_ID;
-}
diff --git a/packages/walletkit/src/wallets/mathWallet/icon.tsx b/packages/walletkit/src/wallets/mathWallet/icon.tsx
new file mode 100644
index 00000000..50995612
--- /dev/null
+++ b/packages/walletkit/src/wallets/mathWallet/icon.tsx
@@ -0,0 +1,36 @@
+export const MathWalletLightIcon = (props: React.SVGProps<SVGSVGElement>) => {
+ return (
+ <svg width="128px" height="128px" viewBox="0 0 128 128" {...props}>
+ <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+ <g id="A3" transform="translate(-216.000000, -334.000000)">
+ <g id="Logo_Icon" transform="translate(216.000000, 334.000000)">
+ <rect id="Rectangle" fill="#FFFFFF" opacity="0" x="0" y="0" width="128" height="128" />
+ <path
+ d="M90.8470086,57.7610023 C88.5699723,55.483966 88.5699723,51.7921607 90.8470086,49.5151245 C93.1240448,47.2380882 96.8158501,47.2380882 99.0928864,49.5151245 C101.369923,51.7921607 101.369923,55.483966 99.0928864,57.7610023 C96.8158501,60.0380385 93.1240448,60.0380385 90.8470086,57.7610023 Z M71.2630488,77.344962 C69.5552716,75.6371848 69.5552716,72.8683309 71.2630488,71.1605537 C72.970826,69.4527765 75.7396799,69.4527765 77.4474571,71.1605537 C79.1552343,72.8683309 79.1552343,75.6371848 77.4474571,77.344962 C75.7396799,79.0527392 72.970826,79.0527392 71.2630488,77.344962 Z M102.185091,67.0376148 C100.477313,65.3298376 100.477313,62.5609836 102.185091,60.8532064 C103.892868,59.1454292 106.661722,59.1454292 108.369499,60.8532064 C110.077276,62.5609836 110.077276,65.3298376 108.369499,67.0376148 C106.661722,68.745392 103.892868,68.745392 102.185091,67.0376148 Z M91.8777433,77.344962 C90.1699661,75.6371848 90.1699661,72.8683309 91.8777433,71.1605537 C93.5855205,69.4527765 96.3543744,69.4527765 98.0621516,71.1605537 C99.7699288,72.8683309 99.7699288,75.6371848 98.0621516,77.344962 C96.3543744,79.0527392 93.5855205,79.0527392 91.8777433,77.344962 Z M113.523172,76.3142273 C112.384654,75.1757092 112.384654,73.3298065 113.523172,72.1912884 C114.661691,71.0527703 116.507593,71.0527703 117.646111,72.1912884 C118.78463,73.3298065 118.78463,75.1757092 117.646111,76.3142273 C116.507593,77.4527454 114.661691,77.4527454 113.523172,76.3142273 Z M103.215825,86.6215745 C102.077307,85.4830564 102.077307,83.6371538 103.215825,82.4986356 C104.354343,81.3601175 106.200246,81.3601175 107.338764,82.4986356 C108.477282,83.6371538 108.477282,85.4830564 107.338764,86.6215745 C106.200246,87.7600927 104.354343,87.7600927 103.215825,86.6215745 Z M80.5396613,68.0683495 C78.262625,65.7913132 78.262625,62.099508 80.5396613,59.8224717 C82.8166976,57.5454354 86.5085028,57.5454354 88.7855391,59.8224717 C91.0625754,62.099508 91.0625754,65.7913132 88.7855391,68.0683495 C86.5085028,70.3453858 82.8166976,70.3453858 80.5396613,68.0683495 Z M80.5396613,47.453655 C78.262625,45.1766187 78.262625,41.4848135 80.5396613,39.2077772 C82.8166976,36.9307409 86.5085028,36.9307409 88.7855391,39.2077772 C91.0625754,41.4848135 91.0625754,45.1766187 88.7855391,47.453655 C86.5085028,49.7306913 82.8166976,49.7306913 80.5396613,47.453655 Z M70.2323141,57.7610023 C67.9552778,55.483966 67.9552778,51.7921607 70.2323141,49.5151245 C72.5093503,47.2380882 76.2011556,47.2380882 78.4781919,49.5151245 C80.7552281,51.7921607 80.7552281,55.483966 78.4781919,57.7610023 C76.2011556,60.0380385 72.5093503,60.0380385 70.2323141,57.7610023 Z M49.5218081,57.7610023 C47.2447719,55.483966 47.2447719,51.7921607 49.5218081,49.5151245 C51.7988444,47.2380882 55.4906497,47.2380882 57.7676859,49.5151245 C60.0447222,51.7921607 60.0447222,55.483966 57.7676859,57.7610023 C55.4906497,60.0380385 51.7988444,60.0380385 49.5218081,57.7610023 Z M29.9378484,77.344962 C28.2300712,75.6371848 28.2300712,72.8683309 29.9378484,71.1605537 C31.6456256,69.4527765 34.4144795,69.4527765 36.1222567,71.1605537 C37.8300339,72.8683309 37.8300339,75.6371848 36.1222567,77.344962 C34.4144795,79.0527392 31.6456256,79.0527392 29.9378484,77.344962 Z M60.8598901,67.0376148 C59.1521129,65.3298376 59.1521129,62.5609836 60.8598901,60.8532064 C62.5676673,59.1454292 65.3365213,59.1454292 67.0442985,60.8532064 C68.7520757,62.5609836 68.7520757,65.3298376 67.0442985,67.0376148 C65.3365213,68.745392 62.5676673,68.745392 60.8598901,67.0376148 Z M50.5525429,77.344962 C48.8447657,75.6371848 48.8447657,72.8683309 50.5525429,71.1605537 C52.2603201,69.4527765 55.029174,69.4527765 56.7369512,71.1605537 C58.4447284,72.8683309 58.4447284,75.6371848 56.7369512,77.344962 C55.029174,79.0527392 52.2603201,79.0527392 50.5525429,77.344962 Z M10.3538886,76.3142273 C9.21537047,75.1757092 9.21537047,73.3298065 10.3538886,72.1912884 C11.4924067,71.0527703 13.3383094,71.0527703 14.4768275,72.1912884 C15.6153456,73.3298065 15.6153456,75.1757092 14.4768275,76.3142273 C13.3383094,77.4527454 11.4924067,77.4527454 10.3538886,76.3142273 Z M20.6612359,86.6215745 C19.5227177,85.4830564 19.5227177,83.6371538 20.6612359,82.4986356 C21.799754,81.3601175 23.6456566,81.3601175 24.7841747,82.4986356 C25.9226929,83.6371538 25.9226929,85.4830564 24.7841747,86.6215745 C23.6456566,87.7600927 21.799754,87.7600927 20.6612359,86.6215745 Z M61.8906248,86.6215745 C60.7521067,85.4830564 60.7521067,83.6371538 61.8906248,82.4986356 C63.029143,81.3601175 64.8750456,81.3601175 66.0135637,82.4986356 C67.1520819,83.6371538 67.1520819,85.4830564 66.0135637,86.6215745 C64.8750456,87.7600927 63.029143,87.7600927 61.8906248,86.6215745 Z M19.6305011,67.0376148 C17.9227239,65.3298376 17.9227239,62.5609836 19.6305011,60.8532064 C21.3382783,59.1454292 24.1071323,59.1454292 25.8149095,60.8532064 C27.5226867,62.5609836 27.5226867,65.3298376 25.8149095,67.0376148 C24.1071323,68.745392 21.3382783,68.745392 19.6305011,67.0376148 Z M39.2144609,68.0683495 C36.9374246,65.7913132 36.9374246,62.099508 39.2144609,59.8224717 C41.4914972,57.5454354 45.1833024,57.5454354 47.4603387,59.8224717 C49.737375,62.099508 49.737375,65.7913132 47.4603387,68.0683495 C45.1833024,70.3453858 41.4914972,70.3453858 39.2144609,68.0683495 Z M39.2144609,47.453655 C36.9374246,45.1766187 36.9374246,41.4848135 39.2144609,39.2077772 C41.4914972,36.9307409 45.1833024,36.9307409 47.4603387,39.2077772 C49.737375,41.4848135 49.737375,45.1766187 47.4603387,47.453655 C45.1833024,49.7306913 41.4914972,49.7306913 39.2144609,47.453655 Z M28.9071136,57.7610023 C26.6300774,55.483966 26.6300774,51.7921607 28.9071136,49.5151245 C31.1841499,47.2380882 34.8759552,47.2380882 37.1529914,49.5151245 C39.4300277,51.7921607 39.4300277,55.483966 37.1529914,57.7610023 C34.8759552,60.0380385 31.1841499,60.0380385 28.9071136,57.7610023 Z"
+ id="Combined-Shape"
+ fill="#000000"
+ />
+ </g>
+ </g>
+ </g>
+ </svg>
+ );
+};
+
+export const MathWalletDarkIcon = (props: React.SVGProps<SVGSVGElement>) => {
+ return (
+ <svg width="128px" height="128px" viewBox="0 0 128 128" {...props}>
+ <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+ <g id="A3" transform="translate(-216.000000, -514.000000)" fill="#FFFFFF">
+ <g id="Logo_Icon" transform="translate(216.000000, 514.000000)">
+ <rect id="Rectangle" opacity="0" x="0" y="0" width="128" height="128" />
+ <path
+ d="M90.8470086,57.7610023 C88.5699723,55.483966 88.5699723,51.7921607 90.8470086,49.5151245 C93.1240448,47.2380882 96.8158501,47.2380882 99.0928864,49.5151245 C101.369923,51.7921607 101.369923,55.483966 99.0928864,57.7610023 C96.8158501,60.0380385 93.1240448,60.0380385 90.8470086,57.7610023 Z M71.2630488,77.344962 C69.5552716,75.6371848 69.5552716,72.8683309 71.2630488,71.1605537 C72.970826,69.4527765 75.7396799,69.4527765 77.4474571,71.1605537 C79.1552343,72.8683309 79.1552343,75.6371848 77.4474571,77.344962 C75.7396799,79.0527392 72.970826,79.0527392 71.2630488,77.344962 Z M102.185091,67.0376148 C100.477313,65.3298376 100.477313,62.5609836 102.185091,60.8532064 C103.892868,59.1454292 106.661722,59.1454292 108.369499,60.8532064 C110.077276,62.5609836 110.077276,65.3298376 108.369499,67.0376148 C106.661722,68.745392 103.892868,68.745392 102.185091,67.0376148 Z M91.8777433,77.344962 C90.1699661,75.6371848 90.1699661,72.8683309 91.8777433,71.1605537 C93.5855205,69.4527765 96.3543744,69.4527765 98.0621516,71.1605537 C99.7699288,72.8683309 99.7699288,75.6371848 98.0621516,77.344962 C96.3543744,79.0527392 93.5855205,79.0527392 91.8777433,77.344962 Z M113.523172,76.3142273 C112.384654,75.1757092 112.384654,73.3298065 113.523172,72.1912884 C114.661691,71.0527703 116.507593,71.0527703 117.646111,72.1912884 C118.78463,73.3298065 118.78463,75.1757092 117.646111,76.3142273 C116.507593,77.4527454 114.661691,77.4527454 113.523172,76.3142273 Z M103.215825,86.6215745 C102.077307,85.4830564 102.077307,83.6371538 103.215825,82.4986356 C104.354343,81.3601175 106.200246,81.3601175 107.338764,82.4986356 C108.477282,83.6371538 108.477282,85.4830564 107.338764,86.6215745 C106.200246,87.7600927 104.354343,87.7600927 103.215825,86.6215745 Z M80.5396613,68.0683495 C78.262625,65.7913132 78.262625,62.099508 80.5396613,59.8224717 C82.8166976,57.5454354 86.5085028,57.5454354 88.7855391,59.8224717 C91.0625754,62.099508 91.0625754,65.7913132 88.7855391,68.0683495 C86.5085028,70.3453858 82.8166976,70.3453858 80.5396613,68.0683495 Z M80.5396613,47.453655 C78.262625,45.1766187 78.262625,41.4848135 80.5396613,39.2077772 C82.8166976,36.9307409 86.5085028,36.9307409 88.7855391,39.2077772 C91.0625754,41.4848135 91.0625754,45.1766187 88.7855391,47.453655 C86.5085028,49.7306913 82.8166976,49.7306913 80.5396613,47.453655 Z M70.2323141,57.7610023 C67.9552778,55.483966 67.9552778,51.7921607 70.2323141,49.5151245 C72.5093503,47.2380882 76.2011556,47.2380882 78.4781919,49.5151245 C80.7552281,51.7921607 80.7552281,55.483966 78.4781919,57.7610023 C76.2011556,60.0380385 72.5093503,60.0380385 70.2323141,57.7610023 Z M49.5218081,57.7610023 C47.2447719,55.483966 47.2447719,51.7921607 49.5218081,49.5151245 C51.7988444,47.2380882 55.4906497,47.2380882 57.7676859,49.5151245 C60.0447222,51.7921607 60.0447222,55.483966 57.7676859,57.7610023 C55.4906497,60.0380385 51.7988444,60.0380385 49.5218081,57.7610023 Z M29.9378484,77.344962 C28.2300712,75.6371848 28.2300712,72.8683309 29.9378484,71.1605537 C31.6456256,69.4527765 34.4144795,69.4527765 36.1222567,71.1605537 C37.8300339,72.8683309 37.8300339,75.6371848 36.1222567,77.344962 C34.4144795,79.0527392 31.6456256,79.0527392 29.9378484,77.344962 Z M60.8598901,67.0376148 C59.1521129,65.3298376 59.1521129,62.5609836 60.8598901,60.8532064 C62.5676673,59.1454292 65.3365213,59.1454292 67.0442985,60.8532064 C68.7520757,62.5609836 68.7520757,65.3298376 67.0442985,67.0376148 C65.3365213,68.745392 62.5676673,68.745392 60.8598901,67.0376148 Z M50.5525429,77.344962 C48.8447657,75.6371848 48.8447657,72.8683309 50.5525429,71.1605537 C52.2603201,69.4527765 55.029174,69.4527765 56.7369512,71.1605537 C58.4447284,72.8683309 58.4447284,75.6371848 56.7369512,77.344962 C55.029174,79.0527392 52.2603201,79.0527392 50.5525429,77.344962 Z M10.3538886,76.3142273 C9.21537047,75.1757092 9.21537047,73.3298065 10.3538886,72.1912884 C11.4924067,71.0527703 13.3383094,71.0527703 14.4768275,72.1912884 C15.6153456,73.3298065 15.6153456,75.1757092 14.4768275,76.3142273 C13.3383094,77.4527454 11.4924067,77.4527454 10.3538886,76.3142273 Z M20.6612359,86.6215745 C19.5227177,85.4830564 19.5227177,83.6371538 20.6612359,82.4986356 C21.799754,81.3601175 23.6456566,81.3601175 24.7841747,82.4986356 C25.9226929,83.6371538 25.9226929,85.4830564 24.7841747,86.6215745 C23.6456566,87.7600927 21.799754,87.7600927 20.6612359,86.6215745 Z M61.8906248,86.6215745 C60.7521067,85.4830564 60.7521067,83.6371538 61.8906248,82.4986356 C63.029143,81.3601175 64.8750456,81.3601175 66.0135637,82.4986356 C67.1520819,83.6371538 67.1520819,85.4830564 66.0135637,86.6215745 C64.8750456,87.7600927 63.029143,87.7600927 61.8906248,86.6215745 Z M19.6305011,67.0376148 C17.9227239,65.3298376 17.9227239,62.5609836 19.6305011,60.8532064 C21.3382783,59.1454292 24.1071323,59.1454292 25.8149095,60.8532064 C27.5226867,62.5609836 27.5226867,65.3298376 25.8149095,67.0376148 C24.1071323,68.745392 21.3382783,68.745392 19.6305011,67.0376148 Z M39.2144609,68.0683495 C36.9374246,65.7913132 36.9374246,62.099508 39.2144609,59.8224717 C41.4914972,57.5454354 45.1833024,57.5454354 47.4603387,59.8224717 C49.737375,62.099508 49.737375,65.7913132 47.4603387,68.0683495 C45.1833024,70.3453858 41.4914972,70.3453858 39.2144609,68.0683495 Z M39.2144609,47.453655 C36.9374246,45.1766187 36.9374246,41.4848135 39.2144609,39.2077772 C41.4914972,36.9307409 45.1833024,36.9307409 47.4603387,39.2077772 C49.737375,41.4848135 49.737375,45.1766187 47.4603387,47.453655 C45.1833024,49.7306913 41.4914972,49.7306913 39.2144609,47.453655 Z M28.9071136,57.7610023 C26.6300774,55.483966 26.6300774,51.7921607 28.9071136,49.5151245 C31.1841499,47.2380882 34.8759552,47.2380882 37.1529914,49.5151245 C39.4300277,51.7921607 39.4300277,55.483966 37.1529914,57.7610023 C34.8759552,60.0380385 31.1841499,60.0380385 28.9071136,57.7610023 Z"
+ id="Combined-Shape"
+ />
+ </g>
+ </g>
+ </g>
+ </svg>
+ );
+};
diff --git a/packages/walletkit/src/wallets/mathWallet/index.tsx b/packages/walletkit/src/wallets/mathWallet/index.tsx
new file mode 100644
index 00000000..9e87beb6
--- /dev/null
+++ b/packages/walletkit/src/wallets/mathWallet/index.tsx
@@ -0,0 +1,56 @@
+import { Chain } from 'wagmi';
+
+import { WalletProps } from '../types';
+import { MathWalletDarkIcon, MathWalletLightIcon } from './icon';
+import { CustomConnector } from '../custom/connector';
+import { getInjectedProvider, hasInjectedProvider } from '../utils';
+import { PartialCustomProps } from '../custom';
+
+export const MATH_WALLET_ID = 'mathWallet';
+
+export function mathWallet(props: PartialCustomProps = {}): WalletProps {
+ const { connectorOptions, ...restProps } = props;
+
+ return {
+ id: MATH_WALLET_ID,
+ name: 'Math Wallet',
+ logos: {
+ default: {
+ light: <MathWalletLightIcon />,
+ dark: <MathWalletDarkIcon />,
+ },
+ },
+ downloadUrls: {
+ default: 'https://mathwallet.org',
+ },
+ spinnerColor: undefined,
+ installed: isMathWallet(),
+ createConnector: (chains: Chain[]) => {
+ return new CustomConnector({
+ id: MATH_WALLET_ID,
+ chains,
+ options: {
+ name: 'Math Wallet',
+ shimDisconnect: true,
+ getProvider() {
+ if (typeof window === 'undefined') return;
+
+ const provider = getInjectedProvider('isMathWallet');
+ return provider;
+ },
+ ...connectorOptions,
+ },
+ });
+ },
+ getUri: () => {
+ return `mathwallet://mathwallet.org?action=link&value=${window.location.href}`;
+ },
+ ...restProps,
+ };
+}
+
+export function isMathWallet() {
+ if (typeof window === 'undefined') return false;
+
+ return hasInjectedProvider('isMathWallet');
+}
diff --git a/packages/walletkit/src/wallets/okxWallet/icon.tsx b/packages/walletkit/src/wallets/okxWallet/icon.tsx
new file mode 100644
index 00000000..a6a02db2
--- /dev/null
+++ b/packages/walletkit/src/wallets/okxWallet/icon.tsx
@@ -0,0 +1,13 @@
+export const OkxWalletIcon = (props: React.SVGProps<SVGSVGElement>) => {
+ return (
+ <svg fill="none" viewBox="0 0 28 28" {...props}>
+ <path fill="#000" d="M0 0h28v28H0z" />
+ <path
+ fill="#fff"
+ fillRule="evenodd"
+ d="M10.819 5.556H5.93a.376.376 0 0 0-.375.375v4.888c0 .207.168.375.375.375h4.888a.376.376 0 0 0 .375-.376V5.932a.376.376 0 0 0-.376-.375Zm5.64 5.638h-4.886a.376.376 0 0 0-.376.376v4.887c0 .208.168.376.376.376h4.887a.376.376 0 0 0 .376-.375V11.57a.376.376 0 0 0-.376-.377Zm.75-5.638h4.887c.208 0 .376.168.376.375v4.888a.376.376 0 0 1-.376.375H17.21a.376.376 0 0 1-.376-.376V5.933c0-.208.169-.376.376-.376Zm-6.39 11.277H5.93a.376.376 0 0 0-.375.376v4.887c0 .208.168.376.375.376h4.888a.376.376 0 0 0 .375-.376V17.21a.376.376 0 0 0-.376-.376Zm6.39 0h4.887c.208 0 .376.169.376.376v4.887a.376.376 0 0 1-.376.376H17.21a.376.376 0 0 1-.376-.376V17.21c0-.207.169-.376.376-.376Z"
+ clipRule="evenodd"
+ />
+ </svg>
+ );
+};
diff --git a/packages/walletkit/src/wallets/okxWallet/index.tsx b/packages/walletkit/src/wallets/okxWallet/index.tsx
new file mode 100644
index 00000000..0b64c8b6
--- /dev/null
+++ b/packages/walletkit/src/wallets/okxWallet/index.tsx
@@ -0,0 +1,53 @@
+import { Chain } from 'wagmi';
+
+import { WalletProps } from '../types';
+import { OkxWalletIcon } from './icon';
+import { CustomConnector } from '../custom/connector';
+import { getInjectedProvider, hasInjectedProvider } from '../utils';
+import { PartialCustomProps } from '../custom';
+
+export const OKX_WALLET_ID = 'okxWallet';
+
+export function okxWallet(props: PartialCustomProps = {}): WalletProps {
+ const { connectorOptions, ...restProps } = props;
+
+ return {
+ id: OKX_WALLET_ID,
+ name: 'OKX Wallet',
+ logos: {
+ default: <OkxWalletIcon />,
+ },
+ downloadUrls: {
+ default: 'https://www.okx.com/web3',
+ },
+ spinnerColor: undefined,
+ installed: isOkxWallet(),
+ createConnector: (chains: Chain[]) => {
+ return new CustomConnector({
+ id: OKX_WALLET_ID,
+ chains,
+ options: {
+ name: 'OKX Wallet',
+ shimDisconnect: true,
+ getProvider() {
+ if (typeof window === 'undefined') return;
+
+ const provider = getInjectedProvider('isOkxWallet') ?? window.okexchain;
+ return provider;
+ },
+ ...connectorOptions,
+ },
+ });
+ },
+ getUri: () => {
+ return `okx://wallet/dapp/details?dappUrl=${window.location.href}`;
+ },
+ ...restProps,
+ };
+}
+
+export function isOkxWallet() {
+ if (typeof window === 'undefined') return false;
+
+ return !!(hasInjectedProvider('isOkxWallet') || window.okexchain?.isOkxWallet);
+}
diff --git a/packages/walletkit/src/wallets/tokenPocket/connector.tsx b/packages/walletkit/src/wallets/tokenPocket/connector.tsx
deleted file mode 100644
index ebf097a6..00000000
--- a/packages/walletkit/src/wallets/tokenPocket/connector.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Chain } from 'wagmi';
-import { InjectedConnector } from 'wagmi/connectors/injected';
-import { TOKEN_POCKET_ID } from '.';
-
-export type TokenPocketConnectorOptions = {
- shimDisconnect?: boolean;
-};
-
-export class TokenPocketConnector extends InjectedConnector {
- readonly id: any = TOKEN_POCKET_ID;
- protected shimDisconnectKey = `${this.id}.shimDisconnect`;
-
- constructor({
- chains,
- options: _options,
- }: {
- chains?: Chain[];
- options?: TokenPocketConnectorOptions;
- } = {}) {
- const options = {
- name: 'Token Pocket',
- shimDisconnect: true,
- getProvider: getTokenPocketProvider,
- ..._options,
- };
-
- super({
- chains,
- options,
- });
- }
-}
-
-function getTokenPocketProvider() {
- if (typeof window === 'undefined') return;
-
- if (window?.ethereum?.isTokenPocket) {
- return window.ethereum;
- }
-
- return window?.tokenpocket;
-}
diff --git a/packages/walletkit/src/wallets/tokenPocket/index.tsx b/packages/walletkit/src/wallets/tokenPocket/index.tsx
index 524604fd..09c962b3 100644
--- a/packages/walletkit/src/wallets/tokenPocket/index.tsx
+++ b/packages/walletkit/src/wallets/tokenPocket/index.tsx
@@ -1,16 +1,14 @@
-import { Chain, Connector } from 'wagmi';
+import { Chain } from 'wagmi';
-import { PartialWalletProps, WalletProps } from '../types';
+import { WalletProps } from '../types';
import { TokenPocketIcon } from './icon';
-import { TokenPocketConnector, TokenPocketConnectorOptions } from '../tokenPocket/connector';
+import { getInjectedProvider, hasInjectedProvider } from '../utils';
+import { CustomConnector } from '../custom/connector';
+import { PartialCustomProps } from '../custom';
export const TOKEN_POCKET_ID = 'tokenPocket';
-export interface TokenPocketProps extends PartialWalletProps {
- connectorOptions?: TokenPocketConnectorOptions;
-}
-
-export function tokenPocket(props: TokenPocketProps = {}): WalletProps {
+export function tokenPocket(props: PartialCustomProps = {}): WalletProps {
const { connectorOptions, ...restProps } = props;
return {
@@ -25,19 +23,27 @@ export function tokenPocket(props: TokenPocketProps = {}): WalletProps {
spinnerColor: '#2980FE',
installed: isTokenPocket(),
createConnector: (chains: Chain[]) => {
- return new TokenPocketConnector({
+ return new CustomConnector({
+ id: TOKEN_POCKET_ID,
chains,
options: {
+ name: 'TokenPocket',
shimDisconnect: true,
+ getProvider() {
+ if (typeof window === 'undefined') return;
+
+ const provider = getInjectedProvider('isTokenPocket') ?? window.tokenpocket;
+ return provider;
+ },
...connectorOptions,
},
});
},
getUri: () => {
- const tpParams = {
+ const params = {
url: window.location.href,
};
- return `tpdapp://open?params=${encodeURIComponent(JSON.stringify(tpParams))}`;
+ return `tpdapp://open?params=${encodeURIComponent(JSON.stringify(params))}`;
},
...restProps,
};
@@ -45,9 +51,6 @@ export function tokenPocket(props: TokenPocketProps = {}): WalletProps {
export function isTokenPocket() {
if (typeof window === 'undefined') return false;
- return window?.ethereum?.isTokenPocket ?? !!window.tokenpocket;
-}
-export function isTokenPocketConnector(connector?: Connector) {
- return connector?.id === TOKEN_POCKET_ID;
+ return !!(hasInjectedProvider('isTokenPocket') || window.tokenpocket);
}
diff --git a/packages/walletkit/src/wallets/trustWallet/connector.ts b/packages/walletkit/src/wallets/trustWallet/connector.ts
index 937f7065..902d4599 100644
--- a/packages/walletkit/src/wallets/trustWallet/connector.ts
+++ b/packages/walletkit/src/wallets/trustWallet/connector.ts
@@ -1,6 +1,7 @@
import { Chain } from 'wagmi';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { TRUST_WALLET_ID } from '.';
+import { getInjectedProvider } from '../utils';
export type TrustWalletConnectorOptions = {
shimDisconnect?: boolean;
@@ -20,7 +21,7 @@ export class TrustWalletConnector extends MetaMaskConnector {
const options = {
name: 'Trust Wallet',
shimDisconnect: true,
- getProvider: getTrustWalletProvider,
+ getProvider,
..._options,
};
@@ -31,29 +32,14 @@ export class TrustWalletConnector extends MetaMaskConnector {
}
}
-function getTrustWalletProvider() {
- const isTrustWallet = (ethereum: any) => {
- return !!ethereum.isTrust;
- };
+function getProvider() {
+ if (typeof window === 'undefined') return;
- const injectedProviderExist =
- typeof window !== 'undefined' && typeof window.ethereum !== 'undefined';
+ const provider = getInjectedProvider('isTrust') ?? window.trustwallet ?? window.trustWallet;
- if (!injectedProviderExist) {
- return;
+ if (provider && provider.removeListener === undefined) {
+ provider.removeListener = provider.off;
}
- if (isTrustWallet(window.ethereum)) {
- return window.ethereum;
- }
-
- if (window.ethereum?.providers) {
- return window.ethereum.providers.find(isTrustWallet);
- }
-
- if (window.trustwallet && window.trustwallet.removeListener === undefined) {
- window.trustwallet.removeListener = window.trustwallet.off;
- }
-
- return window.trustwallet;
+ return provider;
}
diff --git a/packages/walletkit/src/wallets/trustWallet/index.tsx b/packages/walletkit/src/wallets/trustWallet/index.tsx
index b1d26a7a..e5a8af31 100644
--- a/packages/walletkit/src/wallets/trustWallet/index.tsx
+++ b/packages/walletkit/src/wallets/trustWallet/index.tsx
@@ -8,7 +8,7 @@ import {
} from './icon';
import { PartialWalletProps, WalletProps } from '../types';
import { TrustWalletConnector, TrustWalletConnectorOptions } from '../trustWallet/connector';
-import { Connector } from 'wagmi/connectors';
+import { hasInjectedProvider } from '../utils';
export const TRUST_WALLET_ID = 'trust';
@@ -58,16 +58,10 @@ export function trustWallet(props: TrustWalletProps = {}): WalletProps {
export function isTrustWallet() {
if (typeof window === 'undefined') return false;
- const { ethereum } = window;
return !!(
- ethereum?.isTrust ||
- (ethereum?.providers && ethereum?.providers.find((provider: any) => provider.isTrust)) ||
+ hasInjectedProvider('isTrust') ||
window?.trustwallet?.isTrust ||
window?.trustWallet?.isTrust
);
}
-
-export function isTrustWalletConnector(connector?: Connector) {
- return connector?.id === TRUST_WALLET_ID;
-}
diff --git a/packages/walletkit/src/wallets/utils.ts b/packages/walletkit/src/wallets/utils.ts
index 884e8e83..cdf87a36 100644
--- a/packages/walletkit/src/wallets/utils.ts
+++ b/packages/walletkit/src/wallets/utils.ts
@@ -1,26 +1,16 @@
-import { INJECTED_ID, injected } from './injected';
-import { META_MASK_ID, metaMask } from './metaMask';
-import { SAFE_ID, safe } from './safe';
-import { TOKEN_POCKET_ID, tokenPocket } from './tokenPocket';
-import { TRUST_WALLET_ID, trustWallet } from './trustWallet';
-import { WalletProps } from './types';
-import { WALLET_CONNECT_ID, walletConnect } from './walletConnect';
+import type { InjectedProviderFlags, WindowProvider } from 'wagmi/window';
-export function getWalletById(id: string, config?: WalletProps) {
- switch (id) {
- case INJECTED_ID:
- return injected(config);
- case META_MASK_ID:
- return metaMask(config);
- case SAFE_ID:
- return safe(config);
- case TOKEN_POCKET_ID:
- return tokenPocket(config);
- case TRUST_WALLET_ID:
- return trustWallet(config);
- case WALLET_CONNECT_ID:
- return walletConnect(config);
- default:
- return injected(config);
- }
+export function getInjectedProvider(flag: keyof InjectedProviderFlags): WindowProvider | undefined {
+ if (typeof window === 'undefined' || typeof window.ethereum === 'undefined') return;
+ const providers = window.ethereum.providers;
+
+ return providers
+ ? providers.find((provider: WindowProvider) => provider[flag])
+ : window.ethereum[flag]
+ ? window.ethereum
+ : undefined;
+}
+
+export function hasInjectedProvider(flag: keyof InjectedProviderFlags): boolean {
+ return Boolean(getInjectedProvider(flag));
}
diff --git a/packages/walletkit/src/wallets/walletConnect/index.tsx b/packages/walletkit/src/wallets/walletConnect/index.tsx
index af9ab367..d46f385e 100644
--- a/packages/walletkit/src/wallets/walletConnect/index.tsx
+++ b/packages/walletkit/src/wallets/walletConnect/index.tsx
@@ -9,9 +9,9 @@ import { isMobile } from '../..';
export const WALLET_CONNECT_ID = 'walletConnect';
-export type WalletConnectConnectorOptions = Required<
- ConstructorParameters<typeof WalletConnectConnector>
->[0]['options'];
+export type WalletConnectConnectorOptions = Partial<
+ Required<ConstructorParameters<typeof WalletConnectConnector>>[0]['options']
+>;
export interface WalletConnectProps extends PartialWalletProps {
connectorOptions?: WalletConnectConnectorOptions;
@@ -58,9 +58,6 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps {
qrModalOptions: {
explorerRecommendedWalletIds: [
'8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4',
- '971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709',
- 'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa',
- '7674bb4e353bf52886768a3ddc2a4562ce2f4191c80831291218ebd90f5f5e26',
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d63abe1b..ac3f86cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,6 +121,9 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
+ vconsole:
+ specifier: ^3.15.1
+ version: 3.15.1
viem:
specifier: ^1.0.0
version: 1.18.9(typescript@5.2.2)
@@ -140,9 +143,6 @@ importers:
typescript:
specifier: ^5.0.2
version: 5.2.2
- vconsole:
- specifier: ^3.15.1
- version: 3.15.1
vite:
specifier: ^4.4.5
version: 4.5.0(@types/node@18.18.9)
@@ -3682,6 +3682,7 @@ packages:
/copy-text-to-clipboard@3.2.0:
resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
engines: {node: '>=12'}
+ dev: false
/copy-to-clipboard@3.3.3:
resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
@@ -3691,6 +3692,7 @@ packages:
/core-js@3.33.2:
resolution: {integrity: sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==}
requiresBuild: true
+ dev: false
/cosmiconfig-typescript-loader@5.0.0(@types/node@18.18.9)(cosmiconfig@8.3.6)(typescript@5.2.2):
resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
@@ -6122,6 +6124,7 @@ packages:
/mutation-observer@1.0.3:
resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+ dev: false
/nanoid@3.3.7:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
@@ -7807,6 +7810,7 @@ packages:
copy-text-to-clipboard: 3.2.0
core-js: 3.33.2
mutation-observer: 1.0.3
+ dev: false
/vfile-message@3.1.4:
resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
index c1d6280b..af16d7b8 100644
--- a/website/src/pages/index.mdx
+++ b/website/src/pages/index.mdx
@@ -186,6 +186,45 @@ const config = createConfig(
</WalletKitButton.Custom>
```
+## Customizing walletConnect recommended wallets
+
+Sometimes, we need to customize walletConnect's wallets, which we can configure as follows. The
+wallet id can be obtained from [walletConnect explorer](https://walletconnect.com/explorer).
+
+Other supported configurations are also available from
+[walletConnect's official documentation](https://docs.walletconnect.com/advanced/walletconnectmodal/options).
+
+```tsx live=false
+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: 'xxx',
+
+ chains,
+ connectors: [
+ trustWallet(),
+ metaMask(),
+ walletConnect({
+ connectorOptions: {
+ showQrModal: true, // Open walletConnect's modal directly rather than displaying the QR code.
+ qrModalOptions: {
+ explorerRecommendedWalletIds: [
+ '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4',
+ 'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
+ '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
+ ],
+ },
+ },
+ }),
+ ],
+ }),
+);
+```
+
`useModal`
```tsx live=false