From 5c36e8bcd80de8ab7e4c9cdc4e8f27eab7995be0 Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Thu, 11 Jan 2024 17:59:43 -0800
Subject: [PATCH 1/3] Remove chevron from HomeCardUi4 It's already obvious
 they're tappable and the UI looks busy with sharp contrasting chevrons

---
 src/components/ui4/HomeCardUi4.tsx | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/components/ui4/HomeCardUi4.tsx b/src/components/ui4/HomeCardUi4.tsx
index ebad0cea57a..7416720e24e 100644
--- a/src/components/ui4/HomeCardUi4.tsx
+++ b/src/components/ui4/HomeCardUi4.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { View } from 'react-native'
 import { LinearGradientProps } from 'react-native-linear-gradient'
-import IonIcon from 'react-native-vector-icons/Ionicons'
 
 import { useHandler } from '../../hooks/useHandler'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
@@ -32,10 +31,7 @@ export const HomeCardUi4 = (props: Props) => {
   return (
     <CardUi4 gradientBackground={gradientBackground} nodeBackground={nodeBackground} onPress={handlePress} fill>
       <View style={styles.verticalSplitContainer}>
-        <View style={styles.titleContainer}>
-          <EdgeText style={theme.cardTextShadow}>{title}</EdgeText>
-          <IonIcon size={theme.rem(1.25)} style={[styles.chevronIcon, theme.cardTextShadow]} color={theme.iconTappable} name="chevron-forward-outline" />
-        </View>
+        <EdgeText style={theme.cardTextShadow}>{title}</EdgeText>
         <EdgeText style={[styles.footerText, theme.cardTextShadow]} numberOfLines={3} disableFontScaling>
           {footer}
         </EdgeText>
@@ -45,11 +41,6 @@ export const HomeCardUi4 = (props: Props) => {
 }
 
 const getStyles = cacheStyles((theme: Theme) => ({
-  titleContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'stretch'
-  },
   footerText: {
     fontSize: theme.rem(0.75)
   },
@@ -57,11 +48,5 @@ const getStyles = cacheStyles((theme: Theme) => ({
     flex: 1, // Make sure the card fills the space
     justifyContent: 'space-between', // Aligns title to the top, footer to the bottom
     margin: theme.rem(0.5)
-  },
-
-  // Adjust for bounding box
-  chevronIcon: {
-    alignSelf: 'center',
-    marginRight: -6
   }
 }))

From 9b907ed4a0cee97327a435d5a214cfc256f1ab6f Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Fri, 12 Jan 2024 15:38:56 -0800
Subject: [PATCH 2/3] Update exchange scene wallet text to 1rem Unable to
 utilize row or card's built-in icon and text handling for some reason in this
 case. Quick fix instead.

---
 src/components/scenes/CryptoExchangeScene.tsx                   | 2 +-
 .../themed/CryptoExchangeFlipInputWrapperComponent.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/scenes/CryptoExchangeScene.tsx b/src/components/scenes/CryptoExchangeScene.tsx
index 6c6617216e7..67a9873fe46 100644
--- a/src/components/scenes/CryptoExchangeScene.tsx
+++ b/src/components/scenes/CryptoExchangeScene.tsx
@@ -426,7 +426,7 @@ export const CryptoExchangeScene = (props: OwnProps) => {
   })
 
   return (
-    <SceneWrapper hasTabs hasNotifications>
+    <SceneWrapper hasTabs hasHeader hasNotifications>
       {({ insetStyles }) => (
         <CryptoExchangeComponent
           route={route}
diff --git a/src/components/themed/CryptoExchangeFlipInputWrapperComponent.tsx b/src/components/themed/CryptoExchangeFlipInputWrapperComponent.tsx
index 57743fa4844..9c76df55112 100644
--- a/src/components/themed/CryptoExchangeFlipInputWrapperComponent.tsx
+++ b/src/components/themed/CryptoExchangeFlipInputWrapperComponent.tsx
@@ -160,7 +160,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
   },
   text: {
     fontFamily: theme.fontFaceMedium,
-    fontSize: theme.rem(1.25),
+    fontSize: theme.rem(1),
     marginLeft: theme.rem(0.5)
   },
   topRow: {

From c010e56a98deebaec77fddf29bbcf315bab0385f Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Thu, 11 Jan 2024 18:39:08 -0800
Subject: [PATCH 3/3] Wrap existing TransactionListTop in a card

---
 .../TransactionListTop.test.tsx.snap          | 1518 ++++++++---------
 src/components/themed/TransactionListTop.tsx  |   98 +-
 2 files changed, 722 insertions(+), 894 deletions(-)

diff --git a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
index 77d9dcfa9cc..677dbbd1179 100644
--- a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
@@ -4,356 +4,238 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
 [
   <View
     style={
-      {
-        "flex": 1,
-        "marginBottom": 11,
-        "paddingBottom": 22,
-        "paddingHorizontal": 22,
-      }
+      [
+        {
+          "alignSelf": "stretch",
+          "borderRadius": 16,
+        },
+        {
+          "marginBottom": 22,
+          "marginLeft": 11,
+          "marginRight": 11,
+          "marginTop": 11,
+        },
+        {
+          "paddingBottom": 22,
+          "paddingLeft": 22,
+          "paddingRight": 22,
+          "paddingTop": 22,
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
         {
-          "marginTop": 34,
+          "backgroundColor": "rgba(255, 255, 255, .1)",
+          "borderRadius": 16,
+          "bottom": 0,
+          "left": 0,
+          "overflow": "hidden",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginBottom": 11,
         }
       }
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           {
+            "alignItems": "center",
             "flexDirection": "row",
-            "justifyContent": "space-between",
+            "flexShrink": 1,
+            "marginRight": 11,
+            "opacity": 1,
           }
         }
       >
         <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={false}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "flexShrink": 1,
-              "marginRight": 11,
-              "opacity": 1,
+              "height": 34,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "width": 34,
             }
           }
         >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight="50"
+            bbWidth="50"
+            focusable={false}
+            height={50}
+            meetOrSlice={0}
+            minX={-8}
+            minY={-8}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "left": -8,
+                  "position": "absolute",
+                  "top": -8,
+                  "transform": [
+                    {
+                      "rotateZ": "-90deg",
+                    },
+                  ],
+                },
+                {
+                  "flex": 0,
+                  "height": 50,
+                  "width": 50,
+                },
+              ]
+            }
+            vbHeight={50}
+            vbWidth={50}
+            width={50}
+          >
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGCircle
+                cx="17"
+                cy="17"
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                opacity={0}
+                propList={
+                  [
+                    "stroke",
+                    "strokeWidth",
+                    "strokeDasharray",
+                    "strokeLinecap",
+                  ]
+                }
+                r="19"
+                stroke={
+                  {
+                    "payload": 4278251938,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    "119.38052083641213",
+                    "119.38052083641213",
+                  ]
+                }
+                strokeLinecap={1}
+                strokeWidth="4"
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
           <View
             style={
               {
+                "backgroundColor": "#000000",
+                "borderRadius": 17,
+                "elevation": 0,
                 "height": 34,
-                "marginBottom": 0,
-                "marginLeft": 0,
-                "marginRight": 0,
-                "marginTop": 0,
+                "shadowColor": "#000000",
+                "shadowOffset": {
+                  "height": 3,
+                  "width": -3,
+                },
+                "shadowOpacity": 0.6,
+                "shadowRadius": 4,
                 "width": 34,
               }
             }
           >
-            <RNSVGSvgView
-              align="xMidYMid"
-              bbHeight="50"
-              bbWidth="50"
-              focusable={false}
-              height={50}
-              meetOrSlice={0}
-              minX={-8}
-              minY={-8}
+            <View
               style={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "borderWidth": 0,
+                    "overflow": "hidden",
                   },
                   {
-                    "left": -8,
+                    "bottom": 0,
+                    "left": 0,
                     "position": "absolute",
-                    "top": -8,
-                    "transform": [
-                      {
-                        "rotateZ": "-90deg",
-                      },
-                    ],
-                  },
-                  {
-                    "flex": 0,
-                    "height": 50,
-                    "width": 50,
+                    "right": 0,
+                    "top": 0,
                   },
                 ]
               }
