1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00

NFT setApprovalForAll warning popover (#16195)

* NFT setApprovalForAll  warning popover
This commit is contained in:
amerkadicE 2022-12-06 21:24:07 +01:00 committed by GitHub
parent 5592bc5fff
commit 8885c54f13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 321 additions and 223 deletions

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Bestätigen"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Sie gewähren den Zugriff auf $1, auch auf solche, die Sie in Zukunft besitzen könnten. Die Gegenseite kann jederzeit NFTs aus Ihrer Brieftasche übertragen, ohne Sie zu fragen, bis Sie diese Genehmigung widerrufen. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "alle NFTs in diesem Contract"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Seien Sie vorsichtig."
},
"confirmPassword": {
"message": "Passwort bestätigen"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Επιβεβαίωση"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Παραχωρείτε πρόσβαση στον $1, συμπεριλαμβανομένου οτιδήποτε ενδέχεται να αποκτήσετε στο μέλλον. Ο συμβαλλόμενος στην άλλη πλευρά μπορεί να μεταφέρει NFT από το πορτοφόλι σας ανά πάσα στιγμή χωρίς να σας ρωτήσει, μέχρι να ανακαλέσετε αυτή την έγκριση. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "όλα τα NFT αυτού του συμβαλλόμενου"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Προχωρήστε με προσοχή."
},
"confirmPassword": {
"message": "Επιβεβαίωση Κωδικού Πρόσβασης"
},

View File

@ -665,16 +665,6 @@
"confirm": {
"message": "Confirm"
},
"confirmPageDialogSetApprovalForAll": {
"message": "You're granting access to $1, including any you might own in the future. The party on the other end can transfer NFTs from your wallet at any time without asking you until you revoke this approval. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "all the NFTs on this contract"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Proceed with caution."
},
"confirmPassword": {
"message": "Confirm password"
},
@ -2334,6 +2324,17 @@
"nftTokenIdPlaceholder": {
"message": "Enter the token id"
},
"nftWarningContent": {
"message": "You're granting access to $1, including any you might own in the future. The party on the other end can transfer these NFTs from your wallet at any time without asking you until you revoke this approval. $2",
"description": "$1 is nftWarningContentBold bold part, $2 is Learn more link"
},
"nftWarningContentBold": {
"message": "all your $1 NFTs",
"description": "$1 is name of the collection"
},
"nftWarningContentGrey": {
"message": "Proceed with caution."
},
"nfts": {
"message": "NFTs"
},
@ -4546,6 +4547,9 @@
"yourFundsMayBeAtRisk": {
"message": "Your funds may be at risk"
},
"yourNFTmayBeAtRisk": {
"message": "Your NFT may be at risk"
},
"yourPrivateSeedPhrase": {
"message": "Your private Secret Recovery Phrase"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Confirmar"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Está otorgando acceso a $1, incluidos los que pueda poseer en el futuro. La contraparte puede transferir los NFT de su billetera en cualquier momento sin preguntarle hasta que revoque esta aprobación. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "todos los NFT en este contrato"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Proceda con precaución."
},
"confirmPassword": {
"message": "Confirmar contraseña"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Confirmer"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Vous accordez laccès à $1, y compris à ceux que vous pourriez posséder dans le futur. Lautre partie pourra transférer des NFT de votre portefeuille à tout moment sans demander votre consentement jusquà ce que vous révoquiez cette approbation. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "tous les NFT inclus dans ce contrat"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Soyez prudent."
},
"confirmPassword": {
"message": "Confirmer le mot de passe"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "पुष्टि करें"
},
"confirmPageDialogSetApprovalForAll": {
"message": "आप $1 तक ऐक्सेस प्रदान कर रहे हैं, इसमें वह भी शामिल है जिसे आप भविष्य में प्राप्त कर सकते हैं। दूसरी ओर की पार्टी आपसे पूछे बिना किसी भी समय आपके वॉलेट से NFTs ट्रान्स्फर कर सकती है, जब तक आप इस स्वीकृति को रद्द नहीं करते। $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "इस अनुबंध में सभी NFTs"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "सावधानी के साथ आगे बढ़ें।"
},
"confirmPassword": {
"message": "पासवर्ड की पुष्टि करें"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Konfirmasikan"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Anda memberikan akses ke $1, termasuk setiap akses yang Anda miliki di masa mendatang. Pihak lain dapat mentransfer NFT dari dompet Anda kapan saja tanpa meminta izin Anda sampai Anda membatalkan persetujuan ini. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "semua NFT dalam kontrak ini"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Lanjutkan dengan hati-hati."
},
"confirmPassword": {
"message": "Konfirmasikan kata sandi"
},

