code docs, small refactors

Author: sh3nk

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/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,
@@ -1031,7 +1031,7 @@ class EmbeddedWallet {
   /**
    * Prepare tx and emit `txSubmitted` event (to show tx in tx history in UI e.g.)
    */
-  submitTx(
+  submitTransaction(
     txHash: string,
     signedTxData?: ethers.BytesLike,
     chainId?: number,
@@ -1193,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 = (

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.
  *

packages/ui/src/contexts/tokens.context.tsx

@@ -98,7 +98,7 @@ function TokensProvider({ children }: { children: React.ReactNode }) {
       address: '',
       name: `${networksById?.[walletState.networkId]?.name} ETH`,
       symbol: networksById?.[walletState.networkId]?.currencySymbol || 'ETH',
-      decimals: networksById?.[walletState.networkId]?.currencDecimals || 18,
+      decimals: networksById?.[walletState.networkId]?.currencyDecimals || 18,
       balance: activeWallet?.balance || '',
     }),
     [activeWallet?.balance, walletState.networkId]

packages/ui/src/contexts/wallet.context.tsx

@@ -403,7 +403,7 @@ function WalletProvider({
 
   function formatNativeBalance(balance: string | bigint | number) {
     return (
-      ethers.formatUnits(balance, networksById?.[state.networkId]?.currencDecimals || 18) +
+      ethers.formatUnits(balance, networksById?.[state.networkId]?.currencyDecimals || 18) +
       ` ${networksById?.[state.networkId]?.currencySymbol || 'ETH'}`
     );
   }