@mictonode/widget 0.3.22 → 0.3.23

package/lib/wallet/KeplrSessionManager.ts

@@ -0,0 +1,142 @@
+import {
+  createWallet,
+  removeWallet,
+  WalletName,
+  writeWallet,
+  type AbstractWallet,
+  type ConnectedWallet,
+  type WalletArgument,
+} from './Wallet';
+import {
+  normalizeWalletError,
+  type WalletUserError,
+} from './WalletError';
+
+export const KEPLR_KEYSTORE_EVENT = 'keplr_keystorechange';
+
+export interface WalletEventTarget {
+  addEventListener(type: string, listener: EventListener): void;
+  removeEventListener(type: string, listener: EventListener): void;
+}
+
+type KeplrWalletFactory = (argument: WalletArgument) => AbstractWallet;
+
+function defaultFactory(argument: WalletArgument): AbstractWallet {
+  return createWallet(WalletName.Keplr, argument);
+}
+
+export class KeplrSessionManager {
+  private listener?: EventListener;
+  private argument?: WalletArgument;
+  private onChange?: (wallet: ConnectedWallet | undefined) => void;
+  private onError: (error: WalletUserError) => void = () => undefined;
+  private lifecycleGeneration = 0;
+  private refreshGeneration = 0;
+  private refreshPromise?: Promise<void>;
+  private refreshQueued = false;
+  private refreshScheduled = false;
+
+  constructor(
+    private readonly hdPath: string,
+    private readonly walletFactory: KeplrWalletFactory = defaultFactory,
+    private readonly eventTarget: WalletEventTarget = window,
+  ) {}
+
+  async start(
+    argument: WalletArgument,
+    onChange: (wallet: ConnectedWallet | undefined) => void,
+    onError: (error: WalletUserError) => void = () => undefined,
+  ): Promise<void> {
+    this.dispose();
+    this.argument = argument;
+    this.onChange = onChange;
+    this.onError = onError;
+    const listenerLifecycleGeneration = this.lifecycleGeneration;
+    this.listener = () => {
+      if (listenerLifecycleGeneration !== this.lifecycleGeneration) return;
+      if (this.refreshScheduled) return;
+      this.refreshScheduled = true;
+      queueMicrotask(() => {
+        if (listenerLifecycleGeneration !== this.lifecycleGeneration) return;
+        this.refreshScheduled = false;
+        void this.refresh();
+      });
+    };
+    this.eventTarget.addEventListener(KEPLR_KEYSTORE_EVENT, this.listener);
+    await this.refresh();
+  }
+
+  async refresh(): Promise<void> {
+    if (!this.argument || !this.onChange) return;
+    if (this.refreshPromise) {
+      this.refreshGeneration += 1;
+      this.refreshQueued = true;
+      await this.refreshPromise;
+      return;
+    }
+
+    const lifecycleGeneration = this.lifecycleGeneration;
+    const refreshGeneration = ++this.refreshGeneration;
+    const argument = this.argument;
+    const onChange = this.onChange;
+    onChange(undefined);
+
+    const refreshing = (async () => {
+      try {
+        const [account] = await this.walletFactory(argument).getAccounts();
+        if (
+          lifecycleGeneration !== this.lifecycleGeneration ||
+          refreshGeneration !== this.refreshGeneration
+        ) {
+          return;
+        }
+        if (!account || typeof account.address !== 'string' || !account.address.trim()) {
+          throw new Error('Keplr returned no active account');
+        }
+        const connected: ConnectedWallet = {
+          wallet: WalletName.Keplr,
+          cosmosAddress: account.address,
+          hdPath: this.hdPath,
+        };
+        writeWallet(connected, this.hdPath);
+        onChange(connected);
+      } catch (error) {
+        if (
+          lifecycleGeneration !== this.lifecycleGeneration ||
+          refreshGeneration !== this.refreshGeneration
+        ) {
+          return;
+        }
+        removeWallet(this.hdPath);
+        this.onError(normalizeWalletError(error));
+      }
+    })().finally(() => {
+      if (this.refreshPromise !== refreshing) return;
+      this.refreshPromise = undefined;
+      if (
+        this.refreshQueued &&
+        lifecycleGeneration === this.lifecycleGeneration
+      ) {
+        this.refreshQueued = false;
+        void this.refresh();
+      }
+    });
+
+    this.refreshPromise = refreshing;
+    return refreshing;
+  }
+
+  dispose(): void {
+    this.lifecycleGeneration += 1;
+    this.refreshGeneration += 1;
+    if (this.listener) {
+      this.eventTarget.removeEventListener(KEPLR_KEYSTORE_EVENT, this.listener);
+    }
+    this.listener = undefined;
+    this.argument = undefined;
+    this.onChange = undefined;
+    this.refreshPromise = undefined;
+    this.refreshQueued = false;
+    this.refreshScheduled = false;
+  }
+}

