@tomo-inc/embedded-wallet-providers 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# @tomo-inc/embedded-wallet-providers
+
+## 0.0.1

package/README.md

@@ -0,0 +1,122 @@
+# embedded-wallet-providers
+
+```
+pnpm add @tomo-inc/embedded-wallet-providers
+```
+
+## 1. embedded wallet
+
+### 1.1 init
+
+```typescript
+const config = {
+  tomoStage: "dev" as "dev" | "prod",
+  name: "******",
+  logo: "https://******",
+  tomoClientId: "******",
+  xClientId: "******",
+  googleClientId: "******",
+
+  walletBaseUrl: "https://******", //embeded-wallet link
+};
+
+embeddedWallet = EmbeddedWallet.getInstance();
+const { isAvailable, message, connectedInfo } =
+  await embeddedWallet.init(config);
+
+if ((isAvailable = false)) {
+  //odic auth
+  //wallet login
+}
+
+embeddedWallet.setWalletZIndex(999); //default
+```
+
+### 1.2 oidc auth
+
+```typescript
+const oidcToken = await embeddedWallet.loginByGoogle();
+const oidcToken = await embeddedWallet.loginByX();
+const oidcToken = await embeddedWallet.loginByEmail({ email });
+```
+
+### 1.3 wallet login
+
+same response as init
+
+```typescript
+const { isAvailable, connectedInfo } = await embeddedWallet.login(oidcToken);
+connectInfo = {
+  evmProvider: {
+    connected: true;
+    address: string[];
+  },
+  solanaProvider: {
+    connected: false;
+  }
+}
+```
+
+## 2. wallet brand info
+
+```typescript
+embeddedWallet.info = {
+  uuid: string;
+  name: string;
+  icon: string;
+  rdns: string;
+  iconBackground?: string;
+  links?: {
+    homepage: string;
+  };
+};
+```
+
+## 3. wallet api
+
+```typescript
+embeddedWallet.open("setting"); //mfa config
+embeddedWallet.open("mnemonicExport");
+embeddedWallet.logout();
+```
+
+## 4. providers
+
+> isAvailable = true
+
+### 4.1 evm
+
+```typescript
+const evmProvider = embeddedWallet.evmProvider;
+
+connect;
+disconnect;
+getChainId;
+switchChain;
+signMessage(siweSign);
+signTypedData;
+eth_signTransaction;
+sendTransaction;
+```
+
+api doc: https://qsg07xytt12z.sg.larksuite.com/wiki/XLq9wrNRLiAXANkCj4QlERCxg7f
+
+### 4.2 solana(todo)
+
+```typescript
+const solanaProvider = embeddedWallet.solanaProvider;
+```
+
+api doc: https://qsg07xytt12z.sg.larksuite.com/wiki/LyVnwBkzaibRDEkUfXclabRmg6g
+
+### 4.3 dogecoin(todo)
+
+```typescript
+const dogecoinProvider = embeddedWallet.dogecoinProvider;
+```
+
+api doc: https://qsg07xytt12z.sg.larksuite.com/wiki/FKuOwiSN7iNHHNkA4zjl4S5JgLb
+
+## 5. demo
+
+https://github.com/tomo-inc/tomo-wallet/tree/tomo-sdk-design/examples/wallet-sdk-demo/src/embedded-wallet-providers

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@tomo-inc/embedded-wallet-providers",
+  "version": "0.0.2",
+  "author": "tomo.inc",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "dependencies": {
+    "@tomo-inc/oidc-auth": "0.0.2",
+    "@tomo-inc/wallet-utils": "0.0.2",
+    "@tomo-inc/inject-providers": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/supertest": "^2.0.12",
+    "supertest": "^6.3.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.0.0",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.44.1",
+    "vitest": "^3.2.4"
+  }
+}

package/project.json

@@ -0,0 +1,60 @@
+{
+  "name": "embedded-wallet-providers",
+  "sourceRoot": "packages/embedded-wallet-providers/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{projectRoot}/dist"],
+      "dependsOn": ["^build", "inject-providers:build"],
+      "options": {
+        "command": "tsup src/index.ts --format esm,cjs --dts --treeshake",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    },
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "tsup src/index.ts --format esm,cjs --watch --dts",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    },
+    "lint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "eslint src/**/*.ts",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    },
+    "lint:fix": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "eslint src/**/*.ts --fix",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    },
+    "format": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "prettier --write \"src/**/*.{ts,tsx}\"",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "outputs": ["{projectRoot}/coverage"],
+      "options": {
+        "command": "vitest run",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    },
+    "test:watch": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "vitest",
+        "cwd": "packages/embedded-wallet-providers"
+      }
+    }
+  },
+  "tags": ["npm:private", "scope:embedded-wallet-providers", "type:library"]
+}

