fix: Fixed trustwallet losing account status after refreshing (#44)

* 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

.changeset/lovely-months-argue.md

@@ -0,0 +1,5 @@
+---
+'@totejs/walletkit': patch
+---
+
+Fixed trustwallet losing account status after refreshing

.changeset/pre.json

@@ -4,7 +4,7 @@
   "initialVersions": {
     "example-nextjs": "0.0.1",
     "example-vite": "0.0.1",
-    "@totejs/walletkit": "1.0.7-alpha.1",
+    "@totejs/walletkit": "1.0.7-alpha.2",
     "website": "0.0.1"
   },
   "changesets": [

.eslintignore

@@ -1,4 +1,4 @@
 .next
 dist
 CHANGELOG.md
-build.cjs
+.changeset/*.md

.github/workflows/release.yaml

@@ -6,7 +6,6 @@ on:
       - alpha
       - 0.x
       - 0.x-alpha
-      - dev
 
 jobs:
   release:

.prettierignore

@@ -1,3 +1,4 @@
 .next
 dist
-CHANGELOG.md
+CHANGELOG.md
+.changeset/*.md

packages/walletkit/dev/App.tsx

@@ -1,5 +1,6 @@
 import { chains } from './chains';
 import { WagmiConfig, createConfig } from 'wagmi';
+import VConsole from 'vconsole';
 import {
   SwitchNetworkModal,
   ThemeMode,
@@ -23,6 +24,8 @@ import {
 } from '../src/wallets';
 import React from 'react';
 
+new VConsole();
+
 const config = createConfig(
   getDefaultConfig({
     autoConnect: true,

packages/walletkit/package.json

@@ -52,6 +52,7 @@
     "react-dom": "^18.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^5.3.2",
+    "vconsole": "^3.15.1",
     "viem": "^1.19.9",
     "vite": "^4.5.0",
     "vite-plugin-dts": "^3.6.3",

packages/walletkit/src/globalData/index.ts

@@ -7,6 +7,7 @@ export interface GlobalDataType {
   appUrl?: string;
   walletConnectProjectId?: string;
   walletConnectConnector?: Connector;
+  walletConnectModalIsOpen?: boolean;
 }
 
 let globalData: GlobalDataType = {

packages/walletkit/src/hooks/useQRCodeUri.ts

@@ -14,11 +14,11 @@ export function useQRCodeUri() {
   const [wcUri, setWcUri] = useState<string>('');
 
   useEffect(() => {
-    const { walletConnectConnector: connector } = getGlobalData();
+    const connector = getGlobalData().walletConnectConnector;
     if (isConnected || !connector) return;
 
     const onUpdateWcUri = ({ type, data }: any) => {
-      if (type === 'display_uri') {
+      if (type === 'display_uri' && !getGlobalData().walletConnectModalIsOpen) {
         setWcUri(data);
       }
     };

packages/walletkit/src/hooks/useWalletConnectModal.ts

@@ -2,7 +2,7 @@ import { MODAL_AUTO_CLOSE_DELAY } from '@/constants/common';
 import { useEffect, useState } from 'react';
 import { useModal, useWalletKitContext } from '..';
 import { useWalletKitConnect } from './useWalletKitConnect';
-import { getGlobalData } from '@/globalData';
+import { getGlobalData, setGlobalData } from '@/globalData';
 
 export function useWalletConnectModal() {
   const { connectAsync } = useWalletKitConnect();
@@ -21,14 +21,18 @@ export function useWalletConnectModal() {
         clearTimeout(timer);
       };
     }
+
+    setGlobalData({
+      walletConnectModalIsOpen: isOpen,
+    });
   }, [isOpen, onClose]);
 
   return {
     isOpenWcModal: isOpen,
     onOpenWcModal: async () => {
       document.body.style.setProperty('--wcm-z-index', '2147483647');
 
-      const { walletConnectConnector: connector } = getGlobalData();
+      const connector = getGlobalData().walletConnectConnector;
       const provider = await connector?.getProvider();
       provider.rpc.showQrModal = true;
 

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

@@ -8,7 +8,7 @@ import { useWalletConfig } from '@/hooks/useWalletConfig';
 import { useWalletDownloadUrl } from '@/hooks/useWalletDownloadUrl';
 import { useWalletKitConnect } from '@/hooks/useWalletKitConnect';
 import { useWalletLogos } from '@/hooks/useWalletLogos';
-import { useWalletKitContext } from '@/index';
+import { cx, useWalletKitContext } from '@/index';
 import { useState, useCallback, useEffect } from 'react';
 import { ConnectSpinner } from './ConnectSpinner';
 import { Content } from './Content';
@@ -167,15 +167,21 @@ export function ConnectingPage() {
 
       {(status === states.FAILED || status === states.REJECTED) && (
         <ModalFooter className={clsFooter}>
-          <Button className={clsButton} onClick={runConnect}>
+          <Button className={cx('wk-retry-button', clsButton)} onClick={runConnect}>
             Try Again
           </Button>
         </ModalFooter>
       )}
 
       {status === states.UNAVAILABLE && (
         <ModalFooter className={clsFooter}>
-          <Button className={clsButton} as="a" href={downloadUrl} target="_blank" rel="noopener">
+          <Button
+            className={cx('wk-download-button', clsButton)}
+            as="a"
+            href={downloadUrl}
+            target="_blank"
+            rel="noopener"
+          >
             Install the Extension
           </Button>
         </ModalFooter>

packages/walletkit/src/utils/common.ts

@@ -47,3 +47,11 @@ export function commonErrorHandler(props: { log: any; handler: any; error: any }
     handler?.(error, description);
   }
 }
+
+export async function sleep(duration = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(null);
+    }, duration);
+  });
+}

packages/walletkit/src/wallets/trustWallet/connector.ts

@@ -2,6 +2,7 @@ import { Chain } from 'wagmi';
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
 import { TRUST_WALLET_ID } from '.';
 import { getInjectedProvider } from '../utils';
+import { sleep } from '@/utils/common';
 
 export type TrustWalletConnectorOptions = {
   shimDisconnect?: boolean;
@@ -30,14 +31,21 @@ export class TrustWalletConnector extends MetaMaskConnector {
       options,
     });
   }
+
+  public async getProvider() {
+    if (typeof window !== 'undefined' && !window.trustwallet?.request) {
+      await sleep();
+    }
+    return this.options.getProvider();
+  }
 }
 
 function getProvider() {
   if (typeof window === 'undefined') return;
 
   const provider = getInjectedProvider('isTrust') ?? window.trustwallet ?? window.trustWallet;
 
-  if (provider && provider.removeListener === undefined) {
+  if (provider && !provider.removeListener === undefined) {
     provider.removeListener = provider.off;
   }