feat: wallet manager package

packages/wallet-manager/package.json

@@ -11,16 +11,22 @@
     "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"
+    "ethers": "5.7.2",
+    "lit": "^2.8.0"
   }
 }

packages/wallet-manager/src/WalletManagerContext.ts

@@ -0,0 +1,70 @@
+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 { SyntheticEventCreator } from './types';
+
+export const WalletManagerContext = createContext<
+  TWalletManagerController | undefined
+>('wallet-context');
+
+export const SyntheticEventCreatorContext =
+  createContext<SyntheticEventCreator>('synthetic-event');
+
+@customElement('wallet-manager-context')
+export class WalletManagerContextProvider extends LitElement {
+  @provide({ context: WalletManagerContext })
+  @state()
+  walletManagerController?: WalletManagerController;
+
+  @provide({ context: SyntheticEventCreatorContext })
+  @state()
+  syntheticEventCreator: SyntheticEventCreator = (
+    eventName: string,
+    dataToPass: unknown
+  ) => {
+    const event = new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      detail: dataToPass
+    });
+
+    this.dispatchEvent(event);
+  };
+
+  @property({ type: Object })
+  web3Provider?: ethers.providers.Web3Provider;
+
+  @property({ type: Object })
+  apiPromise?: ApiPromise;
+
+  @property({ type: String })
+  wssProvider?: string;
+
+  constructor() {
+    super();
+    this.walletManagerController = new WalletManagerController(this);
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.web3Provider) {
+      this.walletManagerController?.initFromWeb3Provider(this.web3Provider);
+    } else if (this.apiPromise) {
+      this.walletManagerController?.connectFromApiPromise(this.apiPromise!);
+    } else if (this.wssProvider) {
+      this.walletManagerController?.connectFromWssProvider(this.wssProvider!);
+    } else {
+      this.walletManagerController?.initFromWindow();
+    }
+  }
+
+  render() {
+    return html` <slot></slot>`;
+  }
+}

packages/wallet-manager/src/WalletManagerController.ts