package/lib/wallet/WalletSessionManager.ts

@@ -21,6 +21,7 @@ import {
   getReownGateway,
   type ReownAccountState,
   type ReownGateway,
+  type ReownNetworkState,
 } from './reown/ReownGateway';
 import { EvmEip712Wallet } from './wallets/EvmEip712Wallet';
 import { ethermintToEth } from '../utils/format';
@@ -92,6 +93,7 @@ export class WalletSessionManager {
     walletArgument: WalletArgument,
     onChange: (connected: ConnectedWallet | undefined) => void,
     onError: (error: WalletUserError) => void = () => undefined,
+    provisionNetwork = false,
   ): Promise<ReownGateway> {
     this.dispose();
     const lifecycleGeneration = this.lifecycleGeneration;
@@ -105,6 +107,16 @@ export class WalletSessionManager {
 
     let pendingAddress: string | undefined;
     let verifiedAddress: string | undefined;
+    let authoritativeAddress: string | undefined;
+    let networkValid = true;
+    let provisioningAvailable = provisionNetwork;
+    let provisioningPending = false;
+    let provisioningFailed = false;
+    const clearVisibleState = () => {
+      clearRuntimeWallet(this.hdPath);
+      removeWallet(this.hdPath);
+      onChange(undefined);
+    };
     const synchronizeAccount = async (state: ReownAccountState) => {
       const evmAddress =
         state.isConnected && state.address
@@ -112,23 +124,60 @@ export class WalletSessionManager {
           : undefined;
       if (!evmAddress) {
         this.accountGeneration += 1;
+        authoritativeAddress = undefined;
         pendingAddress = undefined;
         verifiedAddress = undefined;
-        clearRuntimeWallet(this.hdPath);
-        removeWallet(this.hdPath);
-        onChange(undefined);
+        clearVisibleState();
         return;
       }
+      if (evmAddress !== authoritativeAddress) {
+        this.accountGeneration += 1;
+        authoritativeAddress = evmAddress;
+        pendingAddress = undefined;
+        clearVisibleState();
+      }
+      if (provisioningPending || provisioningFailed) return;
+      if (!networkValid && !provisioningAvailable) return;
       if (
         evmAddress === pendingAddress ||
-        (evmAddress === verifiedAddress && runtimeWallets.has(this.hdPath))
+        (evmAddress === verifiedAddress &&
+          pendingAddress === undefined &&
+          runtimeWallets.has(this.hdPath))
       ) {
         return;
       }
 
+      const shouldProvision = provisioningAvailable;
+      if (shouldProvision) {
+        provisioningAvailable = false;
+        provisioningPending = true;
+      }
       const accountGeneration = ++this.accountGeneration;
       pendingAddress = evmAddress;
+      const ownsProvisioning = () =>
+        lifecycleGeneration === this.lifecycleGeneration &&
+        accountGeneration === this.accountGeneration &&
+        authoritativeAddress === evmAddress &&
+        provisioningPending;
       try {
+        if (shouldProvision) {
+          await gateway.ensureNetwork(ownsProvisioning);
+          if (!ownsProvisioning()) {
+            provisioningPending = false;
+            provisioningFailed = true;
+            return;
+          }
+          provisioningPending = false;
+          networkValid = true;
+        }
+        if (
+          lifecycleGeneration !== this.lifecycleGeneration ||
+          accountGeneration !== this.accountGeneration ||
+          authoritativeAddress !== evmAddress ||
+          !networkValid
+        ) {
+          return;
+        }
         const provider = gateway.getProvider();
         if (!provider) throw new Error('EVM wallet provider is unavailable');
         const wallet = this.walletFactory({
@@ -139,7 +188,9 @@ export class WalletSessionManager {
         const accounts = await wallet.getAccounts();
         if (
           lifecycleGeneration !== this.lifecycleGeneration ||
-          accountGeneration !== this.accountGeneration
+          accountGeneration !== this.accountGeneration ||
+          authoritativeAddress !== evmAddress ||
+          !networkValid
         ) {
           return;
         }
@@ -168,6 +219,10 @@ export class WalletSessionManager {
         writeWallet(connected, this.hdPath);
         onChange(connected);
       } catch (error) {
+        if (shouldProvision) {
+          provisioningPending = false;
+          provisioningFailed = true;
+        }
         if (
           lifecycleGeneration !== this.lifecycleGeneration ||
           accountGeneration !== this.accountGeneration
@@ -180,6 +235,9 @@ export class WalletSessionManager {
         onChange(undefined);
         onError(normalizeWalletError(error));
       } finally {
+        if (shouldProvision) {
+          provisioningPending = false;
+        }
         if (
           accountGeneration === this.accountGeneration &&
           pendingAddress === evmAddress
@@ -189,29 +247,57 @@ export class WalletSessionManager {
       }
     };
 
-    this.unsubscribe.push(
-      gateway.subscribeAccount((state) => void synchronizeAccount(state)),
-    );
-    this.unsubscribe.push(
-      gateway.subscribeNetwork((state) => {
-        const networkId = state.caipNetworkId;
+    const synchronizeNetwork = (state: ReownNetworkState) => {
+      const networkId = state.caipNetworkId;
+      if (networkId === undefined) return;
+      const nextNetworkValid = isExpectedNetwork(networkId, config);
+      if (!nextNetworkValid) {
+        if (!networkValid) return;
+        networkValid = false;
         if (
-          networkId !== undefined &&
-          !isExpectedNetwork(networkId, config)
+          provisioningPending ||
+          (provisioningAvailable && authoritativeAddress === undefined)
         ) {
+          return;
+        }
+        if (!provisioningPending) {
           this.accountGeneration += 1;
           pendingAddress = undefined;
-          verifiedAddress = undefined;
-          clearRuntimeWallet(this.hdPath);
-          removeWallet(this.hdPath);
-          onChange(undefined);
-          onError(normalizeWalletError({ code: 4901 }));
         }
+        verifiedAddress = undefined;
+        clearVisibleState();
+        onError(normalizeWalletError({ code: 4901 }));
+        return;
+      }
+      if (networkValid) return;
+      networkValid = true;
+      const current = gateway.getAccount();
+      if (current) void synchronizeAccount(current);
+    };
+
+    this.unsubscribe.push(
+      gateway.subscribeAccount((state) => {
+        if (lifecycleGeneration !== this.lifecycleGeneration) return;
+        void synchronizeAccount(state);
+      }),
+    );
+    this.unsubscribe.push(
+      gateway.subscribeNetwork((state) => {
+        if (lifecycleGeneration !== this.lifecycleGeneration) return;
+        synchronizeNetwork(state);
       }),
     );
 
+    const currentNetwork = gateway.getNetwork();
+    if (currentNetwork) synchronizeNetwork(currentNetwork);
     const current = gateway.getAccount();
     if (current?.isConnected) await synchronizeAccount(current);
+    if (lifecycleGeneration !== this.lifecycleGeneration) {
+      throw new WalletUserError(
+        'disconnected',
+        'Wallet session changed before connection completed',
+      );
+    }
     return gateway;
   }
 
@@ -226,19 +312,18 @@ export class WalletSessionManager {
       walletArgument,
       onChange,
       onError,
+      true,
     );
-    await gateway.open();
+    if (!gateway.getAccount()?.isConnected) {
+      await gateway.open();
+    }
   }
 
   async disconnect(config: ReownWalletConfig): Promise<void> {
     this.dispose();
+    removeWallet(this.hdPath);
     const gateway = await this.gatewayFactory(config);
-    try {
-      await gateway.disconnect();
-    } finally {
-      clearRuntimeWallet(this.hdPath);
-      removeWallet(this.hdPath);
-    }
+    await gateway.disconnect();
   }
 
   dispose(): void {
@@ -246,5 +331,6 @@ export class WalletSessionManager {
     this.accountGeneration += 1;
     for (const unsubscribe of this.unsubscribe) unsubscribe();
     this.unsubscribe = [];
+    clearRuntimeWallet(this.hdPath);
   }
 }

package/lib/wallet/reown/EvmNetworkProvisioner.ts

@@ -0,0 +1,97 @@
+import type { Eip1193Provider } from '../providers/Eip1193Provider';
+import type { ReownNetwork } from './ReownConfig';
+
+function isUnknownChainError(error: unknown): boolean {
+  type Match = 'none' | 'unknown-chain' | 'user-rejected';
+  const visited = new Set<object>();
+  const inspect = (candidate: unknown, depth: number): Match => {
+    if (
+      typeof candidate !== 'object' ||
+      candidate === null ||
+      depth > 4 ||
+      visited.has(candidate)
+    ) {
+      return 'none';
+    }
+    visited.add(candidate);
+
+    try {
+      const code = 'code' in candidate
+        ? String(candidate.code).trim()
+        : undefined;
+      if (code === '4001') {
+        return 'user-rejected';
+      }
+      let match: Match = code === '4902' ? 'unknown-chain' : 'none';
+      for (const key of ['cause', 'error', 'data', 'originalError']) {
+        if (key in candidate) {
+          const nested = inspect(candidate[key], depth + 1);
+          if (nested === 'user-rejected') return nested;
+          if (nested === 'unknown-chain') match = nested;
+        }
+      }
+      return match;
+    } catch {
+      return 'none';
+    }
+  };
+
+  return inspect(error, 0) === 'unknown-chain';
+}
+
+export async function ensureEvmNetwork(
+  provider: Eip1193Provider,
+  network: ReownNetwork,
+  isActive: () => boolean = () => true,
+): Promise<void> {
+  const chainId = `0x${network.id.toString(16)}`;
+  const isExpectedChain = (value: unknown) =>
+    typeof value === 'string' && value.toLowerCase() === chainId;
+  const assertActive = () => {
+    if (!isActive()) {
+      throw new Error('EVM network request is no longer active');
+    }
+  };
+
+  assertActive();
+  const currentChain = await provider.request({ method: 'eth_chainId' });
+  assertActive();
+  if (isExpectedChain(currentChain)) {
+    return;
+  }
+
+  const switchRequest = {
+    method: 'wallet_switchEthereumChain',
+    params: [{ chainId }],
+  } as const;
+
+  try {
+    await provider.request(switchRequest);
+    assertActive();
+  } catch (error) {
+    assertActive();
+    if (!isUnknownChainError(error)) throw error;
+
+    await provider.request({
+      method: 'wallet_addEthereumChain',
+      params: [{
+        chainId,
+        chainName: network.name,
+        nativeCurrency: network.nativeCurrency,
+        rpcUrls: [network.rpcUrl],
+        ...(network.explorerUrl
+          ? { blockExplorerUrls: [network.explorerUrl] }
+          : {}),
+      }],
+    });
+    assertActive();
+    await provider.request(switchRequest);
+    assertActive();
+  }
+
+  const verifiedChain = await provider.request({ method: 'eth_chainId' });
+  assertActive();
+  if (!isExpectedChain(verifiedChain)) {
+    throw new Error('EVM wallet did not switch to configured network');
+  }
+}

package/lib/wallet/reown/ReownGateway.ts

@@ -1,6 +1,7 @@
 import type { AppKit } from '@reown/appkit/vue';
 import type { Eip1193Provider } from '../providers/Eip1193Provider';
 import type { ReownWalletConfig } from './ReownConfig';
+import { ensureEvmNetwork } from './EvmNetworkProvisioner';
 
 export interface ReownAccountState {
   address?: string;
@@ -21,8 +22,10 @@ export interface ReownWalletInfo {
 export interface ReownGateway {
   open(): Promise<void>;
   disconnect(): Promise<void>;
+  ensureNetwork(isCurrent?: () => boolean): Promise<void>;
   getProvider(): Eip1193Provider | undefined;
   getAccount(): ReownAccountState | undefined;
+  getNetwork(): ReownNetworkState | undefined;
   getWalletInfo(): ReownWalletInfo | undefined;
   subscribeAccount(
     callback: (account: ReownAccountState) => void,
@@ -59,7 +62,7 @@ export async function getReownGateway(
 async function createGateway(
   config: ReownWalletConfig,
 ): Promise<ReownGateway> {
-  const [{ createAppKit }, { EthersAdapter }, { defineChain }] =
+  const [{ createAppKit }, { EthersAdapter }, { defineChain, mainnet }] =
     await Promise.all([
       import('@reown/appkit/vue'),
       import('@reown/appkit-adapter-ethers'),
@@ -87,8 +90,10 @@ async function createGateway(
 
   const appKit: AppKit = createAppKit({
     adapters: [new EthersAdapter()],
-    networks: [network],
-    defaultNetwork: network,
+    networks: [network, mainnet],
+    defaultNetwork: mainnet,
+    allowUnsupportedChain: true,
+    enableNetworkSwitch: false,
     projectId: config.projectId,
     metadata: config.metadata,
     featuredWalletIds: config.featuredWalletIds,
@@ -117,6 +122,14 @@ async function createGateway(
       await appKit.open({ view: 'Connect', namespace: 'eip155' });
     },
     disconnect: () => appKit.disconnect('eip155'),
+    ensureNetwork: async (isCurrent) => {
+      const provider =
+        appKit.getProvider<Eip1193Provider>('eip155');
+      if (!provider) {
+        throw new Error('EVM wallet provider is unavailable');
+      }
+      await ensureEvmNetwork(provider, config.network, isCurrent);
+    },
     getProvider: () => appKit.getProvider<Eip1193Provider>('eip155'),
     getAccount: () => {
       const account = appKit.getAccount('eip155');
@@ -128,6 +141,12 @@ async function createGateway(
           }
         : undefined;
     },
+    getNetwork: () => {
+      const network = appKit.getCaipNetwork('eip155');
+      return network
+        ? { caipNetworkId: network.caipNetworkId }
+        : undefined;
+    },
     getWalletInfo: () => {
       const info = appKit.getWalletInfo('eip155');
       return info

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mictonode/widget",
     "private": false,
-    "version": "0.3.22",
+    "version": "0.3.23",
     "packageManager": "yarn@1.22.22",
     "type": "module",
     "main": "dist/ping-widget.js",