feat: wallet manager package

.gitignore

@@ -31,6 +31,7 @@ yarn-error.log*
 # yarn NON Zero-install
 .pnp.*
 .yarn/*
+!.yarn/cache
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
@@ -44,4 +45,5 @@ public/sygma-runtime-config*
 .idea
 .vscode
 
-/dist
+/dist
+/examples

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
-
 compressionLevel: 0
 
 enableGlobalCache: true
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

package.json

@@ -31,7 +31,7 @@
     "prettier": "^3.0.3",
     "typescript": "^5.2.2"
   },
-  "packageManager": "yarn@3.6.3",
+  "packageManager": "yarn@4.0.1",
   "scripts": {
     "build:wallet-manager": "yarn workspace @builtwithsygma/sygmaprotocol-wallet-manager clean && yarn workspace @builtwithsygma/sygmaprotocol-wallet-manager build",
     "build:sdk-manager": "yarn workspace @builtwithsygma/sygmaprotocol-sdk-manager clean && yarn workspace @builtwithsygma/sygmaprotocol-sdk-manager build",

packages/wallet-manager/package.json

@@ -11,16 +11,24 @@
     "dev": "tsc --build --clean && tsc --build ./tsconfig.json --watch",
     "clean": "rm -rf ./build",
     "lint": "eslint 'src/**/*.ts'",
-    "lint:fix": "yarn run lint --fix"
+    "lint:fix": "yarn run lint --fix",
+    "test": "vitest --config ./vite.config.ts"
   },
   "author": "Sygmaprotocol Product Team",
   "devDependencies": {
     "@polkadot/types": "10.7.2",
-    "typescript": "^5.2.2"
+    "jsdom": "^22.1.0",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.5"
   },
   "dependencies": {
+    "@ethersproject/abstract-signer": "5.7.0",
+    "@lit/context": "1.0.0",
     "@polkadot/api": "10.7.2",
-    "@polkadot/extension-dapp": "^0.46.5",
-    "ethers": "5.7.2"
+    "@polkadot/extension-dapp": "0.46.5",
+    "lit": "3.0.0"
+  },
+  "peerDependencies": {
+    "ethers": "*"
   }
 }

packages/wallet-manager/src/WalletManagerContext.ts

@@ -0,0 +1,78 @@
+import { provide, createContext } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import {
+  type WalletManagerController as TWalletManagerController,
+  WalletManagerController
+} from './WalletManagerController';
+import { ethers } from 'ethers';
+import { ApiPromise } from '@polkadot/api';
+import { Networks } from './types';
+
+export const WalletManagerContext = createContext<
+  TWalletManagerController | undefined
+>('wallet-context');
+
+export const AccountContext = createContext<string | undefined>(
+  'account-context'
+);
+
+/**
+ * @name WalletManagerContextProvider
+ * @description This component is responsible for providing the WalletManagerController as a context to all its children.
+ * It also provides a synthetic event creator function that can be used to dispatch custom events.
+ * @example
+ * For you to consume the context objects, you need to wrap up your component with the wallet-manager-context on your render method.
+ * You can either pass a web3Provider, an apiPromise or a wssConnectionUrl to the component.
+ *
+ * Passing a web3Provider and an apiPromise
+ * <wallet-manager-context
+ *   .web3Provider=${web3Provider}
+ *   .apiPromise=${apiPromise}
+ * >
+ *    <your-component></your-component>
+ * </wallet-manager-context>
+ *
+ * Passing a wssConnectionUrl
+ * <wallet-manager-context
+ *  .wssConnectionUrl=${wssConnectionUrl}
+ * >
+ *   <your-component></your-component>
+ * </wallet-manager-context>
+ */
+@customElement('wallet-manager-context-provider')
+export class WalletManagerContextProvider extends LitElement {
+  @provide({ context: WalletManagerContext })
+  @state()
+  walletManagerController: WalletManagerController;
+
+  @property({ type: Object })
+  web3Provider?: ethers.providers.Web3Provider;
+
+  @property({ type: Object })
+  apiPromise?: ApiPromise;
+
+  @property({ type: String })
+  wssConnectionUrl?: string;
+
+  @property({ type: String })
+  networks: Networks;
+
+  constructor(networks: Networks) {
+    super();
+    this.networks = networks;
+    this.walletManagerController = new WalletManagerController(
+      this,
+      this.networks,
+      {
+        web3Provider: this.web3Provider,
+        apiPromise: this.apiPromise,
+        wssConnectionUrl: this.wssConnectionUrl
+      }
+    );
+  }
+
+  render() {
+    return html` <slot></slot>`;
+  }
+}

