From 3fbff35fa11b5419e4b9a28e2d4634320ce456fe Mon Sep 17 00:00:00 2001
From: Pierre Gee <pierre@cakedefi.com>
Date: Fri, 1 Dec 2023 12:41:17 +0800
Subject: [PATCH] fix(ui-ux): cfp valid address warning (#4150)

* fix(ui-ux): cfp valid address warning

* fix(ui-ux): restrict evm address in cfp
---
 .../screens/Portfolio/components/AddressRow.tsx    | 14 +++++++++++++-
 .../Portfolio/screens/OCG/CFPDetailScreen.tsx      |  9 +++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressRow.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressRow.tsx
index 4d30594853..0575e904b3 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressRow.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressRow.tsx
@@ -44,6 +44,7 @@ export function AddressRow({
   onAddressType,
   showQrButton = true,
   onlyLocalAddress,
+  restrictedJellyfishAddressType,
   matchedAddress,
   setMatchedAddress,
   setAddressLabel,
@@ -63,6 +64,7 @@ export function AddressRow({
   onAddressType?: (addressType?: AddressType) => void;
   showQrButton?: boolean;
   onlyLocalAddress?: boolean;
+  restrictedJellyfishAddressType?: JellyfishAddressType[];
   matchedAddress?: LocalAddress | WhitelistedAddress | undefined;
   setMatchedAddress?: (address?: LocalAddress | WhitelistedAddress) => void;
   setAddressLabel?: React.Dispatch<React.SetStateAction<string | undefined>>;
@@ -86,14 +88,24 @@ export function AddressRow({
   const [validEvmAddress, setValidEvmAddress] = useState<boolean>(false);
 
   const validLocalAddress = useMemo(() => {
+    if (
+      restrictedJellyfishAddressType?.some(
+        (addressType) => addressType === getAddressType(address, networkName),
+      )
+    ) {
+      return false;
+    }
+
     if (address === "") {
       return true;
     }
+
     if (onlyLocalAddress) {
       return addressType === AddressType.WalletAddress;
     }
+
     return true;
-  }, [onlyLocalAddress, addressType, address]);
+  }, [onlyLocalAddress, addressType, address, networkName]);
 
   const addressObj = jellyfishWalletAddress.find(
     (e: WalletAddressI) => e.dvm === address || e.evm === address,
diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/OCG/CFPDetailScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/OCG/CFPDetailScreen.tsx
index d1d2bf4ca5..fa5df3627d 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/OCG/CFPDetailScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/OCG/CFPDetailScreen.tsx
@@ -20,6 +20,7 @@ import {
 } from "@hooks/wallet/Conversion";
 import { useSelector } from "react-redux";
 import { RootState } from "@store";
+import { LocalAddress, WhitelistedAddress } from "@store/userPreferences";
 import {
   DFITokenSelector,
   DFIUtxoSelector,
@@ -34,6 +35,7 @@ import { AddressRow } from "@screens/AppNavigator/screens/Portfolio/components/A
 import { ButtonGroupTabKey } from "@screens/AppNavigator/screens/Portfolio/screens/AddressBookScreen";
 import { DomainType } from "@contexts/DomainContext";
 import { ConvertDirection } from "@screens/enum";
+import { AddressType as JellyfishAddressType } from "@waveshq/walletkit-core";
 
 export function CFPDetailScreen(): JSX.Element {
   const logger = useLogger();
@@ -47,6 +49,9 @@ export function CFPDetailScreen(): JSX.Element {
   const proposalFee = getCFPFee(BigNumber(amount ?? 0));
   const navigation = useNavigation<NavigationProp<PortfolioParamList>>();
   const [isUrlValid, setUrlValid] = useState<boolean>(false);
+  const [matchedAddress, setMatchedAddress] = useState<
+    LocalAddress | WhitelistedAddress
+  >();
 
   const DFIToken = useSelector((state: RootState) =>
     DFITokenSelector(state.wallet),
@@ -268,7 +273,11 @@ export function CFPDetailScreen(): JSX.Element {
                 await trigger("address");
               }}
               address={address}
+              onMatchedAddress={setMatchedAddress}
+              setMatchedAddress={setMatchedAddress}
+              matchedAddress={matchedAddress}
               onlyLocalAddress
+              restrictedJellyfishAddressType={[JellyfishAddressType.ETH]}
             />
           </View>
         )}