From af8fa3404fc89b9b2157b5d7ccdaf3cf0ebb2c87 Mon Sep 17 00:00:00 2001 From: "devin-ai-integration[bot]" <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 25 Sep 2024 09:36:01 -0700 Subject: [PATCH] refactor: replace Typography with Text component in gas-timing.component.js (#27053) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This pull request replaces the `Typography` component with the new `Text` component in the file `ui/pages/confirmations/components/gas-timing/gas-timing.component.js`. This change is part of the ongoing effort to migrate from the old `Typography` component to the new `Text` component across the MetaMask extension codebase. The main improvements in this change are: 1. Consistency with the new design system 2. Better maintainability by using the latest component library 3. Improved performance due to the optimized `Text` component Devin Run Link: https://preview.devin.ai/devin/d0382f35dd004ffba790f08bbd5ffc9c [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27053?quickstart=1) ## **Related issues** Partially Fixes: https://github.com/MetaMask/metamask-extension/issues/17670 ## **Manual testing steps** 1. Go to the latest build of storybook in this PR 2. Navigate to the GasTiming component 3. Verify that the component renders correctly with the new Text component 4. Check that all text styles and layouts are preserved ## **Screenshots/Recordings** ### **Before** Screenshot 2024-09-11 at 8 40 05 AM ### **After** Screenshot 2024-09-11 at 8 43 58 AM Screenshot 2024-09-11 at 8 44 35 AM ## **Pre-merge author checklist** - [X] I've followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [X] I've included tests if applicable - [X] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. If you have any feedback, you can leave comments in the PR and I'll address them in the app! --------- Co-authored-by: georgewrmarshall --- .../gas-timing/gas-timing.component.js | 9 ++++----- .../gas-timing/gas-timing.stories.tsx | 18 ++++++++++++++++-- .../components/gas-timing/index.scss | 12 ------------ ui/pages/confirmations/components/index.scss | 1 - 4 files changed, 20 insertions(+), 20 deletions(-) delete mode 100644 ui/pages/confirmations/components/gas-timing/index.scss diff --git a/ui/pages/confirmations/components/gas-timing/gas-timing.component.js b/ui/pages/confirmations/components/gas-timing/gas-timing.component.js index 51522e025add..5c8e054647c3 100644 --- a/ui/pages/confirmations/components/gas-timing/gas-timing.component.js +++ b/ui/pages/confirmations/components/gas-timing/gas-timing.component.js @@ -5,7 +5,6 @@ import React, { useContext, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { GasEstimateTypes } from '../../../../../shared/constants/gas'; import { Box, Text } from '../../../../components/component-library'; -import Typography from '../../../../components/ui/typography/typography'; import { useGasFeeContext } from '../../../../contexts/gasFee'; import { I18nContext } from '../../../../contexts/i18n'; import { @@ -19,7 +18,6 @@ import { FontWeight, TextColor, TextVariant, - TypographyVariant, } from '../../../../helpers/constants/design-system'; import { GAS_FORM_ERRORS, @@ -114,13 +112,14 @@ export default function GasTiming({ gasWarnings?.maxFee === GAS_FORM_ERRORS.MAX_FEE_TOO_LOW ) { return ( - {t('editGasTooLow')} - + ); } diff --git a/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx b/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx index 35d1ad1cb1f4..a92636157948 100644 --- a/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx +++ b/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx @@ -4,6 +4,7 @@ import { Provider } from 'react-redux'; import configureStore from '../../../../store/store'; import GasTiming from './gas-timing.component'; import mockState from '../../../../../test/data/mock-state.json'; +import { GAS_FORM_ERRORS } from '../../../../helpers/constants/gas'; const storeMock = configureStore({ metamask: { @@ -33,8 +34,8 @@ const meta: Meta = { }, }, args: { - maxFeePerGas: 0, - maxPriorityFeePerGas: 0, + maxFeePerGas: '0', + maxPriorityFeePerGas: '0', gasWarnings: {}, }, }; @@ -45,3 +46,16 @@ type Story = StoryObj; export const DefaultStory: Story = {}; DefaultStory.storyName = 'Default'; + +export const GasTooLowStory: Story = { + args: { + maxFeePerGas: '1', // Simulate low gas fee + maxPriorityFeePerGas: '1', // Simulate low priority fee + gasWarnings: { + maxPriorityFee: GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW, + maxFee: GAS_FORM_ERRORS.MAX_FEE_TOO_LOW, + }, + }, +}; + +GasTooLowStory.storyName = 'GasTooLow'; diff --git a/ui/pages/confirmations/components/gas-timing/index.scss b/ui/pages/confirmations/components/gas-timing/index.scss deleted file mode 100644 index a869df6716f6..000000000000 --- a/ui/pages/confirmations/components/gas-timing/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -.typography.gas-timing { - color: var(--color-text-alternative); - - .info-tooltip { - display: inline-block; - margin-inline-start: 4px; - - path { - fill: var(--color-error-default); - } - } -} diff --git a/ui/pages/confirmations/components/index.scss b/ui/pages/confirmations/components/index.scss index 4e200a82d0e3..275dcfa3b032 100644 --- a/ui/pages/confirmations/components/index.scss +++ b/ui/pages/confirmations/components/index.scss @@ -26,7 +26,6 @@ @import 'edit-gas-fee-popover/edit-gas-tooltip/index'; @import 'edit-gas-popover/index'; @import 'gas-details-item/index'; -@import 'gas-timing/index'; @import 'multilayer-fee-message/index'; @import 'review-spending-cap/index'; @import 'set-approval-for-all-warning/index';