From 8136ea7ae2967e7696c56d1802bd84dab905ff41 Mon Sep 17 00:00:00 2001
From: tunghp2002 <atsimet@gmail.com>
Date: Wed, 25 Dec 2024 18:43:58 +0700
Subject: [PATCH] [Update] Fix UI for POS -> ETH

---
 .../balance-service/transfer/xcm/posBridge.ts | 10 +++++++++
 .../Popup/Transaction/variants/SendFund.tsx   | 18 ++++++++++++++-
 .../src/components/Field/AddressInputNew.tsx  |  2 ++
 .../Popup/Transaction/variants/SendFund.tsx   | 22 ++++++++++++++++++-
 .../src/components/Field/AddressInput.tsx     |  1 +
 5 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/packages/extension-base/src/services/balance-service/transfer/xcm/posBridge.ts b/packages/extension-base/src/services/balance-service/transfer/xcm/posBridge.ts
index 186b8f996b..4b64c45437 100644
--- a/packages/extension-base/src/services/balance-service/transfer/xcm/posBridge.ts
+++ b/packages/extension-base/src/services/balance-service/transfer/xcm/posBridge.ts
@@ -168,3 +168,13 @@ export function _isPosChainBridge (srcChain: string, destChain: string): boolean
 
   return false;
 }
