UX: Display total fiat balance on home screen

shared/modules/conversion.utils.test.js

@@ -3,6 +3,7 @@ import {
   decWEIToDecETH,
   getValueFromWeiHex,
   getWeiHexFromDecimalValue,
+  sumDecimals,
 } from './conversion.utils';
 
 describe('conversion utils', () => {
@@ -18,6 +19,23 @@ describe('conversion utils', () => {
     });
   });
 
+  describe('sumDecimals', () => {
+    it('properly sums one value', () => {
+      const sum = sumDecimals('0.01').toString(10);
+
+      expect('0.01').toStrictEqual(sum);
+    });
+
+    it('properly sums an array of decimals', () => {
+      const sum = sumDecimals(
+        '0.01',
+        ...['0.10', '1.00', '10.00', '100.00', '1000.00'],
+      ).toString(10);
+
+      expect('1111.11').toStrictEqual(sum);
+    });
+  });
+
   describe('getWeiHexFromDecimalValue', () => {
     it('should correctly convert 0 in ETH', () => {
       const weiValue = getWeiHexFromDecimalValue({

shared/modules/conversion.utils.ts

@@ -156,6 +156,16 @@ export function sumHexes(first: string, ...args: string[]) {
   return total.toPrefixedHexString();
 }
 
+export function sumDecimals(first: string, ...args: string[]) {
+  const firstValue = new Numeric(first, 10);
+  const total = args.reduce(
+    (acc, hexAmount) => acc.add(new Numeric(hexAmount, 10)),
+    firstValue,
+  );
+
+  return total;
+}
+
 export function hexWEIToDecGWEI(value: number | string | BigNumber | BN) {
   return new Numeric(value, 16, EtherDenomination.WEI)
     .toBase(10)

ui/components/app/asset-list/__snapshots__/asset-list.test.js.snap

@@ -0,0 +1,339 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssetList calculates the correct fiat account total 1`] = `
+<div>
+  <div
+    class="mm-box token-balance-overview mm-box--padding-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+  >
+    <div
+      class="mm-box token-balance-overview__balance"
+    >
+      <h2
+        class="mm-box mm-text token-balance-overview__secondary-balance mm-text--heading-lg mm-box--color-text-default"
+      >
+        $64,382.85
+      </h2>
+    </div>
+    <button
+      class="mm-box mm-text mm-button-base mm-button-base--size-md token-balance-portfolio mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+    >
+      Portfolio
+      <span
+        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
+        style="mask-image: url('./images/icons/export.svg');"
+      />
+    </button>
+  </div>
+  <div
+    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
+    data-testid="multichain-token-list-item"
+  >
+    <a
+      class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+      data-testid="multichain-token-list-button"
+      href="#"
+    >
+      <div
+        class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <img
+            aria-hidden="true"
+            class="mm-avatar-token__token-image--blurred"
+            src="./images/eth_logo.png"
+          />
+          <img
+            alt="ETH logo"
+            class="mm-avatar-token__token-image--size-reduced"
+            src="./images/eth_logo.png"
+          />
+        </div>
+        <div
+          class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+        >
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+          >
+            ?
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        style="flex-grow: 1; overflow: hidden;"
+      >
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
+        >
+          <div
+            class="mm-box mm-box--width-1/3"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+            >
+              Ethereum
+            </p>
+          </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
+          >
+            $1.83 USD
+          </p>
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+          data-testid="multichain-token-list-item-value"
+        >
+          0.0011
+
+          ETH
+
+        </p>
+      </div>
+    </a>
+  </div>
+  <div>
+    <div
+      class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
+      data-testid="multichain-token-list-item"
+    >
+      <a
+        class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+        data-testid="multichain-token-list-button"
+        href="#"
+      >
+        <div
+          class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
+        >
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+          >
+            U
+          </div>
+          <div
+            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+          >
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+            >
+              ?
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+          style="flex-grow: 1; overflow: hidden;"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box mm-box--width-1/3"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+              >
+                USDC
+              </p>
+            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
+            >
+              $199.36 USD
+            </p>
+          </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+            data-testid="multichain-token-list-item-value"
+          >
+            199.4875
+
+            USDC
+
+          </p>
+        </div>
+      </a>
+    </div>
+    <div
+      class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
+      data-testid="multichain-token-list-item"
+    >
+      <a
+        class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+        data-testid="multichain-token-list-button"
+        href="#"
+      >
+        <div
+          class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
+        >
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+          >
+            L
+          </div>
+          <div
+            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+          >
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+            >
+              ?
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+          style="flex-grow: 1; overflow: hidden;"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box mm-box--width-1/3"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+              >
+                LINK
+              </p>
+            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
+            >
+              $824.78 USD
+            </p>
+          </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+            data-testid="multichain-token-list-item-value"
+          >
+            122.0005
+
+            LINK
+
+          </p>
+        </div>
+      </a>
+    </div>
+    <div
+      class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
+      data-testid="multichain-token-list-item"
+    >
+      <a
+        class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
+        data-testid="multichain-token-list-button"
+        href="#"
+      >
+        <div
+          class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
+        >
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          >
+            <img
+              aria-hidden="true"
+              class="mm-avatar-token__token-image--blurred"
+              src="https://s3.amazonaws.com/airswap-token-images/WBTC.png"
+            />
+            <img
+              alt="WBTC logo"
+              class="mm-avatar-token__token-image--size-reduced"
+              src="https://s3.amazonaws.com/airswap-token-images/WBTC.png"
+            />
+          </div>
+          <div
+            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+          >
+            <div
+              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+            >
+              ?
+            </div>
+          </div>
+        </div>
+        <div
+          class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+          style="flex-grow: 1; overflow: hidden;"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box mm-box--width-1/3"
+            >
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-2"
+                  class=""
+                  data-original-title="null"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+                  >
+                    Wrapped Bitcoin
+                  </p>
+                </div>
+              </div>
+            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
+            >
+              $63,356.88 USD
+            </p>
+          </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+            data-testid="multichain-token-list-item-value"
+          >
+            2.38
+
+            WBTC
+
+          </p>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div
+    class="box box--margin-top-4 box--flex-direction-row"
+  >
+    <div
+      class="mm-box multichain-import-token-link mm-box--margin-4 mm-box--margin-bottom-2"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--align-items-center"
+      >
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          data-testid="import-token-button"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/add.svg');"
+          />
+          Import tokens
+        </button>
+      </div>
+      <div
+        class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
+      >
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          data-testid="refresh-list-button"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/refresh.svg');"
+          />
+          Refresh list
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;