@@ -0,0 +1,137 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { EvmWallet, SubstrateWallet } from '.';
+import { Web3Provider } from '@ethersproject/providers';
+import { ApiPromise } from '@polkadot/api';
+import { AddChain } from './types';
+import { IWalletManagerController } from './interfaces';
+import { Signer } from '@ethersproject/abstract-signer';
+
+export class WalletManagerController implements IWalletManagerController {
+  host: ReactiveControllerHost;
+  evmWallet?: EvmWallet;
+  substrateWallet?: SubstrateWallet;
+  account?: string;
+  substrateAccount?: string;
+
+  constructor(host: ReactiveControllerHost) {
+    (this.host = host).addController(this as ReactiveController);
+  }
+
+  private appendProviderEvents(evmWallet: EvmWallet): void {
+    evmWallet.addListener('walletAccountChanged', (account) => {
+      this.account = account;
+      this.host.requestUpdate();
+    });
+  }
+
+  /**
+   * @name initFromWeb3Provider
+   * @param web3Provider Web3Provider
+   * @description Initializes the EvmWallet from a Web3Provider
+   */
+  public initFromWeb3Provider(web3Provider: Web3Provider): void {
+    this.evmWallet = EvmWallet.initFromWeb3Provider(web3Provider);
+    this.appendProviderEvents(this.evmWallet);
+  }
+
+  /**
+   * @name initFromWindow
+   * @description Initializes the EvmWallet from a valid EIP-1193 provider
+   */
+  public initFromWindow(): void {
+    this.evmWallet = EvmWallet.initFromWindow();
+  }
+
+  /**
+   * @name connectFromApiPromise
+   * @param apiPromise
+   * @description Initializes the SubstrateWallet from an ApiPromise
+   */
+  public connectFromApiPromise(apiPromise: ApiPromise): void {
+    this.substrateWallet = SubstrateWallet.connectFromApiPromise(apiPromise);
+  }
+
+  /**
+   * @name connectFromWssProvider
+   * @param wssProvider
+   * @description Initializes the SubstrateWallet from a wssProvider
+   */
+  public async connectFromWssProvider(wssProvider: string): Promise<void> {
+    this.substrateWallet =
+      await SubstrateWallet.connectFromWssProvider(wssProvider);
+  }
+
+  /**
+   * @name addChain
+   * @param { AddChain }
+   * @description Adds a chain to the EvmWallet
+   * @returns void
+   */
+  public async addChain({
+    chainId,
+    chainName,
+    rpcUrl,
+    nativeCurrency
+  }: AddChain): Promise<void> {
+    try {
+      await this.evmWallet?.addChain({
+        chainId,
+        chainName,
+        rpcUrl,
+        nativeCurrency
+      });
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  /**
+   * @name connect
+   * @returns void
+   * @description Connects the Substrate extension key manager
+   */
+  public async connectoToSubstrate(): Promise<void> {
+    await this.substrateWallet?.connect();
+    this.substrateAccount = this.substrateWallet?.substrateAccount;
+    this.host.requestUpdate();
+  }
+
+  /**
+   * @name connectEvmWallet
+   * @returns void
+   * @description Connects the EvmWallet
+   */
+  public async connectEvmWallet(): Promise<void> {
+    await this.evmWallet?.connect();
+    this.account = this.evmWallet?.address;
+    this.host.requestUpdate();
+  }
+
+  public getSigner(): Signer {
+    if (this.evmWallet) {
+      return this.evmWallet?.signer as 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,9 @@
+export { EvmWallet, SubstrateWallet } from './wallets';
+export { WalletManagerController } from './WalletManagerController';
+export {
+  WalletManagerContextProvider,
+  WalletManagerContext,
+  SyntheticEventCreatorContext
+} from './WalletManagerContext';
+
+export { type SyntheticEventCreator } from './types';

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

@@ -0,0 +1,58 @@
+import { Web3Provider, ExternalProvider } from '@ethersproject/providers';
+import { ApiPromise, WsProvider } 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;
+  windowConnector: ExternalProvider;
+  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 ISusbtrateWallet {
+  wssProvider?: WsProvider;
+  apiPromise?: ApiPromise;
+  substrateAccount?: string;
+}
+
+export interface IWalletManagerController extends ReactiveController {
+  web3Provider?: Web3Provider;
+  apiPromise?: ApiPromise;
+  wsProviderUrl?: string;
+  evmWallet?: IEvmWallet;
+  substrateWallet?: ISusbtrateWallet;
+  account?: string;
+  substrateAccount?: string;
+
+  initFromWeb3Provider(web3Provider: Web3Provider): void;
+  initFromWindow(): void;
+  connectFromWssProvider(wssProvider: string): Promise<void>;
+  connectFromApiPromise(apiPromise: ApiPromise): void;
+  addChain(addChainParameters: AddChain): Promise<void>;
+  connectoToSubstrate(): Promise<void>;
+  connectEvmWallet(): Promise<void>;
+}

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 = EvmWallet.initFromWeb3Provider(w3Provider);
+
+      expect(evmWallet).toBeInstanceOf(EvmWallet);
+    });
+
+    it('should be able to create an instance of EvmWallet without passing a web3Provider', () => {
+      const evmWallet = EvmWallet.initFromWindow();
+
+      expect(evmWallet).toBeInstanceOf(EvmWallet);
+    });
+  });
+});

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

@@ -0,0 +1,37 @@
+import { ApiPromise, WsProvider } from '@polkadot/api';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { SubstrateWallet } from '../wallets';
+
+vi.mock('@polkadot/api', async () => {
+  const mod =
+    await vi.importActual<typeof import('@polkadot/api')>('@polkadot/api');
+  const WsProviderMock = vi.fn();
+  const ApiPromiseMock = {
+    create: async () => {}
+  };
+  return {
+    ...mod,
+    WsProvider: WsProviderMock,
+    ApiPromise: ApiPromiseMock
+  };
+});
+
+describe('SubstrateWallet', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should be able to create an instance of SubstrateWallet passing an ApiPromise', async () => {
+    const wsProvider = new WsProvider('wss:someurl');
+    const apiPromise = await ApiPromise.create({ provider: wsProvider });
+
+    const substrateWallet = SubstrateWallet.connectFromApiPromise(apiPromise);
+    expect(substrateWallet).toBeInstanceOf(SubstrateWallet);
+  });
+
+  it('should be able to create an instance of SubstrateWallet passing a wssProvider', async () => {
+    const substrateWallet =
+      await SubstrateWallet.connectFromWssProvider('wss:someurl');
+    expect(substrateWallet).toBeInstanceOf(SubstrateWallet);
+  });
+});