diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 450190d54..656b950e5 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -179,6 +179,9 @@ "asset": { "message": "Asset" }, + "assetOptions": { + "message": "Asset options" + }, "assets": { "message": "Assets" }, @@ -2132,9 +2135,6 @@ "tokenContractAddress": { "message": "Token Contract Address" }, - "tokenOptions": { - "message": "Token options" - }, "tokenSymbol": { "message": "Token Symbol" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index b14d2744f..1731f13cd 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -1855,9 +1855,6 @@ "tokenContractAddress": { "message": "Dirección del contrato de token" }, - "tokenOptions": { - "message": "Opciones del Token" - }, "tokenSymbol": { "message": "Símbolo del token" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index c336611d0..b9073e5e6 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -1855,9 +1855,6 @@ "tokenContractAddress": { "message": "Dirección de contrato del token" }, - "tokenOptions": { - "message": "Opciones del Token" - }, "tokenSymbol": { "message": "Símbolo del token" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 89f5f6893..52118ac28 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -1819,9 +1819,6 @@ "tokenContractAddress": { "message": "टोकन अनुबंध पता" }, - "tokenOptions": { - "message": "टोकन के विकल्प" - }, "tokenSymbol": { "message": "टोकन का प्रतीक" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index c2994711f..915813bc1 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -1819,9 +1819,6 @@ "tokenContractAddress": { "message": "Alamat Kontrak Token" }, - "tokenOptions": { - "message": "Opsi token" - }, "tokenSymbol": { "message": "Simbol Token" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index ea9f973be..154eddc3e 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -1878,9 +1878,6 @@ "tokenContractAddress": { "message": "Indirizzo Contratto Token" }, - "tokenOptions": { - "message": "Opzioni token" - }, "tokenSymbol": { "message": "Simbolo Token" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 1644e5897..6410a5565 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -1855,9 +1855,6 @@ "tokenContractAddress": { "message": "トークンコントラクトのアドレス" }, - "tokenOptions": { - "message": "トークンのオプション" - }, "tokenSymbol": { "message": "トークンシンボル" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index ea089e71b..1b1e6ce0d 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -1819,9 +1819,6 @@ "tokenContractAddress": { "message": "토큰 계약 주소" }, - "tokenOptions": { - "message": "토큰 옵션" - }, "tokenSymbol": { "message": "토큰 기호" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 7fce60d66..91cbce494 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -1819,9 +1819,6 @@ "tokenContractAddress": { "message": "Адрес контракта токена" }, - "tokenOptions": { - "message": "Опции токена" - }, "tokenSymbol": { "message": "Символ токена" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 15ad973ee..4868042fa 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -1816,9 +1816,6 @@ "tokenContractAddress": { "message": "Address ng Kontrata ng Token" }, - "tokenOptions": { - "message": "Mga opsyon ng token" - }, "tokenSymbol": { "message": "Simbolo ng Token" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 988745ab9..c6930cb5f 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -1819,9 +1819,6 @@ "tokenContractAddress": { "message": "Địa chỉ hợp đồng token" }, - "tokenOptions": { - "message": "Tùy chọn token" - }, "tokenSymbol": { "message": "Ký hiệu token" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index e8286a675..4c23a0bb6 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -1855,9 +1855,6 @@ "tokenContractAddress": { "message": "代币合约地址" }, - "tokenOptions": { - "message": "代币选项" - }, "tokenSymbol": { "message": "代币符号" }, diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 7d02db813..9b6fc5fc3 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -1508,9 +1508,9 @@ describe('MetaMask', function () { describe('Hide token', function () { it('hides the token when clicked', async function () { - await driver.clickElement('[data-testid="token-options__button"]'); + await driver.clickElement('[data-testid="asset-options__button"]'); - await driver.clickElement('[data-testid="token-options__hide"]'); + await driver.clickElement('[data-testid="asset-options__hide"]'); // wait for confirm hide modal to be visible const confirmHideModal = await driver.findVisibleElement('span .modal'); diff --git a/ui/app/pages/asset/asset.scss b/ui/app/pages/asset/asset.scss index 8cbb339e8..eb4ecb3f9 100644 --- a/ui/app/pages/asset/asset.scss +++ b/ui/app/pages/asset/asset.scss @@ -32,7 +32,7 @@ } } -.token-options { +.asset-options { &__button { font-size: $font-size-paragraph; color: $Black-100; diff --git a/ui/app/pages/asset/components/asset-options.js b/ui/app/pages/asset/components/asset-options.js new file mode 100644 index 000000000..3b3ee21c2 --- /dev/null +++ b/ui/app/pages/asset/components/asset-options.js @@ -0,0 +1,80 @@ +import React, { useContext, useState } from 'react'; +import PropTypes from 'prop-types'; + +import { I18nContext } from '../../../contexts/i18n'; +import { Menu, MenuItem } from '../../../components/ui/menu'; + +const AssetOptions = ({ + onRemove, + onViewEtherscan, + onViewAccountDetails, + tokenSymbol, + isNativeAsset, +}) => { + const t = useContext(I18nContext); + const [assetOptionsButtonElement, setAssetOptionsButtonElement] = useState( + null, + ); + const [assetOptionsOpen, setAssetOptionsOpen] = useState(false); + + return ( + <> +