-              vbHeight={50}
-              vbWidth={50}
-              width={50}
             >
-              <RNSVGGroup
-                fill={
+              <FastImageView
+                resizeMode="cover"
+                source={
                   {
-                    "payload": 4278190080,
-                    "type": 0,
+                    "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
                   }
                 }
-              >
-                <RNSVGCircle
-                  cx="17"
-                  cy="17"
-                  fill={
-                    {
-                      "payload": 4278190080,
-                      "type": 0,
-                    }
-                  }
-                  opacity={0}
-                  propList={
-                    [
-                      "stroke",
-                      "strokeWidth",
-                      "strokeDasharray",
-                      "strokeLinecap",
-                    ]
-                  }
-                  r="19"
-                  stroke={
-                    {
-                      "payload": 4278251938,
-                      "type": 0,
-                    }
-                  }
-                  strokeDasharray={
-                    [
-                      "119.38052083641213",
-                      "119.38052083641213",
-                    ]
-                  }
-                  strokeLinecap={1}
-                  strokeWidth="4"
-                />
-              </RNSVGGroup>
-            </RNSVGSvgView>
-            <View
-              style={
-                {
-                  "backgroundColor": "#000000",
-                  "borderRadius": 17,
-                  "elevation": 0,
-                  "height": 34,
-                  "shadowColor": "#000000",
-                  "shadowOffset": {
-                    "height": 3,
-                    "width": -3,
-                  },
-                  "shadowOpacity": 0.6,
-                  "shadowRadius": 4,
-                  "width": 34,
-                }
-              }
-            >
-              <View
                 style={
-                  [
-                    {
-                      "overflow": "hidden",
-                    },
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    },
-                  ]
-                }
-              >
-                <FastImageView
-                  resizeMode="cover"
-                  source={
-                    {
-                      "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
-                    }
-                  }
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
-                />
-              </View>
+                }
+              />
             </View>
           </View>
