Merge pull request #12 from sh3nk/ethers-adapter-update

Ethers adapter update + some fixes

Author: dimitrov-d

apps/js-test/src/ethers5.ts

@@ -7,7 +7,7 @@ async function start() {
   // Wait for wallet SDK and account to initialize
   await new Promise<void>(resolve => {
     const clear = setInterval(() => {
-      if (window.embeddedWallet && !!window.embeddedWallet.lastAccount.address) {
+      if (window.embeddedWallet && !!window.embeddedWallet.lastAccount.contractAddress) {
         clearInterval(clear);
         resolve();
       }

apps/js-test/src/ethers6.ts

@@ -7,7 +7,7 @@ async function start() {
   // Wait for wallet SDK and account to initialize
   await new Promise<void>(resolve => {
     const clear = setInterval(() => {
-      if (window.embeddedWallet && !!window.embeddedWallet.lastAccount.address) {
+      if (window.embeddedWallet && !!window.embeddedWallet.lastAccount.contractAddress) {
         clearInterval(clear);
         resolve();
       }

apps/js-test/src/viem.ts

@@ -15,7 +15,7 @@ async function start() {
   // Wait for wallet SDK and account to initialize
   await new Promise<void>(resolve => {
     const clear = setInterval(() => {
-      if (window.embeddedWallet && !!window.embeddedWallet.lastAccount.address) {
+      if (window.embeddedWallet && !!window.embeddedWallet.lastAccount.contractAddress) {
         clearInterval(clear);
         resolve();
       }

apps/vue-test/src/TestSdk.vue

@@ -28,7 +28,7 @@ async function transferNativeBalance() {
   const res = await sendTransaction({
     to: '0x700cebAA997ecAd7B0797f8f359C621604Cce6Bf',
     value: '10000000',
-    chainId: 1287,
+    // chainId: 1287,
   });
   console.log(res);
 }

packages/gateway/src/contexts/global.context.tsx

@@ -33,9 +33,7 @@ function GlobalProvider({ children }: { children: ReactNode }) {
       const urlParams = new URLSearchParams(window.location.search);
 
       if (!wallet) {
-        setWallet(
-          EmbeddedWalletSDK({ clientId: urlParams.get('clientId') || '', noPasskeyIframe: true })
-        );
+        setWallet(EmbeddedWalletSDK({ clientId: urlParams.get('clientId') || '' }));
       }
 
       const referrer = urlParams.get('ref');

packages/sdk/README.md

@@ -1,6 +1,8 @@
 # Embedded App Wallet
 
-Apillon Embedded Wallet JS SDK
+Apillon Embedded Wallet JS SDK.
+
+More info can be found [in the Apillon wiki](https://wiki.apillon.io/build/12-embedded-wallets-integration.html).
 
 ## Stack
 
@@ -34,6 +36,11 @@ defaultNetworkId?: number;
  * Configuration of available networks. Oasis Sapphire is always included (ids 23294 and 23295)
 */
 networks?: Network[];
+
+/**
+ * Method for authenticating with passkey to make it global.
+ */
+passkeyAuthMode: 'redirect' | 'popup' | 'tab_process' | 'tab_form' = 'redirect';
 ```
 
 The class instance is then available on window (`embeddedWallet`) and can be obtained with the `getEmbeddedWallet()` utility.
@@ -85,6 +92,18 @@ wallet.events.on('txSubmitted', tx => {
 
 - `getAccountBalance`
 
+- `getAccountPrivateKey`
+
+### Wallet accounts methods
+
+- `getAccountWallets`
+  Get all wallets added on user's account. Requires authentication.
+
+- `addAccountWallet`
+  Add new wallet or import from privateKey.
+
+- `updateAccountWalletTitle`
+
 ### Transaction methods
 
 - `signMessage`
@@ -96,13 +115,21 @@ wallet.events.on('txSubmitted', tx => {
   Send raw transaction data to network.
   If chainId is provided, the transaction is sent to that network (cross-chain).
 
+- `submitTransaction`
+  Prepare transaction and emit `txSubmitted` event (to show tx in tx history in UI e.g.).
+  To be used after sending transaction through anything else than `broadcastTransaction`.
+  Doesn't do anything by itself, just for logging/parsing transactions.
+
 - `signContractWrite`
   Get signed tx for making a contract write call.
 
 - `contractRead`
   Get result of contract read.
   Utility function, this has nothing to do with Oasis.
 
+- `processGaslessMethod`
+  Call a contract method with a gasless transaction (app owner pays for the transaction fees instead of user).
+
 ### mustConfirm
 
 This parameter can be used for wallet actions that require user confirmation. If set to `true`, the event `signatureRequest`/`txApprove` will be emitted with `resolve()` method passed in payload. Once resolve is called, the action continues. This can be used to display tx confirmation UI e.g.

packages/sdk/lib/adapters/ethers.ts

@@ -3,9 +3,8 @@ import { abort, getEmbeddedWallet } from '../utils';
 import EmbeddedWallet from '..';
 
 class EmbeddedEthersSigner extends ethers.AbstractSigner<ethers.JsonRpcProvider> {
-  address = '';
   wallet: EmbeddedWallet;
-  // override provider: ethers.JsonRpcProvider;
+  internalSigner: InternalEmbeddedEthersSignerextends;
 
   constructor(provider?: ethers.JsonRpcProvider) {
     const w = getEmbeddedWallet();
@@ -16,8 +15,94 @@ class EmbeddedEthersSigner extends ethers.AbstractSigner<ethers.JsonRpcProvider>
 
     super(provider || w.getRpcProviderForChainId(w.defaultNetworkId));
 
+    this.internalSigner = new InternalEmbeddedEthersSignerextends(
+      provider || w.getRpcProviderForChainId(w.defaultNetworkId),
+      w
+    );
+
     this.wallet = w!;
-    // this.provider = provider;
+
+    /**
+     * Reinitialize signer with new provider when chain changes
+     */
+    w.events.on('dataUpdated', ({ name, newValue }) => {
+      if (name === 'defaultNetworkId') {
+        this.internalSigner = new InternalEmbeddedEthersSignerextends(
+          w.getRpcProviderForChainId(newValue),
+          this.wallet
+        );
+      }
+    });
+  }
+
+  override connect(): ethers.Signer {
+    return this.internalSigner;
+  }
+
+  override async getAddress(): Promise<string> {
+    const a = await this.wallet.getAccountAddress();
+    return a || '';
+  }
+
+  override async signTransaction(
+    tx: ethers.TransactionRequest,
+    mustConfirm = true
+  ): Promise<string> {
+    return this.internalSigner.signTransaction(tx, mustConfirm);
+  }
+
+  override async signMessage(message: string | Uint8Array, mustConfirm = true): Promise<string> {
+    return this.internalSigner.signMessage(message, mustConfirm);
+  }
+
+  override async sendTransaction(
+    tx: ethers.TransactionRequest
+  ): Promise<ethers.TransactionResponse> {
+    return this.internalSigner.sendTransaction(tx);
+  }
+
+  /**
+   * NOT implemented
+   */
+  override async signTypedData(
+    domain: ethers.TypedDataDomain,
+    types: Record<string, ethers.TypedDataField[]>,
+    value: Record<string, any>
+  ): Promise<string> {
+    console.error('EmbeddedEthersSigner#signTypedData Not implemented', { domain, types, value });
+    return '';
+  }
+
+  /**
+   * @deprecated v5 signer properties
+   */
+  _isSigner = true;
+  async getBalance(blockTag?: ethers.BlockTag) {
+    return this.internalSigner.getBalance(blockTag);
+  }
+  async getTransactionCount(blockTag?: ethers.BlockTag) {
+    return this.internalSigner.getTransactionCount(blockTag);
+  }
+  async getChainId() {
+    return this.internalSigner.getChainId();
+  }
+  async getGasPrice() {
+    return this.internalSigner.getGasPrice();
+  }
+  async getFeeData() {
+    return this.internalSigner.getFeeData();
+  }
+}
+
+class InternalEmbeddedEthersSignerextends extends ethers.AbstractSigner<ethers.JsonRpcProvider> {
+  // address = '';
+  // override provider: ethers.JsonRpcProvider;
+
+  constructor(
+    provider: ethers.JsonRpcProvider,
+    private wallet: EmbeddedWallet
+  ) {
+    super(provider);
   }
 
   override connect(): ethers.Signer {

packages/sdk/lib/index.ts

@@ -495,7 +495,7 @@ class EmbeddedWallet {
       funcDataTypes = 'tuple(bytes32 hashedUsername, bytes32 digest, bytes data)';
     }
 
-    const res = await this.gaslessTx({
+    const res = await this.processGaslessMethod({
       label: 'Add new account',
       strategy: params.strategy,
       authData: params.authData,
@@ -1028,6 +1028,35 @@ class EmbeddedWallet {
     // return receipt;
   }
 
+  /**
+   * Prepare tx and emit `txSubmitted` event (to show tx in tx history in UI e.g.)
+   */
+  submitTransaction(
+    txHash: string,
+    signedTxData?: ethers.BytesLike,
+    chainId?: number,
+    label = 'Transaction',
+    internalLabel?: string
+  ) {
+    const txItem = {
+      hash: txHash,
+      label,
+      rawData: signedTxData || '',
+      owner: this.lastAccount.wallets[this.lastAccount.walletIndex].address || 'none',
+      status: 'pending' as const,
+      chainId: chainId || this.defaultNetworkId,
+      explorerUrl: this.explorerUrls[chainId || this.defaultNetworkId]
+        ? `${this.explorerUrls[chainId || this.defaultNetworkId]}/tx/${txHash}`
+        : '',
+      createdAt: Date.now(),
+      internalLabel,
+    } as TransactionItem;
+
+    this.events.emit('txSubmitted', txItem);
+
+    return txItem;
+  }
+
   /**
    * Get signed tx for making a contract write call.
    */
@@ -1164,7 +1193,17 @@ class EmbeddedWallet {
     }
   }
 
-  async gaslessTx(params: {
+  /**
+   * Call an `Account Manager` contract method with a gasless transaction.
+   * This means that app owner (clientId) pays for the transaction fees instead of user.
+   * These methods must be supported by `generateGaslessTx` method on the contract.
+   * Supported methods are defined by `GaslessTxType`.
+   * About
+   * - get & confirm credentials
+   * - calculate and format tx data (according to `funcDataTypes` and `funcDataValuesFormatter` params)
+   * - broadcast the tx (marked with `label` from params)
+   */
+  async processGaslessMethod(params: {
     strategy: AuthStrategyName;
     authData: AuthData;
     data: any;

packages/sdk/lib/types.ts

@@ -14,9 +14,9 @@ export type Network = {
   id: number;
   rpcUrl: string;
   explorerUrl: string;
-  imageUrl?: string;
-  currencySymbol?: string;
-  currencDecimals?: number;
+  imageUrl?: string; // Icon of the chain for display in UI
+  currencySymbol?: string; // Symbol of the native currency (default is 'ETH')
+  currencyDecimals?: number; // Number of decimals of the native currency (default is 18)
 };
 
 export type SignatureCallback = (
@@ -52,14 +52,9 @@ export type AppParams = {
   networks?: Network[];
 
   /**
-   * Use a new window for creating and authenticating with a passkey
+   * Method for authenticating with passkey to make it global.
    */
   passkeyAuthMode?: AuthPasskeyMode;
-
-  /**
-   * Iframe uses same wallet code. Set this to prevent implosion.
-   */
-  noPasskeyIframe?: boolean;
 };
 
 export type AuthData = {

packages/ui/README.md

@@ -4,12 +4,9 @@ This package provides default UI for showing the state of connected account and
 
 Use `EmbeddedWalletUI()` to initialize SDK and the UI. The UI is done with React and HeadlessUI (tailwind).
 
-There are some UI specific options in addition to all SDK options.
+There are some UI specific options in addition to all the SDK options.
 
 ```ts
-// Supported networks info, for showing names and links to explorer.
-networks?: { name: string; id: number; rpcUrl: string; explorerUrl: string }[];
-
 /**
  * Automatically broadcast with SDK after confirming a transaction.
  *