From e418a56e0954e342a8ae8b9beb80f1b88b9f797b Mon Sep 17 00:00:00 2001
From: Wenty Li <105278450+wenty22@users.noreply.github.com>
Date: Fri, 1 Dec 2023 11:52:31 +0800
Subject: [PATCH] Dev (#47)
* chore: prettier & eslint ignore changeset's md files
* fix: No need refresh when open WalletConnect Modal in QRCode page
* chore: Add vconsole for dev demo
* fix: fixed trustwallet losing status after refreshing
* chore: update release info
* style: Update log output styles
* style: Add switchNetwork log
* refactor: update the `installed` field that detect whether wallet is installed to a function
* fix: fixed conflict issue between trustwallet and metaMask
* docs: update release docs
---
.changeset/happy-hounds-complain.md | 5 ++++
.changeset/late-birds-compare.md | 5 ++++
.changeset/modern-comics-smell.md | 5 ++++
.changeset/pre.json | 4 +--
CONTRIBUTING.md | 4 +--
examples/nextjs/pages/_document.tsx | 2 ++
packages/walletkit/dev/index.html | 27 +++++++++++++++++
.../src/components/EthereumScript/index.tsx | 30 +++++++++++++++++++
.../walletkit/src/hooks/useClickWallet.ts | 7 +++--
packages/walletkit/src/hooks/useConnector.ts | 6 ----
.../src/hooks/useWalletConnectModal.ts | 2 +-
.../src/hooks/useWalletKitConnect.ts | 8 +++--
.../src/hooks/useWalletKitSwitchNetwork.ts | 10 +++----
packages/walletkit/src/index.ts | 1 +
.../walletkit/src/pages/Connecting/index.tsx | 10 ++++---
.../src/pages/SwitchNetwork/index.tsx | 4 ++-
.../src/wallets/binanceWeb3Wallet/index.tsx | 6 +---
.../src/wallets/coinbaseWallet/index.tsx | 2 +-
.../walletkit/src/wallets/injected/index.tsx | 2 +-
.../src/wallets/mathWallet/index.tsx | 2 +-
.../walletkit/src/wallets/metaMask/index.tsx | 2 +-
.../walletkit/src/wallets/okxWallet/index.tsx | 4 +--
packages/walletkit/src/wallets/safe/index.tsx | 2 +-
.../src/wallets/tokenPocket/icon.tsx | 2 +-
.../src/wallets/tokenPocket/index.tsx | 4 +--
.../src/wallets/trustWallet/index.tsx | 8 ++---
packages/walletkit/src/wallets/types.ts | 2 +-
.../src/wallets/walletConnect/index.tsx | 2 +-
28 files changed, 118 insertions(+), 50 deletions(-)
create mode 100644 .changeset/happy-hounds-complain.md
create mode 100644 .changeset/late-birds-compare.md
create mode 100644 .changeset/modern-comics-smell.md
create mode 100644 packages/walletkit/src/components/EthereumScript/index.tsx
delete mode 100644 packages/walletkit/src/hooks/useConnector.ts
diff --git a/.changeset/happy-hounds-complain.md b/.changeset/happy-hounds-complain.md
new file mode 100644
index 00000000..17ddadad
--- /dev/null
+++ b/.changeset/happy-hounds-complain.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+refactor: update the `installed` field that detect whether wallet is installed to a function
diff --git a/.changeset/late-birds-compare.md b/.changeset/late-birds-compare.md
new file mode 100644
index 00000000..2471f4e7
--- /dev/null
+++ b/.changeset/late-birds-compare.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed `WalletConnect` automatic connection issue in the follow scenario: connect the WalletConnect -> close browser -> reopen browser -> disconnect -> select WalletConnect, will automatically connect.
diff --git a/.changeset/modern-comics-smell.md b/.changeset/modern-comics-smell.md
new file mode 100644
index 00000000..55dfc42c
--- /dev/null
+++ b/.changeset/modern-comics-smell.md
@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed conflict issue between trustwallet and metaMask.
diff --git a/.changeset/pre.json b/.changeset/pre.json
index 4c0a1627..823a7d56 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -7,7 +7,5 @@
"@totejs/walletkit": "1.0.7-alpha.2",
"website": "0.0.1"
},
- "changesets": [
- "lovely-months-argue"
- ]
+ "changesets": ["lovely-months-argue"]
}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 632a16a3..7b2c647a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -117,7 +117,7 @@ export function trustWallet(props: TrustWalletProps = {}): WalletProps {
default: 'https://trustwallet.com/',
},
spinnerColor: '#1098FC',
- installed: isTrustWallet(),
+ isInstalled: isTrustWallet,
createConnector: (chains: Chain[]) => {
return new TrustWalletConnector({
chains,
@@ -163,7 +163,7 @@ export interface WalletProps {
};
spinnerColor?: string;
showQRCode?: boolean;
- installed: boolean | undefined;
+ isInstalled: () => boolean | undefined;
createConnector: (chains: Chain[]) => Connector;
getDeepLink: () => string | undefined;
getQRCodeUri?: (uri: string) => string;
diff --git a/examples/nextjs/pages/_document.tsx b/examples/nextjs/pages/_document.tsx
index 86b57f74..b4c55d0a 100644
--- a/examples/nextjs/pages/_document.tsx
+++ b/examples/nextjs/pages/_document.tsx
@@ -1,10 +1,12 @@
import { Html, Head, Main, NextScript } from 'next/document';
+import { EthereumScript } from '@totejs/walletkit';
export default function Document() {
return (
WalletKit Next.js Example
+
diff --git a/packages/walletkit/dev/index.html b/packages/walletkit/dev/index.html
index f5e32244..07e23793 100644
--- a/packages/walletkit/dev/index.html
+++ b/packages/walletkit/dev/index.html
@@ -5,6 +5,33 @@
WalletKit Test Demo
+
diff --git a/packages/walletkit/src/components/EthereumScript/index.tsx b/packages/walletkit/src/components/EthereumScript/index.tsx
new file mode 100644
index 00000000..1fb856d3
--- /dev/null
+++ b/packages/walletkit/src/components/EthereumScript/index.tsx
@@ -0,0 +1,30 @@
+export function EthereumScript() {
+ const scriptHtml = `
+ (function() {
+ try {
+ const isMobile =
+ /android|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
+ (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+
+ if (!isMobile && window.ethereum && window.ethereum.isMetaMask && window.trustwallet) {
+ const originalEthereum = window.ethereum;
+
+ Object.defineProperty(window, 'ethereum', {
+ enumerable: true,
+ configurable: true,
+ set(v) {
+ if (v.isTrust || v.isTrustWallet) return;
+ this.value = v;
+ },
+ get() {
+ return this.value ?? originalEthereum;
+ },
+ });
+ }
+ } catch (err) {
+ console.error('[ethereum script]', err);
+ }
+ })()
+ `;
+ return ;
+}
diff --git a/packages/walletkit/src/hooks/useClickWallet.ts b/packages/walletkit/src/hooks/useClickWallet.ts
index 7b655968..e70d2f74 100644
--- a/packages/walletkit/src/hooks/useClickWallet.ts
+++ b/packages/walletkit/src/hooks/useClickWallet.ts
@@ -21,8 +21,9 @@ export function useClickWallet() {
const pass = options.onClickWallet?.(connector, e);
if (pass === false) return;
- log('[click wallet] connector', connector);
- log('[click wallet] ethereum', window.ethereum);
+ log('[click wallet]', `connector:`, connector);
+ log('[click wallet]', `ethereum:`, window.ethereum);
+ log('[click wallet]', `installed:`, connector._wallet.isInstalled());
const gotoQRcodePage = () => {
setSelectedConnector(connector);
@@ -44,7 +45,7 @@ export function useClickWallet() {
} else {
onOpenWcModal();
}
- } else if (!connector._wallet.installed) {
+ } else if (!connector._wallet.isInstalled()) {
if (mobile) {
const deepLink = connector._wallet.getDeepLink?.();
if (deepLink) {
diff --git a/packages/walletkit/src/hooks/useConnector.ts b/packages/walletkit/src/hooks/useConnector.ts
deleted file mode 100644
index d3a2c982..00000000
--- a/packages/walletkit/src/hooks/useConnector.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useConnect, Connector } from 'wagmi';
-
-export function useConnector(id: string) {
- const { connectors } = useConnect();
- return connectors.find((c) => c.id === id) as Connector | undefined;
-}
diff --git a/packages/walletkit/src/hooks/useWalletConnectModal.ts b/packages/walletkit/src/hooks/useWalletConnectModal.ts
index c343d5f8..1470acb6 100644
--- a/packages/walletkit/src/hooks/useWalletConnectModal.ts
+++ b/packages/walletkit/src/hooks/useWalletConnectModal.ts
@@ -42,7 +42,7 @@ export function useWalletConnectModal() {
try {
await connectAsync({ connector });
} catch (err) {
- log('WalletConnect', err);
+ log('[open walletconnect modal]', err);
}
setIsOpen(false);
diff --git a/packages/walletkit/src/hooks/useWalletKitConnect.ts b/packages/walletkit/src/hooks/useWalletKitConnect.ts
index 5cc84509..d74583cd 100644
--- a/packages/walletkit/src/hooks/useWalletKitConnect.ts
+++ b/packages/walletkit/src/hooks/useWalletKitConnect.ts
@@ -2,7 +2,9 @@ import { commonErrorHandler } from '@/utils/common';
import { useConnect } from 'wagmi';
import { useWalletKitContext } from '..';
-export function useWalletKitConnect({ ...props }: any = {}): ReturnType {
+export type UseWalletKitConnectProps = Parameters[0];
+
+export function useWalletKitConnect(props?: UseWalletKitConnectProps) {
const { log, options } = useWalletKitContext();
const connectProps = {
@@ -11,13 +13,13 @@ export function useWalletKitConnect({ ...props }: any = {}): ReturnType {
+export type UseWalletKitSwitchNetworkProps = Parameters[0];
+
+export function useWalletKitSwitchNetwork(props?: UseWalletKitSwitchNetworkProps) {
const { log, options } = useWalletKitContext();
const result = useSwitchNetwork({
...props,
- onError(error: any) {
+ onError(error: Error, ...params) {
commonErrorHandler({
log,
handler: options.onError,
error,
});
- props?.onError?.(error);
+ props?.onError?.(error, ...params);
},
});
diff --git a/packages/walletkit/src/index.ts b/packages/walletkit/src/index.ts
index 0d830aa9..5b118be9 100644
--- a/packages/walletkit/src/index.ts
+++ b/packages/walletkit/src/index.ts
@@ -6,6 +6,7 @@ export * from './components/WalletKitButton';
export * from './components/WalletKitProvider';
export * from './components/WalletKitProvider/context';
export * from './components/SwitchNetworkModal';
+export * from './components/EthereumScript';
export { useModal } from './components/ModalProvider/context';
export { type ThemeMode, type ThemeVariant } from './components/ThemeProvider';
diff --git a/packages/walletkit/src/pages/Connecting/index.tsx b/packages/walletkit/src/pages/Connecting/index.tsx
index f0057e24..148be0da 100644
--- a/packages/walletkit/src/pages/Connecting/index.tsx
+++ b/packages/walletkit/src/pages/Connecting/index.tsx
@@ -34,7 +34,9 @@ export function ConnectingPage() {
const logos = useWalletLogos(wallet.logos);
const downloadUrl = useWalletDownloadUrl(wallet.downloadUrls);
- const [status, setStatus] = useState(!wallet.installed ? states.UNAVAILABLE : states.CONNECTING);
+ const [status, setStatus] = useState(
+ wallet.isInstalled() ? states.CONNECTING : states.UNAVAILABLE,
+ );
const { connect } = useWalletKitConnect({
onMutate: (connector?: any) => {
@@ -85,14 +87,14 @@ export function ConnectingPage() {
});
const runConnect = useCallback(() => {
- if (!wallet.installed) return;
+ if (!wallet.isInstalled()) return;
if (selectedConnector) {
connect({ connector: selectedConnector });
} else {
setStatus(states.UNAVAILABLE);
}
- }, [connect, selectedConnector, wallet.installed]);
+ }, [connect, selectedConnector, wallet]);
useEffect(() => {
if (status === states.UNAVAILABLE) return;
@@ -104,7 +106,7 @@ export function ConnectingPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- log('[Connect]', status, selectedConnector?.name);
+ log('[connecting page]', `name: ${selectedConnector?.name}, status: ${status}`);
const isError = [states.FAILED, states.NOTCONNECTED, states.REJECTED].includes(status);
const isLoading = status === states.CONNECTING;
diff --git a/packages/walletkit/src/pages/SwitchNetwork/index.tsx b/packages/walletkit/src/pages/SwitchNetwork/index.tsx
index 071c602f..3d0ad419 100644
--- a/packages/walletkit/src/pages/SwitchNetwork/index.tsx
+++ b/packages/walletkit/src/pages/SwitchNetwork/index.tsx
@@ -18,12 +18,14 @@ import {
import { ModalFooter } from '@/base/components/Modal/ModalFooter';
export function SwitchNetworkPage() {
- const { supportedChains } = useWalletKitContext();
+ const { supportedChains, log } = useWalletKitContext();
const { isLoading, switchNetwork, pendingChainId } = useWalletKitSwitchNetwork();
const { chain } = useNetwork();
const { isClosable } = useModal();
const onSwitchNetwork = (chainId: number) => {
+ log('[switch network page]', 'switchNetwork:', switchNetwork, ', isLoading:', isLoading);
+
if (switchNetwork && !isLoading) {
switchNetwork(chainId);
}
diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx
index 2dcaf977..35a65094 100644
--- a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx
+++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx
@@ -21,7 +21,7 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps {
},
spinnerColor: undefined,
showQRCode: true,
- installed: isBinanceWeb3Wallet(),
+ isInstalled: isBinanceWeb3Wallet,
createConnector: (chains: Chain[]) => {
return new CustomConnector({
id: BINANCE_WEB3_WALLET_ID,
@@ -53,9 +53,5 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps {
export function isBinanceWeb3Wallet() {
if (typeof window === 'undefined') return false;
- if (isMobile()) {
- return !!window.ethereum;
- }
-
return false;
}
diff --git a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx
index 491f80d9..76ea185a 100644
--- a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx
+++ b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx
@@ -30,7 +30,7 @@ export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps {
},
spinnerColor: undefined,
showQRCode: false,
- installed: isCoinbaseWallet(),
+ isInstalled: isCoinbaseWallet,
createConnector: (chains: Chain[]) => {
const { appName } = getGlobalData();
diff --git a/packages/walletkit/src/wallets/injected/index.tsx b/packages/walletkit/src/wallets/injected/index.tsx
index 846c70e0..419f906e 100644
--- a/packages/walletkit/src/wallets/injected/index.tsx
+++ b/packages/walletkit/src/wallets/injected/index.tsx
@@ -26,7 +26,7 @@ export function injected(props: InjectedProps = {}): WalletProps {
default: undefined,
},
showQRCode: false,
- installed: isInjected(),
+ isInstalled: isInjected,
createConnector: (chains: Chain[]) => {
return new InjectedConnector({
chains,
diff --git a/packages/walletkit/src/wallets/mathWallet/index.tsx b/packages/walletkit/src/wallets/mathWallet/index.tsx
index 3fbbdcf3..65d796d1 100644
--- a/packages/walletkit/src/wallets/mathWallet/index.tsx
+++ b/packages/walletkit/src/wallets/mathWallet/index.tsx
@@ -21,7 +21,7 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps {
},
showQRCode: false,
spinnerColor: undefined,
- installed: isMathWallet(),
+ isInstalled: isMathWallet,
createConnector: (chains: Chain[]) => {
return new CustomConnector({
id: MATH_WALLET_ID,
diff --git a/packages/walletkit/src/wallets/metaMask/index.tsx b/packages/walletkit/src/wallets/metaMask/index.tsx
index d09cb6ff..e3bfb8c8 100644
--- a/packages/walletkit/src/wallets/metaMask/index.tsx
+++ b/packages/walletkit/src/wallets/metaMask/index.tsx
@@ -28,7 +28,7 @@ export function metaMask(props: MetaMaskProps = {}): WalletProps {
},
spinnerColor: '#F0B90B',
showQRCode: false,
- installed: isMetaMask(),
+ isInstalled: isMetaMask,
createConnector: (chains: Chain[]) => {
return new MetaMaskConnector({
chains,
diff --git a/packages/walletkit/src/wallets/okxWallet/index.tsx b/packages/walletkit/src/wallets/okxWallet/index.tsx
index 2b2edb14..05cc6297 100644
--- a/packages/walletkit/src/wallets/okxWallet/index.tsx
+++ b/packages/walletkit/src/wallets/okxWallet/index.tsx
@@ -22,7 +22,7 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps {
},
spinnerColor: undefined,
showQRCode: false,
- installed: isOkxWallet(),
+ isInstalled: isOkxWallet,
createConnector: (chains: Chain[]) => {
return new CustomConnector({
id: OKX_WALLET_ID,
@@ -60,5 +60,5 @@ export function isOkxWallet() {
return !!(window.ethereum || window.okexchain);
}
- return !!(hasInjectedProvider('isOkxWallet') || window.okexchain?.isOkxWallet);
+ return hasInjectedProvider('isOkxWallet') || window.okexchain?.isOkxWallet;
}
diff --git a/packages/walletkit/src/wallets/safe/index.tsx b/packages/walletkit/src/wallets/safe/index.tsx
index 46ec2c27..a6b54379 100644
--- a/packages/walletkit/src/wallets/safe/index.tsx
+++ b/packages/walletkit/src/wallets/safe/index.tsx
@@ -28,7 +28,7 @@ export function safe(props: SafeProps = {}): WalletProps {
default: undefined,
},
showQRCode: false,
- installed: isSafe(),
+ isInstalled: isSafe,
createConnector: (chains: Chain[]) => {
return new SafeConnector({
chains,
diff --git a/packages/walletkit/src/wallets/tokenPocket/icon.tsx b/packages/walletkit/src/wallets/tokenPocket/icon.tsx
index 6ec4a6b9..c2eb302c 100644
--- a/packages/walletkit/src/wallets/tokenPocket/icon.tsx
+++ b/packages/walletkit/src/wallets/tokenPocket/icon.tsx
@@ -74,7 +74,7 @@ export const TokenPocketIcon = (props: SVGIconProps) => {
-
+
{
return new CustomConnector({
id: TOKEN_POCKET_ID,
@@ -55,5 +55,5 @@ export function tokenPocket(props: PartialCustomProps = {}): WalletProps {
export function isTokenPocket() {
if (typeof window === 'undefined') return false;
- return !!(hasInjectedProvider('isTokenPocket') || window.tokenpocket);
+ return hasInjectedProvider('isTokenPocket') || window.tokenpocket;
}
diff --git a/packages/walletkit/src/wallets/trustWallet/index.tsx b/packages/walletkit/src/wallets/trustWallet/index.tsx
index 3d183ba9..ac23907c 100644
--- a/packages/walletkit/src/wallets/trustWallet/index.tsx
+++ b/packages/walletkit/src/wallets/trustWallet/index.tsx
@@ -40,7 +40,7 @@ export function trustWallet(props: TrustWalletProps = {}): WalletProps {
},
spinnerColor: '#1098FC',
showQRCode: false,
- installed: isTrustWallet(),
+ isInstalled: isTrustWallet,
createConnector: (chains: Chain[]) => {
return new TrustWalletConnector({
chains,
@@ -66,9 +66,7 @@ export function trustWallet(props: TrustWalletProps = {}): WalletProps {
export function isTrustWallet() {
if (typeof window === 'undefined') return false;
- return !!(
- hasInjectedProvider('isTrust') ||
- window?.trustwallet?.isTrust ||
- window?.trustWallet?.isTrust
+ return (
+ hasInjectedProvider('isTrust') || window?.trustwallet?.isTrust || window?.trustWallet?.isTrust
);
}
diff --git a/packages/walletkit/src/wallets/types.ts b/packages/walletkit/src/wallets/types.ts
index 139435aa..d41a6e9b 100644
--- a/packages/walletkit/src/wallets/types.ts
+++ b/packages/walletkit/src/wallets/types.ts
@@ -14,7 +14,7 @@ export interface WalletProps {
};
spinnerColor?: string;
showQRCode?: boolean;
- installed: boolean | undefined;
+ isInstalled: () => boolean | undefined;
createConnector: (chains: Chain[]) => Connector;
getDeepLink: () => string | undefined;
getQRCodeUri?: (uri: string) => string;
diff --git a/packages/walletkit/src/wallets/walletConnect/index.tsx b/packages/walletkit/src/wallets/walletConnect/index.tsx
index b0dbec53..881126ba 100644
--- a/packages/walletkit/src/wallets/walletConnect/index.tsx
+++ b/packages/walletkit/src/wallets/walletConnect/index.tsx
@@ -29,7 +29,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps {
default: undefined,
},
showQRCode: isMobile() ? false : !connectorOptions?.showQrModal,
- installed: undefined,
+ isInstalled: () => false,
createConnector: (chains: Chain[]) => {
const { walletConnectProjectId, appName, appIcon, appDescription, appUrl } = getGlobalData();