Wrap balance and portfolio button (#18109)

ui/components/app/wallet-overview/eth-overview.js

@@ -75,6 +75,7 @@ const EthOverview = ({ className }) => {
             <div className="eth-overview__primary-container">
               {balance ? (
                 <UserPreferencedCurrencyDisplay
+                  style={{ display: 'contents' }}
                   className={classnames('eth-overview__primary-balance', {
                     'eth-overview__cached-balance': balanceIsCached,
                   })}

ui/components/app/wallet-overview/eth-overview.test.js

@@ -32,10 +32,16 @@ describe('EthOverview', () => {
         type: 'test',
         chainId: CHAIN_IDS.MAINNET,
       },
-      cachedBalances: {},
+      cachedBalances: {
+        '0x1': {
+          '0x1': '0x1F4',
+        },
+      },
       preferences: {
         useNativeCurrencyAsPrimaryCurrency: true,
       },
+      useCurrencyRateCheck: true,
+      conversionRate: 2,
       identities: {
         '0x1': {
           address: '0x1',
@@ -66,6 +72,8 @@ describe('EthOverview', () => {
   const ETH_OVERVIEW_BUY = 'eth-overview-buy';
   const ETH_OVERVIEW_BRIDGE = 'eth-overview-bridge';
   const ETH_OVERVIEW_PORTFOLIO = 'home__portfolio-site';
+  const ETH_OVERVIEW_PRIMARY_CURRENCY = 'eth-overview__primary-currency';
+  const ETH_OVERVIEW_SECONDARY_CURRENCY = 'eth-overview__secondary-currency';
 
   afterEach(() => {
     store.clearActions();
@@ -86,6 +94,57 @@ describe('EthOverview', () => {
       openTabSpy.mockClear();
     });
 
+    it('should show the primary balance', async () => {
+      const { queryByTestId, queryByText } = renderWithProvider(
+        <EthOverview />,
+        store,
+      );
+
+      const primaryBalance = queryByTestId(ETH_OVERVIEW_PRIMARY_CURRENCY);
+      expect(primaryBalance).toBeInTheDocument();
+      expect(primaryBalance).toHaveTextContent('0ETH');
+      expect(queryByText('*')).not.toBeInTheDocument();
+    });
+
+    it('should show the cached primary balance', async () => {
+      const mockedStoreWithCachedBalance = {
+        metamask: {
+          ...mockStore.metamask,
+          accounts: {
+            '0x1': {
+              address: '0x1',
+            },
+          },
+          cachedBalances: {
+            '0x1': {
+              '0x1': '0x24da51d247e8b8',
+            },
+          },
+        },
+      };
+      const mockedStore = configureMockStore([thunk])(
+        mockedStoreWithCachedBalance,
+      );
+
+      const { queryByTestId, queryByText } = renderWithProvider(
+        <EthOverview />,
+        mockedStore,
+      );
+
+      const primaryBalance = queryByTestId(ETH_OVERVIEW_PRIMARY_CURRENCY);
+      expect(primaryBalance).toBeInTheDocument();
+      expect(primaryBalance).toHaveTextContent('0.0104ETH');
+      expect(queryByText('*')).toBeInTheDocument();
+    });
+
+    it('should show the secondary balance', async () => {
+      const { queryByTestId } = renderWithProvider(<EthOverview />, store);
+
+      const secondaryBalance = queryByTestId(ETH_OVERVIEW_SECONDARY_CURRENCY);
+      expect(secondaryBalance).toBeInTheDocument();
+      expect(secondaryBalance).toHaveTextContent('0');
+    });
+
     it('should always show the Bridge button', () => {
       const { queryByTestId } = renderWithProvider(<EthOverview />, store);
       const bridgeButton = queryByTestId(ETH_OVERVIEW_BRIDGE);

ui/components/app/wallet-overview/index.scss

@@ -46,20 +46,20 @@
     align-items: center;
     margin: 16px 0;
     padding: 0 16px;
-    max-width: 100%;
+    max-width: 326px;
   }
 
   &__primary-container {
     display: flex;
-    position: relative;
+    max-width: inherit;
+    justify-content: center;
+    flex-wrap: wrap;
   }
 
   &__primary-balance {
     @include H2;
 
     color: var(--color-text-default);
-    width: 100%;
-    justify-content: center;
   }
 
   &__cached-star {
@@ -67,10 +67,8 @@
   }
 
   &__portfolio-button {
-    position: absolute;
+    height: inherit;
-    top: 50%;
+    padding-inline-start: 16px;
-    transform: translate(0, -50%);
-    left: calc(100% + 2px);
   }
 
   &__cached-balance,