From b1cfdd24758850e0c0e16720cffcd986c02561ed Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 25 Mar 2022 12:40:45 -0700 Subject: [PATCH] Dark mode: confirm approve content popout and user approve check icon (#14211) --- app/images/popout.svg | 9 -- app/images/user-check.svg | 3 - .../confirm-remove-account.component.js | 7 +- .../confirm-remove-account.stories.js | 42 +++++ .../modals/confirm-remove-account/index.scss | 5 - .../confirm-approve-content.component.js | 16 +- .../confirm-approve-content.stories.js | 141 +++++++++++++++++ .../connect-hardware/account-list.js | 5 +- .../connect-hardware/account-list.stories.js | 145 ++++++++++-------- 9 files changed, 285 insertions(+), 88 deletions(-) delete mode 100644 app/images/popout.svg delete mode 100644 app/images/user-check.svg create mode 100644 ui/components/app/modals/confirm-remove-account/confirm-remove-account.stories.js create mode 100644 ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.stories.js diff --git a/app/images/popout.svg b/app/images/popout.svg deleted file mode 100644 index d4256391b..000000000 --- a/app/images/popout.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/app/images/user-check.svg b/app/images/user-check.svg deleted file mode 100644 index 8ba739338..000000000 --- a/app/images/user-check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js index 891e40f87..a4628cec7 100644 --- a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js +++ b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js @@ -53,7 +53,6 @@ export default class ConfirmRemoveAccount extends Component {
{ const accountLink = getAccountLink( identity.address, @@ -77,7 +76,11 @@ export default class ConfirmRemoveAccount extends Component { rel="noopener noreferrer" title={t('etherscanView')} > - {t('etherscanView')} +
diff --git a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.stories.js b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.stories.js new file mode 100644 index 000000000..7bd6779aa --- /dev/null +++ b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.stories.js @@ -0,0 +1,42 @@ +import React from 'react'; +import ConfirmRemoveAccount from '.'; + +export default { + title: 'Components/App/Modals/ConfirmRemoveAccount', + id: __filename, + component: ConfirmRemoveAccount, + argTypes: { + hideModal: { + action: 'hideModal', + }, + removeAccount: { + action: 'removeAccount', + }, + identity: { + control: 'object', + }, + chainId: { + control: 'text', + }, + rpcPrefs: { + control: 'object', + }, + }, + args: { + identity: { + control: 'object', + }, + chainId: 'chainId', + rpcPrefs: { + control: 'object', + }, + }, +}; + +const Template = (args) => { + return ; +}; + +export const DefaultStory = Template.bind({}); + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/modals/confirm-remove-account/index.scss b/ui/components/app/modals/confirm-remove-account/index.scss index 055dd46da..939198dee 100644 --- a/ui/components/app/modals/confirm-remove-account/index.scss +++ b/ui/components/app/modals/confirm-remove-account/index.scss @@ -41,11 +41,6 @@ &__link { margin-top: 14px; - - img { - width: 15px; - height: 15px; - } } @media screen and (max-width: $break-small) { diff --git 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 index 1f349d6ad..c238d9106 100644 --- 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 @@ -226,7 +226,7 @@ export default class ConfirmApproveContent extends Component { : t('copyToClipboard') } > - + @@ -286,7 +286,7 @@ export default class ConfirmApproveContent extends Component { : t('copyToClipboard') } > - + @@ -327,7 +327,7 @@ export default class ConfirmApproveContent extends Component {
{this.renderApproveContentCard({ - symbol: , + symbol: , title: t('permissionRequest'), content: this.renderERC20PermissionContent(), showEdit: true, @@ -358,7 +358,7 @@ export default class ConfirmApproveContent extends Component {
{this.renderApproveContentCard({ - symbol: , + symbol: , title: t('permissionRequest'), content: this.renderERC721OrERC1155PermissionContent(), showEdit: false, @@ -541,7 +541,7 @@ export default class ConfirmApproveContent extends Component { : t('copyToClipboard') } > - + diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.stories.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.stories.js new file mode 100644 index 000000000..de304a1c9 --- /dev/null +++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.stories.js @@ -0,0 +1,141 @@ +import React from 'react'; +import { ERC20 } from '../../../helpers/constants/common'; +import ConfirmApproveContent from '.'; + +export default { + title: 'Pages/ConfirmApprove/ConfirmApproveContent', + id: __filename, + component: ConfirmApproveContent, + argTypes: { + decimals: { + control: 'number', + }, + tokenAmount: { + control: 'text', + }, + customTokenAmount: { + control: 'text', + }, + tokenSymbol: { + control: 'text', + }, + siteImage: { + control: 'text', + }, + showCustomizeGasModal: { + action: 'showCustomizeGasModal', + }, + showEditApprovalPermissionModal: { + action: 'showEditApprovalPermissionModal', + }, + origin: { + control: 'text', + }, + setCustomAmount: { + action: 'setCustomAmount', + }, + tokenBalance: { + control: 'text', + }, + data: { + control: 'text', + }, + toAddress: { + control: 'text', + }, + currentCurrency: { + control: 'text', + }, + nativeCurrency: { + control: 'text', + }, + fiatTransactionTotal: { + control: 'text', + }, + ethTransactionTotal: { + control: 'text', + }, + useNonceField: { + control: 'boolean', + }, + customNonceValue: { + control: 'text', + }, + updateCustomNonce: { + action: 'updateCustomNonce', + }, + getNextNonce: { + action: 'getNextNonce', + }, + nextNonce: { + control: 'number', + }, + showCustomizeNonceModal: { + action: 'showCustomizeNonceModal', + }, + warning: { + control: 'text', + }, + txData: { + control: 'object', + }, + fromAddressIsLedger: { + control: 'boolean', + }, + chainId: { + control: 'text', + }, + rpcPrefs: { + control: 'object', + }, + isContract: { + control: 'boolean', + }, + hexTransactionTotal: { + control: 'text', + }, + isMultiLayerFeeNetwork: { + control: 'boolean', + }, + supportsEIP1559V2: { + control: 'boolean', + }, + assetName: { + control: 'text', + }, + tokenId: { + control: 'text', + }, + assetStandard: { + control: 'text', + }, + }, + args: { + 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', + assetStandard: ERC20, + tokenImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg', + tokenBalance: '15', + data: + '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', + toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4', + currentCurrency: 'TST', + nativeCurrency: 'ETH', + ethTransactionTotal: '20', + fiatTransactionTotal: '10', + useNonceField: true, + nextNonce: 1, + customNonceValue: '2', + chainId: '1337', + rpcPrefs: {}, + isContract: true, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/create-account/connect-hardware/account-list.js b/ui/pages/create-account/connect-hardware/account-list.js index dcfda41fe..183c723c9 100644 --- a/ui/pages/create-account/connect-hardware/account-list.js +++ b/ui/pages/create-account/connect-hardware/account-list.js @@ -152,7 +152,10 @@ class AccountList extends Component { rel="noopener noreferrer" title={this.context.t('etherscanView')} > - +
); diff --git a/ui/pages/create-account/connect-hardware/account-list.stories.js b/ui/pages/create-account/connect-hardware/account-list.stories.js index 28b2639de..49a9695b0 100644 --- a/ui/pages/create-account/connect-hardware/account-list.stories.js +++ b/ui/pages/create-account/connect-hardware/account-list.stories.js @@ -1,71 +1,92 @@ -import React, { useState } from 'react'; -import { Provider } from 'react-redux'; -import { action } from '@storybook/addon-actions'; -import configureStore from '../../../store/store'; -import testData from '../../../../.storybook/test-data'; - +import React from 'react'; import AccountList from './account-list'; -const store = configureStore(testData); - export default { title: 'Pages/CreateAccount/ConnectHardware/AccountList', id: __filename, - decorators: [(story) => {story()}], -}; - -global.platform = { - openTab: () => action('Open Tab')(), -}; - -export const DefaultStory = () => { - const [selectedAccounts, setSelectedAccounts] = useState([ - { - name: 'This is a Really Long Account Name', - address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', - index: 0, - balance: '0x176e5b6f173ebe66', + argTypes: { + onPathChange: { + action: 'onPathChange', }, - ]); - const { metamask } = store.getState(); - const { accountArray, connectedAccounts } = metamask; - const LEDGER_LIVE_PATH = `m/44'/60'/0'/0/0`; - const MEW_PATH = `m/44'/60'/0'`; - const BIP44_PATH = `m/44'/60'/0'/0`; - - const HD_PATHS = [ - { name: 'Ledger Live', value: LEDGER_LIVE_PATH }, - { name: 'Legacy (MEW / MyCrypto)', value: MEW_PATH }, - { name: `BIP44 Standard (e.g. MetaMask, Trezor)`, value: BIP44_PATH }, - ]; - - const onAccountChange = (account) => { - let accounts = []; - if (selectedAccounts.includes(account)) { - accounts = selectedAccounts.filter((acc) => account !== acc); - } else { - accounts.push(account); - } - setSelectedAccounts(accounts); - }; - - return ( - undefined} - selectedPath="/" - device="null" - accounts={accountArray} - connectedAccounts={connectedAccounts} - onAccountChange={onAccountChange} - onForgetDevice={() => action('On Forget Device')()} - getPage={() => action('Get Page')()} - selectedAccounts={selectedAccounts} - hdPaths={HD_PATHS} - onCancel={() => action('On Cancel')()} - onUnlockAccounts={() => action('On Unlock Accounts')()} - onAccountRestriction={() => action('On Account Restriction')()} - /> - ); + selectedPath: 'selectedPath', + device: 'device', + accounts: { + control: 'array', + }, + connectedAccounts: { + control: 'array', + }, + onAccountChange: { + action: 'onAccountChange', + }, + onForgetDevice: { + action: 'onForgetDevice', + }, + getPage: { + action: 'getPage', + }, + chainId: { + control: 'text', + }, + rpcPrefs: { + control: 'object', + }, + selectedAccounts: { + control: 'array', + }, + onUnlockAccounts: { + action: 'onUnlockAccounts', + }, + onCancel: { + action: 'onCancel', + }, + onAccountRestriction: { + action: 'onAccountRestriction', + }, + hdPaths: { + control: 'array', + }, + }, + args: { + selectedPath: 'selectedPath', + device: 'device', + accounts: [ + { + name: 'This is a Really Long Account Name', + address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', + index: 0, + balance: '0x176e5b6f173ebe66', + }, + ], + connectedAccounts: [ + { + name: 'This is a Really Long Account Name', + address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', + index: 0, + balance: '0x176e5b6f173ebe66', + }, + ], + chainId: 'chainId', + rpcPrefs: {}, + selectedAccounts: [ + { + name: 'This is a Really Long Account Name', + address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', + index: 0, + balance: '0x176e5b6f173ebe66', + }, + ], + hdPaths: [ + { name: 'Ledger Live', value: `m/44'/60'/0'/0/0` }, + { name: 'Legacy (MEW / MyCrypto)', value: `m/44'/60'/0'` }, + { + name: `BIP44 Standard (e.g. MetaMask, Trezor)`, + value: `m/44'/60'/0'/0`, + }, + ], + }, }; +export const DefaultStory = (args) => ; + DefaultStory.storyName = 'Default';