View File

@ -551,16 +551,6 @@
"confirm": {
"message": "Conferma"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Stai concedendo l'accesso a $1, inclusi quelli che potresti possedere in futuro. L'ente a cui stai concedendo l'accesso potrà trasferire NFT dal tuo portafoglio in qualsiasi momento senza chiederti conferma fino a quando non revocherai questa approvazione. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "tutti gli NFT in questo contratto"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Procedi con cautela."
},
"confirmPassword": {
"message": "Conferma Password"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "確認"
},
"confirmPageDialogSetApprovalForAll": {
"message": "今後取得する可能性のあるものも含め、$1 へのアクセスを許可しようとしています。相手はお客様がこの承認を取り消すまで、お客様のウォレットからいつでもお客様の許可なしに NFT を送ることができます。$2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "このコントラクトのすべての NFT"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "慎重に進めてください。"
},
"confirmPassword": {
"message": "パスワードの確認"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "확인"
},
"confirmPageDialogSetApprovalForAll": {
"message": "향후 소유할 수 있는 모든 $1에 대한 액세스를 허용하는 것입니다. 이 허용을 취소하지 않는 한, 상대방이 언제든지 허락 없이 지갑에서 NFT를 전송할 수 있습니다. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "이 계약의 모든 NFT"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "주의하여 진행하세요."
},
"confirmPassword": {
"message": "비밀번호 확인"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Confirmar"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Você está concedendo acesso a $1, incluindo todos os que vier a adquirir. A parte na outra ponta pode transferir NFTs de sua carteira a qualquer momento, sem consultá-lo, até que você revogue essa aprovação. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "todos os NFTs neste contrato"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Prossiga com cautela."
},
"confirmPassword": {
"message": "Confirmar Palavra-passe"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Подтвердить"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Вы предоставляете доступ к $1, включая все, что может принадлежать вам в будущем. Сторона на другом конце может перевести NFT с вашего кошелька в любое время, не спрашивая вас, пока вы не отзовете это одобрение. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "все NFT по этому контракту"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Действуйте с осторожностью."
},
"confirmPassword": {
"message": "Подтвердить пароль"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Kumpirmahin"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Nagbibigay ka ng access sa $1, kabilang ang anumang maaaring maging pag-aari mo sa hinaharap. Ang partido sa kabilang panig ay maaaring maglipat ng mga NFT mula sa iyong wallet sa anumang oras nang hindi ka tinatanong hanggang sa bawiin mo ang pag-aprubang ito. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "lahat na NFT sa kontratang ito"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Magpatuloy nang may pag-iingat."
},
"confirmPassword": {
"message": "Kumpirmahin ang password"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Onayla"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Gelecekte sahip olabileceğiniz her şey dahil olmak üzere şuna erişim izni veriyorsunuz: $1. Diğer uçtaki taraf siz bu onayı geri çekene kadar dilediği zaman size sormadan cüzdanınızdan NFT transfer edebilir. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "bu sözleşmedeki tüm NFT'ler"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Dikkatli bir şekilde devam edin."
},
"confirmPassword": {
"message": "Şifreyi onayla"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "Xác nhận"
},
"confirmPageDialogSetApprovalForAll": {
"message": "Bạn đang cấp quyền truy cập vào $1, bao gồm bất cứ tài sản nào mà bạn có thể sở hữu trong tương lai. Bên được cấp quyền có thể chuyển NFT khỏi ví của bạn bất cứ lúc nào mà không cần hỏi bạn cho đến khi bạn thu hồi sự chấp thuận này. $2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "tất cả NFT trên hợp đồng này"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "Hãy tiến hành thận trọng."
},
"confirmPassword": {
"message": "Xác nhận mật khẩu"
},

