diff --git a/packages/widget/src/hooks/useGetWalletStateFromAddress.ts b/packages/widget/src/hooks/useGetWalletStateFromAddress.ts new file mode 100644 index 00000000..e76f9f76 --- /dev/null +++ b/packages/widget/src/hooks/useGetWalletStateFromAddress.ts @@ -0,0 +1,21 @@ +import { useAtomValue } from "jotai"; +import { evmWalletAtom, svmWalletAtom, cosmosWalletAtom } from "@/state/wallets"; + +export const useGetWalletStateFromAddress = () => { + const evmWallet = useAtomValue(evmWalletAtom); + const svmWallet = useAtomValue(svmWalletAtom); + const cosmosWallet = useAtomValue(cosmosWalletAtom); + + const getWalletState = (address: string) => { + if (cosmosWallet?.addressMap) { + const addressFound = Object.values(cosmosWallet.addressMap).find( + (key) => address === key?.bech32Address, + ); + if (addressFound) return cosmosWallet; + } + if (evmWallet?.address === address) return evmWallet; + if (svmWallet?.address === address) return svmWallet; + }; + + return getWalletState; +}; diff --git a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx index cfc60dcf..9fb9a023 100644 --- a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx +++ b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx @@ -9,13 +9,14 @@ import { ChainTransaction } from "@skip-go/client"; import { ClientOperation, SimpleStatus } from "@/utils/clientType"; import { useGetAssetDetails } from "@/hooks/useGetAssetDetails"; import { useAtomValue } from "jotai"; -import { chainAddressesAtom } from "@/state/swapExecutionPage"; +import { chainAddressesAtom, swapExecutionStateAtom } from "@/state/swapExecutionPage"; import { useGetAccount } from "@/hooks/useGetAccount"; import { getTruncatedAddress } from "@/utils/crypto"; import { copyToClipboard } from "@/utils/misc"; import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize"; import { CopyIcon } from "@/icons/CopyIcon"; import { removeTrailingZeros } from "@/utils/number"; +import { useGetWalletStateFromAddress } from "@/hooks/useGetWalletStateFromAddress"; export type SwapExecutionPageRouteDetailedRowProps = { denom: ClientOperation["denomIn"] | ClientOperation["denomOut"]; @@ -54,9 +55,8 @@ export const SwapExecutionPageRouteDetailedRow = ({ tokenAmount, }); - const chainAddresses = useAtomValue(chainAddressesAtom); - const getAccount = useGetAccount(); - const account = getAccount(chainId); + const { userAddresses } = useAtomValue(swapExecutionStateAtom); + const getWalletState = useGetWalletStateFromAddress(); const shouldRenderEditDestinationWallet = context === "destination" && onClickEditDestinationWallet !== undefined; @@ -64,44 +64,23 @@ export const SwapExecutionPageRouteDetailedRow = ({ const renderingEditDestinationWalletOrExplorerLink = shouldRenderEditDestinationWallet || explorerLink !== undefined; - const source = useMemo(() => { - const chainAddressArray = Object.values(chainAddresses); - switch (context) { - case "source": - return { - address: account?.address, - image: account?.wallet.logo, - }; - case "intermediary": { - const selected = Object.values(chainAddresses).find( - (chainAddress) => chainAddress.chainID === chainId, - ); - return { - address: selected?.address, - image: (selected?.source === "wallet" && selected.wallet.walletInfo.logo) || undefined, - }; - } - case "destination": { - const selected = chainAddressArray[chainAddressArray.length - 1]; - return { - address: selected?.address, - image: (selected?.source === "wallet" && selected.wallet.walletInfo.logo) || undefined, - }; - } - } - }, [account?.address, account?.wallet.logo, chainAddresses, chainId, context]); + const userAddressIndex = userAddresses.findIndex( + (userAddress) => userAddress.chainID === chainId, + ); + const address = userAddresses[userAddressIndex].address; + const walletInfo = getWalletState(address)?.walletInfo; const renderAddress = useMemo(() => { const Container = shouldRenderEditDestinationWallet ? ({ children }: { children: React.ReactNode }) => {children} : React.Fragment; - if (!source.address) return; + if (!address) return; return ( - copyToClipboard(source.address)}> - {source.image && ( + copyToClipboard(address)}> + {walletInfo?.logo && ( ) : ( - - {getTruncatedAddress(source.address, isMobileScreenSize)} + + {getTruncatedAddress(address, isMobileScreenSize)} )} @@ -127,12 +106,12 @@ export const SwapExecutionPageRouteDetailedRow = ({ ); }, [ + address, isMobileScreenSize, onClickEditDestinationWallet, shouldRenderEditDestinationWallet, - source.address, - source.image, theme.primary.text.lowContrast, + walletInfo.logo, ]); const renderExplorerLink = useMemo(() => { diff --git a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimple.tsx b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimple.tsx index 1a2f29b8..09bd832b 100644 --- a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimple.tsx +++ b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimple.tsx @@ -58,7 +58,6 @@ export const SwapExecutionPageRouteSimple = ({ @@ -68,7 +67,6 @@ export const SwapExecutionPageRouteSimple = ({ status={destinationStatus} onClickEditDestinationWallet={onClickEditDestinationWallet} explorerLink={destinationExplorerLink} - context="destination" /> ); diff --git a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx index 9691b765..8a365911 100644 --- a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx +++ b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx @@ -10,14 +10,14 @@ import { ChainIcon } from "@/icons/ChainIcon"; import { PenIcon } from "@/icons/PenIcon"; import { useGetAssetDetails } from "@/hooks/useGetAssetDetails"; import { ClientOperation, SimpleStatus } from "@/utils/clientType"; -import { chainAddressesAtom, swapExecutionStateAtom } from "@/state/swapExecutionPage"; +import { swapExecutionStateAtom } from "@/state/swapExecutionPage"; import { useAtomValue } from "jotai"; -import { useGetAccount } from "@/hooks/useGetAccount"; import { getTruncatedAddress } from "@/utils/crypto"; import { formatUSD } from "@/utils/intl"; import { copyToClipboard } from "@/utils/misc"; import { limitDecimalsDisplayed, removeTrailingZeros } from "@/utils/number"; import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize"; +import { useGetWalletStateFromAddress } from "@/hooks/useGetWalletStateFromAddress"; export type SwapExecutionPageRouteSimpleRowProps = { denom: ClientOperation["denomIn"] | ClientOperation["denomOut"]; @@ -28,7 +28,6 @@ export type SwapExecutionPageRouteSimpleRowProps = { explorerLink?: ChainTransaction["explorerLink"]; status?: SimpleStatus; icon?: ICONS; - context: "source" | "destination"; }; export const SwapExecutionPageRouteSimpleRow = ({ @@ -39,11 +38,11 @@ export const SwapExecutionPageRouteSimpleRow = ({ status, onClickEditDestinationWallet, explorerLink, - context, }: SwapExecutionPageRouteSimpleRowProps) => { const theme = useTheme(); const isMobileScreenSize = useIsMobileScreenSize(); const { userAddresses } = useAtomValue(swapExecutionStateAtom); + const getWalletState = useGetWalletStateFromAddress(); const assetDetails = useGetAssetDetails({ assetDenom: denom, @@ -51,25 +50,11 @@ export const SwapExecutionPageRouteSimpleRow = ({ tokenAmount, }); - const chainAddresses = useAtomValue(chainAddressesAtom); - const getAccount = useGetAccount(); - const account = getAccount(chainId); - - const source = useMemo(() => { - switch (context) { - case "source": - return { - address: account?.address, - image: account?.wallet.logo, - }; - case "destination": { - const selected = userAddresses[userAddresses.length - 1]; - return { - address: selected?.address, - }; - } - } - }, [account?.address, account?.wallet.logo, context, userAddresses]); + const userAddressIndex = userAddresses.findIndex( + (userAddress) => userAddress.chainID === chainId, + ); + const address = userAddresses[userAddressIndex].address; + const walletInfo = getWalletState(address)?.walletInfo; const displayAmount = useMemo(() => { return removeTrailingZeros(limitDecimalsDisplayed(assetDetails.amount)); @@ -122,11 +107,11 @@ export const SwapExecutionPageRouteSimpleRow = ({ on {assetDetails.chainName} - diff --git a/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts b/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts index cb040e3d..a4f082fa 100644 --- a/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts +++ b/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts @@ -1,9 +1,10 @@ // useSwapExecutionState.ts import { useMemo } from "react"; -import { ChainAddress } from "@/state/swapExecutionPage"; +import { ChainAddress, swapExecutionStateAtom } from "@/state/swapExecutionPage"; import { SimpleStatus } from "@/utils/clientType"; import { RouteResponse } from "@skip-go/client"; import { SwapExecutionState } from "./SwapExecutionPage"; +import { useAtomValue } from "jotai"; type UseSwapExecutionStateParams = { chainAddresses: Record; @@ -20,6 +21,8 @@ export function useSwapExecutionState({ isValidatingGasBalance, signaturesRemaining, }: UseSwapExecutionStateParams): SwapExecutionState { + const { userAddresses } = useAtomValue(swapExecutionStateAtom); + return useMemo(() => { if (!chainAddresses) return SwapExecutionState.destinationAddressUnset; const requiredChainAddresses = route?.requiredChainAddresses;