Removal of Chain Selection Option in Withdrawal Flow on Destination I…

…nput (#1747)
tangle-network · Oct 6, 2023 · 0ae283c · 0ae283c
1 parent 31e0ed6
commit 0ae283c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/apps/bridge-dapp/src/pages/Hubble/Bridge/Withdraw/index.tsx b/apps/bridge-dapp/src/pages/Hubble/Bridge/Withdraw/index.tsx
@@ -266,7 +266,10 @@ const Withdraw = () => {
             onIsFixedAmountChange={() => setCustomAmount(!isCustom)}
           >
             <TransactionInputCard.Header>
-              <TransactionInputCard.ChainSelector onClick={handleChainClick} />
+              <TransactionInputCard.ChainSelector
+                onClick={handleChainClick}
+                disabled
+              />
               <TransactionInputCard.Button
                 Icon={<SettingsFillIcon />}
                 onClick={() => navigate(SELECT_RELAYER_PATH)}

diff --git a/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx b/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx
@@ -92,7 +92,7 @@ TransactionInputCardRoot.displayName = 'TransactionInputCardRoot';
 const TransactionChainSelector = forwardRef<
   React.ElementRef<'button'>,
   TransactionChainSelectorProps
->(({ typedChainId: typedChainIdProps, className, ...props }, ref) => {
+>(({ typedChainId: typedChainIdProps, className, disabled, ...props }, ref) => {
   const context = useContext(TransactionInputCardContext);
 
   const typedChainId = typedChainIdProps ?? context.typedChainId;
@@ -101,6 +101,7 @@ const TransactionChainSelector = forwardRef<
   return (
     <button
       {...props}
+      disabled={disabled}
       ref={ref}
       className={twMerge('flex items-center gap-1 p-2 group', className)}
     >
@@ -117,10 +118,12 @@ const TransactionChainSelector = forwardRef<
         </Typography>
       </p>
 
-      <ChevronDown
-        size="lg"
-        className="rounded-lg group-hover:bg-mono-40 dark:group-hover:bg-mono-160"
-      />
+      {!disabled && (
+        <ChevronDown
+          size="lg"
+          className="rounded-lg group-hover:bg-mono-40 dark:group-hover:bg-mono-160"
+        />
+      )}
     </button>
   );
 });