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>
2024-10-22 11:22:43 +02:00 · 2021-11-03 02:15:05 +04:00 · 2021-11-03 02:15:05 +04:00 · 95e3be4a85
commit 95e3be4a85
parent e902b931c3
17 changed files with 50 additions and 91 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -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": "We’re 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"
  },
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -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"
  },
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@ -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"
  },
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -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": "टोकन"
  },
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -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"
  },
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@ -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"
  },
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -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": "トークン"
  },
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -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": "토큰"
  },
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@ -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"
  },
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@ -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"
  },
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -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": "Токен"
  },
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -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"
  },
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -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"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -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": "代币"
  },
--- a/ui/helpers/utils/transactions.util.js
+++ b/ui/helpers/utils/transactions.util.js
@ -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;
 }

--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@ -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: () =>
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
@ -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();
  });
 });