From 854fc71ae76f7162188d576361e2d9f3e40f11ad Mon Sep 17 00:00:00 2001 From: George Marshall Date: Wed, 1 Dec 2021 11:27:57 -0800 Subject: [PATCH 001/100] Organizing storybook to echo app folder structure (#12796) * Organizing storybook to echo app folder structure * Updating new stories to follow new convention from develop --- .storybook/preview.js | 5 +++++ .../account-list-item.stories.js | 6 ++++-- .../advanced-gas-controls.stories.js | 6 ++++-- .../collectible-details.stories.js | 2 +- .../edit-gas-display-education.stories.js | 6 ++++-- .../edit-gas-display.stories.js | 10 ++++++---- .../edit-gas-popover.stories.js | 10 ++++++---- .../metamask-template-renderer.stories.js | 9 ++++++--- .../metamask-translation.stories.js | 8 ++++---- .../signature-request.stories.js | 6 ++++-- .../transaction-detail-item.stories.js | 6 ++++-- .../transaction-detail.stories.js | 11 +++++++---- .../transaction-list.stories.js | 6 ++++-- .../transaction-total-banner.stories.js | 2 +- .../actionable-message.stories.js | 8 +++++--- .../alert-circle-icon.stories.js | 8 +++----- ui/components/ui/box/box.stories.js | 6 ++++-- ui/components/ui/button/button.stories.js | 2 +- ui/components/ui/callout/callout.stories.js | 4 ++-- ui/components/ui/card/card.stories.js | 2 +- ui/components/ui/chip/chip.stories.js | 2 +- .../ui/circle-icon/circle-icon.stories.js | 2 +- .../color-indicator/color-indicator.stories.js | 8 +++++--- .../definition-list/definition-list.stories.js | 10 ++++++---- ui/components/ui/dropdown/dropdown.stories.js | 12 +++++++----- .../ui/error-message/error-message.stories.js | 6 ++++-- .../ui/form-field/form-field.stories.js | 10 ++++++---- ui/components/ui/icon/icon.stories.js | 2 +- .../ui/identicon/identicon.stories.js | 12 +++++++----- .../ui/info-tooltip/info-tooltip.stories.js | 2 +- .../ui/list-item/list-item.stories.js | 10 +++++----- ui/components/ui/mascot/mascot.stories.js | 8 +++++--- ui/components/ui/menu/menu.stories.js | 6 ++++-- .../nickname-popover.stories.js | 6 ++++-- .../ui/numeric-input/numeric-input.stories.js | 10 ++++++---- ui/components/ui/popover/popover.stories.js | 6 ++++-- .../ui/pulse-loader/pulse-loader.stories.js | 6 ++++-- .../ui/radio-group/radio-group.stories.js | 6 ++++-- ui/components/ui/slider/slider.stories.js | 15 +++++++++------ ui/components/ui/tabs/tabs.stories.js | 8 ++++---- .../ui/text-field/text-field.stories.js | 18 ++++++++++-------- .../ui/toggle-button/toggle-button.stories.js | 2 +- .../truncated-definition-list.stories.js | 8 +++++--- .../ui/typography/typography.stories.js | 4 ++-- .../update-nickname-popover.stories.js | 2 +- ui/components/ui/url-icon/url-icon.stories.js | 2 +- .../confirm-add-suggested-token.stories.js | 6 ++++-- .../confirm-approve/confirm-approve.stories.js | 6 ++++-- .../confirm-deploy-contract.stories.js | 6 ++++-- .../confirm-encryption-public-key.stories.js | 6 ++++-- .../confirm-import-token.stories.js | 6 ++++-- .../confirm-send-ether.stories.js | 6 ++++-- .../confirm-send-token.stories.js | 6 ++++-- .../confirm-token-transaction-base.stories.js | 6 ++++-- .../confirm-transaction-base.stories.js | 6 ++++-- .../connected-accounts.stories.js | 6 ++++-- .../connected-sites/connected-sites.stories.js | 6 ++++-- .../connect-hardware/account-list.stories.js | 7 +++++-- .../select-hardware.stories.js | 7 +++++-- ui/pages/create-account/new-account.stories.js | 6 ++++-- .../create-password/create-password.stories.js | 2 +- .../end-of-flow/end-of-flow.stories.js | 6 ++++-- .../metametrics-opt-in.stories.js | 6 ++++-- .../select-action/select-action.stories.js | 6 ++++-- .../first-time-flow/welcome/welcome.stories.js | 6 ++++-- ui/pages/import-token/import-token.stories.js | 6 ++++-- .../token-list-placeholder.stories.js | 6 ++++-- .../token-search/token-search.stories.js | 6 ++++-- ui/pages/mobile-sync/mobile-sync.stories.js | 6 ++++-- .../creation-successful.stories.js | 6 ++++-- .../metametrics/metametrics.stories.js | 6 ++++-- .../pin-extension/pin-extension.stories.js | 6 ++++-- .../privacy-settings.stories.js | 6 ++++-- .../secure-your-wallet.stories.js | 6 ++++-- .../onboarding-flow/welcome/welcome.stories.js | 6 ++++-- .../permissions-connect.stories.js | 2 +- .../add-recipient/add-recipient.stories.js | 6 ++++-- .../send-asset-row/send-asset-row.stories.js | 6 ++++-- .../send/send-content/send-content.stories.js | 6 ++++-- .../gas-fee-display/gas-fee-display.stories.js | 6 ++++-- .../send-gas-row/send-gas-row.stories.js | 6 ++++-- .../send-hex-data-row.stories.js | 6 ++++-- .../send/send-footer/send-footer.stories.js | 6 ++++-- .../send/send-header/send-header.stories.js | 6 ++++-- .../advanced-tab/advanced-tab.stories.js | 6 ++++-- .../contact-list-tab.stories.js | 6 ++++-- ui/pages/settings/settings.stories.js | 2 +- .../awaiting-signatures.stories.js | 6 ++++-- .../swaps/build-quote/build-quote.stories.js | 6 ++++-- .../countdown-timer/countdown-timer.stories.js | 6 ++++-- .../dropdown-input-pair.stories.js | 6 ++++-- .../dropdown-search-list.stories.js | 6 ++++-- .../exchange-rate-display.stories.js | 6 ++++-- ui/pages/swaps/fee-card/fee-card.stories.js | 2 +- .../swaps/import-token/import-token.stories.js | 6 ++++-- .../main-quote-summary.stories.js | 6 ++++-- .../select-quote-popover.stories.js | 6 ++++-- .../slippage-buttons.stories.js | 6 ++++-- .../swaps-gas-customization-modal.stories.js | 10 ++++------ ui/pages/unlock-page/unlock-page.stories.js | 6 ++++-- 100 files changed, 390 insertions(+), 230 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 71fa49be3..89fdb4252 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -22,6 +22,11 @@ addParameters({ { name: 'dark', value: '#333333' }, ], }, + options: { + storySort: { + order: ['Getting Started', 'Components', ['UI', 'App'], 'Pages'], + }, + }, }); export const globalTypes = { diff --git a/ui/components/app/account-list-item/account-list-item.stories.js b/ui/components/app/account-list-item/account-list-item.stories.js index a6746113d..7d51ef2c7 100644 --- a/ui/components/app/account-list-item/account-list-item.stories.js +++ b/ui/components/app/account-list-item/account-list-item.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import AccountListItem from './account-list-item'; export default { - title: 'AccountListItem', + title: 'Components/App/AccountListItem', id: __filename, }; -export const AccountListItemComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js index 7c14aefb0..08543ee21 100644 --- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js +++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js @@ -3,14 +3,16 @@ import React from 'react'; import AdvancedGasControls from '.'; export default { - title: 'Advanced Gas Controls', + title: 'Components/App/AdvancedGasControls', id: __filename, }; -export const simple = () => { +export const DefaultStory = () => { return (
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/collectible-details/collectible-details.stories.js b/ui/components/app/collectible-details/collectible-details.stories.js index a64e15703..1eeb9aaae 100644 --- a/ui/components/app/collectible-details/collectible-details.stories.js +++ b/ui/components/app/collectible-details/collectible-details.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import CollectibleDetails from './collectible-details'; export default { - title: 'Collectibles Detail', + title: 'Components/App/CollectibleDetails', id: __filename, }; diff --git a/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js b/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js index f53cfd344..04ee10fbb 100644 --- a/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js +++ b/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js @@ -2,14 +2,16 @@ import React from 'react'; import EditGasDisplayEducation from '.'; export default { - title: 'Edit Gas Display', + title: 'Components/App/EditGasDisplayEducation', id: __filename, }; -export const basic = () => { +export const DefaultStory = () => { return (
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/edit-gas-display/edit-gas-display.stories.js b/ui/components/app/edit-gas-display/edit-gas-display.stories.js index 14724468f..9de3300f2 100644 --- a/ui/components/app/edit-gas-display/edit-gas-display.stories.js +++ b/ui/components/app/edit-gas-display/edit-gas-display.stories.js @@ -2,11 +2,11 @@ import React from 'react'; import EditGasDisplay from '.'; export default { - title: 'Edit Gas Display', + title: 'Components/App/EditGasDisplay', id: __filename, }; -export const basic = () => { +export const DefaultStory = () => { return (
@@ -14,7 +14,9 @@ export const basic = () => { ); }; -export const withEducation = () => { +DefaultStory.storyName = 'Default'; + +export const WithEducation = () => { return (
@@ -22,7 +24,7 @@ export const withEducation = () => { ); }; -export const withDappSuggestedGas = () => { +export const WithDappSuggestedGas = () => { return (
{story()}], id: __filename, }; -export const Basic = () => { +export const DefaultStory = () => { return (
{ ); }; -export const BasicWithDifferentButtonText = () => { +DefaultStory.storyName = 'Default'; + +export const WithDifferentButtonText = () => { return (
{ ); }; -export const EducationalContentFlow = () => { +export const WithEducationalContentFlow = () => { return (
( + +export const DefaultStory = () => ( ); -export const withInvalidElement = () => ( +DefaultStory.storyName = 'Default'; + +export const WithInvalidElement = () => ( ( +export const WithoutSubstitutions = () => ( ( /> ); -export const withSubstitutions = () => ( +export const WithSubstitutions = () => ( ( /> ); -export const withTemplate = () => ( +export const WithTemplate = () => ( { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js index bb98c0bfb..6d71d4766 100644 --- a/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js +++ b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js @@ -4,11 +4,11 @@ import GasTiming from '../gas-timing/gas-timing.component'; import TransactionDetailItem from '.'; export default { - title: 'Transaction Detail Item', + title: 'Components/App/TransactionDetailItem', id: __filename, }; -export const basic = () => { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/transaction-detail/transaction-detail.stories.js b/ui/components/app/transaction-detail/transaction-detail.stories.js index b0cbfeb31..64ad4fce6 100644 --- a/ui/components/app/transaction-detail/transaction-detail.stories.js +++ b/ui/components/app/transaction-detail/transaction-detail.stories.js @@ -1,11 +1,12 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; import InfoTooltip from '../../ui/info-tooltip/info-tooltip'; import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component'; import GasTiming from '../gas-timing/gas-timing.component'; import TransactionDetail from '.'; export default { - title: 'Transaction Detail', + title: 'Components/App/TransactionDetail', id: __filename, }; @@ -43,7 +44,7 @@ const rows = [ />, ]; -export const basic = () => { +export const DefaultStory = () => { return (
@@ -51,10 +52,12 @@ export const basic = () => { ); }; -export const editable = () => { +DefaultStory.storyName = 'Default'; + +export const Editable = () => { return (
- console.log('Edit!')} /> + action('Edit!')()} />
); }; diff --git a/ui/components/app/transaction-list/transaction-list.stories.js b/ui/components/app/transaction-list/transaction-list.stories.js index eea8cc97f..faef67b5c 100644 --- a/ui/components/app/transaction-list/transaction-list.stories.js +++ b/ui/components/app/transaction-list/transaction-list.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import TransactionList from '.'; export default { - title: 'Transaction List', + title: 'Components/App/TransactionList', id: __filename, }; @@ -11,10 +11,12 @@ const PageSet = ({ children }) => { return children; }; -export const TxList = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js b/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js index 576a6a742..eb2159a4d 100644 --- a/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js +++ b/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import TransactionTotalBanner from '.'; export default { - title: 'Transaction Total Banner', + title: 'Components/App/TransactionTotalBanner', id: __filename, }; diff --git a/ui/components/ui/actionable-message/actionable-message.stories.js b/ui/components/ui/actionable-message/actionable-message.stories.js index edb6aa823..238efdbce 100644 --- a/ui/components/ui/actionable-message/actionable-message.stories.js +++ b/ui/components/ui/actionable-message/actionable-message.stories.js @@ -4,11 +4,11 @@ import { text } from '@storybook/addon-knobs'; import ActionableMessage from '.'; export default { - title: 'ActionableMessage', + title: 'Components/UI/ActionableMessage', id: __filename, }; -export const NoAction = () => ( +export const DefaultStory = () => (
(
); +DefaultStory.storyName = 'Default'; + export const OneAction = () => (
(
); -export const withIcon = () => ( +export const WithIcon = () => (
; -DefaultStory.storyName = 'Default'; -DefaultStory.args = { - type: 'danger', -}; +DefaultStory.storyName = 'Default'; export const Warning = (args) => ; + Warning.args = { type: 'warning', }; diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js index b7168786b..732ddad2c 100644 --- a/ui/components/ui/box/box.stories.js +++ b/ui/components/ui/box/box.stories.js @@ -12,13 +12,13 @@ import { import Box from './box'; export default { - title: 'Box', + title: 'Components/UI/Box', id: __filename, }; const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; -export const box = () => { +export const DefaultStory = () => { const items = []; const size = number( 'size', @@ -86,3 +86,5 @@ export const box = () => { ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/button/button.stories.js b/ui/components/ui/button/button.stories.js index 05d61ec3c..c1da912ab 100644 --- a/ui/components/ui/button/button.stories.js +++ b/ui/components/ui/button/button.stories.js @@ -6,7 +6,7 @@ import README from './README.mdx'; import Button from '.'; export default { - title: 'Button', + title: 'Components/UI/Button', id: __filename, component: Button, parameters: { diff --git a/ui/components/ui/callout/callout.stories.js b/ui/components/ui/callout/callout.stories.js index 241fe34f9..4bdfc516f 100644 --- a/ui/components/ui/callout/callout.stories.js +++ b/ui/components/ui/callout/callout.stories.js @@ -10,11 +10,11 @@ import Typography from '../typography'; import Callout from './callout'; export default { - title: 'Callout', + title: 'Components/UI/Callout', id: __filename, }; -export const persistentCallout = () => ( +export const PersistentCallout = () => ( This is your private key: diff --git a/ui/components/ui/card/card.stories.js b/ui/components/ui/card/card.stories.js index 1dd2075e2..3fe77495c 100644 --- a/ui/components/ui/card/card.stories.js +++ b/ui/components/ui/card/card.stories.js @@ -15,7 +15,7 @@ import Card from '.'; const sizeOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; export default { - title: 'UI/Card', + title: 'Components/UI/Card', id: __filename, component: Card, parameters: { diff --git a/ui/components/ui/chip/chip.stories.js b/ui/components/ui/chip/chip.stories.js index 06c638812..fd6f960c5 100644 --- a/ui/components/ui/chip/chip.stories.js +++ b/ui/components/ui/chip/chip.stories.js @@ -11,7 +11,7 @@ import README from './README.mdx'; import Chip from '.'; export default { - title: 'UI/Chip', + title: 'Components/UI/Chip', id: __filename, component: Chip, parameters: { diff --git a/ui/components/ui/circle-icon/circle-icon.stories.js b/ui/components/ui/circle-icon/circle-icon.stories.js index 5fb969737..90c63d817 100644 --- a/ui/components/ui/circle-icon/circle-icon.stories.js +++ b/ui/components/ui/circle-icon/circle-icon.stories.js @@ -3,7 +3,7 @@ import README from './README.mdx'; import CircleIcon from './circle-icon.component'; export default { - title: 'Components/UI/Circle Icon', + title: 'Components/UI/CircleIcon', id: __filename, component: CircleIcon, parameters: { diff --git a/ui/components/ui/color-indicator/color-indicator.stories.js b/ui/components/ui/color-indicator/color-indicator.stories.js index 828d23570..c5e480439 100644 --- a/ui/components/ui/color-indicator/color-indicator.stories.js +++ b/ui/components/ui/color-indicator/color-indicator.stories.js @@ -4,11 +4,11 @@ import { COLORS, SIZES } from '../../../helpers/constants/design-system'; import ColorIndicator from './color-indicator'; export default { - title: 'ColorIndicator', + title: 'Components/UI/ColorIndicator', id: __filename, }; -export const colorIndicator = () => ( +export const DefaultStory = () => ( ( /> ); -export const withIcon = () => ( +DefaultStory.storyName = 'Default'; + +export const WithIcon = () => ( ( +export const DefaultStory = () => ( ); -export const withTooltips = () => ( +DefaultStory.storyName = 'Default'; + +export const WithTooltips = () => ( ( /> ); -export const withTypographyControl = () => ( +export const WithTypographyControl = () => ( { }; }); -export const simple = () => ( +export const DefaultStory = () => ( ( /> ); -export const optionsWithoutNames = () => ( +DefaultStory.storyName = 'Default'; + +export const OptionsWithoutNames = () => ( ( /> ); -export const optionsWithLongNames = () => ( +export const OptionsWithLongNames = () => ( ( /> ); -export const optionsWithLongNamesAndShortWidth = () => ( +export const OptionsWithLongNamesAndShortWidth = () => ( ( +export const DefaultStory = () => ( ); + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js index d555690eb..94008e9cd 100644 --- a/ui/components/ui/form-field/form-field.stories.js +++ b/ui/components/ui/form-field/form-field.stories.js @@ -5,11 +5,11 @@ import { select } from '@storybook/addon-knobs'; import FormField from '.'; export default { - title: 'FormField', + title: 'Components/UI/FormField', id: __filename, }; -export const Plain = ({ ...props }) => { +export const DefaultStory = ({ ...props }) => { const options = { text: false, numeric: true }; const [value, setValue] = useState(''); return ( @@ -25,6 +25,8 @@ export const Plain = ({ ...props }) => { ); }; +DefaultStory.storyName = 'Default'; + export const FormFieldWithTitleDetail = () => { const [clicked, setClicked] = useState(false); const detailOptions = { @@ -40,7 +42,7 @@ export const FormFieldWithTitleDetail = () => { checkmark: , }; return ( - { }; export const FormFieldWithError = () => { - return ; + return ; }; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index 104dc1c0f..441b206e9 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -11,7 +11,7 @@ import InfoIcon from './info-icon.component'; import InfoIconInverted from './info-icon-inverted.component'; export default { - title: 'Icon', + title: 'Components/UI/Icon', id: __filename, }; diff --git a/ui/components/ui/identicon/identicon.stories.js b/ui/components/ui/identicon/identicon.stories.js index b7103ff0f..931cf8980 100644 --- a/ui/components/ui/identicon/identicon.stories.js +++ b/ui/components/ui/identicon/identicon.stories.js @@ -3,7 +3,7 @@ import { text, boolean, number } from '@storybook/addon-knobs'; import Identicon from './identicon.component'; export default { - title: 'Identicon', + title: 'Components/UI/Identicon', id: __filename, }; @@ -13,7 +13,7 @@ const diameterOptions = { max: 200, step: 1, }; -export const standard = () => ( +export const DefaultStory = () => ( ( /> ); -export const image = () => ; +DefaultStory.storyName = 'Default'; -export const blockie = () => ( +export const Image = () => ; + +export const Blockie = () => ( ( // The border size is hard-coded in CSS, and was designed with this size identicon in mind const withBorderDiameter = 32; -export const withBorder = () => ( +export const WithBorder = () => ( ( +export const SendComponent = () => ( } titleIcon={} @@ -54,7 +54,7 @@ export const send = () => ( ); -export const pending = () => ( +export const PendingComponent = () => ( } title={text('title', 'Hatch Turtles')} @@ -74,7 +74,7 @@ export const pending = () => ( /> ); -export const approve = () => ( +export const ApproveComponent = () => ( } title={text('title', 'Approve spend limit')} @@ -89,7 +89,7 @@ export const approve = () => ( /> ); -export const receive = () => ( +export const ReceiveComponent = () => ( } title={text('title', 'Hatch Turtles')} diff --git a/ui/components/ui/mascot/mascot.stories.js b/ui/components/ui/mascot/mascot.stories.js index 5282e68a7..020e858b4 100644 --- a/ui/components/ui/mascot/mascot.stories.js +++ b/ui/components/ui/mascot/mascot.stories.js @@ -21,11 +21,11 @@ const buttonStyle = { }; export default { - title: 'Mascot', + title: 'Components/UI/Mascot', id: __filename, }; -export function Demo() { +export const DefaultStory = () => { const [lookAtDirection, setLookAtDirection] = useState(null); const [followMouseMode, setFollowMouseMode] = useState(false); const [clickToLookMode, setClickToLookMode] = useState(false); @@ -88,4 +88,6 @@ export function Demo() {
); -} +}; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/menu/menu.stories.js b/ui/components/ui/menu/menu.stories.js index 73e0291eb..9585b6cfd 100644 --- a/ui/components/ui/menu/menu.stories.js +++ b/ui/components/ui/menu/menu.stories.js @@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions'; import { Menu, MenuItem } from '.'; export default { - title: 'Menu', + title: 'Components/UI/Menu', id: __filename, }; -export const Basic = () => { +export const DefaultStory = () => { return ( @@ -21,6 +21,8 @@ export const Basic = () => { ); }; +DefaultStory.storyName = 'Default'; + export const Anchored = () => { const [anchorElement, setAnchorElement] = useState(null); return ( diff --git a/ui/components/ui/nickname-popover/nickname-popover.stories.js b/ui/components/ui/nickname-popover/nickname-popover.stories.js index a1097e32c..9cf1921da 100644 --- a/ui/components/ui/nickname-popover/nickname-popover.stories.js +++ b/ui/components/ui/nickname-popover/nickname-popover.stories.js @@ -5,11 +5,11 @@ import Button from '../button'; import NicknamePopover from '.'; export default { - title: 'NicknamePopover', + title: 'Components/UI/NicknamePopover', id: __filename, }; -export const Default = () => { +export const DefaultStory = () => { const [showNicknamePopover, setShowNicknamePopover] = useState(false); return ( @@ -30,3 +30,5 @@ export const Default = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/numeric-input/numeric-input.stories.js b/ui/components/ui/numeric-input/numeric-input.stories.js index c86988bb6..79e241d69 100644 --- a/ui/components/ui/numeric-input/numeric-input.stories.js +++ b/ui/components/ui/numeric-input/numeric-input.stories.js @@ -2,13 +2,13 @@ import React from 'react'; import NumericInput from '.'; export default { - title: 'NumericInput', + title: 'Components/UI/NumericInput', id: __filename, }; const onChange = (e) => console.log('changed value: ', e.target.value); -export const numericInput = () => { +export const DefaultStory = () => { return (
@@ -16,7 +16,9 @@ export const numericInput = () => { ); }; -export const numericInputWithDetail = () => { +DefaultStory.storyName = 'Default'; + +export const WithDetail = () => { return (
@@ -24,7 +26,7 @@ export const numericInputWithDetail = () => { ); }; -export const numericInputWithError = () => { +export const WithError = () => { return (
( +export const DefaultStory = () => (
(
); + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/pulse-loader/pulse-loader.stories.js b/ui/components/ui/pulse-loader/pulse-loader.stories.js index 122658d50..58c44a096 100644 --- a/ui/components/ui/pulse-loader/pulse-loader.stories.js +++ b/ui/components/ui/pulse-loader/pulse-loader.stories.js @@ -2,8 +2,10 @@ import React from 'react'; import PulseLoader from '.'; export default { - title: 'PulseLoader', + title: 'Components/UI/PulseLoader', id: __filename, }; -export const common = () => ; +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/radio-group/radio-group.stories.js b/ui/components/ui/radio-group/radio-group.stories.js index c614e7bad..e5b99a31b 100644 --- a/ui/components/ui/radio-group/radio-group.stories.js +++ b/ui/components/ui/radio-group/radio-group.stories.js @@ -3,11 +3,11 @@ import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas'; import RadioGroup from '.'; export default { - title: 'RadioGroup', + title: 'Components/UI/RadioGroup', id: __filename, }; -export const radioGroup = () => { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/slider/slider.stories.js b/ui/components/ui/slider/slider.stories.js index 316ae3929..b9bd3fdaa 100644 --- a/ui/components/ui/slider/slider.stories.js +++ b/ui/components/ui/slider/slider.stories.js @@ -1,16 +1,19 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; import Slider from '.'; export default { - title: 'Slider', + title: 'Components/UI/Slider', id: __filename, }; -export const slider = () => ; +export const DefaultStory = () => ; -export const sliderWithSteps = () => ; +DefaultStory.storyName = 'Default'; -export const sliderWithHeader = () => ( +export const WithSteps = () => ; + +export const WithHeader = () => ( ( /> ); -export const sliderWithFooter = () => ( +export const WithFooter = () => ( ( titleDetail="100 GWEI" infoText="Footer Info Text" onEdit={() => { - console.log('on edit click'); + action('On edit click')(); }} /> ); diff --git a/ui/components/ui/tabs/tabs.stories.js b/ui/components/ui/tabs/tabs.stories.js index 5127c549d..cefd21b73 100644 --- a/ui/components/ui/tabs/tabs.stories.js +++ b/ui/components/ui/tabs/tabs.stories.js @@ -4,7 +4,7 @@ import Tab from './tab/tab.component'; import Tabs from './tabs.component'; export default { - title: 'Tabs', + title: 'Components/UI/Tabs', id: __filename, }; @@ -16,15 +16,15 @@ function renderTab(id) { ); } -export const twoTabs = () => { +export const TwoTabs = () => { return {['A', 'B'].map(renderTab)}; }; -export const manyTabs = () => { +export const ManyTabs = () => { return {['A', 'B', 'C', 'D', 'E'].map(renderTab)}; }; -export const singleTab = () => { +export const SingleTab = () => { return ( diff --git a/ui/components/ui/text-field/text-field.stories.js b/ui/components/ui/text-field/text-field.stories.js index af1d82325..79b4fcfd5 100644 --- a/ui/components/ui/text-field/text-field.stories.js +++ b/ui/components/ui/text-field/text-field.stories.js @@ -2,30 +2,32 @@ import React from 'react'; import TextField from '.'; export default { - title: 'TextField', + title: 'Components/UI/TextField', id: __filename, }; -export const text = () => ; +export const DefaultStory = () => ; -export const password = () => ; +DefaultStory.storyName = 'Default'; -export const error = () => ( +export const Password = () => ; + +export const Error = () => ( ); -export const mascaraText = () => ( +export const MascaraText = () => ( ); -export const materialText = () => ( +export const MaterialText = () => ( ); -export const materialPassword = () => ( +export const MaterialPassword = () => ( ); -export const materialError = () => ( +export const MaterialError = () => ( ); diff --git a/ui/components/ui/toggle-button/toggle-button.stories.js b/ui/components/ui/toggle-button/toggle-button.stories.js index dd1e31c52..f2d96fcc5 100644 --- a/ui/components/ui/toggle-button/toggle-button.stories.js +++ b/ui/components/ui/toggle-button/toggle-button.stories.js @@ -5,7 +5,7 @@ import { boolean, text } from '@storybook/addon-knobs'; import ToggleButton from './toggle-button.component'; export default { - title: 'ToggleButton', + title: 'Components/UI/ToggleButton', component: ToggleButton, id: __filename, }; diff --git a/ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js b/ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js index 2707b4436..623b7f1b5 100644 --- a/ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js +++ b/ui/components/ui/truncated-definition-list/truncated-definition-list.stories.js @@ -4,7 +4,7 @@ import { object, text } from '@storybook/addon-knobs'; import TruncatedDefinitionList from './truncated-definition-list'; export default { - title: 'Truncated Definition List', + title: 'Components/UI/TruncatedDefinitionList', id: __filename, }; @@ -30,7 +30,7 @@ const tooltips = { 'Ticker': 'The currency symbol of the primary currency for this network', }; -export const truncatedDefinitionList = () => ( +export const DefaultStory = () => ( ( /> ); -export const withTooltips = () => ( +DefaultStory.storyName = 'Default'; + +export const WithTooltips = () => ( ( +export const List = () => (
{Object.values(TYPOGRAPHY).map((variant) => (
diff --git a/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js b/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js index ce9c34aca..4e870b01f 100644 --- a/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js +++ b/ui/components/ui/update-nickname-popover/update-nickname-popover.stories.js @@ -5,7 +5,7 @@ import Button from '../button'; import UpdateNicknamePopover from '.'; export default { - title: 'UpdateNickname', + title: 'Components/UI/UpdateNickname', id: __filename, }; diff --git a/ui/components/ui/url-icon/url-icon.stories.js b/ui/components/ui/url-icon/url-icon.stories.js index 630fefba3..ed9144fec 100644 --- a/ui/components/ui/url-icon/url-icon.stories.js +++ b/ui/components/ui/url-icon/url-icon.stories.js @@ -3,7 +3,7 @@ import { text } from '@storybook/addon-knobs'; import UrlIcon from './url-icon'; export default { - title: 'UrlIcon', + title: 'Components/UI/UrlIcon', id: __filename, }; diff --git a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js index bad912176..4969ef6f2 100644 --- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js +++ b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js @@ -7,7 +7,7 @@ import { updateMetamaskState } from '../../store/actions'; import ConfirmAddSuggestedToken from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmAddSuggestedToken', id: __filename, }; @@ -42,7 +42,7 @@ const PageSet = ({ children }) => { return children; }; -export const AddSuggestedToken = () => { +export const DefaultStory = () => { const state = store.getState(); store.dispatch( updateMetamaskState( @@ -58,3 +58,5 @@ export const AddSuggestedToken = () => { ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-approve/confirm-approve.stories.js b/ui/pages/confirm-approve/confirm-approve.stories.js index 5c24c93ab..8e269d4c1 100644 --- a/ui/pages/confirm-approve/confirm-approve.stories.js +++ b/ui/pages/confirm-approve/confirm-approve.stories.js @@ -11,7 +11,7 @@ import { domainMetadata } from '../../../.storybook/initial-states/approval-scre import ConfirmApprove from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmApprove', id: __filename, }; @@ -58,7 +58,7 @@ const PageSet = ({ children }) => { return children; }; -export const ApproveTokens = () => { +export const DefaultStory = () => { const state = store.getState(); store.dispatch( updateMetamaskState( @@ -73,3 +73,5 @@ export const ApproveTokens = () => { ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js index 9e021cac1..f6dd81d8e 100644 --- a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js +++ b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js @@ -7,7 +7,7 @@ import { updateTransactionParams } from '../../store/actions'; import ConfirmDeployContract from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmDeployContract', id: __filename, }; @@ -49,10 +49,12 @@ const PageSet = ({ children }) => { return children; }; -export const DeployContract = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js index 9b9426962..a30b9f986 100644 --- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js +++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js @@ -6,7 +6,7 @@ import { updateMetamaskState } from '../../store/actions'; import ConfirmEncryptionPublicKey from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmEncryptionPublicKey', id: __filename, }; @@ -38,10 +38,12 @@ const PageSet = ({ children }) => { return children; }; -export const ConfirmEncryption = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-import-token/confirm-import-token.stories.js b/ui/pages/confirm-import-token/confirm-import-token.stories.js index dcc1d1fcc..2ec34bf8d 100644 --- a/ui/pages/confirm-import-token/confirm-import-token.stories.js +++ b/ui/pages/confirm-import-token/confirm-import-token.stories.js @@ -9,7 +9,7 @@ import { updateMetamaskState } from '../../store/actions'; import ConfirmAddToken from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmImportToken', id: __filename, }; @@ -35,7 +35,7 @@ const PageSet = ({ children }) => { return children; }; -export const AddToken = () => { +export const DefaultStory = () => { const { metamask: state } = store.getState(); store.dispatch( updateMetamaskState( @@ -51,3 +51,5 @@ export const AddToken = () => { ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-send-ether/confirm-send-ether.stories.js b/ui/pages/confirm-send-ether/confirm-send-ether.stories.js index 693847b64..db92dc537 100644 --- a/ui/pages/confirm-send-ether/confirm-send-ether.stories.js +++ b/ui/pages/confirm-send-ether/confirm-send-ether.stories.js @@ -6,7 +6,7 @@ import { updateTransactionParams } from '../../store/actions'; import ConfirmSendEther from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmSendEther', id: __filename, }; @@ -48,10 +48,12 @@ const PageSet = ({ children }) => { return children; }; -export const SendEther = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-send-token/confirm-send-token.stories.js b/ui/pages/confirm-send-token/confirm-send-token.stories.js index 3cd6e45b9..e40951504 100644 --- a/ui/pages/confirm-send-token/confirm-send-token.stories.js +++ b/ui/pages/confirm-send-token/confirm-send-token.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import ConfirmSendToken from './confirm-send-token.component'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmSendToken', id: __filename, }; @@ -10,10 +10,12 @@ const PageSet = ({ children }) => { return children; }; -export const SendToken = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js index f6ef3097c..ffe86e3ee 100644 --- a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js +++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js @@ -3,13 +3,13 @@ import { store } from '../../../.storybook/preview'; import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmTokenTransactionBase', id: __filename, }; const state = store.getState(); -export const ConfirmTokenTransaction = () => { +export const DefaultStory = () => { const { metamask, confirmTransaction } = state; const { currentCurrency } = metamask; const { fiatTransactionTotal } = confirmTransaction; @@ -21,3 +21,5 @@ export const ConfirmTokenTransaction = () => { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js index a373eb250..cf275193f 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import ConfirmTransactionBase from '.'; export default { - title: 'Confirmation Screens', + title: 'Pages/ConfirmTransactionBase', id: __filename, }; @@ -11,10 +11,12 @@ const PageSet = ({ children }) => { return children; }; -export const ConfirmTransactionBaseComponent = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/connected-accounts/connected-accounts.stories.js b/ui/pages/connected-accounts/connected-accounts.stories.js index 7fcac236e..58174426d 100644 --- a/ui/pages/connected-accounts/connected-accounts.stories.js +++ b/ui/pages/connected-accounts/connected-accounts.stories.js @@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions'; import ConnectedAccounts from './connected-accounts.component'; export default { - title: 'Connected Accounts', + title: 'Pages/ConnectedAccounts', id: __filename, }; @@ -17,7 +17,7 @@ const identities = { name: 'Account 1', address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', }; -export const ConnectedAccountComponent = () => { +export const DefaultStory = () => { return ( { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/connected-sites/connected-sites.stories.js b/ui/pages/connected-sites/connected-sites.stories.js index 8abfa21dd..67b94b151 100644 --- a/ui/pages/connected-sites/connected-sites.stories.js +++ b/ui/pages/connected-sites/connected-sites.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import ConnectedSites from '.'; export default { - title: 'Connected Sites', + title: 'Pages/ConnectedSites', id: __filename, }; @@ -11,10 +11,12 @@ const PageSet = ({ children }) => { return children; }; -export const ConnectedSitesComponent = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; 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 4efa39166..28b2639de 100644 --- a/ui/pages/create-account/connect-hardware/account-list.stories.js +++ b/ui/pages/create-account/connect-hardware/account-list.stories.js @@ -9,15 +9,16 @@ import AccountList from './account-list'; const store = configureStore(testData); export default { - title: 'Account List', + title: 'Pages/CreateAccount/ConnectHardware/AccountList', id: __filename, decorators: [(story) => {story()}], }; + global.platform = { openTab: () => action('Open Tab')(), }; -export const AccountListComponent = () => { +export const DefaultStory = () => { const [selectedAccounts, setSelectedAccounts] = useState([ { name: 'This is a Really Long Account Name', @@ -66,3 +67,5 @@ export const AccountListComponent = () => { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/create-account/connect-hardware/select-hardware.stories.js b/ui/pages/create-account/connect-hardware/select-hardware.stories.js index b9d78b8d0..ed3ae7e8a 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.stories.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.stories.js @@ -4,11 +4,11 @@ import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wa import SelectHardware from './select-hardware'; export default { - title: 'Connect Hardware Wallet', + title: 'Pages/CreateAccount/ConnectHardware/SelectHardware', id: __filename, }; -export const SelectHardwareComponent = () => { +export const DefaultStory = () => { return ( { /> ); }; + +DefaultStory.storyName = 'Default'; + export const BrowserNotSupported = () => { return ( { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/first-time-flow/create-password/create-password.stories.js b/ui/pages/first-time-flow/create-password/create-password.stories.js index 7a83ea94f..5970a644c 100644 --- a/ui/pages/first-time-flow/create-password/create-password.stories.js +++ b/ui/pages/first-time-flow/create-password/create-password.stories.js @@ -4,7 +4,7 @@ import ImportWithSeedPhrase from './import-with-seed-phrase/import-with-seed-phr import NewAccount from './new-account'; export default { - title: 'Create Password', + title: 'Pages/FirstTimeFlow/CreatePassword', id: __filename, }; diff --git a/ui/pages/first-time-flow/end-of-flow/end-of-flow.stories.js b/ui/pages/first-time-flow/end-of-flow/end-of-flow.stories.js index 7d934301d..357204630 100644 --- a/ui/pages/first-time-flow/end-of-flow/end-of-flow.stories.js +++ b/ui/pages/first-time-flow/end-of-flow/end-of-flow.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import EndOfFlowScreen from './end-of-flow.component'; export default { - title: 'First Time Flow', + title: 'Pages/FirstTimeFlow/EndOfFlow', id: __filename, }; -export const EndOfFlowComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.stories.js b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.stories.js index afd83ded1..fc92592f2 100644 --- a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.stories.js +++ b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.stories.js @@ -3,14 +3,16 @@ import { action } from '@storybook/addon-actions'; import MetaMetricsOptIn from './metametrics-opt-in.component'; export default { - title: 'First Time Flow', + title: 'Pages/FirstTimeFlow/MetametricsOptIn', id: __filename, }; -export const MetaMetricsOptInComponent = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/first-time-flow/select-action/select-action.stories.js b/ui/pages/first-time-flow/select-action/select-action.stories.js index 205d64499..265b5d427 100644 --- a/ui/pages/first-time-flow/select-action/select-action.stories.js +++ b/ui/pages/first-time-flow/select-action/select-action.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import SelectAction from './select-action.component'; export default { - title: 'First Time Flow', + title: 'Pages/FirstTimeFlow/SelectAction', id: __filename, }; -export const SelectActionComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/first-time-flow/welcome/welcome.stories.js b/ui/pages/first-time-flow/welcome/welcome.stories.js index 2b7d8f09e..1420d919c 100644 --- a/ui/pages/first-time-flow/welcome/welcome.stories.js +++ b/ui/pages/first-time-flow/welcome/welcome.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import Welcome from './welcome.component'; export default { - title: 'First Time Flow', + title: 'Pages/FirstTimeFlow/Welcome', id: __filename, }; -export const WelcomeComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/import-token/import-token.stories.js b/ui/pages/import-token/import-token.stories.js index d40c5560c..e6b1e089b 100644 --- a/ui/pages/import-token/import-token.stories.js +++ b/ui/pages/import-token/import-token.stories.js @@ -4,10 +4,12 @@ import { boolean } from '@storybook/addon-knobs'; import ImportToken from './import-token.component'; export default { - title: 'Import Token', + title: 'Pages/ImportToken', id: __filename, }; -export const ImportTokenComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.stories.js b/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.stories.js index e0003e31b..d57a48a25 100644 --- a/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.stories.js +++ b/ui/pages/import-token/token-list/token-list-placeholder/token-list-placeholder.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import TokenListPlaceholder from './token-list-placeholder.component'; export default { - title: 'TokenListPlaceholder', + title: 'Pages/ImportToken/TokenList/TokenListPlaceholder', id: __filename, }; -export const TokenListPlaceholderComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/import-token/token-search/token-search.stories.js b/ui/pages/import-token/token-search/token-search.stories.js index 9d0e7cbf2..01904a124 100644 --- a/ui/pages/import-token/token-search/token-search.stories.js +++ b/ui/pages/import-token/token-search/token-search.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import TokenSearch from './token-search.component'; export default { - title: 'TokenSearch', + title: 'Pages/ImportToken/TokenSearch', id: __filename, }; -export const TokenSearchComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/mobile-sync/mobile-sync.stories.js b/ui/pages/mobile-sync/mobile-sync.stories.js index 762a3bc26..23a0f2a7e 100644 --- a/ui/pages/mobile-sync/mobile-sync.stories.js +++ b/ui/pages/mobile-sync/mobile-sync.stories.js @@ -3,12 +3,14 @@ import { action } from '@storybook/addon-actions'; import MobileSyncPage from './mobile-sync.component'; export default { - title: 'Mobile Sync', + title: 'Pages/MobileSyncPage', id: __filename, }; -export const MobileSyncComponent = () => { +export const DefaultStory = () => { return ( ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js index 5d6eaa731..d5623c42b 100644 --- a/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js +++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js @@ -2,14 +2,16 @@ import React from 'react'; import CreationSuccessful from './creation-successful'; export default { - title: 'Onboarding - Creation Successful', + title: 'Pages/OnboardingFlow/CreationSuccessful', id: __filename, }; -export const Base = () => { +export const DefaultStory = () => { return (
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.stories.js b/ui/pages/onboarding-flow/metametrics/metametrics.stories.js index da93b91ec..1643acc8d 100644 --- a/ui/pages/onboarding-flow/metametrics/metametrics.stories.js +++ b/ui/pages/onboarding-flow/metametrics/metametrics.stories.js @@ -2,8 +2,10 @@ import React from 'react'; import OnboardingMetametrics from './metametrics'; export default { - title: 'Onboarding', + title: 'Pages/OnboardingFlow/OnboardingMetametrics', id: __filename, }; -export const OnboardingComponent = () => ; +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/onboarding-flow/pin-extension/pin-extension.stories.js b/ui/pages/onboarding-flow/pin-extension/pin-extension.stories.js index a01edb299..17aa09b4b 100644 --- a/ui/pages/onboarding-flow/pin-extension/pin-extension.stories.js +++ b/ui/pages/onboarding-flow/pin-extension/pin-extension.stories.js @@ -2,8 +2,10 @@ import React from 'react'; import OnboardingPinExtension from './pin-extension'; export default { - title: 'Onboarding', + title: 'Pages/OnboardingFlow/OnboardingPinExtension', id: __filename, }; -export const OnboardingComponent = () => ; +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.stories.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.stories.js index c0f775439..b03ad6017 100644 --- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.stories.js +++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.stories.js @@ -2,14 +2,16 @@ import React from 'react'; import PrivacySettings from './privacy-settings'; export default { - title: 'Onboarding - Privacy Settings', + title: 'Pages/OnboardingFlow/PrivacySettings', id: __filename, }; -export const Base = () => { +export const DefaultStory = () => { return (
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.stories.js b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.stories.js index 6951b001c..41d16952b 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.stories.js +++ b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.stories.js @@ -2,14 +2,16 @@ import React from 'react'; import SecureYourWallet from './secure-your-wallet'; export default { - title: 'Onboarding - Secure Your Wallet', + title: 'Pages/OnboardingFlow/SecureYourWallet', id: __filename, }; -export const Base = () => { +export const DefaultStory = () => { return (
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/onboarding-flow/welcome/welcome.stories.js b/ui/pages/onboarding-flow/welcome/welcome.stories.js index 6e28691c5..fd0429094 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.stories.js +++ b/ui/pages/onboarding-flow/welcome/welcome.stories.js @@ -2,8 +2,10 @@ import React from 'react'; import OnboardingWelcome from './welcome'; export default { - title: 'Onboarding', + title: 'Pages/OnboardingFlow/Welcome', id: __filename, }; -export const OnboardingComponent = () => ; +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/permissions-connect/permissions-connect.stories.js b/ui/pages/permissions-connect/permissions-connect.stories.js index 87af63ee2..8e075d4c3 100644 --- a/ui/pages/permissions-connect/permissions-connect.stories.js +++ b/ui/pages/permissions-connect/permissions-connect.stories.js @@ -6,7 +6,7 @@ import { PageContainerFooter } from '../../components/ui/page-container'; import ChooseAccount from './choose-account'; export default { - title: 'Permissions Connect', + title: 'Pages/PermissionsConnect', id: __filename, }; diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.stories.js b/ui/pages/send/send-content/add-recipient/add-recipient.stories.js index 8f1555989..4d6f64a05 100644 --- a/ui/pages/send/send-content/add-recipient/add-recipient.stories.js +++ b/ui/pages/send/send-content/add-recipient/add-recipient.stories.js @@ -10,12 +10,12 @@ import AddRecipient from './add-recipient.component'; const store = configureStore(testData); export default { - title: 'AddRecipient', + title: 'Pages/Send/SendContent/AddRecipient', id: __filename, decorators: [(story) => {story()}], }; -export const AddRecipientComponent = () => { +export const DefaultStory = () => { const { metamask } = store.getState(); const { addressBook, recipient } = metamask; return ( @@ -35,3 +35,5 @@ export const AddRecipientComponent = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.stories.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.stories.js index 3b6082f47..669697481 100644 --- a/ui/pages/send/send-content/send-asset-row/send-asset-row.stories.js +++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.stories.js @@ -10,12 +10,12 @@ import SendAssetRow from './send-asset-row.component'; const store = configureStore(testData); export default { - title: 'SendAssetRow', + title: 'Pages/Send/SendContent/SendAssetRow', id: __filename, decorators: [(story) => {story()}], }; -export const SendAssetRowComponent = () => { +export const DefaultStory = () => { const { metamask } = store.getState(); const { identities, assetImages, tokens } = metamask; @@ -34,3 +34,5 @@ export const SendAssetRowComponent = () => { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-content/send-content.stories.js b/ui/pages/send/send-content/send-content.stories.js index abaa02b1b..66ed9b53b 100644 --- a/ui/pages/send/send-content/send-content.stories.js +++ b/ui/pages/send/send-content/send-content.stories.js @@ -4,11 +4,11 @@ import { boolean, text } from '@storybook/addon-knobs'; import SendContent from './send-content.component'; export default { - title: 'SendContent', + title: 'Pages/Send/SendContent', id: __filename, }; -export const SendContentComponent = () => { +export const DefaultStory = () => { return ( { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js b/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js index 507d1b948..3e55f7f06 100644 --- a/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js +++ b/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js @@ -4,11 +4,11 @@ import { number, boolean } from '@storybook/addon-knobs'; import GasFeeDisplay from './gas-fee-display.component'; export default { - title: 'GasFeeDisplay', + title: 'Pages/Send/SendContent/SendGasRow/GasFeeDisplay', id: __filename, }; -export const GasFeeDisplayComponent = () => { +export const DefaultStory = () => { const gasTotal = number('Gas Total', 10000000000); return ( { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js index 9c726c9d1..1bced02b6 100644 --- a/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js +++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js @@ -14,12 +14,12 @@ import SendGasRow from './send-gas-row.component'; const store = configureStore(testData); export default { - title: 'SendGasRow', + title: 'Pages/Send/SendContent/SendGasRow', id: __filename, decorators: [(story) => {story()}], }; -export const SendGasRowComponent = () => { +export const DefaultStory = () => { const state = store.getState(); const { metamask } = state; const { send } = metamask; @@ -75,3 +75,5 @@ export const SendGasRowComponent = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js index 1976ddea0..c4dd46e79 100644 --- a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js +++ b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js @@ -3,11 +3,11 @@ import { boolean } from '@storybook/addon-knobs'; import SendHexDataRow from './send-hex-data-row.component'; export default { - title: 'SendHexDataRow', + title: 'Pages/Send/SendContent/SendHexDataRow', id: __filename, }; -export const SendHexDataRowComponent = () => { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-footer/send-footer.stories.js b/ui/pages/send/send-footer/send-footer.stories.js index 26d2ecfbb..84118cace 100644 --- a/ui/pages/send/send-footer/send-footer.stories.js +++ b/ui/pages/send/send-footer/send-footer.stories.js @@ -5,11 +5,11 @@ import { boolean } from '@storybook/addon-knobs'; import SendFooter from './send-footer.component'; export default { - title: 'SendFooter', + title: 'Pages/Send/SendFooter', id: __filename, }; -export const SendFooterComponent = () => { +export const DefaultStory = () => { const disabled = boolean('Disabled', false); return ( { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/send/send-header/send-header.stories.js b/ui/pages/send/send-header/send-header.stories.js index 034623bb3..8b0f317e8 100644 --- a/ui/pages/send/send-header/send-header.stories.js +++ b/ui/pages/send/send-header/send-header.stories.js @@ -15,11 +15,11 @@ import { ASSET_TYPES, SEND_STAGES } from '../../../ducks/send'; import SendHeader from './send-header.component'; export default { - title: 'SendHeader', + title: 'Pages/Send/SendHeader', id: __filename, }; -export const SendHeaderComponent = () => { +export const DefaultStory = () => { const store = createStore( combineReducers({ send: sendSBReducer, history: historySBReducer }), ); @@ -52,3 +52,5 @@ export const SendHeaderComponent = () => { ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/settings/advanced-tab/advanced-tab.stories.js b/ui/pages/settings/advanced-tab/advanced-tab.stories.js index f72fd5d31..3be10b39c 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.stories.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.stories.js @@ -3,11 +3,11 @@ import { text, boolean } from '@storybook/addon-knobs'; import AdvancedTab from './advanced-tab.component'; export default { - title: 'AdvancedTab', + title: 'Pages/Settings/AdvancedTab', id: __filename, }; -export const AdvancedTabComponent = () => { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.stories.js b/ui/pages/settings/contact-list-tab/contact-list-tab.stories.js index eed90a8bf..fc3409ca7 100644 --- a/ui/pages/settings/contact-list-tab/contact-list-tab.stories.js +++ b/ui/pages/settings/contact-list-tab/contact-list-tab.stories.js @@ -10,12 +10,12 @@ import ContactListTab from './contact-list-tab.component'; const store = configureStore(testData); export default { - title: 'ContactListTab', + title: 'Pages/Settings/ContactListTab', id: __filename, decorators: [(story) => {story()}], }; -export const ContactListTabComponent = () => { +export const DefaultStory = () => { const { metamask } = store.getState(); const { addresses } = metamask; const addressBook = object('Address Book', addresses); @@ -36,3 +36,5 @@ export const ContactListTabComponent = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/settings/settings.stories.js b/ui/pages/settings/settings.stories.js index c05953a76..0fcfbb87e 100644 --- a/ui/pages/settings/settings.stories.js +++ b/ui/pages/settings/settings.stories.js @@ -19,7 +19,7 @@ import { import SettingsPage from './settings.component'; export default { - title: 'SettingPage', + title: 'Pages/SettingsPage', id: __filename, decorators: [ (story) => ( diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.stories.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.stories.js index 15c5927ab..dd9853d40 100644 --- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.stories.js +++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.stories.js @@ -2,10 +2,12 @@ import React from 'react'; import AwaitingSignatures from './awaiting-signatures'; export default { - title: 'Signatures', + title: 'Pages/Swaps/AwaitingSignatures', id: __filename, }; -export const AwaitingSignaturesComponent = () => { +export const DefaultStory = () => { return ; }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/build-quote/build-quote.stories.js b/ui/pages/swaps/build-quote/build-quote.stories.js index d4dd5e9f9..2a36cd4c1 100644 --- a/ui/pages/swaps/build-quote/build-quote.stories.js +++ b/ui/pages/swaps/build-quote/build-quote.stories.js @@ -126,11 +126,11 @@ const tokensToSearch = tokens.map((token) => ({ })); export default { - title: 'BuildQuote', + title: 'Pages/Swaps/BuildQuote', id: __filename, }; -export const Default = () => { +export const DefaultStory = () => { const [inputValue, onInputChange] = useState(null); const [selectedFromToken, setSelectedFromToken] = useState(null); const formattedSwapFromFiatValue = `$${(Number(inputValue) * 4).toFixed(2)}`; @@ -195,3 +195,5 @@ export const Default = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/countdown-timer/countdown-timer.stories.js b/ui/pages/swaps/countdown-timer/countdown-timer.stories.js index 5ee775226..bdb4d062c 100644 --- a/ui/pages/swaps/countdown-timer/countdown-timer.stories.js +++ b/ui/pages/swaps/countdown-timer/countdown-timer.stories.js @@ -3,14 +3,14 @@ import { number } from '@storybook/addon-knobs'; import CountdownTimer from './countdown-timer'; export default { - title: 'CountdownTimer', + title: 'Pages/Swaps/CountdownTimer', id: __filename, }; const getTimeStartedFromDecrimentSeconds = (seconds) => Date.now() - seconds * 1000; -export const Default = () => { +export const DefaultStory = () => { const timeStartedSecondDecriment = number( 'Set timeStarted to curren time minus X seconds', 10, @@ -26,6 +26,8 @@ export const Default = () => { ); }; +DefaultStory.storyName = 'Default'; + export const CustomTimerBase = () => { const timeStartedSecondDecriment = number( 'Set timeStarted to curren time minus X seconds', diff --git a/ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js b/ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js index 2c74b2ed9..084827963 100644 --- a/ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js +++ b/ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.stories.js @@ -113,7 +113,7 @@ const tokens = [ ]; export default { - title: 'DropdownInputPair', + title: 'Pages/Swaps/DropdownInputPair', id: __filename, }; @@ -127,7 +127,7 @@ const tokensToSearch = tokens.map((token) => ({ rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`, })); -export const Basic = () => { +export const DefaultStory = () => { const [inputValue, setInputValue] = useState(); return ( @@ -151,3 +151,5 @@ export const Basic = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js index 18af6876f..379420c89 100644 --- a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js +++ b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js @@ -113,7 +113,7 @@ const tokens = [ ]; export default { - title: 'DropdownSearchList', + title: 'Pages/Swaps/DropdownSearchList', id: __filename, }; @@ -127,7 +127,7 @@ const tokensToSearch = tokens.map((token) => ({ rightSecondaryLabel: `$${(Math.random() * 1000).toFixed(2)}`, })); -export const TokenSearchDropdown = () => { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js index ad119f230..1b859c5f4 100644 --- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js +++ b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js @@ -3,11 +3,11 @@ import { text, number } from '@storybook/addon-knobs'; import ExchangeRateDisplay from './exchange-rate-display'; export default { - title: 'ExchangeRateDisplay', + title: 'Pages/Swaps/ExchangeRateDisplay', id: __filename, }; -export const Default = () => { +export const DefaultStory = () => { return ( { ); }; +DefaultStory.storyName = 'Default'; + export const WhiteOnBlue = () => { return (
{ +export const DefaultStory = () => { const data = { iconUrl: './BAT_icon.svg', name: 'Basic Attention Token', @@ -21,3 +21,5 @@ export const ImportTokenComponent = () => { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js b/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js index 7c6877a0b..51dd38182 100644 --- a/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js +++ b/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js @@ -3,11 +3,11 @@ import { text, number } from '@storybook/addon-knobs'; import MainQuoteSummary from './main-quote-summary'; export default { - title: 'MainQuoteSummary', + title: 'Pages/Swaps/MainQuoteSummary', id: __filename, }; -export const BestQuote = () => { +export const DefaultStory = () => { return (
{
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js b/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js index 2429cfc60..493eed37a 100644 --- a/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js +++ b/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js @@ -6,11 +6,11 @@ import mockQuoteData from './mock-quote-data'; import SelectQuotePopover from '.'; export default { - title: 'SelectQuotePopover', + title: 'Pages/Swaps/SelectQuotePopover', id: __filename, }; -export const Default = () => { +export const DefaultStory = () => { const [showPopover, setShowPopover] = useState(false); return ( @@ -28,3 +28,5 @@ export const Default = () => {
); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js b/ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js index 7d1ec753e..ebfc7013a 100644 --- a/ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js +++ b/ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js @@ -3,12 +3,14 @@ import { action } from '@storybook/addon-actions'; import SlippageButtons from '.'; export default { - title: 'SlippageButtons', + title: 'Pages/Swaps/SlippageButtons', id: __filename, }; -export const Default = () => ( +export const DefaultStory = () => (
); + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js index a9998476c..2503ed2de 100644 --- a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js +++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js @@ -19,7 +19,7 @@ import GasModalPageContainer from './swaps-gas-customization-modal.component'; const store = configureStore(testData); export default { - title: 'Swap', + title: 'Pages/Swaps/GasModalPageContainer', id: __filename, decorators: [(story) => {story()}], }; @@ -38,7 +38,7 @@ const sumHexWEIsToRenderableEth = (hexWEIs, currencySymbol = 'ETH') => { ); }; -export const GasModalPageContainerComponent = () => { +export const DefaultStory = () => { // Send Amount Data const hexWei = getWeiHexFromDecimalValue({ value: String(number('Send Amount (this should be static)', 0.01)), @@ -64,8 +64,6 @@ export const GasModalPageContainerComponent = () => { const { metamask } = store.getState(); const { currentCurrency, conversionRate } = metamask; - console.log('metamask', store.getState()); - useEffect(() => { // Transfer Fee const customGasTotal = calcGasTotal(gasLimit, gasPrice); @@ -141,11 +139,9 @@ export const GasModalPageContainerComponent = () => { buttonDataLoading: true, }} setSwapsCustomizationModalPrice={(newPrice) => { - console.log('updatedPrice', newPrice); setGasPrice(newPrice); }} setSwapsCustomizationModalLimit={(newLimit) => { - console.log('updatedLimit', newLimit); setGasLimit(newLimit); }} customGasPrice={gasPrice} @@ -156,3 +152,5 @@ export const GasModalPageContainerComponent = () => { /> ); }; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/unlock-page/unlock-page.stories.js b/ui/pages/unlock-page/unlock-page.stories.js index d8fd500f3..a256c7090 100644 --- a/ui/pages/unlock-page/unlock-page.stories.js +++ b/ui/pages/unlock-page/unlock-page.stories.js @@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions'; import UnlockPage from './unlock-page.component'; export default { - title: 'UnlockPage', + title: 'Pages/UnlockPage', id: __filename, }; -export const UnlockPageComponent = () => { +export const DefaultStory = () => { return ( { /> ); }; + +DefaultStory.storyName = 'Default'; From eb4f051b2359ae97b1cadf9d07053a79f2da79c7 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Wed, 1 Dec 2021 13:10:51 -0800 Subject: [PATCH 002/100] Adding SnapSettingsCard ui component (#12655) * parent d89e5336a61e3b4a8838025311c37ba7c003f60e author georgewrmarshall 1636692862 -0800 committer hmalik88 1637342043 -0500 Initial SnapSettingsCard component Updates to styles but having specificity issues so increased specificity Updates to styles but having specificity issues so increased specificity added overflow fix and added tests lockfile update prettier fix added stylelint ignore yarn.lock fixed * merge conflict fix * package/yarn fix * fixed package.json * updated lockfile... * removed comment * removed unnecessary key/val for chip status indicator color * bumped lattice to 0.4.0 in package json, fixed yarn lock * removed dupe entry in yarn lock * ran yarn setup to update lock file * updated chip label prop * parent d89e5336a61e3b4a8838025311c37ba7c003f60e author georgewrmarshall 1636692862 -0800 committer hmalik88 1637342043 -0500 Initial SnapSettingsCard component Updates to styles but having specificity issues so increased specificity Updates to styles but having specificity issues so increased specificity added overflow fix and added tests lockfile update prettier fix added stylelint ignore yarn.lock fixed * merge conflict fix * package/yarn fix * fixed package.json * updated lockfile... * removed comment * bumped lattice to 0.4.0 in package json, fixed yarn lock * removed dupe entry in yarn lock * ran yarn setup to update lock file * Using IconWithFallback instead of SiteIcon, fixing icon prop, and adding status story and docs page * Updating to follow storybook folder convention * Updates to styles * Adding localization * added todo comment Co-authored-by: hmalik88 --- app/_locales/en/messages.json | 12 + package.json | 1 + ui/components/app/app-components.scss | 1 + .../app/flask/snap-settings-card/README.mdx | 41 +++ .../app/flask/snap-settings-card/index.js | 1 + .../app/flask/snap-settings-card/index.scss | 57 ++++ .../snap-settings-card/snap-settings-card.js | 279 ++++++++++++++++++ .../snap-settings-card.stories.js | 152 ++++++++++ .../snap-settings-card.test.js | 76 +++++ yarn.lock | 2 +- 10 files changed, 621 insertions(+), 1 deletion(-) create mode 100644 ui/components/app/flask/snap-settings-card/README.mdx create mode 100644 ui/components/app/flask/snap-settings-card/index.js create mode 100644 ui/components/app/flask/snap-settings-card/index.scss create mode 100644 ui/components/app/flask/snap-settings-card/snap-settings-card.js create mode 100644 ui/components/app/flask/snap-settings-card/snap-settings-card.stories.js create mode 100644 ui/components/app/flask/snap-settings-card/snap-settings-card.test.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 3aef9a1a8..0ee2dcfb2 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1073,6 +1073,18 @@ "flaskExperimentalText5": { "message": "Using Flask gives you much greater discretion in using the power of MetaMask, and that discretion is yours. Do you accept these risks as well as extra responsibility for your wallet's safety?" }, + "flaskSnapSettingsCardButtonCta": { + "message": "See details", + "description": "Call to action a user can take to see more information about the Snap that is installed" + }, + "flaskSnapSettingsCardDateAddedOn": { + "message": "Added on", + "description": "Start of the sentence describing when and where snap was added" + }, + "flaskSnapSettingsCardFrom": { + "message": "from", + "description": "Part of the sentence describing when and where snap was added" + }, "followUsOnTwitter": { "message": "Follow us on Twitter" }, diff --git a/package.json b/package.json index 1f3341352..49563aea3 100644 --- a/package.json +++ b/package.json @@ -248,6 +248,7 @@ "@storybook/addon-knobs": "^6.3.1", "@storybook/addons": "^6.3.12", "@storybook/api": "^6.3.12", + "@storybook/client-api": "^6.3.12", "@storybook/components": "^6.3.12", "@storybook/core": "^6.3.12", "@storybook/core-events": "^6.3.0", diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index f602a82cc..4327df503 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -38,6 +38,7 @@ @import 'selected-account/index'; @import 'signature-request/index'; @import 'signature-request-original/index'; +@import 'flask/snap-settings-card/index'; @import 'tab-bar/index'; @import 'token-cell/token-cell'; @import 'transaction-activity-log/index'; diff --git a/ui/components/app/flask/snap-settings-card/README.mdx b/ui/components/app/flask/snap-settings-card/README.mdx new file mode 100644 index 000000000..8f958a645 --- /dev/null +++ b/ui/components/app/flask/snap-settings-card/README.mdx @@ -0,0 +1,41 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import SnapSettingsCard from '.'; + +# SnapSettingsCard + +A card component that displays information and the status of a snap. The `SnapSettingsCard` component is made up of the `Card`, `IconBorder`, `IconWithFallback`, `ToggleButton`, `Chip`, `ColorIndicator` and `Button` components + + + + + +## Component API + + + +## Usage + +The following describes the props and example usage for this component. + +### Status + +There are 4 statuses the `SnapSettingsCard` can have: `'installing'`,`'running'`,`'stopped'` and `'crashed'`. + + + + + +### isEnabled / onToggle + +Use the `isEnabled` and `onToggle` to control the `ToggleButton` component inside of the `SnapSettingsCard` + +```jsx +const [isEnabled, setIsEnabled] = React.useState(false); + +const handleOnToggle = () => { + setIsEnabled(!isEnabled); +}; + +return ; +``` diff --git a/ui/components/app/flask/snap-settings-card/index.js b/ui/components/app/flask/snap-settings-card/index.js new file mode 100644 index 000000000..e3a7f5872 --- /dev/null +++ b/ui/components/app/flask/snap-settings-card/index.js @@ -0,0 +1 @@ +export { default } from './snap-settings-card'; diff --git a/ui/components/app/flask/snap-settings-card/index.scss b/ui/components/app/flask/snap-settings-card/index.scss new file mode 100644 index 000000000..728a2e62c --- /dev/null +++ b/ui/components/app/flask/snap-settings-card/index.scss @@ -0,0 +1,57 @@ +$version-max-width: 56px; // Increase to show more of the version number +$body-line-clamp: 4; // Number of lines in card body before truncating + +.snap-settings-card { + &__title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__toggle-container { + margin-left: auto; + + &__toggle-button { + margin-right: -12px; // react-toggle-button width fix + } + } + + &__body { + overflow: hidden; + /* stylelint-disable */ + display: -webkit-box; + -webkit-line-clamp: $body-line-clamp; + -webkit-box-orient: vertical; + /* stylelint-enable */ + } + + &__version.box { + margin-left: auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: $version-max-width; + flex: 0 0 $version-max-width; + text-align: right; + } + + &__chip.chip { + margin: 0; + margin-left: auto; + display: inline-flex; + align-items: center; + text-transform: capitalize; + } + + &__button.button { + padding: 4px 16px; + display: inline-flex; + align-items: center; + } + + &__date-added { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} diff --git a/ui/components/app/flask/snap-settings-card/snap-settings-card.js b/ui/components/app/flask/snap-settings-card/snap-settings-card.js new file mode 100644 index 000000000..c16068dfb --- /dev/null +++ b/ui/components/app/flask/snap-settings-card/snap-settings-card.js @@ -0,0 +1,279 @@ +import React, { useState, useEffect, useCallback } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +import { useI18nContext } from '../../../../hooks/useI18nContext'; + +import Card from '../../../ui/card'; +import Box from '../../../ui/box'; +import IconWithFallback from '../../../ui/icon-with-fallback'; +import IconBorder from '../../../ui/icon-border'; +import Typography from '../../../ui/typography/typography'; +import ToggleButton from '../../../ui/toggle-button'; +import Chip from '../../../ui/chip'; +import ColorIndicator from '../../../ui/color-indicator'; +import Button from '../../../ui/button'; + +import { + COLORS, + TYPOGRAPHY, + FONT_WEIGHT, + ALIGN_ITEMS, + DISPLAY, + TEXT_ALIGN, +} from '../../../../helpers/constants/design-system'; + +const STATUSES = { + INSTALLING: 'installing', + RUNNING: 'running', + STOPPED: 'stopped', + CRASHED: 'crashed', +}; + +const STATUS_COLORS = { + [STATUSES.INSTALLING]: COLORS.ALERT1, + [STATUSES.RUNNING]: COLORS.SUCCESS1, + [STATUSES.STOPPED]: COLORS.UI4, + [STATUSES.CRASHED]: COLORS.ERROR1, +}; + +const SnapSettingsCard = ({ + name, + description, + icon, + dateAdded, + version, + url, + onToggle, + isEnabled = false, + onClick, + status, + className, + cardProps, + toggleButtonProps, + buttonProps, + chipProps, +}) => { + const t = useI18nContext(); + const [chipStatus, setChipStatus] = useState(STATUSES.INSTALLING); + + // TODO: use state directly in place of memoization + const handleStatus = useCallback(() => { + switch (status) { + case STATUSES.INSTALLING: { + setChipStatus(STATUSES.INSTALLING); + break; + } + case STATUSES.RUNNING: { + setChipStatus(STATUSES.RUNNING); + break; + } + case STATUSES.STOPPED: { + setChipStatus(STATUSES.STOPPED); + break; + } + case STATUSES.CRASHED: { + setChipStatus(STATUSES.CRASHED); + break; + } + default: { + setChipStatus(STATUSES.INSTALLING); + } + } + }, [status]); + + useEffect(() => { + handleStatus(status); + }, [handleStatus, status]); + + return ( + + + {(icon || name) && ( + + + + + + )} + + {name} + + + + + + + {description} + + + + + + + + + + + } + label={chipStatus} + labelProps={{ + color: COLORS.UI4, + margin: [0, 1], + }} + backgroundColor={COLORS.UI1} + className="snap-settings-card__chip" + {...chipProps} + /> + + + + {(dateAdded || version) && ( + <> + + {`${ + dateAdded && t('flaskSnapSettingsCardDateAddedOn') + } ${dateAdded} ${url && t('flaskSnapSettingsCardFrom')} ${url}`} + + + v {version} + + + )} + + + + ); +}; + +SnapSettingsCard.propTypes = { + /** + * Name of the snap used for the title of the card and fallback letter for the snap icon + */ + name: PropTypes.string, + /** + * Description of the snap. Truncates after 4 lines + */ + description: PropTypes.string, + /** + * Image source of the snap icon for the IconWithFallback component + */ + icon: PropTypes.string, + /** + * Date the snap was added. Date will need formatting + */ + dateAdded: PropTypes.string, + /** + * The version of the snap in semver. Will truncate after 4 numbers e.g. 10.5.1... + */ + version: PropTypes.string, + /** + * Url of the snap website + */ + url: PropTypes.string, + /** + * The onChange function for the ToggleButton component + */ + onToggle: PropTypes.func, + /** + * Whether the snap is enabled. `value` prop of the ToggleButton + */ + isEnabled: PropTypes.bool, + /** + * onClick function of the "See Details" Button + */ + onClick: PropTypes.func, + /** + * Status of the snap must be one + */ + status: PropTypes.oneOf(Object.values(STATUSES)).isRequired, + /** + * Additional className added to the root div of the SnapSettingsCard component + */ + className: PropTypes.string, + /** + * Optional additional props passed to the Card component + */ + cardProps: PropTypes.shape(Card.propTypes), + /** + * Optional additional props passed to the ToggleButton component + */ + toggleButtonProps: PropTypes.shape(ToggleButton.propTypes), + /** + * Optional additional props passed to the Button component + */ + buttonProps: PropTypes.shape(Button.propTypes), + /** + * Optional additional props passed to the Chip component + */ + chipProps: PropTypes.shape(Chip.propTypes), +}; + +export default SnapSettingsCard; diff --git a/ui/components/app/flask/snap-settings-card/snap-settings-card.stories.js b/ui/components/app/flask/snap-settings-card/snap-settings-card.stories.js new file mode 100644 index 000000000..9d1d28075 --- /dev/null +++ b/ui/components/app/flask/snap-settings-card/snap-settings-card.stories.js @@ -0,0 +1,152 @@ +import React from 'react'; +import { useArgs } from '@storybook/client-api'; + +import README from './README.mdx'; +import SnapSettingsCard from '.'; + +export default { + title: 'Components/App/Flask/SnapSettingsCard', + id: __filename, + component: SnapSettingsCard, + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + name: { + control: 'text', + }, + description: { + control: 'text', + }, + icon: { + control: 'text', + }, + dateAdded: { + control: 'text', + }, + version: { + control: 'text', + }, + url: { + control: 'text', + }, + onToggle: { + action: 'onToggle', + }, + isEnabled: { + control: 'boolean', + }, + onClick: { + action: 'onClick', + }, + status: { + control: { + type: 'select', + }, + options: ['installing', 'stopped', 'running', 'crashed'], + }, + className: { + control: 'string', + }, + cardProps: { + control: 'object', + }, + toggleButtonProps: { + control: 'object', + }, + buttonProps: { + control: 'object', + }, + chipProps: { + control: 'object', + }, + }, +}; + +export const DefaultStory = (args) => { + const [{ isEnabled }, updateArgs] = useArgs(); + + const handleOnToggle = () => { + updateArgs({ + isEnabled: !isEnabled, + status: isEnabled ? 'stopped' : 'running', + }); + }; + return ( + + ); +}; + +DefaultStory.storyName = 'Default'; + +let d = new Date(); +d = d.toDateString(); + +DefaultStory.args = { + name: 'Snap name', + description: + 'This snap provides developers everywhere access to an entirely new data storage paradigm, even letting your programs store data autonomously.', + icon: 'AST.png', + dateAdded: d, + version: '10.5.1234', + url: 'https://metamask.io/', + status: 'stopped', +}; + +export const Status = () => ( + <> + + + + + +); diff --git a/ui/components/app/flask/snap-settings-card/snap-settings-card.test.js b/ui/components/app/flask/snap-settings-card/snap-settings-card.test.js new file mode 100644 index 000000000..9a09e4da9 --- /dev/null +++ b/ui/components/app/flask/snap-settings-card/snap-settings-card.test.js @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import SnapSettingsCard from '.'; + +describe('SnapSettingsCard', () => { + const args = { + name: 'Snap name', + description: + 'This snap provides developers everywhere access to an entirely new data storage paradigm, even letting your programs store data autonomously.', + dateAdded: new Date().toDateString(), + version: '10.5.1234', + url: 'https://metamask.io', + status: 'stopped', + icon: './AST.png', + }; + it('should render the SnapsSettingCard without crashing', () => { + const { getByText } = render(); + expect(getByText('Snap name')).toBeDefined(); + }); + + it('should render the pill as installing when given a status of installing', () => { + args.status = 'installing'; + const { getByText } = render(); + expect(getByText('installing')).toBeDefined(); + }); + + it('should render the pill as running when given a status of running', () => { + args.status = 'running'; + const { getByText } = render(); + expect(getByText('running')).toBeDefined(); + }); + + it('should render the pill as installing when given a status of stopped', () => { + args.status = 'stopped'; + const { getByText } = render(); + expect(getByText('stopped')).toBeDefined(); + }); + + it('should render the pill as crashed when given a status of crashed', () => { + args.status = 'crashed'; + const { getByText } = render(); + expect(getByText('crashed')).toBeDefined(); + }); + + it('should call onToggle prop when toggle button is clicked', () => { + const onToggle = jest.fn(); + args.onToggle = onToggle; + const { container } = render(); + const toggleBtn = container.querySelector('.toggle-button').firstChild; + fireEvent.click(toggleBtn); + expect(onToggle).toHaveBeenCalled(); + }); + + it('should call onClick prop when See Details button is clicked', () => { + const onClick = jest.fn(); + args.onClick = onClick; + const { container } = render(); + const seeDetailsBtn = container.querySelector( + '.snap-settings-card__button', + ); + fireEvent.click(seeDetailsBtn); + expect(onClick).toHaveBeenCalled(); + }); + + it('should render an icon image', () => { + const { getByAltText } = render(); + const image = getByAltText(args.name); + expect(image).toBeDefined(); + expect(image).toHaveAttribute('src', args.icon); + }); + + it('should render the icon fallback using the first letter of the name', () => { + const { getByText } = render(); + expect(getByText('S')).toBeDefined(); + }); +}); diff --git a/yarn.lock b/yarn.lock index 73e111cf3..05815ffb5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3403,7 +3403,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-api@6.3.12": +"@storybook/client-api@6.3.12", "@storybook/client-api@^6.3.12": version "6.3.12" resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.12.tgz#a0c6d72a871d1cb02b4b98675472839061e39b5b" integrity sha512-xnW+lKKK2T774z+rOr9Wopt1aYTStfb86PSs9p3Fpnc2Btcftln+C3NtiHZl8Ccqft8Mz/chLGgewRui6tNI8g== From c29afd110bec05af2c7754810357010bef2d165f Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Wed, 1 Dec 2021 16:10:24 -0600 Subject: [PATCH 003/100] put new collectibles related preferences behind feature flag (#12936) --- .../experimental-tab/experimental-tab.component.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js index 63b3b61f6..1dc9cb549 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js @@ -53,6 +53,10 @@ export default class ExperimentalTab extends PureComponent { } renderCollectibleDetectionToggle() { + if (!process.env.COLLECTIBLES_V1) { + return null; + } + const { t } = this.context; const { useCollectibleDetection, @@ -93,6 +97,9 @@ export default class ExperimentalTab extends PureComponent { } renderOpenSeaEnabledToggle() { + if (!process.env.COLLECTIBLES_V1) { + return null; + } const { t } = this.context; const { openSeaEnabled, setOpenSeaEnabled } = this.props; From 79867bcebe72b83dd16a41524998cb916cb5e793 Mon Sep 17 00:00:00 2001 From: Hassan Malik <41640681+hmalik88@users.noreply.github.com> Date: Wed, 1 Dec 2021 14:45:55 -0800 Subject: [PATCH 004/100] Adding snaps authorship pill (#12740) * added npm icon * added snaps-authorship-pill component and story * updated npm icon * added classname * added comments * changed label to an h7 * updated default label, removed unnecessary font-weight prop * moved npm icon to flask/icons and added storybook file * added hover/focus logic * updated hover logic * updated hover logic * added authorship pill scss to app-components, removed unnecessary handlers * removed npm icon, added font-awesome icon, added font-awesome brands to scss imports * removed icons directory, updated scss file to use the proper color for npm icon, updated component with correct size and added class to change color * fixed linter errors * added link to pill and its story, changed title of story * changed link to open in new tab, moved classname to root element and made it inline-block * fixed proptype comment * fixed linter error --- ui/components/app/app-components.scss | 1 + .../app/flask/snaps-authorship-pill/index.js | 1 + .../flask/snaps-authorship-pill/index.scss | 16 ++++++ .../snaps-authorship-pill.js | 56 +++++++++++++++++++ .../snaps-authorship-pill.stories.js | 25 +++++++++ ui/css/design-system/typography.scss | 1 + 6 files changed, 100 insertions(+) create mode 100644 ui/components/app/flask/snaps-authorship-pill/index.js create mode 100644 ui/components/app/flask/snaps-authorship-pill/index.scss create mode 100644 ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js create mode 100644 ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.stories.js diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 4327df503..f83e5c476 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -19,6 +19,7 @@ @import 'edit-gas-fee-popover/edit-gas-item/index'; @import 'edit-gas-fee-popover/network-status/index'; @import 'edit-gas-fee-popover/network-status/status-slider/index'; +@import 'flask/snaps-authorship-pill/index'; @import 'gas-customization/gas-modal-page-container/index'; @import 'gas-customization/gas-price-button-group/index'; @import 'gas-customization/index'; diff --git a/ui/components/app/flask/snaps-authorship-pill/index.js b/ui/components/app/flask/snaps-authorship-pill/index.js new file mode 100644 index 000000000..79acafe31 --- /dev/null +++ b/ui/components/app/flask/snaps-authorship-pill/index.js @@ -0,0 +1 @@ +export { default } from './snaps-authorship-pill'; diff --git a/ui/components/app/flask/snaps-authorship-pill/index.scss b/ui/components/app/flask/snaps-authorship-pill/index.scss new file mode 100644 index 000000000..3ff6cb3eb --- /dev/null +++ b/ui/components/app/flask/snaps-authorship-pill/index.scss @@ -0,0 +1,16 @@ +@import "design-system"; + +.snaps-authorship-pill { + display: inline-block; + + &:hover, + &:focus { + .chip { + background-color: $ui-1; + } + } +} + +.snaps-authorship-icon { + color: $ui-4; +} diff --git a/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js b/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js new file mode 100644 index 000000000..584c3c686 --- /dev/null +++ b/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import Chip from '../../../ui/chip'; +import Box from '../../../ui/box'; +import Typography from '../../../ui/typography'; +import { + COLORS, + TYPOGRAPHY, +} from '../../../../helpers/constants/design-system'; + +const SnapsAuthorshipPill = ({ packageName, className, url }) => { + return ( + + + + + } + backgroundColor={COLORS.WHITE} + > + + {packageName} + + + + ); +}; + +SnapsAuthorshipPill.propTypes = { + /** + * NPM package name of the snap + */ + packageName: PropTypes.string, + /** + * The className of the SnapsAuthorshipPill + */ + className: PropTypes.string, + /** + * The url of the snap's package + */ + url: PropTypes.string, +}; + +export default SnapsAuthorshipPill; diff --git a/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.stories.js b/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.stories.js new file mode 100644 index 000000000..2bd50d0df --- /dev/null +++ b/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.stories.js @@ -0,0 +1,25 @@ +import React from 'react'; +import SnapsAuthorshipPill from '.'; + +export default { + title: 'Components/App/Flask/SnapsAuthorshipPill', + id: __filename, + component: SnapsAuthorshipPill, + argTypes: { + packageName: { + control: 'text', + }, + url: { + control: 'text', + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; + +DefaultStory.args = { + packageName: 'npm-package-name', + url: 'https://www.npmjs.com/package/@airswap/protocols', +}; diff --git a/ui/css/design-system/typography.scss b/ui/css/design-system/typography.scss index 12b7d37ea..36544cd19 100644 --- a/ui/css/design-system/typography.scss +++ b/ui/css/design-system/typography.scss @@ -1,6 +1,7 @@ $fa-font-path: '/fonts/fontawesome'; @import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome'; +@import '../../../node_modules/@fortawesome/fontawesome-free/scss/brands'; @import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid'; @import '../../../node_modules/@fortawesome/fontawesome-free/scss/regular'; From 9e2935dd55f51053657fe0bbf1e816591fc834ec Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Wed, 1 Dec 2021 17:46:26 -0600 Subject: [PATCH 005/100] Revert "Feat/collectibles display (#12873)" (#12934) This reverts commit 81ea24f08a7b62d40fbd7d38b79fe9f04f730633. --- app/_locales/en/messages.json | 27 +-- app/scripts/controllers/preferences.js | 2 +- app/scripts/lib/ens-ipfs/setup.js | 4 +- app/scripts/metamask-controller.js | 69 +++--- app/scripts/migrations/068.js | 61 ----- app/scripts/migrations/068.test.js | 56 ----- app/scripts/migrations/index.js | 2 - package.json | 2 +- shared/constants/network.js | 2 - ui/components/app/app-components.scss | 2 - .../collectible-details.js | 212 ------------------ .../collectible-details.stories.js | 23 -- .../collectible-options.js | 61 ----- .../app/collectible-details/index.scss | 26 --- .../collectibles-items.component.js | 102 ++------- .../app/collectibles-items/index.scss | 18 -- .../collectibles-tab.component.js | 39 +--- ui/components/ui/box/box.js | 2 +- ui/components/ui/typography/typography.js | 4 - ui/components/ui/typography/typography.scss | 6 - ui/css/design-system/attributes.scss | 1 - ui/ducks/metamask/metamask.js | 39 ---- ui/helpers/constants/design-system.js | 5 - ui/helpers/constants/routes.js | 2 +- ui/helpers/utils/util.js | 16 -- .../add-collectible.component.js | 18 +- ui/pages/asset/asset.js | 13 +- ui/pages/routes/routes.component.js | 3 +- .../advanced-tab/advanced-tab.component.js | 5 +- ui/store/actions.js | 10 - yarn.lock | 28 +-- 31 files changed, 86 insertions(+), 774 deletions(-) delete mode 100644 app/scripts/migrations/068.js delete mode 100644 app/scripts/migrations/068.test.js delete mode 100644 ui/components/app/collectible-details/collectible-details.js delete mode 100644 ui/components/app/collectible-details/collectible-details.stories.js delete mode 100644 ui/components/app/collectible-details/collectible-options.js delete mode 100644 ui/components/app/collectible-details/index.scss delete mode 100644 ui/components/app/collectibles-items/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0ee2dcfb2..8b73a187c 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -139,6 +139,9 @@ "addNFT": { "message": "Add NFT" }, + "addNFTLowerCase": { + "message": "add NFT" + }, "addNetwork": { "message": "Add Network" }, @@ -562,9 +565,6 @@ "contract": { "message": "Contract" }, - "contractAddress": { - "message": "Contract address" - }, "contractAddressError": { "message": "You are sending tokens to the token's contract address. This may result in the loss of these tokens." }, @@ -706,9 +706,6 @@ "depositEther": { "message": "Deposit Ether" }, - "description": { - "message": "Description" - }, "details": { "message": "Details" }, @@ -875,9 +872,6 @@ "editPermission": { "message": "Edit Permission" }, - "enableAutoDetect": { - "message": " Enable Autodetect" - }, "enableFromSettings": { "message": " Enable it from Settings." }, @@ -1303,9 +1297,6 @@ "importMyWallet": { "message": "Import My Wallet" }, - "importNFTs": { - "message": "Import NFTs" - }, "importTokenQuestion": { "message": "Import token?" }, @@ -1498,9 +1489,6 @@ "likeToImportTokens": { "message": "Would you like to import these tokens?" }, - "link": { - "message": "Link" - }, "links": { "message": "Links" }, @@ -2183,9 +2171,6 @@ "removeAccountDescription": { "message": "This account will be removed from your wallet. Please make sure you have the original Secret Recovery Phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. " }, - "removeNFT": { - "message": "Remove NFT" - }, "requestsAwaitingAcknowledgement": { "message": "requests waiting to be acknowledged" }, @@ -2504,9 +2489,6 @@ "somethingWentWrong": { "message": "Oops! Something went wrong." }, - "source": { - "message": "Source" - }, "speedUp": { "message": "Speed Up" }, @@ -3296,9 +3278,6 @@ "message": "View $1 on Etherscan", "description": "$1 is the action type. e.g (Account, Transaction, Swap)" }, - "viewOnOpensea": { - "message": "View on Opensea" - }, "viewinExplorer": { "message": "View $1 in Explorer", "description": "$1 is the action type. e.g (Account, Transaction, Swap)" diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 09e8d4936..738432e73 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -61,7 +61,7 @@ export default class PreferencesController { hideZeroBalanceTokens: false, }, // ENS decentralized website resolution - ipfsGateway: 'https://cloudflare-ipfs.com/ipfs/', + ipfsGateway: 'dweb.link', infuraBlocked: null, ledgerTransportType: window.navigator.hid ? LEDGER_TRANSPORT_TYPES.WEBHID diff --git a/app/scripts/lib/ens-ipfs/setup.js b/app/scripts/lib/ens-ipfs/setup.js index 8d50f0a1c..c7d1b2c09 100644 --- a/app/scripts/lib/ens-ipfs/setup.js +++ b/app/scripts/lib/ens-ipfs/setup.js @@ -50,8 +50,6 @@ export default function setupEnsIpfsResolver({ async function attemptResolve({ tabId, name, pathname, search, fragment }) { const ipfsGateway = getIpfsGateway(); - const ipfsGatewayHost = new URL(ipfsGateway)?.host; - extension.tabs.update(tabId, { url: `loading.html` }); let url = `https://app.ens.domains/name/${name}`; try { @@ -63,7 +61,7 @@ export default function setupEnsIpfsResolver({ const resolvedUrl = `https://${hash}.${type.slice( 0, 4, - )}.${ipfsGatewayHost}${pathname}${search || ''}${fragment || ''}`; + )}.${ipfsGateway}${pathname}${search || ''}${fragment || ''}`; try { // check if ipfs gateway has result const response = await fetchWithTimeout(resolvedUrl, { diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 3cf2974e1..a6d39262c 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -41,10 +41,7 @@ import { GAS_DEV_API_BASE_URL, SWAPS_CLIENT_ID, } from '../../shared/constants/swaps'; -import { - IPFS_DEFAULT_GATEWAY_URL, - MAINNET_CHAIN_ID, -} from '../../shared/constants/network'; +import { MAINNET_CHAIN_ID } from '../../shared/constants/network'; import { DEVICE_NAMES, KEYRING_TYPES, @@ -190,44 +187,32 @@ export default class MetamaskController extends EventEmitter { provider: this.provider, }); - this.collectiblesController = new CollectiblesController( - { - onPreferencesStateChange: (cb) => - this.preferencesController.store.subscribe((preferencesState) => { - const { ipfsGateway } = this.preferencesController.store.getState(); - const modifiedPreferencesState = { - ...preferencesState, - ipfsGateway: ipfsGateway.endsWith('/ipfs/') - ? ipfsGateway - : `${ipfsGateway}/ipfs/`, - }; - return cb(modifiedPreferencesState); - }), - onNetworkStateChange: this.networkController.store.subscribe.bind( - this.networkController.store, - ), - getAssetName: this.assetsContractController.getAssetName.bind( - this.assetsContractController, - ), - getAssetSymbol: this.assetsContractController.getAssetSymbol.bind( - this.assetsContractController, - ), - getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind( - this.assetsContractController, - ), - getOwnerOf: this.assetsContractController.getOwnerOf.bind( - this.assetsContractController, - ), - balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind( - this.assetsContractController, - ), - uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind( - this.assetsContractController, - ), - }, - { ipfsGateway: `${IPFS_DEFAULT_GATEWAY_URL}/ipfs/` }, - initState.CollectiblesController, - ); + this.collectiblesController = new CollectiblesController({ + onPreferencesStateChange: this.preferencesController.store.subscribe.bind( + this.preferencesController.store, + ), + onNetworkStateChange: this.networkController.store.subscribe.bind( + this.networkController.store, + ), + getAssetName: this.assetsContractController.getAssetName.bind( + this.assetsContractController, + ), + getAssetSymbol: this.assetsContractController.getAssetSymbol.bind( + this.assetsContractController, + ), + getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind( + this.assetsContractController, + ), + getOwnerOf: this.assetsContractController.getOwnerOf.bind( + this.assetsContractController, + ), + balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind( + this.assetsContractController, + ), + uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind( + this.assetsContractController, + ), + }); process.env.COLLECTIBLES_V1 && (this.collectibleDetectionController = new CollectibleDetectionController( diff --git a/app/scripts/migrations/068.js b/app/scripts/migrations/068.js deleted file mode 100644 index dda99d11e..000000000 --- a/app/scripts/migrations/068.js +++ /dev/null @@ -1,61 +0,0 @@ -import { cloneDeep } from 'lodash'; -import { IPFS_DEFAULT_GATEWAY_URL } from '../../../shared/constants/network'; - -const version = 68; - -function addUrlProtocolPrefix(urlString) { - if (!urlString.match(/(^http:\/\/)|(^https:\/\/)/u)) { - return `https://${urlString}`; - } - return urlString; -} - -export default { - version, - - async migrate(originalVersionedData) { - const versionedData = cloneDeep(originalVersionedData); - versionedData.meta.version = version; - const state = versionedData.data; - const newState = transformState(state); - versionedData.data = newState; - return versionedData; - }, -}; - -function transformState(state) { - const PreferencesController = state?.PreferencesController || {}; - const preferences = PreferencesController.preferences || {}; - const oldIpfsGateWay = preferences.ipfsGateway; - - let newState; - - if (oldIpfsGateWay && oldIpfsGateWay !== 'dweb.link') { - const newIpfsGateway = new URL( - addUrlProtocolPrefix(oldIpfsGateWay), - ).toString(); - newState = { - ...state, - PreferencesController: { - ...PreferencesController, - preferences: { - ...preferences, - ipfsGateway: newIpfsGateway, - }, - }, - }; - } else { - newState = { - ...state, - PreferencesController: { - ...PreferencesController, - preferences: { - ...preferences, - ipfsGateway: IPFS_DEFAULT_GATEWAY_URL, - }, - }, - }; - } - - return newState; -} diff --git a/app/scripts/migrations/068.test.js b/app/scripts/migrations/068.test.js deleted file mode 100644 index 249fcc48b..000000000 --- a/app/scripts/migrations/068.test.js +++ /dev/null @@ -1,56 +0,0 @@ -import { IPFS_DEFAULT_GATEWAY_URL } from '../../../shared/constants/network'; -import migration68 from './068'; - -describe('migration #68', () => { - it('should update the version metadata', async () => { - const oldStorage = { - meta: { - version: 67, - }, - data: {}, - }; - - const newStorage = await migration68.migrate(oldStorage); - expect(newStorage.meta).toStrictEqual({ - version: 68, - }); - }); - - it('should set preference ipfsGateway to "https://cloudflare-ipfs.com" if ipfsGateway is old default dweb.link', async () => { - const expectedValue = IPFS_DEFAULT_GATEWAY_URL; // = https://cloudflare-ipfs.com - const oldStorage = { - meta: {}, - data: { - PreferencesController: { - preferences: { - ipfsGateway: 'dweb.link', - }, - }, - }, - }; - - const newStorage = await migration68.migrate(oldStorage); - expect(newStorage.data.PreferencesController.preferences.ipfsGateway).toBe( - expectedValue, - ); - }); - - it('should update preference ipfsGateway to a full url version of user set ipfsGateway if ipfsGateway is not old default dweb.link', async () => { - const expectedValue = 'https://random.ipfs/'; - const oldStorage = { - meta: {}, - data: { - PreferencesController: { - preferences: { - ipfsGateway: 'random.ipfs', - }, - }, - }, - }; - - const newStorage = await migration68.migrate(oldStorage); - expect(newStorage.data.PreferencesController.preferences.ipfsGateway).toBe( - expectedValue, - ); - }); -}); diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js index ece1046e6..2471381f5 100644 --- a/app/scripts/migrations/index.js +++ b/app/scripts/migrations/index.js @@ -71,7 +71,6 @@ import m064 from './064'; import m065 from './065'; import m066 from './066'; import m067 from './067'; -import m068 from './068'; const migrations = [ m002, @@ -140,7 +139,6 @@ const migrations = [ m065, m066, m067, - m068, ]; export default migrations; diff --git a/package.json b/package.json index 49563aea3..9dcec5e9a 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "@keystonehq/metamask-airgapped-keyring": "0.2.1", "@material-ui/core": "^4.11.0", "@metamask/contract-metadata": "^1.28.0", - "@metamask/controllers": "^21.0.1", + "@metamask/controllers": "^20.1.0", "@metamask/eth-ledger-bridge-keyring": "^0.10.0", "@metamask/eth-token-tracker": "^3.0.1", "@metamask/etherscan-link": "^2.1.0", diff --git a/shared/constants/network.js b/shared/constants/network.js index 893832db3..2210605d0 100644 --- a/shared/constants/network.js +++ b/shared/constants/network.js @@ -171,5 +171,3 @@ export const UNSUPPORTED_RPC_METHODS = new Set([ // eth-json-rpc-middleware – but our UI does not support it. 'eth_signTransaction', ]); - -export const IPFS_DEFAULT_GATEWAY_URL = 'https://cloudflare-ipfs.com'; diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index f83e5c476..adf1fe63b 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -7,8 +7,6 @@ @import 'app-header/index'; @import 'asset-list-item/asset-list-item'; @import 'confirm-page-container/index'; -@import 'collectibles-items/index'; -@import 'collectible-details/index'; @import 'connected-accounts-list/index'; @import 'connected-accounts-permissions/index'; @import 'connected-sites-list/index'; diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js deleted file mode 100644 index 2894b5b39..000000000 --- a/ui/components/app/collectible-details/collectible-details.js +++ /dev/null @@ -1,212 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { getTokenTrackerLink } from '@metamask/etherscan-link'; -import Box from '../../ui/box'; -import Typography from '../../ui/typography/typography'; -import { - COLORS, - TYPOGRAPHY, - BLOCK_SIZES, - FONT_WEIGHT, - JUSTIFY_CONTENT, - FLEX_DIRECTION, - OVERFLOW_WRAP, - DISPLAY, -} from '../../../helpers/constants/design-system'; -import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - getAssetImageURL, - isEqualCaseInsensitive, - shortenAddress, -} from '../../../helpers/utils/util'; -import { - getCurrentChainId, - getIpfsGateway, - getRpcPrefsForCurrentProvider, - getSelectedIdentity, -} from '../../../selectors'; -import AssetNavigation from '../../../pages/asset/components/asset-navigation'; -import { getCollectibleContracts } from '../../../ducks/metamask/metamask'; -import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; -import { removeAndIgnoreCollectible } from '../../../store/actions'; -import { - GOERLI_CHAIN_ID, - KOVAN_CHAIN_ID, - MAINNET_CHAIN_ID, - POLYGON_CHAIN_ID, - RINKEBY_CHAIN_ID, - ROPSTEN_CHAIN_ID, -} from '../../../../shared/constants/network'; -import { getEnvironmentType } from '../../../../app/scripts/lib/util'; -import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; -import CollectibleOptions from './collectible-options'; - -export default function CollectibleDetails({ collectible }) { - const { image, name, description, address, tokenId } = collectible; - const t = useI18nContext(); - const history = useHistory(); - const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); - const ipfsGateway = useSelector(getIpfsGateway); - const collectibleContracts = useSelector(getCollectibleContracts); - const currentNetwork = useSelector(getCurrentChainId); - - const collectibleContractName = collectibleContracts.find( - ({ address: contractAddress }) => - isEqualCaseInsensitive(contractAddress, address), - )?.name; - const selectedAccountName = useSelector( - (state) => getSelectedIdentity(state).name, - ); - const collectibleImageURL = getAssetImageURL(image, ipfsGateway); - const dispatch = useDispatch(); - - const onRemove = () => { - dispatch(removeAndIgnoreCollectible(address, tokenId)); - history.push(DEFAULT_ROUTE); - }; - - const getOpenSeaLink = () => { - switch (currentNetwork) { - case MAINNET_CHAIN_ID: - return `https://opensea.io/assets/${address}/${tokenId}`; - case POLYGON_CHAIN_ID: - return `https://opensea.io/assets/matic/${address}/${tokenId}`; - case GOERLI_CHAIN_ID: - case KOVAN_CHAIN_ID: - case ROPSTEN_CHAIN_ID: - case RINKEBY_CHAIN_ID: - return `https://testnets.opensea.io/assets/${address}/${tokenId}`; - default: - return null; - } - }; - - const openSeaLink = getOpenSeaLink(); - return ( - <> - history.push(DEFAULT_ROUTE)} - optionsButton={ - global.platform.openTab({ url: openSeaLink }) - : null - } - onRemove={onRemove} - /> - } - /> - -
- - - - - - {name} - - - {`#${tokenId}`} - - - {t('description')} - - - {description} - - -
- - - - {t('source')} - - - - {image} - - - - - - {t('contractAddress')} - - - - {getEnvironmentType() === ENVIRONMENT_TYPE_POPUP - ? shortenAddress(address) - : address} - - - - - - - ); -} - -CollectibleDetails.propTypes = { - collectible: PropTypes.object, -}; diff --git a/ui/components/app/collectible-details/collectible-details.stories.js b/ui/components/app/collectible-details/collectible-details.stories.js deleted file mode 100644 index 1eeb9aaae..000000000 --- a/ui/components/app/collectible-details/collectible-details.stories.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import CollectibleDetails from './collectible-details'; - -export default { - title: 'Components/App/CollectibleDetails', - id: __filename, -}; - -export const basic = () => { - const collectible = { - name: 'Catnip Spicywright', - tokenId: '1124157', - address: '0x06012c8cf97bead5deae237070f9587f8e7a266d', - image: './images/catnip-spicywright.png', - description: - "Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.", - }; - return ( -
- -
- ); -}; diff --git a/ui/components/app/collectible-details/collectible-options.js b/ui/components/app/collectible-details/collectible-options.js deleted file mode 100644 index 5df1b2019..000000000 --- a/ui/components/app/collectible-details/collectible-options.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { useContext, useState } from 'react'; -import PropTypes from 'prop-types'; - -import { I18nContext } from '../../../contexts/i18n'; -import { Menu, MenuItem } from '../../ui/menu'; - -const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { - const t = useContext(I18nContext); - const [ - collectibleOptionsButtonElement, - setCollectibleOptionsButtonElement, - ] = useState(null); - const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false); - - return ( - <> - - - ) : ( - - - - )} + + + - {t('importNFTs')} + {t('addNFTLowerCase')} @@ -198,7 +145,4 @@ export default function CollectiblesItems({ CollectiblesItems.propTypes = { onAddNFT: PropTypes.func.isRequired, onRefreshList: PropTypes.func.isRequired, - collections: PropTypes.array, - useCollectibleDetection: PropTypes.bool.isRequired, - onEnableAutoDetect: PropTypes.func.isRequired, }; diff --git a/ui/components/app/collectibles-items/index.scss b/ui/components/app/collectibles-items/index.scss deleted file mode 100644 index 4a2f62bad..000000000 --- a/ui/components/app/collectibles-items/index.scss +++ /dev/null @@ -1,18 +0,0 @@ -.collectibles-items { - &__image { - border-radius: 0.625rem; - width: 100%; - height: 100%; - } -} - -.collection-icon { - border-radius: 50%; - width: 2rem; - height: 2rem; - padding: 0.5rem; - background: $ui-4; - color: $ui-white; - text-align: center; - line-height: 1; -} diff --git a/ui/components/app/collectibles-tab/collectibles-tab.component.js b/ui/components/app/collectibles-tab/collectibles-tab.component.js index 2c061c1d0..42c85d17a 100644 --- a/ui/components/app/collectibles-tab/collectibles-tab.component.js +++ b/ui/components/app/collectibles-tab/collectibles-tab.component.js @@ -1,7 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; import Box from '../../ui/box'; import Button from '../../ui/button'; import Typography from '../../ui/typography/typography'; @@ -16,49 +14,20 @@ import { FONT_WEIGHT, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - getCollectibles, - getCollectibleContracts, -} from '../../../ducks/metamask/metamask'; -import { getUseCollectibleDetection } from '../../../selectors'; -import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; -import { detectCollectibles } from '../../../store/actions'; export default function CollectiblesTab({ onAddNFT }) { - const collectibles = useSelector(getCollectibles); - const collectibleContracts = useSelector(getCollectibleContracts); - const useCollectibleDetection = useSelector(getUseCollectibleDetection); - const history = useHistory(); + const collectibles = []; const newNFTsDetected = false; const t = useI18nContext(); - const collections = {}; - const dispatch = useDispatch(); - - collectibles.forEach((collectible) => { - if (collections[collectible.address]) { - collections[collectible.address].collectibles.push(collectible); - } else { - const collectionContract = collectibleContracts.find( - ({ address }) => address === collectible.address, - ); - collections[collectible.address] = { - collectionName: collectionContract?.name || collectible.name, - collectionImage: - collectionContract?.logo || collectible.collectionImage, - collectibles: [collectible], - }; - } - }); return (
{collectibles.length > 0 ? ( dispatch(detectCollectibles())} - onEnableAutoDetect={() => history.push(EXPERIMENTAL_ROUTE)} + onRefreshList={() => { + console.log('refreshing collectibles'); + }} /> ) : ( diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js index 3b663b594..b9fc2f5ce 100644 --- a/ui/components/ui/box/box.js +++ b/ui/components/ui/box/box.js @@ -169,6 +169,6 @@ Box.propTypes = { display: PropTypes.oneOf(Object.values(DISPLAY)), width: PropTypes.oneOf(Object.values(BLOCK_SIZES)), height: PropTypes.oneOf(Object.values(BLOCK_SIZES)), - backgroundColor: PropTypes.string, + backgroundColor: PropTypes.oneOf(Object.values(COLORS)), className: PropTypes.string, }; diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js index 0e505c131..2d11ca3cc 100644 --- a/ui/components/ui/typography/typography.js +++ b/ui/components/ui/typography/typography.js @@ -7,7 +7,6 @@ import { FONT_STYLE, TEXT_ALIGN, TYPOGRAPHY, - OVERFLOW_WRAP, } from '../../../helpers/constants/design-system'; import Box, { MultipleSizes } from '../box'; @@ -23,7 +22,6 @@ export default function Typography({ fontStyle = 'normal', fontSize, align, - overflowWrap, boxProps = {}, margin = [1, 0], }) { @@ -37,7 +35,6 @@ export default function Typography({ [`typography--align-${align}`]: Boolean(align), [`typography--color-${color}`]: Boolean(color), [`typography--size-${fontSize}`]: Boolean(fontSize), - [`typography--overflowwrap-${overflowWrap}`]: Boolean(overflowWrap), }, ); @@ -72,7 +69,6 @@ Typography.propTypes = { margin: MultipleSizes, fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), - overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)), fontSize: PropTypes.string, tag: PropTypes.oneOf([ 'p', diff --git a/ui/components/ui/typography/typography.scss b/ui/components/ui/typography/typography.scss index 2fb59c479..ea1cbaff3 100644 --- a/ui/components/ui/typography/typography.scss +++ b/ui/components/ui/typography/typography.scss @@ -45,12 +45,6 @@ } } - @each $overflow in design-system.$overflow-wrap { - &--overflowwrap-#{$overflow} { - overflow-wrap: $overflow; - } - } - @for $i from 1 through 8 { &--spacing-#{$i} { margin: #{$i * 4}px auto; diff --git a/ui/css/design-system/attributes.scss b/ui/css/design-system/attributes.scss index 1afaf8e96..4a187a949 100644 --- a/ui/css/design-system/attributes.scss +++ b/ui/css/design-system/attributes.scss @@ -80,7 +80,6 @@ $border-style: solid, double, none, dashed, dotted; $directions: top, right, bottom, left; $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item; $text-align: left, right, center, justify, end; -$overflow-wrap: normal, break-word; $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900; $font-style: normal, italic, oblique; $font-size: 10px, 12px; diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js index 2461789fa..9578826e1 100644 --- a/ui/ducks/metamask/metamask.js +++ b/ui/ducks/metamask/metamask.js @@ -256,45 +256,6 @@ export const getUnconnectedAccountAlertShown = (state) => export const getTokens = (state) => state.metamask.tokens; -export const getCollectibles = (state) => { - const { - metamask: { - allCollectibles, - provider: { chainId }, - selectedAddress, - }, - } = state; - - let decFormattedChainId; - if (typeof chainId === 'string' && isHexString(chainId)) { - decFormattedChainId = `${parseInt(chainId, 16)}`; - } else if (typeof chainId === 'number') { - decFormattedChainId = `${chainId}`; - } - - return allCollectibles?.[selectedAddress]?.[decFormattedChainId] || []; -}; - -export const getCollectibleContracts = (state) => { - const { - metamask: { - allCollectibleContracts, - provider: { chainId }, - selectedAddress, - }, - } = state; - - let decFormattedChainId; - if (typeof chainId === 'string' && isHexString(chainId)) { - decFormattedChainId = `${parseInt(chainId, 16)}`; - } else if (typeof chainId === 'number') { - decFormattedChainId = `${chainId}`; - } - return ( - allCollectibleContracts?.[selectedAddress]?.[decFormattedChainId] || [] - ); -}; - export function getBlockGasLimit(state) { return state.metamask.currentBlockGasLimit; } diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js index d8c0dcfd6..ae26f9d28 100644 --- a/ui/helpers/constants/design-system.js +++ b/ui/helpers/constants/design-system.js @@ -171,11 +171,6 @@ export const FONT_WEIGHT = { 900: 900, }; -export const OVERFLOW_WRAP = { - BREAK_WORD: 'break-word', - NORMAL: 'normal', -}; - export const FONT_STYLE = { ITALIC: 'italic', NORMAL: 'normal', diff --git a/ui/helpers/constants/routes.js b/ui/helpers/constants/routes.js index 1de62a7ff..541dad5c1 100644 --- a/ui/helpers/constants/routes.js +++ b/ui/helpers/constants/routes.js @@ -93,7 +93,7 @@ const PATH_NAME_MAP = { [DEFAULT_ROUTE]: 'Home', [UNLOCK_ROUTE]: 'Unlock Page', [LOCK_ROUTE]: 'Lock Page', - [`${ASSET_ROUTE}/:asset/:id`]: `Asset Page`, + [`${ASSET_ROUTE}/:asset`]: `Asset Page`, [SETTINGS_ROUTE]: 'Settings Page', [GENERAL_ROUTE]: 'General Settings Page', [ADVANCED_ROUTE]: 'Advanced Settings Page', diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index b197c3972..f7d839d08 100644 --- a/ui/helpers/utils/util.js +++ b/ui/helpers/utils/util.js @@ -3,7 +3,6 @@ import abi from 'human-standard-token-abi'; import BigNumber from 'bignumber.js'; import * as ethUtil from 'ethereumjs-util'; import { DateTime } from 'luxon'; -import { util } from '@metamask/controllers'; import { addHexPrefix } from '../../../app/scripts/lib/util'; import { GOERLI_CHAIN_ID, @@ -429,18 +428,3 @@ export const toHumanReadableTime = (t, milliseconds) => { export function clearClipboard() { window.navigator.clipboard.writeText(''); } - -export function getAssetImageURL(image, ipfsGateway) { - let result = image; - if (!image || !ipfsGateway || typeof image !== 'string') { - return ''; - } - - if (image.startsWith('ipfs://')) { - const contentIdentifier = util.getIpfsUrlContentIdentifier(image); - result = ipfsGateway.endsWith('/') - ? ipfsGateway + contentIdentifier - : `${ipfsGateway}/${contentIdentifier}`; - } - return result; -} diff --git a/ui/pages/add-collectible/add-collectible.component.js b/ui/pages/add-collectible/add-collectible.component.js index 2cf724c8b..a0fc8639f 100644 --- a/ui/pages/add-collectible/add-collectible.component.js +++ b/ui/pages/add-collectible/add-collectible.component.js @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { isValidHexAddress } from '@metamask/controllers/dist/util'; import { useI18nContext } from '../../hooks/useI18nContext'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; @@ -20,7 +19,6 @@ export default function AddCollectible() { const [address, setAddress] = useState(''); const [tokenId, setTokenId] = useState(''); - const [disabled, setDisabled] = useState(true); const handleAddCollectible = async () => { try { @@ -35,16 +33,6 @@ export default function AddCollectible() { history.push(DEFAULT_ROUTE); }; - const validateAndSetAddress = (val) => { - setDisabled(!isValidHexAddress(val) || !tokenId); - setAddress(val); - }; - - const validateAndSetTokenId = (val) => { - setDisabled(!isValidHexAddress(address) || !val); - setTokenId(val); - }; - return ( { history.push(DEFAULT_ROUTE); }} - disabled={disabled} + disabled={false} contentComponent={ @@ -68,7 +56,7 @@ export default function AddCollectible() { placeholder="0x..." type="text" value={address} - onChange={(e) => validateAndSetAddress(e.target.value)} + onChange={(e) => setAddress(e.target.value)} fullWidth autoFocus margin="normal" @@ -81,7 +69,7 @@ export default function AddCollectible() { placeholder={t('nftTokenIdPlaceholder')} type="number" value={tokenId} - onChange={(e) => validateAndSetTokenId(e.target.value)} + onChange={(e) => setTokenId(e.target.value)} fullWidth margin="normal" /> diff --git a/ui/pages/asset/asset.js b/ui/pages/asset/asset.js index ae09e8a22..303d6fdeb 100644 --- a/ui/pages/asset/asset.js +++ b/ui/pages/asset/asset.js @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { Redirect, useParams } from 'react-router-dom'; -import CollectibleDetails from '../../components/app/collectible-details/collectible-details'; -import { getCollectibles, getTokens } from '../../ducks/metamask/metamask'; +import { getTokens } from '../../ducks/metamask/metamask'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; import { isEqualCaseInsensitive } from '../../helpers/utils/util'; @@ -12,18 +11,12 @@ import TokenAsset from './components/token-asset'; const Asset = () => { const nativeCurrency = useSelector((state) => state.metamask.nativeCurrency); const tokens = useSelector(getTokens); - const collectibles = useSelector(getCollectibles); - const { asset, id } = useParams(); + const { asset } = useParams(); const token = tokens.find(({ address }) => isEqualCaseInsensitive(address, asset), ); - const collectible = collectibles.find( - ({ address, tokenId }) => - isEqualCaseInsensitive(address, asset) && id === tokenId, - ); - useEffect(() => { const el = document.querySelector('.app'); el.scroll(0, 0); @@ -32,8 +25,6 @@ const Asset = () => { let content; if (token) { content = ; - } else if (collectible) { - content = ; } else if (asset === nativeCurrency) { content = ; } else { diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index f83efe74d..ae2142891 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -184,8 +184,7 @@ export default class Routes extends Component { path={`${CONNECT_ROUTE}/:id`} component={PermissionsConnect} /> - - + ); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js index a66bd4f45..c24ddb868 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js @@ -566,7 +566,10 @@ export default class AdvancedTab extends PureComponent { } handleIpfsGatewaySave() { - this.props.setIpfsGateway(this.state.ipfsGateway); + const url = new URL(addUrlProtocolPrefix(this.state.ipfsGateway)); + const { host } = url; + + this.props.setIpfsGateway(host); } renderIpfsGatewayControl() { diff --git a/ui/store/actions.js b/ui/store/actions.js index c6e08e1a8..3262c0d19 100644 --- a/ui/store/actions.js +++ b/ui/store/actions.js @@ -2203,16 +2203,6 @@ export function setOpenSeaEnabled(val) { }; } -export function detectCollectibles() { - return async (dispatch) => { - dispatch(showLoadingIndication()); - log.debug(`background.detectCollectibles`); - await promisifiedBackground.detectCollectibles(); - dispatch(hideLoadingIndication()); - await forceUpdateMetamaskState(dispatch); - }; -} - export function setAdvancedGasFee(val) { return (dispatch) => { dispatch(showLoadingIndication()); diff --git a/yarn.lock b/yarn.lock index 05815ffb5..2b29606e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2601,19 +2601,19 @@ semver "^7.3.5" yargs "^17.0.1" -"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.28.0", "@metamask/contract-metadata@^1.31.0": - version "1.31.0" - resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.31.0.tgz#9e3e46de7a955ea1ca61f7db20d9a17b5e91d3d0" - integrity sha512-4FBJkg/vDiYp/thIiZknxrJ0lfsj2eWIPenwlNZmoqOhoL4VqhK5eKWxi+EuGMvv9taP+QBRk6Key7wC1uL78A== +"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.28.0", "@metamask/contract-metadata@^1.30.0": + version "1.30.0" + resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.30.0.tgz#fa8e1b0c3e7aaa963986088f691fb553ffbe3904" + integrity sha512-b2usYW/ptQYnE6zhUmr4T+nvOAQJK5ABcpKudyQANpy4K099elpv4aN0WcrcOcwV99NHOdMzFP3ZuG0HoAyOBQ== -"@metamask/controllers@^21.0.1": - version "21.0.1" - resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-21.0.1.tgz#f7776a448afd3869dce76ecb34549e867fa78ec4" - integrity sha512-E8JLRlTC7jyUgJSaXgFYa3g5pt5NCtA87hyarZFoolNKL6yrQgLHxqRyfGV28TsNsawl1i++rxb/8rgAJSRPHw== +"@metamask/controllers@^20.1.0": + version "20.1.0" + resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-20.1.0.tgz#1d8386dc22d14f9fd9feb8b3cc8314d663587550" + integrity sha512-Z/7uLGXZWbCBbtCybR3jo1bx3mcvZRUSm1i43od4dnJoQo2+Veq4ePrFVgPKS3WtLIM/hzZuI7UTAQ9HNX9aew== dependencies: "@ethereumjs/common" "^2.3.1" "@ethereumjs/tx" "^3.2.1" - "@metamask/contract-metadata" "^1.31.0" + "@metamask/contract-metadata" "^1.30.0" "@types/uuid" "^8.3.0" abort-controller "^3.0.0" async-mutex "^0.2.6" @@ -2632,7 +2632,7 @@ ethjs-unit "^0.1.6" ethjs-util "^0.1.6" human-standard-collectible-abi "^1.0.2" - human-standard-multi-collectible-abi "^1.0.4" + human-standard-multi-collectible-abi "^1.0.2" human-standard-token-abi "^2.0.0" immer "^9.0.6" isomorphic-fetch "^3.0.0" @@ -14654,10 +14654,10 @@ human-standard-collectible-abi@^1.0.2: resolved "https://registry.yarnpkg.com/human-standard-collectible-abi/-/human-standard-collectible-abi-1.0.2.tgz#077bae9ed1b0b0b82bc46932104b4b499c941aa0" integrity sha512-nD3ITUuSAIBgkaCm9J2BGwlHL8iEzFjJfTleDAC5Wi8RBJEXXhxV0JeJjd95o+rTwf98uTE5MW+VoBKOIYQh0g== -human-standard-multi-collectible-abi@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/human-standard-multi-collectible-abi/-/human-standard-multi-collectible-abi-1.0.4.tgz#981625bc1a6bea5fef90567f9e12c11581fac497" - integrity sha512-ylR9JDXClDJAxWD/QJxsjXJJdLTUmhipTquMAgrfybXL3qX3x3P/vmKg92A7qFu7SqVOf2hyv5dA8vX0j+0Thg== +human-standard-multi-collectible-abi@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/human-standard-multi-collectible-abi/-/human-standard-multi-collectible-abi-1.0.3.tgz#be5896b13f8622289cff70040e478366931bf3d7" + integrity sha512-1VXqats7JQqDZozLKhpmFG0S33hVePrkLNRJNKfJTxewR0heYKjSoz72kqs+6O/Tywi0zW4fWe7dfTaPX4j7gQ== human-standard-token-abi@^1.0.2: version "1.0.2" From 6dbf6e3ab388fe64ed7e0c03d1adc4a9190270d5 Mon Sep 17 00:00:00 2001 From: igorms-cons <89637087+igorms-cons@users.noreply.github.com> Date: Thu, 2 Dec 2021 13:18:09 +0100 Subject: [PATCH 006/100] Latest update conversion date - issue #10741 (#12422) * conversion date fix * update in settings conversion date - no internet * update conversionDate fetch - setting container * no currency date message updated --- app/_locales/en/messages.json | 3 ++ .../settings-tab/settings-tab.component.js | 14 +++++-- .../settings-tab/settings-tab.container.js | 7 ++-- ui/pages/settings/settings.component.js | 40 ++++++++++++++++++- ui/pages/settings/settings.container.js | 5 +++ 5 files changed, 61 insertions(+), 8 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 8b73a187c..e98ed9382 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1782,6 +1782,9 @@ "noAlreadyHaveSeed": { "message": "No, I already have a Secret Recovery Phrase" }, + "noConversionDateAvailable": { + "message": "No Currency Conversion Date Available" + }, "noConversionRateAvailable": { "message": "No Conversion Rate Available" }, diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js index fc9eb651e..ce57855ae 100644 --- a/ui/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/pages/settings/settings-tab/settings-tab.component.js @@ -37,24 +37,32 @@ export default class SettingsTab extends PureComponent { currentLocale: PropTypes.string, useBlockie: PropTypes.bool, currentCurrency: PropTypes.string, - conversionDate: PropTypes.number, nativeCurrency: PropTypes.string, useNativeCurrencyAsPrimaryCurrency: PropTypes.bool, setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func, hideZeroBalanceTokens: PropTypes.bool, setHideZeroBalanceTokens: PropTypes.func, + lastFetchedConversionDate: PropTypes.number, }; renderCurrentConversion() { const { t } = this.context; - const { currentCurrency, conversionDate, setCurrentCurrency } = this.props; + const { + currentCurrency, + setCurrentCurrency, + lastFetchedConversionDate, + } = this.props; return (
{t('currencyConversion')} - {t('updatedWithDate', [Date(conversionDate)])} + {lastFetchedConversionDate + ? t('updatedWithDate', [ + new Date(lastFetchedConversionDate * 1000).toString(), + ]) + : t('noConversionDateAvailable')}
diff --git a/ui/pages/settings/settings-tab/settings-tab.container.js b/ui/pages/settings/settings-tab/settings-tab.container.js index 2e964e551..9759848cf 100644 --- a/ui/pages/settings/settings-tab/settings-tab.container.js +++ b/ui/pages/settings/settings-tab/settings-tab.container.js @@ -10,14 +10,13 @@ import { import { getPreferences } from '../../../selectors'; import SettingsTab from './settings-tab.component'; -const mapStateToProps = (state) => { +const mapStateToProps = (state, ownProps) => { const { appState: { warning }, metamask, } = state; const { currentCurrency, - conversionDate, nativeCurrency, useBlockie, currentLocale, @@ -27,15 +26,17 @@ const mapStateToProps = (state) => { hideZeroBalanceTokens, } = getPreferences(state); + const { lastFetchedConversionDate } = ownProps; + return { warning, currentLocale, currentCurrency, - conversionDate, nativeCurrency, useBlockie, useNativeCurrencyAsPrimaryCurrency, hideZeroBalanceTokens, + lastFetchedConversionDate, }; }; diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js index 00ed38505..54e99ade9 100644 --- a/ui/pages/settings/settings.component.js +++ b/ui/pages/settings/settings.component.js @@ -41,12 +41,32 @@ class SettingsPage extends PureComponent { initialBreadCrumbKey: PropTypes.string, mostRecentOverviewPage: PropTypes.string.isRequired, addNewNetwork: PropTypes.bool, + conversionDate: PropTypes.number, }; static contextTypes = { t: PropTypes.func, }; + state = { + lastFetchedConversionDate: null, + }; + + componentDidMount() { + this.handleConversionDate(); + } + + componentDidUpdate() { + this.handleConversionDate(); + } + + handleConversionDate() { + const { conversionDate } = this.props; + if (conversionDate !== null) { + this.setState({ lastFetchedConversionDate: conversionDate }); + } + } + render() { const { history, @@ -227,7 +247,16 @@ class SettingsPage extends PureComponent { renderContent() { return ( - + ( + + )} + /> @@ -251,7 +280,14 @@ class SettingsPage extends PureComponent { path={`${CONTACT_VIEW_ROUTE}/:id`} component={ContactListTab} /> - + ( + + )} + /> ); } diff --git a/ui/pages/settings/settings.container.js b/ui/pages/settings/settings.container.js index c973e78f3..d5875f6c0 100644 --- a/ui/pages/settings/settings.container.js +++ b/ui/pages/settings/settings.container.js @@ -47,6 +47,10 @@ const ROUTES_TO_I18N_KEYS = { const mapStateToProps = (state, ownProps) => { const { location } = ownProps; const { pathname } = location; + const { + metamask: { conversionDate }, + } = state; + const pathNameTail = pathname.match(/[^/]+$/u)[0]; const isAddressEntryPage = pathNameTail.includes('0x'); @@ -91,6 +95,7 @@ const mapStateToProps = (state, ownProps) => { initialBreadCrumbKey, mostRecentOverviewPage: getMostRecentOverviewPage(state), addNewNetwork, + conversionDate, }; }; From 4cd957953d52e813528cce424426f5ce7135cb4b Mon Sep 17 00:00:00 2001 From: George Marshall Date: Thu, 2 Dec 2021 09:11:35 -0800 Subject: [PATCH 007/100] Updating Storybook base styles (#12862) * Adding branding and updating styles for storybook docs * Making code blocks light gray --- .storybook/manager.js | 6 +++ .storybook/metamask-storybook-theme.js | 10 +++++ .storybook/preview-head.html | 56 ++++++++++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 .storybook/manager.js create mode 100644 .storybook/metamask-storybook-theme.js create mode 100644 .storybook/preview-head.html diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 000000000..3f32fb0ba --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import MetaMaskStorybookTheme from './metamask-storybook-theme'; + +addons.setConfig({ + theme: MetaMaskStorybookTheme, +}); diff --git a/.storybook/metamask-storybook-theme.js b/.storybook/metamask-storybook-theme.js new file mode 100644 index 000000000..707afc6e9 --- /dev/null +++ b/.storybook/metamask-storybook-theme.js @@ -0,0 +1,10 @@ +// .storybook/YourTheme.js + +import { create } from '@storybook/theming'; +import logo from '../app/images/logo/metamask-logo-horizontal.svg'; + +export default create({ + base: 'light', + brandTitle: 'MetaMask Storybook', + brandImage: logo, +}); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..3f66a651e --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,56 @@ + + + + + From 90b656bd66a38273ba28eebd4ea41663cde7d5e6 Mon Sep 17 00:00:00 2001 From: Olaf Tomalka Date: Thu, 2 Dec 2021 18:22:18 +0100 Subject: [PATCH 008/100] Added SiteOrigin and PermissionList components (#12832) * Changed back button to the one in design * PermissionConnect now uses Chip component * Added SiteOrigin widget * WIP * Added new permission list * Fix linting errors * Removed unused messages * Removed more unused messages * Make SiteOrigin bigger * Fix lint * Code Review fixes * Fix SiteOrigin overflowing * Add stories * Fix lint * Added useMemo to constant * Fix Chip's max-content overflowing SiteOrigin * Fix code review issues Co-authored-by: Olaf Tomalka --- app/_locales/en/messages.json | 8 +--- app/_locales/es/messages.json | 6 --- app/_locales/es_419/messages.json | 6 --- app/_locales/hi/messages.json | 6 --- app/_locales/id/messages.json | 6 --- app/_locales/it/messages.json | 6 --- app/_locales/ja/messages.json | 6 --- app/_locales/ko/messages.json | 6 --- app/_locales/ph/messages.json | 6 --- app/_locales/pt_BR/messages.json | 6 --- app/_locales/ru/messages.json | 6 --- app/_locales/tl/messages.json | 6 --- app/_locales/vi/messages.json | 6 --- app/_locales/zh_CN/messages.json | 6 --- ui/components/app/app-components.scss | 1 + .../app/permission-page-container/index.scss | 1 - ...ission-page-container-content.component.js | 39 ++----------------- .../permission-page-container.component.js | 10 ----- .../app/permissions-connect-header/index.scss | 25 ------------ .../permissions-connect-header.component.js | 5 +-- .../index.js | 1 + .../index.scss | 22 +++++++++++ .../permissions-connect-permission-list.js | 33 ++++++++++++++++ ...issions-connect-permission-list.stories.js | 24 ++++++++++++ ui/components/ui/chip/chip.js | 7 ++++ ui/components/ui/chip/chip.scss | 5 ++- ui/components/ui/site-origin/index.js | 1 + ui/components/ui/site-origin/index.scss | 15 +++++++ ui/components/ui/site-origin/site-origin.js | 22 +++++++++++ .../ui/site-origin/site-origin.stories.js | 30 ++++++++++++++ ui/components/ui/ui-components.scss | 1 + ui/pages/permissions-connect/index.scss | 7 ++-- .../permissions-connect.component.js | 2 +- 33 files changed, 172 insertions(+), 165 deletions(-) create mode 100644 ui/components/app/permissions-connect-permission-list/index.js create mode 100644 ui/components/app/permissions-connect-permission-list/index.scss create mode 100644 ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js create mode 100644 ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.stories.js create mode 100644 ui/components/ui/site-origin/index.js create mode 100644 ui/components/ui/site-origin/index.scss create mode 100644 ui/components/ui/site-origin/site-origin.js create mode 100644 ui/components/ui/site-origin/site-origin.stories.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index e98ed9382..c2b8bf3d6 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -989,7 +989,7 @@ "message": "Backup gas price is provided as the main gas estimation service is unavailable right now." }, "eth_accounts": { - "message": "View the addresses of your permitted accounts (required)", + "message": "See address, account balance, activity and initiate transactions", "description": "The description for the `eth_accounts` permission" }, "ethereumPublicAddress": { @@ -2036,15 +2036,9 @@ "message": "You have (1) pending transaction.", "description": "$1 is count of pending transactions" }, - "permissionCheckedIconDescription": { - "message": "You have approved this permission" - }, "permissionRequest": { "message": "Permission request" }, - "permissionUncheckedIconDescription": { - "message": "You have not approved this permission" - }, "permissions": { "message": "Permissions" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index dfa9b60f3..c285d4ecd 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "Pendiente" }, - "permissionCheckedIconDescription": { - "message": "Aprobó este permiso" - }, - "permissionUncheckedIconDescription": { - "message": "No aprobó este permiso" - }, "permissions": { "message": "Permisos" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index dfa9b60f3..c285d4ecd 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "Pendiente" }, - "permissionCheckedIconDescription": { - "message": "Aprobó este permiso" - }, - "permissionUncheckedIconDescription": { - "message": "No aprobó este permiso" - }, "permissions": { "message": "Permisos" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index eabbe333d..76bcfa33a 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "लंबित" }, - "permissionCheckedIconDescription": { - "message": "आपने इस अनुमति को अनुमोदित कर दिया है" - }, - "permissionUncheckedIconDescription": { - "message": "आपने इस अनुमति को अनुमोदित नहीं किया है" - }, "permissions": { "message": "अनुमतियाँ" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index b3d4f6679..b51c53922 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "Tunda" }, - "permissionCheckedIconDescription": { - "message": "Anda telah menyetujui izin ini" - }, - "permissionUncheckedIconDescription": { - "message": "Anda belum menyetujui izin ini" - }, "permissions": { "message": "Izin" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index 640ad8ba6..2bb25faee 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -1102,12 +1102,6 @@ "pending": { "message": "in corso" }, - "permissionCheckedIconDescription": { - "message": "Hai approvato questo permesso" - }, - "permissionUncheckedIconDescription": { - "message": "Non hai approvato questo permesso" - }, "permissions": { "message": "Permessi" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index cb626fa73..62f1c0687 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "処理" }, - "permissionCheckedIconDescription": { - "message": "この許可の承認が完了しました。" - }, - "permissionUncheckedIconDescription": { - "message": "この許可の承認が完了していません。" - }, "permissions": { "message": "許可" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index b4bcaa6f8..b05424689 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "보류 중" }, - "permissionCheckedIconDescription": { - "message": "이 권한을 승인했습니다." - }, - "permissionUncheckedIconDescription": { - "message": "이 권한을 승인하지 않았습니다." - }, "permissions": { "message": "권한" }, diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json index a821a4374..24a44bde6 100644 --- a/app/_locales/ph/messages.json +++ b/app/_locales/ph/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "Nakabinbin" }, - "permissionCheckedIconDescription": { - "message": "Inaprubahan mo ang pahintulot na ito" - }, - "permissionUncheckedIconDescription": { - "message": "Hindi mo inaprubahan ang pahintulot na ito" - }, "permissions": { "message": "Mga Pahintulot" }, diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json index 6ea9d5a1a..c259784cc 100644 --- a/app/_locales/pt_BR/messages.json +++ b/app/_locales/pt_BR/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "Pendente" }, - "permissionCheckedIconDescription": { - "message": "Você aprovou esta permissão" - }, - "permissionUncheckedIconDescription": { - "message": "Você não aprovou esta permissão" - }, "permissions": { "message": "Permissões" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 9fa8ea319..00aa12c5b 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "В ожидании" }, - "permissionCheckedIconDescription": { - "message": "Вы одобрили это разрешение" - }, - "permissionUncheckedIconDescription": { - "message": "Вы не одобрили это разрешение" - }, "permissions": { "message": "Разрешения" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 0c7649881..b6f6cd465 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -1093,12 +1093,6 @@ "pending": { "message": "Nakabinbin" }, - "permissionCheckedIconDescription": { - "message": "Inaprubahan mo ang pahintulot na ito" - }, - "permissionUncheckedIconDescription": { - "message": "Hindi mo inaprubahan ang pahintulot na ito" - }, "permissions": { "message": "Mga Pahintulot" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 22523a6f0..68ae1575b 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -1343,12 +1343,6 @@ "pending": { "message": "Đang chờ xử lý" }, - "permissionCheckedIconDescription": { - "message": "Bạn đã phê duyệt quyền này" - }, - "permissionUncheckedIconDescription": { - "message": "Bạn chưa phê duyệt quyền này" - }, "permissions": { "message": "Quyền" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 92e09313c..61478c59e 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -1144,12 +1144,6 @@ "pending": { "message": "待处理" }, - "permissionCheckedIconDescription": { - "message": "您已同意该权限" - }, - "permissionUncheckedIconDescription": { - "message": "您还未同意该权限" - }, "permissions": { "message": "权限" }, diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index adf1fe63b..a0bc24e8e 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -32,6 +32,7 @@ @import 'permission-page-container/index'; @import 'permissions-connect-footer/index'; @import 'permissions-connect-header/index'; +@import 'permissions-connect-permission-list/index'; @import 'recovery-phrase-reminder/index'; @import 'step-progress-bar/index.scss'; @import 'selected-account/index'; diff --git a/ui/components/app/permission-page-container/index.scss b/ui/components/app/permission-page-container/index.scss index ffd703e8e..31b0aee83 100644 --- a/ui/components/app/permission-page-container/index.scss +++ b/ui/components/app/permission-page-container/index.scss @@ -23,7 +23,6 @@ } } - &__header { display: flex; flex-direction: column; diff --git a/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js b/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js index 7cacc40c8..dcd5363a1 100644 --- a/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js +++ b/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, { PureComponent } from 'react'; import PermissionsConnectHeader from '../../permissions-connect-header'; import Tooltip from '../../../ui/tooltip'; -import CheckBox from '../../../ui/check-box'; +import PermissionsConnectPermissionList from '../../permissions-connect-permission-list'; export default class PermissionPageContainerContent extends PureComponent { static propTypes = { @@ -14,7 +14,6 @@ export default class PermissionPageContainerContent extends PureComponent { origin: PropTypes.string.isRequired, }), selectedPermissions: PropTypes.object.isRequired, - onPermissionToggle: PropTypes.func.isRequired, selectedIdentities: PropTypes.array, allIdentitiesSelected: PropTypes.bool, }; @@ -29,43 +28,11 @@ export default class PermissionPageContainerContent extends PureComponent { }; renderRequestedPermissions() { - const { selectedPermissions, onPermissionToggle } = this.props; - const { t } = this.context; - - const items = Object.keys(selectedPermissions).map((permissionName) => { - const description = t(permissionName); - // don't allow deselecting eth_accounts - const isDisabled = permissionName === 'eth_accounts'; - const isChecked = Boolean(selectedPermissions[permissionName]); - const title = isChecked - ? t('permissionCheckedIconDescription') - : t('permissionUncheckedIconDescription'); - - return ( -
{ - if (!isDisabled) { - onPermissionToggle(permissionName); - } - }} - > - - -
- ); - }); + const { selectedPermissions } = this.props; return (
- {items} +
); } diff --git a/ui/components/app/permission-page-container/permission-page-container.component.js b/ui/components/app/permission-page-container/permission-page-container.component.js index 2a8daa2f6..6ccd549e1 100644 --- a/ui/components/app/permission-page-container/permission-page-container.component.js +++ b/ui/components/app/permission-page-container/permission-page-container.component.js @@ -62,15 +62,6 @@ export default class PermissionPageContainer extends Component { return Object.keys(props.request.permissions || {}); } - onPermissionToggle = (methodName) => { - this.setState({ - selectedPermissions: { - ...this.state.selectedPermissions, - [methodName]: !this.state.selectedPermissions[methodName], - }, - }); - }; - componentDidMount() { this.context.metricsEvent({ eventOpts: { @@ -129,7 +120,6 @@ export default class PermissionPageContainer extends Component { requestMetadata={requestMetadata} domainMetadata={targetDomainMetadata} selectedPermissions={this.state.selectedPermissions} - onPermissionToggle={this.onPermissionToggle} selectedIdentities={selectedIdentities} allIdentitiesSelected={allIdentitiesSelected} /> diff --git a/ui/components/app/permissions-connect-header/index.scss b/ui/components/app/permissions-connect-header/index.scss index 89297a094..dca87d015 100644 --- a/ui/components/app/permissions-connect-header/index.scss +++ b/ui/components/app/permissions-connect-header/index.scss @@ -9,20 +9,6 @@ display: flex; flex-direction: column; align-items: center; - - .icon-with-fallback__identicon-container, - .icon-with-fallback__identicon-border { - height: 64px; - width: 64px; - } - - .icon-with-fallback__identicon-border { - border: 1px solid $Grey-100; - } - - .icon-with-fallback__identicon-container { - margin-bottom: 8px; - } } &__title { @@ -33,7 +19,6 @@ margin-top: 16px; } - &__text, &__subtitle { @include H6; @@ -41,16 +26,6 @@ color: $Grey-500; } - &__text { - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - margin-top: 8px; - - /*rtl:ignore*/ - direction: rtl; - } - &__subtitle { margin-top: 4px; } diff --git a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js index b0d8920ff..b044a616f 100644 --- a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js +++ b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import SiteIcon from '../../ui/site-icon'; +import SiteOrigin from '../../ui/site-origin/site-origin'; export default class PermissionsConnectHeader extends Component { static propTypes = { @@ -22,8 +22,7 @@ export default class PermissionsConnectHeader extends Component { return (
- -
{siteOrigin}
+
); } diff --git a/ui/components/app/permissions-connect-permission-list/index.js b/ui/components/app/permissions-connect-permission-list/index.js new file mode 100644 index 000000000..0690579c6 --- /dev/null +++ b/ui/components/app/permissions-connect-permission-list/index.js @@ -0,0 +1 @@ +export { default } from './permissions-connect-permission-list'; diff --git a/ui/components/app/permissions-connect-permission-list/index.scss b/ui/components/app/permissions-connect-permission-list/index.scss new file mode 100644 index 000000000..cc58047bd --- /dev/null +++ b/ui/components/app/permissions-connect-permission-list/index.scss @@ -0,0 +1,22 @@ +.permissions-connect-permission-list { + .permission { + @include H6; + + width: 100%; + padding-bottom: 16px; + border-bottom: 1px solid $Grey-100; + display: flex; + flex-direction: row; + align-items: center; + color: $Black-100; + + i { + display: block; + padding: 16px; + min-width: 16px; + min-height: 16px; + color: $Grey-500; + font-size: 1rem; + } + } +} diff --git a/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js new file mode 100644 index 000000000..95ed4e912 --- /dev/null +++ b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js @@ -0,0 +1,33 @@ +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; +import { useI18nContext } from '../../../hooks/useI18nContext'; + +export default function PermissionsConnectPermissionList({ permissions }) { + const t = useI18nContext(); + + const PERMISSION_TYPES = useMemo(() => { + return { + eth_accounts: { + leftIcon: 'fas fa-eye', + label: t('eth_accounts'), + rightIcon: null, + }, + }; + }, [t]); + + return ( +
+ {Object.keys(permissions).map((permission) => ( +
+ + {PERMISSION_TYPES[permission].label} + +
+ ))} +
+ ); +} + +PermissionsConnectPermissionList.propTypes = { + permissions: PropTypes.objectOf(PropTypes.bool).isRequired, +}; diff --git a/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.stories.js b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.stories.js new file mode 100644 index 000000000..4faa6924d --- /dev/null +++ b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.stories.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import PermissionsConnectList from '.'; + +export default { + title: 'Components/App/PermissionsConnectList', + id: __filename, + component: PermissionsConnectList, + argTypes: { + permissions: { + control: 'object', + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; + +DefaultStory.args = { + permissions: { + eth_accounts: true, + }, +}; diff --git a/ui/components/ui/chip/chip.js b/ui/components/ui/chip/chip.js index e23dd8289..f84534535 100644 --- a/ui/components/ui/chip/chip.js +++ b/ui/components/ui/chip/chip.js @@ -16,6 +16,7 @@ export default function Chip({ leftIcon, rightIcon, onClick, + maxContent = true, }) { const onKeyPress = (event) => { if (event.key === 'Enter' && onClick) { @@ -35,6 +36,7 @@ export default function Chip({ 'chip--with-right-icon': Boolean(rightIcon), [`chip--border-color-${borderColor}`]: true, [`chip--background-color-${backgroundColor}`]: true, + 'chip--max-content': maxContent, })} role={isInteractive ? 'button' : undefined} tabIndex={isInteractive ? 0 : undefined} @@ -99,4 +101,9 @@ Chip.propTypes = { * The onClick handler to be passed to the Chip component */ onClick: PropTypes.func, + /** + * If the width: max-content; is used in css. + * max-content can overflow the parent's width and break designs + */ + maxContent: PropTypes.bool, }; diff --git a/ui/components/ui/chip/chip.scss b/ui/components/ui/chip/chip.scss index a52e37afa..17e96d582 100644 --- a/ui/components/ui/chip/chip.scss +++ b/ui/components/ui/chip/chip.scss @@ -9,7 +9,6 @@ margin: 0 4px; display: flex; align-items: center; - width: max-content; &__left-icon, &__right-icon { @@ -63,4 +62,8 @@ margin-right: 8px; } } + + &--max-content { + width: max-content; + } } diff --git a/ui/components/ui/site-origin/index.js b/ui/components/ui/site-origin/index.js new file mode 100644 index 000000000..280ddb249 --- /dev/null +++ b/ui/components/ui/site-origin/index.js @@ -0,0 +1 @@ +export { default } from './site-origin'; diff --git a/ui/components/ui/site-origin/index.scss b/ui/components/ui/site-origin/index.scss new file mode 100644 index 000000000..16b9f0732 --- /dev/null +++ b/ui/components/ui/site-origin/index.scss @@ -0,0 +1,15 @@ +.site-origin { + .chip__left-icon { + padding: 4px 0 4px 8px; + } + + span { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + /*rtl:ignore*/ + direction: rtl; + } +} diff --git a/ui/components/ui/site-origin/site-origin.js b/ui/components/ui/site-origin/site-origin.js new file mode 100644 index 000000000..2dc545a68 --- /dev/null +++ b/ui/components/ui/site-origin/site-origin.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Chip from '../chip'; +import IconWithFallback from '../icon-with-fallback'; + +export default function SiteOrigin({ siteOrigin, iconSrc, iconName }) { + return ( +
+ } + /> +
+ ); +} + +SiteOrigin.propTypes = { + siteOrigin: PropTypes.string.isRequired, + iconName: PropTypes.string, + iconSrc: PropTypes.string, +}; diff --git a/ui/components/ui/site-origin/site-origin.stories.js b/ui/components/ui/site-origin/site-origin.stories.js new file mode 100644 index 000000000..53a11c190 --- /dev/null +++ b/ui/components/ui/site-origin/site-origin.stories.js @@ -0,0 +1,30 @@ +import React from 'react'; + +import SiteOrigin from '.'; + +export default { + title: 'Components/UI/SiteOrigin', + id: __filename, + component: SiteOrigin, + argTypes: { + siteOrigin: { + control: 'text', + }, + iconSrc: { + control: 'text', + }, + iconName: { + control: 'text', + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; + +DefaultStory.args = { + siteOrigin: 'https://metamask.io', + iconName: 'MetaMask', + iconSrc: './metamark.svg', +}; diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss index 34c435acd..30273749e 100644 --- a/ui/components/ui/ui-components.scss +++ b/ui/components/ui/ui-components.scss @@ -45,6 +45,7 @@ @import 'readonly-input/index'; @import 'sender-to-recipient/index'; @import 'snackbar/index'; +@import 'site-origin/index'; @import 'slider/index'; @import 'tabs/index'; @import 'toggle-button/index'; diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss index 197764b8e..716702921 100644 --- a/ui/pages/permissions-connect/index.scss +++ b/ui/pages/permissions-connect/index.scss @@ -24,9 +24,10 @@ } &__back { - @include H6; + @include H7; - color: $Grey-600; + color: $Grey-500; + font-weight: bold; cursor: pointer; i { @@ -37,7 +38,7 @@ &__page-count { @include H7; - color: #6a737d; + color: $Grey-500; grid-column: 2; justify-self: end; font-weight: bold; diff --git a/ui/pages/permissions-connect/permissions-connect.component.js b/ui/pages/permissions-connect/permissions-connect.component.js index 9a487dad3..996ddd383 100644 --- a/ui/pages/permissions-connect/permissions-connect.component.js +++ b/ui/pages/permissions-connect/permissions-connect.component.js @@ -174,7 +174,7 @@ export default class PermissionConnect extends Component { className="permissions-connect__back" onClick={() => this.goBack()} > - + {t('back')}
) : null} From fac68980e0f50255bf969d842abaf06c80299ebe Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Thu, 2 Dec 2021 14:39:18 -0330 Subject: [PATCH 009/100] Fix signature request propTypes (#12952) There were two propType errors in the signature request and signature request footer components. A boolean was wrongly declared as a function, and that same boolean was later declared with an invalid propType (`PropTypes.boolean` rather than `PropTypes.bool`). Both errors have been fixed. --- .../signature-request-footer.component.js | 2 +- .../app/signature-request/signature-request.component.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js b/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js index 37df2a177..a42e4f2ae 100644 --- a/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js +++ b/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js @@ -6,7 +6,7 @@ export default class SignatureRequestFooter extends PureComponent { static propTypes = { cancelAction: PropTypes.func.isRequired, signAction: PropTypes.func.isRequired, - disabled: PropTypes.boolean, + disabled: PropTypes.bool, }; static contextTypes = { diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js index 4acfac4c0..44c0f38bd 100644 --- a/ui/components/app/signature-request/signature-request.component.js +++ b/ui/components/app/signature-request/signature-request.component.js @@ -17,7 +17,7 @@ export default class SignatureRequest extends PureComponent { isLedgerWallet: PropTypes.bool, cancel: PropTypes.func.isRequired, sign: PropTypes.func.isRequired, - hardwareWalletRequiresConnection: PropTypes.func.isRequired, + hardwareWalletRequiresConnection: PropTypes.bool.isRequired, }; static contextTypes = { From 7226357422d727cb10b42e749eb3e9b47adaaa4c Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Thu, 2 Dec 2021 14:46:46 -0330 Subject: [PATCH 010/100] Fix `isMainnet` propType error (#12951) A propType error was showing up during e2e tests with a `testDev` build. It was caused by `process.env.IN_TEST` being treated as a boolean, when in fact it is either the string `'true'` or a boolean. `IN_TEST` has been updated to always be a boolean. `loose-envify` has no trouble injecting boolean values, so there's no reason to treat this as a string. --- app/scripts/background.js | 2 +- app/scripts/controllers/network/createJsonRpcClient.js | 2 +- app/scripts/controllers/network/network.js | 2 +- development/build/scripts.js | 2 +- .../app/edit-gas-fee-popover/edit-gas-fee-popover.js | 2 +- .../app/edit-gas-popover/edit-gas-popover.component.js | 2 +- ui/helpers/utils/i18n-helper.js | 2 +- .../confirm-transaction-base.component.js | 2 +- .../gas-details-item/gas-details-item.js | 3 +-- ui/pages/import-token/import-token.container.js | 4 +--- 10 files changed, 10 insertions(+), 13 deletions(-) diff --git a/app/scripts/background.js b/app/scripts/background.js index ed546dc26..f5ae0ae15 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -56,7 +56,7 @@ const openMetamaskTabsIDs = {}; const requestAccountTabIds = {}; // state persistence -const inTest = process.env.IN_TEST === 'true'; +const inTest = process.env.IN_TEST; const localStore = inTest ? new ReadOnlyNetworkStore() : new LocalStore(); let versionedData; diff --git a/app/scripts/controllers/network/createJsonRpcClient.js b/app/scripts/controllers/network/createJsonRpcClient.js index f4ca59157..d4e412b8f 100644 --- a/app/scripts/controllers/network/createJsonRpcClient.js +++ b/app/scripts/controllers/network/createJsonRpcClient.js @@ -10,7 +10,7 @@ import { import { PollingBlockTracker } from 'eth-block-tracker'; import { SECOND } from '../../../../shared/constants/time'; -const inTest = process.env.IN_TEST === 'true'; +const inTest = process.env.IN_TEST; const blockTrackerOpts = inTest ? { pollingInterval: SECOND } : {}; const getTestMiddlewares = () => { return inTest ? [createEstimateGasDelayTestMiddleware()] : []; diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js index 9423c6a80..10fd9f824 100644 --- a/app/scripts/controllers/network/network.js +++ b/app/scripts/controllers/network/network.js @@ -33,7 +33,7 @@ const env = process.env.METAMASK_ENV; const fetchWithTimeout = getFetchWithTimeout(SECOND * 30); let defaultProviderConfigOpts; -if (process.env.IN_TEST === 'true') { +if (process.env.IN_TEST) { defaultProviderConfigOpts = { type: NETWORK_TYPE_RPC, rpcUrl: 'http://localhost:8545', diff --git a/development/build/scripts.js b/development/build/scripts.js index cf49dd302..c0b83b1a2 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -779,7 +779,7 @@ function getEnvironmentVariables({ buildType, devMode, testing }) { METAMASK_VERSION: version, METAMASK_BUILD_TYPE: buildType, NODE_ENV: devMode ? ENVIRONMENT.DEVELOPMENT : ENVIRONMENT.PRODUCTION, - IN_TEST: testing ? 'true' : false, + IN_TEST: testing, PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '', PUBNUB_PUB_KEY: process.env.PUBNUB_PUB_KEY || '', CONF: devMode ? metamaskrc : {}, diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js index 1f6037c26..fe4480f10 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js @@ -29,7 +29,7 @@ const EditGasFeePopover = () => { className="edit-gas-fee-popover" > <> - {process.env.IN_TEST === 'true' ? null : } + {process.env.IN_TEST ? null : }
{balanceError && ( diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js index 60b73d170..314627cec 100644 --- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js +++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js @@ -261,7 +261,7 @@ export default function EditGasPopover({ ) : ( <> - {process.env.IN_TEST === 'true' ? null : } + {process.env.IN_TEST ? null : } { ); Sentry.captureException(missingMessageErrors[key]); log.error(missingMessageErrors[key]); - if (process.env.IN_TEST === 'true') { + if (process.env.IN_TEST) { throw missingMessageErrors[key]; } } diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index 39ae8bd59..976bbeb3e 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -68,7 +68,7 @@ const EIP_1559_V2_ENABLED = process.env.EIP_1559_V2 === true || process.env.EIP_1559_V2 === 'true'; const renderHeartBeatIfNotInTest = () => - process.env.IN_TEST === 'true' ? null : ; + process.env.IN_TEST ? null : ; export default class ConfirmTransactionBase extends Component { static contextTypes = { diff --git a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js index 72f9a780e..2cdf2c5ea 100644 --- a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js +++ b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js @@ -17,8 +17,7 @@ import TransactionDetailItem from '../../../components/app/transaction-detail-it import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display'; import { useGasFeeContext } from '../../../contexts/gasFee'; -const HeartBeat = () => - process.env.IN_TEST === 'true' ? null : ; +const HeartBeat = () => (process.env.IN_TEST ? null : ); const GasDetailsItem = ({ hexMaximumTransactionFee, diff --git a/ui/pages/import-token/import-token.container.js b/ui/pages/import-token/import-token.container.js index 007fa84a5..f6fa265f1 100644 --- a/ui/pages/import-token/import-token.container.js +++ b/ui/pages/import-token/import-token.container.js @@ -22,9 +22,7 @@ const mapStateToProps = (state) => { const showSearchTabCustomNetwork = useTokenDetection && Boolean(Object.keys(tokenList).length); const showSearchTab = - getIsMainnet(state) || - showSearchTabCustomNetwork || - process.env.IN_TEST === 'true'; + getIsMainnet(state) || showSearchTabCustomNetwork || process.env.IN_TEST; return { identities, mostRecentOverviewPage: getMostRecentOverviewPage(state), From bb312c2818871d1c6a01dd489610fcd3aa7fcab6 Mon Sep 17 00:00:00 2001 From: PeterYinusa <53189696+PeterYinusa@users.noreply.github.com> Date: Thu, 2 Dec 2021 18:28:24 +0000 Subject: [PATCH 011/100] update selenium-webdriver to v4.1.0 (#12922) * update selenium-webdriver to v4.1.0 * fix tests --- package.json | 2 +- .../selenium-webdriver+4.0.0-alpha.7.patch | 19 ---------- test/e2e/tests/address-book.spec.js | 2 +- test/e2e/tests/metamask-responsive-ui.spec.js | 2 +- test/e2e/tests/send-eth.spec.js | 6 ++-- yarn.lock | 36 +++++++++---------- 6 files changed, 24 insertions(+), 43 deletions(-) delete mode 100644 patches/selenium-webdriver+4.0.0-alpha.7.patch diff --git a/package.json b/package.json index 9dcec5e9a..d168e0043 100644 --- a/package.json +++ b/package.json @@ -335,7 +335,7 @@ "resolve-url-loader": "^3.1.2", "sass": "^1.32.4", "sass-loader": "^10.1.1", - "selenium-webdriver": "4.0.0-alpha.7", + "selenium-webdriver": "^4.1.0", "semver": "^7.3.5", "serve-handler": "^6.1.2", "sinon": "^9.0.0", diff --git a/patches/selenium-webdriver+4.0.0-alpha.7.patch b/patches/selenium-webdriver+4.0.0-alpha.7.patch deleted file mode 100644 index 53144785b..000000000 --- a/patches/selenium-webdriver+4.0.0-alpha.7.patch +++ /dev/null @@ -1,19 +0,0 @@ -diff --git a/node_modules/selenium-webdriver/chromium.js b/node_modules/selenium-webdriver/chromium.js -index d828ce5..87176f4 100644 ---- a/node_modules/selenium-webdriver/chromium.js -+++ b/node_modules/selenium-webdriver/chromium.js -@@ -197,6 +197,14 @@ class ServiceBuilder extends remote.DriverService.Builder { - return this.addArguments('--log-path=' + path); - } - -+ /** -+ * Enables Chrome logging. -+ * @returns {!ServiceBuilder} A self reference. -+ */ -+ enableChromeLogging() { -+ return this.addArguments('--enable-chrome-logs'); -+ } -+ - /** - * Enables verbose logging. - * @return {!ServiceBuilder} A self reference. diff --git a/test/e2e/tests/address-book.spec.js b/test/e2e/tests/address-book.spec.js index 1468c5734..707c72e00 100644 --- a/test/e2e/tests/address-book.spec.js +++ b/test/e2e/tests/address-book.spec.js @@ -50,7 +50,7 @@ describe('Address Book', function () { const inputAmount = await driver.findElement('.unit-input__input'); await inputAmount.fill('1'); - const inputValue = await inputAmount.getAttribute('value'); + const inputValue = await inputAmount.getProperty('value'); assert.equal(inputValue, '1'); await driver.clickElement({ text: 'Next', tag: 'button' }); diff --git a/test/e2e/tests/metamask-responsive-ui.spec.js b/test/e2e/tests/metamask-responsive-ui.spec.js index adb5ad644..dc50fc9cd 100644 --- a/test/e2e/tests/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/metamask-responsive-ui.spec.js @@ -226,7 +226,7 @@ describe('Metamask Responsive UI', function () { const inputAmount = await driver.fill('.unit-input__input', '1'); - const inputValue = await inputAmount.getAttribute('value'); + const inputValue = await inputAmount.getProperty('value'); assert.equal(inputValue, '1'); // confirming transcation diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js index 1fbebfaa7..7d88f121a 100644 --- a/test/e2e/tests/send-eth.spec.js +++ b/test/e2e/tests/send-eth.spec.js @@ -52,7 +52,7 @@ describe('Send ETH from inside MetaMask using default gas', function () { ); await amountMax.click(); - let inputValue = await inputAmount.getAttribute('value'); + let inputValue = await inputAmount.getProperty('value'); assert(Number(inputValue) > 24); @@ -62,7 +62,7 @@ describe('Send ETH from inside MetaMask using default gas', function () { await inputAmount.fill('1'); - inputValue = await inputAmount.getAttribute('value'); + inputValue = await inputAmount.getProperty('value'); assert.equal(inputValue, '1'); // Continue to next screen @@ -119,7 +119,7 @@ describe('Send ETH from inside MetaMask using advanced gas modal', function () { const inputAmount = await driver.findElement('.unit-input__input'); await inputAmount.fill('1'); - const inputValue = await inputAmount.getAttribute('value'); + const inputValue = await inputAmount.getProperty('value'); assert.equal(inputValue, '1'); // Continue to next screen diff --git a/yarn.lock b/yarn.lock index 2b29606e0..ec5a26d39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17261,7 +17261,7 @@ jss@^10.0.3, jss@^10.3.0: array-includes "^3.1.2" object.assign "^4.1.2" -jszip@^3.2.2: +jszip@^3.6.0: version "3.7.1" resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.1.tgz#bd63401221c15625a1228c556ca8a68da6fda3d9" integrity sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg== @@ -20984,7 +20984,7 @@ os-locale@^3.1.0: lcid "^2.0.0" mem "^4.0.0" -os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2: +os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= @@ -24427,7 +24427,7 @@ rimraf@2.6.3, rimraf@~2.6.2: dependencies: glob "^7.1.3" -rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3, rimraf@^2.7.1: +rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== @@ -24873,14 +24873,14 @@ select@^1.1.2: resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= -selenium-webdriver@4.0.0-alpha.7: - version "4.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz#e3879d8457fd7ad8e4424094b7dc0540d99e6797" - integrity sha512-D4qnTsyTr91jT8f7MfN+OwY0IlU5+5FmlO5xlgRUV6hDEV8JyYx2NerdTEqDDkNq7RZDYc4VoPALk8l578RBHw== +selenium-webdriver@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.1.0.tgz#d11e5d43674e2718265a30684bcbf6ec734fd3bd" + integrity sha512-kUDH4N8WruYprTzvug4Pl73Th+WKb5YiLz8z/anOpHyUNUdM3UzrdTOxmSNaf9AczzBeY+qXihzku8D1lMaKOg== dependencies: - jszip "^3.2.2" - rimraf "^2.7.1" - tmp "0.0.30" + jszip "^3.6.0" + tmp "^0.2.1" + ws ">=7.4.6" semaphore@>=1.0.1, semaphore@^1.0.3, semaphore@^1.1.0: version "1.1.0" @@ -26871,13 +26871,6 @@ title-case@^2.1.0: no-case "^2.2.0" upper-case "^1.0.3" -tmp@0.0.30: - version "0.0.30" - resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed" - integrity sha1-ckGdSovn1s51FI/YsyTlk6cRwu0= - dependencies: - os-tmpdir "~1.0.1" - tmp@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877" @@ -26892,6 +26885,13 @@ tmp@^0.0.33: dependencies: os-tmpdir "~1.0.2" +tmp@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" + integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ== + dependencies: + rimraf "^3.0.0" + tmpl@1.0.x: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -28880,7 +28880,7 @@ write@^0.2.1: dependencies: mkdirp "^0.5.1" -ws@7.1.0, ws@7.4.6, ws@^1.1.0, ws@^3.0.0, ws@^5.1.1, ws@^7, ws@^7.2.0, ws@^7.4.0, ws@^7.4.6, ws@~7.4.2, ws@~8.2.3: +ws@7.1.0, ws@7.4.6, ws@>=7.4.6, ws@^1.1.0, ws@^3.0.0, ws@^5.1.1, ws@^7, ws@^7.2.0, ws@^7.4.0, ws@^7.4.6, ws@~7.4.2, ws@~8.2.3: version "7.4.6" resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c" integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A== From 3fb5fcdb2370138124b0cb3094804bd0b23b04d7 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 2 Dec 2021 14:04:02 -1000 Subject: [PATCH 012/100] Lavamoat Devx - update lavamoat-browserify for policy reload on change (#12940) * deps - update lavamoat-browserify for policy reload * lavamoat/build-system - add missing policy for lavamoat-browserify --- lavamoat/build-system/policy.json | 3 ++- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/lavamoat/build-system/policy.json b/lavamoat/build-system/policy.json index e7cf27f5e..962afed61 100644 --- a/lavamoat/build-system/policy.json +++ b/lavamoat/build-system/policy.json @@ -3128,7 +3128,8 @@ }, "globals": { "console.warn": true, - "process.cwd": true + "process.cwd": true, + "setTimeout": true }, "packages": { "@lavamoat/lavapack": true, diff --git a/package.json b/package.json index d168e0043..3ff13c7d6 100644 --- a/package.json +++ b/package.json @@ -311,7 +311,7 @@ "jsdom": "^11.2.0", "koa": "^2.7.0", "lavamoat": "^5.3.5", - "lavamoat-browserify": "^14.0.3", + "lavamoat-browserify": "^14.1.0", "lavamoat-viz": "^6.0.9", "lockfile-lint": "^4.0.0", "loose-envify": "^1.4.0", diff --git a/yarn.lock b/yarn.lock index ec5a26d39..9e4041f59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17516,10 +17516,10 @@ latest-version@^5.0.0: dependencies: package-json "^6.3.0" -lavamoat-browserify@^14.0.3: - version "14.0.3" - resolved "https://registry.yarnpkg.com/lavamoat-browserify/-/lavamoat-browserify-14.0.3.tgz#1f179ec34f18a433f6c8348d5e271b6a8e58bc09" - integrity sha512-TFRW6BV1n980g6rcKq90rjYyIbGumATc/7y6//qRXXBUSxRKAvTmyzVE19kNS5xdhWPlneDddf+YOZLwI8n1Gw== +lavamoat-browserify@^14.1.0: + version "14.1.0" + resolved "https://registry.yarnpkg.com/lavamoat-browserify/-/lavamoat-browserify-14.1.0.tgz#bfe11d83e1c4cab295f87a0446c8f5ece7a3b20e" + integrity sha512-Q6DaR5ETmvUkrPnW6p1bXrDZxFh1eJr8aJB903iDozAYT6ftbHnvZL8pOCvCt80LW6Tj72I+tlbo0Ig9xjEzyA== dependencies: "@lavamoat/lavapack" "^2.0.3" JSONStream "^1.3.5" From 91af73b211f57754ea9d53cc6ef2dc69dd6eeee8 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Fri, 3 Dec 2021 11:22:14 -0330 Subject: [PATCH 013/100] Remove invalid `disableRipple` prop (#12948) The `disableRipple` prop was resulting in a React error in development builds because it was unrecognized by React. This prop dates back to when we were using the `@material-ui` Button class. It no longer serves any purpose, so it has been removed. --- ui/pages/unlock-page/unlock-page.component.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index f7323d4c4..a0bcedb94 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/ui/pages/unlock-page/unlock-page.component.js @@ -126,7 +126,6 @@ export default class UnlockPage extends Component { variant="contained" size="large" onClick={this.handleSubmit} - disableRipple > {this.context.t('unlock')} From 56c91262e9c00c021a2d33bb74cd024a9a58eb1a Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Fri, 3 Dec 2021 11:22:43 -0330 Subject: [PATCH 014/100] Disable React dev tools in `testDev` builds (#12955) The React dev tools can result in console errors if dev tools is not open during the test. Some of our e2e tests fail if there are any console errors, so these errors break those tests. `react-devtools` has been completely disabled for `testDev` builds to make debugging e2e tests easier. The React dev tools can still be used from development builds. --- development/build/scripts.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/development/build/scripts.js b/development/build/scripts.js index c0b83b1a2..f42cfc091 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -366,6 +366,7 @@ function createFactoredBuild({ minify, reloadOnChange, shouldLintFenceFiles, + testing, }); // set bundle entries @@ -543,6 +544,7 @@ function createNormalBundle({ minify, reloadOnChange, shouldLintFenceFiles, + testing, }); // set bundle entries @@ -599,6 +601,7 @@ function setupBundlerDefaults( minify, reloadOnChange, shouldLintFenceFiles, + testing, }, ) { const { bundlerOpts } = buildConfiguration; @@ -620,7 +623,7 @@ function setupBundlerDefaults( }); // Ensure react-devtools are not included in non-dev builds - if (!devMode) { + if (!devMode || testing) { bundlerOpts.manualIgnore.push('react-devtools'); } From 6542d163496444ef40a81c3cdc1effc2786a3926 Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Fri, 3 Dec 2021 09:44:23 -0600 Subject: [PATCH 015/100] 1559 v2 tooltips (#12750) * add tooltips --- app/_locales/en/messages.json | 23 +++ app/images/curve-high.svg | 1 + app/images/curve-low.svg | 1 + app/images/curve-medium.svg | 1 + ui/components/app/app-components.scss | 1 + .../edit-gas-item/edit-gas-item.js | 19 ++- .../edit-gas-tooltip/edit-gas-tooltip.js | 142 ++++++++++++++++++ .../edit-gas-tooltip/edit-gas-tooltip.test.js | 97 ++++++++++++ .../edit-gas-tooltip/index.scss | 53 +++++++ ui/css/design-system/colors.scss | 1 + ui/helpers/constants/design-system.js | 1 + 11 files changed, 337 insertions(+), 3 deletions(-) create mode 100644 app/images/curve-high.svg create mode 100644 app/images/curve-low.svg create mode 100644 app/images/curve-medium.svg create mode 100644 ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js create mode 100644 ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js create mode 100644 ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index c2b8bf3d6..0be730249 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -637,6 +637,10 @@ "customGas": { "message": "Customize Gas" }, + "customGasSettingToolTipMessage": { + "message": "Use $1 to customise the gas price. This can be confusing if you aren’t familiar. Interact at your own risk.", + "description": "$1 is key 'advanced' (text: 'Advanced') separated here so that it can be passed in with bold fontweight" + }, "customGasSubTitle": { "message": "Increasing fee may decrease processing times, but it is not guaranteed." }, @@ -649,6 +653,10 @@ "dappSuggested": { "message": "Site suggested" }, + "dappSuggestedGasSettingToolTipMessage": { + "message": "$1 has suggested this price.", + "description": "$1 is url for the dapp that has suggested gas settings" + }, "dappSuggestedShortLabel": { "message": "Site" }, @@ -1258,6 +1266,13 @@ "high": { "message": "Aggressive" }, + "highGasSettingToolTipDialog": { + "message": "High probability, even in volatile markets" + }, + "highGasSettingToolTipMessage": { + "message": "Use $1 to cover surges in network traffic due to things like popular NFT drops.", + "description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight" + }, "history": { "message": "History" }, @@ -1513,6 +1528,10 @@ "low": { "message": "Low" }, + "lowGasSettingToolTipMessage": { + "message": "Use $1 to wait for a cheaper price. Time estimates are much less accurate as prices are somewhat unpredicible.", + "description": "$1 is key 'low' separated here so that it can be passed in with bold fontweight" + }, "lowPriorityMessage": { "message": "Future transactions will queue after this one. This price was last seen was some time ago." }, @@ -1541,6 +1560,10 @@ "medium": { "message": "Market" }, + "mediumGasSettingToolTipMessage": { + "message": "Use $1 for fast processing at current market price.", + "description": "$1 is key 'medium' (text: 'Market') separated here so that it can be passed in with bold fontweight" + }, "memo": { "message": "memo" }, diff --git a/app/images/curve-high.svg b/app/images/curve-high.svg new file mode 100644 index 000000000..f5c918636 --- /dev/null +++ b/app/images/curve-high.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/curve-low.svg b/app/images/curve-low.svg new file mode 100644 index 000000000..fee21216e --- /dev/null +++ b/app/images/curve-low.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/curve-medium.svg b/app/images/curve-medium.svg new file mode 100644 index 000000000..c3cc1d2aa --- /dev/null +++ b/app/images/curve-medium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index a0bc24e8e..dae43943a 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -18,6 +18,7 @@ @import 'edit-gas-fee-popover/network-status/index'; @import 'edit-gas-fee-popover/network-status/status-slider/index'; @import 'flask/snaps-authorship-pill/index'; +@import 'edit-gas-fee-popover/edit-gas-tooltip/index'; @import 'gas-customization/gas-modal-page-container/index'; @import 'gas-customization/gas-price-button-group/index'; @import 'gas-customization/index'; diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js index 7cd7aa281..47c0e5b66 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js @@ -18,9 +18,10 @@ import { useGasFeeContext } from '../../../../contexts/gasFee'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useTransactionModalContext } from '../../../../contexts/transaction-modal'; import I18nValue from '../../../ui/i18n-value'; -import InfoTooltip from '../../../ui/info-tooltip'; import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'; +import EditGasToolTip from '../edit-gas-tooltip/edit-gas-tooltip'; +import InfoTooltip from '../../../ui/info-tooltip'; import { useCustomTimeEstimate } from './useCustomTimeEstimate'; const EditGasItem = ({ priorityLevel }) => { @@ -43,6 +44,8 @@ const EditGasItem = ({ priorityLevel }) => { if (gasFeeEstimates?.[priorityLevel]) { maxFeePerGas = gasFeeEstimates[priorityLevel].suggestedMaxFeePerGas; + maxPriorityFeePerGas = + gasFeeEstimates[priorityLevel].suggestedMaxPriorityFeePerGas; } else if ( priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED && dappSuggestedGasFees @@ -144,8 +147,18 @@ const EditGasItem = ({ priorityLevel }) => { '--' )} - - + + + } + position="top" + /> ); diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js new file mode 100644 index 000000000..b04344e3f --- /dev/null +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js @@ -0,0 +1,142 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { PRIORITY_LEVELS } from '../../../../../shared/constants/gas'; +import { + COLORS, + FONT_WEIGHT, +} from '../../../../helpers/constants/design-system'; +import Typography from '../../../ui/typography'; +import { useGasFeeContext } from '../../../../contexts/gasFee'; + +const EditGasToolTip = ({ + priorityLevel, + // maxFeePerGas & maxPriorityFeePerGas are derived from conditional logic + // related to the source of the estimates. We pass these values from the + // the parent component (edit-gas-item) rather than recalculate them + maxFeePerGas, + maxPriorityFeePerGas, + t, +}) => { + const { + gasLimit, + maxFeePerGas: maxFeePerGasValue, + maxPriorityFeePerGas: maxPriorityFeePerGasValue, + transaction, + } = useGasFeeContext(); + + const toolTipMessage = () => { + switch (priorityLevel) { + case PRIORITY_LEVELS.LOW: + return t('lowGasSettingToolTipMessage', [ + + {t('low')} + , + ]); + case PRIORITY_LEVELS.MEDIUM: + return t('mediumGasSettingToolTipMessage', [ + + {t('medium')} + , + ]); + case PRIORITY_LEVELS.HIGH: + return t('highGasSettingToolTipMessage', [ + + {t('high')} + , + ]); + case PRIORITY_LEVELS.CUSTOM: + return t('customGasSettingToolTipMessage', [ + + {t('custom')} + , + ]); + case PRIORITY_LEVELS.DAPP_SUGGESTED: + return transaction?.origin + ? t('dappSuggestedGasSettingToolTipMessage', [ + {transaction?.origin}, + ]) + : null; + default: + return ''; + } + }; + return ( +
+ {priorityLevel !== PRIORITY_LEVELS.CUSTOM && + priorityLevel !== PRIORITY_LEVELS.DAPP_SUGGESTED ? ( + + ) : null} + {priorityLevel === PRIORITY_LEVELS.HIGH ? ( +
+ + {t('highGasSettingToolTipDialog')} + +
+ ) : null} +
+ {toolTipMessage()} +
+ {priorityLevel === PRIORITY_LEVELS.CUSTOM ? null : ( +
+
+ + {t('maxBaseFee')} + + + {maxFeePerGas ?? maxFeePerGasValue} + +
+
+ + {t('priorityFee')} + + + {maxPriorityFeePerGas ?? maxPriorityFeePerGasValue} + +
+
+ + {t('gasLimit')} + + + {gasLimit} + +
+
+ )} +
+ ); +}; + +EditGasToolTip.propTypes = { + priorityLevel: PropTypes.string, + maxFeePerGas: PropTypes.string, + maxPriorityFeePerGas: PropTypes.string, + t: PropTypes.func, +}; + +export default EditGasToolTip; diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js new file mode 100644 index 000000000..23f7188ed --- /dev/null +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js @@ -0,0 +1,97 @@ +import React from 'react'; +import configureStore from '../../../../store/store'; +import { renderWithProvider } from '../../../../../test/jest'; +import { GasFeeContextProvider } from '../../../../contexts/gasFee'; +import EditGasToolTip from './edit-gas-tooltip'; + +jest.mock('../../../../store/actions', () => ({ + disconnectGasFeeEstimatePoller: jest.fn(), + getGasFeeEstimatesAndStartPolling: jest + .fn() + .mockImplementation(() => Promise.resolve()), + addPollingTokenToAppState: jest.fn(), + getGasFeeTimeEstimate: jest + .fn() + .mockImplementation(() => Promise.resolve('unknown')), +})); + +const LOW_GAS_OPTION = { + maxFeePerGas: '2.010203381', + maxPriorityFeePerGas: '1.20004164', +}; + +const MEDIUM_GAS_OPTION = { + maxFeePerGas: '2.383812808', + maxPriorityFeePerGas: '1.5', +}; + +const HIGH_GAS_OPTION = { + maxFeePerGas: '2.920638342', + maxPriorityFeePerGas: '2', +}; + +const renderComponent = (props, transactionProps, gasFeeContextProps) => { + const mockStore = { + metamask: { + provider: {}, + cachedBalances: {}, + accounts: { + '0xAddress': { + address: '0xAddress', + balance: '0x176e5b6f173ebe66', + }, + }, + selectedAddress: '0xAddress', + featureFlags: { advancedInlineGas: true }, + advancedGasFee: { + maxBaseFee: '1.5', + priorityFee: '2', + }, + }, + }; + + const store = configureStore(mockStore); + + return renderWithProvider( + + + , + store, + ); +}; + +describe('EditGasToolTip', () => { + it('should render correct values for priorityLevel low', () => { + const { queryByText } = renderComponent({ + priorityLevel: 'low', + ...LOW_GAS_OPTION, + }); + + expect(queryByText('2.010203381')).toBeInTheDocument(); + expect(queryByText('1.20004164')).toBeInTheDocument(); + expect(queryByText('21000')).toBeInTheDocument(); + }); + + it('should render correct values for priorityLevel medium', () => { + const { queryByText } = renderComponent({ + priorityLevel: 'medium', + ...MEDIUM_GAS_OPTION, + }); + expect(queryByText('2.383812808')).toBeInTheDocument(); + expect(queryByText('1.5')).toBeInTheDocument(); + expect(queryByText('21000')).toBeInTheDocument(); + }); + + it('should render correct values for priorityLevel high', () => { + const { queryByText } = renderComponent({ + priorityLevel: 'high', + ...HIGH_GAS_OPTION, + }); + expect(queryByText('2.920638342')).toBeInTheDocument(); + expect(queryByText('2')).toBeInTheDocument(); + expect(queryByText('21000')).toBeInTheDocument(); + }); +}); diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss new file mode 100644 index 000000000..d3d4bc9f0 --- /dev/null +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss @@ -0,0 +1,53 @@ +.edit-gas-tooltip { + display: inline-block; + text-align: right; + width: 10%; + + &__container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; + + img { + margin-bottom: 8px; + } + + &__message { + width: 100%; + } + + &__dialog { + background-color: $Orange-500; + border-radius: 30px; + margin: 4px 0; + text-align: center; + padding: 4px; + } + + &__label { + width: 50%; + } + + &__value { + width: 50%; + } + + p { + margin-bottom: 0 !important; + } + + &__values { + width: 100%; + margin-top: 8px; + + div { + display: flex; + flex-direction: row; + text-align: left; + } + } + } +} diff --git a/ui/css/design-system/colors.scss b/ui/css/design-system/colors.scss index b66c07690..e8b7bd56a 100644 --- a/ui/css/design-system/colors.scss +++ b/ui/css/design-system/colors.scss @@ -122,6 +122,7 @@ $color-map: ( 'white': $ui-white, 'black': $ui-black, 'grey': $ui-grey, + 'neutral-grey': $neutral-grey, 'primary-1': $primary-1, 'primary-2': $primary-2, 'primary-3': $primary-3, diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js index ae26f9d28..42a67b06b 100644 --- a/ui/helpers/constants/design-system.js +++ b/ui/helpers/constants/design-system.js @@ -11,6 +11,7 @@ export const COLORS = { UI4: 'ui-4', BLACK: 'black', GREY: 'grey', + NEUTRAL_GREY: 'neutral-grey', WHITE: 'white', PRIMARY1: 'primary-1', PRIMARY2: 'primary-2', From cd4ddffd9c51c7fb1dac6479f4f2b167cf819aaa Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Fri, 3 Dec 2021 21:29:48 +0530 Subject: [PATCH 016/100] Adding gas limit section on advance gas fee modal (#12865) --- app/_locales/en/messages.json | 3 + .../advanced-gas-fee-gas-limit.js | 67 ++++++++++++++++++ .../advanced-gas-fee-gas-limit.test.js | 68 +++++++++++++++++++ .../advanced-gas-fee-gas-limit/index.js | 1 + .../advanced-gas-fee-gas-limit/index.scss | 14 ++++ .../advanced-gas-fee-popover.js | 5 +- .../advanced-gas-fee-save.js | 12 ++-- .../context/advanceGasFeePopover.js | 3 + .../app/advanced-gas-fee-popover/index.scss | 4 ++ ui/components/app/app-components.scss | 1 + .../edit-gas-fee-popover.js | 5 +- .../edit-gas-item/edit-gas-item.js | 2 +- .../edit-gas-item/edit-gas-item.test.js | 2 +- .../edit-gas-item/index.scss | 2 +- .../network-status/network-status.js | 9 ++- .../app/gas-timing/gas-timing.component.js | 4 +- .../app/transaction-detail/index.scss | 14 +++- .../transaction-detail.component.js | 33 ++++++--- ui/components/ui/typography/typography.js | 3 - ui/components/ui/typography/typography.scss | 6 -- ui/css/design-system/attributes.scss | 1 - ui/hooks/gasFeeInput/useGasFeeInputs.js | 31 +++++---- ui/hooks/gasFeeInput/useMaxFeePerGasInput.js | 6 +- .../useMaxPriorityFeePerGasInput.js | 6 +- .../gasFeeInput/useTransactionFunctions.js | 27 +++++--- .../confirm-transaction-base.component.js | 17 +++-- .../gas-details-item/gas-details-item.js | 8 +-- .../transaction-alerts/transaction-alerts.js | 13 +++- 28 files changed, 283 insertions(+), 84 deletions(-) create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js create mode 100644 ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0be730249..f00a10f6a 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1132,6 +1132,9 @@ "message": "Gas limit must be at least $1", "description": "$1 is the custom gas limit, in decimal." }, + "gasLimitV2": { + "message": "Gas limit" + }, "gasOption": { "message": "Gas option" }, diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js new file mode 100644 index 000000000..4c60cc8fe --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.js @@ -0,0 +1,67 @@ +import React, { useEffect, useState } from 'react'; + +import { useGasFeeContext } from '../../../../contexts/gasFee'; +import { TYPOGRAPHY } from '../../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import Box from '../../../ui/box'; +import Button from '../../../ui/button'; +import FormField from '../../../ui/form-field'; +import I18nValue from '../../../ui/i18n-value'; +import Typography from '../../../ui/typography'; + +import { useAdvanceGasFeePopoverContext } from '../context'; + +const AdvancedGasFeeGasLimit = () => { + const t = useI18nContext(); + const { + setDirty, + setGasLimit: setGasLimitInContext, + } = useAdvanceGasFeePopoverContext(); + const { gasLimit: gasLimitInTransaction } = useGasFeeContext(); + const [isEditing, setEditing] = useState(false); + const [gasLimit, setGasLimit] = useState(gasLimitInTransaction); + + const updateGasLimit = (value) => { + setGasLimit(value); + setDirty(true); + }; + + useEffect(() => { + setGasLimitInContext(gasLimit); + }, [gasLimit, setGasLimitInContext]); + + if (isEditing) { + return ( + + ); + } + + return ( + + + + + + {gasLimit} + + + + ); +}; + +export default AdvancedGasFeeGasLimit; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js new file mode 100644 index 000000000..2b355f632 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/advanced-gas-fee-gas-limit.test.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { fireEvent, screen } from '@testing-library/react'; + +import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import mockEstimates from '../../../../../test/data/mock-estimates.json'; +import mockState from '../../../../../test/data/mock-state.json'; +import { GasFeeContextProvider } from '../../../../contexts/gasFee'; +import configureStore from '../../../../store/store'; + +import { AdvanceGasFeePopoverContextProvider } from '../context'; +import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit'; + +jest.mock('../../../../store/actions', () => ({ + disconnectGasFeeEstimatePoller: jest.fn(), + getGasFeeEstimatesAndStartPolling: jest + .fn() + .mockImplementation(() => Promise.resolve()), + addPollingTokenToAppState: jest.fn(), + removePollingTokenFromAppState: jest.fn(), +})); + +const render = (txProps) => { + const store = configureStore({ + metamask: { + ...mockState.metamask, + accounts: { + [mockState.metamask.selectedAddress]: { + address: mockState.metamask.selectedAddress, + balance: '0x1F4', + }, + }, + advancedGasFee: { priorityFee: 100 }, + featureFlags: { advancedInlineGas: true }, + gasFeeEstimates: + mockEstimates[GAS_ESTIMATE_TYPES.FEE_MARKET].gasFeeEstimates, + }, + }); + + return renderWithProvider( + + + + + , + store, + ); +}; + +describe('AdvancedGasFeeGasLimit', () => { + it('should show GasLimit from transaction', () => { + render(); + expect(screen.getByText('21000')).toBeInTheDocument(); + }); + + it('should show input when edit link is clicked', () => { + render(); + expect(document.getElementsByTagName('input')).toHaveLength(0); + fireEvent.click(screen.queryByText('Edit')); + expect(document.getElementsByTagName('input')[0]).toHaveValue(21000); + }); +}); diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js new file mode 100644 index 000000000..8ab2a4041 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.js @@ -0,0 +1 @@ +export { default } from './advanced-gas-fee-gas-limit'; diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss new file mode 100644 index 000000000..bf88a1dc1 --- /dev/null +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index.scss @@ -0,0 +1,14 @@ +.advanced-gas-fee-gas-limit { + white-space: nowrap; + + > * { + margin-right: 4px; + } + + a.advanced-gas-fee-gas-limit__edit-link { + @include H7; + + padding: 0; + width: auto; + } +} diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js index cda544c81..077d42270 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-popover.js @@ -7,6 +7,7 @@ import Popover from '../../ui/popover'; import { AdvanceGasFeePopoverContextProvider } from './context'; import AdvancedGasFeeInputs from './advanced-gas-fee-inputs'; +import AdvancedGasFeeGasLimit from './advanced-gas-fee-gas-limit'; import AdvancedGasFeeSaveButton from './advanced-gas-fee-save'; const AdvancedGasFeePopover = () => { @@ -28,8 +29,10 @@ const AdvancedGasFeePopover = () => { onClose={closeAllModals} footer={} > - + +
+ diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js index d8efd7c7c..d70f64391 100644 --- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js +++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-save/advanced-gas-fee-save.js @@ -14,16 +14,18 @@ const AdvancedGasFeeSaveButton = () => { const { updateTransaction } = useGasFeeContext(); const { isDirty, + gasLimit, maxFeePerGas, maxPriorityFeePerGas, } = useAdvanceGasFeePopoverContext(); const onSave = () => { - updateTransaction( - PRIORITY_LEVELS.CUSTOM, - decGWEIToHexWEI(maxFeePerGas), - decGWEIToHexWEI(maxPriorityFeePerGas), - ); + updateTransaction({ + estimateUsed: PRIORITY_LEVELS.CUSTOM, + maxFeePerGas: decGWEIToHexWEI(maxFeePerGas), + maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas), + gasLimit, + }); closeModal('advancedGasFee'); }; diff --git a/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js b/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js index a6bca0a33..8a63fe697 100644 --- a/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js +++ b/ui/components/app/advanced-gas-fee-popover/context/advanceGasFeePopover.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; export const AdvanceGasFeePopoverContext = createContext({}); export const AdvanceGasFeePopoverContextProvider = ({ children }) => { + const [gasLimit, setGasLimit] = useState(); const [maxFeePerGas, setMaxFeePerGas] = useState(); const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(); const [isDirty, setDirty] = useState(); @@ -11,10 +12,12 @@ export const AdvanceGasFeePopoverContextProvider = ({ children }) => { return ( h6 { + font-size: $font-size-h7; + } } diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index dae43943a..f452ebd3b 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -57,6 +57,7 @@ @import 'loading-network-screen/index'; @import 'flask/experimental-area/index'; @import 'advanced-gas-fee-popover/index'; +@import 'advanced-gas-fee-popover/advanced-gas-fee-gas-limit/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-inputs/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index'; diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js index fe4480f10..ef7cda900 100644 --- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js +++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js @@ -9,7 +9,7 @@ import LoadingHeartBeat from '../../ui/loading-heartbeat'; import Popover from '../../ui/popover'; import Typography from '../../ui/typography/typography'; -import { COLORS } from '../../../helpers/constants/design-system'; +import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys'; import { useGasFeeContext } from '../../../contexts/gasFee'; import EditGasItem from './edit-gas-item'; @@ -57,7 +57,8 @@ const EditGasFeePopover = () => { className="edit-gas-fee-popover__know-more" align="center" color={COLORS.UI4} - fontSize="12px" + tag={TYPOGRAPHY.Paragraph} + variant={TYPOGRAPHY.H7} > { return (
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js index 2d11ca3cc..0f42519fe 100644 --- a/ui/components/ui/typography/typography.js +++ b/ui/components/ui/typography/typography.js @@ -20,7 +20,6 @@ export default function Typography({ children, fontWeight = 'normal', fontStyle = 'normal', - fontSize, align, boxProps = {}, margin = [1, 0], @@ -34,7 +33,6 @@ export default function Typography({ { [`typography--align-${align}`]: Boolean(align), [`typography--color-${color}`]: Boolean(color), - [`typography--size-${fontSize}`]: Boolean(fontSize), }, ); @@ -69,7 +67,6 @@ Typography.propTypes = { margin: MultipleSizes, fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), - fontSize: PropTypes.string, tag: PropTypes.oneOf([ 'p', 'h1', diff --git a/ui/components/ui/typography/typography.scss b/ui/components/ui/typography/typography.scss index ea1cbaff3..42f1294d0 100644 --- a/ui/components/ui/typography/typography.scss +++ b/ui/components/ui/typography/typography.scss @@ -33,12 +33,6 @@ } } - @each $size in design-system.$font-size { - &--size-#{$size} { - font-size: $size; - } - } - @each $alignment in design-system.$text-align { &--align-#{$alignment} { text-align: $alignment; diff --git a/ui/css/design-system/attributes.scss b/ui/css/design-system/attributes.scss index 4a187a949..e9f03e053 100644 --- a/ui/css/design-system/attributes.scss +++ b/ui/css/design-system/attributes.scss @@ -82,4 +82,3 @@ $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item; $text-align: left, right, center, justify, end; $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900; $font-style: normal, italic, oblique; -$font-size: 10px, 12px; diff --git a/ui/hooks/gasFeeInput/useGasFeeInputs.js b/ui/hooks/gasFeeInput/useGasFeeInputs.js index 49864193b..a2c0b89b4 100644 --- a/ui/hooks/gasFeeInput/useGasFeeInputs.js +++ b/ui/hooks/gasFeeInput/useGasFeeInputs.js @@ -23,9 +23,6 @@ import { useMaxPriorityFeePerGasInput } from './useMaxPriorityFeePerGasInput'; import { useGasEstimates } from './useGasEstimates'; import { useTransactionFunctions } from './useTransactionFunctions'; -// eslint-disable-next-line prefer-destructuring -const EIP_1559_V2 = process.env.EIP_1559_V2; - /** * @typedef {Object} GasFeeInputReturnType * @property {DecGweiString} [maxFeePerGas] - the maxFeePerGas input value. @@ -85,6 +82,8 @@ export function useGasFeeInputs( useSelector(checkNetworkAndAccountSupports1559) && !isLegacyTransaction(transaction?.txParams); + const supportsEIP1559V2 = supportsEIP1559 && EIP_1559_V2_ENABLED; + // We need the gas estimates from the GasFeeController in the background. // Calling this hooks initiates polling for new gas estimates and returns the // current estimate. @@ -115,27 +114,31 @@ export function useGasFeeInputs( return PRIORITY_LEVELS.CUSTOM; }); + const [gasLimit, setGasLimit] = useState(() => + Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')), + ); + /** * In EIP-1559 V2 designs change to gas estimate is always updated to transaction * Thus callback setEstimateToUse can be deprecate in favour of this useEffect * so that transaction is source of truth whenever possible. */ useEffect(() => { - if (EIP_1559_V2 && transaction?.userFeeLevel) { - setEstimateUsed(transaction?.userFeeLevel); - setInternalEstimateToUse(transaction?.userFeeLevel); + if (supportsEIP1559V2) { + if (transaction?.userFeeLevel) { + setEstimateUsed(transaction?.userFeeLevel); + setInternalEstimateToUse(transaction?.userFeeLevel); + } + setGasLimit(Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0'))); } }, [ setEstimateUsed, + setGasLimit, setInternalEstimateToUse, + supportsEIP1559V2, transaction, - userPrefersAdvancedGas, ]); - const [gasLimit, setGasLimit] = useState(() => - Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')), - ); - const { gasPrice, setGasPrice, @@ -152,7 +155,7 @@ export function useGasFeeInputs( maxFeePerGasFiat, setMaxFeePerGas, } = useMaxFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -166,7 +169,7 @@ export function useGasFeeInputs( maxPriorityFeePerGasFiat, setMaxPriorityFeePerGas, } = useMaxPriorityFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -316,7 +319,7 @@ export function useGasFeeInputs( hasGasErrors, hasSimulationError, supportsEIP1559, - supportsEIP1559V2: supportsEIP1559 && EIP_1559_V2_ENABLED, + supportsEIP1559V2, updateTransaction, updateTransactionUsingGasFeeEstimates, }; diff --git a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js index 452c0611e..7afc19cfc 100644 --- a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js +++ b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.js @@ -34,7 +34,7 @@ const getMaxFeePerGasFromTransaction = (transaction) => { * method to update the setMaxFeePerGas. */ export function useMaxFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -67,10 +67,10 @@ export function useMaxFeePerGasInput({ }); useEffect(() => { - if (EIP_1559_V2) { + if (supportsEIP1559V2) { setMaxFeePerGas(maxFeePerGasFromTransaction); } - }, [EIP_1559_V2, maxFeePerGasFromTransaction, setMaxFeePerGas]); + }, [maxFeePerGasFromTransaction, setMaxFeePerGas, supportsEIP1559V2]); let gasSettings = { gasLimit: decimalToHex(gasLimit), diff --git a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js index 54aeb1093..38e45a3bc 100644 --- a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js +++ b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.js @@ -34,7 +34,7 @@ const getMaxPriorityFeePerGasFromTransaction = (transaction) => { * method to update the maxPriorityFeePerGas. */ export function useMaxPriorityFeePerGasInput({ - EIP_1559_V2, + supportsEIP1559V2, estimateToUse, gasEstimateType, gasFeeEstimates, @@ -63,13 +63,13 @@ export function useMaxPriorityFeePerGasInput({ }); useEffect(() => { - if (EIP_1559_V2) { + if (supportsEIP1559V2) { setMaxPriorityFeePerGas(maxPriorityFeePerGasFromTransaction); } }, [ - EIP_1559_V2, maxPriorityFeePerGasFromTransaction, setMaxPriorityFeePerGas, + supportsEIP1559V2, ]); const maxPriorityFeePerGasToUse = diff --git a/ui/hooks/gasFeeInput/useTransactionFunctions.js b/ui/hooks/gasFeeInput/useTransactionFunctions.js index ab3830266..9975555d6 100644 --- a/ui/hooks/gasFeeInput/useTransactionFunctions.js +++ b/ui/hooks/gasFeeInput/useTransactionFunctions.js @@ -11,13 +11,18 @@ import { updateTransaction as updateTransactionFn } from '../../store/actions'; export const useTransactionFunctions = ({ defaultEstimateToUse, gasFeeEstimates, - gasLimit, + gasLimit: gasLimitInTransaction, transaction, }) => { const dispatch = useDispatch(); const updateTransaction = useCallback( - (estimateUsed, maxFeePerGas, maxPriorityFeePerGas) => { + ({ + estimateUsed, + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit = gasLimitInTransaction, + }) => { const newGasSettings = { gas: decimalToHex(gasLimit), gasLimit: decimalToHex(gasLimit), @@ -42,7 +47,7 @@ export const useTransactionFunctions = ({ dispatch(updateTransactionFn(updatedTxMeta)); }, - [defaultEstimateToUse, dispatch, gasLimit, transaction], + [defaultEstimateToUse, dispatch, gasLimitInTransaction, transaction], ); const updateTransactionUsingGasFeeEstimates = useCallback( @@ -52,21 +57,21 @@ export const useTransactionFunctions = ({ maxFeePerGas, maxPriorityFeePerGas, } = transaction?.dappSuggestedGasFees; - updateTransaction( - PRIORITY_LEVELS.DAPP_SUGGESTED, + updateTransaction({ + estimateUsed: PRIORITY_LEVELS.DAPP_SUGGESTED, maxFeePerGas, maxPriorityFeePerGas, - ); + }); } else { const { suggestedMaxFeePerGas, suggestedMaxPriorityFeePerGas, } = gasFeeEstimates[gasFeeEstimateToUse]; - updateTransaction( - gasFeeEstimateToUse, - decGWEIToHexWEI(suggestedMaxFeePerGas), - decGWEIToHexWEI(suggestedMaxPriorityFeePerGas), - ); + updateTransaction({ + estimateUsed: gasFeeEstimateToUse, + maxFeePerGas: decGWEIToHexWEI(suggestedMaxFeePerGas), + maxPriorityFeePerGas: decGWEIToHexWEI(suggestedMaxPriorityFeePerGas), + }); } }, [gasFeeEstimates, transaction?.dappSuggestedGasFees, updateTransaction], diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index 976bbeb3e..981debb24 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -429,9 +429,7 @@ export default class ConfirmTransactionBase extends Component { ) : null; const renderGasDetailsItem = () => { - return EIP_1559_V2_ENABLED && - supportsEIP1559 && - !isLegacyTransaction(txData) ? ( + return this.supportsEIP1559V2 ? ( this.handleCloseEditGas()} currentTransaction={txData} - supportsEIP1559V2={ - EIP_1559_V2_ENABLED && - supportsEIP1559 && - !isLegacyTransaction(txData) - } + supportsEIP1559V2={this.supportsEIP1559V2} /> ); diff --git a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js index 2cdf2c5ea..5dc8ec487 100644 --- a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js +++ b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { COLORS } from '../../../helpers/constants/design-system'; +import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'; import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util'; import { useI18nContext } from '../../../hooks/useI18nContext'; @@ -47,15 +47,15 @@ const GasDetailsItem = ({ - + {t('transactionDetailGasTooltipIntro', [ isMainnet ? t('networkNameEthereum') : '', ])} - + {t('transactionDetailGasTooltipExplanation')} - + + } From 6d34d85f6ec56752a508f8a1d56e4e7b0669526d Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 3 Dec 2021 08:54:29 -0800 Subject: [PATCH 017/100] Textarea UI component (#12688) * Initial Textarea component * added no-scroll class and css * added tests * removed comment from prettier, updated README title * updated tests * added resize tests * fixed grammar * updated scss * changes per linter * updated title to match new folder structure for storybook * reverted unintended change Co-authored-by: hmalik88 Co-authored-by: Hassan Malik <41640681+hmalik88@users.noreply.github.com> --- ui/components/ui/textarea/README.mdx | 15 +++ ui/components/ui/textarea/index.js | 1 + ui/components/ui/textarea/index.scss | 25 ++++ ui/components/ui/textarea/textarea.js | 91 ++++++++++++++ ui/components/ui/textarea/textarea.stories.js | 119 ++++++++++++++++++ ui/components/ui/textarea/textarea.test.js | 105 ++++++++++++++++ ui/components/ui/ui-components.scss | 1 + ui/css/design-system/attributes.scss | 54 ++------ ui/helpers/constants/design-system.js | 9 ++ 9 files changed, 377 insertions(+), 43 deletions(-) create mode 100644 ui/components/ui/textarea/README.mdx create mode 100644 ui/components/ui/textarea/index.js create mode 100644 ui/components/ui/textarea/index.scss create mode 100644 ui/components/ui/textarea/textarea.js create mode 100644 ui/components/ui/textarea/textarea.stories.js create mode 100644 ui/components/ui/textarea/textarea.test.js diff --git a/ui/components/ui/textarea/README.mdx b/ui/components/ui/textarea/README.mdx new file mode 100644 index 000000000..6872c596c --- /dev/null +++ b/ui/components/ui/textarea/README.mdx @@ -0,0 +1,15 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import TextArea from '.'; + +# TextArea + +TextArea allows users to enter text into the UI + + + + + +## Component API + + diff --git a/ui/components/ui/textarea/index.js b/ui/components/ui/textarea/index.js new file mode 100644 index 000000000..90daa5b74 --- /dev/null +++ b/ui/components/ui/textarea/index.js @@ -0,0 +1 @@ +export { default } from './textarea'; diff --git a/ui/components/ui/textarea/index.scss b/ui/components/ui/textarea/index.scss new file mode 100644 index 000000000..aa0ca7f54 --- /dev/null +++ b/ui/components/ui/textarea/index.scss @@ -0,0 +1,25 @@ +@use "design-system"; + +.textarea { + display: block; + box-shadow: none; + color: design-system.$black; + + @include design-system.H6; + + font-size: 1rem; + + &--scrollable { + overflow-y: scroll; + } + + &--not-scrollable { + overflow-y: hidden; + } + + @each $size in design-system.$resize { + &--resize-#{$size} { + resize: $size; + } + } +} diff --git a/ui/components/ui/textarea/textarea.js b/ui/components/ui/textarea/textarea.js new file mode 100644 index 000000000..e51f715a0 --- /dev/null +++ b/ui/components/ui/textarea/textarea.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import classnames from 'classnames'; + +import { + COLORS, + RESIZE, + SIZES, + BORDER_STYLE, + BLOCK_SIZES, +} from '../../../helpers/constants/design-system'; + +import Box from '../box'; + +const TextArea = ({ + className, + value, + onChange, + resize = RESIZE.BOTH, + scrollable = false, + height, + boxProps, + ...props +}) => { + const textAreaClassnames = classnames( + 'textarea', + className, + `textarea--resize-${resize}`, + { + 'textarea--scrollable': scrollable, + 'textarea--not-scrollable': !scrollable, + }, + ); + return ( + + {(boxClassName) => ( + + + ); +}; + +DefaultStory.storyName = 'Default'; + +DefaultStory.args = { + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld', + resize: RESIZE.BOTH, + scrollable: false, + boxProps: { + borderColor: COLORS.UI3, + borderRadius: SIZES.SM, + borderStyle: BORDER_STYLE.SOLID, + padding: [2, 4], + }, + height: 'auto', +}; + +export const Scrollable = (args) => { + const [{ value }, updateArgs] = useArgs(); + + const handleOnChange = (e) => { + updateArgs({ + value: e.target.value, + }); + }; + return ( +
+ +
+ ); +}; + +Scrollable.args = { + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld', + resize: RESIZE.NONE, + scrollable: true, + height: 170, + boxProps: { + borderColor: COLORS.TRANSPARENT, + borderRadius: SIZES.NONE, + borderStyle: BORDER_STYLE.NONE, + padding: [2, 4], + width: BLOCK_SIZES.FULL, + }, +}; diff --git a/ui/components/ui/textarea/textarea.test.js b/ui/components/ui/textarea/textarea.test.js new file mode 100644 index 000000000..e1e5b61d5 --- /dev/null +++ b/ui/components/ui/textarea/textarea.test.js @@ -0,0 +1,105 @@ +import * as React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import { + COLORS, + RESIZE, + SIZES, + BORDER_STYLE, +} from '../../../helpers/constants/design-system'; +import TextArea from '.'; + +describe('TextArea', () => { + const text = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporld'; + const onChange = jest.fn(); + let args; + beforeEach(() => { + args = { + name: 'Text area', + value: text, + resize: RESIZE.BOTH, + scrollable: false, + boxProps: { + borderColor: COLORS.UI3, + borderRadius: SIZES.SM, + borderStyle: BORDER_STYLE.SOLID, + padding: [2, 4], + }, + height: '100px', + onChange, + }; + }); + it('should render the TextArea component without crashing', () => { + const { getByText } = render(