- {t('allowOriginSpendToken', [origin, tokenSymbol])}
+ {t('allowSpendToken', [tokenSymbol])}
- {t('trustSiteApprovePermission', [origin, tokenSymbol])}
+ {t('trustSiteApprovePermission', [
+ isContract
+ ? t('contract').toLowerCase()
+ : t('account').toLowerCase(),
+ ])}
+
{
+ const store = configureMockStore([])({ metamask: {} });
+ return renderWithProvider(, 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);
+ });
+});
diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index b74a1350d..ec9f8f359 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss
@@ -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 {
diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js
index 32792e8ed..dba7c95e2 100644
--- a/ui/pages/confirm-approve/confirm-approve.js
+++ b/ui/pages/confirm-approve/confirm-approve.js
@@ -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 && (