eth wallet integration (#279)

* feat(packages): eth wallet integration

---------

Co-authored-by: Govard Barkhatov <[email protected]>

Author: jeremy-babylonlabs

package-lock.json

@@ -55,14 +55,18 @@
     "@ledgerhq/hw-transport": "6.31.10",
     "@ledgerhq/hw-transport-webhid": "6.30.6",
     "@ledgerhq/hw-transport-webusb": "6.29.10",
+    "@reown/appkit": "1.8.6",
+    "@reown/appkit-adapter-wagmi": "1.8.6",
     "@tomo-inc/ledger-bitcoin-babylon": "0.3.5-alpha.0",
     "@tomo-inc/wallet-connect-sdk": "0.3.24",
     "bip174": "2.1.1",
     "bitcoinjs-lib": "6.1.5",
     "buffer": "6.0.3",
     "nanoevents": "9.1.0",
     "usehooks-ts": "3.0.2",
-    "uuid": "11.1.0"
+    "uuid": "11.1.0",
+    "viem": "2.37.7",
+    "wagmi": "2.17.0"
   },
   "files": [
     "dist"

packages/babylon-wallet-connector/package.json

@@ -40,4 +40,18 @@ export const config: ChainConfigArr = [
       chainData: bbnTestnet,
     },
   },
+  {
+    chain: "ETH",
+    config: {
+      chainId: 31337, // Anvil local node
+      chainName: "Anvil Local",
+      rpcUrl: "http://127.0.0.1:8545",
+      explorerUrl: "http://localhost:8545",
+      nativeCurrency: {
+        name: "Ether",
+        symbol: "ETH",
+        decimals: 18,
+      },
+    },
+  },
 ];

packages/babylon-wallet-connector/src/components/WalletProvider/constants.tsx

