refactor: wallet-connect to use reown/appkit

Author: ThomasRalee

packages/wallets/wallet-base/src/base.ts

@@ -5,9 +5,11 @@ import type {
 } from '@injectivelabs/ts-types'
 import type {
   WalletMetadata,
+  StrategyEmitter,
   WalletEventListener,
   ConcreteWalletStrategyArgs,
   ConcreteEvmWalletStrategyArgs,
+  WalletStrategyEmitterEventType,
   ConcreteCosmosWalletStrategyArgs,
 } from './types/index.js'
 
@@ -20,6 +22,12 @@ export default abstract class BaseConcreteStrategy {
 
   public metadata?: WalletMetadata
 
+  /**
+   * Optional emitter passed from parent WalletStrategy.
+   * When provided, strategies emit events directly on the parent's emitter.
+   */
+  protected emitter?: StrategyEmitter
+
   public constructor(
     args:
       | ConcreteWalletStrategyArgs
@@ -32,9 +40,21 @@ export default abstract class BaseConcreteStrategy {
         : undefined
     this.chainId = args.chainId
     this.metadata = args.metadata
+    this.emitter = args.emitter
   }
 
   public setMetadata(metadata?: WalletMetadata) {
     this.metadata = metadata
   }
+
+  /**
+   * Emit an event from this strategy.
+   * If emitter was provided from parent, events go directly to parent.
+   */
+  protected emit(
+    event: WalletStrategyEmitterEventType,
+    data?: Record<string, any>,
+  ) {
+    this.emitter?.emit(event, data)
+  }
 }

packages/wallets/wallet-base/src/types/enums.ts

@@ -1,5 +1,7 @@
 import { WalletErrorActionModule } from '@injectivelabs/exceptions'
 
+export * from './events.js'
+
 export const BroadcastMode = {
   Block: 'block',
   Sync: 'sync',

packages/wallets/wallet-base/src/types/events.ts

@@ -0,0 +1,45 @@
+export const StrategyEventType = {
+  ConnectionEnd: 'connection-end',
+  ConnectionStart: 'connection-start',
+  WalletSigningEnd: 'wallet-signing-end',
+  WalletSigningStart: 'wallet-signing-start',
+} as const
+
+export const WalletConnectStrategyEventType = {
+  WalletConnectSigningWithTxTimeout: 'signing-with-tx-timeout',
+} as const
+
+export const WalletStrategyEmitterEventType = {
+  TransactionFail: 'transaction-fail',
+  TransactionSigned: 'transaction-signed',
+  TransactionSignStart: 'transaction-sign-start',
+  TransactionBroadcastEnd: 'transaction-broadcast-end',
+  TransactionBroadcastStart: 'transaction-broadcast-start',
+  TransactionPreparationEnd: 'transaction-preparation-end',
+  TransactionPreparationStart: 'transaction-preparation-start',
+  WalletStrategyDisconnect: 'wallet-strategy-disconnect',
+} as const
+
+export type StrategyEventType =
+  | (typeof StrategyEventType)[keyof typeof StrategyEventType]
+  | (typeof WalletConnectStrategyEventType)[keyof typeof WalletConnectStrategyEventType]
+
+export type WalletStrategyEmitterEventType =
+  | (typeof WalletStrategyEmitterEventType)[keyof typeof WalletStrategyEmitterEventType]
+  | StrategyEventType
+
+export type WalletStrategyEmitterEvents = {
+  [K in WalletStrategyEmitterEventType]: Record<string, any>
+}
+
+export interface WalletStrategyEmitter {
+  on(
+    event: WalletStrategyEmitterEventType,
+    listener: (...args: any[]) => void,
+  ): this
+  off(
+    event: WalletStrategyEmitterEventType,
+    listener: (...args: any[]) => void,
+  ): this
+  emit(event: WalletStrategyEmitterEventType, ...args: any[]): boolean
+}

packages/wallets/wallet-base/src/types/strategy.ts

@@ -13,6 +13,10 @@ import type {
 } from '@injectivelabs/sdk-ts/types'
 import type { Wallet, WalletDeviceType } from './enums.js'
 
+export interface StrategyEmitter {
+  emit(event: string, data?: Record<string, any>): boolean
+}
+
 export type onAccountChangeCallback = (account: string | string[]) => void
 export type onChainIdChangeCallback = () => void
 
@@ -104,6 +108,7 @@ export interface WalletMetadata {
 export interface ConcreteWalletStrategyArgs {
   chainId: ChainId
   metadata?: WalletMetadata
+  emitter?: StrategyEmitter
 }
 
 export interface ConcreteEvmWalletStrategyArgs extends ConcreteWalletStrategyArgs {
@@ -279,6 +284,8 @@ export interface ConcreteWalletStrategy extends Omit<
 
   onChainIdChange?(callback: onChainIdChangeCallback): Promise<void> | void
 
+  initStrategy?(): Promise<void> | void
+
   disconnect?(): Promise<void> | void
 
   getCosmosWallet?(chainId: ChainId): CosmosWalletAbstraction

packages/wallets/wallet-base/src/utils/viem.ts

@@ -59,7 +59,7 @@ export const getViemPublicClient = (
     [EvmChainId.Mainnet, EvmChainId.Sepolia] as EvmChainId[]
   ).includes(chainId as EvmChainId)
 
-  if (isEthereumNetwork && rpcUrl && !rpcUrl.includes('alchemyapi')) {
+  if (isEthereumNetwork && rpcUrl && !rpcUrl.includes('alchemy')) {
     throw new Error(
       `An Alchemy RPC URL must be provided for EvmChainId ${chainId}`,
     )

packages/wallets/wallet-core/src/broadcaster/MsgBroadcaster.ts

@@ -49,6 +49,7 @@ import {
   isCosmosAminoOnlyWallet,
   getEthereumSignerAddress,
   getInjectiveSignerAddress,
+  WalletStrategyEmitterEventType,
 } from '@injectivelabs/wallet-base'
 import {
   TxGrpcApi,
@@ -65,7 +66,6 @@ import {
   createTransactionWithSigners,
 } from '@injectivelabs/sdk-ts/core/tx'
 import { checkIfTxRunOutOfGas } from '../utils/index.js'
-import { WalletStrategyEmitterEventType } from './types.js'
 import type { NetworkEndpoints } from '@injectivelabs/networks'
 import type { ThrownException } from '@injectivelabs/exceptions'
 import type { CosmosTxV1Beta1TxPb } from '@injectivelabs/sdk-ts'

packages/wallets/wallet-core/src/broadcaster/index.ts

@@ -1,3 +1,3 @@
-export * from './types.js'
+export type * from './types.js'
 export * from './MsgBroadcaster.js'
 export * from './Web3Broadcaster.js'

packages/wallets/wallet-core/src/broadcaster/types.ts

@@ -1,4 +1,3 @@
-import type { EventEmitter } from 'eventemitter3'
 import type { Msgs } from '@injectivelabs/sdk-ts/core/modules'
 import type { ChainId, EvmChainId } from '@injectivelabs/ts-types'
 import type { Network, NetworkEndpoints } from '@injectivelabs/networks'
@@ -35,39 +34,3 @@ export interface MsgBroadcasterOptions {
   gasBufferCoefficient?: number
   httpHeaders?: Record<string, string>
 }
-
-export const WalletStrategyEmitterEventType = {
-  TransactionFail: 'transaction-fail',
-  TransactionSigned: 'transaction-signed',
-  TransactionSignStart: 'transaction-sign-start',
-  TransactionBroadcastEnd: 'transaction-broadcast-end',
-  WalletStrategyDisconnect: 'wallet-strategy-disconnect',
-  TransactionBroadcastStart: 'transaction-broadcast-start',
-  TransactionPreparationEnd: 'transaction-preparation-end',
-  TransactionPreparationStart: 'transaction-preparation-start',
-} as const
-
-export type WalletStrategyEmitterEventType =
-  (typeof WalletStrategyEmitterEventType)[keyof typeof WalletStrategyEmitterEventType]
-
-export type WalletStrategyEmitterEvents = {
-  [WalletStrategyEmitterEventType.TransactionFail]: Record<string, any>
-  [WalletStrategyEmitterEventType.TransactionSigned]: Record<string, any>
-  [WalletStrategyEmitterEventType.TransactionSignStart]: Record<string, any>
-  [WalletStrategyEmitterEventType.TransactionBroadcastEnd]: Record<string, any>
-  [WalletStrategyEmitterEventType.WalletStrategyDisconnect]: Record<string, any>
-  [WalletStrategyEmitterEventType.TransactionBroadcastStart]: Record<
-    string,
-    any
-  >
-  [WalletStrategyEmitterEventType.TransactionPreparationEnd]: Record<
-    string,
-    any
-  >
-  [WalletStrategyEmitterEventType.TransactionPreparationStart]: Record<
-    string,
-    any
-  >
-}
-
-export type WalletStrategyEmitter = EventEmitter<WalletStrategyEmitterEvents>

packages/wallets/wallet-core/src/strategy/BaseWalletStrategy.ts

@@ -4,9 +4,8 @@ import {
   Wallet,
   isEvmWallet,
   isCosmosWallet,
-  type WalletMetadata,
+  WalletStrategyEmitterEventType,
 } from '@injectivelabs/wallet-base'
-import { WalletStrategyEmitterEventType } from '../broadcaster/types.js'
 import type { StdSignDoc } from '@keplr-wallet/types'
 import type { OfflineSigner } from '@cosmjs/proto-signing'
 import type { AccountAddress } from '@injectivelabs/ts-types'
@@ -17,6 +16,11 @@ import type {
   AminoSignResponse,
   DirectSignResponse,
 } from '@injectivelabs/sdk-ts/types'
+import type {
+  WalletMetadata,
+  WalletStrategyEmitter,
+  WalletStrategyEmitterEvents,
+} from '@injectivelabs/wallet-base'
 import type {
   Eip1193Provider,
   WalletDeviceType,
@@ -29,10 +33,6 @@ import type {
   CosmosWalletAbstraction,
   WalletStrategy as WalletStrategyInterface,
 } from '@injectivelabs/wallet-base'
-import type {
-  WalletStrategyEmitter,
-  WalletStrategyEmitterEvents,
-} from '../broadcaster/types.js'
 
 const getInitialWallet = (args: WalletStrategyArguments): Wallet => {
   if (args.wallet) {
@@ -84,14 +84,23 @@ export default class BaseWalletStrategy implements WalletStrategyInterface {
     this.emit = this.emitter.emit.bind(this.emitter)
   }
 
+  /**
+   * Get the emitter instance.
+   * Used to pass to strategies so they can emit events directly.
+   */
+  public getEmitter(): WalletStrategyEmitter {
+    return this.emitter
+  }
+
   public getWallet(): Wallet {
     return this.wallet
   }
 
   public async setWallet(wallet: Wallet): Promise<void> {
     this.wallet = wallet
 
-    this.getStrategy()
+    const strategy = this.getStrategy()
+    await strategy?.initStrategy?.()
   }
 
   public setMetadata(metadata?: WalletMetadata) {

packages/wallets/wallet-strategy/src/strategy/index.ts

@@ -1,10 +1,6 @@
 import { GeneralException } from '@injectivelabs/exceptions'
 import { BaseWalletStrategy } from '@injectivelabs/wallet-core'
-import {
-  Wallet,
-  isEvmWallet,
-  type WalletMetadata,
-} from '@injectivelabs/wallet-base'
+import { Wallet, isEvmWallet } from '@injectivelabs/wallet-base'
 import {
   loadEvmStrategy,
   loadMagicStrategy,
@@ -16,6 +12,10 @@ import {
   loadWalletConnectStrategy,
 } from './loaders.js'
 import type { Wallet as WalletType } from '@injectivelabs/wallet-base'
+import type {
+  WalletMetadata,
+  StrategyEmitter,
+} from '@injectivelabs/wallet-base'
 import type {
   ConcreteStrategiesArg,
   ConcreteWalletStrategy,
@@ -43,9 +43,11 @@ const ethereumWalletsDisabled = (args: WalletStrategyArguments) => {
 const createStrategy = async ({
   args,
   wallet,
+  emitter,
 }: {
   wallet: Wallet
   args: WalletStrategyArguments
+  emitter?: StrategyEmitter
 }): Promise<ConcreteWalletStrategy | undefined> => {
   /**
    * If we only want to use Cosmos Native Wallets
@@ -63,8 +65,14 @@ const createStrategy = async ({
     ...args,
     chainId: args.chainId,
     evmOptions: args.evmOptions as WalletStrategyEvmOptions,
+    emitter,
   } as ConcreteEvmWalletStrategyArgs
 
+  const cosmosWalletArgs = {
+    ...args,
+    emitter,
+  }
+
   switch (wallet) {
     case Wallet.Metamask:
     case Wallet.TrustWallet:
@@ -88,7 +96,7 @@ const createStrategy = async ({
     case Wallet.Cosmostation: {
       const CosmosWalletStrategy = await loadCosmosStrategy()
 
-      return new CosmosWalletStrategy({ ...args, wallet })
+      return new CosmosWalletStrategy({ ...cosmosWalletArgs, wallet })
     }
 
     case Wallet.Ledger: {
@@ -136,7 +144,7 @@ const createStrategy = async ({
       }
       const MagicStrategy = await loadMagicStrategy()
 
-      return new MagicStrategy(args)
+      return new MagicStrategy(cosmosWalletArgs)
     }
 
     case Wallet.WalletConnect: {
@@ -179,7 +187,8 @@ export class WalletStrategy extends BaseWalletStrategy {
     this.wallet = wallet
 
     // Preload the strategy for the new wallet
-    await this.loadStrategy(wallet)
+    const strategy = await this.loadStrategy(wallet)
+    await strategy?.initStrategy?.()
   }
 
   /**
@@ -221,6 +230,7 @@ export class WalletStrategy extends BaseWalletStrategy {
             metadata: { ...this.args.metadata, ...metadata },
           },
           wallet: walletEnum,
+          emitter: this.getEmitter(),
         })
 
         continue
@@ -240,7 +250,9 @@ export class WalletStrategy extends BaseWalletStrategy {
    */
   public getStrategy(): ConcreteWalletStrategy {
     if (this.strategies[this.wallet]) {
-      return this.strategies[this.wallet] as ConcreteWalletStrategy
+      const strategy = this.strategies[this.wallet] as ConcreteWalletStrategy
+
+      return strategy
     }
 
     throw new GeneralException(
@@ -275,6 +287,7 @@ export class WalletStrategy extends BaseWalletStrategy {
     const loadPromise = createStrategy({
       args: this.args,
       wallet,
+      emitter: this.getEmitter(),
     })
 
     this.loadingStrategies.set(wallet, loadPromise)