Create Gas Timing component for EIP-1559 (#11405)

ui/components/app/app-components.scss

@@ -16,6 +16,7 @@
 @import 'gas-customization/gas-modal-page-container/index';
 @import 'gas-customization/gas-price-button-group/index';
 @import 'gas-customization/index';
+@import 'gas-timing/index';
 @import 'home-notification/index';
 @import 'info-box/index';
 @import 'menu-bar/index';

ui/components/app/gas-timing/gas-timing.component.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Typography from '../../ui/typography/typography';
+import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import InfoTooltip from '../../ui/info-tooltip';
+
+export default function GasTiming({ text, tooltipText, attitude }) {
+  return (
+    <Typography
+      variant={TYPOGRAPHY.H7}
+      className={classNames('gas-timing', {
+        [`gas-timing--${attitude}`]: attitude,
+      })}
+    >
+      {text}
+      {tooltipText && <InfoTooltip position="top" contentText={tooltipText} />}
+    </Typography>
+  );
+}
+
+GasTiming.propTypes = {
+  text: PropTypes.string.isRequired,
+  tooltipText: PropTypes.string,
+  attitude: PropTypes.oneOf(['positive', 'negative', 'warning', '']),
+};
+
+GasTiming.defaultProps = {
+  tooltipText: '',
+  attitude: '',
+};

ui/components/app/gas-timing/gas-timing.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import GasTiming from '.';
+
+export default {
+  title: 'Gas Timing',
+};
+
+export const simple = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <GasTiming text="Likely within 30 seconds" />
+    </div>
+  );
+};
+
+export const withTooltip = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+      />
+    </div>
+  );
+};
+
+export const withAttitudes = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <GasTiming text="Likely within 30 seconds" />
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+        attitude="negative"
+      />
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+        attitude="positive"
+      />
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+        attitude="warning"
+      />
+    </div>
+  );
+};

ui/components/app/gas-timing/index.js

@@ -0,0 +1 @@
+export { default } from './gas-timing.component';

ui/components/app/gas-timing/index.scss

@@ -0,0 +1,20 @@
+.typography.gas-timing {
+  color: $ui-4;
+
+  &--positive {
+    color: $success-3;
+  }
+
+  &--warning {
+    color: $alert-3;
+  }
+
+  &--negative {
+    color: $error-1;
+  }
+
+  .info-tooltip {
+    display: inline-block;
+    margin-inline-start: 4px;
+  }
+}

ui/components/app/transaction-detail-item/transaction-detail-item.component.js

@@ -30,6 +30,7 @@ export default function TransactionDetailItem({
           <Typography
             variant={TYPOGRAPHY.H6}
             className="transaction-detail-item__detail-text"
+            color={COLORS.UI4}
           >
             {detailText}
           </Typography>
@@ -48,11 +49,14 @@ export default function TransactionDetailItem({
           <Typography
             variant={TYPOGRAPHY.H7}
             className="transaction-detail-item__subtitle"
+            color={COLORS.UI4}
           >
             {subTitle}
           </Typography>
         )}
-        <Typography variant={TYPOGRAPHY.H7}>{subText}</Typography>
+        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
+          {subText}
+        </Typography>
       </div>
     </div>
   );

ui/components/app/transaction-detail-item/transaction-detail-item.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
+import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetailItem from '.';
 
 export default {
@@ -20,7 +21,7 @@ export const basic = () => {
         }
         detailText="16565.30"
         detailTotal="0.0089 ETH"
-        subTitle="Very likely in < 15 seconds"
+        subTitle={<GasTiming text="Very likely in < 15 seconds" />}
         subText={
           <>
             From <strong>$16565 - $19000</strong>

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
+import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetail from '.';
 
 export default {
@@ -20,7 +21,7 @@ const rows = [
     }
     detailText="0.00896 ETH"
     detailTotal="$15.73"
-    subTitle="Very likely in < 15 seconds"
+    subTitle={<GasTiming text="Very likely in < 15 seconds" />}
     subText={
       <>
         From <strong>$15.73 - $19.81</strong>

ui/components/app/transaction-total-banner/transaction-total-banner.component.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import Typography from '../../ui/typography/typography';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
+import GasTiming from '../gas-timing/gas-timing.component';
+
 export default function TransactionTotalBanner({ total, detail, timing }) {
   return (
     <div className="transaction-total-banner">
@@ -19,15 +21,7 @@ export default function TransactionTotalBanner({ total, detail, timing }) {
           {detail}
         </Typography>
       )}
-      {timing && (
+      {timing && <GasTiming text={timing} />}
-        <Typography
-          color={COLORS.UI4}
-          variant={TYPOGRAPHY.H7}
-          className="transaction-total-banner__timing"
-        >
-          {timing}
-        </Typography>
-      )}
     </div>
   );
 }