Skip to content

Commit afc4f7d

Browse files
matteoscuratidarkwing
authored and
seaona
committed
fix: remove segmented tab on confirm import modal (#29720)
## **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]>
1 parent a3a8468 commit afc4f7d

File tree

1 file changed

+167
-167
lines changed

1 file changed

+167
-167
lines changed

‎ui/components/multichain/import-tokens-modal/import-tokens-modal.js

+167-167
Original file line numberDiff line numberDiff line change
@@ -518,17 +518,17 @@ export const ImportTokensModal = ({ onClose }) => {
518518
{t('importTokensCamelCase')}
519519
</ModalHeader>
520520
<Box className="import-tokens-modal__body">
521-
<Tabs t={t} tabsClassName="import-tokens-modal__tabs">
522-
{showSearchTab ? (
523-
<Tab
524-
activeClassName="import-tokens-modal__active-tab"
525-
buttonClassName="import-tokens-modal__button-tab"
526-
tabKey="search"
527-
name={t('search')}
528-
>
529-
{isConfirming ? (
530-
<ImportTokensModalConfirm />
531-
) : (
521+
{isConfirming ? (
522+
<ImportTokensModalConfirm />
523+
) : (
524+
<Tabs t={t} tabsClassName="import-tokens-modal__tabs">
525+
{showSearchTab ? (
526+
<Tab
527+
activeClassName="import-tokens-modal__active-tab"
528+
buttonClassName="import-tokens-modal__button-tab"
529+
tabKey="search"
530+
name={t('search')}
531+
>
532532
<Box paddingTop={4}>
533533
{useTokenDetection ? null : (
534534
<Box paddingLeft={4} paddingRight={4}>
@@ -577,170 +577,170 @@ export const ImportTokensModal = ({ onClose }) => {
577577
onToggleToken={(token) => handleToggleToken(token)}
578578
/>
579579
</Box>
580-
)}
581-
</Tab>
582-
) : null}
583-
<Tab
584-
activeClassName="import-tokens-modal__active-tab"
585-
buttonClassName="import-tokens-modal__button-tab"
586-
tabKey="customToken"
587-
name={t('customToken')}
588-
>
589-
{isConfirming ? (
590-
<ImportTokensModalConfirm />
591-
) : (
592-
<Box paddingTop={4}>
593-
<Box className="import-tokens-modal__custom-token-form__container">
594-
{tokenDetectionInactiveOnNonMainnetSupportedNetwork ? (
595-
<Box paddingLeft={4} paddingRight={4}>
596-
<BannerAlert severity={Severity.Warning}>
597-
<Text variant={TextVariant.bodyMd}>
598-
{t(
599-
'customTokenWarningInTokenDetectionNetworkWithTDOFF',
600-
[
601-
<ButtonLink
602-
key="import-token-security-risk"
603-
rel="noopener noreferrer"
604-
target="_blank"
605-
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
606-
>
607-
{t('tokenScamSecurityRisk')}
608-
</ButtonLink>,
609-
<ButtonLink
610-
type="link"
611-
key="import-token-token-detection-announcement"
612-
onClick={() => {
613-
onClose();
614-
history.push(
615-
`${SECURITY_ROUTE}#auto-detect-tokens`,
616-
);
617-
}}
618-
>
619-
{t('inYourSettings')}
620-
</ButtonLink>,
621-
],
622-
)}
623-
</Text>
624-
</BannerAlert>
625-
</Box>
626-
) : (
627-
<Box paddingLeft={4} paddingRight={4}>
628-
<BannerAlert
629-
severity={
630-
isDynamicTokenListAvailable
631-
? Severity.Warning
632-
: Severity.Info
633-
}
634-
data-testid="custom-token-warning"
635-
>
636-
<Text variant={TextVariant.bodyMd}>
637-
{t(
580+
</Tab>
581+
) : null}
582+
<Tab
583+
activeClassName="import-tokens-modal__active-tab"
584+
buttonClassName="import-tokens-modal__button-tab"
585+
tabKey="customToken"
586+
name={t('customToken')}
587+
>
588+
{isConfirming ? (
589+
<ImportTokensModalConfirm />
590+
) : (
591+
<Box paddingTop={4}>
592+
<Box className="import-tokens-modal__custom-token-form__container">
593+
{tokenDetectionInactiveOnNonMainnetSupportedNetwork ? (
594+
<Box paddingLeft={4} paddingRight={4}>
595+
<BannerAlert severity={Severity.Warning}>
596+
<Text variant={TextVariant.bodyMd}>
597+
{t(
598+
'customTokenWarningInTokenDetectionNetworkWithTDOFF',
599+
[
600+
<ButtonLink
601+
key="import-token-security-risk"
602+
rel="noopener noreferrer"
603+
target="_blank"
604+
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
605+
>
606+
{t('tokenScamSecurityRisk')}
607+
</ButtonLink>,
608+
<ButtonLink
609+
type="link"
610+
key="import-token-token-detection-announcement"
611+
onClick={() => {
612+
onClose();
613+
history.push(
614+
`${SECURITY_ROUTE}#auto-detect-tokens`,
615+
);
616+
}}
617+
>
618+
{t('inYourSettings')}
619+
</ButtonLink>,
620+
],
621+
)}
622+
</Text>
623+
</BannerAlert>
624+
</Box>
625+
) : (
626+
<Box paddingLeft={4} paddingRight={4}>
627+
<BannerAlert
628+
severity={
638629
isDynamicTokenListAvailable
639-
? 'customTokenWarningInTokenDetectionNetwork'
640-
: 'customTokenWarningInNonTokenDetectionNetwork',
641-
[
642-
<ButtonLink
643-
key="import-token-fake-token-warning"
644-
rel="noopener noreferrer"
645-
target="_blank"
646-
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
647-
>
648-
{t('learnScamRisk')}
649-
</ButtonLink>,
650-
],
651-
)}
652-
</Text>
653-
</BannerAlert>
654-
</Box>
655-
)}
656-
<Box>
657-
<FormTextField
658-
paddingLeft={4}
659-
paddingRight={4}
660-
paddingTop={6}
661-
label={t('tokenContractAddress')}
662-
value={customAddress}
663-
onChange={(e) =>
664-
handleCustomAddressChange(e.target.value)
665-
}
666-
helpText={
667-
customAddressError ||
668-
mainnetTokenWarning ||
669-
nftAddressError
670-
}
671-
error={
672-
customAddressError ||
673-
mainnetTokenWarning ||
674-
nftAddressError
675-
}
676-
textFieldProps={{
677-
className:
630+
? Severity.Warning
631+
: Severity.Info
632+
}
633+
data-testid="custom-token-warning"
634+
>
635+
<Text variant={TextVariant.bodyMd}>
636+
{t(
637+
isDynamicTokenListAvailable
638+
? 'customTokenWarningInTokenDetectionNetwork'
639+
: 'customTokenWarningInNonTokenDetectionNetwork',
640+
[
641+
<ButtonLink
642+
key="import-token-fake-token-warning"
643+
rel="noopener noreferrer"
644+
target="_blank"
645+
href={ZENDESK_URLS.TOKEN_SAFETY_PRACTICES}
646+
>
647+
{t('learnScamRisk')}
648+
</ButtonLink>,
649+
],
650+
)}
651+
</Text>
652+
</BannerAlert>
653+
</Box>
654+
)}
655+
<Box>
656+
<FormTextField
657+
paddingLeft={4}
658+
paddingRight={4}
659+
paddingTop={6}
660+
label={t('tokenContractAddress')}
661+
value={customAddress}
662+
onChange={(e) =>
663+
handleCustomAddressChange(e.target.value)
664+
}
665+
helpText={
678666
customAddressError ||
679667
mainnetTokenWarning ||
680668
nftAddressError
681-
? 'import-tokens-modal__custom-token-form__text-outline-error'
682-
: 'import-tokens-modal__custom-token-form__text-outline-success',
683-
}}
684-
inputProps={{
685-
'data-testid': 'import-tokens-modal-custom-address',
686-
}}
687-
/>
688-
{showSymbolAndDecimals && (
689-
<Box>
690-
<FormTextField
691-
paddingLeft={4}
692-
paddingRight={4}
693-
paddingTop={4}
694-
label={<>{t('tokenSymbol')}</>}
695-
value={customSymbol}
696-
onChange={(e) =>
697-
handleCustomSymbolChange(e.target.value)
698-
}
699-
helpText={customSymbolError}
700-
error={customSymbolError}
701-
textFieldProps={{
702-
className: customSymbolError
703-
? 'import-tokens-modal__custom-token-form__text-outline-error'
704-
: 'import-tokens-modal__custom-token-form__text-outline-success',
705-
}}
706-
inputProps={{
707-
'data-testid':
708-
'import-tokens-modal-custom-symbol',
709-
}}
710-
/>
711-
<FormTextField
712-
paddingLeft={4}
713-
paddingRight={4}
714-
paddingTop={4}
715-
label={t('decimal')}
716-
type="number"
717-
value={customDecimals}
718-
onChange={(e) =>
719-
handleCustomDecimalsChange(e.target.value)
720-
}
721-
helpText={customDecimalsError}
722-
error={customDecimalsError}
723-
disabled={decimalAutoFilled}
724-
min={MIN_DECIMAL_VALUE}
725-
max={MAX_DECIMAL_VALUE}
726-
textFieldProps={{
727-
className: customDecimalsError
669+
}
670+
error={
671+
customAddressError ||
672+
mainnetTokenWarning ||
673+
nftAddressError
674+
}
675+
textFieldProps={{
676+
className:
677+
customAddressError ||
678+
mainnetTokenWarning ||
679+
nftAddressError
728680
? 'import-tokens-modal__custom-token-form__text-outline-error'
729681
: 'import-tokens-modal__custom-token-form__text-outline-success',
730-
}}
731-
inputProps={{
732-
'data-testid':
733-
'import-tokens-modal-custom-decimals',
734-
}}
735-
/>
736-
</Box>
737-
)}
682+
}}
683+
inputProps={{
684+
'data-testid': 'import-tokens-modal-custom-address',
685+
}}
686+
/>
687+
{showSymbolAndDecimals && (
688+
<Box>
689+
<FormTextField
690+
paddingLeft={4}
691+
paddingRight={4}
692+
paddingTop={4}
693+
label={<>{t('tokenSymbol')}</>}
694+
value={customSymbol}
695+
onChange={(e) =>
696+
handleCustomSymbolChange(e.target.value)
697+
}
698+
helpText={customSymbolError}
699+
error={customSymbolError}
700+
textFieldProps={{
701+
className: customSymbolError
702+
? 'import-tokens-modal__custom-token-form__text-outline-error'
703+
: 'import-tokens-modal__custom-token-form__text-outline-success',
704+
}}
705+
inputProps={{
706+
'data-testid':
707+
'import-tokens-modal-custom-symbol',
708+
}}
709+
/>
710+
<FormTextField
711+
paddingLeft={4}
712+
paddingRight={4}
713+
paddingTop={4}
714+
label={t('decimal')}
715+
type="number"
716+
value={customDecimals}
717+
onChange={(e) =>
718+
handleCustomDecimalsChange(e.target.value)
719+
}
720+
helpText={customDecimalsError}
721+
error={customDecimalsError}
722+
disabled={decimalAutoFilled}
723+
min={MIN_DECIMAL_VALUE}
724+
max={MAX_DECIMAL_VALUE}
725+
textFieldProps={{
726+
className: customDecimalsError
727+
? 'import-tokens-modal__custom-token-form__text-outline-error'
728+
: 'import-tokens-modal__custom-token-form__text-outline-success',
729+
}}
730+
inputProps={{
731+
'data-testid':
732+
'import-tokens-modal-custom-decimals',
733+
}}
734+
/>
735+
</Box>
736+
)}
737+
</Box>
738738
</Box>
739739
</Box>
740-
</Box>
741-
)}
742-
</Tab>
743-
</Tabs>
740+
)}
741+
</Tab>
742+
</Tabs>
743+
)}
744744
</Box>
745745
{isConfirming ? (
746746
<Box

0 commit comments

Comments
 (0)