Fix account selection on page load (#15)

* Fix Sign In

* Use es2023

* Fix conflict with Solflare MetaMask connector

* Lint

Author: baptiste-marchand

src/wallet.ts

@@ -59,7 +59,7 @@ export class MetamaskWalletAccount extends ReadonlyWalletAccount {
 export class MetamaskWallet implements Wallet {
   readonly #listeners: { [E in StandardEventsNames]?: StandardEventsListeners[E][] } = {};
   readonly version = '1.0.0' as const;
-  readonly name = 'MetaMask' as const;
+  readonly name = 'MetaMask‎' as const;
   readonly icon = metamaskIcon;
   readonly chains: SolanaChain[] = [SOLANA_MAINNET_CHAIN, SOLANA_DEVNET_CHAIN, SOLANA_TESTNET_CHAIN];
   readonly scope = 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp';
@@ -137,15 +137,19 @@ export class MetamaskWallet implements Wallet {
 
   #connect = async (): Promise<StandardConnectOutput> => {
     if (!this.accounts.length) {
-      const existingSession = await this.client.getSession();
-
-      this.client.onNotification((data: any) => {
-        if (data?.params?.notification?.method === 'metamask_accountsChanged') {
-          this.#handleAccountsChangedEvent(data);
-        }
+      // Setup accountsChanged listener. Returns promise that resolves when first accountsChanged event is received
+      const firstEventPromise = new Promise<void>((resolve) => {
+        const handleFirstEvent = (data: any) => {
+          if (data?.params?.notification?.method === 'metamask_accountsChanged') {
+            this.#handleAccountsChangedEvent(data);
+            resolve();
+          }
+        };
+        this.client.onNotification(handleFirstEvent);
       });
 
-      // If there's no existing accounts for this session scope, create a new one
+      const existingSession = await this.client.getSession();
+
       const session: SessionData | undefined = existingSession?.sessionScopes[this.scope]?.accounts?.length
         ? existingSession
         : await this.client.createSession({
@@ -162,9 +166,23 @@ export class MetamaskWallet implements Wallet {
 
       const accounts = session?.sessionScopes[this.scope]?.accounts;
 
-      if (!accounts?.length || accounts?.[0] === undefined) {
-        throw new Error('No accounts found in MetaMask session');
-      }
+      // Fallback if first event doesn't arrive within a reasonable amount of time
+      await new Promise<void>((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          console.warn('No accountsChanged event received, using first account from session');
+          if (accounts?.[0]) {
+            this.#account = this.#getAccountFromAddress(accounts[0].slice(this.scope.length + 1));
+            resolve();
+          } else {
+            reject(new Error('No accounts available to use from session'));
+          }
+        }, 2000);
+
+        firstEventPromise.then(() => {
+          clearTimeout(timeout);
+          resolve();
+        });
+      });
     }
 
     return { accounts: this.accounts };

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["ES2020", "DOM"],
+    "lib": ["ES2023", "DOM"],
     "module": "CommonJS",
     "moduleResolution": "node",
     "noEmit": true,