package/src/embedded-wallet.ts

@@ -0,0 +1,246 @@
+import { BtcProvider, DogecoinProvider, EvmProvider, SolanaProvider, TronProvider } from "@tomo-inc/inject-providers";
+import { onResponse, sendRequest } from "./hub";
+
+import { OidcAuth } from "@tomo-inc/oidc-auth";
+import { InitConfig, WalletInfo, WalletOpenMethod, WalletRequestMethod } from "./types";
+
+export class EmbeddedWallet {
+  public isAvailable: boolean = false;
+  public config: InitConfig | null = null;
+  public info: WalletInfo | null = null;
+  public btcProvider: BtcProvider | null = null;
+  public dogecoinProvider: DogecoinProvider | null = null;
+  public evmProvider: EvmProvider | null = null;
+  public solanaProvider: SolanaProvider | null = null;
+  public tronProvider: TronProvider | null = null;
+
+  public walletIframe: HTMLIFrameElement | null = null;
+  public walletOrigin: string = "";
+  public maskZIndex: number = 999;
+  private static instance: EmbeddedWallet;
+  public loginByGoogle: (() => Promise<string>) | null = null;
+  public loginByX: (() => Promise<string>) | null = null;
+  public constructor() {}
+
+  public static getInstance() {
+    if (!EmbeddedWallet.instance) {
+      EmbeddedWallet.instance = new EmbeddedWallet();
+    }
+    return EmbeddedWallet.instance;
+  }
+
+  public async init(config: InitConfig) {
+    this.config = config;
+
+    if (!config.tomoClientId) {
+      throw new Error("tomoClientId is required.");
+    }
+    if (!config.walletBaseUrl) {
+      throw new Error("walletBaseUrl is required.");
+    }
+
+    const { origin: walletOrigin, hostname, port } = new URL(config.walletBaseUrl);
+    this.walletOrigin = walletOrigin;
+    const hostArr = hostname.split(".");
+    if (port) {
+      hostArr.push(port);
+    }
+    hostArr.reverse();
+    const rdns = hostArr.join(".");
+
+    this.info = {
+      uuid: hostArr.join("-"),
+      name: config.name,
+      icon: config.logo,
+      rdns,
+      links: {
+        homepage: config.walletBaseUrl,
+      },
+    };
+
+    const productInfo = {
+      name: config.name,
+      rdns,
+      icon: config.logo,
+    };
+
+    this.btcProvider = new BtcProvider(productInfo, { sendRequest, onResponse });
+    this.dogecoinProvider = new DogecoinProvider(productInfo, { sendRequest, onResponse });
+    this.evmProvider = new EvmProvider(productInfo, { sendRequest, onResponse });
+    this.solanaProvider = new SolanaProvider(productInfo, { sendRequest, onResponse });
+    this.tronProvider = new TronProvider(productInfo, { sendRequest, onResponse });
+
+    const { loginByGoogle, loginByX } = OidcAuth(config);
+
+    this.loginByGoogle = loginByGoogle;
+    this.loginByX = loginByX;
+
+    const { isAvailable, message, connectedInfo } = await this.login();
+    this.isAvailable = isAvailable;
+
+    const { connected, address = [] } = connectedInfo?.evmProvider || {};
+    if (connected && address.length > 0) {
+      this.evmProvider?.setConnectedStatus({ connected, address });
+    }
+    return { isAvailable, message, connectedInfo };
+  }
+
+  public setWalletZIndex(zIndex: number) {
+    this.maskZIndex = zIndex;
+  }
+
+  /**
+   * loginByCubistV2, create wallet with oidcToken
+   */
+  public async login(oidcToken?: string): Promise<{ connectedInfo: any; message?: string; isAvailable: boolean }> {
+    const config = this.config;
+    if (!config) {
+      throw new Error("config is not initialized");
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        const { walletBaseUrl, tomoClientId, tomoStage, logo, name } = config || {};
+        if (!walletBaseUrl || !tomoClientId) {
+          throw new Error("walletBaseUrl + tomoClientId is required");
+        }
+
+        const EMBEDDED_WALLET_ID = tomoClientId;
+
+        let walletIframe = document.getElementById(EMBEDDED_WALLET_ID) as HTMLIFrameElement | null;
+        if (!walletIframe) {
+          walletIframe = document.createElement("iframe");
+          walletIframe.style.cssText = ` width: 0; height: 0;`;
+          walletIframe.id = EMBEDDED_WALLET_ID;
+          document.body.appendChild(walletIframe);
+        }
+
+        const dappOrigin = window.location.origin;
+        walletIframe.src = `${walletBaseUrl}#dappOrigin=${dappOrigin}&tomoStage=${tomoStage}&tomoClientId=${tomoClientId}&oidcToken=${oidcToken || ""}&logo=${logo || ""}&name=${name || ""}`;
+        walletIframe.allow = "publickey-credentials-get; publickey-credentials-create";
+        this.walletIframe = walletIframe;
+      } catch (error) {
+        console.error("login error", error);
+        reject(error);
+      }
+
+      const receiveResponse = ({ origin, data }: { origin: string; data: any }) => {
+        if (data?.type === "wallet-ready" && origin === this.walletOrigin) {
+          this.isAvailable = data?.data?.isAvailable || false;
+          resolve(data?.data);
+          window.removeEventListener("message", receiveResponse);
+        }
+        if (data?.type === "wallet-close" && origin === this.walletOrigin) {
+          this.close();
+        }
+      };
+      window.addEventListener("message", receiveResponse);
+      // add wallet-close listener
+      window.addEventListener("message", this.walletCloseHandler);
+    });
+  }
+
+  private walletCloseHandler = ({ origin, data }: { origin: string; data: any }) => {
+    if (data?.type === "wallet-close" && origin === this.walletOrigin) {
+      this.close();
+    }
+  };
+
+  public popup() {
+    if (!this.walletIframe) {
+      return;
+    }
+    const baseCssText = "position: fixed; top:0; left:0; border: none; width: 100%; height: 100%;";
+    const maskZIndex = this.maskZIndex;
+    this.walletIframe.style.cssText = `${baseCssText} z-index: ${maskZIndex};`;
+  }
+
+  public close() {
+    if (!this.walletIframe) {
+      return;
+    }
+    this.walletIframe.style.width = "0";
+    this.walletIframe.style.height = "0";
+  }
+
+  /**
+   * call relay for cubist logout, retrieve sessionInfo
+   */
+  public async logout(): Promise<boolean> {
+    // const { tomoClientId = "" } = this.config || {};
+    // if (tomoClientId) {
+    //   const walletIframe = document.getElementById(tomoClientId) as HTMLIFrameElement | null;
+    //   if (walletIframe) {
+    //     walletIframe.parentElement?.removeChild(walletIframe);
+    //   }
+    // }
+    if (this.walletIframe) {
+      this.walletIframe.src = `${this.walletOrigin}#logout=true`;
+    }
+    window.removeEventListener("message", this.walletCloseHandler);
+    this.request("logout");
+    return true;
+  }
+  /**
+   * open email login page
+   * */
+  public async loginByEmail({ email }: { email?: string }): Promise<string> {
+    this.popup();
+
+    return new Promise((resolve, reject) => {
+      const emailLoginCloseHandler = (event: MessageEvent) => {
+        if (event.data?.type === "wallet-close" && event.origin === this.walletOrigin) {
+          window.removeEventListener("message", emailLoginCloseHandler);
+          this.close();
+          resolve("");
+        }
+      };
+
+      window.addEventListener("message", emailLoginCloseHandler);
+
+      this.request("emailLogin", { email })
+        .then(({ oidcToken = "" }) => {
+          resolve(oidcToken);
+        })
+        .catch((error) => {
+          reject(error);
+        })
+        .finally(() => {
+          window.removeEventListener("message", emailLoginCloseHandler);
+          this.close();
+        });
+    });
+  }
+
+  /**
+   * wallet feature apis
+   * wallet action without user approve
+   */
+  public async request(method: WalletRequestMethod, params?: any): Promise<any> {
+    const data = {
+      type: "wallet-request",
+      data: { method, params },
+    };
+    (this.walletIframe as any).contentWindow?.postMessage(data, this.walletOrigin);
+    return new Promise((resolve, reject) => {
+      const receiveResponse = ({ origin, data }: { origin: string; data: any }) => {
+        if (data?.type === "wallet-response" && origin === this.walletOrigin) {
+          resolve(data?.data);
+        }
+      };
+      window.addEventListener("message", receiveResponse);
+    });
+  }
+
+  /**
+   * wallet features page
+   */
+  public async open(method: WalletOpenMethod, params?: any): Promise<any> {
+    const data = {
+      type: "wallet-request",
+      data: { method, params },
+    };
+    (this.walletIframe as any).contentWindow?.postMessage(data, this.walletOrigin);
+    this.popup();
+  }
+}

