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}
-