-          <Text
-            accessible={true}
-            adjustsFontSizeToFit={true}
-            minimumFontScale={0.65}
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                  "includeFontPadding": false,
-                },
-                {
-                  "flexShrink": 1,
-                  "fontSize": 28,
-                  "marginLeft": 11,
-                  "marginRight": 6,
-                },
-                null,
-              ]
-            }
-          >
-            wallet name
-          </Text>
-          <Text
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#00f1a2",
-                  "fontSize": 34,
-                },
-                undefined,
-                {
-                  "fontFamily": "Ionicons",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </View>
-        <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={
-            {
-              "alignSelf": "center",
-              "opacity": 1,
-            }
-          }
-          testID="gearIcon"
-        >
-          <Text
-            accessibilityHint="Wallet settings"
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#00f1a2",
-                  "fontSize": 34,
-                },
-                undefined,
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
         </View>
-      </View>
-      <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={false}
-        collapsable={false}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          {
-            "opacity": 1,
-          }
-        }
-      >
         <Text
           accessible={true}
           adjustsFontSizeToFit={true}
-          minimumFontScale={0.3}
+          minimumFontScale={0.65}
           numberOfLines={1}
           style={
             [
@@ -364,43 +246,126 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
                 "includeFontPadding": false,
               },
               {
-                "fontFamily": "Quicksand-Medium",
-                "fontSize": 45,
+                "flexShrink": 1,
+                "fontSize": 28,
+                "marginLeft": 11,
+                "marginRight": 6,
               },
               null,
             ]
           }
         >
-          0.00123123 BTC
+          wallet name
         </Text>
         <Text
-          accessible={true}
-          adjustsFontSizeToFit={true}
-          minimumFontScale={0.65}
-          numberOfLines={1}
+          allowFontScaling={false}
           style={
             [
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Quicksand-Regular",
-                "fontSize": 22,
-                "includeFontPadding": false,
+                "color": "#00f1a2",
+                "fontSize": 34,
               },
+              undefined,
               {
-                "fontSize": 28,
+                "fontFamily": "Ionicons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
               },
-              null,
+              {},
             ]
           }
         >
-          $0.00 USD
+          
         </Text>
       </View>
     </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={false}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.3}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontFamily": "Quicksand-Medium",
+              "fontSize": 45,
+            },
+            null,
+          ]
+        }
+      >
+        0.00123123 BTC
+      </Text>
+      <Text
+        accessible={true}
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontSize": 28,
+            },
+            null,
+          ]
+        }
+      >
+        $0.00 USD
+      </Text>
+    </View>
     <View
       style={
         {
+          "flex": 1,
           "flexDirection": "row",
+          "justifyContent": "space-evenly",
+          "marginHorizontal": -22,
           "marginTop": 22,
         }
       }
@@ -438,32 +403,11 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
             "alignItems": "center",
             "flexDirection": "row",
             "flexShrink": 1,
-            "justifyContent": "flex-start",
+            "justifyContent": "center",
             "opacity": 1,
