Created review spending cap component (#15633)

app/_locales/en/messages.json

@@ -429,6 +429,9 @@
   "basic": {
     "message": "Basic"
   },
+  "beCareful": {
+    "message": "Be careful"
+  },
   "betaMetamaskDescription": {
     "message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all."
   },
@@ -831,6 +834,9 @@
   "customSpendLimit": {
     "message": "Custom spend limit"
   },
+  "customSpendingCap": {
+    "message": "Custom spending cap"
+  },
   "customToken": {
     "message": "Custom token"
   },
@@ -2841,6 +2847,9 @@
     "message": "By revoking permission, the following $1 will no longer be able to access your $2",
     "description": "$1 is either key 'account' or 'contract', and $2 is either a string or link of a given token symbol or name"
   },
+  "revokeSpendingCapTooltipText": {
+    "message": "This contract will be unable to spend any more of your current or future tokens."
+  },
   "rinkeby": {
     "message": "Rinkeby test network"
   },
@@ -4199,6 +4208,10 @@
   "warning": {
     "message": "Warning"
   },
+  "warningTooltipText": {
+    "message": "$1 The contract could spend your entire token balance without further notice or consent. Protect yourself by customizing a lower spending cap.",
+    "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
+  },
   "weak": {
     "message": "Weak"
   },

ui/components/ui/review-spending-cap/index.js

@@ -0,0 +1 @@
+export { default } from './review-spending-cap';

ui/components/ui/review-spending-cap/index.scss

@@ -0,0 +1,33 @@
+.review-spending-cap {
+  &__heading {
+    width: 100%;
+  }
+
+  &__heading-title {
+    &__tooltip {
+      width: 180px;
+
+      &__warning-icon {
+        color: var(--color-warning-default);
+      }
+
+      &__question-icon {
+        color: var(--color-icon-muted);
+      }
+    }
+  }
+
+  &__heading-detail {
+    flex-grow: 1;
+    align-self: center;
+
+    &__button {
+      background: none;
+      color: var(--color-primary-default);
+    }
+  }
+
+  i {
+    font-size: $font-size-h7;
+  }
+}

ui/components/ui/review-spending-cap/review-spending-cap.js

@@ -0,0 +1,131 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { I18nContext } from '../../../contexts/i18n';
+import Box from '../box';
+import Tooltip from '../tooltip';
+import Typography from '../typography';
+import {
+  ALIGN_ITEMS,
+  COLORS,
+  DISPLAY,
+  FLEX_DIRECTION,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+  TEXT_ALIGN,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+
+export default function ReviewSpendingCap({
+  tokenName,
+  currentTokenBalance,
+  tokenValue,
+  onEdit,
+}) {
+  const t = useContext(I18nContext);
+
+  return (
+    <Box
+      className="review-spending-cap"
+      borderRadius={SIZES.SM}
+      paddingTop={4}
+      paddingRight={4}
+      paddingLeft={4}
+      display={DISPLAY.FLEX}
+      alignItems={ALIGN_ITEMS.FLEX_START}
+      flexDirection={FLEX_DIRECTION.COLUMN}
+      backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+      gap={1}
+    >
+      <Box
+        flexDirection={FLEX_DIRECTION.ROW}
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        className="review-spending-cap__heading"
+      >
+        <Box
+          flexDirection={FLEX_DIRECTION.ROW}
+          className="review-spending-cap__heading-title"
+        >
+          <Typography
+            as={TYPOGRAPHY.H6}
+            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TYPOGRAPHY.H6}
+            boxProps={{ display: DISPLAY.INLINE_BLOCK }}
+          >
+            {t('customSpendingCap')}
+          </Typography>
+          <Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}>
+            <Tooltip
+              interactive
+              position="top"
+              html={
+                <Typography
+                  variant={TYPOGRAPHY.H7}
+                  color={COLORS.TEXT_ALTERNATIVE}
+                  className="review-spending-cap__heading-title__tooltip"
+                >
+                  {tokenValue > currentTokenBalance &&
+                    t('warningTooltipText', [
+                      <Typography
+                        key="tooltip-text"
+                        variant={TYPOGRAPHY.H7}
+                        fontWeight={FONT_WEIGHT.BOLD}
+                        color={COLORS.WARNING_DEFAULT}
+                      >
+                        <i className="fa fa-exclamation-circle" />{' '}
+                        {t('beCareful')}
+                      </Typography>,
+                    ])}
+                  {tokenValue === 0 && t('revokeSpendingCapTooltipText')}
+                </Typography>
+              }
+            >
+              {tokenValue > currentTokenBalance && (
+                <i className="fa fa-exclamation-triangle review-spending-cap__heading-title__tooltip__warning-icon" />
+              )}
+              {tokenValue === 0 && (
+                <i className="far fa-question-circle review-spending-cap__heading-title__tooltip__question-icon" />
+              )}
+            </Tooltip>
+          </Box>
+        </Box>
+        <Box
+          className="review-spending-cap__heading-detail"
+          textAlign={TEXT_ALIGN.END}
+        >
+          <button
+            className="review-spending-cap__heading-detail__button"
+            type="link"
+            onClick={(e) => {
+              e.preventDefault();
+              onEdit();
+            }}
+          >
+            {t('edit')}
+          </button>
+        </Box>
+      </Box>
+      <Box>
+        <Typography
+          as={TYPOGRAPHY.H6}
+          color={
+            tokenValue > currentTokenBalance
+              ? COLORS.WARNING_DEFAULT
+              : COLORS.TEXT_DEFAULT
+          }
+          variant={TYPOGRAPHY.H6}
+          marginBottom={3}
+        >
+          {tokenValue} {tokenName}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+ReviewSpendingCap.propTypes = {
+  tokenName: PropTypes.string,
+  currentTokenBalance: PropTypes.number,
+  tokenValue: PropTypes.number,
+  onEdit: PropTypes.func,
+};

ui/components/ui/review-spending-cap/review-spending-cap.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReviewSpendingCap from './review-spending-cap';
+
+export default {
+  title: 'Components/UI/ReviewSpendingCap',
+  id: __filename,
+  argTypes: {
+    tokenName: {
+      control: { type: 'text' },
+    },
+    currentTokenBalance: {
+      control: { type: 'number' },
+    },
+    tokenValue: {
+      control: { type: 'number' },
+    },
+    onEdit: {
+      action: 'onEdit',
+    },
+  },
+  args: {
+    tokenName: 'DAI',
+    currentTokenBalance: 200.12,
+    tokenValue: 7,
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <ReviewSpendingCap {...args} />;
+};
+
+DefaultStory.storyName = 'Default';

ui/components/ui/typography/typography.js

@@ -24,6 +24,7 @@ export const ValidColors = [
   COLORS.ERROR_INVERSE,
   COLORS.SUCCESS_DEFAULT,
   COLORS.SUCCESS_INVERSE,
+  COLORS.WARNING_DEFAULT,
   COLORS.WARNING_INVERSE,
   COLORS.INFO_DEFAULT,
   COLORS.INFO_INVERSE,

ui/components/ui/ui-components.scss

@@ -41,6 +41,7 @@
 @import 'pulse-loader/index';
 @import 'qr-code/index';
 @import 'radio-group/index';
+@import 'review-spending-cap/index';
 @import 'sender-to-recipient/index';
 @import 'show-hide-toggle/index.scss';
 @import 'snackbar/index';