Add Evm Warning

skip-mev · Sep 19, 2024 · 1d96604 · 1d96604
1 parent 9b65bd5
commit 1d96604
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx b/packages/widget-v2/src/pages/SwapPage/SwapDetailModal.tsx
@@ -1,4 +1,4 @@
-import { css, styled } from "styled-components";
+import { css, styled, useTheme } from "styled-components";
 import { createModal, ModalProps } from "@/components/Modal";
 import { Column, Row } from "@/components/Layout";
 import { SmallText } from "@/components/Typography";
@@ -14,6 +14,7 @@ import { getClientOperations, OperationType } from "@/utils/clientType";
 import { convertTokenAmountToHumanReadableAmount } from "@/utils/crypto";
 
 export const SwapDetailModal = createModal((modalProps: ModalProps) => {
+  const theme = useTheme();
   const { data: route } = useAtomValue(skipRouteAtom);
   const { data: chains } = useAtomValue(skipChainsAtom);
   const [swapSettings, setSwapSettings] = useAtom(swapSettingsAtom);
@@ -23,6 +24,10 @@ export const SwapDetailModal = createModal((modalProps: ModalProps) => {
 
   const clientOperations = route && getClientOperations(route.operations);
 
+  const usesEvmInOperations = useMemo(() => {
+    return clientOperations?.find(operation => operation.toChainID === "1");
+  }, [clientOperations]);
+
   const axelarTransferOperation = useMemo(() => {
     if (!clientOperations) return;
     return clientOperations?.find((item) => item.type === OperationType.axelarTransfer);
@@ -164,6 +169,15 @@ export const SwapDetailModal = createModal((modalProps: ModalProps) => {
         )
       }
 
+      {
+        usesEvmInOperations && <StyledEvmWarningMessage>
+          <SwapDetailText color={theme.warning.text}>
+            This swap contains at least one EVM chain, so it might take longer.
+            <br /> Read more about common finality times.
+          </SwapDetailText>
+        </StyledEvmWarningMessage>
+      }
+
       <SwapDetailText justify="space-between">
         <SwapPageFooterItems showRouteInfo />
       </SwapDetailText>
@@ -202,3 +216,9 @@ const SwapDetailText = styled(Row).attrs({
 })`
   letter-spacing: 0.26px;
 `;
+
+const StyledEvmWarningMessage = styled.div`
+  padding: 12px;
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.warning.background};
+`;
diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -35,7 +35,6 @@ import { ConnectedWalletModal } from "@/modals/ConnectedWalletModal/ConnectedWal
 import styled, { css } from "styled-components";
 import {
   useInsufficientSourceBalance,
-  useMaxAmountTokenMinusFees,
   useSetMaxAmount,
 } from "./useSetMaxAmount";
 import { useSourceBalance } from "./useSourceBalance";