mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Approve screen header and sub-header improvement (#12360)
This commit is contained in:
Niranjana Binoy
GitHub
parent
e8944e0a5d
commit
e42fb0d640
@ -145,9 +145,9 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Allow this external extension to:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Allow $1 to spend your $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
"allowSpendToken": {
|
||||
"message": "Give permission to access your $1?",
|
||||
"description": "$1 is the symbol of the token that are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Allow this site to:"
|
||||
@ -2838,8 +2838,7 @@
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Do you trust this site? By granting this permission, you’re allowing $1 to withdraw your $2 and automate transactions for you.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
"message": "By granting permission, you are allowing the following $1 to access your funds"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Try again"
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Permitir que esta extensión externa haga lo siguiente:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "¿Permitir que $1 gaste su $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Permitir que este sitio haga lo siguiente:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "Tuvimos problemas al cargar los saldos de token. Puede verlos ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "¿Este sitio es de confianza? Al conceder este permiso, autoriza que $1 retire su $2 y automatice las transacciones por usted.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Vuelva a intentarlo"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Permitir que esta extensión externa haga lo siguiente:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "¿Permitir que $1 gaste su $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Permitir que este sitio haga lo siguiente:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "Tuvimos problemas al cargar los saldos de token. Puede verlos ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "¿Este sitio es de confianza? Al conceder este permiso, autoriza que $1 retire su $2 y automatice las transacciones por usted.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Vuelva a intentarlo"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "इस बाहरी एक्सटेंशन को इसकी अनुमति दें:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "$1 को आपका $2 खर्च करने की अनुमति दें?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "इस साइट को इसकी अनुमति दें:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "हमें आपके टोकन की शेषराशि लोड करने में परेशानी हुई। आप उन्हें देख सकते हैं ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "क्या आप इस साइट पर भरोसा करते हैं? यह अनुमति देकर, आप $1 को अपने $2 की निकासी करने और आपके लिए लेनदेनों को स्वचालित करने की अनुमति दे रहे हैं।",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "पुनः प्रयास करें"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Izinkan ekstensi eksternal ini untuk:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Izinkan $1 untuk menggunakan $2 Anda?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Izinkan situs ini untuk:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "Kami mengalami masalah saat memuat saldo token Anda. Anda dapat melihatnya ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Anda percaya situs ini? Dengan memberikan izin ini, Anda mengizinkan $1 untuk menarik $2 Anda dan mengotomatiskan transaksi untuk Anda.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Coba lagi"
|
||||
},
|
||||
|
||||
@ -103,10 +103,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Permetti a questa estensione di:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Vuoi consentire a $1 di spendere $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Permetti a questo sito di:"
|
||||
},
|
||||
@ -1864,10 +1860,6 @@
|
||||
"message": "Abbiamo avuto un problema a caricare il bilancio dei tuoi token. Puoi vederlo ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Ti fidi di questo sito? Autorizzandolo, stai consentendo a $1 di ritirare i tuoi $2 e automatizzare transazioni per te.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Prova di nuovo"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "この外部拡張機能に次の操作を許可します"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "$1 に $2 の使用を許可しますか?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "このサイトに次の操作を許可します"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "トークン バランスのロードに問題があります。トークン バランスを表示できます",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "このサイトを信頼しますか?許可を与えることにより、$1 は $2 を取り消して、トランザクションを自動化できます。",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "再試行"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "이 외부 확장을 통해 다음을 하도록 허용:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "$1에서 $2을(를) 지출하도록 허용하시겠어요?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "이 사이트에서 다음을 하도록 허용:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "토큰 잔액을 로드하는 도중 문제가 발생했습니다. 다음에서 잔액을 확인하세요. ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "이 사이트를 신뢰하시나요? 이 권한을 부여하면 $1에서 귀하의 $2을(를) 인출하고 거래를 자동으로 처리하게 됩니다.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "다시 시도"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Payagan ang external extension na ito na:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Payagan ang $1 na gastusin ang iyong $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Payagan ang site na ito na:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "Nagkaproblema kami sa pag-load ng mga balanse ng iyong token. Puwede mong tingnan ang mga iyon ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Pinagkakatiwalaan mo ba ang site na ito? Sa pamamagitan ng pagbibigay ng pahintulot na ito, pinapayagan mo ang $1 na i-withdraw ang iyong $2 at i-automate ang mga transaksyon para sa iyo.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Subukan ulit"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Permitir que esta extensão externa:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Permitir que $1 gaste seus(suas) $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Permitir que este site:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "Tivemos dificuldade para carregar os saldos do seu token. Você pode exibi-los ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Você confia neste site? Ao conceder esta permissão, você está permitindo que $1 saque seus(suas) $2 e automatize as transações por você.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Tente novamente"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Разрешить этому внешнему расширению:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Разрешить $1 потратить ваши $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Разрешить этому сайту:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "У нас возникли проблемы с загрузкой вашего баланса токенов. Вы можете просмотреть их ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Вы доверяете этому сайту? Предоставляя это разрешение, вы разрешаете $1 вывести ваши $2 и автоматизировать транзакции для вас.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Попробуйте еще раз"
|
||||
},
|
||||
|
||||
@ -97,10 +97,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Payagan ang external extension na ito na:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Payagan ang $1 na gastusin ang iyong $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Payagan ang site na ito na:"
|
||||
},
|
||||
@ -1820,10 +1816,6 @@
|
||||
"message": "Nagkaproblema kami sa pag-load ng mga balanse ng iyong token. Puwede mong tingnan ang mga iyon ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Pinagkakatiwalaan mo ba ang site na ito? Sa pamamagitan ng pagbibigay ng pahintulot na ito, pinapayagan mo ang $1 na i-withdraw ang iyong $2 at i-automate ang mga transaksyon para sa iyo.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Subukan ulit"
|
||||
},
|
||||
|
||||
@ -130,10 +130,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "Cho phép tiện ích bên ngoài này:"
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "Cho phép $1 chi tiêu $2 của bạn?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "Cho phép trang web này:"
|
||||
},
|
||||
@ -2278,10 +2274,6 @@
|
||||
"message": "Chúng tôi đã gặp phải vấn đề khi tải số dư token của bạn. Bạn có thể xem số dư ",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "Bạn có tin tưởng trang web này không? Bằng việc cấp quyền này, bạn sẽ cho phép $1 rút $2 của bạn và tự động thực hiện các giao dịch cho bạn.",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "Thử lại"
|
||||
},
|
||||
|
||||
@ -103,10 +103,6 @@
|
||||
"allowExternalExtensionTo": {
|
||||
"message": "允许这个外部扩展到："
|
||||
},
|
||||
"allowOriginSpendToken": {
|
||||
"message": "允许 $1 使用您的 $2?",
|
||||
"description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
|
||||
},
|
||||
"allowThisSiteTo": {
|
||||
"message": "允许本网站："
|
||||
},
|
||||
@ -1844,10 +1840,6 @@
|
||||
"message": "我们无法加载您的代币余额。您可以查看它们",
|
||||
"description": "Followed by a link (here) to view token balances"
|
||||
},
|
||||
"trustSiteApprovePermission": {
|
||||
"message": "您信任这个网站吗？授权即表示您允许 $1 提取您的 $2，并为您自动进行交易。",
|
||||
"description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
|
||||
},
|
||||
"tryAgain": {
|
||||
"message": "重试"
|
||||
},
|
||||
|
||||
@ -1,19 +1,29 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import copyToClipboard from 'copy-to-clipboard';
|
||||
import { getTokenTrackerLink, getAccountLink } from '@metamask/etherscan-link';
|
||||
import UrlIcon from '../../../components/ui/url-icon';
|
||||
import { addressSummary, getURLHostName } from '../../../helpers/utils/util';
|
||||
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
|
||||
import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
|
||||
import { isBeta } from '../../../helpers/utils/build-types';
|
||||
import { ellipsify } from '../../send/send.utils';
|
||||
import Typography from '../../../components/ui/typography';
|
||||
import Box from '../../../components/ui/box';
|
||||
import Button from '../../../components/ui/button';
|
||||
import MetaFoxLogo from '../../../components/ui/metafox-logo';
|
||||
import Identicon from '../../../components/ui/identicon';
|
||||
import CopyIcon from '../../../components/ui/icon/copy-icon.component';
|
||||
import {
|
||||
TYPOGRAPHY,
|
||||
FONT_WEIGHT,
|
||||
BLOCK_SIZES,
|
||||
JUSTIFY_CONTENT,
|
||||
COLORS,
|
||||
DISPLAY,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../../components/ui/box';
|
||||
import Button from '../../../components/ui/button';
|
||||
import { SECOND } from '../../../../shared/constants/time';
|
||||
import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
|
||||
import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
|
||||
|
||||
export default class ConfirmApproveContent extends Component {
|
||||
@ -47,10 +57,15 @@ export default class ConfirmApproveContent extends Component {
|
||||
warning: PropTypes.string,
|
||||
txData: PropTypes.object,
|
||||
ledgerWalletRequiredHidConnection: PropTypes.bool,
|
||||
tokenImage: PropTypes.string,
|
||||
chainId: PropTypes.string,
|
||||
rpcPrefs: PropTypes.object,
|
||||
isContract: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
showFullTxDetails: false,
|
||||
copied: false,
|
||||
};
|
||||
|
||||
renderApproveContentCard({
|
||||
@ -243,6 +258,11 @@ export default class ConfirmApproveContent extends Component {
|
||||
warning,
|
||||
txData,
|
||||
ledgerWalletRequiredHidConnection,
|
||||
tokenImage,
|
||||
toAddress,
|
||||
chainId,
|
||||
rpcPrefs,
|
||||
isContract,
|
||||
} = this.props;
|
||||
const { showFullTxDetails } = this.state;
|
||||
|
||||
@ -257,20 +277,104 @@ export default class ConfirmApproveContent extends Component {
|
||||
<ConfirmPageContainerWarning warning={warning} />
|
||||
</div>
|
||||
)}
|
||||
<div className="confirm-approve-content__identicon-wrapper">
|
||||
<UrlIcon
|
||||
className="confirm-approve-content__identicon"
|
||||
fallbackClassName="confirm-approve-content__identicon"
|
||||
name={getURLHostName(origin)}
|
||||
url={siteImage}
|
||||
/>
|
||||
</div>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
className="confirm-approve-content__icon-display-content"
|
||||
>
|
||||
<Box className="confirm-approve-content__metafoxlogo">
|
||||
<MetaFoxLogo useDark={isBeta()} />
|
||||
</Box>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
className="confirm-approve-content__siteinfo"
|
||||
>
|
||||
<UrlIcon
|
||||
className="confirm-approve-content__siteimage-identicon"
|
||||
fallbackClassName="confirm-approve-content__siteimage-identicon"
|
||||
name={getURLHostName(origin)}
|
||||
url={siteImage}
|
||||
/>
|
||||
<Typography
|
||||
variant={TYPOGRAPHY.H6}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
color={COLORS.UI4}
|
||||
boxProps={{ marginLeft: 1, marginTop: 2 }}
|
||||
>
|
||||
{getURLHostName(origin)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<div className="confirm-approve-content__title">
|
||||
{t('allowOriginSpendToken', [origin, tokenSymbol])}
|
||||
{t('allowSpendToken', [tokenSymbol])}
|
||||
</div>
|
||||
<div className="confirm-approve-content__description">
|
||||
{t('trustSiteApprovePermission', [origin, tokenSymbol])}
|
||||
{t('trustSiteApprovePermission', [
|
||||
isContract
|
||||
? t('contract').toLowerCase()
|
||||
: t('account').toLowerCase(),
|
||||
])}
|
||||
</div>
|
||||
<Box className="confirm-approve-content__address-display-content">
|
||||
<Box display={DISPLAY.FLEX}>
|
||||
<Identicon
|
||||
className="confirm-approve-content__address-identicon"
|
||||
diameter={20}
|
||||
address={toAddress}
|
||||
image={tokenImage}
|
||||
/>
|
||||
<Typography
|
||||
variant={TYPOGRAPHY.H6}
|
||||
fontWeight={FONT_WEIGHT.NORMAL}
|
||||
color={COLORS.UI4}
|
||||
boxProps={{ marginBottom: 0 }}
|
||||
>
|
||||
{ellipsify(toAddress)}
|
||||
</Typography>
|
||||
<Button
|
||||
type="link"
|
||||
className="confirm-approve-content__copy-address"
|
||||
onClick={() => {
|
||||
this.setState({ copied: true });
|
||||
this.copyTimeout = setTimeout(
|
||||
() => this.setState({ copied: false }),
|
||||
SECOND * 3,
|
||||
);
|
||||
copyToClipboard(toAddress);
|
||||
}}
|
||||
title={
|
||||
this.state.copied
|
||||
? t('copiedExclamation')
|
||||
: t('copyToClipboard')
|
||||
}
|
||||
>
|
||||
<CopyIcon size={9} color="#6a737d" />
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
className="confirm-approve-content__etherscan-link"
|
||||
onClick={() => {
|
||||
const blockExplorerTokenLink = isContract
|
||||
? getTokenTrackerLink(toAddress, chainId, null, null, {
|
||||
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
|
||||
})
|
||||
: getAccountLink(
|
||||
toAddress,
|
||||
chainId,
|
||||
{ blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null },
|
||||
null,
|
||||
);
|
||||
global.platform.openTab({
|
||||
url: blockExplorerTokenLink,
|
||||
});
|
||||
}}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={t('etherscanView')}
|
||||
>
|
||||
<img src="images/popout.svg" alt={t('etherscanView')} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<div className="confirm-approve-content__edit-submission-button-container">
|
||||
<div
|
||||
className="confirm-approve-content__medium-link-text cursor-pointer"
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { fireEvent } from '@testing-library/react';
|
||||
import { renderWithProvider } from '../../../../test/jest/rendering';
|
||||
import ConfirmApproveContent from '.';
|
||||
|
||||
const renderComponent = (props) => {
|
||||
const store = configureMockStore([])({ metamask: {} });
|
||||
return renderWithProvider(<ConfirmApproveContent {...props} />, store);
|
||||
};
|
||||
|
||||
const props = {
|
||||
decimals: 16,
|
||||
siteImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
|
||||
customTokenAmount: '10',
|
||||
tokenAmount: '10',
|
||||
origin: 'https://metamask.github.io/test-dapp/',
|
||||
tokenSymbol: 'TST',
|
||||
tokenImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
|
||||
tokenBalance: '15',
|
||||
showCustomizeGasModal: jest.fn(),
|
||||
showEditApprovalPermissionModal: jest.fn(),
|
||||
data:
|
||||
'0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
|
||||
toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4',
|
||||
currentCurrency: 'TST',
|
||||
nativeCurrency: 'ETH',
|
||||
ethTransactionTotal: '20',
|
||||
fiatTransactionTotal: '10',
|
||||
useNonceField: true,
|
||||
nextNonce: 1,
|
||||
customNonceValue: '2',
|
||||
showCustomizeNonceModal: jest.fn(),
|
||||
chainId: '1337',
|
||||
rpcPrefs: {},
|
||||
isContract: true,
|
||||
};
|
||||
|
||||
describe('ConfirmApproveContent Component', () => {
|
||||
it('should render Confirm approve page correctly', () => {
|
||||
const { queryByText, getByText, getAllByText } = renderComponent(props);
|
||||
expect(queryByText('metamask.github.io')).toBeInTheDocument();
|
||||
expect(
|
||||
queryByText('Give permission to access your TST?'),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
queryByText(
|
||||
'By granting permission, you are allowing the following contract to access your funds',
|
||||
),
|
||||
).toBeInTheDocument();
|
||||
expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
|
||||
expect(queryByText('View full transaction details')).toBeInTheDocument();
|
||||
|
||||
expect(queryByText('Edit Permission')).toBeInTheDocument();
|
||||
const editPermission = getByText('Edit Permission');
|
||||
fireEvent.click(editPermission);
|
||||
expect(props.showEditApprovalPermissionModal).toHaveBeenCalledTimes(1);
|
||||
|
||||
const editButtons = getAllByText('Edit');
|
||||
|
||||
expect(queryByText('Transaction Fee')).toBeInTheDocument();
|
||||
expect(
|
||||
queryByText('A fee is associated with this request.'),
|
||||
).toBeInTheDocument();
|
||||
expect(queryByText(`${props.ethTransactionTotal} ETH`)).toBeInTheDocument();
|
||||
fireEvent.click(editButtons[0]);
|
||||
expect(props.showCustomizeGasModal).toHaveBeenCalledTimes(1);
|
||||
|
||||
expect(queryByText('Nonce')).toBeInTheDocument();
|
||||
expect(queryByText('2')).toBeInTheDocument();
|
||||
fireEvent.click(editButtons[1]);
|
||||
expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@ -5,18 +5,67 @@
|
||||
width: 100%;
|
||||
font-style: normal;
|
||||
|
||||
&__identicon-wrapper {
|
||||
&__icon-display-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 22px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
height: 51px;
|
||||
width: 65%;
|
||||
margin-top: 16px;
|
||||
padding: 12px 12px 14px 12px;
|
||||
border: 1px solid $ui-1;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__identicon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
&__metafoxlogo,
|
||||
&__siteinfo {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__siteinfo {
|
||||
left: 39px;
|
||||
}
|
||||
|
||||
&__address-display-content {
|
||||
display: flex;
|
||||
height: 27px;
|
||||
width: 50%;
|
||||
padding: 12px 12px 14px 12px;
|
||||
background-color: $ui-1;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__siteimage-identicon {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
border: solid #fff;
|
||||
}
|
||||
|
||||
&__address-identicon {
|
||||
margin: 4px 8px 0 4px;
|
||||
}
|
||||
|
||||
&__copy-address,
|
||||
&__etherscan-link {
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
|
||||
&__etherscan-link {
|
||||
img {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header__logo-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.app-header__metafox-logo--icon {
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
&__full-tx-content {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import ConfirmTransactionBase from '../confirm-transaction-base';
|
||||
@ -14,6 +14,7 @@ import {
|
||||
getTokenAddressParam,
|
||||
getTokenValueParam,
|
||||
} from '../../helpers/utils/token-util';
|
||||
import { readAddressAsContract } from '../../../shared/modules/contract-utils';
|
||||
import { useTokenTracker } from '../../hooks/useTokenTracker';
|
||||
import { getTokens, getNativeCurrency } from '../../ducks/metamask/metamask';
|
||||
import {
|
||||
@ -25,6 +26,8 @@ import {
|
||||
getCustomNonceValue,
|
||||
getNextSuggestedNonce,
|
||||
doesAddressRequireLedgerHidConnection,
|
||||
getCurrentChainId,
|
||||
getRpcPrefsForCurrentProvider,
|
||||
} from '../../selectors';
|
||||
|
||||
import { useApproveTransaction } from '../../hooks/useApproveTransaction';
|
||||
@ -58,6 +61,8 @@ export default function ConfirmApprove() {
|
||||
const useNonceField = useSelector(getUseNonceField);
|
||||
const nextNonce = useSelector(getNextSuggestedNonce);
|
||||
const customNonceValue = useSelector(getCustomNonceValue);
|
||||
const chainId = useSelector(getCurrentChainId);
|
||||
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
|
||||
|
||||
const ledgerWalletRequiredHidConnection = useSelector(
|
||||
doesAddressRequireLedgerHidConnectionByFromAddress(from),
|
||||
@ -83,6 +88,7 @@ export default function ConfirmApprove() {
|
||||
|
||||
const tokenSymbol = currentToken?.symbol;
|
||||
const decimals = Number(currentToken?.decimals);
|
||||
const tokenImage = currentToken?.image;
|
||||
const tokenData = getTokenData(data);
|
||||
const tokenValue = getTokenValueParam(tokenData);
|
||||
const toAddress = getTokenAddressParam(tokenData);
|
||||
@ -125,6 +131,19 @@ export default function ConfirmApprove() {
|
||||
prevCustomNonce.current = customNonceValue;
|
||||
prevNonce.current = nextNonce;
|
||||
}, [customNonceValue, nextNonce]);
|
||||
|
||||
const [isContract, setIsContract] = useState(false);
|
||||
const checkIfContract = useCallback(async () => {
|
||||
const { isContractAddress } = await readAddressAsContract(
|
||||
global.eth,
|
||||
toAddress,
|
||||
);
|
||||
setIsContract(isContractAddress);
|
||||
}, [setIsContract, toAddress]);
|
||||
useEffect(() => {
|
||||
checkIfContract();
|
||||
}, [checkIfContract]);
|
||||
|
||||
const { origin } = transaction;
|
||||
const formattedOrigin = origin
|
||||
? origin[0].toUpperCase() + origin.slice(1)
|
||||
@ -158,6 +177,7 @@ export default function ConfirmApprove() {
|
||||
tokenAmount={tokenAmount}
|
||||
origin={formattedOrigin}
|
||||
tokenSymbol={tokenSymbol}
|
||||
tokenImage={tokenImage}
|
||||
tokenBalance={tokenBalance}
|
||||
showCustomizeGasModal={approveTransaction}
|
||||
showEditApprovalPermissionModal={({
|
||||
@ -222,6 +242,9 @@ export default function ConfirmApprove() {
|
||||
ledgerWalletRequiredHidConnection={
|
||||
ledgerWalletRequiredHidConnection
|
||||
}
|
||||
chainId={chainId}
|
||||
rpcPrefs={rpcPrefs}
|
||||
isContract={isContract}
|
||||
/>
|
||||
{showCustomizeGasPopover && (
|
||||
<EditGasPopover
|
||||
|
||||
Loading…
Reference in New Issue
Block a user