From e4bcb0c5598e21a8297d99a30b2dc7534bedcdd0 Mon Sep 17 00:00:00 2001 From: David Totraev Date: Sat, 30 Nov 2024 02:16:47 +0500 Subject: [PATCH 1/3] feat: bbn wallet connect --- package-lock.json | 68 ++++++-- package.json | 1 + src/app/components/Connect/ConnectSmall.tsx | 6 +- src/app/components/Connect/ConnectedSmall.tsx | 4 +- src/app/components/Header/Header.tsx | 6 +- .../components/Modals/FilterOrdinalsModal.tsx | 4 +- src/app/context/wallet/BTCWalletProvider.tsx | 85 ++++------ .../context/wallet/CosmosWalletProvider.tsx | 93 +++++------ .../wallet/WalletConnectionProvider.tsx | 150 +++++------------- src/app/globals.css | 1 + src/app/providers.tsx | 51 +++--- src/app/state/DelegationState.tsx | 1 - src/app/state/DelegationV2State.tsx | 34 ++-- src/app/state/index.tsx | 16 +- src/components/common/AuthGuard/index.tsx | 5 +- 15 files changed, 248 insertions(+), 277 deletions(-) diff --git a/package-lock.json b/package-lock.json index d8f7bb35..b36c7aa8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,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.21", "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", "@bitcoinerlab/secp256k1": "^1.1.1", @@ -2083,6 +2084,48 @@ "tailwind-merge": "^2.5.4" } }, + "node_modules/@babylonlabs-io/bbn-wallet-connect": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.0.21.tgz", + "integrity": "sha512-gSwBFDP0gN+m36xG156IXaMKWsysOuKFZD2CvXBT8VRdxQv3bjifDiWjBGTCstZ3lttKy7DTUeDJH6u3O0Q3+w==", + "dependencies": { + "@cosmjs/stargate": "^0.32.4", + "@keplr-wallet/types": "^0.12.156", + "buffer": "^6.0.3", + "nanoevents": "^9.1.0", + "react-icons": "^5.3.0" + }, + "peerDependencies": { + "@babylonlabs-io/bbn-core-ui": "^0.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "tailwind-merge": "^2.5.4" + } + }, + "node_modules/@babylonlabs-io/bbn-wallet-connect/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/@babylonlabs-io/btc-staking-ts": { "version": "0.4.0-canary.3", "resolved": "https://registry.npmjs.org/@babylonlabs-io/btc-staking-ts/-/btc-staking-ts-0.4.0-canary.3.tgz", @@ -3613,11 +3656,10 @@ } }, "node_modules/@keplr-wallet/types": { - "version": "0.12.151", - "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.151.tgz", - "integrity": "sha512-gcclZuLMZQ1qI1t2I29qVAToVS1otWeprB2lxzyvaAMj4upHkrarNWqCkPXwF3v43CBxHQTax8A9xpOaPGN9FQ==", + "version": "0.12.157", + "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.157.tgz", + "integrity": "sha512-CWRg6AK2x7sXZ0rhr9NSL8z9sIdnNHgrce3nyOBAJkXJ9XtrrJoOtopnkFaQmFOanysMHUrKMCbZFiaYrBmqew==", "license": "Apache-2.0", - "peer": true, "dependencies": { "long": "^4.0.0" }, @@ -3629,8 +3671,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz", "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==", - "license": "Apache-2.0", - "peer": true + "license": "Apache-2.0" }, "node_modules/@keystonehq/alias-sampling": { "version": "0.1.2", @@ -15237,6 +15278,15 @@ "thenify-all": "^1.0.0" } }, + "node_modules/nanoevents": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/nanoevents/-/nanoevents-9.1.0.tgz", + "integrity": "sha512-Jd0fILWG44a9luj8v5kED4WI+zfkkgwKyRQKItTtlPfEsh7Lznfi1kr8/iZ+XAIss4Qq5GqRB0qtWbaz9ceO/A==", + "license": "MIT", + "engines": { + "node": "^18.0.0 || >=20.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -16605,9 +16655,9 @@ } }, "node_modules/react-icons": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", - "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", "license": "MIT", "peerDependencies": { "react": "*" diff --git a/package.json b/package.json index 5e9dca99..40980b89 100644 --- a/package.json +++ b/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.21", "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", "@bitcoinerlab/secp256k1": "^1.1.1", diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx index 81c4ac1f..13ec1983 100644 --- a/src/app/components/Connect/ConnectSmall.tsx +++ b/src/app/components/Connect/ConnectSmall.tsx @@ -20,12 +20,14 @@ interface ConnectSmallProps { loading?: boolean; onConnect: () => void; address: string; + connected: boolean; btcWalletBalanceSat?: number; onDisconnect: () => void; } export const ConnectSmall: React.FC = ({ loading = false, + connected, onConnect, address, btcWalletBalanceSat, @@ -64,7 +66,7 @@ export const ConnectSmall: React.FC = ({ ); }; - return address ? ( + return connected ? (
{ )} > = ({}) => { })); }; - const { isConnected } = useWalletConnection(); + const { connected: isConnected } = useWalletConnect(); const { ordinalsExcluded, includeOrdinals, excludeOrdinals } = useAppState(); const [hasSeenFilterOrdinalsModal, setHasSeenFilterOrdinalsModal] = diff --git a/src/app/context/wallet/BTCWalletProvider.tsx b/src/app/context/wallet/BTCWalletProvider.tsx index c70e5af9..5d1e4196 100644 --- a/src/app/context/wallet/BTCWalletProvider.tsx +++ b/src/app/context/wallet/BTCWalletProvider.tsx @@ -1,4 +1,10 @@ -import type { BTCProvider } from "@tomo-inc/tomo-wallet-provider"; +"use client"; +import { + BTCProvider, + useChainConnector, + useWalletConnect, + UTXO, +} from "@babylonlabs-io/bbn-wallet-connect"; import type { networks } from "bitcoinjs-lib"; import { createContext, @@ -21,12 +27,9 @@ import { Fees, InscriptionIdentifier, Network, - UTXO, } from "@/utils/wallet/btc_wallet_provider"; import { WalletError, WalletErrorType } from "@/utils/wallet/errors"; -import { useWalletConnection } from "./WalletConnectionProvider"; - interface BTCWalletContextProps { network?: networks.Network; publicKeyNoCoord: string; @@ -79,7 +82,8 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { const [address, setAddress] = useState(""); const { showError, captureError } = useError(); - const { open, isConnected, providers } = useWalletConnection(); + const btcConnector = useChainConnector("BTC"); + const { open = () => {}, connected } = useWalletConnect(); const btcDisconnect = useCallback(() => { setBTCWalletProvider(undefined); @@ -89,12 +93,13 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { }, []); const connectBTC = useCallback( - async (walletProvider: BTCProvider) => { + async (walletProvider: BTCProvider | null) => { + if (!walletProvider) return; + const supportedNetworkMessage = "Only Native SegWit and Taproot addresses are supported. Please switch the address type in your wallet and try again."; try { - await walletProvider.connectWallet(); const address = await walletProvider.getAddress(); const supported = isSupportedAddressType(address); if (!supported) { @@ -140,19 +145,22 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { [showError, captureError], ); + useEffect(() => { + const unsubscribe = btcConnector?.on("connect", (wallet) => { + connectBTC(wallet.provider); + }); + + return unsubscribe; + }, [btcConnector, connectBTC]); + // Listen for BTC account changes useEffect(() => { - if (btcWalletProvider) { - let once = false; - btcWalletProvider.on("accountChanged", () => { - if (!once) { - connectBTC(btcWalletProvider); - } - }); - return () => { - once = true; - }; - } + if (!btcWalletProvider) return; + + const cb = () => void connectBTC(btcWalletProvider); + btcWalletProvider.on("accountChanged", cb); + + return () => void btcWalletProvider.off("accountChanged", cb); }, [btcWalletProvider, connectBTC]); const btcWalletMethods = useMemo( @@ -165,8 +173,10 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { btcWalletProvider?.signPsbts(psbtsHexes) ?? [], getNetwork: async () => btcWalletProvider?.getNetwork() ?? ({} as Network), - signMessage: async (message: string, type?: "ecdsa" | "bip322-simple") => - btcWalletProvider?.signMessage(message, type) ?? "", + signMessage: async ( + message: string, + type: "ecdsa" | "bip322-simple" = "bip322-simple", + ) => btcWalletProvider?.signMessage(message, type) ?? "", getBalance: async () => btcWalletProvider?.getBalance() ?? 0, getNetworkFees: async () => btcWalletProvider?.getNetworkFees() ?? ({} as Fees), @@ -175,15 +185,7 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { btcWalletProvider?.getUtxos(address, amount) ?? [], getBTCTipHeight: async () => btcWalletProvider?.getBTCTipHeight() ?? 0, getInscriptions: async (): Promise => - btcWalletProvider - ?.getInscriptions() - .then((result) => - result.list.map((ordinal) => ({ - txid: ordinal.inscriptionId, - vout: ordinal.outputValue, - })), - ) - .catch((e) => []) ?? [], + btcWalletProvider?.getInscriptions() ?? [], }), [btcWalletProvider], ); @@ -193,13 +195,13 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { network, publicKeyNoCoord, address, - connected: Boolean(btcWalletProvider), + connected, open, disconnect: btcDisconnect, ...btcWalletMethods, }), [ - btcWalletProvider, + connected, network, publicKeyNoCoord, address, @@ -209,27 +211,6 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => { ], ); - useEffect(() => { - if (isConnected && providers.state) { - if (!btcWalletProvider && providers.bitcoinProvider) { - connectBTC(providers.bitcoinProvider); - } - } - }, [ - connectBTC, - providers.bitcoinProvider, - providers.state, - isConnected, - btcWalletProvider, - ]); - - // Clean up the state when isConnected becomes false - useEffect(() => { - if (!isConnected) { - btcDisconnect(); - } - }, [isConnected, btcDisconnect]); - return ( {children} diff --git a/src/app/context/wallet/CosmosWalletProvider.tsx b/src/app/context/wallet/CosmosWalletProvider.tsx index 6ae8bccf..dc016a85 100644 --- a/src/app/context/wallet/CosmosWalletProvider.tsx +++ b/src/app/context/wallet/CosmosWalletProvider.tsx @@ -1,5 +1,10 @@ +"use client"; +import { + BBNProvider, + useChainConnector, + useWalletConnect, +} from "@babylonlabs-io/bbn-wallet-connect"; import { SigningStargateClient } from "@cosmjs/stargate"; -import { CosmosProvider } from "@tomo-inc/wallet-connect-sdk"; import { createContext, useCallback, @@ -12,9 +17,6 @@ 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; @@ -33,58 +35,59 @@ const CosmosWalletContext = createContext({ }); export const CosmosWalletProvider = ({ children }: PropsWithChildren) => { - const [cosmosWalletProvider, setCosmosWalletProvider] = useState< - CosmosProvider | undefined + const [BBNWalletProvider, setBBNWalletProvider] = useState< + BBNProvider | undefined >(); const [cosmosBech32Address, setCosmosBech32Address] = useState(""); const [signingStargateClient, setSigningStargateClient] = useState< SigningStargateClient | undefined >(); + const { showError, captureError } = useError(); - const { open, isConnected, providers } = useWalletConnection(); + const { open = () => {}, connected } = useWalletConnect(); + const bbnConnector = useChainConnector("BBN"); const cosmosDisconnect = useCallback(() => { - setCosmosWalletProvider(undefined); + setBBNWalletProvider(undefined); setCosmosBech32Address(""); setSigningStargateClient(undefined); }, []); - const connectCosmos = useCallback(async () => { - if (!providers.cosmosProvider) return; + const connectCosmos = useCallback( + async (provider: BBNProvider | null) => { + if (!provider) return; - try { - await providers.cosmosProvider.connectWallet(); - const address = await providers.cosmosProvider.getAddress(); - const client = await providers.cosmosProvider.getSigningStargateClient({ - registry: getBbnRegistry(), - }); - setSigningStargateClient(client); - setCosmosWalletProvider(providers.cosmosProvider); - setCosmosBech32Address(address); - } catch (error: any) { - showError({ - error: { - message: error.message, - errorState: ErrorState.WALLET, - }, - retryAction: connectCosmos, - }); - captureError(error); - } - }, [captureError, providers.cosmosProvider, showError]); + try { + const address = await provider.getAddress(); + const client = await provider.getSigningStargateClient(); + setSigningStargateClient(client); + setBBNWalletProvider(provider); + setCosmosBech32Address(address); + } catch (error: any) { + showError({ + error: { + message: error.message, + errorState: ErrorState.WALLET, + }, + retryAction: () => connectCosmos(provider), + }); + captureError(error); + } + }, + [captureError, showError], + ); const cosmosContextValue = useMemo( () => ({ bech32Address: cosmosBech32Address, - connected: - Boolean(cosmosWalletProvider) && Boolean(signingStargateClient), + connected: Boolean(BBNWalletProvider) && Boolean(signingStargateClient), disconnect: cosmosDisconnect, open, signingStargateClient, }), [ cosmosBech32Address, - cosmosWalletProvider, + BBNWalletProvider, cosmosDisconnect, open, signingStargateClient, @@ -92,25 +95,12 @@ export const CosmosWalletProvider = ({ children }: PropsWithChildren) => { ); useEffect(() => { - if (isConnected && providers.state) { - if (!cosmosWalletProvider && providers.cosmosProvider) { - connectCosmos(); - } - } - }, [ - connectCosmos, - providers.cosmosProvider, - providers.state, - isConnected, - cosmosWalletProvider, - ]); + const unsubscribe = bbnConnector?.on("connect", (wallet) => { + connectCosmos(wallet.provider); + }); - // Clean up the state when isConnected becomes false - useEffect(() => { - if (!isConnected) { - cosmosDisconnect(); - } - }, [isConnected, cosmosDisconnect]); + return unsubscribe; + }, [bbnConnector, connectCosmos]); return ( @@ -118,5 +108,4 @@ export const CosmosWalletProvider = ({ children }: PropsWithChildren) => { ); }; - export const useCosmosWallet = () => useContext(CosmosWalletContext); diff --git a/src/app/context/wallet/WalletConnectionProvider.tsx b/src/app/context/wallet/WalletConnectionProvider.tsx index a58e4c2f..cfa8d4ec 100644 --- a/src/app/context/wallet/WalletConnectionProvider.tsx +++ b/src/app/context/wallet/WalletConnectionProvider.tsx @@ -1,119 +1,51 @@ -import { - TomoContextProvider, - useTomoModalControl, - useTomoProviders, - useTomoWalletConnect, - useTomoWalletState, -} from "@tomo-inc/wallet-connect-sdk"; -import "@tomo-inc/wallet-connect-sdk/style.css"; -import { useTheme } from "next-themes"; -import { - createContext, - useCallback, - useContext, - type PropsWithChildren, -} from "react"; +"use client"; -import { getNetworkConfig } from "@/config/network.config"; -import { keplrRegistry } from "@/config/wallet/babylon"; +import { Network, WalletProvider } from "@babylonlabs-io/bbn-wallet-connect"; +import { type PropsWithChildren } from "react"; -// 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(); +import { ErrorState } from "@/app/types/errors"; +import { keplrRegistry } from "@/config/wallet/babylon"; - const { mempoolApiUrl, network, networkName } = getNetworkConfig(); - const bitcoinChain = { - id: 1, - name: networkName, - type: "bitcoin" as any, - network: network, - backendUrls: { - mempoolUrl: mempoolApiUrl + "/api/", +import { useError } from "../Error/ErrorContext"; + +const context = typeof window !== "undefined" ? window : {}; +const config = [ + { + chain: "BTC", + config: { + coinName: "Signet BTC", + coinSymbol: "sBTC", + networkName: "BTC signet", + mempoolApiUrl: "https://mempool.space/signet", + network: Network.SIGNET, }, - }; - - return ( - - - {children} - - - ); -}; - -interface WalletConnectionContextProps { - open: () => Promise; - disconnect: () => Promise; - isConnected: boolean; - providers: ReturnType; - tomoWalletConnect: ReturnType; - tomoModal: ReturnType; - tomoWalletState: ReturnType; -} - -const WalletConnectionContext = createContext({ - open: async () => {}, - disconnect: async () => {}, - isConnected: false, - providers: {} as ReturnType, - tomoWalletConnect: {} as ReturnType, - tomoModal: {} as ReturnType, - tomoWalletState: {} as ReturnType, -}); - -const WalletConnectionProviderInternal = ({ children }: PropsWithChildren) => { - const tomoModal = useTomoModalControl(); - const tomoWalletConnect = useTomoWalletConnect(); - const tomoWalletState = useTomoWalletState(); - const providers = useTomoProviders(); - - const open = useCallback(async () => { - await tomoModal.open("connect"); - }, [tomoModal]); - - const disconnect = useCallback(async () => { - await tomoWalletConnect.disconnect(); - }, [tomoWalletConnect]); + }, + { + chain: "BBN", + config: { + chainId: keplrRegistry.chainId, + rpc: keplrRegistry.rpc, + chainData: keplrRegistry, + }, + }, +] as const; - const isConnected = tomoWalletState.isConnected; +export const WalletConnectionProvider = ({ children }: PropsWithChildren) => { + const { showError, captureError } = useError(); + + const handleError = (e: Error) => { + showError({ + error: { + message: e.message, + errorState: ErrorState.WALLET, + }, + }); + captureError(e); + }; return ( - + {children} - + ); }; - -export const useWalletConnection = () => useContext(WalletConnectionContext); diff --git a/src/app/globals.css b/src/app/globals.css index 6b278a3c..3f145f2a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,6 +2,7 @@ @import "react-tooltip/dist/react-tooltip.css"; @import "react-toastify/dist/ReactToastify.css"; @import "@babylonlabs-io/bbn-core-ui/dist/style.css"; +@import "@babylonlabs-io/bbn-wallet-connect/dist/style.css"; @tailwind base; @tailwind components; diff --git a/src/app/providers.tsx b/src/app/providers.tsx index 1ac2bbf7..3edddeda 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -1,5 +1,6 @@ "use client"; +import { ScrollLocker } from "@babylonlabs-io/bbn-core-ui"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental"; @@ -18,30 +19,32 @@ function Providers({ children }: React.PropsWithChildren) { const [client] = React.useState(new QueryClient()); return ( - - - - - - - - - - {children} - - - - - - - - - - - + + + + + + + + + + + {children} + + + + + + + + + + + + ); } diff --git a/src/app/state/DelegationState.tsx b/src/app/state/DelegationState.tsx index b5e61d8a..39f0d6fb 100644 --- a/src/app/state/DelegationState.tsx +++ b/src/app/state/DelegationState.tsx @@ -38,7 +38,6 @@ export function DelegationState({ children }: PropsWithChildren) { [], ); - // Effects useEffect( function syncDelegations() { if (!data?.delegations) { diff --git a/src/app/state/DelegationV2State.tsx b/src/app/state/DelegationV2State.tsx index d1078b7a..f7564108 100644 --- a/src/app/state/DelegationV2State.tsx +++ b/src/app/state/DelegationV2State.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, type PropsWithChildren } from "react"; +import { useCallback, useMemo, type PropsWithChildren } from "react"; import { useLocalStorage } from "usehooks-ts"; import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider"; @@ -37,19 +37,19 @@ export function DelegationV2State({ children }: PropsWithChildren) { [], ); - // Effects - useEffect( - function syncDelegations() { - if (!data?.delegations) { - return; - } - // TODO: Find the difference and update only the difference - if (!areDelegationsEqual(delegations, data.delegations)) { - setDelegations(data.delegations); - } - }, - [data?.delegations, delegations, setDelegations], - ); + // // Effects + // useEffect( + // function syncDelegations() { + // if (!data?.delegations) { + // return; + // } + // // TODO: Find the difference and update only the difference + // if (!areDelegationsEqual(delegations, data.delegations)) { + // setDelegations(data.delegations); + // } + // }, + // [data?.delegations, delegations, setDelegations], + // ); // Methods const addDelegation = useCallback( @@ -76,10 +76,12 @@ export function DelegationV2State({ children }: PropsWithChildren) { [delegations], ); + console.log(delegations, data?.delegations); + // Context const state = useMemo( () => ({ - delegations, + delegations: data?.delegations ?? [], isLoading: isFetchingNextPage, hasMoreDelegations: hasNextPage, addDelegation, @@ -87,7 +89,7 @@ export function DelegationV2State({ children }: PropsWithChildren) { fetchMoreDelegations: fetchNextPage, }), [ - delegations, + data?.delegations, isFetchingNextPage, hasNextPage, addDelegation, diff --git a/src/app/state/index.tsx b/src/app/state/index.tsx index fcb59f9c..e64d547a 100644 --- a/src/app/state/index.tsx +++ b/src/app/state/index.tsx @@ -1,4 +1,5 @@ -import { useCallback, useMemo, useState, type PropsWithChildren } from "react"; +import { useInscriptionProvider } from "@babylonlabs-io/bbn-wallet-connect"; +import { useCallback, useMemo, type PropsWithChildren } from "react"; import { useBTCTipHeight } from "@/app/hooks/api/useBTCTipHeight"; import { useOrdinals } from "@/app/hooks/api/useOrdinals"; @@ -41,7 +42,8 @@ const { StateProvider, useState: useApplicationState } = }); export function AppState({ children }: PropsWithChildren) { - const [ordinalsExcluded, setOrdinalsExcluded] = useState(true); + const { lockInscriptions: ordinalsExcluded, toggleLockInscriptions } = + useInscriptionProvider(); // States const { @@ -101,8 +103,14 @@ export function AppState({ children }: PropsWithChildren) { ); // Handlers - const includeOrdinals = useCallback(() => setOrdinalsExcluded(false), []); - const excludeOrdinals = useCallback(() => setOrdinalsExcluded(true), []); + const includeOrdinals = useCallback( + () => toggleLockInscriptions?.(false), + [toggleLockInscriptions], + ); + const excludeOrdinals = useCallback( + () => toggleLockInscriptions?.(true), + [toggleLockInscriptions], + ); // Context const context = useMemo( diff --git a/src/components/common/AuthGuard/index.tsx b/src/components/common/AuthGuard/index.tsx index 0a6bc3b4..9a6a1cc4 100644 --- a/src/components/common/AuthGuard/index.tsx +++ b/src/components/common/AuthGuard/index.tsx @@ -1,3 +1,4 @@ +import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect"; import { useEffect, useState, @@ -5,8 +6,6 @@ import { type ReactNode, } from "react"; -import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider"; - interface AuthGuardProps { fallback?: ReactNode; } @@ -15,7 +14,7 @@ export function AuthGuard({ children, fallback, }: PropsWithChildren) { - const { isConnected } = useWalletConnection(); + const { connected: isConnected } = useWalletConnect(); const [displayComponent, setDisplayComponent] = useState(false); useEffect(() => { From 067e55eccb3cf376b000695e0349b14d189fe6d5 Mon Sep 17 00:00:00 2001 From: David Totraev Date: Sat, 30 Nov 2024 08:23:30 +0500 Subject: [PATCH 2/3] fix: review --- src/app/state/DelegationV2State.tsx | 31 ----------------------------- 1 file changed, 31 deletions(-) diff --git a/src/app/state/DelegationV2State.tsx b/src/app/state/DelegationV2State.tsx index f7564108..1089c6b9 100644 --- a/src/app/state/DelegationV2State.tsx +++ b/src/app/state/DelegationV2State.tsx @@ -37,20 +37,6 @@ export function DelegationV2State({ children }: PropsWithChildren) { [], ); - // // Effects - // useEffect( - // function syncDelegations() { - // if (!data?.delegations) { - // return; - // } - // // TODO: Find the difference and update only the difference - // if (!areDelegationsEqual(delegations, data.delegations)) { - // setDelegations(data.delegations); - // } - // }, - // [data?.delegations, delegations, setDelegations], - // ); - // Methods const addDelegation = useCallback( (newDelegation: DelegationV2) => { @@ -76,8 +62,6 @@ export function DelegationV2State({ children }: PropsWithChildren) { [delegations], ); - console.log(delegations, data?.delegations); - // Context const state = useMemo( () => ({ @@ -102,18 +86,3 @@ export function DelegationV2State({ children }: PropsWithChildren) { } export const useDelegationV2State = useState; - -function areDelegationsEqual( - arr1: DelegationV2[], - arr2: DelegationV2[], -): boolean { - if (arr1.length !== arr2.length) return false; - - return arr1.every((item, index) => { - const other = arr2[index]; - return ( - item.stakingTxHashHex === other.stakingTxHashHex && - item.state === other.state - ); - }); -} From 341d64664d21e2830348b8527b972f39097d65ca Mon Sep 17 00:00:00 2001 From: David Totraev Date: Sat, 30 Nov 2024 19:39:12 +0500 Subject: [PATCH 3/3] fix: bump wallet connect version --- package-lock.json | 8 ++++---- package.json | 2 +- src/app/context/wallet/WalletConnectionProvider.tsx | 8 ++++---- src/config/wallet/babylon.ts | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index b36c7aa8..816061be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,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.21", + "@babylonlabs-io/bbn-wallet-connect": "^0.0.23", "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", "@bitcoinerlab/secp256k1": "^1.1.1", @@ -2085,9 +2085,9 @@ } }, "node_modules/@babylonlabs-io/bbn-wallet-connect": { - "version": "0.0.21", - "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.0.21.tgz", - "integrity": "sha512-gSwBFDP0gN+m36xG156IXaMKWsysOuKFZD2CvXBT8VRdxQv3bjifDiWjBGTCstZ3lttKy7DTUeDJH6u3O0Q3+w==", + "version": "0.0.23", + "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.0.23.tgz", + "integrity": "sha512-x6pFnKmo/2tSofQrtJnYYa05//+d8dLhp2zrxFNtjogVkZMgSeP5X7lq12gNXUE5Wlvzd5C9WfNDC61x3TyQEQ==", "dependencies": { "@cosmjs/stargate": "^0.32.4", "@keplr-wallet/types": "^0.12.156", diff --git a/package.json b/package.json index 40980b89..292aa783 100644 --- a/package.json +++ b/package.json @@ -27,7 +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.21", + "@babylonlabs-io/bbn-wallet-connect": "^0.0.23", "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", "@bitcoinerlab/secp256k1": "^1.1.1", diff --git a/src/app/context/wallet/WalletConnectionProvider.tsx b/src/app/context/wallet/WalletConnectionProvider.tsx index cfa8d4ec..d6cb4e3d 100644 --- a/src/app/context/wallet/WalletConnectionProvider.tsx +++ b/src/app/context/wallet/WalletConnectionProvider.tsx @@ -4,7 +4,7 @@ import { Network, WalletProvider } from "@babylonlabs-io/bbn-wallet-connect"; import { type PropsWithChildren } from "react"; import { ErrorState } from "@/app/types/errors"; -import { keplrRegistry } from "@/config/wallet/babylon"; +import { bbnDevnet } from "@/config/wallet/babylon"; import { useError } from "../Error/ErrorContext"; @@ -23,9 +23,9 @@ const config = [ { chain: "BBN", config: { - chainId: keplrRegistry.chainId, - rpc: keplrRegistry.rpc, - chainData: keplrRegistry, + chainId: bbnDevnet.chainId, + rpc: bbnDevnet.rpc, + chainData: bbnDevnet, }, }, ] as const; diff --git a/src/config/wallet/babylon.ts b/src/config/wallet/babylon.ts index a0da1aaf..615fce5c 100644 --- a/src/config/wallet/babylon.ts +++ b/src/config/wallet/babylon.ts @@ -1,6 +1,6 @@ // Temporary solution until we have a stable chain registry // The values here shall match from https://rpc.devnet.babylonlabs.io/genesis? -export const keplrRegistry = { +export const bbnDevnet = { chainId: "devnet-7", chainName: "Babylon Devnet 7", chainSymbolImageUrl: