diff --git a/src/components/AssetInput.tsx b/src/components/AssetInput.tsx index bdf12e87..e2bac16f 100644 --- a/src/components/AssetInput.tsx +++ b/src/components/AssetInput.tsx @@ -62,7 +62,7 @@ function AssetInput({ const showChainInfo = chain ? false : true; - const account = useAccount(chain?.chainID); + const account = useAccount(context === "src" ? "source" : "destination"); const { data: balances } = useBalancesByChain( account?.address, diff --git a/src/components/SwapWidget/SwapWidget.tsx b/src/components/SwapWidget/SwapWidget.tsx index 57df6416..0ec496fa 100644 --- a/src/components/SwapWidget/SwapWidget.tsx +++ b/src/components/SwapWidget/SwapWidget.tsx @@ -6,6 +6,7 @@ import type {} from "typed-query-selector"; import { disclosure } from "@/context/disclosures"; import { useSettingsStore } from "@/context/settings"; +import { trackWallet } from "@/context/track-wallet"; import { useAccount } from "@/hooks/useAccount"; import { useChains as useSkipChains } from "@/hooks/useChains"; @@ -65,8 +66,8 @@ export function SwapWidget() { parseFloat(route.usdAmountIn); } - const srcAccount = useAccount(sourceChain?.chainID); - const destAccount = useAccount(destinationChain?.chainID); + const srcAccount = useAccount("source"); + const destAccount = useAccount("destination"); const isWalletConnected = srcAccount?.isWalletConnected && destAccount?.isWalletConnected; @@ -170,6 +171,20 @@ export function SwapWidget() { amountOut: amountIn, direction: direction === "swap-in" ? "swap-out" : "swap-in", }); + if (destAccount?.wallet?.walletName) { + trackWallet.track( + "source", + destinationChain.chainID, + destAccount.wallet.walletName, + ); + } + if (sourceChain?.chainID && srcAccount?.wallet?.walletName) { + trackWallet.track( + "destination", + sourceChain.chainID, + srcAccount?.wallet?.walletName, + ); + } }} data-testid="swap-button" ref={invertButtonRef} diff --git a/src/components/SwapWidget/useSwapWidget.ts b/src/components/SwapWidget/useSwapWidget.ts index c7afbb06..070cffe1 100644 --- a/src/components/SwapWidget/useSwapWidget.ts +++ b/src/components/SwapWidget/useSwapWidget.ts @@ -131,7 +131,7 @@ export function useSwapWidget() { destinationAsset?.decimals, ]); - const account = useAccount(sourceChain?.chainID); + const account = useAccount("source"); const { assetsByChainID } = useAssets(); diff --git a/src/components/TransactionDialog/TransactionDialogContent.tsx b/src/components/TransactionDialog/TransactionDialogContent.tsx index 821130db..44003fd5 100644 --- a/src/components/TransactionDialog/TransactionDialogContent.tsx +++ b/src/components/TransactionDialog/TransactionDialogContent.tsx @@ -65,8 +65,8 @@ function TransactionDialogContent({ const { getWalletRepo } = useManager(); - const srcAccount = useAccount(route.sourceAssetChainID); - const dstAccount = useAccount(route.destAssetChainID); + const srcAccount = useAccount("source"); + const dstAccount = useAccount("destination"); async function onSubmit() { setTransacting(true); diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx index 53812472..692a3d42 100644 --- a/src/components/WalletModal/WalletModal.tsx +++ b/src/components/WalletModal/WalletModal.tsx @@ -9,7 +9,7 @@ import { useAccount, useConnect, useDisconnect } from "wagmi"; import { chainIdToName } from "@/chains/types"; import { DialogContent } from "@/components/Dialog"; import { EVM_WALLET_LOGOS, INJECTED_EVM_WALLET_LOGOS } from "@/constants/wagmi"; -import { trackAccount } from "@/context/account"; +import { trackWallet } from "@/context/track-wallet"; import { useChainByID } from "@/hooks/useChains"; import { AdaptiveLink } from "../AdaptiveLink"; @@ -156,7 +156,7 @@ export function WalletModal({ chainType, onClose, wallets }: Props) { function WalletModalWithContext() { const { connector: currentConnector } = useAccount(); - const { chainID } = useWalletModal(); + const { chainID, context } = useWalletModal(); const { disconnect } = useDisconnect(); const { connectors, connect } = useConnect(); const { getWalletRepo } = useManager(); @@ -203,11 +203,15 @@ function WalletModalWithContext() { assetList: w.assetList, }); await w.connect(); - trackAccount.track(chainID, w.walletName); + trackWallet.track( + context === "src" ? "source" : "destination", + chainID, + w.walletName, + ); }, disconnect: async () => { await w.disconnect(); - trackAccount.untrack(chainID); + trackWallet.untrack(context === "src" ? "source" : "destination"); }, isWalletConnected: w.isWalletConnected, })); diff --git a/src/context/account.ts b/src/context/account.ts deleted file mode 100644 index 2119e6b8..00000000 --- a/src/context/account.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { create } from "zustand"; -import { createJSONStorage, persist } from "zustand/middleware"; - -type TrackAccountStore = Record; - -const defaultValues: TrackAccountStore = {}; - -const store = create( - persist(() => defaultValues, { - name: "TrackAccountState", - version: 1, - storage: createJSONStorage(() => window.sessionStorage), - }), -); - -export const trackAccount = { - track: (chainID: string, walletName: string) => { - store.setState({ [chainID]: walletName }); - }, - untrack: (chainID: string) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - store.setState(({ [chainID]: _, ...latest }) => latest, true); - }, -}; - -export function useTrackAccount(chainID?: string): string | undefined { - return store((state) => state[chainID || ""]); -} - -export function getTrackAccount(chainID?: string): string | undefined { - return store.getState()[chainID || ""]; -} diff --git a/src/context/track-wallet.ts b/src/context/track-wallet.ts new file mode 100644 index 00000000..ceca7f4d --- /dev/null +++ b/src/context/track-wallet.ts @@ -0,0 +1,53 @@ +import { create } from "zustand"; +import { createJSONStorage, persist } from "zustand/middleware"; + +export type TrackWalletCtx = "source" | "destination"; + +interface TrackWalletStore { + source?: { + chainID: string; + walletName: string; + }; + destination?: { + chainID: string; + walletName: string; + }; +} + +const defaultValues: TrackWalletStore = { + source: undefined, + destination: undefined, +}; + +const store = create( + persist(() => defaultValues, { + name: "TrackWalletState", + version: 1, + storage: createJSONStorage(() => window.sessionStorage), + }), +); + +export const trackWallet = { + track: (ctx: TrackWalletCtx, chainID: string, walletName: string) => { + store.setState({ + [ctx]: { chainID, walletName }, + }); + }, + untrack: (ctx: TrackWalletCtx) => { + store.setState({ + [ctx]: undefined, + }); + }, +}; + +export function useTrackWalletByCtx(ctx: TrackWalletCtx) { + return store((state) => state[ctx]); +} + +export function useTrackWallet() { + return store((state) => state); +} + +export function getTrackWallet() { + return store.getState(); +} diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts index 8b3d6f9b..2bf0392f 100644 --- a/src/hooks/useAccount.ts +++ b/src/hooks/useAccount.ts @@ -3,20 +3,20 @@ import { useMemo } from "react"; import { useAccount as useWagmiAccount } from "wagmi"; import { EVM_WALLET_LOGOS, INJECTED_EVM_WALLET_LOGOS } from "@/constants/wagmi"; -import { useTrackAccount } from "@/context/account"; +import { TrackWalletCtx, useTrackWalletByCtx } from "@/context/track-wallet"; import { useChainByID } from "@/hooks/useChains"; +export function useAccount(context: TrackWalletCtx) { + const trackedWallet = useTrackWalletByCtx(context); -export function useAccount(chainID?: string) { - const { data: chain } = useChainByID(chainID); + const { data: chain } = useChainByID(trackedWallet?.chainID); const { walletRepo } = useCosmosChain( chain?.chainType === "cosmos" ? chain.chainName : "cosmoshub", true, ); - const walletName = useTrackAccount(chainID); const cosmosWallet = walletRepo.wallets.find((w) => { - return w.walletName === walletName; + return w.walletName === trackedWallet?.walletName; }); const wagmiAccount = useWagmiAccount(); @@ -26,7 +26,8 @@ export function useAccount(chainID?: string) { if (chain.chainType === "cosmos" && cosmosWallet) { return { address: cosmosWallet.address, - isWalletConnected: cosmosWallet.isWalletConnected, + isWalletConnected: + cosmosWallet.isWalletConnected && !cosmosWallet.isWalletDisconnected, wallet: cosmosWallet ? { walletName: cosmosWallet.walletInfo.name, diff --git a/src/solve/context.tsx b/src/solve/context.tsx index 2544a949..4728bb69 100644 --- a/src/solve/context.tsx +++ b/src/solve/context.tsx @@ -6,7 +6,7 @@ import { useNetwork as useWagmiNetwork } from "wagmi"; import { chainIdToName } from "@/chains"; import { API_URL } from "@/constants/api"; -import { getTrackAccount } from "@/context/account"; +import { getTrackWallet } from "@/context/track-wallet"; import { getNodeProxyEndpoint } from "@/utils/api"; import { isWalletClientUsingLedger } from "@/utils/wallet"; @@ -26,7 +26,7 @@ export function SkipProvider({ children }: { children: ReactNode }) { throw new Error(`getCosmosSigner error: unknown chainID '${chainID}'`); } - const walletName = getTrackAccount(chainID); + const walletName = getTrackWallet().source?.walletName; const wallet = getWalletRepo(chainName).wallets.find((w) => { return w.walletName === walletName; });