packages/wallet-manager/src/WalletManagerController.ts

@@ -0,0 +1,131 @@
+import { ReactiveControllerHost } from 'lit';
+import { EvmWallet, SubstrateWallet } from '.';
+import { Web3Provider } from '@ethersproject/providers';
+import { ApiPromise } from '@polkadot/api';
+import { AddChain, Networks } from './types';
+import { customEVMEvents, IWalletManagerController } from './interfaces';
+import { Signer } from '@ethersproject/abstract-signer';
+
+export class WalletManagerController implements IWalletManagerController {
+  private host: ReactiveControllerHost;
+  evmWallet?: EvmWallet;
+  substrateWallet?: SubstrateWallet;
+  account?: string;
+  substrateAccount?: string;
+
+  constructor(
+    host: ReactiveControllerHost,
+    networks: Networks,
+    initArgument: {
+      web3Provider?: Web3Provider;
+      apiPromise?: ApiPromise;
+      wssConnectionUrl?: string;
+    }
+  ) {
+    (this.host = host).addController(this);
+
+    if (networks === Networks.EVM) {
+      this.initWeb3Provider(initArgument.web3Provider);
+    } else if (networks === Networks.Substrate) {
+      this.initFromApiPromise(initArgument as ApiPromise);
+    } else if (
+      networks === Networks.Substrate &&
+      initArgument.wssConnectionUrl
+    ) {
+      this.initFromWssProvider(initArgument as string);
+    }
+  }
+
+  hostDisconnected(): void {
+    if (this.evmWallet) {
+      this.evmWallet?.removeAllListeners();
+    }
+  }
+
+  public addAccountChangedEventListener(
+    callback: (account: string) => void
+  ): void {
+    this.evmWallet?.addListener(customEVMEvents.ACCOUNT_CHANGE, (account) => {
+      this.account = account;
+      callback(account);
+    });
+  }
+
+  public addChainChangedEventListener(callback: () => void): void {
+    this.evmWallet?.addListener(customEVMEvents.CHAIN_CHANGE, () => {
+      this.account = this.evmWallet?.address;
+      callback();
+    });
+  }
+
+  public initWeb3Provider(web3Provider?: Web3Provider): void {
+    this.evmWallet = new EvmWallet(web3Provider);
+  }
+
+  public initFromApiPromise(apiPromise: ApiPromise): void {
+    this.substrateWallet = SubstrateWallet.initFromApiPromise(apiPromise);
+  }
+
+  public async initFromWssProvider(wssProvider: string): Promise<void> {
+    this.substrateWallet =
+      await SubstrateWallet.initFromWssProvider(wssProvider);
+  }
+
+  public async addChain({
+    chainId,
+    chainName,
+    rpcUrl,
+    nativeCurrency
+  }: AddChain): Promise<void> {
+    try {
+      await this.evmWallet?.addChain({
+        chainId,
+        chainName,
+        rpcUrl,
+        nativeCurrency
+      });
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  public async connectToSubstrate(): Promise<void> {
+    await this.substrateWallet?.connect();
+    this.substrateAccount = this.substrateWallet?.substrateAccount;
+    this.host.requestUpdate();
+  }
+
+  public async connectEvmWallet(): Promise<void> {
+    await this.evmWallet?.connect();
+    this.account = this.evmWallet?.address;
+    this.host.requestUpdate();
+  }
+
+  public getSigner(): Signer {
+    if (this.evmWallet?.signer) {
+      return this.evmWallet.signer;
+    } else {
+      throw new Error('EvmWallet not initialized');
+    }
+  }
+
+  get accountData(): string | undefined {
+    return this.account;
+  }
+
+  get substrateAccountAddress(): string | undefined {
+    return this.substrateAccount;
+  }
+
+  get provider(): Web3Provider | undefined {
+    return this.evmWallet?.web3Provider;
+  }
+
+  get apiPromise(): ApiPromise | undefined {
+    if (this.substrateWallet) {
+      return this.substrateWallet.apiPromise;
+    } else {
+      throw new Error('SubstrateWallet not initialized');
+    }
+  }
+}

packages/wallet-manager/src/index.ts

@@ -0,0 +1,10 @@
+export { EvmWallet, SubstrateWallet } from './wallets';
+export { WalletManagerController } from './WalletManagerController';
+export {
+  WalletManagerContextProvider,
+  WalletManagerContext,
+  AccountContext
+} from './WalletManagerContext';
+
+export { type SyntheticEventCreator } from './types';
+export { syntheticEventCreator } from './utils';

packages/wallet-manager/src/interfaces/index.ts

@@ -0,0 +1,57 @@
+import { Web3Provider } from '@ethersproject/providers';
+import { ApiPromise } from '@polkadot/api';
+import { ReactiveController } from 'lit';
+import { AddChain } from '../types';
+import { Signer } from '@ethersproject/abstract-signer';
+
+export interface SupportedWallet {
+  id: string;
+  name: string;
+  icon: string;
+  providerName: string;
+}
+
+export interface IEvmWallet {
+  web3Provider: Web3Provider;
+  address?: string;
+  signer?: Signer;
+  connect(): Promise<void>;
+  addChain({
+    chainId,
+    rpcUrl,
+    chainName
+  }: {
+    chainId: number;
+    rpcUrl: string;
+    chainName: string;
+    nativeCurrency: {
+      name: string;
+      symbol: string;
+      decimals: number;
+    };
+  }): Promise<void>;
+}
+
+export interface ISubstrateWallet {
+  apiPromise: ApiPromise;
+  substrateAccount?: string;
+}
+
+export interface IWalletManagerController extends ReactiveController {
+  evmWallet?: IEvmWallet;
+  substrateWallet?: ISubstrateWallet;
+  account?: string;
+  substrateAccount?: string;
+
+  initWeb3Provider(web3Provider?: Web3Provider): void;
+  initFromWssProvider(wssProvider: string): Promise<void>;
+  initFromApiPromise(apiPromise: ApiPromise): void;
+  addChain(addChainParameters: AddChain): Promise<void>;
+  connectToSubstrate(): Promise<void>;
+  connectEvmWallet(): Promise<void>;
+}
+
+export const customEVMEvents = {
+  ACCOUNT_CHANGE: 'account-change',
+  CHAIN_CHANGE: 'chain-change'
+} as const;

packages/wallet-manager/src/test/EvmWallet.test.ts

@@ -0,0 +1,27 @@
+import { ethers } from 'ethers';
+import { ExternalProvider } from '@ethersproject/providers';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { EvmWallet } from '../';
+
+describe('EvmWallet', () => {
+  describe('EvmWallet + provider on window', () => {
+    beforeEach(() => {
+      window.ethereum = {
+        request: () => Promise.resolve(true),
+        on: vi.fn()
+      } as ExternalProvider & { on: () => void };
+    });
+    it('should be able to create an instance of EvmWallet passing a web3Provider', () => {
+      const w3Provider = new ethers.providers.Web3Provider(window.ethereum);
+      const evmWallet = new EvmWallet(w3Provider);
+
+      expect(evmWallet).toBeInstanceOf(EvmWallet);
+    });
+
+    it('should be able to create an instance of EvmWallet without passing a web3Provider', () => {
+      const evmWallet = new EvmWallet();
+
+      expect(evmWallet).toBeInstanceOf(EvmWallet);
+    });
+  });
+});