-            "paddingRight": 34,
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#00f1a2",
-                "fontSize": 22,
-              },
-              undefined,
-              {
-                "fontFamily": "anticon",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
         <Text
           accessible={true}
           adjustsFontSizeToFit={true}
@@ -481,7 +425,6 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
                 "color": "#00f1a2",
                 "fontFamily": "Quicksand-Medium",
                 "fontSize": 22,
-                "marginLeft": 6,
               },
               null,
             ]
@@ -523,32 +466,11 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
             "alignItems": "center",
             "flexDirection": "row",
             "flexShrink": 1,
-            "justifyContent": "flex-start",
+            "justifyContent": "center",
             "opacity": 1,
-            "paddingRight": 34,
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#00f1a2",
-                "fontSize": 22,
-              },
-              undefined,
-              {
-                "fontFamily": "anticon",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
         <Text
           accessible={true}
           adjustsFontSizeToFit={true}
@@ -566,7 +488,6 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
                 "color": "#00f1a2",
                 "fontFamily": "Quicksand-Medium",
                 "fontSize": 22,
-                "marginLeft": 6,
               },
               null,
             ]
@@ -587,134 +508,134 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
         }
       />
     </View>
+  </View>,
+  <View
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "borderRadius": 16,
+        },
+        {
+          "marginBottom": -11,
+          "marginLeft": 11,
+          "marginRight": 11,
+          "marginTop": 22,
+        },
+        {
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 0,
+        },
+        undefined,
+      ]
+    }
+  >
     <View
       style={
-        [
-          {
-            "alignSelf": "stretch",
-            "borderRadius": 16,
-          },
-          {
-            "marginBottom": -11,
-            "marginLeft": 11,
-            "marginRight": 11,
-            "marginTop": 22,
-          },
-          {
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
-          },
-          undefined,
-        ]
+        {
+          "backgroundColor": "rgba(255, 255, 255, .1)",
+          "borderRadius": 16,
+          "bottom": 0,
+          "left": 0,
+          "overflow": "hidden",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
       }
-    >
-      <View
-        style={
-          {
-            "backgroundColor": "rgba(255, 255, 255, .1)",
-            "borderRadius": 16,
-            "bottom": 0,
-            "left": 0,
-            "overflow": "hidden",
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+    />
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
         }
-      />
-      <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": 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",
+          "flexDirection": "row",
+          "opacity": 1,
+          "padding": 11,
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      }
+    >
+      <View
         style={
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "opacity": 1,
-            "padding": 11,
-          }
+          [
+            {
+              "overflow": "hidden",
+            },
+            {
+              "height": 45,
+              "margin": 11,
+              "width": 45,
+            },
+          ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "overflow": "hidden",
-              },
-              {
-                "height": 45,
-                "margin": 11,
-                "width": 45,
-              },
-            ]
-          }
-        >
-          <FastImageView
-            resizeMode="contain"
-            source={
-              {
-                "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
-              }
-            }
-            style={
-              {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+        <FastImageView
+          resizeMode="contain"
+          source={
+            {
+              "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
             }
-          />
-        </View>
-        <Text
-          adjustsFontSizeToFit={true}
-          minimumFontScale={0.65}
-          numberOfLines={0}
+          }
           style={
-            [
-              {
-                "color": "#FFFFFF",
-                "fontFamily": "Quicksand-Regular",
-                "fontSize": 22,
-                "includeFontPadding": false,
-              },
-              {
-                "marginLeft": 11,
-              },
-              null,
-            ]
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
           }
-        >
-          Buy Prepaid Visa® Cards
-        </Text>
+        />
       </View>
+      <Text
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={0}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "marginLeft": 11,
+            },
+            null,
+          ]
+        }
+      >
+        Buy Prepaid Visa® Cards
+      </Text>
     </View>
   </View>,
   <View
