Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Part of #17670: Replace Typography with Text component in CancelSpeedupPopover #18638

Merged
merged 18 commits into from
Jun 26, 2023
Merged

Part of #17670: Replace Typography with Text component in CancelSpeedupPopover #18638

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
1b41e2c
create story
kremalicious Apr 18, 2023
fd959f5
replace Typography with Text component
kremalicious Apr 18, 2023
a4b1d55
review changes
kremalicious Apr 20, 2023
568a932
strong tag support within Text component
kremalicious Apr 25, 2023
e0c6db3
replace `strong` with new `Text as="strong"`
kremalicious Apr 27, 2023
62cc742
remove unneccessary css from fa564e3f036f1439f9f220cca23595b508760614
kremalicious Apr 27, 2023
2008ada
add text variant definition
kremalicious Apr 28, 2023
23b9e6a
Updating text variant of button
georgewrmarshall May 5, 2023
23626ad
restrore proper spacing between elements
kremalicious May 6, 2023
31992b8
Merge branch 'develop' into feature/17670-cancel-speedup-popover
georgewrmarshall May 9, 2023
cfc1b49
Merge branch 'develop' into feature/17670-cancel-speedup-popover
kremalicious May 20, 2023
ac5922e
Merge branch 'develop' into feature/17670-cancel-speedup-popover
kremalicious Jun 1, 2023
bc03fb3
Merge branch 'develop' into feature/17670-cancel-speedup-popover
georgewrmarshall Jun 1, 2023
e8074f0
Merge branch 'develop' into feature/17670-cancel-speedup-popover
garrettbear Jun 1, 2023
73307fd
Quick fix for test
georgewrmarshall Jun 19, 2023
a6fb0dd
Merge branch 'develop' into feature/17670-cancel-speedup-popover
georgewrmarshall Jun 19, 2023
a0f3ea7
Adding key
georgewrmarshall Jun 20, 2023
bdd3844
Merge branch 'develop' into feature/17670-cancel-speedup-popover
georgewrmarshall Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 27 additions & 26 deletions ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useSelector } from 'react-redux';
import React, { useEffect } from 'react';
import { Text } from '../../component-library';
import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
import {
AlignItems,
Expand All @@ -16,10 +15,10 @@ import { useTransactionModalContext } from '../../../contexts/transaction-modal'
import EditGasFeeButton from '../edit-gas-fee-button';
import GasDetailsItem from '../gas-details-item';
import Box from '../../ui/box';
import Button from '../../ui/button';
import InfoTooltip from '../../ui/info-tooltip';
import Popover from '../../ui/popover';
import AppLoadingSpinner from '../app-loading-spinner';
import { Text, Button, ButtonLink } from '../../component-library';

const CancelSpeedupPopover = () => {
const {
Expand Down Expand Up @@ -100,36 +99,40 @@ const CancelSpeedupPopover = () => {
alignItems={AlignItems.center}
display={DISPLAY.FLEX}
variant={TextVariant.bodySm}
as="h6"
marginTop={0}
marginBottom={2}
marginBottom={4}
kremalicious marked this conversation as resolved.
Show resolved Hide resolved
className="cancel-speedup-popover__description"
>
{t('cancelSpeedUpLabel', [
<strong key="cancelSpeedupReplace">{t('replace')}</strong>,
<Text
as="strong"
variant={TextVariant.bodySm}
key="cancelSpeedupCancel"
>
{t('replace')}
</Text>,
])}
<InfoTooltip
position="top"
contentText={
<Box>
{t('cancelSpeedUpTransactionTooltip', [
editGasMode === EditGasModes.cancel
? t('cancel')
: t('speedUp'),
])}
<div>
<a
href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
target="_blank"
rel="noopener noreferrer"
>
{t('learnMoreUpperCase')}
</a>
</div>
</Box>
<>
<Text variant={TextVariant.bodySm}>
{t('cancelSpeedUpTransactionTooltip', [
editGasMode === EditGasModes.cancel
? t('cancel')
: t('speedUp'),
])}
</Text>
<ButtonLink
variant={TextVariant.bodySm}
href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
target="_blank"
>
{t('learnMoreUpperCase')}
</ButtonLink>
</>
Comment on lines +112 to +127
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the choice to remove the in favor of a fragment related to the issue?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably not particularly related to the issue but could have some minor performance benefits as there are no utility props being used on the Box so could save a small amount of render time?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool

}
/>
</Text>
<div className="cancel-speedup-popover__separator" />
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
Expand All @@ -143,9 +146,7 @@ const CancelSpeedupPopover = () => {
<GasDetailsItem />
</Box>
</Box>
<Button type="primary" onClick={submitTransactionChange}>
{t('submit')}
</Button>
<Button onClick={submitTransactionChange}>{t('submit')}</Button>
</div>
</Popover>
);
Expand Down
80 changes: 80 additions & 0 deletions ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { Provider } from 'react-redux';
import BigNumber from 'bignumber.js';
import configureStore from '../../../store/store';
import { TransactionModalContext } from '../../../contexts/transaction-modal';
import mockEstimates from '../../../../test/data/mock-estimates.json';
import mockState from '../../../../test/data/mock-state.json';
import {
EditGasModes,
GasEstimateTypes,
} from '../../../../shared/constants/gas';
import { decGWEIToHexWEI } from '../../../../shared/modules/conversion.utils';
import { GasFeeContextProvider } from '../../../contexts/gasFee';
import CancelSpeedupPopover from './cancel-speedup-popover';

const store = configureStore({
metamask: {
...mockState.metamask,
accounts: {
[mockState.metamask.selectedAddress]: {
address: mockState.metamask.selectedAddress,
balance: '0x1F4',
},
},
gasFeeEstimates: mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates,
},
});

const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI =
mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates.medium
.suggestedMaxFeePerGas;

const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI = new BigNumber(
decGWEIToHexWEI(MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI),
16,
);

const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI =
MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI.toString(16);

export default {
title: 'Components/App/CancelSpeedupPopover',
component: CancelSpeedupPopover,
decorators: [
(story) => (
<Provider store={store}>
<GasFeeContextProvider
transaction={{
userFeeLevel: 'tenPercentIncreased',
txParams: {
gas: '0x5208',
maxFeePerGas: MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI,
maxPriorityFeePerGas: '0x59682f00',
},
}}
editGasMode={EditGasModes.cancel}
>
<TransactionModalContext.Provider
value={{
closeModal: () => undefined,
currentModal: 'cancelSpeedUpTransaction',
}}
>
{story()}
</TransactionModalContext.Provider>
</GasFeeContextProvider>
</Provider>
),
],
};

export const DefaultStory = (args) => {
return (
<div style={{ width: '600px' }}>
<CancelSpeedupPopover {...args} />
</div>
);
};

DefaultStory.storyName = 'Default';
3 changes: 1 addition & 2 deletions ui/components/app/cancel-speedup-popover/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@
height: calc(100% + 30px);
}

&__separator {
&__description {
border-bottom: 1px solid var(--color-border-default);
width: 100%;
}
}