From 96436bef3f4392d7534861a1c7fad6fe2ff3a673 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 16 Oct 2024 08:08:52 -1000
Subject: [PATCH] fix: Consider Error boundary during Wallet rendering process

---
 .../Wallet/__snapshots__/index.test.tsx.snap  | 659 ++++++++++--------
 app/components/Views/Wallet/index.test.tsx    |  73 --
 app/components/Views/Wallet/index.tsx         |   2 +-
 3 files changed, 358 insertions(+), 376 deletions(-)

diff --git a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
index 588a2afdf64..3ec9cf2c174 100644
--- a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
@@ -479,408 +479,463 @@ exports[`Wallet should render correctly 1`] = `
                       }
                     }
                   >
-                    <RNCSafeAreaView
+                    <View
                       style={
                         {
-                          "backgroundColor": "#ffffff",
                           "flex": 1,
                         }
                       }
                     >
-                      <RCTScrollView
-                        collapsable={false}
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
+                      <View
                         style={
                           {
+                            "backgroundColor": "#ffffff",
                             "flex": 1,
-                            "paddingHorizontal": 24,
                           }
                         }
+                        testID="wallet-screen"
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "alignItems": "center",
-                              }
+                        <View
+                          style={
+                            {
+                              "marginTop": 20,
+                              "paddingHorizontal": 16,
+                              "widht": "80%",
                             }
-                          >
-                            <Image
-                              source={
-                                {
-                                  "default": {
-                                    "uri": "MockImage",
-                                  },
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 50,
-                                  "marginTop": 24,
-                                  "width": 50,
-                                }
-                              }
-                            />
-                            <Text
-                              style={
-                                {
-                                  "color": "#141618",
-                                  "fontFamily": "EuclidCircularB-Bold",
-                                  "fontSize": 24,
-                                  "fontWeight": "600",
-                                  "lineHeight": 34,
-                                }
-                              }
-                            >
-                              An error occurred
-                            </Text>
-                            <Text
-                              style={
-                                {
-                                  "color": "#6a737d",
-                                  "fontFamily": "EuclidCircularB-Regular",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "lineHeight": 20,
-                                  "marginTop": 8,
-                                  "textAlign": "center",
-                                }
-                              }
-                            >
-                              Your information can't be shown. Don’t worry, your wallet and funds are safe.
-                            </Text>
-                          </View>
+                          }
+                        >
                           <View
                             style={
                               {
                                 "backgroundColor": "#d738471a",
-                                "borderRadius": 8,
-                                "marginTop": 24,
+                                "borderColor": "#d73847",
+                                "borderLeftWidth": 4,
+                                "borderRadius": 4,
+                                "flexDirection": "row",
+                                "padding": 12,
+                                "paddingLeft": 8,
                               }
                             }
+                            testID="banneralert"
                           >
-                            <Text
+                            <View
                               style={
                                 {
-                                  "color": "#141618",
-                                  "fontFamily": "EuclidCircularB-Regular",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "lineHeight": 20,
-                                  "padding": 8,
+                                  "marginRight": 8,
                                 }
                               }
                             >
-                              View: Wallet
-TypeError: Cannot read properties of undefined (reading 'tabs')
-                            </Text>
-                          </View>
-                          <View
-                            style={
-                              {
-                                "alignItems": "center",
-                              }
-                            }
-                          >
-                            <TouchableOpacity
-                              onPress={[Function]}
+                              <SvgMock
+                                color="#d73847"
+                                height={24}
+                                name="Danger"
+                                style={
+                                  {
+                                    "height": 24,
+                                    "width": 24,
+                                  }
+                                }
+                                width={24}
+                              />
+                            </View>
+                            <View
                               style={
                                 {
-                                  "borderColor": "#0376c9",
-                                  "borderRadius": 50,
-                                  "borderWidth": 1,
-                                  "marginTop": 24,
-                                  "padding": 12,
-                                  "paddingHorizontal": 34,
+                                  "flex": 1,
                                 }
                               }
                             >
                               <Text
+                                accessibilityRole="text"
+                                style={
+                                  {
+                                    "color": "#141618",
+                                    "fontFamily": "EuclidCircularB-Medium",
+                                    "fontSize": 16,
+                                    "fontWeight": "500",
+                                    "letterSpacing": 0,
+                                    "lineHeight": 24,
+                                  }
+                                }
+                              >
+                                Basic functionality is off
+                              </Text>
+                              <Text
+                                accessibilityRole="text"
+                                onPress={[Function]}
                                 style={
                                   {
                                     "color": "#0376c9",
                                     "fontFamily": "EuclidCircularB-Regular",
+                                    "fontSize": 14,
                                     "fontWeight": "400",
-                                    "textAlign": "center",
+                                    "letterSpacing": 0,
+                                    "lineHeight": 22,
                                   }
                                 }
                               >
-                                <Text
-                                  allowFontScaling={false}
-                                  style={
-                                    [
-                                      {
-                                        "color": undefined,
-                                        "fontSize": 15,
-                                      },
-                                      undefined,
-                                      {
-                                        "fontFamily": "FontAwesome",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
-                                      },
-                                      {},
-                                    ]
-                                  }
-                                >
-                                  
-                                </Text>
-                                  
-                                Try again
+                                Turn on basic functionality
                               </Text>
-                            </TouchableOpacity>
+                            </View>
                           </View>
-                          <View
+                        </View>
+                        <View
+                          style={
+                            {
+                              "borderColor": "#bbc0c5",
+                              "borderRadius": 8,
+                              "borderWidth": 1,
+                              "marginHorizontal": 16,
+                              "marginTop": 28,
+                            }
+                          }
+                        >
+                          <TouchableOpacity
+                            onPress={[Function]}
                             style={
                               {
-                                "marginTop": 24,
+                                "alignItems": "center",
+                                "backgroundColor": "#ffffff",
+                                "borderColor": "#bbc0c5",
+                                "borderRadius": 8,
+                                "borderWidth": 0,
+                                "flexDirection": "row",
+                                "padding": 16,
                               }
                             }
+                            testID="account-picker"
                           >
-                            <Text
-                              style={
-                                {
-                                  "color": "#141618",
-                                  "fontFamily": "EuclidCircularB-Regular",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "lineHeight": 20,
-                                }
-                              }
-                            >
-                              <Text>
-                                Please report this issue so we can fix it:
-                              </Text>
-                            </Text>
                             <View
                               style={
                                 {
-                                  "marginBottom": 24,
-                                  "marginTop": 16,
-                                  "paddingLeft": 14,
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "flexDirection": "row",
                                 }
                               }
                             >
-                              <Text
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "EuclidCircularB-Regular",
-                                    "fontSize": 14,
-                                    "fontWeight": "400",
-                                    "lineHeight": 20,
+                                    "backgroundColor": "#ffffff",
+                                    "borderRadius": 16,
+                                    "height": 32,
+                                    "marginRight": 16,
+                                    "overflow": "hidden",
+                                    "width": 32,
                                   }
                                 }
                               >
-                                <Text
-                                  allowFontScaling={false}
+                                <View
                                   style={
                                     [
                                       {
-                                        "color": undefined,
-                                        "fontSize": 20,
+                                        "overflow": "hidden",
                                       },
-                                      undefined,
                                       {
-                                        "fontFamily": "FontAwesome",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
+                                        "backgroundColor": "#C7144F",
+                                        "borderRadius": 16,
+                                        "height": 32,
+                                        "width": 32,
                                       },
-                                      {},
+                                      undefined,
                                     ]
                                   }
                                 >
-                                  
-                                </Text>
-                                  
-                                Take a screenshot of this screen.
-                              </Text>
-                              <Text
+                                  <RNSVGSvgView
+                                    bbHeight={32}
+                                    bbWidth={32}
+                                    focusable={false}
+                                    height={32}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        {
+                                          "flex": 0,
+                                          "height": 32,
+                                          "width": 32,
+                                        },
+                                      ]
+                                    }
+                                    width={32}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGRect
+                                        fill={
+                                          {
+                                            "payload": 4294711651,
+                                            "type": 0,
+                                          }
+                                        }
+                                        height={32}
+                                        matrix={
+                                          [
+                                            0.46329603511986217,
+                                            0.8862035792312145,
+                                            -0.8862035792312145,
+                                            0.46329603511986217,
+                                            29.06767649409735,
+                                            -8.290603334655817,
+                                          ]
+                                        }
+                                        propList={
+                                          [
+                                            "fill",
+                                          ]
+                                        }
+                                        width={32}
+                                        x={0}
+                                        y={0}
+                                      />
+                                      <RNSVGRect
+                                        fill={
+                                          {
+                                            "payload": 4280576225,
+                                            "type": 0,
+                                          }
+                                        }
+                                        height={32}
+                                        matrix={
+                                          [
+                                            -0.5778576243835052,
+                                            0.8161375900801603,
+                                            -0.8161375900801603,
+                                            -0.5778576243835052,
+                                            51.62016714634118,
+                                            17.239003094412087,
+                                          ]
+                                        }
+                                        propList={
+                                          [
+                                            "fill",
+                                          ]
+                                        }
+                                        width={32}
+                                        x={0}
+                                        y={0}
+                                      />
+                                      <RNSVGRect
+                                        fill={
+                                          {
+                                            "payload": 4278407261,
+                                            "type": 0,
+                                          }
+                                        }
+                                        height={32}
+                                        matrix={
+                                          [
+                                            0.7046342099635947,
+                                            -0.7095707365365209,
+                                            0.7095707365365209,
+                                            0.7046342099635947,
+                                            -25.225718686778755,
+                                            -4.611026307883787,
+                                          ]
+                                        }
+                                        propList={
+                                          [
+                                            "fill",
+                                          ]
+                                        }
+                                        width={32}
+                                        x={0}
+                                        y={0}
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                              <View
                                 style={
-                                  [
-                                    {
-                                      "marginTop": 14,
-                                    },
-                                    {
-                                      "color": "#141618",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "lineHeight": 20,
-                                    },
-                                  ]
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-start",
+                                  }
                                 }
                               >
                                 <Text
-                                  allowFontScaling={false}
-                                  style={
-                                    [
-                                      {
-                                        "color": undefined,
-                                        "fontSize": 14,
-                                      },
-                                      undefined,
-                                      {
-                                        "fontFamily": "FontAwesome",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
-                                      },
-                                      {},
-                                    ]
-                                  }
-                                >
-                                  
-                                </Text>
-                                  
-                                <Text
-                                  onPress={[Function]}
+                                  accessibilityRole="text"
                                   style={
                                     {
-                                      "color": "#0376c9",
+                                      "color": "#141618",
+                                      "fontFamily": "EuclidCircularB-Medium",
+                                      "fontSize": 14,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
                                     }
                                   }
+                                  testID="account-label"
                                 >
-                                  Copy
+                                  Account 1
                                 </Text>
-                                 
-                                the error message to clipboard.
-                              </Text>
+                              </View>
+                            </View>
+                            <SvgMock
+                              color="#141618"
+                              height={20}
+                              name="ArrowDown"
+                              style={
+                                {
+                                  "height": 20,
+                                  "marginLeft": 16,
+                                  "width": 20,
+                                }
+                              }
+                              width={20}
+                            />
+                          </TouchableOpacity>
+                          <View
+                            style={
+                              {
+                                "borderColor": "#bbc0c5",
+                                "borderTopWidth": 1,
+                                "marginHorizontal": 16,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "backgroundColor": "#ffffff",
+                                "borderColor": "#bbc0c5",
+                                "borderRadius": 8,
+                                "borderWidth": 0,
+                                "flexDirection": "row",
+                                "justifyContent": "space-between",
+                                "padding": 16,
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                }
+                              }
+                            >
                               <Text
+                                accessibilityRole="text"
                                 style={
-                                  [
-                                    {
-                                      "marginTop": 14,
-                                    },
-                                    {
-                                      "color": "#141618",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "lineHeight": 20,
-                                    },
-                                  ]
+                                  {
+                                    "color": "#141618",
+                                    "fontFamily": "EuclidCircularB-Bold",
+                                    "fontSize": 12,
+                                    "fontWeight": "700",
+                                    "letterSpacing": 0,
+                                    "lineHeight": 20,
+                                  }
                                 }
                               >
-                                <Text
-                                  allowFontScaling={false}
-                                  style={
-                                    [
-                                      {
-                                        "color": undefined,
-                                        "fontSize": 14,
-                                      },
-                                      undefined,
-                                      {
-                                        "fontFamily": "FontAwesome",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
-                                      },
-                                      {},
-                                    ]
-                                  }
-                                >
-                                  
-                                </Text>
-                                  
-                                Submit a ticket
-                                 
-                                <Text
-                                  onPress={[Function]}
+                                Address
+                                :
+                              </Text>
+                              <RNGestureHandlerButton
+                                collapsable={false}
+                                onGestureEvent={[Function]}
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onHandlerStateChange={[Function]}
+                                rippleColor={0}
+                                testID="wallet-account-copy-button"
+                              >
+                                <View
+                                  accessible={true}
+                                  collapsable={false}
                                   style={
                                     {
-                                      "color": "#0376c9",
+                                      "alignItems": "center",
+                                      "backgroundColor": "#0376c91a",
+                                      "borderRadius": 20,
+                                      "flexDirection": "row",
+                                      "marginLeft": 12,
+                                      "opacity": 1,
+                                      "padding": 4,
+                                      "paddingHorizontal": 12,
                                     }
                                   }
                                 >
-                                  here.
-                                </Text>
-                                 
-                                Please include the error message and the screenshot.
-                              </Text>
-                              <Text
-                                style={
-                                  [
-                                    {
-                                      "marginTop": 14,
-                                    },
-                                    {
-                                      "color": "#141618",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "lineHeight": 20,
-                                    },
-                                  ]
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  style={
-                                    [
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
                                       {
-                                        "color": undefined,
-                                        "fontSize": 14,
-                                      },
-                                      undefined,
+                                        "color": "#0376c9",
+                                        "fontFamily": "EuclidCircularB-Medium",
+                                        "fontSize": 12,
+                                        "fontWeight": "500",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 20,
+                                      }
+                                    }
+                                    testID="wallet-account-address"
+                                  >
+                                    0xC495...D272
+                                  </Text>
+                                  <SvgMock
+                                    color="#0376c9"
+                                    height={16}
+                                    name="Copy"
+                                    style={
                                       {
-                                        "fontFamily": "FontAwesome",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "normal",
-                                      },
-                                      {},
-                                    ]
-                                  }
-                                >
-                                  
-                                </Text>
-                                  
-                                Send us a bug report
-                                 
-                                <Text
-                                  onPress={[Function]}
-                                  style={
-                                    {
-                                      "color": "#0376c9",
+                                        "height": 16,
+                                        "marginLeft": 4,
+                                        "width": 16,
+                                      }
                                     }
-                                  }
-                                >
-                                  here.
-                                </Text>
-                                 
-                                Please include details about what happened.
-                              </Text>
+                                    width={16}
+                                  />
+                                </View>
+                              </RNGestureHandlerButton>
                             </View>
-                            <Text
+                            <TouchableOpacity
+                              accessible={true}
+                              activeOpacity={1}
+                              disabled={false}
+                              onPress={[Function]}
+                              onPressIn={[Function]}
+                              onPressOut={[Function]}
                               style={
                                 {
-                                  "color": "#141618",
-                                  "fontFamily": "EuclidCircularB-Regular",
-                                  "fontSize": 14,
-                                  "fontWeight": "400",
-                                  "lineHeight": 20,
+                                  "alignItems": "center",
+                                  "borderRadius": 8,
+                                  "height": 24,
+                                  "justifyContent": "center",
+                                  "opacity": 1,
+                                  "width": 24,
                                 }
                               }
+                              testID="main-wallet-account-actions"
                             >
-                              If this error persists,
-                               
-                              <Text
-                                onPress={[Function]}
+                              <SvgMock
+                                color="#141618"
+                                height={16}
+                                name="MoreHorizontal"
                                 style={
                                   {
-                                    "color": "#0376c9",
+                                    "height": 16,
+                                    "width": 16,
                                   }
                                 }
-                              >
-                                save your Secret Recovery Phrase
-                              </Text>
-                               
-                              & re-install the app. Note: you can NOT restore your wallet without your Secret Recovery Phrase.
-                            </Text>
+                                width={16}
+                              />
+                            </TouchableOpacity>
                           </View>
                         </View>
-                      </RCTScrollView>
-                    </RNCSafeAreaView>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </View>
diff --git a/app/components/Views/Wallet/index.test.tsx b/app/components/Views/Wallet/index.test.tsx
index cde11aade66..9b008db9496 100644
--- a/app/components/Views/Wallet/index.test.tsx
+++ b/app/components/Views/Wallet/index.test.tsx
@@ -8,7 +8,6 @@ import { backgroundState } from '../../../util/test/initial-root-state';
 import { createMockAccountsControllerState } from '../../../util/test/accountsControllerTestUtils';
 import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
-import { BN } from 'ethereumjs-util';
 
 const MOCK_ADDRESS = '0xc4955c0d639d99699bfd7ec54d9fafee40e4d272';
 
@@ -31,9 +30,6 @@ jest.mock('../../../core/Engine', () => ({
         },
       },
     },
-    TokensController: {
-      ignoreTokens: jest.fn(() => Promise.resolve()),
-    },
     TokenRatesController: {
       poll: jest.fn(),
     },
@@ -87,60 +83,6 @@ const mockInitialState = {
       AccountsController: {
         ...MOCK_ACCOUNTS_CONTROLLER_STATE,
       },
-      TokensController: {
-        tokens: [
-          {
-            name: 'Ethereum',
-            symbol: 'ETH',
-            address: '0x0',
-            decimals: 18,
-            isETH: true,
-
-            balanceFiat: '< $0.01',
-            iconUrl: '',
-          },
-          {
-            name: 'Bat',
-            symbol: 'BAT',
-            address: '0x01',
-            decimals: 18,
-            balanceFiat: '$0',
-            iconUrl: '',
-          },
-          {
-            name: 'Link',
-            symbol: 'LINK',
-            address: '0x02',
-            decimals: 18,
-            balanceFiat: '$0',
-            iconUrl: '',
-          },
-        ],
-      },
-      TokenRatesController: {
-        marketData: {
-          '0x1': {
-            '0x0': { price: 0.005 },
-            '0x01': { price: 0.005 },
-            '0x02': { price: 0.005 },
-          },
-        },
-      },
-      CurrencyRateController: {
-        currentCurrency: 'USD',
-        currencyRates: {
-          ETH: {
-            conversionRate: 1,
-          },
-        },
-      },
-      TokenBalancesController: {
-        contractBalances: {
-          '0x00': new BN(2).toString(),
-          '0x01': new BN(2).toString(),
-          '0x02': new BN(0).toString(),
-        },
-      },
     },
   },
 };
@@ -152,20 +94,6 @@ jest.mock('react-redux', () => ({
     .mockImplementation((callback) => callback(mockInitialState)),
 }));
 
-const mockNavigate = jest.fn();
-const mockPush = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  const actualReactNavigation = jest.requireActual('@react-navigation/native');
-  return {
-    ...actualReactNavigation,
-    useNavigation: () => ({
-      navigate: mockNavigate,
-      push: mockPush,
-    }),
-  };
-});
-
 jest.mock('react-native-scrollable-tab-view', () => {
   const ScrollableTabViewMock = jest
     .fn()
@@ -176,7 +104,6 @@ jest.mock('react-native-scrollable-tab-view', () => {
   ScrollableTabViewMock.defaultProps = {
     onChangeTab: jest.fn(),
     renderTabBar: jest.fn(),
-    tabs: [],
   };
   return ScrollableTabViewMock;
 });
diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
index 9553fccfcfc..a5ccb6e25ea 100644
--- a/app/components/Views/Wallet/index.tsx
+++ b/app/components/Views/Wallet/index.tsx
@@ -594,7 +594,7 @@ const Wallet = ({
           <WalletAccount style={styles.walletAccount} ref={walletRef} />
         ) : null}
         <>
-          <PortfolioBalance />
+          {accountBalanceByChainId && <PortfolioBalance />}
           <ScrollableTabView
             renderTabBar={renderTabBar}
             // eslint-disable-next-line react/jsx-no-bind