feature: Tomo dual wallet (#225)

* feat: tomo dual wallet

.eslintignore

@@ -0,0 +1,4 @@
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

docs/WalletIntegration.md

@@ -74,7 +74,7 @@ export const DEFAULT_INSCRIPTION_LIMIT = 100;
  * Provides methods for connecting to a wallet, retrieving wallet information, signing transactions, and more.
  */
 
-export abstract class WalletProvider {
+export abstract class BTCWalletProvider {
   /**
    * Connects to the wallet and returns the instance of the wallet provider.
    * Currently only supports "native segwit" and "taproot" address types.
@@ -189,7 +189,7 @@ instance of it under the `window.btcwallet` global object when the Babylon dApp
 is loaded.
 
 ```ts
-class MobileAppWallet extends WalletProvider {
+class MobileAppWallet extends BTCWalletProvider {
     ...
     Interface Methods definitions
     ...
@@ -211,7 +211,7 @@ are implemented using external calls to the mempool.space API as they are not
 provided out of the box from the wallet exposed methods.
 
 ```ts
-import { WalletProvider, Network, Fees, UTXO } from "../wallet_provider";
+import { BTCWalletProvider, Network, Fees, UTXO } from "../btc_wallet_provider";
 import {
   getAddressBalance,
   getTipHeight,
@@ -225,7 +225,7 @@ type OKXWalletInfo = {
   address: string;
 };
 
-export class OKXWallet extends WalletProvider {
+export class OKXWallet extends BTCWalletProvider {
   private okxWalletInfo: OKXWalletInfo | undefined;
 
   constructor() {
@@ -392,7 +392,7 @@ export class OKXWallet extends WalletProvider {
 As a reference, we provide the mempool.space retrieval methods that we used below:
 
 ```ts
-import { Fees, UTXO } from "./wallet/wallet_provider";
+import { Fees, UTXO } from "./wallet/btc_wallet_provider";
 
 /*
     URL Construction methods

package.json

@@ -25,6 +25,7 @@
     "node": "22.3.0"
   },
   "dependencies": {
+    "@babylonlabs-io/btc-staking-ts": "0.3.0",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",
     "@keystonehq/animated-qr": "^0.8.6",
@@ -33,10 +34,10 @@
     "@scure/bip32": "^1.4.0",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
+    "@tomo-inc/wallet-connect-sdk": "0.2.4",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.7.4",
     "bitcoinjs-lib": "6.1.5",
-    "@babylonlabs-io/btc-staking-ts": "0.3.0",
     "date-fns": "^3.6.0",
     "decimal.js-light": "^2.5.1",
     "framer-motion": "^11.1.9",

src/app/api/postFilterOrdinals.ts

@@ -1,5 +1,5 @@
 import { chunkArray } from "@/utils/chunkArray";
-import { UTXO } from "@/utils/wallet/wallet_provider";
+import { UTXO } from "@/utils/wallet/btc_wallet_provider";
 
 import { apiWrapper } from "./apiWrapper";
 

src/app/components/Delegations/Delegations.tsx

@@ -3,14 +3,10 @@ import { useEffect, useMemo, useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useLocalStorage } from "usehooks-ts";
 
-import {
-  signPsbtTransaction,
-  SignPsbtTransaction,
-} from "@/app/common/utils/psbt";
 import { LoadingTableList } from "@/app/components/Loading/Loading";
 import { DelegationsPointsProvider } from "@/app/context/api/DelegationsPointsProvider";
 import { useError } from "@/app/context/Error/ErrorContext";
-import { useWallet } from "@/app/context/wallet/WalletProvider";
+import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import { useDelegations } from "@/app/hooks/api/useDelegations";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { useAppState } from "@/app/state";
@@ -26,7 +22,6 @@ import { signUnbondingTx } from "@/utils/delegations/signUnbondingTx";
 import { signWithdrawalTx } from "@/utils/delegations/signWithdrawalTx";
 import { getIntermediateDelegationsLocalStorageKey } from "@/utils/local_storage/getIntermediateDelegationsLocalStorageKey";
 import { toLocalStorageIntermediateDelegation } from "@/utils/local_storage/toLocalStorageIntermediateDelegation";
-import { WalletProvider } from "@/utils/wallet/wallet_provider";
 
 import {
   MODE,
@@ -40,15 +35,9 @@ import { Delegation } from "./Delegation";
 export const Delegations = () => {
   const { currentVersion } = useAppState();
   const { data: delegationsAPI } = useDelegations();
-  const {
-    walletProvider: btcWallet,
-    address,
-    publicKeyNoCoord,
-    connected,
-    network,
-  } = useWallet();
+  const { address, publicKeyNoCoord, connected, network } = useBTCWallet();
 
-  if (!btcWallet || !delegationsAPI || !currentVersion || !network) {
+  if (!connected || !delegationsAPI || !currentVersion || !network) {
     return;
   }
 
@@ -63,9 +52,6 @@ export const Delegations = () => {
         <DelegationsContent
           delegationsAPI={delegationsAPI.delegations}
           globalParamsVersion={currentVersion}
-          signPsbtTx={signPsbtTransaction(btcWallet)}
-          pushTx={btcWallet.pushTx}
-          getNetworkFees={btcWallet.getNetworkFees}
           address={address}
           btcWalletNetwork={network}
           publicKeyNoCoord={publicKeyNoCoord}
@@ -82,18 +68,12 @@ interface DelegationsContentProps {
   publicKeyNoCoord: string;
   btcWalletNetwork: networks.Network;
   address: string;
-  signPsbtTx: SignPsbtTransaction;
-  pushTx: WalletProvider["pushTx"];
-  getNetworkFees: WalletProvider["getNetworkFees"];
   isWalletConnected: boolean;
 }
 
 const DelegationsContent: React.FC<DelegationsContentProps> = ({
   delegationsAPI,
   globalParamsVersion,
-  signPsbtTx,
-  pushTx,
-  getNetworkFees,
   address,
   btcWalletNetwork,
   publicKeyNoCoord,
@@ -111,6 +91,8 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
     isLoading,
   } = useDelegationState();
 
+  const { signPsbt, getNetworkFees, pushTx } = useBTCWallet();
+
   const delegation = useMemo(
     () =>
       delegationsAPI.find((delegation) => delegation.stakingTxHashHex === txID),
@@ -177,7 +159,7 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
         delegationsAPI,
         publicKeyNoCoord,
         btcWalletNetwork,
-        signPsbtTx,
+        signPsbt,
       );
       // Update the local state with the new intermediate delegation
       updateLocalStorage(delegation, DelegationState.INTERMEDIATE_UNBONDING);
@@ -209,7 +191,7 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
         delegationsAPI,
         publicKeyNoCoord,
         btcWalletNetwork,
-        signPsbtTx,
+        signPsbt,
         address,
         getNetworkFees,
         pushTx,

src/app/components/Header/Header.tsx

@@ -1,4 +1,5 @@
-import { useWallet } from "@/app/context/wallet/WalletProvider";
+import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
+import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider";
 import { useAppState } from "@/app/state";
 import { shouldDisplayTestingMsg } from "@/config";
 
@@ -9,7 +10,8 @@ import { TestingInfo } from "../TestingInfo/TestingInfo";
 import { ThemeToggle } from "../ThemeToggle/ThemeToggle";
 
 export const Header = () => {
-  const { address, open, disconnect } = useWallet();
+  const { disconnect, open } = useWalletConnection();
+  const { address } = useBTCWallet();
   const { totalBalance, isLoading: loading } = useAppState();
 
   return (