diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/components/app/add-token-button/index.scss | 5 | ||||
-rw-r--r-- | ui/app/components/app/coinbase-form.js | 69 | ||||
-rw-r--r-- | ui/app/components/app/customize-gas-modal/index.js | 8 | ||||
-rw-r--r-- | ui/app/components/app/dropdowns/network-dropdown.js | 26 | ||||
-rw-r--r-- | ui/app/components/app/dropdowns/tests/network-dropdown.test.js | 14 | ||||
-rw-r--r-- | ui/app/components/app/ens-input.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/gas-customization/gas-price-button-group/index.scss | 17 | ||||
-rw-r--r-- | ui/app/components/app/loading-network-screen/loading-network-screen.component.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modal/modal.component.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/modal/tests/modal.component.test.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modals/account-details-modal.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modals/customize-gas/customize-gas.component.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modals/deposit-ether-modal.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modals/edit-account-name-modal.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/modals/export-private-key-modal.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modals/hide-token-confirmation-modal.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/modals/notification-modal.js | 4 | ||||
-rw-r--r-- | ui/app/components/app/network-display/index.scss | 8 | ||||
-rw-r--r-- | ui/app/components/app/network-display/network-display.component.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/network.js | 27 | ||||
-rw-r--r-- | ui/app/components/app/shapeshift-form.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/signature-request.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/transaction-list-item/transaction-list-item.container.js | 2 | ||||
-rw-r--r-- | ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js | 6 | ||||
-rw-r--r-- | ui/app/components/app/wallet-view.js | 2 | ||||
-rw-r--r-- | ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js | 2 | ||||
-rw-r--r-- | ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js | 2 | ||||
-rw-r--r-- | ui/app/components/ui/button/button.component.js | 9 | ||||
-rw-r--r-- | ui/app/components/ui/button/button.stories.js | 47 | ||||
-rw-r--r-- | ui/app/components/ui/button/buttons.scss | 244 | ||||
-rw-r--r-- | ui/app/components/ui/page-container/index.scss | 8 | ||||
-rw-r--r-- | ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js | 2 | ||||
-rw-r--r-- | ui/app/components/ui/unit-input/index.scss | 11 | ||||
-rw-r--r-- | ui/app/components/ui/unit-input/unit-input.component.js | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/buttons.scss | 230 | ||||
-rw-r--r-- | ui/app/css/itcss/components/index.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/modal.scss | 2 | ||||
-rw-r--r-- | ui/app/css/itcss/components/network.scss | 28 | ||||
-rw-r--r-- | ui/app/css/itcss/components/send.scss | 112 | ||||
-rw-r--r-- | ui/app/css/itcss/generic/index.scss | 1 | ||||
-rw-r--r-- | ui/app/css/itcss/settings/typography.scss | 37 | ||||
-rw-r--r-- | ui/app/css/itcss/settings/variables.scss | 18 | ||||
-rw-r--r-- | ui/app/ducks/metamask/metamask.js | 19 | ||||
-rw-r--r-- | ui/app/helpers/constants/common.js | 1 | ||||
-rw-r--r-- | ui/app/helpers/utils/metametrics.util.js | 2 | ||||
-rw-r--r-- | ui/app/helpers/utils/transactions.util.js | 30 | ||||
-rw-r--r-- | ui/app/pages/add-token/token-list/token-list-placeholder/index.scss | 3 | ||||
-rw-r--r-- | ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js | 2 | ||||
-rw-r--r-- | ui/app/pages/confirm-add-token/confirm-add-token.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/confirm-send-ether/confirm-send-ether.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js | 24 | ||||
-rw-r--r-- | ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js | 4 | ||||
-rw-r--r-- | ui/app/pages/create-account/connect-hardware/account-list.js | 2 | ||||
-rw-r--r-- | ui/app/pages/create-account/connect-hardware/connect-screen.js | 2 | ||||
-rw-r--r-- | ui/app/pages/create-account/import-account/json.js | 2 | ||||
-rw-r--r-- | ui/app/pages/create-account/import-account/private-key.js | 2 | ||||
-rw-r--r-- | ui/app/pages/create-account/new-account.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js | 20 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/select-action/select-action.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/first-time-flow/welcome/welcome.component.js | 2 | ||||
-rw-r--r-- | ui/app/pages/home/home.container.js | 2 | ||||
-rw-r--r-- | ui/app/pages/keychains/reveal-seed.js | 2 | ||||
-rw-r--r-- | ui/app/pages/mobile-sync/index.js | 2 | ||||
-rw-r--r-- | ui/app/pages/routes/index.js | 10 | ||||
-rw-r--r-- | ui/app/pages/send/README.md (renamed from ui/app/components/app/send/README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/account-list-item/account-list-item-README.md (renamed from ui/app/components/app/send/account-list-item/account-list-item-README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/account-list-item/account-list-item.component.js (renamed from ui/app/components/app/send/account-list-item/account-list-item.component.js) | 10 | ||||
-rw-r--r-- | ui/app/pages/send/account-list-item/account-list-item.container.js (renamed from ui/app/components/app/send/account-list-item/account-list-item.container.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/account-list-item/index.js (renamed from ui/app/components/app/send/account-list-item/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js (renamed from ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js) | 6 | ||||
-rw-r--r-- | ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js (renamed from ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/index.js (renamed from ui/app/components/app/send/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/index.js (renamed from ui/app/components/app/send/send-content/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/README.md (renamed from ui/app/components/app/send/send-content/send-amount-row/README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/index.js (renamed from ui/app/components/app/send/send-content/send-amount-row/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js (renamed from ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js (renamed from ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss (renamed from ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js (renamed from ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js (renamed from ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-asset-row/index.js | 1 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js | 152 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js | 21 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-content.component.js (renamed from ui/app/components/app/send/send-content/send-content.component.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-dropdown-list/index.js (renamed from ui/app/components/app/send/send-content/send-dropdown-list/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js (renamed from ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js (renamed from ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/index.js (renamed from ui/app/components/app/send/send-content/send-from-row/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/send-from-row.component.js (renamed from ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/send-from-row.container.js (renamed from ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js (renamed from ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js (renamed from ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js (renamed from ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js (renamed from ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/README.md (renamed from ui/app/components/app/send/send-content/send-gas-row/README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js (renamed from ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js (renamed from ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js (renamed from ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/index.js (renamed from ui/app/components/app/send/send-content/send-gas-row/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js (renamed from ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js) | 8 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js (renamed from ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js) | 10 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss (renamed from ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js (renamed from ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js (renamed from ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js (renamed from ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js) | 10 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js (renamed from ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-hex-data-row/index.js (renamed from ui/app/components/app/send/send-content/send-hex-data-row/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js (renamed from ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js (renamed from ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/index.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss (renamed from ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js (renamed from ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/index.js (renamed from ui/app/components/app/send/send-content/send-to-row/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/send-to-row-README.md (renamed from ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/send-to-row.component.js (renamed from ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/send-to-row.container.js (renamed from ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js (renamed from ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js (renamed from ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js (renamed from ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js (renamed from ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js (renamed from ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js (renamed from ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-content/tests/send-content-component.test.js (renamed from ui/app/components/app/send/send-content/tests/send-content-component.test.js) | 17 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/README.md (renamed from ui/app/components/app/send/send-footer/README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/index.js (renamed from ui/app/components/app/send/send-footer/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/send-footer.component.js (renamed from ui/app/components/app/send/send-footer/send-footer.component.js) | 9 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/send-footer.container.js (renamed from ui/app/components/app/send/send-footer/send-footer.container.js) | 14 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/send-footer.scss (renamed from ui/app/components/app/send/send-footer/send-footer.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/send-footer.selectors.js (renamed from ui/app/components/app/send/send-footer/send-footer.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/send-footer.utils.js (renamed from ui/app/components/app/send/send-footer/send-footer.utils.js) | 1 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/tests/send-footer-component.test.js (renamed from ui/app/components/app/send/send-footer/tests/send-footer-component.test.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/tests/send-footer-container.test.js (renamed from ui/app/components/app/send/send-footer/tests/send-footer-container.test.js) | 7 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js (renamed from ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-footer/tests/send-footer-utils.test.js (renamed from ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js) | 1 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/README.md (renamed from ui/app/components/app/send/send-header/README.md) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/index.js (renamed from ui/app/components/app/send/send-header/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/send-header.component.js (renamed from ui/app/components/app/send/send-header/send-header.component.js) | 5 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/send-header.container.js (renamed from ui/app/components/app/send/send-header/send-header.container.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/send-header.selectors.js (renamed from ui/app/components/app/send/send-header/send-header.selectors.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/tests/send-header-component.test.js (renamed from ui/app/components/app/send/send-header/tests/send-header-component.test.js) | 6 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/tests/send-header-container.test.js (renamed from ui/app/components/app/send/send-header/tests/send-header-container.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send-header/tests/send-header-selectors.test.js (renamed from ui/app/components/app/send/send-header/tests/send-header-selectors.test.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send.component.js (renamed from ui/app/components/app/send/send.component.js) | 38 | ||||
-rw-r--r-- | ui/app/pages/send/send.constants.js (renamed from ui/app/components/app/send/send.constants.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/send.container.js (renamed from ui/app/components/app/send/send.container.js) | 13 | ||||
-rw-r--r-- | ui/app/pages/send/send.scss (renamed from ui/app/components/app/send/send.scss) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/send.selectors.js (renamed from ui/app/components/app/send/send.selectors.js) | 20 | ||||
-rw-r--r-- | ui/app/pages/send/send.utils.js (renamed from ui/app/components/app/send/send.utils.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/send/tests/send-component.test.js (renamed from ui/app/components/app/send/tests/send-component.test.js) | 2 | ||||
-rw-r--r-- | ui/app/pages/send/tests/send-container.test.js (renamed from ui/app/components/app/send/tests/send-container.test.js) | 9 | ||||
-rw-r--r-- | ui/app/pages/send/tests/send-selectors-test-data.js (renamed from ui/app/components/app/send/tests/send-selectors-test-data.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/tests/send-selectors.test.js (renamed from ui/app/components/app/send/tests/send-selectors.test.js) | 9 | ||||
-rw-r--r-- | ui/app/pages/send/tests/send-utils.test.js (renamed from ui/app/components/app/send/tests/send-utils.test.js) | 6 | ||||
-rw-r--r-- | ui/app/pages/send/to-autocomplete.component.js (renamed from ui/app/components/app/send/to-autocomplete.component.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/to-autocomplete/index.js (renamed from ui/app/components/app/send/to-autocomplete/index.js) | 0 | ||||
-rw-r--r-- | ui/app/pages/send/to-autocomplete/to-autocomplete.js (renamed from ui/app/components/app/send/to-autocomplete/to-autocomplete.js) | 4 | ||||
-rw-r--r-- | ui/app/pages/settings/advanced-tab/advanced-tab.component.js | 6 | ||||
-rw-r--r-- | ui/app/pages/settings/info-tab/index.scss | 2 | ||||
-rw-r--r-- | ui/app/pages/settings/security-tab/security-tab.component.js | 6 | ||||
-rw-r--r-- | ui/app/pages/settings/settings-tab/index.scss | 20 | ||||
-rw-r--r-- | ui/app/selectors/custom-gas.js | 2 | ||||
-rw-r--r-- | ui/app/selectors/selectors.js | 6 | ||||
-rw-r--r-- | ui/app/store/actions.js | 2 | ||||
-rw-r--r-- | ui/lib/account-link.js | 3 | ||||
-rw-r--r-- | ui/lib/etherscan-prefix-for-network.js | 3 |
200 files changed, 1051 insertions, 594 deletions
diff --git a/ui/app/components/app/add-token-button/index.scss b/ui/app/components/app/add-token-button/index.scss index 39f404716..c4350a2d3 100644 --- a/ui/app/components/app/add-token-button/index.scss +++ b/ui/app/components/app/add-token-button/index.scss @@ -17,10 +17,7 @@ } &__button { - font-size: 0.75rem; + @extend %small-link; margin: 1rem; - text-transform: uppercase; - color: $curious-blue; - cursor: pointer; } } diff --git a/ui/app/components/app/coinbase-form.js b/ui/app/components/app/coinbase-form.js deleted file mode 100644 index 24d287604..000000000 --- a/ui/app/components/app/coinbase-form.js +++ /dev/null @@ -1,69 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../store/actions') - -CoinbaseForm.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps)(CoinbaseForm) - - -function mapStateToProps (state) { - return { - warning: state.appState.warning, - } -} - -inherits(CoinbaseForm, Component) - -function CoinbaseForm () { - Component.call(this) -} - -CoinbaseForm.prototype.render = function () { - var props = this.props - - return h('.flex-column', { - style: { - marginTop: '35px', - padding: '25px', - width: '100%', - }, - }, [ - h('.flex-row', { - style: { - justifyContent: 'space-around', - margin: '33px', - marginTop: '0px', - }, - }, [ - h('button.btn-green', { - onClick: this.toCoinbase.bind(this), - }, this.context.t('continueToCoinbase')), - - h('button.btn-red', { - onClick: () => props.dispatch(actions.goHome()), - }, this.context.t('cancel')), - ]), - ]) -} - -CoinbaseForm.prototype.toCoinbase = function () { - const props = this.props - const address = props.buyView.buyAddress - props.dispatch(actions.buyEth({ network: '1', address, amount: 0 })) -} - -CoinbaseForm.prototype.renderLoading = function () { - return h('img', { - style: { - width: '27px', - marginRight: '-27px', - }, - src: 'images/loading.svg', - }) -} diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js index dca77bb00..1f9436810 100644 --- a/ui/app/components/app/customize-gas-modal/index.js +++ b/ui/app/components/app/customize-gas-modal/index.js @@ -18,11 +18,11 @@ const { MIN_GAS_PRICE_DEC, MIN_GAS_LIMIT_DEC, MIN_GAS_PRICE_GWEI, -} = require('../send/send.constants') +} = require('../../../pages/send/send.constants') const { isBalanceSufficient, -} = require('../send/send.utils') +} = require('../../../pages/send/send.utils') const { conversionUtil, @@ -47,7 +47,7 @@ const { const { getGasPrice, getGasLimit, -} = require('../send/send.selectors') +} = require('../../../pages/send/send.selectors') function mapStateToProps (state) { const selectedToken = getSelectedToken(state) @@ -382,7 +382,7 @@ CustomizeGasModal.prototype.render = function () { onClick: this.props.hideModal, }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', className: 'send-v2__customize-gas__save', onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), disabled: error, diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js index 3d9037a06..dbe3f1bc8 100644 --- a/ui/app/components/app/dropdowns/network-dropdown.js +++ b/ui/app/components/app/dropdowns/network-dropdown.js @@ -207,6 +207,28 @@ NetworkDropdown.prototype.render = function () { h( DropdownMenuItem, { + key: 'goerli', + closeMenu: () => this.props.hideNetworkDropdown(), + onClick: () => this.handleClick('goerli'), + style: dropdownMenuItemStyle, + }, + [ + providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + h(NetworkDropdownIcon, { + backgroundColor: '#3099f2', // $dodger-blue + isSelected: providerType === 'goerli', + }), + h('span.network-name-item', { + style: { + color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b', + }, + }, this.context.t('goerli')), + ] + ), + + h( + DropdownMenuItem, + { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => this.handleClick('localhost'), @@ -285,6 +307,10 @@ NetworkDropdown.prototype.getNetworkName = function () { name = this.context.t('kovan') } else if (providerName === 'rinkeby') { name = this.context.t('rinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('localhost') + } else if (providerName === 'goerli') { + name = this.context.t('goerli') } else { name = provider.nickname || this.context.t('unknownNetwork') } diff --git a/ui/app/components/app/dropdowns/tests/network-dropdown.test.js b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js index 91e7899a7..4a81b973f 100644 --- a/ui/app/components/app/dropdowns/tests/network-dropdown.test.js +++ b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js @@ -62,7 +62,7 @@ describe('Network Dropdown', () => { }) it('renders 7 DropDownMenuItems ', () => { - assert.equal(wrapper.find(DropdownMenuItem).length, 7) + assert.equal(wrapper.find(DropdownMenuItem).length, 8) }) it('checks background color for first NetworkDropdownIcon', () => { @@ -82,15 +82,19 @@ describe('Network Dropdown', () => { }) it('checks background color for fifth NetworkDropdownIcon', () => { - assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b') + assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('backgroundColor'), '#3099f2') // Goerli Blue + }) + + it('checks background color for sixth NetworkDropdownIcon', () => { + assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b') }) it('checks dropdown for frequestRPCList from state ', () => { - assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545') + assert.equal(wrapper.find(DropdownMenuItem).at(6).text(), '✓http://localhost:7545') }) - it('checks background color for sixth NetworkDropdownIcon', () => { - assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b') + it('checks background color for seventh NetworkDropdownIcon', () => { + assert.equal(wrapper.find(NetworkDropdownIcon).at(6).prop('innerBorder'), '1px solid #9b9b9b') }) }) diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js index 274058a1b..424c5061e 100644 --- a/ui/app/components/app/ens-input.js +++ b/ui/app/components/app/ens-input.js @@ -10,7 +10,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const connect = require('react-redux').connect -const ToAutoComplete = require('./send/to-autocomplete').default +const ToAutoComplete = require('../../pages/send/to-autocomplete').default const log = require('loglevel') const { isValidENSAddress } = require('../../helpers/utils/util') diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index d541056f4..0e7e30347 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -63,7 +63,7 @@ import { import { calcGasTotal, isBalanceSufficient, -} from '../../send/send.utils' +} from '../../../../pages/send/send.utils' import { addHexPrefix } from 'ethereumjs-util' import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils' diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss index cb2f3ecf1..92b4aba42 100644 --- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss @@ -65,6 +65,7 @@ .gas-price-button-group--small { display: flex; justify-content: stretch; + height: 54px; @media screen and (max-width: $break-small) { max-width: 260px; @@ -80,10 +81,14 @@ &__label { font-weight: 500; + line-height: 16px; + padding-bottom: 4px; } &__primary-currency { font-size: 12px; + line-height: 12px; + padding-bottom: 2px; @media screen and (max-width: 575px) { font-size: 10px; @@ -92,6 +97,8 @@ &__secondary-currency { font-size: 12px; + line-height: 12px; + padding-bottom: 2px; @media screen and (max-width: 575px) { font-size: 10px; @@ -99,19 +106,13 @@ } &__loading-container { - height: 78px; + height: 54px; } .button-group__button, .button-group__button--active { - height: 78px; background: white; color: $scorpion; - padding-top: 9px; - padding-left: 8.5px; - - @media screen and (max-width: $break-small) { - padding-left: 4px; - } + padding: 0 4px; div { display: flex; diff --git a/ui/app/components/app/loading-network-screen/loading-network-screen.component.js b/ui/app/components/app/loading-network-screen/loading-network-screen.component.js index 348a997c8..97b16d08f 100644 --- a/ui/app/components/app/loading-network-screen/loading-network-screen.component.js +++ b/ui/app/components/app/loading-network-screen/loading-network-screen.component.js @@ -45,6 +45,10 @@ export default class LoadingNetworkScreen extends PureComponent { name = this.context.t('connectingToKovan') } else if (providerName === 'rinkeby') { name = this.context.t('connectingToRinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('connectingToLocalhost') + } else if (providerName === 'goerli') { + name = this.context.t('connectingToGoerli') } else { name = this.context.t('connectingTo', [providerId]) } diff --git a/ui/app/components/app/modal/modal.component.js b/ui/app/components/app/modal/modal.component.js index 49e131b3c..44b180ac8 100644 --- a/ui/app/components/app/modal/modal.component.js +++ b/ui/app/components/app/modal/modal.component.js @@ -20,7 +20,7 @@ export default class Modal extends PureComponent { } static defaultProps = { - submitType: 'primary', + submitType: 'secondary', cancelType: 'default', } diff --git a/ui/app/components/app/modal/tests/modal.component.test.js b/ui/app/components/app/modal/tests/modal.component.test.js index a13d7c06a..5922177a6 100644 --- a/ui/app/components/app/modal/tests/modal.component.test.js +++ b/ui/app/components/app/modal/tests/modal.component.test.js @@ -12,7 +12,7 @@ describe('Modal Component', () => { assert.equal(wrapper.find('.modal-container').length, 1) const buttons = wrapper.find(Button) assert.equal(buttons.length, 1) - assert.equal(buttons.at(0).props().type, 'primary') + assert.equal(buttons.at(0).props().type, 'secondary') }) it('should render a modal with a cancel and a submit button', () => { @@ -38,7 +38,7 @@ describe('Modal Component', () => { cancelButton.simulate('click') assert.equal(handleCancel.callCount, 1) - assert.equal(submitButton.props().type, 'primary') + assert.equal(submitButton.props().type, 'secondary') assert.equal(submitButton.props().children, 'Submit') assert.equal(handleSubmit.callCount, 0) submitButton.simulate('click') diff --git a/ui/app/components/app/modals/account-details-modal.js b/ui/app/components/app/modals/account-details-modal.js index 94ed04df9..1b1ca6b8e 100644 --- a/ui/app/components/app/modals/account-details-modal.js +++ b/ui/app/components/app/modals/account-details-modal.js @@ -84,7 +84,7 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), h(Button, { - type: 'primary', + type: 'secondary', className: 'account-modal__button', onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, this.context.t('etherscanView')), @@ -92,7 +92,7 @@ AccountDetailsModal.prototype.render = function () { // Holding on redesign for Export Private Key functionality exportPrivateKeyFeatureEnabled ? h(Button, { - type: 'primary', + type: 'secondary', className: 'account-modal__button', onClick: () => showExportPrivateKeyModal(), }, this.context.t('exportPrivateKey')) : null, diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.component.js b/ui/app/components/app/modals/customize-gas/customize-gas.component.js index 5db5c79e7..387da2f79 100644 --- a/ui/app/components/app/modals/customize-gas/customize-gas.component.js +++ b/ui/app/components/app/modals/customize-gas/customize-gas.component.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import BigNumber from 'bignumber.js' import GasModalCard from '../../customize-gas-modal/gas-modal-card' -import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants' +import { MIN_GAS_PRICE_GWEI } from '../../../../pages/send/send.constants' import Button from '../../../ui/button' import { @@ -128,7 +128,7 @@ export default class CustomizeGas extends Component { { t('cancel') } </Button> <Button - type="primary" + type="secondary" className="customize-gas__save" onClick={() => { metricsEvent({ diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js index 6f622a17c..8f7ef792c 100644 --- a/ui/app/components/app/modals/deposit-ether-modal.js +++ b/ui/app/components/app/modals/deposit-ether-modal.js @@ -119,7 +119,7 @@ DepositEtherModal.prototype.renderRow = function ({ !hideButton && h('div.deposit-ether-modal__buy-row__button', [ h(Button, { - type: 'primary', + type: 'secondary', className: 'deposit-ether-modal__deposit-button', large: true, onClick: onButtonClick, @@ -133,7 +133,7 @@ DepositEtherModal.prototype.render = function () { const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props const { buyingWithShapeshift } = this.state - const isTestNetwork = ['3', '4', '42'].find(n => n === network) + const isTestNetwork = ['3', '4', '5', '42'].find(n => n === network) const networkName = getNetworkDisplayName(network) return h('div.page-container.page-container--full-width.page-container--full-height', {}, [ diff --git a/ui/app/components/app/modals/edit-account-name-modal.js b/ui/app/components/app/modals/edit-account-name-modal.js index 41a9862e9..aa21765c4 100644 --- a/ui/app/components/app/modals/edit-account-name-modal.js +++ b/ui/app/components/app/modals/edit-account-name-modal.js @@ -66,7 +66,7 @@ EditAccountNameModal.prototype.render = function () { value: this.state.inputText, }, []), - h('button.btn-clear.edit-account-name-modal-save-button.allcaps', { + h('button.button.btn-secondary.edit-account-name-modal-save-button.allcaps', { onClick: () => { if (this.state.inputText.length !== 0) { setAccountLabel(identity.address, this.state.inputText) diff --git a/ui/app/components/app/modals/export-private-key-modal.js b/ui/app/components/app/modals/export-private-key-modal.js index 639887d4c..70987330a 100644 --- a/ui/app/components/app/modals/export-private-key-modal.js +++ b/ui/app/components/app/modals/export-private-key-modal.js @@ -110,14 +110,14 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, (privateKey ? ( h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'export-private-key__button', onClick: () => hideModal(), }, this.context.t('done')) ) : ( h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'export-private-key__button', onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address), diff --git a/ui/app/components/app/modals/hide-token-confirmation-modal.js b/ui/app/components/app/modals/hide-token-confirmation-modal.js index 8a9a48fd2..e2b098923 100644 --- a/ui/app/components/app/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/app/modals/hide-token-confirmation-modal.js @@ -67,12 +67,12 @@ HideTokenConfirmationModal.prototype.render = function () { ]), h('div.hide-token-confirmation__buttons', {}, [ - h('button.btn-cancel.hide-token-confirmation__button.allcaps', { + h('button.btn-default.hide-token-confirmation__button.btn--large', { onClick: () => hideModal(), }, [ this.context.t('cancel'), ]), - h('button.btn-clear.hide-token-confirmation__button.allcaps', { + h('button.btn-secondary.hide-token-confirmation__button.btn--large', { onClick: () => hideToken(address), }, [ this.context.t('hide'), diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js index 2d73b2cfa..b8503ec1a 100644 --- a/ui/app/components/app/modals/notification-modal.js +++ b/ui/app/components/app/modals/notification-modal.js @@ -37,11 +37,11 @@ class NotificationModal extends Component { showButtons && h('div.notification-modal__buttons', [ - showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', { + showCancelButton && h('div.btn-default.notification-modal__buttons__btn', { onClick: hideModal, }, 'Cancel'), - showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', { + showConfirmButton && h('div.button.btn-secondary.notification-modal__buttons__btn', { onClick: () => { onConfirm() hideModal() diff --git a/ui/app/components/app/network-display/index.scss b/ui/app/components/app/network-display/index.scss index e9f2f2057..d70786d20 100644 --- a/ui/app/components/app/network-display/index.scss +++ b/ui/app/components/app/network-display/index.scss @@ -26,6 +26,10 @@ &--rinkeby { background-color: lighten($tulip-tree, 35%); } + + &--goerli { + background-color: lighten($dodger-blue, 35%); + } } &__name { @@ -53,5 +57,9 @@ &--rinkeby { background-color: $tulip-tree; } + + &--goerli { + background-color: $dodger-blue; + } } } diff --git a/ui/app/components/app/network-display/network-display.component.js b/ui/app/components/app/network-display/network-display.component.js index 1142e8606..9ef5341b0 100644 --- a/ui/app/components/app/network-display/network-display.component.js +++ b/ui/app/components/app/network-display/network-display.component.js @@ -6,12 +6,14 @@ import { ROPSTEN_CODE, RINKEYBY_CODE, KOVAN_CODE, + GOERLI_CODE, } from '../../../../../app/scripts/controllers/network/enums' const networkToClassHash = { [MAINNET_CODE]: 'mainnet', [ROPSTEN_CODE]: 'ropsten', [RINKEYBY_CODE]: 'rinkeby', + [GOERLI_CODE]: 'goerli', [KOVAN_CODE]: 'kovan', } diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js index e18404f42..783fb36df 100644 --- a/ui/app/components/app/network.js +++ b/ui/app/components/app/network.js @@ -50,6 +50,9 @@ Network.prototype.render = function () { } else if (providerName === 'rinkeby') { hoverText = context.t('rinkeby') iconName = 'rinkeby-test-network' + } else if (providerName === 'goerli') { + hoverText = context.t('goerli') + iconName = 'goerli-test-network' } else { hoverText = providerId iconName = 'private-network' @@ -63,6 +66,7 @@ Network.prototype.render = function () { 'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3, 'kovan-test-network': providerName === 'kovan', 'rinkeby-test-network': providerName === 'rinkeby', + 'goerli-test-network': providerName === 'goerli', }), title: hoverText, onClick: (event) => { @@ -113,33 +117,34 @@ Network.prototype.render = function () { h('.network-name', context.t('rinkeby')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) + case 'goerli-test-network': + return h('.network-indicator', [ + h(NetworkDropdownIcon, { + backgroundColor: '#3099f2', // $dodger-blue + nonSelectBackgroundColor: '#ecb23e', + loading: networkNumber === 'loading', + }), + h('.network-name', context.t('goerli')), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), + ]) default: return h('.network-indicator', [ networkNumber === 'loading' - ? h('span.pointer.network-indicator', { - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - }, + ? h('span.pointer.network-loading-spinner', { onClick: (event) => this.props.onClick(event), }, [ h('img', { title: context.t('attemptingConnect'), - style: { - width: '27px', - }, src: 'images/loading.svg', }), ]) : h('i.fa.fa-question-circle.fa-lg', { style: { - margin: '10px', color: 'rgb(125, 128, 130)', }, }), - h('.network-name', providerNick || context.t('privateNetwork')), + h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) } diff --git a/ui/app/components/app/shapeshift-form.js b/ui/app/components/app/shapeshift-form.js index 11459fd5e..34a6f3acd 100644 --- a/ui/app/components/app/shapeshift-form.js +++ b/ui/app/components/app/shapeshift-form.js @@ -245,7 +245,7 @@ ShapeshiftForm.prototype.render = function () { ]), !depositAddress && h(Button, { - type: 'primary', + type: 'secondary', large: true, className: `${btnClass} shapeshift-form__shapeshift-buy-btn`, disabled: !token, diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js index e47791b67..fa237f1d1 100644 --- a/ui/app/components/app/signature-request.js +++ b/ui/app/components/app/signature-request.js @@ -311,7 +311,7 @@ SignatureRequest.prototype.renderFooter = function () { }, }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'request-signature__footer__sign-button', onClick: event => { diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js index de8a3bbba..a8fb8c246 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js @@ -15,7 +15,7 @@ import { setCustomGasLimit, } from '../../../ducks/gas/gas.duck' import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSelector } from '../../../selectors/selectors' -import { isBalanceSufficient } from '../send/send.utils' +import { isBalanceSufficient } from '../../../pages/send/send.utils' const mapStateToProps = (state, ownProps) => { const { metamask: { knownMethodData, accounts } } = state diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js index 8559e2233..3f6abbb00 100644 --- a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js +++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js @@ -87,7 +87,7 @@ export default class TransactionViewBalance extends PureComponent { { !selectedToken && ( <Button - type="primary" + type="secondary" className="transaction-view-balance__button" onClick={() => { metricsEvent({ @@ -105,14 +105,14 @@ export default class TransactionViewBalance extends PureComponent { ) } <Button - type="primary" + type="secondary" className="transaction-view-balance__button" onClick={() => { metricsEvent({ eventOpts: { category: 'Navigation', action: 'Home', - name: 'Clicked Send', + name: selectedToken ? 'Clicked Send: Token' : 'Clicked Send: Eth', }, }) history.push(SEND_ROUTE) diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js index cec8228b1..b8bae5421 100644 --- a/ui/app/components/app/wallet-view.js +++ b/ui/app/components/app/wallet-view.js @@ -190,7 +190,7 @@ WalletView.prototype.render = function () { identities[selectedAddress].name, ]), - h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')), + h('button.btn-secondary.wallet-view__details-button', this.context.t('details')), ]), ]), diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js index 8abe1ab18..d9627e31b 100644 --- a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js +++ b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import AccountListItem from '../../app/send/account-list-item/account-list-item.component' +import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component' export default class AccountDropdownMini extends PureComponent { static propTypes = { diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js index bc74ceb3c..9691f38aa 100644 --- a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js +++ b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js @@ -2,7 +2,7 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import AccountDropdownMini from '../account-dropdown-mini.component' -import AccountListItem from '../../../app/send/account-list-item/account-list-item.component' +import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component' describe('AccountDropdownMini', () => { it('should render an account with an icon', () => { diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js index 5d19219b4..39e81317c 100644 --- a/ui/app/components/ui/button/button.component.js +++ b/ui/app/components/ui/button/button.component.js @@ -5,7 +5,7 @@ import classnames from 'classnames' const CLASSNAME_DEFAULT = 'btn-default' const CLASSNAME_PRIMARY = 'btn-primary' const CLASSNAME_SECONDARY = 'btn-secondary' -const CLASSNAME_CONFIRM = 'btn-confirm' +const CLASSNAME_CONFIRM = 'btn-primary' const CLASSNAME_RAISED = 'btn-raised' const CLASSNAME_LARGE = 'btn--large' const CLASSNAME_FIRST_TIME = 'btn--first-time' @@ -14,6 +14,11 @@ const typeHash = { default: CLASSNAME_DEFAULT, primary: CLASSNAME_PRIMARY, secondary: CLASSNAME_SECONDARY, + warning: 'btn-warning', + danger: 'btn-danger', + 'danger-primary': 'btn-danger-primary', + link: 'btn-link', + // TODO: Legacy button type to be deprecated confirm: CLASSNAME_CONFIRM, raised: CLASSNAME_RAISED, 'first-time': CLASSNAME_FIRST_TIME, @@ -38,7 +43,7 @@ export default class Button extends Component { <button className={classnames( 'button', - typeHash[type], + typeHash[type] || CLASSNAME_DEFAULT, large && CLASSNAME_LARGE, className )} diff --git a/ui/app/components/ui/button/button.stories.js b/ui/app/components/ui/button/button.stories.js index 667824a47..9df53439d 100644 --- a/ui/app/components/ui/button/button.stories.js +++ b/ui/app/components/ui/button/button.stories.js @@ -2,57 +2,70 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import Button from '.' -import { text } from '@storybook/addon-knobs/react' +import { text, boolean } from '@storybook/addon-knobs/react' +// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')} storiesOf('Button', module) - .add('primary', () => + .add('Button - Primary', () => <Button onClick={action('clicked')} type="primary" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> ) - .add('secondary', () => + .add('Button - Secondary', () => <Button onClick={action('clicked')} type="secondary" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> ) - .add('default', () => ( + .add('Button - Default', () => <Button onClick={action('clicked')} type="default" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) - .add('large primary', () => ( + ) + .add('Button - Warning', () => <Button onClick={action('clicked')} - type="primary" - large + type="warning" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) - .add('large secondary', () => ( + ) + .add('Button - Danger', () => <Button onClick={action('clicked')} - type="secondary" - large + type="danger" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) - .add('large default', () => ( + ) + .add('Button - Danger Primary', () => <Button onClick={action('clicked')} - type="default" - large + type="danger-primary" + disabled={boolean('disabled', false)} > {text('text', 'Click me')} </Button> - )) + ) + .add('Button - Link', () => + <Button + onClick={action('clicked')} + type="link" + disabled={boolean('disabled', false)} + > + {text('text', 'Click me')} + </Button> + ) diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss new file mode 100644 index 000000000..0fc87415b --- /dev/null +++ b/ui/app/components/ui/button/buttons.scss @@ -0,0 +1,244 @@ +/* + Buttons + */ + +$hover-secondary: #B0D7F2; +$hover-default: #B3B3B3; +$hover-confirm: #0372C3; +$hover-red: #FEB6BF; +$hover-red-primary: #C72837; +$hover-orange: #FFD3B5; + +%button { + @include h6; + + font-weight: 500; + font-family: Roboto, Arial; + line-height: 1.25rem; + padding: .75rem 1rem; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: 6px; + width: 100%; + outline: none; + transition: border-color .3s ease, background-color .3s ease; + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +%link { + @include h4; + + color: $Blue-500; + line-height: 1.25rem; + cursor: pointer; + background-color: transparent; + + &:hover { + color: $Blue-400; + } + + &:active { + color: $Blue-600; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: 1; + pointer-events: none; + color: $hover-secondary; + } +} + +%small-link { + @extend %link; + @include h6; +} + +.button { + @extend %button; +} + +.btn-secondary { + color: $Blue-500; + border: 2px solid $hover-secondary; + + &:hover { + border-color: $Blue-500; + } + + &:active { + background: $Blue-000; + border-color: $Blue-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-secondary; + } +} + +.btn-warning { + color: $Orange-500; + border: 2px solid $hover-orange; + + &:hover { + border-color: $Orange-500; + } + + &:active { + background: $Orange-000; + border-color: $Orange-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-orange; + } +} + +.btn-danger { + color: $Red-500; + border: 2px solid $hover-red; + + &:hover { + border-color: $Red-500; + } + + &:active { + background: $Red-000; + border-color: $Red-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-red; + } +} + +.btn-danger-primary { + color: $white; + border: 2px solid $Red-500; + background-color: $Red-500; + + &:hover { + border-color: $hover-red-primary; + background-color: $hover-red-primary; + } + + &:active { + background: $Red-600; + border-color: $Red-600; + } + + &--disabled, + &[disabled] { + opacity: 1; + border-color: $hover-red; + background-color: $hover-red; + } +} + +.btn-default { + color: $Grey-500; + border: 2px solid $hover-default; + + &:hover { + border-color: $Grey-500; + } + + &:active { + background: #FBFBFC; + border-color: $Grey-500; + } + + &--disabled, + &[disabled] { + opacity: 1; + color: $hover-default; + } +} + +.btn-primary { + color: $white; + border: 2px solid $Blue-500; + background-color: $Blue-500; + + &:hover { + border-color: $hover-confirm; + background-color: $hover-confirm; + } + + &:active { + background: $Blue-600; + border-color: $Blue-600; + } + + &--disabled, + &[disabled] { + border-color: $hover-secondary; + background-color: $hover-secondary; + } +} + +.btn-link { + @extend %link; +} + +.btn--large { + min-height: 54px; +} + +/** + All Buttons styles are deviations from design guide + */ + +.btn-raised { + color: $curious-blue; + background-color: $white; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + padding: 6px; + height: initial; + min-height: initial; + width: initial; + min-width: initial; +} + +.btn--first-time { + height: 54px; + width: 198px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + color: $white; + font-size: 1.25rem; + font-weight: 500; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, .9); + border-radius: 0; +} + +button[disabled], +input[type="submit"][disabled] { + cursor: not-allowed; + opacity: .5; +} + +button.primary { + padding: 8px 12px; + background: #f7861c; + box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + color: $white; + font-size: 1.1em; + font-family: Roboto; + text-transform: uppercase; +} diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss index b71a3cb9d..003c5a0e2 100644 --- a/ui/app/components/ui/page-container/index.scss +++ b/ui/app/components/ui/page-container/index.scss @@ -55,11 +55,6 @@ border-top: 1px solid $geyser; flex: 0 0 auto; - .btn-default, - .btn-confirm { - font-size: 1rem; - } - header { display: flex; flex-flow: row; @@ -86,9 +81,6 @@ } &__footer-button { - height: 55px; - font-size: 1rem; - text-transform: uppercase; margin-right: 16px; &:last-of-type { diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js index 85b16cefe..4ef203521 100644 --- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js +++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js @@ -45,7 +45,7 @@ export default class PageContainerFooter extends Component { </Button>} <Button - type={submitButtonType || 'primary'} + type={submitButtonType || 'secondary'} large className="page-container__footer-button" disabled={disabled} diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss index e4075d225..adc4a3531 100644 --- a/ui/app/components/ui/unit-input/index.scss +++ b/ui/app/components/ui/unit-input/index.scss @@ -7,7 +7,7 @@ border-radius: 4px; background-color: #fff; color: #4d4d4d; - font-size: 1rem; + font-size: 16px; padding: 8px 10px; position: relative; @@ -29,6 +29,8 @@ &__inputs { flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; } &__input { @@ -38,15 +40,20 @@ border: none; outline: 0 !important; max-width: 22ch; + height: 16px; + line-height: 18px; } &__input-container { display: flex; - align-items: center; + align-items: flex-start; + padding-bottom: 4px; } &__suffix { margin-left: 3px; + font-size: 1rem; + line-height: 1rem; } &--error { diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js index 7b414f177..c5f8350a6 100644 --- a/ui/app/components/ui/unit-input/unit-input.component.js +++ b/ui/app/components/ui/unit-input/unit-input.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { removeLeadingZeroes } from '../../app/send/send.utils' +import { removeLeadingZeroes } from '../../../pages/send/send.utils' /** * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss deleted file mode 100644 index 3e99d0ac6..000000000 --- a/ui/app/css/itcss/components/buttons.scss +++ /dev/null @@ -1,230 +0,0 @@ -/* - Buttons - */ - -.button { - min-height: 44px; - background: $white; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - border-radius: 4px; - font-size: 14px; - font-weight: 400; - transition: border-color .3s ease; - padding: 0 16px; - min-width: 140px; - width: 100%; - text-transform: uppercase; - outline: none; - font-family: Roboto; - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-primary { - color: $curious-blue; - border: 2px solid $spindle; - - &:active { - background: $zumthor; - border-color: $curious-blue; - } - - &:hover { - border-color: $curious-blue; - } -} - -.btn-secondary { - color: $monzo; - border: 2px solid lighten($monzo, 40%); - - &:active { - background: lighten($monzo, 55%); - border-color: $monzo; - } - - &:hover { - border-color: $monzo; - } -} - -.btn-default { - color: $scorpion; - border: 2px solid $dusty-gray; - - &:active { - background: $gallery; - border-color: $dusty-gray; - } - - &:hover { - border-color: $scorpion; - } -} - -.btn-confirm { - color: $white; - border: 2px solid $curious-blue; - background-color: $curious-blue; -} - -.btn-raised { - color: $curious-blue; - background-color: $white; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); - padding: 6px; - height: initial; - min-height: initial; - width: initial; - min-width: initial; -} - -.btn--first-time { - height: 54px; - width: 198px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); - color: $white; - font-size: 1.25rem; - font-weight: 500; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); - border-radius: 0; -} - -.btn--large { - min-height: 54px; -} - -.btn-green { - background-color: #02c9b1; // TODO: reusable color in colors.css -} - -.btn-clear { - background: $white; - text-align: center; - padding: .8rem 1rem; - color: $curious-blue; - border: 2px solid $spindle; - border-radius: 4px; - font-size: .85rem; - font-weight: 400; - transition: border-color .3s ease; - - &:hover { - border-color: $curious-blue; - } - - &--disabled, - &[disabled] { - cursor: auto; - opacity: .5; - pointer-events: none; - } -} - -.btn-cancel { - background: $white; - text-align: center; - padding: .9rem 1rem; - color: $scorpion; - border: 2px solid $dusty-gray; - border-radius: 4px; - font-size: .85rem; - font-weight: 400; - transition: border-color .3s ease; - width: 100%; - - &:hover { - border-color: $scorpion; - } -} - -// No longer used in flat design, remove when modal buttons done -// div.wallet-btn { -// border: 1px solid rgb(91, 93, 103); -// border-radius: 2px; -// height: 30px; -// width: 75px; -// font-size: 0.8em; -// text-align: center; -// line-height: 25px; -// } - -// .btn-red { -// background: rgba(254, 35, 17, 1); -// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); -// } - -button[disabled], -input[type="submit"][disabled] { - cursor: not-allowed; - opacity: .5; - // background: rgba(197, 197, 197, 1); - // box-shadow: 0 3px 6px rgba(197, 197, 197, .36); -} - -// button.spaced { -// margin: 2px; -// } - -// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { -// transform: scale(1.1); -// } -// button:not([disabled]):active, input[type="submit"]:not([disabled]):active { -// transform: scale(0.95); -// } - -button.primary { - padding: 8px 12px; - background: #f7861c; - box-shadow: 0 3px 6px rgba(247, 134, 28, .36); - color: $white; - font-size: 1.1em; - font-family: Roboto; - text-transform: uppercase; -} - -.btn-light { - padding: 8px 12px; - // background: #FFFFFF; // $bg-white - box-shadow: 0 3px 6px rgba(247, 134, 28, .36); - color: #585d67; // TODO: make reusable light button color - font-size: 1.1em; - font-family: Roboto; - text-transform: uppercase; - text-align: center; - line-height: 20px; - border-radius: 2px; - border: 1px solid #979797; // #TODO: make reusable light border color - opacity: .5; -} - -// TODO: cleanup: not used anywhere -button.btn-thin { - border: 1px solid; - border-color: #4d4d4d; - color: #4d4d4d; - background: rgb(255, 174, 41); - border-radius: 4px; - min-width: 200px; - margin: 12px 0; - padding: 6px; - font-size: 13px; -} - -.btn-tertiary { - border: 1px solid transparent; - border-radius: 2px; - background-color: transparent; - font-size: 16px; - line-height: 24px; - padding: 16px 42px; -} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index f2f37bfa3..3d426a33c 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,4 +1,4 @@ -@import './buttons.scss'; +@import '../../../components/ui/button/buttons'; @import './footer.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 42ef7ae0a..9c0a5cf61 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -538,6 +538,8 @@ } &__button { + @include paragraph; + @extend %button; width: 141px; margin: 0 5px; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index c828a2b26..2c6ca2522 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -29,6 +29,10 @@ &.rinkeby-test-network .menu-icon-circle div { background-color: rgba(235, 179, 63, .7) !important; } + + &.goerli-test-network .menu-icon-circle div { + background-color: rgba(48, 153, 242, .7) !important; + } } .dropdown-menu-item { @@ -48,6 +52,11 @@ font-size: 12px; padding: 0 4px; } + + .fa-question-circle { + margin: 0 4px 0 6px; + font-size: 1rem; + } } .network-name { @@ -165,5 +174,22 @@ } .network-caret { - margin: 0 8px 2px; + margin: 0 8px; +} + +.network-loading-spinner { + display: flex; + flex-flow: row nowrap; + align-items: center; + position: relative; + height: 16px; + width: 16px; + margin-left: 5px; + + img { + height: 26px; + position: absolute; + top: -5px; + left: -6px; + } } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 07ab04613..927640f0b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -549,7 +549,7 @@ } &__form-row { - margin: 14.5px 18px 0px; + margin: 8px 18px 0px; position: relative; display: flex; flex-flow: row; @@ -592,8 +592,8 @@ flex: 0 0 auto; } - &__from-dropdown { - height: 73px; + &__from-dropdown, + &__asset-dropdown { width: 100%; border: 1px solid $alto; border-radius: 4px; @@ -628,6 +628,112 @@ } } + &__from-dropdown { + height: 73px; + } + + &__asset-dropdown { + height: 54px; + border: none; + + &__asset { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 0 8px; + cursor: pointer; + + &:hover { + background-color: rgba($alto, 0.2); + } + } + + &__asset-icon { + .identicon { + border: 1px solid $alto; + } + } + + &__asset-data { + display: flex; + flex-flow: column nowrap; + margin-left: 8px; + } + + &__symbol { + font-size: 16px; + margin-bottom: 2px; + } + + &__name { + display: flex; + flex-flow: row nowrap; + font-size: 12px; + + &__label { + margin-right: .25rem; + } + } + + &__close-area { + z-index: 2000; + } + + &__list { + z-index: 2050; + position: absolute; + height: 220px; + width: 100%; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + top: 65px; + left: 0; + box-sizing: content-box; + overflow-y: scroll; + margin-top: 0; + padding: 4px 0; + + .send-v2__asset-dropdown__asset { + padding: 8px; + } + } + + &__input-wrapper { + border: 1px solid $alto; + border-radius: 4px; + height: 100%; + + &--opened { + position: relative; + z-index: 2050; + } + + .send-v2__asset-dropdown__asset { + height: 100%; + &:hover { + background-color: $white; + } + } + } + + &__input { + z-index: 1025; + position: relative; + height: 54px; + width: 100%; + border: none; + border-radius: 4px; + background-color: $white; + color: $tundora; + padding: 10px; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + } + } + &__to-autocomplete { position: relative; diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index d8e62c97a..8b282aa1e 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -18,6 +18,7 @@ body { height: 100%; margin: 0; padding: 0; + font-size: 16px; @media screen and (max-width: $break-small) { overflow-y: overlay; diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 18c444c8a..93107a106 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -403,3 +403,40 @@ font-weight: 400; font-style: normal; } + +@mixin fontScale($weight: 400, $size: 1rem) { + font-weight: $weight; + font-size: $size; +} + +@mixin h1($weight: 400, $size: 2.5rem){ + @include fontScale($weight, $size); +} + +@mixin h2($weight: 400, $size: 2rem){ + @include fontScale($weight, $size); +} + +@mixin h3($weight: 400, $size: 1.5rem){ + @include fontScale($weight, $size); +} + +@mixin h4($weight: 400, $size: 1.125rem){ + @include fontScale($weight, $size); +} + +@mixin h5($weight: 400, $size: 1rem){ + @include fontScale($weight, $size); +} + +@mixin h6($weight: 400, $size: .875rem){ + @include fontScale($weight, $size); +} + +@mixin h7($weight: 400, $size: .75rem){ + @include fontScale($weight, $size); +} + +@mixin paragraph($weight: 400, $size: 1rem){ + @include fontScale($weight, $size); +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 89bd8b96a..f7003b1f4 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -26,7 +26,7 @@ $dusty-gray: #9b9b9b; $alto: #dedede; $alabaster: #fafafa; $silver-chalice: #aeaeae; -$curious-blue: #2f9ae0; +$curious-blue: #037DD6; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; @@ -93,3 +93,19 @@ $break-large: 576px; $primary-font-type: Roboto; +$Blue-000: #eaf6ff; +$Blue-400: #1098fc; +$Blue-500: #037DD6; +$Blue-600: #0260a4; + +$Grey-000: #f2f3f4; +$Grey-500: #6A737D; + +$Red-000: #fcf2f3; +$Red-500: #D73A49; +$Red-600: #b92534; + +$Orange-000: #fef5ef; +$Orange-500: #F66A0A; + + diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js index 47c767d68..3ca487c1f 100644 --- a/ui/app/ducks/metamask/metamask.js +++ b/ui/app/ducks/metamask/metamask.js @@ -154,9 +154,26 @@ function reduceMetamask (state, action) { return newState case actions.SET_SELECTED_TOKEN: - return extend(metamaskState, { + newState = extend(metamaskState, { selectedTokenAddress: action.value, }) + const newSend = extend(metamaskState.send) + + if (metamaskState.send.editingTransactionId && !action.value) { + delete newSend.token + const unapprovedTx = newState.unapprovedTxs[newSend.editingTransactionId] || {} + const txParams = unapprovedTx.txParams || {} + newState.unapprovedTxs = extend(newState.unapprovedTxs, { + [newSend.editingTransactionId]: extend(unapprovedTx, { + txParams: extend(txParams, { data: '' }), + }), + }) + newSend.tokenBalance = null + newSend.balance = '0' + } + + newState.send = newSend + return newState case actions.SET_ACCOUNT_LABEL: const account = action.value.account diff --git a/ui/app/helpers/constants/common.js b/ui/app/helpers/constants/common.js index 58fae5e5f..a0d6e65b3 100644 --- a/ui/app/helpers/constants/common.js +++ b/ui/app/helpers/constants/common.js @@ -10,4 +10,5 @@ export const NETWORK_TYPES = { MAINNET: 'mainnet', RINKEBY: 'rinkeby', ROPSTEN: 'ropsten', + GOERLI: 'goerli', } diff --git a/ui/app/helpers/utils/metametrics.util.js b/ui/app/helpers/utils/metametrics.util.js index 01984bd5e..5ae3e8937 100644 --- a/ui/app/helpers/utils/metametrics.util.js +++ b/ui/app/helpers/utils/metametrics.util.js @@ -23,6 +23,7 @@ const METAMETRICS_CUSTOM_ERROR_FIELD = 'errorField' const METAMETRICS_CUSTOM_ERROR_MESSAGE = 'errorMessage' const METAMETRICS_CUSTOM_RPC_NETWORK_ID = 'networkId' const METAMETRICS_CUSTOM_RPC_CHAIN_ID = 'chainId' +const METAMETRICS_CUSTOM_GAS_CHANGED = 'gasChanged' const METAMETRICS_CUSTOM_NETWORK = 'network' const METAMETRICS_CUSTOM_ENVIRONMENT_TYPE = 'environmentType' @@ -43,6 +44,7 @@ const customVariableNameIdMap = { [METAMETRICS_CUSTOM_RPC_CHAIN_ID]: 2, [METAMETRICS_CUSTOM_ERROR_FIELD]: 1, [METAMETRICS_CUSTOM_ERROR_MESSAGE]: 2, + [METAMETRICS_CUSTOM_GAS_CHANGED]: 1, } const customDimensionsNameIdMap = { diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js index cb6c9536c..8d96b1487 100644 --- a/ui/app/helpers/utils/transactions.util.js +++ b/ui/app/helpers/utils/transactions.util.js @@ -30,6 +30,21 @@ export function getTokenData (data = '') { return abiDecoder.decodeMethod(data) } +async function getMethodFrom4Byte (fourBytePrefix) { + const fourByteResponse = (await fetch(`https://www.4byte.directory/api/v1/signatures/?hex_signature=${fourBytePrefix}`, { + referrerPolicy: 'no-referrer-when-downgrade', + body: null, + method: 'GET', + mode: 'cors', + })).json() + + if (fourByteResponse.count === 1) { + return fourByteResponse.results[0].text_signature + } else { + return null + } +} + const registry = new MethodRegistry({ provider: global.ethereumProvider }) /** @@ -43,7 +58,16 @@ const registry = new MethodRegistry({ provider: global.ethereumProvider }) const fourBytePrefix = prefixedData.slice(0, 10) try { - const sig = await registry.lookup(fourBytePrefix) + const fourByteSig = getMethodFrom4Byte(fourBytePrefix).catch((e) => { + log.error(e) + return null + }) + + let sig = await registry.lookup(fourBytePrefix) + + if (!sig) { + sig = await fourByteSig + } if (!sig) { return {} @@ -57,8 +81,8 @@ const registry = new MethodRegistry({ provider: global.ethereumProvider }) } } catch (error) { log.error(error) - const contractData = getTokenData(data) - const { name } = contractData || {} + const tokenData = getTokenData(data) + const { name } = tokenData || {} return { name } } diff --git a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss index cc495dfb0..a363c77c5 100644 --- a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss +++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss @@ -18,6 +18,7 @@ } &__link { - color: $curious-blue; + @extend %link; + margin-top: .5rem; } } diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js index 7edb8f541..9a118a815 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js @@ -103,7 +103,7 @@ export default class ConfirmAddSuggestedToken extends Component { { this.context.t('cancel') } </Button> <Button - type="primary" + type="secondary" large className="page-container__footer-button" onClick={() => { diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js index a90fe148f..cc73b2ea7 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js @@ -18,7 +18,7 @@ const mapStateToProps = ({ metamask }) => { const mapDispatchToProps = dispatch => { return { - addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)), + addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, Number(decimals), image)), removeSuggestedTokens: () => dispatch(removeSuggestedTokens()), } } diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js index c0ec624ac..f0a19e8d9 100644 --- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js +++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js @@ -96,7 +96,7 @@ export default class ConfirmAddToken extends Component { { this.context.t('back') } </Button> <Button - type="primary" + type="secondary" large className="page-container__footer-button" onClick={() => { diff --git a/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js index 9bc0daab9..c90ccc917 100644 --- a/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js +++ b/ui/app/pages/confirm-deploy-contract/confirm-deploy-contract.component.js @@ -56,7 +56,7 @@ export default class ConfirmDeployContract extends Component { render () { return ( <ConfirmTransactionBase - action={this.context.t('contractDeployment')} + actionKey={'contractDeployment'} dataComponent={this.renderData()} /> ) diff --git a/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js index 8daad675e..68280f624 100644 --- a/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js +++ b/ui/app/pages/confirm-send-ether/confirm-send-ether.component.js @@ -30,7 +30,7 @@ export default class ConfirmSendEther extends Component { return ( <ConfirmTransactionBase - action={this.context.t('confirm')} + actionKey={'confirm'} hideData={hideData} onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)} /> diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js index 9e749322f..be819b5f0 100644 --- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums' import { getEnvironmentType } from '../../../../app/scripts/lib/util' import ConfirmPageContainer, { ConfirmDetailRow } from '../../components/app/confirm-page-container' -import { isBalanceSufficient } from '../../components/app/send/send.utils' +import { isBalanceSufficient } from '../send/send.utils' import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes' import { INSUFFICIENT_FUNDS_ERROR_KEY, @@ -64,7 +64,7 @@ export default class ConfirmTransactionBase extends Component { updateGasAndCalculate: PropTypes.func, customGas: PropTypes.object, // Component props - action: PropTypes.string, + actionKey: PropTypes.string, contentComponent: PropTypes.node, dataComponent: PropTypes.node, detailsComponent: PropTypes.node, @@ -159,7 +159,7 @@ export default class ConfirmTransactionBase extends Component { } handleEditGas () { - const { onEditGas, showCustomizeGasModal, action, txData: { origin }, methodData = {} } = this.props + const { onEditGas, showCustomizeGasModal, actionKey, txData: { origin }, methodData = {} } = this.props this.context.metricsEvent({ eventOpts: { @@ -169,7 +169,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -292,7 +292,7 @@ export default class ConfirmTransactionBase extends Component { } handleEdit () { - const { txData, tokenData, tokenProps, onEdit, action, txData: { origin }, methodData = {} } = this.props + const { txData, tokenData, tokenProps, onEdit, actionKey, txData: { origin }, methodData = {} } = this.props this.context.metricsEvent({ eventOpts: { @@ -302,7 +302,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -331,7 +331,7 @@ export default class ConfirmTransactionBase extends Component { handleCancel () { const { metricsEvent } = this.context - const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, action, txData: { origin }, methodData = {} } = this.props + const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction, actionKey, txData: { origin }, methodData = {} } = this.props if (onCancel) { metricsEvent({ @@ -342,7 +342,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -358,7 +358,7 @@ export default class ConfirmTransactionBase extends Component { handleSubmit () { const { metricsEvent } = this.context - const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, action, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props + const { txData: { origin }, sendTransaction, clearConfirmTransaction, txData, history, onSubmit, actionKey, metaMetricsSendCount = 0, setMetaMetricsSendCount, methodData = {} } = this.props const { submitting } = this.state if (submitting) { @@ -377,7 +377,7 @@ export default class ConfirmTransactionBase extends Component { }, customVariables: { recipientKnown: null, - functionType: action || getMethodName(methodData.name) || this.context.t('contractInteraction'), + functionType: actionKey || getMethodName(methodData.name) || 'contractInteraction', origin, }, }) @@ -517,7 +517,7 @@ export default class ConfirmTransactionBase extends Component { valid: propsValid = true, errorMessage, errorKey: propsErrorKey, - action, + actionKey, title, subtitle, hideSubtitle, @@ -543,7 +543,7 @@ export default class ConfirmTransactionBase extends Component { toName={toName} toAddress={toAddress} showEdit={onEdit && !isTxReprice} - action={action || getMethodName(name) || this.context.t('contractInteraction')} + action={actionKey && this.context.t(actionKey) || getMethodName(name) || this.context.t('contractInteraction')} title={title} titleComponent={this.renderTitleComponent()} subtitle={subtitle} diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js index 83543f1a4..2b087f5cc 100644 --- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -14,9 +14,9 @@ import { GAS_LIMIT_TOO_LOW_ERROR_KEY, } from '../../helpers/constants/error-keys' import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util' -import { isBalanceSufficient, calcGasTotal } from '../../components/app/send/send.utils' +import { isBalanceSufficient, calcGasTotal } from '../send/send.utils' import { conversionGreaterThan } from '../../helpers/utils/conversion-util' -import { MIN_GAS_LIMIT_DEC } from '../../components/app/send/send.constants' +import { MIN_GAS_LIMIT_DEC } from '../send/send.constants' import { checksumAddress, addressSlicer, valuesFor } from '../../helpers/utils/util' import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../selectors/selectors' diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js index 617fb8833..a521c7eaf 100644 --- a/ui/app/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/pages/create-account/connect-hardware/account-list.js @@ -152,7 +152,7 @@ class AccountList extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'confirm', + type: 'primary', large: true, className: 'new-account-connect-form__button unlock', disabled, diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js index 7e9dee970..f5a83e6cf 100644 --- a/ui/app/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js @@ -46,7 +46,7 @@ class ConnectScreen extends Component { this.renderConnectToTrezorButton(), ]), h(Button, { - type: 'confirm', + type: 'primary', large: true, className: 'hw-connect__connect-btn', onClick: this.connect, diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js index 17bef763c..ad430ba58 100644 --- a/ui/app/pages/create-account/import-account/json.js +++ b/ui/app/pages/create-account/import-account/json.js @@ -61,7 +61,7 @@ class JsonImportSubview extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js index 450614e87..0cdf25ce9 100644 --- a/ui/app/pages/create-account/import-account/private-key.js +++ b/ui/app/pages/create-account/import-account/private-key.js @@ -75,7 +75,7 @@ PrivateKeyImportView.prototype.render = function () { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), diff --git a/ui/app/pages/create-account/new-account.js b/ui/app/pages/create-account/new-account.js index 316fbe6f1..d19e6bc38 100644 --- a/ui/app/pages/create-account/new-account.js +++ b/ui/app/pages/create-account/new-account.js @@ -47,7 +47,7 @@ class NewAccountCreateForm extends Component { }, [this.context.t('cancel')]), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: () => { diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 433dad6e2..5092d277e 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -36,6 +36,20 @@ export default class ImportWithSeedPhrase extends PureComponent { .join(' ') } + componentWillMount () { + window.onbeforeunload = () => this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Close window on import screen', + }, + customVariables: { + errorLabel: 'Seed Phrase Error', + errorMessage: this.state.seedPhraseError, + }, + }) + } + handleSeedPhraseChange (seedPhrase) { let seedPhraseError = '' @@ -172,6 +186,10 @@ export default class ImportWithSeedPhrase extends PureComponent { action: 'Import Seed Phrase', name: 'Go Back from Onboarding Import', }, + customVariables: { + errorLabel: 'Seed Phrase Error', + errorMessage: seedPhraseError, + }, }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} @@ -243,7 +261,7 @@ export default class ImportWithSeedPhrase extends PureComponent { </span> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" disabled={!this.isValid() || !termsChecked} onClick={this.handleImport} diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js index c040cff88..de073af2f 100644 --- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -211,7 +211,7 @@ export default class NewAccount extends PureComponent { </span> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" disabled={!this.isValid() || !termsChecked} onClick={this.handleCreate} diff --git a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js index 3434d117a..590cf0303 100644 --- a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -34,7 +34,7 @@ export default class UniqueImageScreen extends PureComponent { { t('protectYourKeysMessage2') } </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={() => { this.context.metricsEvent({ diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index c4292331b..83b0e7fc6 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -71,7 +71,7 @@ export default class EndOfFlowScreen extends PureComponent { </a>. </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={async () => { await completeOnboarding() diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 19c668278..ffaff9acf 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -149,7 +149,7 @@ export default class MetaMetricsOptIn extends Component { }) }} submitText={'I agree'} - submitButtonType={'confirm'} + submitButtonType={'primary'} disabled={false} /> <div className="metametrics-opt-in__bottom-text"> diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 59b4f73a6..f3bfc3171 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -142,7 +142,7 @@ export default class ConfirmSeedPhrase extends PureComponent { } </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleSubmit} disabled={!this.isValid()} diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index ee352d74e..4e9948a0e 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -130,7 +130,7 @@ export default class RevealSeedPhrase extends PureComponent { </div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleNext} disabled={!isShowingSeedPhrase} diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index b25a15514..5af29a505 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -95,7 +95,7 @@ export default class SelectAction extends PureComponent { </div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleCreate} > diff --git a/ui/app/pages/first-time-flow/welcome/welcome.component.js b/ui/app/pages/first-time-flow/welcome/welcome.component.js index 3b8d6eb17..c720d2572 100644 --- a/ui/app/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/app/pages/first-time-flow/welcome/welcome.component.js @@ -56,7 +56,7 @@ export default class Welcome extends PureComponent { <div>{ t('happyToSeeYou') }</div> </div> <Button - type="confirm" + type="primary" className="first-time-flow__button" onClick={this.handleContinue} > diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js index 7508654dc..d0a5d7b47 100644 --- a/ui/app/pages/home/home.container.js +++ b/ui/app/pages/home/home.container.js @@ -3,7 +3,7 @@ import { compose } from 'recompose' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction' - +`` const mapStateToProps = state => { const { metamask, appState } = state const { diff --git a/ui/app/pages/keychains/reveal-seed.js b/ui/app/pages/keychains/reveal-seed.js index edc9db5a0..e83e3fd98 100644 --- a/ui/app/pages/keychains/reveal-seed.js +++ b/ui/app/pages/keychains/reveal-seed.js @@ -116,7 +116,7 @@ class RevealSeedPage extends Component { onClick: () => this.props.history.push(DEFAULT_ROUTE), }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'page-container__footer-button', onClick: event => this.handleSubmit(event), diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js index 0938ad103..00a514534 100644 --- a/ui/app/pages/mobile-sync/index.js +++ b/ui/app/pages/mobile-sync/index.js @@ -315,7 +315,7 @@ class MobileSyncPage extends Component { }, this.context.t('cancel')), h(Button, { - type: 'primary', + type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: event => this.handleSubmit(event), diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js index e06d88c90..e38a6d6ce 100644 --- a/ui/app/pages/routes/index.js +++ b/ui/app/pages/routes/index.js @@ -10,7 +10,7 @@ import { getMetaMaskAccounts, getNetworkIdentifier } from '../../selectors/selec // init import FirstTimeFlow from '../first-time-flow' // accounts -const SendTransactionScreen = require('../../components/app/send/send.container') +const SendTransactionScreen = require('../send/send.container') const ConfirmTransaction = require('../confirm-transaction') // slideout menu @@ -267,6 +267,10 @@ class Routes extends Component { name = this.context.t('connectingToKovan') } else if (providerName === 'rinkeby') { name = this.context.t('connectingToRinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('connectingToLocalhost') + } else if (providerName === 'goerli') { + name = this.context.t('connectingToGoerli') } else { name = this.context.t('connectingTo', [providerId]) } @@ -288,6 +292,10 @@ class Routes extends Component { name = this.context.t('kovan') } else if (providerName === 'rinkeby') { name = this.context.t('rinkeby') + } else if (providerName === 'localhost') { + name = this.context.t('localhost') + } else if (providerName === 'goerli') { + name = this.context.t('goerli') } else { name = this.context.t('unknownNetwork') } diff --git a/ui/app/components/app/send/README.md b/ui/app/pages/send/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/README.md +++ b/ui/app/pages/send/README.md diff --git a/ui/app/components/app/send/account-list-item/account-list-item-README.md b/ui/app/pages/send/account-list-item/account-list-item-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/account-list-item/account-list-item-README.md +++ b/ui/app/pages/send/account-list-item/account-list-item-README.md diff --git a/ui/app/components/app/send/account-list-item/account-list-item.component.js b/ui/app/pages/send/account-list-item/account-list-item.component.js index 18e77b4f9..e6cca39b9 100644 --- a/ui/app/components/app/send/account-list-item/account-list-item.component.js +++ b/ui/app/pages/send/account-list-item/account-list-item.component.js @@ -1,11 +1,11 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { checksumAddress } from '../../../../helpers/utils/util' -import Identicon from '../../../ui/identicon' -import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display' -import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common' -import Tooltip from '../../../ui/tooltip-v2' +import { checksumAddress } from '../../../helpers/utils/util' +import Identicon from '../../../components/ui/identicon' +import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display' +import { PRIMARY, SECONDARY } from '../../../helpers/constants/common' +import Tooltip from '../../../components/ui/tooltip-v2' export default class AccountListItem extends Component { diff --git a/ui/app/components/app/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js index bc9a60f49..21f800306 100644 --- a/ui/app/components/app/send/account-list-item/account-list-item.container.js +++ b/ui/app/pages/send/account-list-item/account-list-item.container.js @@ -8,7 +8,7 @@ import { getIsMainnet, isBalanceCached, preferencesSelector, -} from '../../../../selectors/selectors' +} from '../../../selectors/selectors' import AccountListItem from './account-list-item.component' export default connect(mapStateToProps)(AccountListItem) diff --git a/ui/app/components/app/send/account-list-item/index.js b/ui/app/pages/send/account-list-item/index.js index 907485cf7..907485cf7 100644 --- a/ui/app/components/app/send/account-list-item/index.js +++ b/ui/app/pages/send/account-list-item/index.js diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js index 5df9f77d6..bec88402d 100644 --- a/ui/app/components/app/send/account-list-item/tests/account-list-item-component.test.js +++ b/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js @@ -3,15 +3,15 @@ import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' import proxyquire from 'proxyquire' -import Identicon from '../../../../ui/identicon' -import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display' +import Identicon from '../../../../components/ui/identicon' +import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display' const utilsMethodStubs = { checksumAddress: sinon.stub().returns('mockCheckSumAddress'), } const AccountListItem = proxyquire('../account-list-item.component.js', { - '../../../../helpers/utils/util': utilsMethodStubs, + '../../../helpers/utils/util': utilsMethodStubs, }).default diff --git a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js index 19a9a02d0..33f932daf 100644 --- a/ui/app/components/app/send/account-list-item/tests/account-list-item-container.test.js +++ b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js @@ -15,7 +15,7 @@ proxyquire('../account-list-item.container.js', { getCurrentCurrency: () => `mockCurrentCurrency`, getNativeCurrency: () => `mockNativeCurrency`, }, - '../../../../selectors/selectors': { + '../../../selectors/selectors': { isBalanceCached: () => `mockBalanceIsCached`, preferencesSelector: ({ showFiatInTestnets }) => ({ showFiatInTestnets, diff --git a/ui/app/components/app/send/index.js b/ui/app/pages/send/index.js index b5114babc..b5114babc 100644 --- a/ui/app/components/app/send/index.js +++ b/ui/app/pages/send/index.js diff --git a/ui/app/components/app/send/send-content/index.js b/ui/app/pages/send/send-content/index.js index 891c17e6a..891c17e6a 100644 --- a/ui/app/components/app/send/send-content/index.js +++ b/ui/app/pages/send/send-content/index.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/README.md b/ui/app/pages/send/send-content/send-amount-row/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/README.md +++ b/ui/app/pages/send/send-content/send-amount-row/README.md diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js index f17137c1e..f17137c1e 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js index 16c5a0db5..cd48a105f 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js @@ -10,11 +10,11 @@ import { calcMaxAmount } from './amount-max-button.utils.js' import { updateSendAmount, setMaxModeTo, -} from '../../../../../../store/actions' +} from '../../../../../store/actions' import AmountMaxButton from './amount-max-button.component' import { updateSendErrors, -} from '../../../../../../ducks/send/send.duck' +} from '../../../../../ducks/send/send.duck' export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton) diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js index 69fec1994..69fec1994 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.selectors.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js index f4c8fad8a..a570e49b4 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js @@ -1,7 +1,7 @@ const { multiplyCurrencies, subtractCurrencies, -} = require('../../../../../../helpers/utils/conversion-util') +} = require('../../../../../helpers/utils/conversion-util') const ethUtil = require('ethereumjs-util') function calcMaxAmount ({ balance, gasTotal, selectedToken, tokenBalance }) { diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js index ee8271494..ee8271494 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/index.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/index.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js index b04d3897f..b04d3897f 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js index f446e330c..a75ed5e8f 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-container.test.js @@ -29,8 +29,8 @@ proxyquire('../amount-max-button.container.js', { }, './amount-max-button.selectors.js': { getMaxModeOn: (s) => `mockMaxModeOn:${s}` }, './amount-max-button.utils.js': { calcMaxAmount: (mockObj) => mockObj.val + 1 }, - '../../../../../../store/actions': actionSpies, - '../../../../../../ducks/send/send.duck': duckActionSpies, + '../../../../../store/actions': actionSpies, + '../../../../../ducks/send/send.duck': duckActionSpies, }) describe('amount-max-button container', () => { diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js index 655fe1969..655fe1969 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js index 1ee858f67..1ee858f67 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-utils.test.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/index.js b/ui/app/pages/send/send-content/send-amount-row/index.js index abc6852fe..abc6852fe 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/index.js +++ b/ui/app/pages/send/send-content/send-amount-row/index.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js index e725e7eda..c0241ea91 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.component.js +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.component.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' import AmountMaxButton from './amount-max-button' -import UserPreferencedCurrencyInput from '../../../user-preferenced-currency-input' -import UserPreferencedTokenInput from '../../../user-preferenced-token-input' +import UserPreferencedCurrencyInput from '../../../../components/app/user-preferenced-currency-input' +import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input' export default class SendAmountRow extends Component { diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js index 0646355ab..2b3470da4 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.container.js +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.container.js @@ -17,10 +17,10 @@ import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils' import { setMaxModeTo, updateSendAmount, -} from '../../../../../store/actions' +} from '../../../../store/actions' import { updateSendErrors, -} from '../../../../../ducks/send/send.duck' +} from '../../../../ducks/send/send.duck' import SendAmountRow from './send-amount-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow) diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.scss +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.scss diff --git a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js index fb08c7ed7..fb08c7ed7 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/send-amount-row.selectors.js +++ b/ui/app/pages/send/send-content/send-amount-row/send-amount-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js index 14a71129f..62e0676db 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-component.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-component.test.js @@ -6,7 +6,7 @@ import SendAmountRow from '../send-amount-row.component.js' import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' import AmountMaxButton from '../amount-max-button/amount-max-button.container' -import UserPreferencedTokenInput from '../../../../user-preferenced-token-input' +import UserPreferencedTokenInput from '../../../../../components/app/user-preferenced-token-input' const propsMethodSpies = { setMaxModeTo: sinon.spy(), diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js index 6d20202b0..dada1c5e9 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-container.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-container.test.js @@ -37,8 +37,8 @@ proxyquire('../send-amount-row.container.js', { getAmountErrorObject: (mockDataObject) => ({ ...mockDataObject, mockChange: true }), getGasFeeErrorObject: (mockDataObject) => ({ ...mockDataObject, mockGasFeeErrorChange: true }), }, - '../../../../../store/actions': actionSpies, - '../../../../../ducks/send/send.duck': duckActionSpies, + '../../../../store/actions': actionSpies, + '../../../../ducks/send/send.duck': duckActionSpies, }) describe('send-amount-row container', () => { diff --git a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js index 4672cb8a7..4672cb8a7 100644 --- a/ui/app/components/app/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-amount-row/tests/send-amount-row-selectors.test.js diff --git a/ui/app/pages/send/send-content/send-asset-row/index.js b/ui/app/pages/send/send-content/send-asset-row/index.js new file mode 100644 index 000000000..ba424a083 --- /dev/null +++ b/ui/app/pages/send/send-content/send-asset-row/index.js @@ -0,0 +1 @@ +export { default } from './send-asset-row.container' diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js new file mode 100644 index 000000000..de2d9462f --- /dev/null +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -0,0 +1,152 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import SendRowWrapper from '../send-row-wrapper' +import Identicon from '../../../../components/ui/identicon/identicon.component' +import TokenBalance from '../../../../components/ui/token-balance' +import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display' +import {PRIMARY} from '../../../../helpers/constants/common' + +export default class SendAssetRow extends Component { + static propTypes = { + tokens: PropTypes.arrayOf( + PropTypes.shape({ + address: PropTypes.string, + decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + symbol: PropTypes.string, + }) + ).isRequired, + accounts: PropTypes.object.isRequired, + selectedAddress: PropTypes.string.isRequired, + selectedTokenAddress: PropTypes.string, + setSelectedToken: PropTypes.func.isRequired, + } + + static contextTypes = { + t: PropTypes.func, + metricsEvent: PropTypes.func, + } + + state = { + isShowingDropdown: false, + } + + openDropdown = () => this.setState({ isShowingDropdown: true }) + + closeDropdown = () => this.setState({ isShowingDropdown: false }) + + selectToken = address => { + this.setState({ + isShowingDropdown: false, + }, () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Transactions', + action: 'Send Screen', + name: 'User clicks "Assets" dropdown', + }, + customVariables: { + assetSelected: address ? 'ERC20' : 'ETH', + }, + }) + this.props.setSelectedToken(address) + }) + } + + render () { + const { t } = this.context + + return ( + <SendRowWrapper label={`${t('asset')}:`}> + <div className="send-v2__asset-dropdown"> + { this.renderSelectedToken() } + { this.renderAssetDropdown() } + </div> + </SendRowWrapper> + ) + } + + renderSelectedToken () { + const { selectedTokenAddress } = this.props + const token = this.props.tokens.find(({ address }) => address === selectedTokenAddress) + return ( + <div + className="send-v2__asset-dropdown__input-wrapper" + onClick={this.openDropdown} + > + { token ? this.renderAsset(token) : this.renderEth() } + </div> + ) + } + + renderAssetDropdown () { + return this.state.isShowingDropdown && ( + <div> + <div + className="send-v2__asset-dropdown__close-area" + onClick={this.closeDropdown} + /> + <div className="send-v2__asset-dropdown__list"> + { this.renderEth() } + { this.props.tokens.map(token => this.renderAsset(token)) } + </div> + </div> + ) + } + + renderEth () { + const { t } = this.context + const { accounts, selectedAddress } = this.props + + const balanceValue = accounts[selectedAddress] ? accounts[selectedAddress].balance : '' + + return ( + <div + className="send-v2__asset-dropdown__asset" + onClick={() => this.selectToken()} + > + <div className="send-v2__asset-dropdown__asset-icon"> + <Identicon diameter={36} /> + </div> + <div className="send-v2__asset-dropdown__asset-data"> + <div className="send-v2__asset-dropdown__symbol">ETH</div> + <div className="send-v2__asset-dropdown__name"> + <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span> + <UserPreferencedCurrencyDisplay + value={balanceValue} + type={PRIMARY} + /> + </div> + </div> + </div> + ) + } + + + renderAsset (token) { + const { address, symbol } = token + const { t } = this.context + + return ( + <div + key={address} className="send-v2__asset-dropdown__asset" + onClick={() => this.selectToken(address)} + > + <div className="send-v2__asset-dropdown__asset-icon"> + <Identicon address={address} diameter={36} /> + </div> + <div className="send-v2__asset-dropdown__asset-data"> + <div className="send-v2__asset-dropdown__symbol"> + { symbol } + </div> + <div className="send-v2__asset-dropdown__name"> + <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span> + <TokenBalance + token={token} + withSymbol + /> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js new file mode 100644 index 000000000..57b62fba1 --- /dev/null +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux' +import SendAssetRow from './send-asset-row.component' +import {getMetaMaskAccounts} from '../../../../selectors/selectors' +import { setSelectedToken } from '../../../../store/actions' + +function mapStateToProps (state) { + return { + tokens: state.metamask.tokens, + selectedAddress: state.metamask.selectedAddress, + selectedTokenAddress: state.metamask.selectedTokenAddress, + accounts: getMetaMaskAccounts(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + setSelectedToken: address => dispatch(setSelectedToken(address)), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(SendAssetRow) diff --git a/ui/app/components/app/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js index 2c09ceb19..d799806c7 100644 --- a/ui/app/components/app/send/send-content/send-content.component.js +++ b/ui/app/pages/send/send-content/send-content.component.js @@ -1,11 +1,12 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerContent from '../../../ui/page-container/page-container-content.component' +import PageContainerContent from '../../../components/ui/page-container/page-container-content.component' import SendAmountRow from './send-amount-row' import SendFromRow from './send-from-row' import SendGasRow from './send-gas-row' import SendHexDataRow from './send-hex-data-row' import SendToRow from './send-to-row' +import SendAssetRow from './send-asset-row' export default class SendContent extends Component { @@ -26,6 +27,7 @@ export default class SendContent extends Component { updateGas={this.updateGas} scanQrCode={ _ => this.props.scanQrCode()} /> + <SendAssetRow /> <SendAmountRow updateGas={this.updateGas} /> <SendGasRow /> {(this.props.showHexData && ( diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/index.js b/ui/app/pages/send/send-content/send-dropdown-list/index.js index 04af6536c..04af6536c 100644 --- a/ui/app/components/app/send/send-content/send-dropdown-list/index.js +++ b/ui/app/pages/send/send-content/send-dropdown-list/index.js diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js b/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js index 0d026bc69..0d026bc69 100644 --- a/ui/app/components/app/send/send-content/send-dropdown-list/send-dropdown-list.component.js +++ b/ui/app/pages/send/send-content/send-dropdown-list/send-dropdown-list.component.js diff --git a/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js b/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js index b92dd4dfe..b92dd4dfe 100644 --- a/ui/app/components/app/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js +++ b/ui/app/pages/send/send-content/send-dropdown-list/tests/send-dropdown-list-component.test.js diff --git a/ui/app/components/app/send/send-content/send-from-row/index.js b/ui/app/pages/send/send-content/send-from-row/index.js index 0a79726b2..0a79726b2 100644 --- a/ui/app/components/app/send/send-content/send-from-row/index.js +++ b/ui/app/pages/send/send-content/send-from-row/index.js diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js index dfa53e970..dfa53e970 100644 --- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.component.js +++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.component.js diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js index fe3ac9aa1..fe3ac9aa1 100644 --- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.container.js +++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.container.js diff --git a/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js index 03ef4806b..03ef4806b 100644 --- a/ui/app/components/app/send/send-content/send-from-row/send-from-row.selectors.js +++ b/ui/app/pages/send/send-content/send-from-row/send-from-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js index 18811c57e..18811c57e 100644 --- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-component.test.js +++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-component.test.js diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js index fd771ea77..fd771ea77 100644 --- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-container.test.js +++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-container.test.js diff --git a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js index ecb57bbc3..ecb57bbc3 100644 --- a/ui/app/components/app/send/send-content/send-from-row/tests/send-from-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-from-row/tests/send-from-row-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/README.md b/ui/app/pages/send/send-content/send-gas-row/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/README.md +++ b/ui/app/pages/send/send-content/send-gas-row/README.md diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js index 48088607a..3f5587318 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import UserPreferencedCurrencyDisplay from '../../../../user-preferenced-currency-display' -import { PRIMARY, SECONDARY } from '../../../../../../helpers/constants/common' +import UserPreferencedCurrencyDisplay from '../../../../../components/app/user-preferenced-currency-display' +import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common' export default class GasFeeDisplay extends Component { diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js index dba0edb7b..dba0edb7b 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/index.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/index.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js index cb4180508..eedd43221 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js @@ -2,7 +2,7 @@ import React from 'react' import assert from 'assert' import {shallow} from 'enzyme' import GasFeeDisplay from '../gas-fee-display.component' -import UserPreferencedCurrencyDisplay from '../../../../../user-preferenced-currency-display' +import UserPreferencedCurrencyDisplay from '../../../../../../components/app/user-preferenced-currency-display' import sinon from 'sinon' diff --git a/ui/app/components/app/send/send-content/send-gas-row/index.js b/ui/app/pages/send/send-content/send-gas-row/index.js index 3c7ff1d5f..3c7ff1d5f 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/index.js +++ b/ui/app/pages/send/send-content/send-gas-row/index.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js index 424a65b20..1b850ac57 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.component.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' import GasFeeDisplay from './gas-fee-display/gas-fee-display.component' -import GasPriceButtonGroup from '../../../gas-customization/gas-price-button-group' -import AdvancedGasInputs from '../../../gas-customization/advanced-gas-inputs' +import GasPriceButtonGroup from '../../../../components/app/gas-customization/gas-price-button-group' +import AdvancedGasInputs from '../../../../components/app/gas-customization/advanced-gas-inputs' export default class SendGasRow extends Component { @@ -20,8 +20,8 @@ export default class SendGasRow extends Component { gasButtonGroupShown: PropTypes.bool, advancedInlineGasShown: PropTypes.bool, resetGasButtons: PropTypes.func, - gasPrice: PropTypes.number, - gasLimit: PropTypes.number, + gasPrice: PropTypes.string, + gasLimit: PropTypes.string, insufficientBalance: PropTypes.bool, } diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js index f81670c02..c4daa98af 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.container.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.container.js @@ -15,18 +15,18 @@ import { getBasicGasEstimateLoadingStatus, getRenderableEstimateDataForSmallButtonsFromGWEI, getDefaultActiveButtonIndex, -} from '../../../../../selectors/custom-gas' +} from '../../../../selectors/custom-gas' import { showGasButtonGroup, -} from '../../../../../ducks/send/send.duck' +} from '../../../../ducks/send/send.duck' import { resetCustomData, setCustomGasPrice, setCustomGasLimit, -} from '../../../../../ducks/gas/gas.duck' +} from '../../../../ducks/gas/gas.duck' import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js' -import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../../store/actions' -import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../../selectors/selectors' +import { showModal, setGasPrice, setGasLimit, setGasTotal } from '../../../../store/actions' +import { getAdvancedInlineGasShown, getCurrentEthBalance, getSelectedToken } from '../../../../selectors/selectors' import SendGasRow from './send-gas-row.component' export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendGasRow) diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.scss +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.scss diff --git a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js index 79c838543..79c838543 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/send-gas-row.selectors.js +++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js index 08f26854e..0cbc92621 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-component.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-component.test.js @@ -6,7 +6,7 @@ import SendGasRow from '../send-gas-row.component.js' import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component' -import GasPriceButtonGroup from '../../../../gas-customization/gas-price-button-group' +import GasPriceButtonGroup from '../../../../../components/app/gas-customization/gas-price-button-group' const propsMethodSpies = { showCustomizeGasModal: sinon.spy(), diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js index d1f753639..ddc6ea985 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-container.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-container.test.js @@ -32,7 +32,7 @@ proxyquire('../send-gas-row.container.js', { return () => ({}) }, }, - '../../../../../selectors/selectors': { + '../../../../selectors/selectors': { getCurrentEthBalance: (s) => `mockCurrentEthBalance:${s}`, getAdvancedInlineGasShown: (s) => `mockAdvancedInlineGasShown:${s}`, getSelectedToken: () => false, @@ -59,14 +59,14 @@ proxyquire('../send-gas-row.container.js', { gasFeeIsInError: (s) => `mockGasFeeError:${s}`, getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`, }, - '../../../../../store/actions': actionSpies, - '../../../../../selectors/custom-gas': { + '../../../../store/actions': actionSpies, + '../../../../selectors/custom-gas': { getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`, getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => `mockGasButtonInfo:${s}`, getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length, }, - '../../../../../ducks/send/send.duck': sendDuckSpies, - '../../../../../ducks/gas/gas.duck': gasDuckSpies, + '../../../../ducks/send/send.duck': sendDuckSpies, + '../../../../ducks/gas/gas.duck': gasDuckSpies, }) describe('send-gas-row container', () => { diff --git a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js index bd3c9a257..bd3c9a257 100644 --- a/ui/app/components/app/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/index.js b/ui/app/pages/send/send-content/send-hex-data-row/index.js index 08c341067..08c341067 100644 --- a/ui/app/components/app/send/send-content/send-hex-data-row/index.js +++ b/ui/app/pages/send/send-content/send-hex-data-row/index.js diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js index 62a74a77b..62a74a77b 100644 --- a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.component.js +++ b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js diff --git a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js index 76c929d08..8b1c540c3 100644 --- a/ui/app/components/app/send/send-content/send-hex-data-row/send-hex-data-row.container.js +++ b/ui/app/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import { updateSendHexData, -} from '../../../../../store/actions' +} from '../../../../store/actions' import SendHexDataRow from './send-hex-data-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow) diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/index.js b/ui/app/pages/send/send-content/send-row-wrapper/index.js index d17545dcc..d17545dcc 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/index.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/index.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js index c00617f83..c00617f83 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/index.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/index.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message-README.md diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js index 61bc7bab7..61bc7bab7 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js index 59622047f..59622047f 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.scss diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js index 2304a43d2..2304a43d2 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-component.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js index eecff165d..eecff165d 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-error-message/tests/send-row-error-message-container.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js index fd4d19ef7..fd4d19ef7 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/index.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/index.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js index f1caa8f99..f1caa8f99 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js index 7df14fd96..7df14fd96 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.container.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.scss diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js index bd803d833..bd803d833 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-component.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js index 225bf056c..225bf056c 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/tests/send-row-warning-message-container.test.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper-README.md +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper-README.md diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js index 94309bd96..94309bd96 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.component.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.component.js diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/send-row-wrapper.scss +++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-wrapper.scss diff --git a/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js index 30280e1d0..30280e1d0 100644 --- a/ui/app/components/app/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js +++ b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js diff --git a/ui/app/components/app/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js index 121f15148..121f15148 100644 --- a/ui/app/components/app/send/send-content/send-to-row/index.js +++ b/ui/app/pages/send/send-content/send-to-row/index.js diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row-README.md +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js index e8a55cb2a..9baf327c1 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' -import EnsInput from '../../../ens-input' +import EnsInput from '../../../../components/app/ens-input' import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js' export default class SendToRow extends Component { diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js index 30865d295..2cbe9fcd0 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.container.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js @@ -14,13 +14,13 @@ import { } from './send-to-row.selectors.js' import { updateSendTo, -} from '../../../../../store/actions' +} from '../../../../store/actions' import { updateSendErrors, updateSendWarnings, openToDropdown, closeToDropdown, -} from '../../../../../ducks/send/send.duck' +} from '../../../../ducks/send/send.duck' import SendToRow from './send-to-row.component' export default connect(mapStateToProps, mapDispatchToProps)(SendToRow) diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js index a6160d335..a6160d335 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.selectors.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js diff --git a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js index 60e75d34c..d0a43f086 100644 --- a/ui/app/components/app/send/send-content/send-to-row/send-to-row.utils.js +++ b/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js @@ -4,8 +4,8 @@ const { KNOWN_RECIPIENT_ADDRESS_ERROR, INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR, } = require('../../send.constants') -const { isValidAddress, isEthNetwork } = require('../../../../../helpers/utils/util') -import { checkExistingAddresses } from '../../../../../pages/add-token/util' +const { isValidAddress, isEthNetwork } = require('../../../../helpers/utils/util') +import { checkExistingAddresses } from '../../../add-token/util' const ethUtil = require('ethereumjs-util') const contractMap = require('eth-contract-metadata') diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js index d4d054057..c180d97f1 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-component.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js @@ -16,7 +16,7 @@ const SendToRow = proxyquire('../send-to-row.component.js', { }).default import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component' -import EnsInput from '../../../../ens-input' +import EnsInput from '../../../../../components/app/ens-input' const propsMethodSpies = { closeToDropdown: sinon.spy(), diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js index 94b4f1024..bb8702e9a 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-container.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js @@ -36,8 +36,8 @@ proxyquire('../send-to-row.container.js', { sendToIsInWarning: (s) => `mockInWarning:${s}`, getTokens: (s) => `mockTokens:${s}`, }, - '../../../../../store/actions': actionSpies, - '../../../../../ducks/send/send.duck': duckActionSpies, + '../../../../store/actions': actionSpies, + '../../../../ducks/send/send.duck': duckActionSpies, }) describe('send-to-row container', () => { diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js index 0fa342d1e..0fa342d1e 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-selectors.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js diff --git a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js index 95882d640..f29f5efec 100644 --- a/ui/app/components/app/send/send-content/send-to-row/tests/send-to-row-utils.test.js +++ b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js @@ -13,7 +13,7 @@ const stubs = { } const toRowUtils = proxyquire('../send-to-row.utils.js', { - '../../../../../helpers/utils/util': { + '../../../../helpers/utils/util': { isValidAddress: stubs.isValidAddress, }, }) diff --git a/ui/app/components/app/send/send-content/tests/send-content-component.test.js b/ui/app/pages/send/send-content/tests/send-content-component.test.js index 7d102c930..521c6523e 100644 --- a/ui/app/components/app/send/send-content/tests/send-content-component.test.js +++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js @@ -3,12 +3,13 @@ import assert from 'assert' import { shallow } from 'enzyme' import SendContent from '../send-content.component.js' -import PageContainerContent from '../../../../ui/page-container/page-container-content.component' +import PageContainerContent from '../../../../components/ui/page-container/page-container-content.component' import SendAmountRow from '../send-amount-row/send-amount-row.container' import SendFromRow from '../send-from-row/send-from-row.container' import SendGasRow from '../send-gas-row/send-gas-row.container' import SendToRow from '../send-to-row/send-to-row.container' import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container' +import SendAssetRow from '../send-asset-row/send-asset-row.container' describe('SendContent Component', function () { let wrapper @@ -32,9 +33,10 @@ describe('SendContent Component', function () { const PageContainerContentChild = wrapper.find(PageContainerContent).children() assert(PageContainerContentChild.childAt(0).is(SendFromRow)) assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(3).is(SendGasRow)) - assert(PageContainerContentChild.childAt(4).is(SendHexDataRow)) + assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) + assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) + assert(PageContainerContentChild.childAt(4).is(SendGasRow)) + assert(PageContainerContentChild.childAt(5).is(SendHexDataRow)) }) it('should not render the SendHexDataRow if props.showHexData is false', () => { @@ -42,9 +44,10 @@ describe('SendContent Component', function () { const PageContainerContentChild = wrapper.find(PageContainerContent).children() assert(PageContainerContentChild.childAt(0).is(SendFromRow)) assert(PageContainerContentChild.childAt(1).is(SendToRow)) - assert(PageContainerContentChild.childAt(2).is(SendAmountRow)) - assert(PageContainerContentChild.childAt(3).is(SendGasRow)) - assert.equal(PageContainerContentChild.childAt(4).exists(), false) + assert(PageContainerContentChild.childAt(2).is(SendAssetRow)) + assert(PageContainerContentChild.childAt(3).is(SendAmountRow)) + assert(PageContainerContentChild.childAt(4).is(SendGasRow)) + assert.equal(PageContainerContentChild.childAt(5).exists(), false) }) }) }) diff --git a/ui/app/components/app/send/send-footer/README.md b/ui/app/pages/send/send-footer/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-footer/README.md +++ b/ui/app/pages/send/send-footer/README.md diff --git a/ui/app/components/app/send/send-footer/index.js b/ui/app/pages/send/send-footer/index.js index 58e91d622..58e91d622 100644 --- a/ui/app/components/app/send/send-footer/index.js +++ b/ui/app/pages/send/send-footer/index.js diff --git a/ui/app/components/app/send/send-footer/send-footer.component.js b/ui/app/pages/send/send-footer/send-footer.component.js index cc891a9b3..16a8fdde2 100644 --- a/ui/app/components/app/send/send-footer/send-footer.component.js +++ b/ui/app/pages/send/send-footer/send-footer.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerFooter from '../../../ui/page-container/page-container-footer' -import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' +import PageContainerFooter from '../../../components/ui/page-container/page-container-footer' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class SendFooter extends Component { @@ -27,6 +27,7 @@ export default class SendFooter extends Component { unapprovedTxs: PropTypes.object, update: PropTypes.func, sendErrors: PropTypes.object, + gasChangedLabel: PropTypes.string, } static contextTypes = { @@ -57,6 +58,7 @@ export default class SendFooter extends Component { update, toAccounts, history, + gasChangedLabel, } = this.props const { metricsEvent } = this.context @@ -91,6 +93,9 @@ export default class SendFooter extends Component { action: 'Edit Screen', name: 'Complete', }, + customVariables: { + gasChanged: gasChangedLabel, + }, }) history.push(CONFIRM_TRANSACTION_ROUTE) }) diff --git a/ui/app/components/app/send/send-footer/send-footer.container.js b/ui/app/pages/send/send-footer/send-footer.container.js index ea3fd7ee4..68f4dc7c3 100644 --- a/ui/app/components/app/send/send-footer/send-footer.container.js +++ b/ui/app/pages/send/send-footer/send-footer.container.js @@ -6,7 +6,7 @@ import { signTokenTx, signTx, updateTransaction, -} from '../../../../store/actions' +} from '../../../store/actions' import SendFooter from './send-footer.component' import { getGasLimit, @@ -31,10 +31,21 @@ import { constructTxParams, constructUpdatedTx, } from './send-footer.utils' +import { + getRenderableEstimateDataForSmallButtonsFromGWEI, + getDefaultActiveButtonIndex, +} from '../../../selectors/custom-gas' export default connect(mapStateToProps, mapDispatchToProps)(SendFooter) function mapStateToProps (state) { + const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state) + const gasPrice = getGasPrice(state) + const activeButtonIndex = getDefaultActiveButtonIndex(gasButtonInfo, gasPrice) + const gasChangedLabel = activeButtonIndex >= 0 + ? gasButtonInfo[activeButtonIndex].labelKey + : 'custom' + return { amount: getSendAmount(state), data: getSendHexData(state), @@ -50,6 +61,7 @@ function mapStateToProps (state) { tokenBalance: getTokenBalance(state), unapprovedTxs: getUnapprovedTxs(state), sendErrors: getSendErrors(state), + gasChangedLabel, } } diff --git a/ui/app/components/app/send/send-footer/send-footer.scss b/ui/app/pages/send/send-footer/send-footer.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-footer/send-footer.scss +++ b/ui/app/pages/send/send-footer/send-footer.scss diff --git a/ui/app/components/app/send/send-footer/send-footer.selectors.js b/ui/app/pages/send/send-footer/send-footer.selectors.js index e20addfdc..e20addfdc 100644 --- a/ui/app/components/app/send/send-footer/send-footer.selectors.js +++ b/ui/app/pages/send/send-footer/send-footer.selectors.js diff --git a/ui/app/components/app/send/send-footer/send-footer.utils.js b/ui/app/pages/send/send-footer/send-footer.utils.js index abb2ebc77..91ac29014 100644 --- a/ui/app/components/app/send/send-footer/send-footer.utils.js +++ b/ui/app/pages/send/send-footer/send-footer.utils.js @@ -38,6 +38,7 @@ function constructUpdatedTx ({ }) { const unapprovedTx = unapprovedTxs[editingTransactionId] const txParamsData = unapprovedTx.txParams.data ? unapprovedTx.txParams.data : data + const editingTx = { ...unapprovedTx, txParams: Object.assign( diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js index 6683ca8c0..56fc95df2 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-component.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js @@ -2,10 +2,10 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' -import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../../helpers/constants/routes' +import { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import SendFooter from '../send-footer.component.js' -import PageContainerFooter from '../../../../ui/page-container/page-container-footer' +import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' const propsMethodSpies = { addToAddressBookIfNew: sinon.spy(), diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js index 878b0aa19..118ebf356 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-container.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-container.test.js @@ -28,7 +28,7 @@ proxyquire('../send-footer.container.js', { return () => ({}) }, }, - '../../../../store/actions': actionSpies, + '../../../store/actions': actionSpies, '../send.selectors': { getGasLimit: (s) => `mockGasLimit:${s}`, getGasPrice: (s) => `mockGasPrice:${s}`, @@ -46,6 +46,10 @@ proxyquire('../send-footer.container.js', { }, './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` }, './send-footer.utils': utilsStubs, + '../../../selectors/custom-gas': { + getRenderableEstimateDataForSmallButtonsFromGWEI: (s) => ([{ labelKey: `mockLabel:${s}` }]), + getDefaultActiveButtonIndex: () => 0, + }, }) describe('send-footer container', () => { @@ -68,6 +72,7 @@ describe('send-footer container', () => { tokenBalance: 'mockTokenBalance:mockState', unapprovedTxs: 'mockUnapprovedTxs:mockState', sendErrors: 'mockSendErrors:mockState', + gasChangedLabel: 'mockLabel:mockState', }) }) diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js b/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js index 8de032f57..8de032f57 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-selectors.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-selectors.test.js diff --git a/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js b/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js index 28ff0c891..f4705e691 100644 --- a/ui/app/components/app/send/send-footer/tests/send-footer-utils.test.js +++ b/ui/app/pages/send/send-footer/tests/send-footer-utils.test.js @@ -149,7 +149,6 @@ describe('send-footer utils', () => { }, }, }) - assert.deepEqual(result, { unapprovedTxParam: 'someOtherParam', txParams: { diff --git a/ui/app/components/app/send/send-header/README.md b/ui/app/pages/send/send-header/README.md index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send-header/README.md +++ b/ui/app/pages/send/send-header/README.md diff --git a/ui/app/components/app/send/send-header/index.js b/ui/app/pages/send/send-header/index.js index 0b17f0b7d..0b17f0b7d 100644 --- a/ui/app/components/app/send/send-header/index.js +++ b/ui/app/pages/send/send-header/index.js diff --git a/ui/app/components/app/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js index f216954ef..76e35494a 100644 --- a/ui/app/components/app/send/send-header/send-header.component.js +++ b/ui/app/pages/send/send-header/send-header.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import PageContainerHeader from '../../../ui/page-container/page-container-header' -import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes' +import PageContainerHeader from '../../../components/ui/page-container/page-container-header' +import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class SendHeader extends Component { @@ -25,7 +25,6 @@ export default class SendHeader extends Component { return ( <PageContainerHeader onClose={() => this.onClose()} - subtitle={this.context.t(...this.props.subtitleParams)} title={this.context.t(this.props.titleKey)} /> ) diff --git a/ui/app/components/app/send/send-header/send-header.container.js b/ui/app/pages/send/send-header/send-header.container.js index ce53fba9a..1a9c5e9c0 100644 --- a/ui/app/components/app/send/send-header/send-header.container.js +++ b/ui/app/pages/send/send-header/send-header.container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import { clearSend } from '../../../../store/actions' +import { clearSend } from '../../../store/actions' import SendHeader from './send-header.component' import { getSubtitleParams, getTitleKey } from './send-header.selectors' diff --git a/ui/app/components/app/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js index d7c9d3766..d7c9d3766 100644 --- a/ui/app/components/app/send/send-header/send-header.selectors.js +++ b/ui/app/pages/send/send-header/send-header.selectors.js diff --git a/ui/app/components/app/send/send-header/tests/send-header-component.test.js b/ui/app/pages/send/send-header/tests/send-header-component.test.js index db2ee8967..91ac7e343 100644 --- a/ui/app/components/app/send/send-header/tests/send-header-component.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-component.test.js @@ -2,10 +2,10 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' -import { DEFAULT_ROUTE } from '../../../../../helpers/constants/routes' +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import SendHeader from '../send-header.component.js' -import PageContainerHeader from '../../../../ui/page-container/page-container-header' +import PageContainerHeader from '../../../../components/ui/page-container/page-container-header' const propsMethodSpies = { clearSend: sinon.spy(), @@ -57,10 +57,8 @@ describe('SendHeader Component', function () { it('should pass the correct props to PageContainerHeader', () => { const { onClose, - subtitle, title, } = wrapper.find(PageContainerHeader).props() - assert.equal(subtitle, 'mockSubtitleKeymockVal') assert.equal(title, 'mockTitleKey') assert.equal(SendHeader.prototype.onClose.callCount, 0) onClose() diff --git a/ui/app/components/app/send/send-header/tests/send-header-container.test.js b/ui/app/pages/send/send-header/tests/send-header-container.test.js index 634c3424b..fdad8aab3 100644 --- a/ui/app/components/app/send/send-header/tests/send-header-container.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-container.test.js @@ -17,7 +17,7 @@ proxyquire('../send-header.container.js', { return () => ({}) }, }, - '../../../../store/actions': actionSpies, + '../../../store/actions': actionSpies, './send-header.selectors': { getTitleKey: (s) => `mockTitleKey:${s}`, getSubtitleParams: (s) => `mockSubtitleParams:${s}`, diff --git a/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js index e0c6a3ab3..e0c6a3ab3 100644 --- a/ui/app/components/app/send/send-header/tests/send-header-selectors.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js diff --git a/ui/app/components/app/send/send.component.js b/ui/app/pages/send/send.component.js index a38b681b0..5f0c9c9f2 100644 --- a/ui/app/components/app/send/send.component.js +++ b/ui/app/pages/send/send.component.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import PersistentForm from '../../../../lib/persistent-form' +import PersistentForm from '../../../lib/persistent-form' import { getAmountErrorObject, getGasFeeErrorObject, @@ -112,6 +112,7 @@ export default class SendTransactionScreen extends PersistentForm { gasTotal: prevGasTotal, tokenBalance: prevTokenBalance, network: prevNetwork, + selectedToken: prevSelectedToken, } = prevProps const uninitialized = [prevBalance, prevGasTotal].every(n => n === null) @@ -161,6 +162,13 @@ export default class SendTransactionScreen extends PersistentForm { this.updateGas() } } + + const prevTokenAddress = prevSelectedToken && prevSelectedToken.address + const selectedTokenAddress = selectedToken && selectedToken.address + + if (selectedTokenAddress && prevTokenAddress !== selectedTokenAddress) { + this.updateSendToken() + } } componentDidMount () { @@ -171,18 +179,7 @@ export default class SendTransactionScreen extends PersistentForm { } componentWillMount () { - const { - from: { address }, - selectedToken, - tokenContract, - updateSendTokenBalance, - } = this.props - - updateSendTokenBalance({ - selectedToken, - tokenContract, - address, - }) + this.updateSendToken() // Show QR Scanner modal if ?scan=true if (window.location.search === '?scan=true') { @@ -199,6 +196,21 @@ export default class SendTransactionScreen extends PersistentForm { this.props.resetSendState() } + updateSendToken () { + const { + from: { address }, + selectedToken, + tokenContract, + updateSendTokenBalance, + } = this.props + + updateSendTokenBalance({ + selectedToken, + tokenContract, + address, + }) + } + render () { const { history, showHexData } = this.props diff --git a/ui/app/components/app/send/send.constants.js b/ui/app/pages/send/send.constants.js index 36549038e..d3fa38d10 100644 --- a/ui/app/components/app/send/send.constants.js +++ b/ui/app/pages/send/send.constants.js @@ -1,5 +1,5 @@ const ethUtil = require('ethereumjs-util') -const { conversionUtil, multiplyCurrencies } = require('../../../helpers/utils/conversion-util') +const { conversionUtil, multiplyCurrencies } = require('../../helpers/utils/conversion-util') const MIN_GAS_PRICE_DEC = '0' const MIN_GAS_PRICE_HEX = (parseInt(MIN_GAS_PRICE_DEC)).toString(16) diff --git a/ui/app/components/app/send/send.container.js b/ui/app/pages/send/send.container.js index e65463b93..69adbb765 100644 --- a/ui/app/components/app/send/send.container.js +++ b/ui/app/pages/send/send.container.js @@ -2,6 +2,10 @@ import { connect } from 'react-redux' import SendEther from './send.component' import { withRouter } from 'react-router-dom' import { compose } from 'recompose' +const { + getSelectedAddress, +} = require('../../selectors/selectors') + import { getAmountConversionRate, getBlockGasLimit, @@ -12,7 +16,6 @@ import { getGasTotal, getPrimaryCurrency, getRecentBlocks, - getSelectedAddress, getSelectedToken, getSelectedTokenContract, getSelectedTokenToFiatRate, @@ -31,21 +34,21 @@ import { setGasTotal, showQrScanner, qrCodeDetected, -} from '../../../store/actions' +} from '../../store/actions' import { resetSendState, updateSendErrors, -} from '../../../ducks/send/send.duck' +} from '../../ducks/send/send.duck' import { fetchBasicGasEstimates, -} from '../../../ducks/gas/gas.duck' +} from '../../ducks/gas/gas.duck' import { calcGasTotal, } from './send.utils.js' import { SEND_ROUTE, -} from '../../../helpers/constants/routes' +} from '../../helpers/constants/routes' module.exports = compose( withRouter, diff --git a/ui/app/components/app/send/send.scss b/ui/app/pages/send/send.scss index e69de29bb..e69de29bb 100644 --- a/ui/app/components/app/send/send.scss +++ b/ui/app/pages/send/send.scss diff --git a/ui/app/components/app/send/send.selectors.js b/ui/app/pages/send/send.selectors.js index 2ec677ad1..d4035df28 100644 --- a/ui/app/components/app/send/send.selectors.js +++ b/ui/app/pages/send/send.selectors.js @@ -1,18 +1,19 @@ -const { valuesFor } = require('../../../helpers/utils/util') +const { valuesFor } = require('../../helpers/utils/util') const abi = require('human-standard-token-abi') const { multiplyCurrencies, -} = require('../../../helpers/utils/conversion-util') +} = require('../../helpers/utils/conversion-util') const { getMetaMaskAccounts, -} = require('../../../selectors/selectors') + getSelectedAddress, +} = require('../../selectors/selectors') const { estimateGasPriceFromRecentBlocks, calcGasTotal, } = require('./send.utils') import { getFastPriceEstimateInHexWEI, -} from '../../../selectors/custom-gas' +} from '../../selectors/custom-gas' const selectors = { accountsWithSendEtherInfoSelector, @@ -33,7 +34,6 @@ const selectors = { getPrimaryCurrency, getRecentBlocks, getSelectedAccount, - getSelectedAddress, getSelectedIdentity, getSelectedToken, getSelectedTokenContract, @@ -149,12 +149,6 @@ function getSelectedAccount (state) { return accounts[selectedAddress] } -function getSelectedAddress (state) { - const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0] - - return selectedAddress -} - function getSelectedIdentity (state) { const selectedAddress = getSelectedAddress(state) const identities = state.metamask.identities @@ -246,9 +240,7 @@ function getSendTo (state) { function getSendToAccounts (state) { const fromAccounts = accountsWithSendEtherInfoSelector(state) const addressBookAccounts = getAddressBook(state) - const allAccounts = [...fromAccounts, ...addressBookAccounts] - // TODO: figure out exactly what the below returns and put a descriptive variable name on it - return Object.entries(allAccounts).map(([key, account]) => account) + return [...fromAccounts, ...addressBookAccounts] } function getSendWarnings (state) { diff --git a/ui/app/components/app/send/send.utils.js b/ui/app/pages/send/send.utils.js index 7609d46ea..4acc174f9 100644 --- a/ui/app/components/app/send/send.utils.js +++ b/ui/app/pages/send/send.utils.js @@ -5,10 +5,10 @@ const { multiplyCurrencies, conversionGreaterThan, conversionLessThan, -} = require('../../../helpers/utils/conversion-util') +} = require('../../helpers/utils/conversion-util') const { calcTokenAmount, -} = require('../../../helpers/utils/token-util') +} = require('../../helpers/utils/token-util') const { BASE_TOKEN_GAS_COST, INSUFFICIENT_FUNDS_ERROR, diff --git a/ui/app/components/app/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js index 738c14839..81955cc1d 100644 --- a/ui/app/components/app/send/tests/send-component.test.js +++ b/ui/app/pages/send/tests/send-component.test.js @@ -3,7 +3,7 @@ import assert from 'assert' import proxyquire from 'proxyquire' import { shallow } from 'enzyme' import sinon from 'sinon' -import timeout from '../../../../../lib/test-timeout' +import timeout from '../../../../lib/test-timeout' import SendHeader from '../send-header/send-header.container' import SendContent from '../send-content/send-content.component' diff --git a/ui/app/components/app/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js index 9538b67b3..b3e202030 100644 --- a/ui/app/components/app/send/tests/send-container.test.js +++ b/ui/app/pages/send/tests/send-container.test.js @@ -35,7 +35,6 @@ proxyquire('../send.container.js', { getGasTotal: (s) => `mockGasTotal:${s}`, getPrimaryCurrency: (s) => `mockPrimaryCurrency:${s}`, getRecentBlocks: (s) => `mockRecentBlocks:${s}`, - getSelectedAddress: (s) => `mockSelectedAddress:${s}`, getSelectedToken: (s) => `mockSelectedToken:${s}`, getSelectedTokenContract: (s) => `mockTokenContract:${s}`, getSelectedTokenToFiatRate: (s) => `mockTokenToFiatRate:${s}`, @@ -47,11 +46,15 @@ proxyquire('../send.container.js', { getTokenBalance: (s) => `mockTokenBalance:${s}`, getQrCodeData: (s) => `mockQrCodeData:${s}`, }, - '../../../store/actions': actionSpies, - '../../../ducks/send/send.duck': duckActionSpies, + '../../selectors/selectors': { + getSelectedAddress: (s) => `mockSelectedAddress:${s}`, + }, + '../../store/actions': actionSpies, + '../../ducks/send/send.duck': duckActionSpies, './send.utils.js': { calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice, }, + }) describe('send container', () => { diff --git a/ui/app/components/app/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js index cff26a191..cff26a191 100644 --- a/ui/app/components/app/send/tests/send-selectors-test-data.js +++ b/ui/app/pages/send/tests/send-selectors-test-data.js diff --git a/ui/app/components/app/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js index cdc86fe59..ccc126795 100644 --- a/ui/app/components/app/send/tests/send-selectors.test.js +++ b/ui/app/pages/send/tests/send-selectors.test.js @@ -20,7 +20,6 @@ const { getPrimaryCurrency, getRecentBlocks, getSelectedAccount, - getSelectedAddress, getSelectedIdentity, getSelectedToken, getSelectedTokenContract, @@ -274,14 +273,6 @@ describe('send selectors', () => { }) }) - describe('getSelectedAddress()', () => { - it('should', () => { - assert.equal( - getSelectedAddress(mockState), - '0xd85a4b6a394794842887b8284293d69163007bbb' - ) - }) - }) describe('getSelectedIdentity()', () => { it('should return the identity object of the currently selected address', () => { diff --git a/ui/app/components/app/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js index fc4c6deed..b19535b9e 100644 --- a/ui/app/components/app/send/tests/send-utils.test.js +++ b/ui/app/pages/send/tests/send-utils.test.js @@ -9,7 +9,7 @@ import { const { addCurrencies, subtractCurrencies, -} = require('../../../../helpers/utils/conversion-util') +} = require('../../../helpers/utils/conversion-util') const { INSUFFICIENT_FUNDS_ERROR, @@ -32,7 +32,7 @@ const stubs = { } const sendUtils = proxyquire('../send.utils.js', { - '../../../helpers/utils/conversion-util': { + '../../helpers/utils/conversion-util': { addCurrencies: stubs.addCurrencies, conversionUtil: stubs.conversionUtil, conversionGTE: stubs.conversionGTE, @@ -40,7 +40,7 @@ const sendUtils = proxyquire('../send.utils.js', { conversionGreaterThan: stubs.conversionGreaterThan, conversionLessThan: stubs.conversionLessThan, }, - '../../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount }, + '../../helpers/utils/token-util': { calcTokenAmount: stubs.calcTokenAmount }, 'ethereumjs-abi': { rawEncode: stubs.rawEncode, }, diff --git a/ui/app/components/app/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js index 183967c58..183967c58 100644 --- a/ui/app/components/app/send/to-autocomplete.component.js +++ b/ui/app/pages/send/to-autocomplete.component.js diff --git a/ui/app/components/app/send/to-autocomplete/index.js b/ui/app/pages/send/to-autocomplete/index.js index 244d301d1..244d301d1 100644 --- a/ui/app/components/app/send/to-autocomplete/index.js +++ b/ui/app/pages/send/to-autocomplete/index.js diff --git a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js index d3db8cb59..b246413fb 100644 --- a/ui/app/components/app/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js @@ -4,8 +4,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const AccountListItem = require('../account-list-item/account-list-item.component').default const connect = require('react-redux').connect -const Tooltip = require('../../../ui/tooltip') -const checksumAddress = require('../../../../helpers/utils/util').checksumAddress +const Tooltip = require('../../../components/ui/tooltip') +const checksumAddress = require('../../../helpers/utils/util').checksumAddress ToAutoComplete.contextTypes = { t: PropTypes.func, diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index d1cad1746..14b9daae6 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -189,7 +189,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={event => { event.preventDefault() @@ -219,7 +219,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={() => { window.logStateString((err, result) => { @@ -251,7 +251,7 @@ export default class AdvancedTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="warning" large className="settings-tab__button--orange" onClick={event => { diff --git a/ui/app/pages/settings/info-tab/index.scss b/ui/app/pages/settings/info-tab/index.scss index 43ad6f652..9cc7e21b2 100644 --- a/ui/app/pages/settings/info-tab/index.scss +++ b/ui/app/pages/settings/info-tab/index.scss @@ -30,7 +30,7 @@ } &__link-text { - color: $curious-blue; + @extend %link; } &__version-number { diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 233561115..01a28bac7 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -39,7 +39,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="primary" + type="secondary" large onClick={() => { window.logStateString((err, result) => { @@ -73,7 +73,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="warning" large className="settings-tab__button--orange" onClick={event => { @@ -101,7 +101,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__content-item"> <div className="settings-page__content-item-col"> <Button - type="secondary" + type="danger" large onClick={event => { event.preventDefault() diff --git a/ui/app/pages/settings/settings-tab/index.scss b/ui/app/pages/settings/settings-tab/index.scss index ef32b0e4c..c1750af2c 100644 --- a/ui/app/pages/settings/settings-tab/index.scss +++ b/ui/app/pages/settings/settings-tab/index.scss @@ -6,19 +6,15 @@ } &__advanced-link { - color: $curious-blue; + @extend %small-link; padding-left: 5px; } &__rpc-save-button { align-self: flex-end; padding: 5px; - text-transform: uppercase; - color: $dusty-gray; cursor: pointer; width: 25%; - min-width: 80px; - height: 33px; } &__button--red { @@ -35,20 +31,6 @@ } } - &__button--orange { - border-color: lighten($ecstasy, 20%); - color: $ecstasy; - - &:active { - background: lighten($ecstasy, 40%); - border-color: $ecstasy; - } - - &:hover { - border-color: $ecstasy; - } - } - &__radio-buttons { display: flex; align-items: center; diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js index ecffb37ca..5ba786f0f 100644 --- a/ui/app/selectors/custom-gas.js +++ b/ui/app/selectors/custom-gas.js @@ -18,7 +18,7 @@ import { } from '../helpers/utils/formatters' import { calcGasTotal, -} from '../components/app/send/send.utils' +} from '../pages/send/send.utils' import { addHexPrefix } from 'ethereumjs-util' const selectors = { diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index 554232f7b..2d25aa156 100644 --- a/ui/app/selectors/selectors.js +++ b/ui/app/selectors/selectors.js @@ -91,7 +91,8 @@ function getAccountType (state) { } function getSelectedAsset (state) { - return getSelectedToken(state) || 'ETH' + const selectedToken = getSelectedToken(state) + return selectedToken && selectedToken.symbol || 'ETH' } function getCurrentNetworkId (state) { @@ -300,9 +301,10 @@ function isEthereumNetwork (state) { MAINNET, RINKEBY, ROPSTEN, + GOERLI, } = NETWORK_TYPES - return [ KOVAN, MAINNET, RINKEBY, ROPSTEN].includes(networkType) + return [ KOVAN, MAINNET, RINKEBY, ROPSTEN, GOERLI].includes(networkType) } function preferencesSelector ({ metamask }) { diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js index 7d369fdb9..f594d9002 100644 --- a/ui/app/store/actions.js +++ b/ui/app/store/actions.js @@ -5,7 +5,7 @@ const { getTokenAddressFromTokenObject } = require('../helpers/utils/util') const { calcTokenBalance, estimateGas, -} = require('../components/app/send/send.utils') +} = require('../pages/send/send.utils') const ethUtil = require('ethereumjs-util') const { fetchLocale } = require('../helpers/utils/i18n-helper') const log = require('loglevel') diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js index 037d990fa..3eaa7cf71 100644 --- a/ui/lib/account-link.js +++ b/ui/lib/account-link.js @@ -17,6 +17,9 @@ module.exports = function (address, network) { case 42: // kovan test net link = `https://kovan.etherscan.io/address/${address}` break + case 5: // goerli test net + link = `https://goerli.etherscan.io/address/${address}` + break default: link = '' break diff --git a/ui/lib/etherscan-prefix-for-network.js b/ui/lib/etherscan-prefix-for-network.js index 2c1904f1c..ce194b0a8 100644 --- a/ui/lib/etherscan-prefix-for-network.js +++ b/ui/lib/etherscan-prefix-for-network.js @@ -14,6 +14,9 @@ module.exports = function (network) { case 42: // kovan test net prefix = 'kovan.' break + case 5: // goerli test net + prefix = 'goerli.' + break default: prefix = '' } |