mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Dark mode: confirm approve content popout and user approve check icon (#14211)
This commit is contained in:
George Marshall
GitHub
parent
382669bb34
commit
b1cfdd2475
@ -1,9 +0,0 @@
|
||||
<svg height="22" width="22" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M0 0h11v11H0z" fill-rule="evenodd"/>
|
||||
</mask>
|
||||
<g fill="#4a4a4a" fill-rule="evenodd">
|
||||
<path d="M10.923.618A1.006 1.006 0 0010 0H4a1 1 0 000 2h3.586L.293 9.293a.999.999 0 101.414 1.414L9 3.414V7a1 1 0 102 0V1a.995.995 0 00-.077-.382" mask="url(#a)" transform="translate(11)"/>
|
||||
<path d="M19 10a1 1 0 00-1 1v8c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1V5c0-.551.449-1 1-1h8a1 1 0 000-2H3C1.346 2 0 3.346 0 5v14c0 1.654 1.346 3 3 3h14c1.654 0 3-1.346 3-3v-8a1 1 0 00-1-1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 615 B |
@ -1,3 +0,0 @@
|
||||
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 8C9.1875 8 11 6.21875 11 4C11 1.8125 9.1875 0 7 0C4.78125 0 3 1.8125 3 4C3 6.21875 4.78125 8 7 8ZM9.78125 9H9.25C8.5625 9.34375 7.8125 9.5 7 9.5C6.1875 9.5 5.40625 9.34375 4.71875 9H4.1875C1.875 9 0 10.9062 0 13.2188V14.5C0 15.3438 0.65625 16 1.5 16H12.5C13.3125 16 14 15.3438 14 14.5V13.2188C14 10.9062 12.0938 9 9.78125 9ZM19.875 5L19 4.125C18.875 3.96875 18.625 3.96875 18.5 4.125L15.2188 7.375L13.7812 5.9375C13.6562 5.78125 13.4062 5.78125 13.25 5.9375L12.375 6.8125C12.25 6.9375 12.25 7.1875 12.375 7.34375L14.9375 9.90625C15.0938 10.0625 15.3125 10.0625 15.4688 9.90625L19.875 5.53125C20.0312 5.375 20.0312 5.15625 19.875 5Z" fill="#6A737D"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 769 B |
@ -53,7 +53,6 @@ export default class ConfirmRemoveAccount extends Component {
|
||||
</div>
|
||||
<div className="confirm-remove-account__account__link">
|
||||
<a
|
||||
className=""
|
||||
onClick={() => {
|
||||
const accountLink = getAccountLink(
|
||||
identity.address,
|
||||
@ -77,7 +76,11 @@ export default class ConfirmRemoveAccount extends Component {
|
||||
rel="noopener noreferrer"
|
||||
title={t('etherscanView')}
|
||||
>
|
||||
<img src="images/popout.svg" alt={t('etherscanView')} />
|
||||
<i
|
||||
className="fa fa-share-square"
|
||||
style={{ color: 'var(--color-icon-muted)' }}
|
||||
title={t('etherscanView')}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 <ConfirmRemoveAccount {...args} />;
|
||||
};
|
||||
|
||||
export const DefaultStory = Template.bind({});
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -41,11 +41,6 @@
|
||||
|
||||
&__link {
|
||||
margin-top: 14px;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
|
||||
@ -226,7 +226,7 @@ export default class ConfirmApproveContent extends Component {
|
||||
: t('copyToClipboard')
|
||||
}
|
||||
>
|
||||
<CopyIcon size={14} color="#6a737d" />
|
||||
<CopyIcon size={14} color="var(--color-icon-default)" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -286,7 +286,7 @@ export default class ConfirmApproveContent extends Component {
|
||||
: t('copyToClipboard')
|
||||
}
|
||||
>
|
||||
<CopyIcon size={14} color="#6a737d" />
|
||||
<CopyIcon size={14} color="var(--color-icon-default)" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -327,7 +327,7 @@ export default class ConfirmApproveContent extends Component {
|
||||
<div className="confirm-approve-content__full-tx-content">
|
||||
<div className="confirm-approve-content__permission">
|
||||
{this.renderApproveContentCard({
|
||||
symbol: <img src="./images/user-check.svg" alt="" />,
|
||||
symbol: <i className="fa fa-user-check" />,
|
||||
title: t('permissionRequest'),
|
||||
content: this.renderERC20PermissionContent(),
|
||||
showEdit: true,
|
||||
@ -358,7 +358,7 @@ export default class ConfirmApproveContent extends Component {
|
||||
<div className="confirm-approve-content__full-tx-content">
|
||||
<div className="confirm-approve-content__permission">
|
||||
{this.renderApproveContentCard({
|
||||
symbol: <img src="./images/user-check.svg" alt="" />,
|
||||
symbol: <i className="fas fa-user-check" />,
|
||||
title: t('permissionRequest'),
|
||||
content: this.renderERC721OrERC1155PermissionContent(),
|
||||
showEdit: false,
|
||||
@ -541,7 +541,7 @@ export default class ConfirmApproveContent extends Component {
|
||||
: t('copyToClipboard')
|
||||
}
|
||||
>
|
||||
<CopyIcon size={9} color="#6a737d" />
|
||||
<CopyIcon size={9} color="var(--color-icon-default)" />
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
@ -565,7 +565,11 @@ export default class ConfirmApproveContent extends Component {
|
||||
rel="noopener noreferrer"
|
||||
title={t('etherscanView')}
|
||||
>
|
||||
<img src="images/popout.svg" alt={t('etherscanView')} />
|
||||
<i
|
||||
className="fa fa-share-square fa-sm"
|
||||
style={{ color: 'var(--color-icon-default)', fontSize: 11 }}
|
||||
title={t('etherscanView')}
|
||||
/>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -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) => <ConfirmApproveContent {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -152,7 +152,10 @@ class AccountList extends Component {
|
||||
rel="noopener noreferrer"
|
||||
title={this.context.t('etherscanView')}
|
||||
>
|
||||
<img src="images/popout.svg" alt="" />
|
||||
<i
|
||||
className="fa fa-share-square"
|
||||
style={{ color: 'var(--color-icon-default)' }}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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) => <Provider store={store}>{story()}</Provider>],
|
||||
};
|
||||
|
||||
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 (
|
||||
<AccountList
|
||||
onPathChange={() => 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) => <AccountList {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user