View File

@ -598,16 +598,6 @@
"confirm": {
"message": "确认"
},
"confirmPageDialogSetApprovalForAll": {
"message": "您正在向$1授予访问权限包括对您将来可能拥有的任何资产的访问权限。另一端的一方可以随时从您的钱包中转移NFT无需询问您直到您撤销此项批准。$2",
"description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'"
},
"confirmPageDialogSetApprovalForAllPlaceholder1": {
"message": "此合约中的所有NFT"
},
"confirmPageDialogSetApprovalForAllPlaceholder2": {
"message": "请谨慎行事。"
},
"confirmPassword": {
"message": "确认密码"
},

View File

@ -178,19 +178,17 @@ describe('Collectibles', function () {
const [func, params] = await driver.findElements(
'.confirm-approve-content__data .confirm-approve-content__small-text',
);
const proceedWithCautionIsDisplayed = await driver.isElementPresent(
'.dialog--error',
);
assert.equal(
await title.getText(),
'Allow access to and transfer of all your TestDappCollectibles?',
);
assert.equal(await func.getText(), 'Function: SetApprovalForAll');
assert.equal(await params.getText(), 'Parameters: true');
assert.equal(proceedWithCautionIsDisplayed, true);
// Confirm enabling set approval for all
await driver.clickElement({ text: 'Confirm', tag: 'button' });
await driver.clickElement({ text: 'Approve', tag: 'button' });
await driver.waitUntilXWindowHandles(2);
await driver.switchToWindow(extension);
await driver.clickElement('[data-testid="home__activity-tab"]');
@ -262,6 +260,8 @@ describe('Collectibles', function () {
// Confirm disabling set approval for all
await driver.clickElement({ text: 'Confirm', tag: 'button' });
await driver.clickElement({ text: 'Approve', tag: 'button' });
await driver.waitUntilXWindowHandles(2);
await driver.switchToWindow(extension);
await driver.clickElement('[data-testid="home__activity-tab"]');

View File

@ -61,6 +61,7 @@
@import 'permissions-connect-header/index';
@import 'permissions-connect-permission-list/index';
@import 'recovery-phrase-reminder/index';
@import 'set-approval-for-all-warning/index';
@import 'step-progress-bar/index.scss';
@import 'selected-account/index';
@import 'signature-request/index';

View File

@ -15,6 +15,14 @@ jest.mock('../../../store/actions', () => ({
addPollingTokenToAppState: jest.fn(),
}));
jest.mock('../../../pages/swaps/swaps.util', () => {
const actual = jest.requireActual('../../../pages/swaps/swaps.util');
return {
...actual,
fetchTokenBalance: jest.fn(() => Promise.resolve()),
};
});
describe('Confirm Page Container Container Test', () => {
const props = {
title: 'Title',

View File

@ -29,6 +29,8 @@ import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import DepositPopover from '../deposit-popover/deposit-popover';
import { fetchTokenBalance } from '../../../pages/swaps/swaps.util';
import SetApproveForAllWarning from '../set-approval-for-all-warning';
import EnableEIP1559V2Notice from './enableEIP1559V2-notice';
import {
ConfirmPageContainerHeader,
@ -40,6 +42,7 @@ export default class ConfirmPageContainer extends Component {
state = {
showNicknamePopovers: false,
setShowDepositPopover: false,
collectionBalance: 0,
};
static contextTypes = {
@ -100,6 +103,8 @@ export default class ConfirmPageContainer extends Component {
onCancelAll: PropTypes.func,
onCancel: PropTypes.func,
onSubmit: PropTypes.func,
onSetApprovalForAll: PropTypes.func,
showWarningModal: PropTypes.bool,
disabled: PropTypes.bool,
editingGas: PropTypes.bool,
handleCloseEditGas: PropTypes.func,
@ -110,9 +115,23 @@ export default class ConfirmPageContainer extends Component {
supportsEIP1559V2: PropTypes.bool,
nativeCurrency: PropTypes.string,
isBuyableChain: PropTypes.bool,
isApprovalOrRejection: PropTypes.bool,
};
async componentDidMount() {
const { tokenAddress, fromAddress, currentTransaction, assetStandard } =
this.props;
const isSetApproveForAll =
currentTransaction.type ===
TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL;
if (isSetApproveForAll && assetStandard === ERC721) {
const tokenBalance = await fetchTokenBalance(tokenAddress, fromAddress);
this.setState({
collectionBalance: tokenBalance?.balance?.words?.[0] || 0,
});
}
}
render() {
const {
showEdit,
@ -140,6 +159,8 @@ export default class ConfirmPageContainer extends Component {
onCancelAll,
onCancel,
onSubmit,
onSetApprovalForAll,
showWarningModal,
tokenAddress,
nonce,
unapprovedTxCount,
@ -167,7 +188,6 @@ export default class ConfirmPageContainer extends Component {
nativeCurrency,
isBuyableChain,
networkIdentifier,
isApprovalOrRejection,
///: BEGIN:ONLY_INCLUDE_IN(flask)
insightComponent,
///: END:ONLY_INCLUDE_IN
@ -351,33 +371,22 @@ export default class ConfirmPageContainer extends Component {
<ErrorMessage errorKey={errorKey} />
</div>
)}
{isSetApproveForAll && isApprovalOrRejection && (
<Dialog type="error" className="confirm-page-container__dialog">
{/*
TODO: https://github.com/MetaMask/metamask-extension/issues/15745
style={{ fontWeight: 'bold' }} because reset.scss removes font-weight from b. We should fix this.
*/}
{t('confirmPageDialogSetApprovalForAll', [
<b
key="confirm-page-container__dialog-placeholder-1"
style={{ fontWeight: 'bold' }}
>
{t('confirmPageDialogSetApprovalForAllPlaceholder1')}
</b>,
<b
key="confirm-page-container__dialog-placeholder-2"
style={{ fontWeight: 'bold' }}
>
{t('confirmPageDialogSetApprovalForAllPlaceholder2')}
</b>,
])}
</Dialog>
{showWarningModal && (
<SetApproveForAllWarning
collectionName={title}
senderAddress={fromAddress}
name={fromName}
isERC721={assetStandard === ERC721}
total={this.state.collectionBalance}
onSubmit={onSubmit}
onCancel={onCancel}
/>
)}
{contentComponent && (
<PageContainerFooter
onCancel={onCancel}
cancelText={t('reject')}
onSubmit={onSubmit}
onSubmit={isSetApproveForAll ? onSetApprovalForAll : onSubmit}
submitText={t('confirm')}
submitButtonType={
isSetApproveForAll ? 'danger-primary' : 'primary'

View File

@ -0,0 +1 @@
export { default } from './set-approval-for-all-warning';

View File

@ -0,0 +1,26 @@
.set-approval-for-all-warning {
&__content {
&__header {
border-bottom: 1px solid var(--color-border-muted);
&__warning-icon {
padding-top: 7px;
margin-right: 10px;
color: var(--color-error-default);
}
}
&__account {
border-bottom: 1px solid var(--color-border-muted);
}
&__bold {
color: var(--color-text-default);
}
}
&__footer {
width: 100%;
height: 100px;
}
}

View File

@ -0,0 +1,143 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Popover from '../../ui/popover';
import Box from '../../ui/box';
import Button from '../../ui/button';
import Typography from '../../ui/typography';
import {
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TYPOGRAPHY,
COLORS,
} from '../../../helpers/constants/design-system';
import Identicon from '../../ui/identicon';
import { shortenAddress } from '../../../helpers/utils/util';
const SetApproveForAllWarning = ({
collectionName,
senderAddress,
name,
total,
isERC721,
onSubmit,
onCancel,
}) => {
const t = useI18nContext();
const footer = (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
className="set-approval-for-all-warning__footer"
>
<Button
className="set-approval-for-all-warning__footer__approve-button"
type="danger-primary"
onClick={onSubmit}
>
{t('approveButtonText')}
</Button>
<Button
className="set-approval-for-all-warning__footer__cancel-button"
type="secondary"
onClick={onCancel}
>
{t('reject')}
</Button>
</Box>
);
return (
<Popover className="set-approval-for-all-warning__content" footer={footer}>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
padding={4}
className="set-approval-for-all-warning__content__header"
>
<i className="fa fa-exclamation-triangle set-approval-for-all-warning__content__header__warning-icon" />
<Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
{t('yourNFTmayBeAtRisk')}
</Typography>
</Box>
<Box
display={DISPLAY.FLEX}
padding={4}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
className="set-approval-for-all-warning__content__account"
>
<Box display={DISPLAY.FLEX}>
<Identicon address={senderAddress} diameter={32} />
<Typography
variant={TYPOGRAPHY.H5}
marginLeft={2}
className="set-approval-for-all-warning__content__account-name"
>
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
</Typography>
</Box>
{isERC721 && total && (
<Typography>{`${t('total')}: ${total}`}</Typography>
)}
</Box>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
margin={4}
marginTop={4}
marginBottom={4}
variant={TYPOGRAPHY.H6}
>
{t('nftWarningContent', [
<strong
key="non_custodial_bold"
className="set-approval-for-all-warning__content__bold"
>
{t('nftWarningContentBold', [collectionName])}
</strong>,
<strong key="non_custodial_grey">
{t('nftWarningContentGrey')}
</strong>,
])}
</Typography>
</Popover>
);
};
SetApproveForAllWarning.propTypes = {
/**
* NFT collection name that is being approved
*/
collectionName: PropTypes.string,
/**
* Address of a current user that is approving collection
*/
senderAddress: PropTypes.string,
/**
* Name of a current user that is approving collection
*/
name: PropTypes.string,
/**
* Total number of items that are being approved
*/
total: PropTypes.string,
/**
* Is asset standard ERC721
*/
isERC721: PropTypes.bool,
/**
* Function that approves collection
*/
onSubmit: PropTypes.func,
/**
* Function that rejects collection
*/
onCancel: PropTypes.func,
};
export default SetApproveForAllWarning;

View File

@ -0,0 +1,42 @@
/* eslint-disable react/prop-types */
import React from 'react';
import SetApproveForAllWarning from '.';
export default {
title: 'Components/App/SetApproveForAllWarning',
id: __filename,
argTypes: {
collectionName: {
control: 'text',
},
name: {
control: 'text',
},
senderAddress: {
control: 'text',
},
total: {
control: 'text',
},
isERC721: {
control: 'boolean',
},
onSubmit: {
action: 'onSubmit',
},
onCancel: {
action: 'onCancel',
},
},
args: {
collectionName: 'Test collection',
name: 'Account 1',
senderAddress: '0xee014609ef9e09776ac5fe00bdbfef57bcdefebb',
total: '6',
isERC721: true,
},
};
export const DefaultStory = (args) => <SetApproveForAllWarning {...args} />;
DefaultStory.storyName = 'Default';

View File

@ -450,25 +450,17 @@ export default class ConfirmApproveContent extends Component {
);
}
getTitleTokenDescription() {
getTokenName() {
const {
tokenId,
assetName,
tokenAddress,
rpcPrefs,
chainId,
assetStandard,
tokenSymbol,
isSetApproveForAll,
userAddress,
} = this.props;
const { t } = this.context;
const useBlockExplorer =
rpcPrefs?.blockExplorerUrl ||
[...TEST_CHAINS, CHAIN_IDS.MAINNET].includes(chainId);
let titleTokenDescription = t('token');
const tokenIdWrapped = tokenId ? ` (#${tokenId})` : '';
if (
assetStandard === ERC20 ||
(tokenSymbol && !tokenId && !isSetApproveForAll)
@ -486,33 +478,46 @@ export default class ConfirmApproveContent extends Component {
} else {
titleTokenDescription = t('nft');
}
}
if (useBlockExplorer) {
const blockExplorerLink = getTokenTrackerLink(
tokenAddress,
chainId,
null,
userAddress,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
);
const blockExplorerElement = (
<>
<a
href={blockExplorerLink}
target="_blank"
rel="noopener noreferrer"
title={tokenAddress}
className="confirm-approve-content__approval-asset-link"
>
{titleTokenDescription}
</a>
{tokenIdWrapped && <span>{tokenIdWrapped}</span>}
</>
);
return blockExplorerElement;
}
return titleTokenDescription;
}
getTitleTokenDescription() {
const { tokenId, tokenAddress, rpcPrefs, chainId, userAddress } =
this.props;
const useBlockExplorer =
rpcPrefs?.blockExplorerUrl ||
[...TEST_CHAINS, CHAIN_IDS.MAINNET].includes(chainId);
const titleTokenDescription = this.getTokenName();
const tokenIdWrapped = tokenId ? ` (#${tokenId})` : '';
if (useBlockExplorer) {
const blockExplorerLink = getTokenTrackerLink(
tokenAddress,
chainId,
null,
userAddress,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
);
const blockExplorerElement = (
<>
<a
href={blockExplorerLink}
target="_blank"
rel="noopener noreferrer"
title={tokenAddress}
className="confirm-approve-content__approval-asset-link"
>
{titleTokenDescription}
</a>
{tokenIdWrapped && <span>{tokenIdWrapped}</span>}
</>
);
return blockExplorerElement;
}
return (

View File

@ -218,6 +218,7 @@ export default function ConfirmApprove({
identiconAddress={toAddress}
showAccountInHeader
title={tokensText}
tokenAddress={tokenAddress}
customTokenAmount={String(customPermissionAmount)}
dappProposedTokenAmount={tokenAmount}
currentTokenBalance={tokenBalance}

View File

@ -174,6 +174,7 @@ export default class ConfirmTransactionBase extends Component {
ethGasPriceWarning: '',
editingGas: false,
userAcknowledgedGasMissing: false,
showWarningModal: false,
///: BEGIN:ONLY_INCLUDE_IN(flask)
selectedInsightSnapId: this.props.insightSnaps[0]?.id,
///: END:ONLY_INCLUDE_IN
@ -973,6 +974,10 @@ export default class ConfirmTransactionBase extends Component {
);
}
handleSetApprovalForAll() {
this.setState({ showWarningModal: true });
}
renderTitleComponent() {
const { title, hexTransactionAmount, txData } = this.props;
@ -1140,6 +1145,7 @@ export default class ConfirmTransactionBase extends Component {
ethGasPriceWarning,
editingGas,
userAcknowledgedGasMissing,
showWarningModal,
} = this.state;
const { name } = methodData;
@ -1227,6 +1233,8 @@ export default class ConfirmTransactionBase extends Component {
onCancelAll={() => this.handleCancelAll()}
onCancel={() => this.handleCancel()}
onSubmit={() => this.handleSubmit()}
onSetApprovalForAll={() => this.handleSetApprovalForAll()}
showWarningModal={showWarningModal}
hideSenderToRecipient={hideSenderToRecipient}
origin={txData.origin}
ethGasPriceWarning={ethGasPriceWarning}