add locked to defaultRouteConfig to allow preventing editing of src o…

…r dest assets
skip-mev · Mar 3, 2025 · a5d5868 · a5d5868
1 parent 3b30c70
commit a5d5868
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -343,6 +343,7 @@ export const SwapPage = () => {
           usdValue={route?.usdAmountIn}
           onChangeValue={setSourceAssetAmount}
           context="source"
+          disabled={sourceAsset?.locked}
         />
         <SwapPageBridge />
         <SwapPageAssetChainInput
@@ -356,6 +357,7 @@ export const SwapPage = () => {
           badPriceWarning={route?.warning?.type === "BAD_PRICE_WARNING"}
           onChangeValue={setDestinationAssetAmount}
           context="destination"
+          disabled={destinationAsset?.locked}
         />
       </Column>
       {swapButton}

diff --git a/packages/widget/src/pages/SwapPage/SwapPageAssetChainInput.tsx b/packages/widget/src/pages/SwapPage/SwapPageAssetChainInput.tsx
@@ -13,13 +13,14 @@ import {
 import { useGetAssetDetails } from "@/hooks/useGetAssetDetails";
 import { TinyTriangleIcon } from "@/icons/TinyTriangleIcon";
 import { useMemo, useState } from "react";
-import { AssetAtom } from "@/state/swapPage";
+import { AssetAtom, sourceAssetAtom } from "@/state/swapPage";
 import { formatUSD } from "@/utils/intl";
 import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize";
 import { SelectorContext } from "@/modals/AssetAndChainSelectorModal/AssetAndChainSelectorModal";
 import { useGroupedAssetByRecommendedSymbol } from "@/modals/AssetAndChainSelectorModal/useGroupedAssetsByRecommendedSymbol";
 import { GroupedAssetImage } from "@/components/GroupedAssetImage";
 import { transition } from "@/utils/transitions";
+import { useAtomValue } from "jotai";
 
 export type AssetChainInputProps = {
   value?: string;
@@ -32,6 +33,7 @@ export type AssetChainInputProps = {
   isWaitingToUpdateInputValue?: boolean;
   badPriceWarning?: boolean;
   context: SelectorContext;
+  disabled?: boolean;
 };
 
 export const SwapPageAssetChainInput = ({
@@ -45,6 +47,7 @@ export const SwapPageAssetChainInput = ({
   isWaitingToUpdateInputValue,
   badPriceWarning,
   context,
+  disabled,
 }: AssetChainInputProps) => {
   const theme = useTheme();
   const [_showPriceChangePercentage, setShowPriceChangePercentage] = useState(false);
@@ -166,9 +169,10 @@ export const SwapPageAssetChainInput = ({
           placeholder="0"
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
+          disabled={disabled}
           isWaitingToUpdateInputValue={isWaitingToUpdateInputValue}
         />
-        <StyledAssetButton onClick={handleChangeAsset} gap={5}>
+        <StyledAssetButton onClick={handleChangeAsset} disabled={disabled} gap={5}>
           {assetDetails?.assetImage && assetDetails.symbol ? (
             <StyledAssetLabel align="center" justify="center" gap={7}>
               <GroupedAssetImage height={23} width={23} groupedAsset={groupedAsset} />
@@ -227,7 +231,13 @@ export const SwapPageAssetChainInput = ({
           <SmallText>{usdValue && formatUSD(usdValue)}</SmallText>
         )}
         {assetDetails?.chainName ? (
-          <StyledOnChainGhostButton onClick={handleChangeChain} align="center" secondary gap={4}>
+          <StyledOnChainGhostButton
+            disabled={disabled}
+            onClick={handleChangeChain}
+            align="center"
+            secondary
+            gap={4}
+          >
             <SmallText>on {assetDetails?.chainName}</SmallText>
           </StyledOnChainGhostButton>
         ) : (
@@ -243,6 +253,7 @@ const StyledOnChainGhostButton = styled(GhostButton)`
     padding: 0 5px;
     height: 25px;
   }
+  ${({ disabled }) => disabled && "cursor: not-allowed"};
 `;
 
 const StyledAssetChainInputWrapper = styled(Column)`
@@ -267,6 +278,7 @@ const StyledInput = styled.input<{
   font-weight: 400;
   letter-spacing: -0.01em;
   width: 100%;
+  ${({ disabled }) => disabled && "cursor: not-allowed"};
   color: ${(props) => props.theme.primary.text.normal};
   background: ${(props) => props.theme.primary.background.normal};
   height: 50px;
@@ -297,7 +309,7 @@ export const StyledAssetLabel = styled(Row).attrs({
   border-radius: 10px;
   white-space: nowrap;
   position: relative;
-  
+
   color: ${(props) => props.theme.primary.text.normal};
   background: ${(props) => props.theme.secondary.background.normal};
 
@@ -311,11 +323,12 @@ export const StyledAssetLabel = styled(Row).attrs({
     background-color: rgba(255, 255, 255, 0);
     pointer-events: none;
     border-radius: 10px;
-    ${transition(['background-color'], 'fast', 'easeOut')};
+    ${transition(["background-color"], "fast", "easeOut")};
     z-index: 0;
   }
 
-  img, p {
+  img,
+  p {
     z-index: 1;
   }
 `;
@@ -329,14 +342,13 @@ const StyledSelectTokenLabel = styled(StyledAssetLabel)`
 `;
 
 export const StyledAssetButton = styled(Button)`
-
   &:hover {
     ${StyledAssetLabel}::after {
-      background-color: ${({theme}) => theme.secondary.background.hover};
+      background-color: ${({ theme }) => theme.secondary.background.hover};
     }
 
     ${StyledSelectTokenLabel}::after {
       background-color: rgba(255, 255, 255, 0.15);
     }
   }
-`;
+`;
diff --git a/packages/widget/src/state/swapPage.ts b/packages/widget/src/state/swapPage.ts
@@ -9,6 +9,7 @@ import { callbacksAtom } from "./callbacks";
 
 export type AssetAtom = Partial<ClientAsset> & {
   amount?: string;
+  locked?: boolean;
 };
 
 export const {

diff --git a/packages/widget/src/widget/useInitDefaultRoute.ts b/packages/widget/src/widget/useInitDefaultRoute.ts
@@ -15,6 +15,8 @@ export type DefaultRouteConfig = {
   srcAssetDenom?: string;
   destChainId?: string;
   destAssetDenom?: string;
+  srcLocked?: boolean;
+  destLocked?: boolean;
 };
 
 export const useInitDefaultRoute = (defaultRoute?: DefaultRouteConfig) => {
@@ -45,10 +47,12 @@ export const useInitDefaultRoute = (defaultRoute?: DefaultRouteConfig) => {
       const destinationAsset = getClientAsset(destAssetDenom, destChainId);
       setDestinationAsset({
         ...destinationAsset,
+        locked: defaultRoute?.destLocked,
         amount: amountOut?.toString(),
       });
       setSourceAsset({
         ...sourceAsset,
+        locked: defaultRoute?.srcLocked,
         amount: amountIn?.toString(),
       });
       if (amountIn) {