Skip to content

Commit

Permalink
fix: remove segmented tab on confirm import modal (#29720)
Browse files Browse the repository at this point in the history 
## **Description**

This PR removes the segmented tab on the confirm import token modal as
described in this issue:
#26788

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29720?quickstart=1)

## **Related issues**

#26788

## **Manual testing steps**

1. Start the procedure to import a token
2. Confirm the token to be imported
3. On the confirmation page, the tab should no longer be visible

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

### **After**


https://www.loom.com/share/b3a522ccf9974c06a73ea6236db89cc6?sid=b56a3ed9-6a06-4a23-8ed1-eecc1fa73d8a

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.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/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

---------

Co-authored-by: David Walsh <[email protected]>
  • Loading branch information
@matteoscurati @darkwing
matteoscurati and darkwing authored Feb 3, 2025
1 parent 2af746e commit 2a81420
Showing 1 changed file with 167 additions and 167 deletions.
334 changes: 167 additions & 167 deletions ui/components/multichain/import-tokens-modal/import-tokens-modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,17 +518,17 @@ export const ImportTokensModal = ({ onClose }) => {
{t('importTokensCamelCase')}
</ModalHeader>
<Box className="import-tokens-modal__body">
<Tabs t={t} tabsClassName="import-tokens-modal__tabs">
{showSearchTab ? (
<Tab
activeClassName="import-tokens-modal__active-tab"
buttonClassName="import-tokens-modal__button-tab"
tabKey="search"
name={t('search')}
>
{isConfirming ? (
<ImportTokensModalConfirm />
) : (
{isConfirming ? (
<ImportTokensModalConfirm />
) : (
<Tabs t={t} tabsClassName="import-tokens-modal__tabs">
{showSearchTab ? (
<Tab
activeClassName="import-tokens-modal__active-tab"
buttonClassName="import-tokens-modal__button-tab"
tabKey="search"
name={t('search')}
>
<Box paddingTop={4}>
{useTokenDetection ? null : (
<Box paddingLeft={4} paddingRight={4}>
Expand Down Expand Up @@ -577,170 +577,170 @@ export const ImportTokensModal = ({ onClose }) => {
onToggleToken={(token) => handleToggleToken(token)}
/>
</Box>
)}
</Tab>
) : null}
<Tab
activeClassName="import-tokens-modal__active-tab"
buttonClassName="import-tokens-modal__button-tab"
tabKey="customToken"
name={t('customToken')}
>
{isConfirming ? (
<ImportTokensModalConfirm />
) : (
<Box paddingTop={4}>
<Box className="import-tokens-modal__custom-token-form__container">
{tokenDetectionInactiveOnNonMainnetSupportedNetwork ? (
<Box paddingLeft={4} paddingRight={4}>
<BannerAlert severity={Severity.Warning}>
<Text variant={TextVariant.bodyMd}>
{t(
'customTokenWarningInTokenDetectionNetworkWithTDOFF',
[
<ButtonLink
key="import-token-security-risk"
rel="noopener noreferrer"
target="_blank"
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
>
{t('tokenScamSecurityRisk')}
</ButtonLink>,
<ButtonLink
type="link"
key="import-token-token-detection-announcement"
onClick={() => {
onClose();
history.push(
`${SECURITY_ROUTE}#auto-detect-tokens`,
);
}}
>
{t('inYourSettings')}
</ButtonLink>,
],
)}
</Text>
</BannerAlert>
</Box>
) : (
<Box paddingLeft={4} paddingRight={4}>
<BannerAlert
severity={
isDynamicTokenListAvailable
? Severity.Warning
: Severity.Info
}
data-testid="custom-token-warning"
>
<Text variant={TextVariant.bodyMd}>
{t(
</Tab>
) : null}
<Tab
activeClassName="import-tokens-modal__active-tab"
buttonClassName="import-tokens-modal__button-tab"
tabKey="customToken"
name={t('customToken')}
>
{isConfirming ? (
<ImportTokensModalConfirm />
) : (
<Box paddingTop={4}>
<Box className="import-tokens-modal__custom-token-form__container">
{tokenDetectionInactiveOnNonMainnetSupportedNetwork ? (
<Box paddingLeft={4} paddingRight={4}>
<BannerAlert severity={Severity.Warning}>
<Text variant={TextVariant.bodyMd}>
{t(
'customTokenWarningInTokenDetectionNetworkWithTDOFF',
[
<ButtonLink
key="import-token-security-risk"
rel="noopener noreferrer"
target="_blank"
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
>
{t('tokenScamSecurityRisk')}
</ButtonLink>,
<ButtonLink
type="link"
key="import-token-token-detection-announcement"
onClick={() => {
onClose();
history.push(
`${SECURITY_ROUTE}#auto-detect-tokens`,
);
}}
>
{t('inYourSettings')}
</ButtonLink>,
],
)}
</Text>
</BannerAlert>
</Box>
) : (
<Box paddingLeft={4} paddingRight={4}>
<BannerAlert
severity={
isDynamicTokenListAvailable
? 'customTokenWarningInTokenDetectionNetwork'
: 'customTokenWarningInNonTokenDetectionNetwork',
[
<ButtonLink
key="import-token-fake-token-warning"
rel="noopener noreferrer"
target="_blank"
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
>
{t('learnScamRisk')}
</ButtonLink>,
],
)}
</Text>
</BannerAlert>
</Box>
)}
<Box>
<FormTextField
paddingLeft={4}
paddingRight={4}
paddingTop={6}
label={t('tokenContractAddress')}
value={customAddress}
onChange={(e) =>
handleCustomAddressChange(e.target.value)
}
helpText={
customAddressError ||
mainnetTokenWarning ||
nftAddressError
}
error={
customAddressError ||
mainnetTokenWarning ||
nftAddressError
}
textFieldProps={{
className:
? Severity.Warning
: Severity.Info
}
data-testid="custom-token-warning"
>
<Text variant={TextVariant.bodyMd}>
{t(
isDynamicTokenListAvailable
? 'customTokenWarningInTokenDetectionNetwork'
: 'customTokenWarningInNonTokenDetectionNetwork',
[
<ButtonLink
key="import-token-fake-token-warning"
rel="noopener noreferrer"
target="_blank"
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
>
{t('learnScamRisk')}
</ButtonLink>,
],
)}
</Text>
</BannerAlert>
</Box>
)}
<Box>
<FormTextField
paddingLeft={4}
paddingRight={4}
paddingTop={6}
label={t('tokenContractAddress')}
value={customAddress}
onChange={(e) =>
handleCustomAddressChange(e.target.value)
}
helpText={
customAddressError ||
mainnetTokenWarning ||
nftAddressError
? 'import-tokens-modal__custom-token-form__text-outline-error'
: 'import-tokens-modal__custom-token-form__text-outline-success',
}}
inputProps={{
'data-testid': 'import-tokens-modal-custom-address',
}}
/>
{showSymbolAndDecimals && (
<Box>
<FormTextField
paddingLeft={4}
paddingRight={4}
paddingTop={4}
label={<>{t('tokenSymbol')}</>}
value={customSymbol}
onChange={(e) =>
handleCustomSymbolChange(e.target.value)
}
helpText={customSymbolError}
error={customSymbolError}
textFieldProps={{
className: customSymbolError
? 'import-tokens-modal__custom-token-form__text-outline-error'
: 'import-tokens-modal__custom-token-form__text-outline-success',
}}
inputProps={{
'data-testid':
'import-tokens-modal-custom-symbol',
}}
/>
<FormTextField
paddingLeft={4}
paddingRight={4}
paddingTop={4}
label={t('decimal')}
type="number"
value={customDecimals}
onChange={(e) =>
handleCustomDecimalsChange(e.target.value)
}
helpText={customDecimalsError}
error={customDecimalsError}
disabled={decimalAutoFilled}
min={MIN_DECIMAL_VALUE}
max={MAX_DECIMAL_VALUE}
textFieldProps={{
className: customDecimalsError
}
error={
customAddressError ||
mainnetTokenWarning ||
nftAddressError
}
textFieldProps={{
className:
customAddressError ||
mainnetTokenWarning ||
nftAddressError
? 'import-tokens-modal__custom-token-form__text-outline-error'
: 'import-tokens-modal__custom-token-form__text-outline-success',
}}
inputProps={{
'data-testid':
'import-tokens-modal-custom-decimals',
}}
/>
</Box>
)}
}}
inputProps={{
'data-testid': 'import-tokens-modal-custom-address',
}}
/>
{showSymbolAndDecimals && (
<Box>
<FormTextField
paddingLeft={4}
paddingRight={4}
paddingTop={4}
label={<>{t('tokenSymbol')}</>}
value={customSymbol}
onChange={(e) =>
handleCustomSymbolChange(e.target.value)
}
helpText={customSymbolError}
error={customSymbolError}
textFieldProps={{
className: customSymbolError
? 'import-tokens-modal__custom-token-form__text-outline-error'
: 'import-tokens-modal__custom-token-form__text-outline-success',
}}
inputProps={{
'data-testid':
'import-tokens-modal-custom-symbol',
}}
/>
<FormTextField
paddingLeft={4}
paddingRight={4}
paddingTop={4}
label={t('decimal')}
type="number"
value={customDecimals}
onChange={(e) =>
handleCustomDecimalsChange(e.target.value)
}
helpText={customDecimalsError}
error={customDecimalsError}
disabled={decimalAutoFilled}
min={MIN_DECIMAL_VALUE}
max={MAX_DECIMAL_VALUE}
textFieldProps={{
className: customDecimalsError
? 'import-tokens-modal__custom-token-form__text-outline-error'
: 'import-tokens-modal__custom-token-form__text-outline-success',
}}
inputProps={{
'data-testid':
'import-tokens-modal-custom-decimals',
}}
/>
</Box>
)}
</Box>
</Box>
</Box>
</Box>
)}
</Tab>
</Tabs>
)}
</Tab>
</Tabs>
)}
</Box>
{isConfirming ? (
<Box
Expand Down

0 comments on commit 2a81420

Please sign in to comment.