@@ -803,356 +724,238 @@ exports[`TransactionListTop should render 1`] = `
 [
   <View
     style={
-      {
-        "flex": 1,
-        "marginBottom": 11,
-        "paddingBottom": 22,
-        "paddingHorizontal": 22,
-      }
+      [
+        {
+          "alignSelf": "stretch",
+          "borderRadius": 16,
+        },
+        {
+          "marginBottom": 22,
+          "marginLeft": 11,
+          "marginRight": 11,
+          "marginTop": 11,
+        },
+        {
+          "paddingBottom": 22,
+          "paddingLeft": 22,
+          "paddingRight": 22,
+          "paddingTop": 22,
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
         {
-          "marginTop": 34,
+          "backgroundColor": "rgba(255, 255, 255, .1)",
+          "borderRadius": 16,
+          "bottom": 0,
+          "left": 0,
+          "overflow": "hidden",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginBottom": 11,
+        }
+      }
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
         }
-      }
-    >
-      <View
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={false}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           {
+            "alignItems": "center",
             "flexDirection": "row",
-            "justifyContent": "space-between",
+            "flexShrink": 1,
+            "marginRight": 11,
+            "opacity": 1,
           }
         }
       >
         <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={false}
-          collapsable={false}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "flexShrink": 1,
-              "marginRight": 11,
-              "opacity": 1,
+              "height": 34,
+              "marginBottom": 0,
+              "marginLeft": 0,
+              "marginRight": 0,
+              "marginTop": 0,
+              "width": 34,
             }
           }
         >
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight="50"
+            bbWidth="50"
+            focusable={false}
+            height={50}
+            meetOrSlice={0}
+            minX={-8}
+            minY={-8}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "left": -8,
+                  "position": "absolute",
+                  "top": -8,
+                  "transform": [
+                    {
+                      "rotateZ": "-90deg",
+                    },
+                  ],
+                },
+                {
+                  "flex": 0,
+                  "height": 50,
+                  "width": 50,
+                },
+              ]
+            }
+            vbHeight={50}
+            vbWidth={50}
+            width={50}
+          >
+            <RNSVGGroup
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+            >
+              <RNSVGCircle
+                cx="17"
+                cy="17"
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                opacity={0}
+                propList={
+                  [
+                    "stroke",
+                    "strokeWidth",
+                    "strokeDasharray",
+                    "strokeLinecap",
+                  ]
+                }
+                r="19"
+                stroke={
+                  {
+                    "payload": 4278251938,
+                    "type": 0,
+                  }
+                }
+                strokeDasharray={
+                  [
+                    "119.38052083641213",
+                    "119.38052083641213",
+                  ]
+                }
+                strokeLinecap={1}
+                strokeWidth="4"
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
           <View
             style={
               {
+                "backgroundColor": "#000000",
+                "borderRadius": 17,
+                "elevation": 0,
                 "height": 34,
-                "marginBottom": 0,
-                "marginLeft": 0,
-                "marginRight": 0,
-                "marginTop": 0,
+                "shadowColor": "#000000",
+                "shadowOffset": {
+                  "height": 3,
+                  "width": -3,
+                },
+                "shadowOpacity": 0.6,
+                "shadowRadius": 4,
                 "width": 34,
               }
             }
           >
-            <RNSVGSvgView
-              align="xMidYMid"
-              bbHeight="50"
-              bbWidth="50"
-              focusable={false}
-              height={50}
-              meetOrSlice={0}
-              minX={-8}
-              minY={-8}
+            <View
               style={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "borderWidth": 0,
+                    "overflow": "hidden",
                   },
                   {
-                    "left": -8,
+                    "bottom": 0,
+                    "left": 0,
                     "position": "absolute",
-                    "top": -8,
-                    "transform": [
-                      {
-                        "rotateZ": "-90deg",
-                      },
-                    ],
-                  },
-                  {
-                    "flex": 0,
-                    "height": 50,
-                    "width": 50,
+                    "right": 0,
+                    "top": 0,
                   },
                 ]
               }
-              vbHeight={50}
-              vbWidth={50}
-              width={50}
             >
-              <RNSVGGroup
-                fill={
+              <FastImageView
+                resizeMode="cover"
+                source={
                   {
-                    "payload": 4278190080,
-                    "type": 0,
-                  }
-                }
-              >
-                <RNSVGCircle
-                  cx="17"
-                  cy="17"
-                  fill={
-                    {
-                      "payload": 4278190080,
-                      "type": 0,
-                    }
-                  }
-                  opacity={0}
-                  propList={
-                    [
-                      "stroke",
-                      "strokeWidth",
-                      "strokeDasharray",
-                      "strokeLinecap",
-                    ]
-                  }
-                  r="19"
-                  stroke={
-                    {
-                      "payload": 4278251938,
-                      "type": 0,
-                    }
-                  }
-                  strokeDasharray={
-                    [
-                      "119.38052083641213",
-                      "119.38052083641213",
-                    ]
+                    "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
                   }
-                  strokeLinecap={1}
-                  strokeWidth="4"
-                />
-              </RNSVGGroup>
-            </RNSVGSvgView>
-            <View
-              style={
-                {
-                  "backgroundColor": "#000000",
-                  "borderRadius": 17,
-                  "elevation": 0,
-                  "height": 34,
-                  "shadowColor": "#000000",
-                  "shadowOffset": {
-                    "height": 3,
-                    "width": -3,
-                  },
-                  "shadowOpacity": 0.6,
-                  "shadowRadius": 4,
-                  "width": 34,
                 }
-              }
-            >
-              <View
                 style={
-                  [
-                    {
-                      "overflow": "hidden",
-                    },
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    },
-                  ]
-                }
-              >
-                <FastImageView
-                  resizeMode="cover"
-                  source={
-                    {
-                      "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
-                    }
-                  }
-                  style={
-                    {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
+                  {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
-                />
-              </View>
+                }
+              />
             </View>
           </View>
-          <Text
-            accessible={true}
-            adjustsFontSizeToFit={true}
-            minimumFontScale={0.65}
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Quicksand-Regular",
-                  "fontSize": 22,
-                  "includeFontPadding": false,
-                },
-                {
-                  "flexShrink": 1,
-                  "fontSize": 28,
-                  "marginLeft": 11,
-                  "marginRight": 6,
-                },
-                null,
-              ]
-            }
-          >
-            wallet name
-          </Text>
-          <Text
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#00f1a2",
-                  "fontSize": 34,
-                },
-                undefined,
-                {
-                  "fontFamily": "Ionicons",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </View>
-        <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={
-            {
-              "alignSelf": "center",
-              "opacity": 1,
-            }
-          }
-          testID="gearIcon"
-        >
-          <Text
-            accessibilityHint="Wallet settings"
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#00f1a2",
-                  "fontSize": 34,
-                },
-                undefined,
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
         </View>
-      </View>
-      <View
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={false}
-        collapsable={false}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          {
-            "opacity": 1,
-          }
-        }
-      >
         <Text
           accessible={true}
           adjustsFontSizeToFit={true}
-          minimumFontScale={0.3}
+          minimumFontScale={0.65}
           numberOfLines={1}
           style={
             [
@@ -1163,43 +966,126 @@ exports[`TransactionListTop should render 1`] = `
                 "includeFontPadding": false,
               },
               {
-                "fontFamily": "Quicksand-Medium",
-                "fontSize": 45,
+                "flexShrink": 1,
+                "fontSize": 28,
+                "marginLeft": 11,
+                "marginRight": 6,
               },
               null,
             ]
           }
         >
