fix: duplicate pop-up authn Iframe

.changeset/unlucky-masks-heal.md

@@ -0,0 +1,6 @@
+---
+'@blocto/web3-react-connector': patch
+'@blocto/sdk': patch
+---
+
+fix web3-react-connector duplicate authn popup

adapters/web3-react-connector/src/index.ts

@@ -17,40 +17,47 @@ function parseChainId(chainId: string | number): number {
  * @param options - Options to pass to Blocto SDK.
  * @param onError - Handler to report errors thrown from eventListeners.
  */
+type BloctoOptions = {
+  chainId: number;
+  rpc: string;
+};
+
 export interface BloctoConstructorArgs {
   actions: Actions;
-  options: {
-    chainId: number;
-    rpc: string;
-  };
+  options: BloctoOptions;
   onError?: (error: Error) => void;
 }
 
 export class BloctoConnector extends Connector {
   public provider: any;
-  private bloctoSDK: BloctoSDK;
 
   constructor({ actions, options, onError }: BloctoConstructorArgs) {
     super(actions, onError);
-    this.bloctoSDK = new BloctoSDK({
+    const bloctoSDK = new BloctoSDK({
       ethereum: {
         chainId: options.chainId,
         rpc: options.rpc,
       },
     });
-    this.provider = this.bloctoSDK.ethereum;
-  }
 
-  private async isomorphicInitialize(): Promise<void> {
-    this.provider.on('connect', ({ chainId }: ProviderConnectInfo): void => {
-      this.actions.update({ chainId: parseChainId(chainId) });
-    });
+    this.provider = bloctoSDK.ethereum;
+
+    this.provider.on(
+      'connect',
+      async ({ chainId }: ProviderConnectInfo): Promise<void> => {
+        const accounts = await this.provider.request({
+          method: 'eth_accounts',
+        });
+        this.actions.update({ chainId: parseChainId(chainId), accounts });
+      }
+    );
     this.provider.on('disconnect', (error: ProviderRpcError): void => {
       this.actions.resetState();
       this.onError?.(error);
     });
-    this.provider.on('chainChanged', (chainId: string): void => {
-      this.actions.update({ chainId: parseChainId(chainId) });
+    this.provider.on('chainChanged', async (chainId: string): Promise<void> => {
+      const accounts = await this.provider.request({ method: 'eth_accounts' });
+      this.actions.update({ chainId: parseChainId(chainId), accounts });
     });
     this.provider.on('accountsChanged', (accounts: string[]): void => {
       if (accounts.length === 0) this.actions.resetState();
@@ -65,49 +72,38 @@ export class BloctoConnector extends Connector {
       typeof desiredChainIdOrChainParameters === 'number'
         ? desiredChainIdOrChainParameters
         : desiredChainIdOrChainParameters?.chainId;
-    await this.isomorphicInitialize();
+
     if (!this.provider) throw new Error('No provider');
     if (
       !desiredChainId ||
       parseChainId(desiredChainId) === parseChainId(this.provider.chainId)
     ) {
-      const accounts = await this.provider.request({ method: 'eth_requestAccounts' });
+      const accounts = await this.provider.request({
+        method: 'eth_requestAccounts',
+      });
+
       return this.actions.update({
         chainId: parseChainId(this.provider.chainId),
         accounts,
       });
-    } else if (typeof desiredChainIdOrChainParameters === 'number') {
-      await this.provider
-        .request({
-          method: 'wallet_addEthereumChain',
-          params: [{ chainId: desiredChainId }],
-        })
-        .then(() => {
-          this.provider.request({
-            method: 'wallet_switchEthereumChain',
-            params: [{ chainId: desiredChainId }],
-          });
-        });
-      await this.activate(desiredChainId);
-    } else {
-      // AddEthereumChainParameter
-      await this.provider
-        .request({
-          method: 'wallet_addEthereumChain',
-          params: [desiredChainIdOrChainParameters],
-        })
-        .then(() => {
-          this.provider.request({
-            method: 'wallet_switchEthereumChain',
-            params: [{ chainId: desiredChainId }],
-          });
-        });
-      await this.activate(desiredChainId);
     }
+    const addEthereumChainParameters =
+      typeof desiredChainIdOrChainParameters === 'number'
+        ? { chainId: desiredChainId }
+        : desiredChainIdOrChainParameters;
+
+    await this.provider.request({
+      method: 'wallet_addEthereumChain',
+      params: [addEthereumChainParameters],
+    });
+    await this.provider.request({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: desiredChainId }],
+    });
   }
 
   public deactivate(): void {
-    this.provider?.handleDisconnect();
+    this.provider.request({ method: 'wallet_disconnect' });
     this.actions.resetState();
   }
 }

packages/blocto-sdk/src/providers/ethereum.ts

@@ -149,12 +149,13 @@ export default class EthereumProvider
         `Get support chain failed: ${this.networkVersion} might not be supported yet.`
       );
     }
+    const walletServer =
+      this.injectedWalletServer ||
+      ETH_ENV_WALLET_SERVER_MAPPING[blocto_service_environment];
     this._blocto = {
       ...this._blocto,
       sessionKeyEnv: ETH_SESSION_KEY_MAPPING[blocto_service_environment],
-      walletServer:
-        this.injectedWalletServer ||
-        ETH_ENV_WALLET_SERVER_MAPPING[blocto_service_environment],
+      walletServer,
       blockchainName: name,
       networkType: network_type,
       switchableNetwork: {
@@ -163,7 +164,7 @@ export default class EthereumProvider
           name,
           display_name,
           network_type,
-          wallet_web_url: this._blocto.walletServer,
+          wallet_web_url: walletServer,
           rpc_url: this.rpc,
         },
       },
@@ -443,6 +444,8 @@ export default class EthereumProvider
       case 'wallet_addEthereumChain': {
         return this.loadSwitchableNetwork(payload?.params || []);
       }
+      case 'eth_blockNumber':
+      case 'web3_clientVersion':
       case 'eth_call': {
         const response = await this.handleReadRequests(payload);
         if (!response || (response && !response.result && response.error)) {
@@ -462,8 +465,9 @@ export default class EthereumProvider
       case 'wallet_disconnect': {
         return this.handleDisconnect();
       }
-      case 'eth_accounts':
+      case 'eth_accounts': {
         return getEvmAddress(sessionKeyEnv, blockchainName) || [];
+      }
     }
 
     // Method that requires user to be connected