Header component for transaction confirmation screens (#15614)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>

app/images/eth_badge.svg

@@ -0,0 +1,17 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16.25C12.4183 16.25 16 12.6683 16 8.25C16 3.83172 12.4183 0.25 8 0.25C3.58172 0.25 0 3.83172 0 8.25C0 12.6683 3.58172 16.25 8 16.25Z" fill="white"/>
+<g clip-path="url(#clip0_2785_11066)">
+<path d="M7.9043 15.25C11.7703 15.25 14.9043 12.116 14.9043 8.25C14.9043 4.38401 11.7703 1.25 7.9043 1.25C4.0383 1.25 0.904297 4.38401 0.904297 8.25C0.904297 12.116 4.0383 15.25 7.9043 15.25Z" fill="#627EEA"/>
+<path d="M8.12207 3V6.88063L11.402 8.34625L8.12207 3Z" fill="white" fill-opacity="0.602"/>
+<path d="M8.12217 3L4.8418 8.34625L8.12217 6.88063V3Z" fill="white"/>
+<path d="M8.12207 10.861V13.4978L11.4042 8.95703L8.12207 10.861Z" fill="white" fill-opacity="0.602"/>
+<path d="M8.12217 13.4978V10.8606L4.8418 8.95703L8.12217 13.4978Z" fill="white"/>
+<path d="M8.12207 10.2508L11.402 8.34634L8.12207 6.88159V10.2508Z" fill="white" fill-opacity="0.2"/>
+<path d="M4.8418 8.34634L8.12217 10.2508V6.88159L4.8418 8.34634Z" fill="white" fill-opacity="0.602"/>
+</g>
+<defs>
+<clipPath id="clip0_2785_11066">
+<rect width="14" height="14" fill="white" transform="translate(0.904297 1.25)"/>
+</clipPath>
+</defs>
+</svg>

ui/components/app/app-components.scss

@@ -95,3 +95,4 @@
 @import 'detected-token/detected-token-details/index';
 @import 'detected-token/detected-token-ignored-popover/index';
 @import 'detected-token/detected-token-selection-popover/index';
+@import 'network-account-balance-header/index';

ui/components/app/network-account-balance-header/index.js

@@ -0,0 +1 @@
+export { default } from './network-account-balance-header';

ui/components/app/network-account-balance-header/index.scss

@@ -0,0 +1,11 @@
+.network-account-balance-header {
+  border-top: 1px solid var(--color-border-muted);
+  border-bottom: 1px solid var(--color-border-muted);
+
+  &__network-account {
+    &__ident-icon-ethereum {
+      margin-inline-start: -10px;
+      margin-top: -20px;
+    }
+  }
+}

ui/components/app/network-account-balance-header/network-account-balance-header.js

@@ -0,0 +1,111 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Identicon from '../../ui/identicon/identicon.component';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  TYPOGRAPHY,
+  COLORS,
+  FONT_WEIGHT,
+  ALIGN_ITEMS,
+  JUSTIFY_CONTENT,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box/box';
+import { I18nContext } from '../../../contexts/i18n';
+import Typography from '../../ui/typography';
+
+export default function NetworkAccountBalanceHeader({
+  networkName,
+  accountName,
+  accountBalance,
+  tokenName,
+  accountAddress,
+}) {
+  const t = useContext(I18nContext);
+
+  return (
+    <Box
+      display={DISPLAY.FLEX}
+      flexDirection={FLEX_DIRECTION.ROW}
+      padding={4}
+      className="network-account-balance-header"
+      alignItems={ALIGN_ITEMS.CENTER}
+      justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+    >
+      <Box
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.ROW}
+        alignItems={ALIGN_ITEMS.CENTER}
+        gap={2}
+        marginRight={5}
+      >
+        <Box
+          display={DISPLAY.FLEX}
+          flexDirection={FLEX_DIRECTION.ROW}
+          alignItems={ALIGN_ITEMS.CENTER}
+        >
+          <Identicon address={accountAddress} diameter={32} />
+          <Identicon
+            address={accountAddress}
+            diameter={16}
+            imageBorder
+            image="./images/eth_badge.svg"
+            className="network-account-balance-header__network-account__ident-icon-ethereum"
+          />
+        </Box>
+        <Box
+          display={DISPLAY.FLEX}
+          alignItems={ALIGN_ITEMS.FLEX_START}
+          flexDirection={FLEX_DIRECTION.COLUMN}
+        >
+          <Typography
+            variant={TYPOGRAPHY.H7}
+            color={COLORS.TEXT_ALTERNATIVE}
+            marginBottom={0}
+          >
+            {networkName}
+          </Typography>
+
+          <Typography
+            variant={TYPOGRAPHY.H6}
+            color={COLORS.TEXT_DEFAULT}
+            fontWeight={FONT_WEIGHT.BOLD}
+            marginTop={0}
+          >
+            {accountName}
+          </Typography>
+        </Box>
+      </Box>
+      <Box
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.FLEX_END}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+      >
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          color={COLORS.TEXT_ALTERNATIVE}
+          marginBottom={0}
+        >
+          {t('balance')}
+        </Typography>
+
+        <Typography
+          variant={TYPOGRAPHY.H6}
+          color={COLORS.TEXT_DEFAULT}
+          fontWeight={FONT_WEIGHT.BOLD}
+          marginTop={0}
+        >
+          {accountBalance} {tokenName}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+NetworkAccountBalanceHeader.propTypes = {
+  networkName: PropTypes.string,
+  accountName: PropTypes.string,
+  accountBalance: PropTypes.number,
+  tokenName: PropTypes.string,
+  accountAddress: PropTypes.string,
+};

ui/components/app/network-account-balance-header/network-account-balance-header.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import NetworkAccountBalanceHeader from './network-account-balance-header';
+
+export default {
+  title: 'Components/App/NetworkAccountBalanceHeader',
+  id: __filename,
+  argTypes: {
+    networkName: {
+      control: { type: 'text' },
+    },
+    accountName: {
+      control: { type: 'text' },
+    },
+    accountBalance: {
+      control: { type: 'number' },
+    },
+    tokenName: {
+      control: { type: 'text' },
+    },
+    accountAddress: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    networkName: 'Ethereum Network',
+    accountName: 'Account 1',
+    accountBalance: 200.12,
+    tokenName: 'DAI',
+    accountAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <NetworkAccountBalanceHeader {...args} />;
+};
+
+DefaultStory.storyName = 'Default';