package/src/hub.ts

@@ -0,0 +1,71 @@
+import { EmbeddedWallet } from "embedded-wallet";
+import { dappPopups } from "./relay-route";
+
+export const notPorivderAPIs = {
+  keepAlive: true,
+  wallet_getProviderState: true,
+  wallet_sendDomainMetadata: true,
+};
+
+//("0: dapp -> provider -> wallet");
+export const sendRequest = async (
+  chainType: string,
+  { method, params, dappInfo }: { method: string; params?: any; dappInfo?: any },
+) => {
+  if (!chainType || !method) {
+    throw new Error("chainType or method is not allowed to be empty");
+  }
+
+  if (notPorivderAPIs[method as keyof typeof notPorivderAPIs]) {
+    return;
+  }
+
+  const embeddedWallet = EmbeddedWallet.getInstance();
+  const walletOrigin = embeddedWallet.walletOrigin;
+  const walletIframe = embeddedWallet?.walletIframe;
+
+  if (!walletOrigin || !walletIframe) {
+    console.error("walletOrigin is not set", { chainType, method, params, dappInfo });
+    return;
+  }
+
+  const popupRoutes = dappPopups[chainType as keyof typeof dappPopups];
+  //dapp connect status
+  const isNeedApprove = popupRoutes?.[method as keyof (typeof dappPopups)[keyof typeof dappPopups]];
+  if (isNeedApprove) {
+    embeddedWallet.popup();
+  }
+
+  const data = {
+    chainType,
+    type: "dapp-request",
+    data: { method, params, dappInfo },
+  };
+  (walletIframe as any).contentWindow?.postMessage(data, walletOrigin);
+  console.log("sendRequest", data, walletOrigin);
+};
+
+//wallet -> provider -> dapp
+export const onResponse = async (requestParams: { method: string }) => {
+  return new Promise((resolve, reject) => {
+    const receiveResponse = ({ origin, data }: { origin: string; data: any }) => {
+      if (data?.type !== "dapp-response") {
+        return;
+      }
+
+      const embeddedWallet = EmbeddedWallet.getInstance();
+      if (origin === embeddedWallet.walletOrigin && requestParams.method === data?.method) {
+        window.removeEventListener("message", receiveResponse);
+
+        console.log("onResponse", data);
+        if (data?.success) {
+          resolve(data);
+        } else {
+          reject(data.data);
+        }
+        embeddedWallet.close();
+      }
+    };
+    window.addEventListener("message", receiveResponse);
+  });
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+import type { InitConfig } from "./types";
+
+export type { InitConfig };
+export { type EmailLoginResult } from "@tomo-inc/oidc-auth";
+
+export { EmbeddedWallet } from "./embedded-wallet";

package/src/relay-route.ts

@@ -0,0 +1,104 @@
+import { ChainTypes } from "@tomo-inc/wallet-utils";
+
+/*
+popups = {
+  method: "/dapp-${chianType}/${fileName}"
+}
+*/
+const evmDappPopups = {
+  connect: "/dapp/connect",
+  eth_requestAccounts: "/dapp/connect",
+  wallet_addEthereumChain: "/dapp-evm/network-add",
+  wallet_watchAsset: "/dapp-evm/token-add",
+  personal_sign: "/dapp-evm/message-sign",
+  eth_encrypt: "/dapp-evm/message-sign",
+  eth_decrypt: "/dapp-evm/message-unsign",
+  eth_signTypedData_v4: "/dapp-evm/message-sign",
+  eth_signTransaction: "/dapp-evm/tx-sign",
+  eth_sendTransaction: "/dapp-evm/tx-send",
+};
+
+const dogeDappPopups = {
+  connect: "/dapp/connect",
+  requestAccounts: "/dapp/connect",
+  getPublicKey: "/dapp-doge/publickey",
+
+  switchNetwork: "/dapp-doge/network-switch",
+  signMessage: "/dapp-doge/message-sign",
+  requestSignedMessage: "/dapp-doge/message-sign",
+  requestDecryptedMessage: "/dapp-doge/message-unsign",
+  signPsbt: "/dapp-doge/psbt-sign",
+  requestPsbt: "/dapp-doge/psbt-sign",
+  signPsbts: "/dapp-doge/psbts-sign",
+  requestPsbts: "/dapp-doge/psbts-sign",
+  requestTransaction: "/dapp-doge/tx-send",
+  requestAvailableDRC20Transaction: "/dapp-doge/drc20-inscribe",
+  requestInscriptionTransaction: "/dapp-doge/drc20-tx",
+  requestDunesTransaction: "/dapp-doge/dunes-tx",
+};
+
+const solanaDappPopups = {
+  connect: "/dapp/connect",
+  requestAccounts: "/dapp/connect",
+  getPublicKey: "/dapp-solana/publickey",
+
+  signMessage: "/dapp-solana/message-sign",
+  signIn: "/dapp-solana/message-sign",
+
+  signTransaction: "/dapp-solana/tx-send",
+  signAllTransactions: "/dapp-solana/tx-send",
+
+  signAndSendTransaction: "/dapp-solana/tx-send",
+  signAndSendAllTransactions: "/dapp-solana/tx-send",
+
+  sendSolana: "/dapp-solana/tx-send",
+  sendToken: "/dapp-solana/tx-send",
+};
+
+const tronDappPopups = {
+  connect: "/dapp/connect",
+  tron_requestAccounts: "/dapp/connect",
+  signMessage: "/dapp-tron/message-sign",
+  wallet_watchAsset: "/dapp-tron/token-add",
+  signTransaction: "/dapp-tron/tx-send",
+  sendRawTransaction: "/dapp-tron/tx-send",
+  sendTransaction: "/dapp-tron/tx-send",
+  sendToken: "/dapp-tron/tx-send",
+};
+
+const btcDappPopups = {
+  connect: "/dapp/connect",
+  getPublicKey: "/dapp/connect",
+  requestAccounts: "/dapp/connect",
+  getBalance: "/dapp/connect",
+
+  switchNetwork: "/dapp-btc/network-switch",
+  switchChain: "/dapp-btc/network-switch",
+
+  signMessage: "/dapp-btc/message-sign",
+  requestDecryptedMessage: "/dapp-btc/message-unsign",
+
+  pushPsbt: "/dapp-btc/psbt-sign",
+  signPsbt: "/dapp-btc/psbt-sign",
+  signPsbts: "/dapp-btc/psbts-sign",
+  sendBitcoin: "/dapp-btc/tx-send",
+};
+
+const shopDappPopups = {
+  connect: "/dapp-shop/dialog",
+  welcomeDialog: "/dapp-shop/dialog",
+  addToCartDialog: "/dapp-shop/dialog",
+  rewardEstimatedDialog: "/dapp-shop/dialog",
+  rewardClaimedDialog: "/dapp-shop/dialog",
+};
+
+const dappPopups = {
+  [ChainTypes.EVM]: evmDappPopups,
+  [ChainTypes.DOGE]: dogeDappPopups,
+  [ChainTypes.SOL]: solanaDappPopups,
+  [ChainTypes.TRON]: tronDappPopups,
+  [ChainTypes.BTC]: btcDappPopups,
+  shop: shopDappPopups,
+};
+
+export { dappPopups, evmDappPopups, dogeDappPopups, solanaDappPopups, tronDappPopups, shopDappPopups, btcDappPopups };

package/src/types.ts

@@ -0,0 +1,25 @@
+export interface InitConfig {
+  xClientId: string;
+  googleClientId: string;
+  name: string;
+  logo: string;
+  tomoStage: "dev" | "prod";
+  tomoClientId: string;
+  walletBaseUrl: string;
+  relayBaseUrl?: string;
+}
+
+export interface WalletInfo {
+  uuid: string;
+  name: string;
+  icon: string;
+  rdns: string;
+  iconBackground?: string;
+  links?: {
+    homepage: string;
+  };
+}
+
+export type WalletRequestMethod = "logout" | "token" | "market" | "assets" | "transactions" | "wallet" | "emailLogin";
+
+export type WalletOpenMethod = "wallet" | "swap" | "onRamp" | "funding" | "mfaVerify" | "mnemonic" | "setting";

package/src/utils.ts

@@ -0,0 +1,35 @@
+export const isMobile = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
+
+interface OpenWindow {
+  url: string;
+  name?: string;
+  width?: number;
+  height?: number;
+}
+
+export const openWindow = ({ url, name, width, height }: OpenWindow): Window | null => {
+  const top = (window.innerHeight - (height || 400)) / 2 + window.screenY;
+  const left = (window.innerWidth - (width || 400)) / 2 + window.screenX;
+
+  try {
+    const relyWindow = window.open(
+      url,
+      name,
+      `dialog=yes,top=${top}px,left=${left},width=${width !== undefined ? width : 400}px,height=${height !== undefined ? height : 600}px`,
+    );
+
+    // Fallback to iframe modal if:
+    // 1. window.open is blocked by browser
+    // 2. iOS Safari requires user interaction for window.open
+    if (!relyWindow) {
+      return null;
+    }
+
+    return relyWindow;
+  } catch (error) {
+    console.error("Failed to open window:", error);
+    return null;
+  }
+};

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./src"
+  },
+  "include": ["src"]
+}