Part #19737 - Replace deprecated FormField component with TextField, Label, HelpText (#19859)

* Replacing deprecated components for component library components

* Update

* Lint fix

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

test/e2e/tests/custom-token-add-approve.spec.js

@@ -376,7 +376,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         // set max spending cap
         await driver.clickElement({
-          css: '.custom-spending-cap__max',
+          css: '[data-testid="custom-spending-cap-max-button"]',
           text: 'Max',
         });
 

ui/components/app/app-components.scss

@@ -20,7 +20,6 @@
 @import 'connected-accounts-permissions/index';
 @import 'connected-sites-list/index';
 @import 'create-new-vault/create-new-vault.scss';
-@import 'custom-spending-cap/index';
 @import 'edit-gas-display/index';
 @import 'edit-gas-fee-button/index';
 @import 'edit-gas-fee-popover/index';

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -3,103 +3,84 @@
 exports[`CustomSpendingCap should match snapshot 1`] = `
 <div>
   <div
-    class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
+    class="mm-box custom-spending-cap mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
   >
     <div
-      class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
+      class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--width-full"
     >
-      <label
+      <div>
-        for="custom-spending-cap"
+        <label
-      >
+          class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-right-1 mm-box--display-inline mm-box--align-items-center mm-box--color-text-default"
-        <div
+          for="custom-spending-cap"
-          class="form-field"
         >
-          <div
+          Custom spending cap
-            class="mm-box"
+        </label>
-          >
+        <div
+          class="mm-box mm-box--display-inline-flex mm-box--align-items-center"
+        >
+          <div>
             <div
-              class="form-field__heading"
+              aria-describedby="tippy-tooltip-1"
+              class=""
+              data-original-title="null"
+              data-tooltipped=""
+              style="display: inline;"
+              tabindex="0"
             >
-              <div
+              <span
-                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
+                class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-icon-alternative"
-              >
+                style="mask-image: url('./images/icons/question.svg');"
-                <h6
+              />
-                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                >
-                  Custom spending cap
-                </h6>
-                
-                <div
-                  class="box box--display-inline-block box--flex-direction-row"
-                >
-                  <div>
-                    <div
-                      aria-describedby="tippy-tooltip-1"
-                      class=""
-                      data-original-title="null"
-                      data-tooltipped=""
-                      style="display: inline;"
-                      tabindex="0"
-                    >
-                      <span
-                        class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
-                        style="mask-image: url('./images/icons/question.svg');"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
-            <input
-              class="form-field__input"
-              data-testid="custom-spending-cap-input"
-              id="custom-spending-cap"
-              placeholder="Enter a number"
-              type="text"
-              value="7"
-            />
-            
           </div>
         </div>
-        <div
+      </div>
-          class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
-        >
-          <button
-            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium 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"
-          >
-            Max
-          </button>
-        </div>
-        <div
-          class="mm-box custom-spending-cap__description"
-        >
-          <h6
-            class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
-          >
-            <span>
-               
-              This allows the third party to spend 
-              <span
-                class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
-              >
-                7
-                 
-                TST
-              </span>
-               from your current balance.
-               
-            </span>
-          </h6>
-          <a
-            class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 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"
-            href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
-            target="_blank"
-          >
-            Learn more
-          </a>
-        </div>
-      </label>
     </div>
+    <div
+      class="box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate box--padding-right-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
+    >
+      <input
+        autocomplete="off"
+        class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--padding-inline-end-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+        data-testid="custom-spending-cap-input"
+        focused="true"
+        id="custom-spending-cap"
+        placeholder="Enter a number"
+        type="text"
+        value="7"
+      />
+      <button
+        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium 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="custom-spending-cap-max-button"
+      >
+        Max
+      </button>
+    </div>
+    <div
+      class="mm-box mm-text mm-help-text mm-text--body-sm mm-box--color-text-default"
+    >
+      <span>
+         
+        This allows the third party to spend 
+        <span
+          class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
+        >
+          7
+           
+          TST
+        </span>
+         from your current balance.
+         
+      </span>
+    </div>
+    <a
+      class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium 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"
+      href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Learn more
+    </a>
   </div>
 </div>
 `;

ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

