[WIP] feature: bbn-wallet-connect native lib

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.3",
     "@babylonlabs-io/bbn-core-ui": "^0.2.0",
+    "@babylonlabs-io/bbn-wallet-connect": "^0.0.18",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",

src/app/components/Connect/ConnectSmall.tsx

@@ -18,6 +18,7 @@ import { LoadingSmall } from "../Loading/Loading";
 
 interface ConnectSmallProps {
   loading?: boolean;
+  connected?: boolean;
   onConnect: () => void;
   address: string;
   btcWalletBalanceSat?: number;
@@ -26,6 +27,7 @@ interface ConnectSmallProps {
 
 export const ConnectSmall: React.FC<ConnectSmallProps> = ({
   loading = false,
+  connected = false,
   onConnect,
   address,
   btcWalletBalanceSat,
@@ -64,7 +66,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
     );
   };
 
-  return address ? (
+  return connected ? (
     <div className="relative mr-[-10px] text-sm hidden md:flex" ref={ref}>
       <button
         className="flex cursor-pointer outline-none items-stretch"

src/app/components/Connect/ConnectedSmall.tsx

@@ -14,13 +14,15 @@ import { LoadingSmall } from "../Loading/Loading";
 
 interface ConnectedSmallProps {
   loading?: boolean;
+  connected?: boolean;
   address: string;
   onDisconnect: () => void;
   btcWalletBalanceSat?: number;
 }
 
 export const ConnectedSmall: React.FC<ConnectedSmallProps> = ({
   loading = false,
+  connected = false,
   address,
   btcWalletBalanceSat,
   onDisconnect,
@@ -38,7 +40,7 @@ export const ConnectedSmall: React.FC<ConnectedSmallProps> = ({
   const { coinName } = getNetworkConfig();
 
   return (
-    address && (
+    connected && (
       <div className="relative flex text-sm" ref={ref}>
         <button
           className="flex cursor-pointer outline-none items-stretch w-full justify-between"

src/app/components/Header/Header.tsx

@@ -1,7 +1,7 @@
+import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect";
 import { twJoin } from "tailwind-merge";
 
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
-import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider";
 import { useAppState } from "@/app/state";
 import { shouldDisplayTestingMsg } from "@/config";
 
@@ -12,7 +12,7 @@ import { TestingInfo } from "../TestingInfo/TestingInfo";
 import { ThemeToggle } from "../ThemeToggle/ThemeToggle";
 
 export const Header = () => {
-  const { disconnect, open } = useWalletConnection();
+  const { open, disconnect, connected } = useWalletConnect();
   const { address } = useBTCWallet();
   const { totalBalance, isLoading: loading } = useAppState();
 
@@ -35,6 +35,7 @@ export const Header = () => {
               address={address}
               btcWalletBalanceSat={totalBalance}
               onDisconnect={disconnect}
+              connected={connected}
             />
             <ThemeToggle />
           </div>
@@ -49,6 +50,7 @@ export const Header = () => {
               address={address}
               btcWalletBalanceSat={totalBalance}
               onDisconnect={disconnect}
+              connected={connected}
             />
           </div>
         </div>

src/app/components/Modals/FilterOrdinalsModal.tsx

@@ -1,10 +1,10 @@
+import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect";
 import { useEffect, useState } from "react";
 import { IoMdClose } from "react-icons/io";
 import { useLocalStorage } from "usehooks-ts";
 
 import { FILTER_ORDINALS_MODAL_KEY } from "@/app/common/constants";
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
-import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider";
 import { useAppState } from "@/app/state";
 
 import { GeneralModal } from "./GeneralModal";
@@ -23,17 +23,17 @@ export const FilterOrdinalsModal: React.FC<FilterOrdinalsModalProps> = ({}) => {
     }));
   };
 
-  const { isConnected } = useWalletConnection();
+  const { connected } = useWalletConnect();
   const { ordinalsExcluded, includeOrdinals, excludeOrdinals } = useAppState();
 
   const [hasSeenFilterOrdinalsModal, setHasSeenFilterOrdinalsModal] =
     useLocalStorage<Record<string, boolean>>(FILTER_ORDINALS_MODAL_KEY, {});
 
   useEffect(() => {
-    if (isConnected && address && !hasSeenFilterOrdinalsModal[address]) {
+    if (connected && address && !hasSeenFilterOrdinalsModal[address]) {
       setModalOpen(true);
     }
-  }, [isConnected, hasSeenFilterOrdinalsModal, address]);
+  }, [connected, hasSeenFilterOrdinalsModal, address]);
 
   return (
     <GeneralModal open={modalOpen} onClose={handleClose}>

src/app/context/wallet/BBNWalletProvider.tsx

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+
+// import { CosmosWalletContext as NativeCosmosWalletContext } from "./bbn";
+import { useWalletConnector, WalletConnectorName } from "./ConnectorProvider";
+import { CosmosWalletContext as TomoCosmosWalletContext } from "./tomo";
+import { CosmosWalletContext } from "./types";
+
+const CosmosProviders = {
+  tomo: TomoCosmosWalletContext,
+  native: TomoCosmosWalletContext,
+} as const;
+
+export function useBBNWallet(
+  connector?: WalletConnectorName,
+): CosmosWalletContext {
+  const { BBN } = useWalletConnector();
+
+  return useContext(CosmosProviders[connector ?? BBN]);
+}