@@ -19,7 +19,7 @@ interface WalletProviderProps {
   config: Readonly<ChainConfigArr>;
   onError?: (e: Error) => void;
   disabledWallets?: string[];
-  requiredChains?: ("BTC" | "BBN")[];
+  requiredChains?: ("BTC" | "BBN" | "ETH")[];
 }
 
 export function WalletProvider({

packages/babylon-wallet-connector/src/components/WalletProvider/index.tsx

@@ -5,10 +5,12 @@ import { WalletConnector } from "@/core/WalletConnector";
 import type {
   BBNConfig,
   BTCConfig,
+  ETHConfig,
   ExternalConnector,
   HashMap,
   IBBNProvider,
   IBTCProvider,
+  IETHProvider,
   IProvider,
 } from "@/core/types";
 import metadata from "@/core/wallets";
@@ -27,6 +29,7 @@ interface ChainConfig<K extends string = string, P extends IProvider = IProvider
 export type ChainConfigArr = (
   | ChainConfig<"BTC", IBTCProvider, BTCConfig>
   | ChainConfig<"BBN", IBBNProvider, BBNConfig>
+  | ChainConfig<"ETH", IETHProvider, ETHConfig>
 )[];
 
 interface ProviderProps {
@@ -36,17 +39,19 @@ interface ProviderProps {
   config: Readonly<ChainConfigArr>;
   onError?: (e: Error) => void;
   disabledWallets?: string[];
-  requiredChains?: ("BTC" | "BBN")[];
+  requiredChains?: ("BTC" | "BBN" | "ETH")[];
 }
 
 export interface Connectors {
   BTC: WalletConnector<"BTC", IBTCProvider, BTCConfig> | null;
   BBN: WalletConnector<"BBN", IBBNProvider, BBNConfig> | null;
+  ETH: WalletConnector<"ETH", IETHProvider, ETHConfig> | null;
 }
 
 const defaultState: Connectors = {
   BTC: null,
   BBN: null,
+  ETH: null,
 };
 
 export const Context = createContext<Connectors>(defaultState);
@@ -93,7 +98,7 @@ export function ChainProvider({
   const visibleChains = useMemo(
     () =>
       requiredChains && requiredChains.length
-        ? supportedChains.filter((chain) => requiredChains.includes(chain!.id as "BTC" | "BBN"))
+        ? supportedChains.filter((chain) => requiredChains.includes(chain!.id as "BTC" | "BBN" | "ETH"))
         : supportedChains,
     [supportedChains, requiredChains],
   );

packages/babylon-wallet-connector/src/context/Chain.context.tsx

@@ -2,7 +2,7 @@ import { TomoContextProvider } from "@tomo-inc/wallet-connect-sdk";
 import "@tomo-inc/wallet-connect-sdk/style.css";
 import { useMemo, type PropsWithChildren } from "react";
 
-import { BBNConfig, BTCConfig } from "@/core/types";
+import { BBNConfig, BTCConfig, ETHConfig } from "@/core/types";
 
 import { ChainConfigArr } from "./Chain.context";
 
@@ -32,6 +32,15 @@ const CONFIG_ADAPTERS = {
     },
     logo: config.chainData.chainSymbolImageUrl,
   }),
+  ETH: (config: ETHConfig) => ({
+    id: 3,
+    name: config.chainName,
+    type: "ethereum",
+    chainId: config.chainId,
+    rpcUrl: config.rpcUrl,
+    explorerUrl: config.explorerUrl,
+    nativeCurrency: config.nativeCurrency,
+  }),
 };
 
 export const TomoConnectionProvider = ({ children, theme, config }: PropsWithChildren<TomoProviderProps>) => {

packages/babylon-wallet-connector/src/context/TomoProvider.tsx

@@ -62,6 +62,134 @@ export type BBNConfig = {
   coinSymbol: string;
 };
 
+export interface ETHConfig {
+  chainId: number;
+  chainName: string;
+  rpcUrl: string;
+  explorerUrl: string;
+  nativeCurrency: {
+    name: string;
+    symbol: string;
+    decimals: number;
+  };
+}
+
+// Ethereum specific types
+export interface ETHTransactionRequest {
+  to: string;
+  value?: string;
+  data?: string;
+  gasLimit?: bigint;
+  maxFeePerGas?: bigint;
+  maxPriorityFeePerGas?: bigint;
+  nonce?: number;
+}
+
+export interface ETHTypedData {
+  domain: {
+    name?: string;
+    version?: string;
+    chainId?: number;
+    verifyingContract?: string;
+    salt?: string;
+  };
+  types: Record<string, Array<{ name: string; type: string }>>;
+  primaryType: string;
+  message: Record<string, any>;
+}
+
+export interface NetworkInfo {
+  name: string;
+  chainId: string;
+}
+
+export interface IETHProvider extends IProvider {
+  /**
+   * Signs a human-readable message using personal_sign
+   * @param message - The message to sign
+   * @returns A promise that resolves to the signature
+   */
+  signMessage(message: string): Promise<string>;
+
+  /**
+   * Signs structured data using eth_signTypedData_v4 (EIP-712)
+   * @param typedData - The structured data to sign
+   * @returns A promise that resolves to the signature
+   */
+  signTypedData(typedData: ETHTypedData): Promise<string>;
+
+  /**
+   * Sends a transaction to the blockchain
+   * @param tx - The transaction request
+   * @returns A promise that resolves to the transaction hash
+   */
+  sendTransaction(tx: ETHTransactionRequest): Promise<string>;
+
+  /**
+   * Estimates gas for a transaction
+   * @param tx - The transaction request
+   * @returns A promise that resolves to the estimated gas
+   */
+  estimateGas(tx: ETHTransactionRequest): Promise<bigint>;
+
+  /**
+   * Gets the current chain ID
+   * @returns A promise that resolves to the chain ID
+   */
+  getChainId(): Promise<number>;
+
+  /**
+   * Switches to a different chain
+   * @param chainId - The chain ID to switch to
+   * @returns A promise that resolves when the switch is complete
+   */
+  switchChain(chainId: number): Promise<void>;
+
+  /**
+   * Gets the account balance
+   * @returns A promise that resolves to the balance in wei
+   */
+  getBalance(): Promise<bigint>;
+
+  /**
+   * Gets the account nonce
+   * @returns A promise that resolves to the nonce
+   */
+  getNonce(): Promise<number>;
+
+  /**
+   * Gets network information
+   * @returns A promise that resolves to network info
+   */
+  getNetworkInfo(): Promise<NetworkInfo>;
+
+  /**
+   * Gets the wallet provider name
+   * @returns The name of the wallet provider
+   */
+  getWalletProviderName(): string;
+
+  /**
+   * Gets the wallet provider icon
+   * @returns The icon of the wallet provider
+   */
+  getWalletProviderIcon(): string;
+
+  /**
+   * Registers an event listener for the specified event
+   * @param eventName - The name of the event to listen for
+   * @param handler - The callback function to be executed when the event occurs
+   */
+  on(eventName: string, handler: Function): void;
+
+  /**
+   * Unregisters an event listener for the specified event
+   * @param eventName - The name of the event to listen for
+   * @param handler - The callback function to be executed when the event occurs
+   */
+  off(eventName: string, handler: Function): void;
+}
+
 export interface IProvider {
   connectWallet: () => Promise<void>;
   getAddress: () => Promise<string>;

packages/babylon-wallet-connector/src/core/types.ts

@@ -2,8 +2,8 @@ import Transport from "@ledgerhq/hw-transport";
 import TransportWebHID from "@ledgerhq/hw-transport-webhid";
 import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
 import { Transaction } from "@scure/btc-signer";
-import { Buffer } from "buffer";
 import AppClient, { DefaultWalletPolicy, signMessage, signPsbt } from "@tomo-inc/ledger-bitcoin-babylon";
+import { Buffer } from "buffer";
 
 import type { BTCConfig, InscriptionIdentifier, SignPsbtOptions } from "@/core/types";
 import { IBTCProvider, Network } from "@/core/types";

packages/babylon-wallet-connector/src/core/wallets/btc/ledger/provider.ts

@@ -0,0 +1,21 @@
+import { createConfig, http } from "wagmi";
+import { mainnet, sepolia, localhost } from "wagmi/chains";
+
+/**
+ * Fallback wagmi configuration
+ * 
+ * This config is used when no shared wagmi config is provided by the application.
+ * It supports:
+ * - Ethereum Mainnet (chainId: 1)
+ * - Sepolia Testnet (chainId: 11155111)
+ * - Localhost/Anvil (chainId: 31337)
+ */
+export const wagmiConfig = createConfig({
+  chains: [mainnet, sepolia, localhost],
+  transports: {
+    [mainnet.id]: http(),
+    [sepolia.id]: http(),
+    [localhost.id]: http("http://127.0.0.1:8545"), // Default Anvil RPC URL
+  },
+});
+

packages/babylon-wallet-connector/src/core/wallets/eth/appkit/config.ts

@@ -0,0 +1,30 @@
+import type { ETHConfig, IETHProvider, WalletMetadata } from "@/core/types";
+import { Network } from "@/core/types";
+import { AppKitProvider } from "./provider";
+
+const WALLET_PROVIDER_NAME = "AppKit";
+
+/**
+ * AppKit wallet metadata for ETH chain
+ *
+ * Provides connection to 600+ Ethereum wallets through Reown's AppKit:
+ * - MetaMask, Rainbow, WalletConnect, Coinbase Wallet, Trust Wallet, etc.
+ * - Browser extension wallets (EIP-6963)
+ * - Mobile wallets via WalletConnect
+ * - Hardware wallets (Ledger, Trezor)
+ */
+const metadata: WalletMetadata<IETHProvider, ETHConfig> = {
+  id: "appkit-eth-connector",
+  name: WALLET_PROVIDER_NAME,
+  icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzYyN0VFQSIvPgogIDxwYXRoIGQ9Ik0xNiA0TDcuNSAxNi4yNUwxNiAyMkwyNC41IDE2LjI1TDE2IDR6IiBmaWxsPSJ3aGl0ZSIvPgogIDxwYXRoIGQ9Ik0xNiAyMi43NUw3LjUgMTdMMTYgMjhMMjQuNSAxN0wxNiAyMi43NXoiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuNiIvPgo8L3N2Zz4=",
+  docs: "https://docs.reown.com/appkit/overview",
+  wallet: "ethereum", // Global identifier for Ethereum providers
+  createProvider: (_wallet: any, config: ETHConfig) => new AppKitProvider(config),
+  networks: [
+    Network.MAINNET, // ETH mainnet (chainId: 1)
+    Network.TESTNET, // ETH testnet (chainId: 11155111 - Sepolia)
+  ],
+  label: "Connect ETH Wallet",
+};
+
+export default metadata;