-          0.00123123 BTC
+          wallet name
         </Text>
         <Text
-          accessible={true}
-          adjustsFontSizeToFit={true}
-          minimumFontScale={0.65}
-          numberOfLines={1}
+          allowFontScaling={false}
           style={
             [
               {
-                "color": "#FFFFFF",
-                "fontFamily": "Quicksand-Regular",
-                "fontSize": 22,
-                "includeFontPadding": false,
+                "color": "#00f1a2",
+                "fontSize": 34,
               },
+              undefined,
               {
-                "fontSize": 28,
+                "fontFamily": "Ionicons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
               },
-              null,
+              {},
             ]
           }
         >
-          $0.00 USD
+          
         </Text>
       </View>
     </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={false}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.3}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontFamily": "Quicksand-Medium",
+              "fontSize": 45,
+            },
+            null,
+          ]
+        }
+      >
+        0.00123123 BTC
+      </Text>
+      <Text
+        accessible={true}
+        adjustsFontSizeToFit={true}
+        minimumFontScale={0.65}
+        numberOfLines={1}
+        style={
+          [
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "Quicksand-Regular",
+              "fontSize": 22,
+              "includeFontPadding": false,
+            },
+            {
+              "fontSize": 28,
+            },
+            null,
+          ]
+        }
+      >
+        $0.00 USD
+      </Text>
+    </View>
     <View
       style={
         {
+          "flex": 1,
           "flexDirection": "row",
+          "justifyContent": "space-evenly",
+          "marginHorizontal": -22,
           "marginTop": 22,
         }
       }
@@ -1237,32 +1123,11 @@ exports[`TransactionListTop should render 1`] = `
             "alignItems": "center",
             "flexDirection": "row",
             "flexShrink": 1,
-            "justifyContent": "flex-start",
+            "justifyContent": "center",
             "opacity": 1,
-            "paddingRight": 34,
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#00f1a2",
-                "fontSize": 22,
-              },
-              undefined,
-              {
-                "fontFamily": "anticon",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
         <Text
           accessible={true}
           adjustsFontSizeToFit={true}
@@ -1280,7 +1145,6 @@ exports[`TransactionListTop should render 1`] = `
                 "color": "#00f1a2",
                 "fontFamily": "Quicksand-Medium",
                 "fontSize": 22,
