1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

UX improvements to the "Permission Request" section on the approve screen (#12553)

* UX improvements to the "Permission Request" section on the approve screen

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Fix locales.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Check that hidden elements are hidden in test

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

* Lint fixes

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>
This commit is contained in:
Olusegun Akintayo 2021-11-03 02:15:05 +04:00 committed by GitHub
parent e902b931c3
commit 95e3be4a85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 50 additions and 91 deletions

View File

@ -159,9 +159,6 @@
"amount": {
"message": "Amount"
},
"amountWithColon": {
"message": "Amount:"
},
"appDescription": {
"message": "An Ethereum Wallet in your Browser",
"description": "The description of the application"
@ -189,6 +186,9 @@
"approved": {
"message": "Approved"
},
"approvedAmountWithColon": {
"message": "Approved Amount:"
},
"asset": {
"message": "Asset"
},
@ -1058,6 +1058,9 @@
"goerli": {
"message": "Goerli Test Network"
},
"grantedToWithColon": {
"message": "Granted To:"
},
"happyToSeeYou": {
"message": "Were happy to see you."
},
@ -1791,6 +1794,9 @@
"permissionCheckedIconDescription": {
"message": "You have approved this permission"
},
"permissionRequest": {
"message": "Permission Request"
},
"permissionUncheckedIconDescription": {
"message": "You have not approved this permission"
},
@ -2730,9 +2736,6 @@
"message": "To: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "To:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Importe"
},
"amountWithColon": {
"message": "Importe:"
},
"appDescription": {
"message": "Una cartera de Ethereum en el explorador",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Para: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Para:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Importe"
},
"amountWithColon": {
"message": "Importe:"
},
"appDescription": {
"message": "Una cartera de Ethereum en el explorador",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Para: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Para:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "राशि"
},
"amountWithColon": {
"message": "राशि:"
},
"appDescription": {
"message": "आपके ब्राउज़र में एक Ethereum वॉलेट",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "प्रति: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "प्रति:"
},
"token": {
"message": "टोकन"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Jumlah"
},
"amountWithColon": {
"message": "Jumlah:"
},
"appDescription": {
"message": "Dompet Ethereum di Browser Anda",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Untuk: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Untuk:"
},
"token": {
"message": "Token"
},

View File

@ -113,9 +113,6 @@
"amount": {
"message": "Importo"
},
"amountWithColon": {
"message": "Importo:"
},
"appDescription": {
"message": "Ethereum Browser Extension",
"description": "The description of the application"
@ -1783,9 +1780,6 @@
"message": "A: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "To:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "金額"
},
"amountWithColon": {
"message": "金額:"
},
"appDescription": {
"message": "ブラウザーにあるイーサリアム ウォレット",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "移動先:$1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "移動先:"
},
"token": {
"message": "トークン"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "금액"
},
"amountWithColon": {
"message": "금액:"
},
"appDescription": {
"message": "브라우저의 이더리움 지갑",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "수신: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "수신:"
},
"token": {
"message": "토큰"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Halaga"
},
"amountWithColon": {
"message": "Halaga:"
},
"appDescription": {
"message": "Ethereum Wallet sa iyong Browser",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Para kay/sa: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Para kay/sa:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Valor"
},
"amountWithColon": {
"message": "Valor:"
},
"appDescription": {
"message": "Uma carteira do Ethereum no seu navegador",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Até: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Até:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Сумма"
},
"amountWithColon": {
"message": "Сумма:"
},
"appDescription": {
"message": "Кошелек Ethereum в вашем браузере",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Адресат $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Адресат"
},
"token": {
"message": "Токен"
},

View File

@ -107,9 +107,6 @@
"amount": {
"message": "Halaga"
},
"amountWithColon": {
"message": "Halaga:"
},
"appDescription": {
"message": "Ethereum Wallet sa iyong Browser",
"description": "The description of the application"
@ -1739,9 +1736,6 @@
"message": "Para kay/sa: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Para kay/sa:"
},
"token": {
"message": "Token"
},

View File

@ -140,9 +140,6 @@
"amount": {
"message": "Số tiền"
},
"amountWithColon": {
"message": "Số tiền:"
},
"appDescription": {
"message": "Ví Ethereum trên trình duyệt của bạn",
"description": "The description of the application"
@ -2191,9 +2188,6 @@
"message": "Đến: $1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "Đến:"
},
"token": {
"message": "Token"
},

View File

@ -113,9 +113,6 @@
"amount": {
"message": "数额"
},
"amountWithColon": {
"message": "数额:"
},
"appDescription": {
"message": "以太坊浏览器插件",
"description": "The description of the application"
@ -1763,9 +1760,6 @@
"message": "至:$1",
"description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
},
"toWithColon": {
"message": "至:"
},
"token": {
"message": "代币"
},

View File

@ -145,7 +145,7 @@ export function getLatestSubmittedTxWithNonce(
}
export async function isSmartContractAddress(address) {
const { isContractCode } = readAddressAsContract(global.eth, address);
const { isContractCode } = await readAddressAsContract(global.eth, address);
return isContractCode;
}

View File

@ -147,8 +147,11 @@ export default class ConfirmApproveContent extends Component {
tokenSymbol,
origin,
toAddress,
isContract,
} = this.props;
const displayedAddress = isContract
? `${t('contract')} (${addressSummary(toAddress)})`
: addressSummary(toAddress);
return (
<div className="flex-column">
<div className="confirm-approve-content__small-text">
@ -156,7 +159,7 @@ export default class ConfirmApproveContent extends Component {
</div>
<div className="flex-row">
<div className="confirm-approve-content__label">
{t('amountWithColon')}
{t('approvedAmountWithColon')}
</div>
<div className="confirm-approve-content__medium-text">
{`${Number(customTokenAmount || tokenAmount)} ${tokenSymbol}`}
@ -164,10 +167,31 @@ export default class ConfirmApproveContent extends Component {
</div>
<div className="flex-row">
<div className="confirm-approve-content__label">
{t('toWithColon')}
{t('grantedToWithColon')}
</div>
<div className="confirm-approve-content__medium-text">
{addressSummary(toAddress)}
{`${displayedAddress}`}
</div>
<div className="confirm-approve-content__medium-text">
<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={14} color="#6a737d" />
</Button>
</div>
</div>
</div>
@ -396,7 +420,7 @@ export default class ConfirmApproveContent extends Component {
<div className="confirm-approve-content__card-wrapper">
{this.renderApproveContentCard({
symbol: <i className="fa fa-tag" />,
title: 'Transaction Fee',
title: t('transactionFee'),
showEdit: true,
onEditClick: showCustomizeGasModal,
content: this.renderTransactionDetailsContent(),
@ -468,7 +492,7 @@ export default class ConfirmApproveContent extends Component {
<div className="confirm-approve-content__permission">
{this.renderApproveContentCard({
symbol: <img src="./images/user-check.svg" alt="" />,
title: 'Permission',
title: t('permissionRequest'),
content: this.renderPermissionContent(),
showEdit: true,
onEditClick: () =>

View File

@ -70,5 +70,15 @@ describe('ConfirmApproveContent Component', () => {
expect(queryByText('2')).toBeInTheDocument();
fireEvent.click(editButtons[1]);
expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(1);
const showHideTxDetails = getByText('View full transaction details');
expect(queryByText('Permission Request')).not.toBeInTheDocument();
expect(queryByText('Approved Amount:')).not.toBeInTheDocument();
expect(queryByText('Granted To:')).not.toBeInTheDocument();
fireEvent.click(showHideTxDetails);
expect(getByText('Permission Request')).toBeInTheDocument();
expect(getByText('Approved Amount:')).toBeInTheDocument();
expect(getByText('Granted To:')).toBeInTheDocument();
expect(getByText('0x9bc5...fef4')).toBeInTheDocument();
});
});