From b92e7d94fcc8bc3edaed55b68395afa73880e40d Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Thu, 26 Oct 2023 13:52:09 +0800
Subject: [PATCH 1/2] fix(ui-ux): add linear gradient to from address on evm

---
 mobile-app/app/components/SummaryTitle.tsx | 79 ++++++++++++++--------
 1 file changed, 49 insertions(+), 30 deletions(-)

diff --git a/mobile-app/app/components/SummaryTitle.tsx b/mobile-app/app/components/SummaryTitle.tsx
index 280cc2b62d..164a6fcb97 100644
--- a/mobile-app/app/components/SummaryTitle.tsx
+++ b/mobile-app/app/components/SummaryTitle.tsx
@@ -99,29 +99,53 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
             >
               {translate("screens/common", "From")}
             </ThemedTextV2>
-            <ThemedViewV2
-              dark={tailwind("bg-mono-dark-v2-200")}
-              light={tailwind("bg-mono-light-v2-200")}
-              style={tailwind(
-                "rounded-full pl-1 pr-2.5 py-1 flex flex-row items-center overflow-hidden ml-2",
-              )}
-            >
-              <RandomAvatar name={props.fromAddress} size={20} />
-              <ThemedTextV2
-                ellipsizeMode="middle"
-                numberOfLines={1}
-                style={[
-                  tailwind("text-sm font-normal-v2 ml-1"),
-                  {
-                    minWidth: 10,
-                    maxWidth: 108,
-                  },
-                ]}
-                testID="wallet_address"
+
+            {props.isEvmToken ? (
+              // EVM from address
+              <AddressEvmTag
+                customStyle="flex flex-row items-center rounded-full pr-2.5 py-1 ml-2 overflow-hidden"
+                testID="from_address_label"
               >
-                {props.fromAddressLabel ?? props.fromAddress}
-              </ThemedTextV2>
-            </ThemedViewV2>
+                <>
+                  <RandomAvatar name={props.fromAddress} size={20} />
+                  <ThemedTextV2
+                    ellipsizeMode="middle"
+                    numberOfLines={1}
+                    style={[
+                      tailwind("text-sm font-normal-v2 ml-1"),
+                      // eslint-disable-next-line react-native/no-inline-styles
+                      { minWidth: 10, maxWidth: 108 },
+                    ]}
+                    testID="wallet_address"
+                  >
+                    {props.fromAddressLabel ?? props.fromAddress}
+                  </ThemedTextV2>
+                </>
+              </AddressEvmTag>
+            ) : (
+              // DVM from address
+              <ThemedViewV2
+                dark={tailwind("bg-mono-dark-v2-200")}
+                light={tailwind("bg-mono-light-v2-200")}
+                style={tailwind(
+                  "rounded-full pl-1 pr-2.5 py-1 flex flex-row items-center overflow-hidden ml-2",
+                )}
+              >
+                <RandomAvatar name={props.fromAddress} size={20} />
+                <ThemedTextV2
+                  ellipsizeMode="middle"
+                  numberOfLines={1}
+                  style={[
+                    tailwind("text-sm font-normal-v2 ml-1"),
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    { minWidth: 10, maxWidth: 108 },
+                  ]}
+                  testID="wallet_address"
+                >
+                  {props.fromAddressLabel ?? props.fromAddress}
+                </ThemedTextV2>
+              </ThemedViewV2>
+            )}
           </View>
         )}
 
@@ -162,10 +186,8 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
                       tailwind(
                         "text-mono-light-v2-00 text-sm font-normal-v2 tracking-[0.24]",
                       ),
-                      {
-                        minWidth: 10,
-                        maxWidth: 108,
-                      },
+                      // eslint-disable-next-line react-native/no-inline-styles
+                      { minWidth: 10, maxWidth: 108 },
                     ]}
                     light={tailwind("text-mono-light-v2-1000")}
                     dark={tailwind("text-mono-dark-v2-1000")}
@@ -198,10 +220,7 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
                   style={[
                     tailwind("text-sm font-normal-v2"),
                     // eslint-disable-next-line react-native/no-inline-styles
-                    {
-                      minWidth: 10,
-                      maxWidth: 108,
-                    },
+                    { minWidth: 10, maxWidth: 108 },
                   ]}
                   light={tailwind("text-mono-light-v2-900")}
                   dark={tailwind("text-mono-dark-v2-900")}

From 70c61ec9de37532b4e47053b33b9dab92f7ad387 Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Wed, 1 Nov 2023 13:29:00 +0800
Subject: [PATCH 2/2] move from address and label into a separate component

---
 mobile-app/app/components/SummaryTitle.tsx | 59 ++++++++++++----------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/mobile-app/app/components/SummaryTitle.tsx b/mobile-app/app/components/SummaryTitle.tsx
index 164a6fcb97..05af981acd 100644
--- a/mobile-app/app/components/SummaryTitle.tsx
+++ b/mobile-app/app/components/SummaryTitle.tsx
@@ -106,21 +106,10 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
                 customStyle="flex flex-row items-center rounded-full pr-2.5 py-1 ml-2 overflow-hidden"
                 testID="from_address_label"
               >
-                <>
-                  <RandomAvatar name={props.fromAddress} size={20} />
-                  <ThemedTextV2
-                    ellipsizeMode="middle"
-                    numberOfLines={1}
-                    style={[
-                      tailwind("text-sm font-normal-v2 ml-1"),
-                      // eslint-disable-next-line react-native/no-inline-styles
-                      { minWidth: 10, maxWidth: 108 },
-                    ]}
-                    testID="wallet_address"
-                  >
-                    {props.fromAddressLabel ?? props.fromAddress}
-                  </ThemedTextV2>
-                </>
+                <FromAddress
+                  fromAddress={props.fromAddress}
+                  fromAddressLabel={props.fromAddressLabel}
+                />
               </AddressEvmTag>
             ) : (
               // DVM from address
@@ -131,19 +120,10 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
                   "rounded-full pl-1 pr-2.5 py-1 flex flex-row items-center overflow-hidden ml-2",
                 )}
               >
-                <RandomAvatar name={props.fromAddress} size={20} />
-                <ThemedTextV2
-                  ellipsizeMode="middle"
-                  numberOfLines={1}
-                  style={[
-                    tailwind("text-sm font-normal-v2 ml-1"),
-                    // eslint-disable-next-line react-native/no-inline-styles
-                    { minWidth: 10, maxWidth: 108 },
-                  ]}
-                  testID="wallet_address"
-                >
-                  {props.fromAddressLabel ?? props.fromAddress}
-                </ThemedTextV2>
+                <FromAddress
+                  fromAddress={props.fromAddress}
+                  fromAddressLabel={props.fromAddressLabel}
+                />
               </ThemedViewV2>
             )}
           </View>
@@ -236,3 +216,26 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
     </>
   );
 }
+
+function FromAddress(props: {
+  fromAddress: string;
+  fromAddressLabel?: string | null;
+}): JSX.Element {
+  return (
+    <>
+      <RandomAvatar name={props.fromAddress} size={20} />
+      <ThemedTextV2
+        ellipsizeMode="middle"
+        numberOfLines={1}
+        style={[
+          tailwind("text-sm font-normal-v2 ml-1"),
+          // eslint-disable-next-line react-native/no-inline-styles
+          { minWidth: 10, maxWidth: 108 },
+        ]}
+        testID="wallet_address"
+      >
+        {props.fromAddressLabel ?? props.fromAddress}
+      </ThemedTextV2>
+    </>
+  );
+}