-                "marginLeft": 6,
               },
               null,
             ]
@@ -1322,32 +1186,11 @@ exports[`TransactionListTop should render 1`] = `
             "alignItems": "center",
             "flexDirection": "row",
             "flexShrink": 1,
-            "justifyContent": "flex-start",
+            "justifyContent": "center",
             "opacity": 1,
-            "paddingRight": 34,
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#00f1a2",
-                "fontSize": 22,
-              },
-              undefined,
-              {
-                "fontFamily": "anticon",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
         <Text
           accessible={true}
           adjustsFontSizeToFit={true}
@@ -1365,7 +1208,6 @@ exports[`TransactionListTop should render 1`] = `
                 "color": "#00f1a2",
                 "fontFamily": "Quicksand-Medium",
                 "fontSize": 22,
-                "marginLeft": 6,
               },
               null,
             ]
diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
index 106295cf1e3..c14d87c9cef 100644
--- a/src/components/themed/TransactionListTop.tsx
+++ b/src/components/themed/TransactionListTop.tsx
@@ -3,12 +3,10 @@ import { EdgeAccount, EdgeBalanceMap, EdgeCurrencyWallet, EdgeDenomination, Edge
 import * as React from 'react'
 import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
 import { AirshipBridge } from 'react-native-airship'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import { sprintf } from 'sprintf-js'
 
 import { toggleAccountBalanceVisibility } from '../../actions/LocalSettingsActions'
-import { Fontello } from '../../assets/vector'
 import { getSymbolFromCurrency, SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
 import { ENV } from '../../env'
 import { useHandler } from '../../hooks/useHandler'
@@ -32,6 +30,7 @@ import { WalletListMenuModal } from '../modals/WalletListMenuModal'
 import { WalletListModal, WalletListResult } from '../modals/WalletListModal'
 import { Airship, showError } from '../services/AirshipInstance'
 import { cacheStyles, Theme, ThemeProps, useTheme } from '../services/ThemeContext'
+import { CardUi4 } from '../ui4/CardUi4'
 import { CryptoIconUi4 } from '../ui4/CryptoIconUi4'
 import { EdgeText } from './EdgeText'
 import { SceneHeader } from './SceneHeader'
@@ -199,7 +198,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
     const fiatBalanceFormat = formatNumber(fiatBalance && gt(fiatBalance, '0.000001') ? fiatBalance : 0, { toFixed: 2 })
 
     return (
-      <View style={styles.balanceBoxContainer}>
+      <>
         <View style={styles.balanceBoxWalletNameCurrencyContainer}>
           <TouchableOpacity accessible={false} style={styles.balanceBoxWalletNameContainer} onPress={this.handleOpenWalletListModal}>
             <CryptoIconUi4 sizeRem={1.5} tokenId={tokenId} walletId={wallet.id} onIconColor={this.props.onIconColor} />
@@ -208,9 +207,6 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
             </EdgeText>
             <Ionicons name="chevron-forward" size={theme.rem(1.5)} color={theme.iconTappable} />
           </TouchableOpacity>
-          <TouchableOpacity testID="gearIcon" onPress={this.handleMenu} style={styles.settingsIcon}>
-            <Fontello accessibilityHint={lstrings.wallet_settings_label} color={theme.iconTappable} name="control-panel-settings" size={theme.rem(1.5)} />
-          </TouchableOpacity>
         </View>
         <TouchableOpacity accessible={false} onPress={this.props.toggleBalanceVisibility}>
           {isAccountBalanceVisible ? (
@@ -228,7 +224,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
             </EdgeText>
           )}
         </TouchableOpacity>
-      </View>
+      </>
     )
   }
 
@@ -375,40 +371,35 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
 
     return (
       <>
-        <View style={styles.container}>
-          {searching ? null : (
-            <>
-              {this.renderBalanceBox()}
-              {isStakingAvailable && this.renderStakedBalance()}
-              <View style={styles.buttonsContainer}>
-                <TouchableOpacity accessible={false} onPress={this.handleRequest} style={styles.buttons}>
-                  <AntDesignIcon name="arrowdown" size={theme.rem(1)} color={theme.iconTappable} />
-                  <EdgeText accessible style={styles.buttonsText}>
-                    {lstrings.fragment_request_subtitle}
-                  </EdgeText>
-                </TouchableOpacity>
-                <TouchableOpacity accessible={false} onPress={this.handleSend} style={styles.buttons}>
-                  <AntDesignIcon name="arrowup" size={theme.rem(1)} color={theme.iconTappable} />
-                  <EdgeText accessible style={styles.buttonsText}>
-                    {lstrings.fragment_send_subtitle}
-                  </EdgeText>
-                </TouchableOpacity>
-                {!isStakePoliciesLoaded ? (
-                  <ActivityIndicator color={theme.textLink} style={styles.stakingButton} />
-                ) : (
-                  isStakingAvailable && (
-                    <TouchableOpacity onPress={this.handleStakePress} style={styles.buttons}>
-                      <AntDesignIcon name="barschart" size={theme.rem(1)} color={theme.iconTappable} />
-                      <EdgeText style={styles.buttonsText}>{lstrings.stake_earn_button_label}</EdgeText>
-                      {bestApy != null ? <EdgeText style={styles.apyText}>{bestApy}</EdgeText> : null}
-                    </TouchableOpacity>
-                  )
-                )}
-              </View>
-            </>
-          )}
-          {isEmpty || searching ? null : <VisaCardCard wallet={wallet} tokenId={tokenId} navigation={this.props.navigation} />}
-        </View>
+        {searching ? null : (
+          <CardUi4 paddingRem={1} marginRem={[0.5, 0.5, 1]}>
+            {this.renderBalanceBox()}
+            {isStakingAvailable && this.renderStakedBalance()}
+            <View style={styles.buttonsContainer}>
+              <TouchableOpacity accessible={false} onPress={this.handleRequest} style={styles.buttons}>
+                <EdgeText accessible style={styles.buttonsText}>
+                  {lstrings.fragment_request_subtitle}
+                </EdgeText>
+              </TouchableOpacity>
+              <TouchableOpacity accessible={false} onPress={this.handleSend} style={styles.buttons}>
+                <EdgeText accessible style={styles.buttonsText}>
+                  {lstrings.fragment_send_subtitle}
+                </EdgeText>
+              </TouchableOpacity>
+              {!isStakePoliciesLoaded ? (
+                <ActivityIndicator color={theme.textLink} style={styles.stakingButton} />
+              ) : (
+                isStakingAvailable && (
+                  <TouchableOpacity onPress={this.handleStakePress} style={styles.buttons}>
+                    <EdgeText style={styles.buttonsText}>{lstrings.stake_earn_button_label}</EdgeText>
+                    {bestApy != null ? <EdgeText style={styles.apyText}>{bestApy}</EdgeText> : null}
+                  </TouchableOpacity>
+                )
+              )}
+            </View>
+          </CardUi4>
+        )}
+        {isEmpty || searching ? null : <VisaCardCard wallet={wallet} tokenId={tokenId} navigation={this.props.navigation} />}
         {isEmpty || searching ? null : (
           <SceneHeader underline>
             <EdgeText style={styles.transactionsDividerText}>{lstrings.fragment_transaction_list_transaction}</EdgeText>
@@ -420,20 +411,14 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
 }
 
 const getStyles = cacheStyles((theme: Theme) => ({
-  container: {
-    flex: 1,
-    paddingHorizontal: theme.rem(1),
-    paddingBottom: theme.rem(1),
-    marginBottom: theme.rem(0.5)
-  },
-
   // Balance Box
   balanceBoxContainer: {
     marginTop: theme.rem(1.5)
   },
   balanceBoxWalletNameCurrencyContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    marginBottom: theme.rem(0.5)
   },
   balanceBoxWalletNameContainer: {
     flexShrink: 1,
@@ -458,25 +443,26 @@ const getStyles = cacheStyles((theme: Theme) => ({
     fontSize: theme.rem(2)
   },
   settingsIcon: {
-    alignSelf: 'center'
+    alignSelf: 'flex-end'
   },
   // Send/Receive Buttons
   buttonsContainer: {
+    flex: 1,
     marginTop: theme.rem(1),
-    flexDirection: 'row'
+    marginHorizontal: -theme.rem(1),
+    flexDirection: 'row',
+    justifyContent: 'space-evenly'
   },
   buttons: {
     flexShrink: 1,
     flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingRight: theme.rem(1.5)
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   buttonsText: {
     fontSize: theme.rem(1),
     color: theme.textLink,
-    fontFamily: theme.fontFaceMedium,
-    marginLeft: theme.rem(0.25)
+    fontFamily: theme.fontFaceMedium
   },
   apyText: {
     fontSize: theme.rem(0.75),