test

skip-mev · Feb 7, 2025 · 9bb8695 · 9bb8695
1 parent 9aae004
commit 9bb8695
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 69 deletions.
diff --git a/packages/widget/src/hooks/useGetWalletStateFromAddress.ts 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
@@ -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,54 +55,32 @@ 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;
 
   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 }) => <Row gap={5}>{children}</Row>
       : React.Fragment;
-    if (!source.address) return;
+    if (!address) return;
     return (
       <Container>
-        <PillButton onClick={() => copyToClipboard(source.address)}>
-          {source.image && (
+        <PillButton onClick={() => copyToClipboard(address)}>
+          {walletInfo?.logo && (
             <img
-              src={source.image}
+              src={walletInfo.logo}
               style={{
                 height: "100%",
               }}
@@ -110,8 +89,8 @@ export const SwapExecutionPageRouteDetailedRow = ({
           {isMobileScreenSize ? (
             <CopyIcon color={theme.primary.text.lowContrast} />
           ) : (
-            <AddressText title={source.address} monospace textWrap="nowrap">
-              {getTruncatedAddress(source.address, isMobileScreenSize)}
+            <AddressText title={address} monospace textWrap="nowrap">
+              {getTruncatedAddress(address, isMobileScreenSize)}
             </AddressText>
           )}
         </PillButton>
@@ -127,12 +106,12 @@ export const SwapExecutionPageRouteDetailedRow = ({
       </Container>
     );
   }, [
+    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
@@ -58,7 +58,6 @@ export const SwapExecutionPageRouteSimple = ({
       <SwapExecutionPageRouteSimpleRow
         {...source}
         status={firstOperationStatus}
-        context="source"
         explorerLink={sourceExplorerLink}
       />
       <StyledBridgeArrowIcon color={theme.primary.text.normal} />
@@ -68,7 +67,6 @@ export const SwapExecutionPageRouteSimple = ({
         status={destinationStatus}
         onClickEditDestinationWallet={onClickEditDestinationWallet}
         explorerLink={destinationExplorerLink}
-        context="destination"
       />
     </StyledSwapExecutionPageRoute>
   );

diff --git 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,37 +38,23 @@ 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,
     chainId,
     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}
           </StyledChainName>
 
-          <Button align="center" gap={3} onClick={() => copyToClipboard(source.address)}>
-            {source.image && <img height={10} width={10} src={source.image} />}
-            {source.address && (
-              <SmallText monospace title={source.address} textWrap="nowrap">
-                {getTruncatedAddress(source.address, isMobileScreenSize)}
+          <Button align="center" gap={3} onClick={() => copyToClipboard(address)}>
+            {walletInfo?.logo && <img height={10} width={10} src={walletInfo.logo} />}
+            {address && (
+              <SmallText monospace title={address} textWrap="nowrap">
+                {getTruncatedAddress(address, isMobileScreenSize)}
               </SmallText>
             )}
           </Button>

diff --git 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<number, ChainAddress>;
@@ -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;