fix: upgrade and adjust the tomo connect to pave way for broadcast BB… (

#273)

* feat: upgrade tomo connect

package.json

@@ -28,14 +28,16 @@
     "@babylonlabs-io/btc-staking-ts": "0.3.0",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",
+    "@cosmjs/proto-signing": "^0.32.4",
+    "@cosmjs/stargate": "^0.32.4",
     "@keystonehq/animated-qr": "^0.8.6",
     "@keystonehq/keystone-sdk": "^0.4.1",
     "@keystonehq/sdk": "0.21.3",
     "@scure/bip32": "^1.4.0",
     "@sentry/nextjs": "^8.30.0",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
-    "@tomo-inc/wallet-connect-sdk": "0.2.4",
+    "@tomo-inc/wallet-connect-sdk": "0.2.14",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.7.4",
     "bitcoinjs-lib": "6.1.5",

src/app/context/wallet/BTCWalletProvider.tsx

@@ -134,7 +134,7 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => {
         captureError(error);
       }
     },
-    [showError],
+    [showError, captureError],
   );
 
   // Listen for BTC account changes

src/app/context/wallet/CosmosWalletProvider.tsx

@@ -1,3 +1,4 @@
+import { SigningStargateClient } from "@cosmjs/stargate";
 import {
   createContext,
   useCallback,
@@ -10,56 +11,53 @@ import {
 
 import { useError } from "@/app/context/Error/ErrorContext";
 import { ErrorState } from "@/app/types/errors";
+import { getBbnRegistry } from "@/utils/wallet/bbnRegistry";
 
 import { useWalletConnection } from "./WalletConnectionProvider";
 
 interface CosmosWalletContextProps {
   bech32Address: string;
-  pubKey: string;
   connected: boolean;
   disconnect: () => void;
   open: () => void;
-  signArbitrary: (message: string) => Promise<any>;
+  getSigningStargateClient(): Promise<SigningStargateClient>;
 }
 
+const getSigningStargateClientDefault = async () => {
+  throw new Error("Not initialized");
+};
+
 const CosmosWalletContext = createContext<CosmosWalletContextProps>({
   bech32Address: "",
-  pubKey: "",
   connected: false,
   disconnect: () => {},
   open: () => {},
-  signArbitrary: async () => {},
+  getSigningStargateClient: getSigningStargateClientDefault,
 });
 
 export const CosmosWalletProvider = ({ children }: PropsWithChildren) => {
   const [cosmosWalletProvider, setCosmosWalletProvider] = useState<any>();
   const [cosmosBech32Address, setCosmosBech32Address] = useState("");
-  const [cosmosPubKey, setCosmosPubKey] = useState("");
-  const [cosmosChainID, setCosmosChainID] = useState("");
 
   const { showError, captureError } = useError();
   const { open, isConnected, providers } = useWalletConnection();
 
   const cosmosDisconnect = useCallback(() => {
     setCosmosWalletProvider(undefined);
     setCosmosBech32Address("");
-    setCosmosPubKey("");
-    setCosmosChainID("");
   }, []);
 
   const connectCosmos = useCallback(async () => {
     if (!providers.cosmosProvider) return;
 
     try {
-      const chainID = providers.cosmosProvider.getChainId();
-      const cosmosInfo =
-        await providers.cosmosProvider.provider.getKey(chainID);
+      await providers.cosmosProvider.connectWallet();
+      const address = await providers.cosmosProvider.getAddress();
+      const registry = getBbnRegistry();
+      await providers.cosmosProvider.getSigningStargateClient({ registry });
 
-      const { bech32Address, pubKey } = cosmosInfo;
       setCosmosWalletProvider(providers.cosmosProvider);
-      setCosmosBech32Address(bech32Address);
-      setCosmosPubKey(Buffer.from(pubKey).toString("hex"));
-      setCosmosChainID(chainID);
+      setCosmosBech32Address(address);
     } catch (error: any) {
       showError({
         error: {
@@ -75,25 +73,12 @@ export const CosmosWalletProvider = ({ children }: PropsWithChildren) => {
   const cosmosContextValue = useMemo(
     () => ({
       bech32Address: cosmosBech32Address,
-      pubKey: cosmosPubKey,
       connected: Boolean(cosmosWalletProvider),
       disconnect: cosmosDisconnect,
       open,
-      signArbitrary: (message: string) =>
-        cosmosWalletProvider.provider.signArbitrary(
-          cosmosChainID,
-          cosmosBech32Address,
-          message,
-        ),
+      getSigningStargateClient: cosmosWalletProvider?.getSigningStargateClient,
     }),
-    [
-      cosmosChainID,
-      cosmosBech32Address,
-      cosmosPubKey,
-      cosmosWalletProvider,
-      cosmosDisconnect,
-      open,
-    ],
+    [cosmosBech32Address, cosmosWalletProvider, cosmosDisconnect, open],
   );
 
   useEffect(() => {

src/app/context/wallet/WalletConnectionProvider.tsx

@@ -18,9 +18,10 @@ import {
 
 import { network } from "@/config/network.config";
 
+import { keplrRegistry } from "./keplrSetup";
+
 // We have to split the connection into two parts
 // so we can use the tomoWalletConnect and tomoModal hooks
-
 export const WalletConnectionProvider = ({ children }: PropsWithChildren) => {
   const { resolvedTheme } = useTheme();
 
@@ -31,14 +32,16 @@ export const WalletConnectionProvider = ({ children }: PropsWithChildren) => {
   return (
     <TomoContextProvider
       bitcoinChains={bitcoinChains}
-      multiNetworkConnection={true}
+      chainTypes={["bitcoin", "cosmos"]}
       // TODO change options (ordinals) wording as soon as it's available
       cosmosChains={[
         {
-          id: 1,
-          name: "Babylon Devnet",
+          id: 2,
+          name: "Babylon Devnet 4",
           type: "cosmos",
-          network: "bbn-dev-5",
+          network: "devnet-4",
+          modularData: keplrRegistry,
+          rpc: "https://rpc.devnet.babylonlabs.io",
           nativeCurrency: {
             name: "BBN",
             symbol: "BBN",

src/app/context/wallet/keplrSetup.ts

@@ -0,0 +1,57 @@
+// Temporary solution until we have a stable chain registry
+// The values here shall match from https://rpc.devnet.babylonlabs.io/genesis?
+export const keplrRegistry = {
+  chainId: "devnet-4",
+  chainName: "Babylon Devnet 4",
+  chainSymbolImageUrl:
+    "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/bbn-dev/chain.png",
+  rpc: "https://rpc.devnet.babylonlabs.io",
+  rest: "https://lcd.devnet.babylonlabs.io",
+  nodeProvider: {
+    name: "Babylonchain",
+    email: "[email protected]",
+    website: "https://babylonlabs.io/",
+  },
+  bip44: {
+    coinType: 118,
+  },
+  bech32Config: {
+    bech32PrefixAccAddr: "bbn",
+    bech32PrefixAccPub: "bbnpub",
+    bech32PrefixValAddr: "bbnvaloper",
+    bech32PrefixValPub: "bbnvaloperpub",
+    bech32PrefixConsAddr: "bbnvalcons",
+    bech32PrefixConsPub: "bbnvalconspub",
+  },
+  currencies: [
+    {
+      coinDenom: "BBN",
+      coinMinimalDenom: "ubbn",
+      coinDecimals: 6,
+      coinImageUrl:
+        "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/bbn-dev/chain.png",
+    },
+  ],
+  feeCurrencies: [
+    {
+      coinDenom: "BBN",
+      coinMinimalDenom: "ubbn",
+      coinDecimals: 6,
+      coinImageUrl:
+        "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/bbn-dev/chain.png",
+      gasPriceStep: {
+        low: 0.007,
+        average: 0.007,
+        high: 0.01,
+      },
+    },
+  ],
+  stakeCurrency: {
+    coinDenom: "BBN",
+    coinMinimalDenom: "ubbn",
+    coinDecimals: 6,
+    coinImageUrl:
+      "https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/bbn-dev/chain.png",
+  },
+  features: ["cosmwasm"],
+};

src/app/hooks/api/useApi.ts

@@ -56,7 +56,7 @@ export function useAPIQuery<
       refetchFunction: data.refetch,
     });
     captureError(data.error as Error);
-  }, [handleError, data.error, data.isError, data.refetch]);
+  }, [handleError, data.error, data.isError, data.refetch, captureError]);
 
   return data;
 }

src/app/hooks/api/useDelegations.ts

@@ -52,7 +52,7 @@ export function useDelegations({ enabled = true }: { enabled?: boolean } = {}) {
       refetchFunction: query.refetch,
     });
     captureError(query.error);
-  }, [query.isError, query.error, query.refetch, handleError]);
+  }, [query.isError, query.error, query.refetch, handleError, captureError]);
 
   return query;
 }

src/app/hooks/useHealthCheck.ts

@@ -31,7 +31,7 @@ export const useHealthCheck = () => {
       });
       captureError(error);
     }
-  }, [isError, error, showError, refetch]);
+  }, [isError, error, showError, refetch, captureError]);
 
   const isApiNormal = data?.status === HealthCheckStatus.Normal;
   const isGeoBlocked = data ? isGeoBlockedResult(data) : false;

src/utils/wallet/bbnRegistry.ts

@@ -0,0 +1,6 @@
+import { Registry } from "@cosmjs/proto-signing";
+
+export const getBbnRegistry = (): Registry => {
+  // TODO: Implement the BBN registry
+  return new Registry();
+};