+
+export function _isPosChainL2Bridge (srcChain: string, destChain: string): boolean {
+  if (srcChain === 'polygon_amoy' && destChain === COMMON_CHAIN_SLUGS.ETHEREUM_SEPOLIA) {
+    return true;
+  } else if (srcChain === 'polygon' && destChain === COMMON_CHAIN_SLUGS.ETHEREUM) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
index 912e427020..b1949c6e61 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
@@ -10,7 +10,7 @@ import { ActionType } from '@subwallet/extension-base/core/types';
 import { getAvailBridgeGatewayContract, getSnowBridgeGatewayContract } from '@subwallet/extension-base/koni/api/contract-handler/utils';
 import { isAvailChainBridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/availBridge';
 import { _isPolygonChainBridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/polygonBridge';
-import { _isPosChainBridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/posBridge';
+import { _isPosChainBridge, _isPosChainL2Bridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/posBridge';
 import { _getAssetDecimals, _getAssetName, _getAssetOriginChain, _getAssetSymbol, _getContractAddressOfToken, _getMultiChainAsset, _getOriginChainOfAsset, _getTokenMinAmount, _isChainEvmCompatible, _isNativeToken, _isTokenTransferredByEvm } from '@subwallet/extension-base/services/chain-service/utils';
 import { TON_CHAINS } from '@subwallet/extension-base/services/earning-service/constants';
 import { SWTransactionResponse } from '@subwallet/extension-base/services/transaction-service/types';
@@ -180,6 +180,14 @@ const Component = ({ className = '', isAllAccount, targetAccountProxy }: Compone
     return !!chainInfo && !!assetInfo && _isChainEvmCompatible(chainInfo) && destChainValue === chainValue && _isNativeToken(assetInfo);
   }, [chainInfoMap, chainValue, destChainValue, assetInfo]);
 
+  const disabledToAddressInput = useMemo(() => {
+    if (_isPosChainL2Bridge(chainValue, destChainValue)) {
+      return true;
+    }
+
+    return false;
+  }, [chainValue, destChainValue]);
+
   const [loading, setLoading] = useState(false);
   const [isTransferAll, setIsTransferAll] = useState(false);
 
@@ -378,6 +386,13 @@ const Component = ({ className = '', isAllAccount, targetAccountProxy }: Compone
       }
 
       if (part.from || part.destChain) {
+        const destChain = part.destChain || '';
+        const chainValue = values.chain || '';
+
+        if (_isPosChainL2Bridge(chainValue, destChain)) {
+          form.setFieldValue('to', values.from);
+        }
+
         setForceUpdateMaxValue(isTransferAll ? {} : undefined);
       }
 
@@ -883,6 +898,7 @@ const Component = ({ className = '', isAllAccount, targetAccountProxy }: Compone
           >
             <AddressInputNew
               chainSlug={destChainValue}
+              disabled={disabledToAddressInput}
               dropdownHeight={isNotShowAccountSelector ? 317 : 257}
               key={addressInputRenderKey}
               label={`${t('To')}:`}
diff --git a/packages/extension-koni-ui/src/components/Field/AddressInputNew.tsx b/packages/extension-koni-ui/src/components/Field/AddressInputNew.tsx
index 2763389210..0d8b6e188f 100644
--- a/packages/extension-koni-ui/src/components/Field/AddressInputNew.tsx
+++ b/packages/extension-koni-ui/src/components/Field/AddressInputNew.tsx
@@ -402,6 +402,7 @@ function Component (props: Props, ref: ForwardedRef<AddressInputRef>): React.Rea
     <>
       <div className={CN(className, '-input-container')}>
         <AutoComplete
+          disabled={disabled}
           dropdownRender={dropdownRender}
           fieldNames={autoCompleteFieldNames}
           listHeight={dropdownListHeight}
@@ -480,6 +481,7 @@ function Component (props: Props, ref: ForwardedRef<AddressInputRef>): React.Rea
             showAddressBook &&
             (
               <Button
+                disabled={disabled}
                 icon={(
                   <Icon
                     phosphorIcon={Book}
diff --git a/packages/extension-web-ui/src/Popup/Transaction/variants/SendFund.tsx b/packages/extension-web-ui/src/Popup/Transaction/variants/SendFund.tsx
index 935e26ebd6..5f63025133 100644
--- a/packages/extension-web-ui/src/Popup/Transaction/variants/SendFund.tsx
+++ b/packages/extension-web-ui/src/Popup/Transaction/variants/SendFund.tsx
@@ -41,7 +41,7 @@ import { isAddress, isEthereumAddress } from '@polkadot/util-crypto';
 
 import { FreeBalance, TransactionContent, TransactionFooter } from '../parts';
 import { _isPolygonChainBridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/polygonBridge';
-import { _isPosChainBridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/posBridge';
+import { _isPosChainBridge, _isPosChainL2Bridge } from '@subwallet/extension-base/services/balance-service/transfer/xcm/posBridge';
 
 type Props = ThemeProps & {
   modalContent?: boolean;
@@ -267,6 +267,14 @@ const _SendFund = ({ className = '', modalContent }: Props): React.ReactElement<
     return !!chainInfo && !!assetInfo && _isChainEvmCompatible(chainInfo) && destChain === chain && _isNativeToken(assetInfo);
   }, [chainInfoMap, chain, destChain, assetInfo]);
 
+  const disabledToAddressInput = useMemo(() => {
+    if (_isPosChainL2Bridge(chain, destChain)) {
+      return true;
+    }
+
+    return false;
+  }, [chain, destChain]);
+
   const [loading, setLoading] = useState(false);
   const [isTransferAll, setIsTransferAll] = useState(false);
   const [, update] = useState({});
@@ -457,6 +465,17 @@ const _SendFund = ({ className = '', modalContent }: Props): React.ReactElement<
           validateField.push('to');
         }
 
+        if (part.from || part.destChain) {
+          const destChain = part.destChain || '';
+          const chainValue = values.chain || '';
+  
+          if (_isPosChainL2Bridge(chainValue, destChain)) {
+            form.setFieldValue('to', values.from);
+          }
+  
+          setForceUpdateMaxValue(isTransferAll ? {} : undefined);
+        }
+
         setIsTransferAll(false);
         setForceUpdateMaxValue(undefined);
       }
@@ -886,6 +905,7 @@ const _SendFund = ({ className = '', modalContent }: Props): React.ReactElement<
             validateTrigger='onBlur'
           >
             <AddressInput
+              disabled={disabledToAddressInput}
               addressPrefix={destChainNetworkPrefix}
               allowDomain={true}
               chain={destChain}
diff --git a/packages/extension-web-ui/src/components/Field/AddressInput.tsx b/packages/extension-web-ui/src/components/Field/AddressInput.tsx
index dc5ced9861..e91520d1b4 100644
--- a/packages/extension-web-ui/src/components/Field/AddressInput.tsx
+++ b/packages/extension-web-ui/src/components/Field/AddressInput.tsx
@@ -278,6 +278,7 @@ function Component (props: Props, ref: ForwardedRef<InputRef>): React.ReactEleme
               showAddressBook &&
               (
                 <Button
+                  disabled={disabled}
                   icon={(
                     <Icon
                       phosphorIcon={Book}