@@ -1,31 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Box from '../../ui/box';
 import Tooltip from '../../ui/tooltip';
 import {
   TextColor,
   TextVariant,
   Display,
+  AlignItems,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 
-import { Icon, IconName, IconSize, Text } from '../../component-library';
+import { Icon, IconName, IconSize, Text, Box } from '../../component-library';
 
 export const CustomSpendingCapTooltip = ({
   tooltipContentText,
   tooltipIcon,
 }) => (
-  <Box display={Display.InlineBlock}>
+  <Box display={Display.InlineFlex} alignItems={AlignItems.center}>
     <Tooltip
       interactive
       position="top"
       html={
-        <Text
+        <Text variant={TextVariant.bodySm} color={TextColor.textAlternative}>
-          variant={TextVariant.bodySm}
-          as="h6"
-          margin={3}
-          color={TextColor.textAlternative}
-          className="form-field__heading-title__tooltip"
-        >
           {tooltipContentText}
         </Text>
       }
@@ -33,13 +28,16 @@ export const CustomSpendingCapTooltip = ({
       {tooltipIcon ? (
         <Icon
           name={IconName.Danger}
-          className="form-field__heading-title__tooltip__warning-icon"
           size={IconSize.Inherit}
-          style={{ 'vertical-align': 'bottom' }}
+          color={IconColor.errorDefault}
         />
       ) : (
         tooltipIcon !== '' && (
-          <Icon name={IconName.Question} size={IconSize.Inherit} />
+          <Icon
+            name={IconName.Question}
+            size={IconSize.Inherit}
+            color={IconColor.iconAlternative}
+          />
         )
       )}
     </Tooltip>

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -1,25 +1,30 @@
 import React, { useState, useContext, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import BigNumber from 'bignumber.js';
 import { addHexPrefix } from 'ethereumjs-util';
-
 import { I18nContext } from '../../../contexts/i18n';
-import FormField from '../../ui/form-field';
-import { Text, ButtonLink, Icon, IconName, Box } from '../../component-library';
 import {
   AlignItems,
   Display,
   FlexDirection,
-  TextAlign,
   TextVariant,
-  JustifyContent,
   Size,
-  BlockSize,
   BackgroundColor,
   TextColor,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
+import {
+  Text,
+  ButtonLink,
+  Icon,
+  IconName,
+  IconSize,
+  Label,
+  TextField,
+  HelpText,
+  Box,
+} from '../../component-library';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
 import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
@@ -81,7 +86,6 @@ export default function CustomSpendingCap({
             key="custom-spending-cap"
             variant={TextVariant.bodySmBold}
             as="span"
-            className="custom-spending-cap__input-value-and-token-name"
           >
             {replaceCommaToDot(inputNumber)} {tokenName}
           </Text>,
@@ -198,7 +202,8 @@ export default function CustomSpendingCap({
           as="span"
           color={TextColor.errorDefault}
         >
-          <Icon name={IconName.Warning} /> {t('beCareful')}
+          <Icon name={IconName.Danger} size={IconSize.Inherit} />{' '}
+          {t('beCareful')}
         </Text>,
       ])
     : t('inputLogicEmptyState');
@@ -207,121 +212,103 @@ export default function CustomSpendingCap({
     <>
       <Box
         className="custom-spending-cap"
-        borderRadius={Size.SM}
-        paddingTop={2}
-        paddingRight={6}
-        paddingLeft={6}
         display={Display.Flex}
         alignItems={AlignItems.flexStart}
         flexDirection={FlexDirection.Column}
-        backgroundColor={BackgroundColor.backgroundAlternative}
         gap={2}
+        padding={4}
+        backgroundColor={BackgroundColor.backgroundAlternative}
+        borderRadius={Size.SM}
       >
         <Box
-          justifyContent={JustifyContent.center}
+          display={Display.Flex}
-          display={Display.Block}
+          alignItems={AlignItems.center}
-          className="custom-spending-cap__input"
+          gap={1}
+          width={BlockSize.Full}
         >
-          <label
+          <div>
-            htmlFor={
+            <Label
-              decConversionGreaterThan(customSpendingCap, currentTokenBalance)
+              htmlFor="custom-spending-cap"
-                ? 'custom-spending-cap-input-value'
+              display={Display.Inline}
-                : 'custom-spending-cap'
+              marginRight={1}
-            }
+            >
-          >
+              {t('customSpendingCap')}
-            <FormField
+            </Label>
-              inputRef={inputRef}
+            <CustomSpendingCapTooltip
-              dataTestId="custom-spending-cap-input"
+              tooltipContentText={
-              wrappingLabelProps={{ as: 'div' }}
+                replaceCommaToDot(customSpendingCap)
-              id={
+                  ? chooseTooltipContentText
-                decConversionGreaterThan(customSpendingCap, currentTokenBalance)
+                  : ''
-                  ? 'custom-spending-cap-input-value'
-                  : 'custom-spending-cap'
               }
-              TooltipCustomComponent={
+              tooltipIcon={
-                <CustomSpendingCapTooltip
+                replaceCommaToDot(customSpendingCap)
-                  tooltipContentText={
+                  ? decConversionGreaterThan(
-                    replaceCommaToDot(customSpendingCap)
+                      customSpendingCap,
-                      ? chooseTooltipContentText
+                      currentTokenBalance,
-                      : ''
+                    )
-                  }
+                  : ''
-                  tooltipIcon={
-                    replaceCommaToDot(customSpendingCap)
-                      ? decConversionGreaterThan(
-                          customSpendingCap,
-                          currentTokenBalance,
-                        )
-                      : ''
-                  }
-                />
               }
-              onChange={handleChange}
-              titleText={t('customSpendingCap')}
-              placeholder={t('enterANumber')}
-              error={error}
-              value={customSpendingCap}
-              titleDetail={
-                showUseSiteSuggestionButton && (
-                  <ButtonLink
-                    size={Size.auto}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setShowUseSiteSuggestionButton(false);
-                      handleChange(dappProposedValue);
-                    }}
-                  >
-                    {t('useSiteSuggestion')}
-                  </ButtonLink>
-                )
-              }
-              titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
             />
-            <Box
+          </div>
-              width={BlockSize.Max}
+          {showUseSiteSuggestionButton && (
+            <ButtonLink
               marginLeft="auto"
-              paddingRight={4}
+              size={Size.auto}
-              paddingBottom={2}
+              onClick={(e) => {
-              textAlign={TextAlign.End}
+                e.preventDefault();
-              className={classnames('custom-spending-cap__max', {
+                setShowUseSiteSuggestionButton(false);
-                'custom-spending-cap__max--with-error-message': error,
+                handleChange(dappProposedValue);
-              })}
+              }}
             >
-              <ButtonLink
+              {t('useSiteSuggestion')}
-                size={Size.auto}
+            </ButtonLink>
-                onClick={(e) => {
+          )}
-                  e.preventDefault();
-                  handleChange(currentTokenBalance);
-                }}
-              >
-                {t('max')}
-              </ButtonLink>
-            </Box>
-            <Box
-              className={classnames('custom-spending-cap__description', {
-                'custom-spending-cap__description--with-error-message': error,
-              })}
-            >
-              <Text
-                color={TextColor.textDefault}
-                variant={TextVariant.bodySm}
-                as="h6"
-                paddingTop={2}
-              >
-                {replaceCommaToDot(customSpendingCap)
-                  ? customSpendingCapText
-                  : inputLogicEmptyStateText}
-              </Text>
-              <ButtonLink
-                size={Size.SM}
-                href={ZENDESK_URLS.TOKEN_ALLOWANCE_WITH_SPENDING_CAP}
-                target="_blank"
-                marginBottom={2}
-              >
-                {t('learnMoreUpperCase')}
-              </ButtonLink>
-            </Box>
-          </label>
         </Box>
+        <TextField
+          inputRef={inputRef}
+          inputProps={{
+            'data-testid': 'custom-spending-cap-input',
+            color: decConversionGreaterThan(
+              customSpendingCap,
+              currentTokenBalance,
+            )
+              ? TextColor.errorDefault
+              : TextColor.textDefault,
+            paddingInlineEnd: 4,
+          }}
+          id="custom-spending-cap"
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder={t('enterANumber')}
+          value={customSpendingCap}
+          endAccessory={
+            <ButtonLink
+              onClick={(e) => {
+                e.preventDefault();
+                handleChange(currentTokenBalance);
+              }}
+              data-testid="custom-spending-cap-max-button"
+            >
+              {t('max')}
+            </ButtonLink>
+          }
+          width={BlockSize.Full}
+        />
+        <HelpText
+          color={error ? TextColor.errorDefault : TextColor.textDefault}
+          variant={TextVariant.bodySm}
+        >
+          {error ||
+            (replaceCommaToDot(customSpendingCap)
+              ? customSpendingCapText
+              : inputLogicEmptyStateText)}
+        </HelpText>
+        <ButtonLink
+          size={Size.SM}
+          href={ZENDESK_URLS.TOKEN_ALLOWANCE_WITH_SPENDING_CAP}
+          externalLink
+        >
+          {t('learnMoreUpperCase')}
+        </ButtonLink>
       </Box>
     </>
   );

ui/components/app/custom-spending-cap/custom-spending-cap.stories.js

@@ -1,21 +1,25 @@
 import React from 'react';
+import { useArgs } from '@storybook/client-api';
+
 import CustomSpendingCap from './custom-spending-cap';
 
 export default {
   title: 'Components/App/CustomSpendingCap',
-
   argTypes: {
+    txParams: {
+      control: 'object',
+    },
     tokenName: {
-      control: { type: 'text' },
+      control: 'text',
     },
     currentTokenBalance: {
-      control: { type: 'number' },
+      control: 'text',
     },
     dappProposedValue: {
-      control: { type: 'text' },
+      control: 'text',
     },
     siteOrigin: {
-      control: { type: 'text' },
+      control: 'text',
     },
     passTheErrorText: {
       action: 'passTheErrorText',
@@ -23,32 +27,55 @@ export default {
     decimals: {
       control: 'text',
     },
+    setInputChangeInProgress: {
+      action: 'setInputChangeInProgress',
+    },
     customSpendingCap: {
-      control: { type: 'text' },
+      control: 'text',
+    },
+    setCustomSpendingCap: {
+      action: 'setCustomSpendingCap',
     },
   },
   args: {
     tokenName: 'DAI',
-    currentTokenBalance: 200.12,
+    currentTokenBalance: '200.12',
     dappProposedValue: '7',
     siteOrigin: 'Uniswap.org',
     decimals: '4',
     customSpendingCap: '7',
+    txParams: {
+      data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+      from: '0x8eeee1781fd885ff5ddef7789486676961873d12',
+      gas: '0xb41b',
+      maxFeePerGas: '0x4a817c800',
+      maxPriorityFeePerGas: '0x4a817c800',
+      to: '0x665933d73375e385bef40abcccea8b4cccc32d4c',
+      value: '0x0',
+    },
   },
 };
 
-export const DefaultStory = (args) => {
+const Template = (args) => {
-  return <CustomSpendingCap {...args} />;
+  const [{ customSpendingCap }, updateArgs] = useArgs();
+  const handleOnChange = (value) => {
+    updateArgs({ customSpendingCap: value });
+  };
+  return (
+    <CustomSpendingCap
+      {...args}
+      customSpendingCap={customSpendingCap}
+      setCustomSpendingCap={handleOnChange}
+    />
+  );
 };
 
+export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const CustomSpendingCapStory = (args) => {
+export const CustomSpendingCapStory = Template.bind({});
-  return <CustomSpendingCap {...args} />;
+CustomSpendingCapStory.storyName = 'CustomSpendingCap';
-};
-CustomSpendingCapStory.storyName = 'CustomSpendingCapStory';
 
 CustomSpendingCapStory.args = {
-  ...DefaultStory.args,
   customSpendingCap: '8',
 };

ui/components/app/custom-spending-cap/index.scss

@@ -1,41 +0,0 @@
-.custom-spending-cap {
-  &__input-value-and-token-name {
-    display: contents;
-  }
-
-  &__max {
-    position: relative;
-    margin-top: -30px;
-
-    &--with-error-message {
-      margin-top: -66px;
-    }
-  }
-
-  &__input {
-    width: 100%;
-  }
-
-  &__description {
-    word-break: break-word;
-
-    &--with-error-message {
-      margin-top: 30px;
-    }
-  }
-
-  #custom-spending-cap-input-value {
-    color: var(--color-error-default);
-    padding-inline-end: 60px;
-  }
-
-  #custom-spending-cap {
-    padding-inline-end: 60px;
-  }
-
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']:hover::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-}

ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -344,103 +344,84 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
       class="box box--margin-4 box--sm:margin-4 box--md:margin-3 box--lg:margin-4 box--flex-direction-row"
     >
       <div
-        class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
+        class="mm-box custom-spending-cap mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
       >
         <div
-          class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--width-full"
         >
-          <label
+          <div>
-            for="custom-spending-cap"
+            <label
-          >
+              class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-right-1 mm-box--display-inline mm-box--align-items-center mm-box--color-text-default"
-            <div
+              for="custom-spending-cap"
-              class="form-field"
             >
-              <div
+              Custom spending cap
-                class="mm-box"
+            </label>
-              >
+            <div
+              class="mm-box mm-box--display-inline-flex mm-box--align-items-center"
+            >
+              <div>
                 <div
-                  class="form-field__heading"
+                  aria-describedby="tippy-tooltip-3"
+                  class=""
+                  data-original-title="null"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
                 >
-                  <div
+                  <span
-                    class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
+                    class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-icon-alternative"
-                  >
+                    style="mask-image: url('./images/icons/question.svg');"
-                    <h6
+                  />
-                      class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
-                    >
-                      Custom spending cap
-                    </h6>
-                    
-                    <div
-                      class="box box--display-inline-block box--flex-direction-row"
-                    >
-                      <div>
-                        <div
-                          aria-describedby="tippy-tooltip-3"
-                          class=""
-                          data-original-title="null"
-                          data-tooltipped=""
-                          style="display: inline;"
-                          tabindex="0"
-                        >
-                          <span
-                            class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
-                            style="mask-image: url('./images/icons/question.svg');"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
-                <input
-                  class="form-field__input"
-                  data-testid="custom-spending-cap-input"
-                  id="custom-spending-cap"
-                  placeholder="Enter a number"
-                  type="text"
-                  value="7"
-                />
-                
               </div>
             </div>
-            <div
+          </div>
-              class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
-            >
-              <button
-                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium 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"
-              >
-                Max
-              </button>
-            </div>
-            <div
-              class="mm-box custom-spending-cap__description"
-            >
-              <h6
-                class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
-              >
-                <span>
-                   
-                  This allows the third party to spend 
-                  <span
-                    class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
-                  >
-                    7
-                     
-                    TST
-                  </span>
-                   from your current balance.
-                   
-                </span>
-              </h6>
-              <a
-                class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 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"
-                href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
-                target="_blank"
-              >
-                Learn more
-              </a>
-            </div>
-          </label>
         </div>
+        <div
+          class="box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate box--padding-right-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
+        >
+          <input
+            autocomplete="off"
+            class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--padding-inline-end-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+            data-testid="custom-spending-cap-input"
+            focused="true"
+            id="custom-spending-cap"
+            placeholder="Enter a number"
+            type="text"
+            value="7"
+          />
+          <button
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium 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="custom-spending-cap-max-button"
+          >
+            Max
+          </button>
+        </div>
+        <div
+          class="mm-box mm-text mm-help-text mm-text--body-sm mm-box--color-text-default"
+        >
+          <span>
+             
+            This allows the third party to spend 
+            <span
+              class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
+            >
+              7
+               
+              TST
+            </span>
+             from your current balance.
+             
+          </span>
+        </div>
+        <a
+          class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium 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"
+          href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn more
+        </a>
       </div>
     </div>
     <div