From 0f31ba654a3b69466370703febd36f0515b29879 Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Wed, 17 Jan 2024 13:21:31 -0800
Subject: [PATCH] fixup! Wrap existing TransactionListTop in a card

---
 .../TransactionListTop.test.tsx.snap          | 952 +++++++++---------
 src/components/themed/TransactionListTop.tsx  |  32 +-
 2 files changed, 499 insertions(+), 485 deletions(-)

diff --git a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
index 01afba19f61..38789d5296e 100644
--- a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
@@ -42,194 +42,249 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
     <View
       style={
         {
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "marginBottom": 11,
+          "marginTop": 34,
         }
       }
     >
       <View
-        accessible={false}
         style={
           {
-            "alignItems": "center",
             "flexDirection": "row",
-            "flexShrink": 1,
-            "marginRight": 11,
+            "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={
             {
-              "height": 34,
-              "marginBottom": 0,
-              "marginLeft": 0,
-              "marginRight": 0,
-              "marginTop": 0,
-              "width": 34,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "marginRight": 11,
+              "opacity": 1,
             }
           }
         >
-          <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,
-                "shadowColor": "#000000",
-                "shadowOffset": {
-                  "height": 3,
-                  "width": -3,
-                },
-                "shadowOpacity": 0.6,
-                "shadowRadius": 4,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
                 "width": 34,
               }
             }
           >
-            <View
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight="50"
+              bbWidth="50"
+              focusable={false}
+              height={50}
+              meetOrSlice={0}
+              minX={-8}
+              minY={-8}
               style={
                 [
                   {
-                    "overflow": "hidden",
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
                   },
                   {
-                    "bottom": 0,
-                    "left": 0,
+                    "left": -8,
                     "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "top": -8,
+                    "transform": [
+                      {
+                        "rotateZ": "-90deg",
+                      },
+                    ],
+                  },
+                  {
+                    "flex": 0,
+                    "height": 50,
+                    "width": 50,
                   },
                 ]
               }
+              vbHeight={50}
+              vbWidth={50}
+              width={50}
             >
-              <FastImageView
-                resizeMode="cover"
-                source={
+              <RNSVGGroup
+                fill={
                   {
-                    "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
+                    "payload": 4278190080,
+                    "type": 0,
                   }
                 }
-                style={
-                  {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 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,
+                  "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,
+                    }
+                  }
+                />
+              </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>
-        <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>
       </View>
       <View
         accessibilityState={
@@ -249,7 +304,7 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
             "text": undefined,
           }
         }
-        accessible={true}
+        accessible={false}
         collapsable={false}
         focusable={true}
         onClick={[Function]}
@@ -261,121 +316,64 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           {
-            "alignSelf": "flex-end",
             "opacity": 1,
           }
         }
-        testID="gearIcon"
       >
         <Text
-          accessibilityHint="Wallet settings"
-          allowFontScaling={false}
+          accessible={true}
+          adjustsFontSizeToFit={true}
+          minimumFontScale={0.3}
+          numberOfLines={1}
           style={
             [
               {
-                "color": "#00f1a2",
-                "fontSize": 34,
+                "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,
               },
-              undefined,
               {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "fontSize": 28,
               },
-              {},
+              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,
         }
       }
@@ -772,194 +770,249 @@ exports[`TransactionListTop should render 1`] = `
     <View
       style={
         {
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "marginBottom": 11,
+          "marginTop": 34,
         }
       }
     >
       <View
-        accessible={false}
         style={
           {
-            "alignItems": "center",
             "flexDirection": "row",
-            "flexShrink": 1,
-            "marginRight": 11,
+            "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={
             {
-              "height": 34,
-              "marginBottom": 0,
-              "marginLeft": 0,
-              "marginRight": 0,
-              "marginTop": 0,
-              "width": 34,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "marginRight": 11,
+              "opacity": 1,
             }
           }
         >
-          <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,
-                "shadowColor": "#000000",
-                "shadowOffset": {
-                  "height": 3,
-                  "width": -3,
-                },
-                "shadowOpacity": 0.6,
-                "shadowRadius": 4,
+                "marginBottom": 0,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "marginTop": 0,
                 "width": 34,
               }
             }
           >
-            <View
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight="50"
+              bbWidth="50"
+              focusable={false}
+              height={50}
+              meetOrSlice={0}
+              minX={-8}
+              minY={-8}
               style={
                 [
                   {
-                    "overflow": "hidden",
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
                   },
                   {
-                    "bottom": 0,
-                    "left": 0,
+                    "left": -8,
                     "position": "absolute",
-                    "right": 0,
-                    "top": 0,
+                    "top": -8,
+                    "transform": [
+                      {
+                        "rotateZ": "-90deg",
+                      },
+                    ],
+                  },
+                  {
+                    "flex": 0,
+                    "height": 50,
+                    "width": 50,
                   },
                 ]
               }
+              vbHeight={50}
+              vbWidth={50}
+              width={50}
             >
-              <FastImageView
-                resizeMode="cover"
-                source={
+              <RNSVGGroup
+                fill={
                   {
-                    "uri": "https://content.edge.app/currencyIconsV3/bitcoin/bitcoin.png",
+                    "payload": 4278190080,
+                    "type": 0,
                   }
                 }
-                style={
-                  {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 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,
+                  "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,
+                    }
+                  }
+                />
+              </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>
-        <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>
       </View>
       <View
         accessibilityState={
@@ -979,7 +1032,7 @@ exports[`TransactionListTop should render 1`] = `
             "text": undefined,
           }
         }
