From fd79b4d0aafb0279bfb2d8fc9825e5c131131f62 Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Wed, 4 Oct 2023 15:03:05 +0800
Subject: [PATCH] fix(ui-ux): fix selection of whitelisted address that
 redirects to edit address (#4040)

* fix(ui-ux): fix selection of whitelisted address that redirects to edit address

* chore(test): update snapshot
---
 .../DFIBalanceCard.test.tsx.snap              |  2 +-
 .../Portfolio/screens/AddressBookScreen.tsx   | 39 +++-----
 .../NetworkSelectionScreen.test.tsx.snap      | 95 ++++++++++++++++++-
 .../CreateWalletGuidelines.test.tsx.snap      | 12 +++
 ...nboardingNetworkSelectScreen.test.tsx.snap | 95 ++++++++++++++++++-
 5 files changed, 214 insertions(+), 29 deletions(-)

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/DFIBalanceCard.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/DFIBalanceCard.test.tsx.snap
index c919fa7d50..33b44c5be0 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/DFIBalanceCard.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/DFIBalanceCard.test.tsx.snap
@@ -207,7 +207,7 @@ exports[`DFI Balance Card should match snapshot 1`] = `
             }
             testID="total_dfi_label_name"
           >
-            DeFiChain
+            DeFiChain 
           </Text>
         </View>
       </View>
diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/AddressBookScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/AddressBookScreen.tsx
index c1ec623976..c87d663bd7 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/AddressBookScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/AddressBookScreen.tsx
@@ -305,6 +305,8 @@ export function AddressBookScreen({ route, navigation }: Props): JSX.Element {
                 : addressDetail.address,
             );
           }
+        } else {
+          onDFIAddressClick();
         }
       };
 
@@ -340,9 +342,7 @@ export function AddressBookScreen({ route, navigation }: Props): JSX.Element {
           ]}
           testID={`address_row_${index}_${testIDSuffix}`}
           disabled={isDisabledToSelect}
-          onPress={async () => {
-            onChangeAddress(item);
-          }}
+          onPress={async () => onChangeAddress(item)}
         >
           <View
             style={tailwind("flex flex-row items-center flex-grow", {
@@ -380,14 +380,7 @@ export function AddressBookScreen({ route, navigation }: Props): JSX.Element {
             <View style={tailwind("flex flex-row items-center flex-auto")}>
               <View style={tailwind("flex flex-auto mr-1")}>
                 {item.label !== "" && (
-                  <TouchableOpacity
-                    activeOpacity={0.7}
-                    onPress={onDFIAddressClick}
-                    style={tailwind("flex flex-row items-center")}
-                    disabled={
-                      activeButtonGroup === ButtonGroupTabKey.YourAddress
-                    }
-                  >
+                  <>
                     <ThemedTextV2
                       style={tailwind("font-semibold-v2 text-sm min-w-0")}
                       testID={`address_row_label_${index}_${testIDSuffix}`}
@@ -413,7 +406,7 @@ export function AddressBookScreen({ route, navigation }: Props): JSX.Element {
                           </Text>
                         </LinearGradient>
                       )}
-                  </TouchableOpacity>
+                  </>
                 )}
                 {/* for DFI address */}
                 <YourAddressLink
@@ -423,7 +416,7 @@ export function AddressBookScreen({ route, navigation }: Props): JSX.Element {
                   displayIcon={
                     activeButtonGroup === ButtonGroupTabKey.YourAddress
                   }
-                  onClick={onDFIAddressClick}
+                  onClick={async () => onChangeAddress(item)}
                 />
                 {/* for EVM address */}
                 {activeButtonGroup === ButtonGroupTabKey.YourAddress && (
@@ -442,19 +435,13 @@ export function AddressBookScreen({ route, navigation }: Props): JSX.Element {
               </View>
               {!enableAddressSelect &&
                 activeButtonGroup === ButtonGroupTabKey.Whitelisted && (
-                  <TouchableOpacity
-                    activeOpacity={0.7}
-                    onPress={onDFIAddressClick}
-                    style={tailwind("flex flex-row items-center")}
-                  >
-                    <ThemedIcon
-                      dark={tailwind("text-mono-dark-v2-700")}
-                      light={tailwind("text-mono-light-v2-700")}
-                      iconType="Feather"
-                      name="chevron-right"
-                      size={18}
-                    />
-                  </TouchableOpacity>
+                  <ThemedIcon
+                    dark={tailwind("text-mono-dark-v2-700")}
+                    light={tailwind("text-mono-light-v2-700")}
+                    iconType="Feather"
+                    name="chevron-right"
+                    size={18}
+                  />
                 )}
             </View>
           </View>
diff --git a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/NetworkSelectionScreen.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/NetworkSelectionScreen.test.tsx.snap
index 19e2dc0d68..a0883469c0 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/NetworkSelectionScreen.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/NetworkSelectionScreen.test.tsx.snap
@@ -450,7 +450,9 @@ exports[`onboarding network selection screen should render 1`] = `
       <View
         style={
           [
-            {},
+            {
+              "borderBottomWidth": 0.5,
+            },
             {
               "borderBottomColor": "rgba(204, 204, 204, 1)",
               "borderLeftColor": "rgba(204, 204, 204, 1)",
@@ -538,6 +540,97 @@ exports[`onboarding network selection screen should render 1`] = `
           <Text />
         </View>
       </View>
+      <View
+        style={
+          [
+            {},
+            {
+              "borderBottomColor": "rgba(204, 204, 204, 1)",
+              "borderLeftColor": "rgba(204, 204, 204, 1)",
+              "borderRightColor": "rgba(204, 204, 204, 1)",
+              "borderTopColor": "rgba(204, 204, 204, 1)",
+            },
+          ]
+        }
+        testID="button_network_Changi"
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": false,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "borderBottomColor": "rgba(204, 204, 204, 1)",
+              "borderBottomWidth": 0,
+              "borderLeftColor": "rgba(204, 204, 204, 1)",
+              "borderLeftWidth": 0,
+              "borderRightColor": "rgba(204, 204, 204, 1)",
+              "borderRightWidth": 0,
+              "borderTopColor": "rgba(204, 204, 204, 1)",
+              "borderTopWidth": 0,
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "paddingBottom": 18,
+              "paddingTop": 18,
+            }
+          }
+        >
+          <Text
+            style={
+              [
+                {
+                  "fontFamily": "RegularFont",
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 24,
+                },
+                [
+                  {
+                    "fontFamily": "SoraRegular",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "lineHeight": 20,
+                  },
+                  {
+                    "color": "rgba(18, 18, 18, 1)",
+                  },
+                ],
+              ]
+            }
+            testID=""
+          >
+            Changi
+          </Text>
+          <Text />
+        </View>
+      </View>
     </View>
     <Text
       style={
diff --git a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap
index 12ac8f3b92..72712feaf7 100644
--- a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap
+++ b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap
@@ -370,6 +370,12 @@ exports[`create wallet guidelines v2 should match snapshot 1`] = `
               }
             >
               <RNSVGRect
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
                 height="9"
                 propList={
                   [
@@ -391,6 +397,12 @@ exports[`create wallet guidelines v2 should match snapshot 1`] = `
               />
               <RNSVGPath
                 d="M5.75 6.5C5.75 6.08579 6.08579 5.75 6.5 5.75H9.25V7.25H6.5C6.08579 7.25 5.75 6.91421 5.75 6.5Z"
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
                 propList={
                   [
                     "stroke",
diff --git a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/OnboardingNetworkSelectScreen.test.tsx.snap b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/OnboardingNetworkSelectScreen.test.tsx.snap
index f590f63803..7f8e317ba2 100644
--- a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/OnboardingNetworkSelectScreen.test.tsx.snap
+++ b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/OnboardingNetworkSelectScreen.test.tsx.snap
@@ -444,7 +444,9 @@ exports[`onboarding network selection screen should render 1`] = `
     <View
       style={
         [
-          {},
+          {
+            "borderBottomWidth": 0.5,
+          },
           {
             "borderBottomColor": "rgba(204, 204, 204, 1)",
             "borderLeftColor": "rgba(204, 204, 204, 1)",
@@ -532,6 +534,97 @@ exports[`onboarding network selection screen should render 1`] = `
         <Text />
       </View>
     </View>
+    <View
+      style={
+        [
+          {},
+          {
+            "borderBottomColor": "rgba(204, 204, 204, 1)",
+            "borderLeftColor": "rgba(204, 204, 204, 1)",
+            "borderRightColor": "rgba(204, 204, 204, 1)",
+            "borderTopColor": "rgba(204, 204, 204, 1)",
+          },
+        ]
+      }
+      testID="button_network_Changi"
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "alignItems": "center",
+            "borderBottomColor": "rgba(204, 204, 204, 1)",
+            "borderBottomWidth": 0,
+            "borderLeftColor": "rgba(204, 204, 204, 1)",
+            "borderLeftWidth": 0,
+            "borderRightColor": "rgba(204, 204, 204, 1)",
+            "borderRightWidth": 0,
+            "borderTopColor": "rgba(204, 204, 204, 1)",
+            "borderTopWidth": 0,
+            "display": "flex",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "opacity": 1,
+            "paddingBottom": 18,
+            "paddingTop": 18,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "fontFamily": "RegularFont",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 24,
+              },
+              [
+                {
+                  "fontFamily": "SoraRegular",
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "lineHeight": 20,
+                },
+                {
+                  "color": "rgba(18, 18, 18, 1)",
+                },
+              ],
+            ]
+          }
+          testID=""
+        >
+          Changi
+        </Text>
+        <Text />
+      </View>
+    </View>
   </View>
   <Text
     style={