-        accessible={true}
+        accessible={false}
         collapsable={false}
         focusable={true}
         onClick={[Function]}
@@ -991,121 +1044,64 @@ exports[`TransactionListTop should render 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           {
-            "alignSelf": "flex-end",
             "opacity": 1,
           }
         }
-        testID="gearIcon"
       >
         <Text
-          accessibilityHint="Wallet settings"
-          allowFontScaling={false}
+          accessible={true}
+          adjustsFontSizeToFit={true}
+          minimumFontScale={0.3}
+          numberOfLines={1}
           style={
             [
               {
-                "color": "#00f1a2",
-                "fontSize": 34,
+                "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,
               },
-              undefined,
               {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "fontSize": 28,
               },
-              {},
+              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,
         }
       }
diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
index 4ae34732d04..1340b8e67ba 100644
--- a/src/components/themed/TransactionListTop.tsx
+++ b/src/components/themed/TransactionListTop.tsx
@@ -3,10 +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 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'
@@ -20,12 +20,14 @@ import { getDisplayDenomination, getExchangeDenomination } from '../../selectors
 import { getExchangeRate } from '../../selectors/WalletSelectors'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import { NavigationProp } from '../../types/routerTypes'
+import { getTokenId } from '../../util/CurrencyInfoHelpers'
 import { triggerHaptic } from '../../util/haptic'
 import { getFioStakingBalances, getPluginFromPolicy, getPositionAllocations } from '../../util/stakeUtils'
 import { convertNativeToDenomination, datelog } from '../../util/utils'
 import { VisaCardCard } from '../cards/VisaCardCard'
 import { BackupForTransferModal, BackupForTransferModalResult } from '../modals/BackupForTransferModal'
 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'
@@ -156,6 +158,23 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
     this.setState({ lockedNativeAmount })
   }
 
+  handleOpenWalletListModal = () => {
+    const { account, navigation } = this.props
+
+    triggerHaptic('impactLight')
+    Airship.show<WalletListResult>(bridge => <WalletListModal bridge={bridge} headerTitle={lstrings.select_wallet} navigation={navigation} />)
+      .then(result => {
+        if (result?.type === 'wallet') {
+          const { currencyCode, walletId } = result
+          const wallet = account.currencyWallets[walletId]
+          if (wallet == null) return
+          const tokenId = getTokenId(account, wallet.currencyInfo.pluginId, currencyCode)
+          navigation.setParams({ tokenId, walletId })
+        }
+      })
+      .catch(err => showError(err))
+  }
+
   handleMenu = () => {
     const { wallet, tokenId, navigation } = this.props
     triggerHaptic('impactLight')
@@ -179,16 +198,14 @@ 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}>
-          <View accessible={false} style={styles.balanceBoxWalletNameContainer}>
+          <TouchableOpacity accessible={false} style={styles.balanceBoxWalletNameContainer} onPress={this.handleOpenWalletListModal}>
             <CryptoIconUi4 sizeRem={1.5} tokenId={tokenId} walletId={wallet.id} onIconColor={this.props.onIconColor} />
             <EdgeText accessible style={styles.balanceBoxWalletName}>
               {walletName}
             </EdgeText>
-          </View>
-          <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)} />
+            <Ionicons name="chevron-forward" size={theme.rem(1.5)} color={theme.iconTappable} />
           </TouchableOpacity>
         </View>
         <TouchableOpacity accessible={false} onPress={this.props.toggleBalanceVisibility}>
@@ -207,7 +224,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props, Stat
             </EdgeText>
           )}
         </TouchableOpacity>
-      </>
+      </View>
     )
   }
 
@@ -432,6 +449,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
   buttonsContainer: {
     flex: 1,
     marginTop: theme.rem(1),
+    marginHorizontal: -theme.rem(1),
     flexDirection: 'row',
     justifyContent: 'space-evenly'
   },