From 5aa191fd2e4dd48a4f158983d241a04b6fa7415d Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Fri, 26 Nov 2021 14:03:35 -0600 Subject: [PATCH] Feat/add collectible manually (#12834) * hook up add collectible manually flow * address feedback --- app/_locales/en/messages.json | 6 +++ app/scripts/metamask-controller.js | 10 ++++- package.json | 2 +- ui/ducks/app/app.js | 7 +++ .../add-collectible.component.js | 24 ++++++++-- ui/pages/home/home.component.js | 37 +++++++++++++++- ui/pages/home/home.container.js | 6 +++ ui/selectors/selectors.js | 4 ++ ui/store/actionConstants.js | 2 + ui/store/actions.js | 44 +++++++++++++++++++ yarn.lock | 8 ++-- 11 files changed, 139 insertions(+), 11 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index e4133cd8a..c4c137922 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1680,6 +1680,12 @@ "message": "Account $1", "description": "Default name of next account to be created on create account screen" }, + "newCollectibleAddFailed": { + "message": "Collectible was not added because: $1" + }, + "newCollectibleAddedMessage": { + "message": "Collectible was successfully added!" + }, "newContact": { "message": "New Contact" }, diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 9dcb7df46..004ac54ae 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -183,7 +183,9 @@ export default class MetamaskController extends EventEmitter { state: initState.TokensController, }); - this.assetsContractController = new AssetsContractController(); + this.assetsContractController = new AssetsContractController({ + provider: this.provider, + }); this.collectiblesController = new CollectiblesController({ onPreferencesStateChange: this.preferencesController.store.subscribe.bind( @@ -588,6 +590,7 @@ export default class MetamaskController extends EventEmitter { console.error(error); } }); + this.networkController.lookupNetwork(); this.messageManager = new MessageManager({ metricsEvent: this.metaMetricsController.trackEvent.bind( @@ -1046,6 +1049,11 @@ export default class MetamaskController extends EventEmitter { collectiblesController, ), + addCollectibleVerifyOwnership: nodeify( + collectiblesController.addCollectibleVerifyOwnership, + collectiblesController, + ), + removeAndIgnoreCollectible: nodeify( collectiblesController.removeAndIgnoreCollectible, collectiblesController, diff --git a/package.json b/package.json index 2cd6daf14..585ffffd2 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "@keystonehq/metamask-airgapped-keyring": "0.2.1", "@material-ui/core": "^4.11.0", "@metamask/contract-metadata": "^1.28.0", - "@metamask/controllers": "^20.0.0", + "@metamask/controllers": "^20.1.0", "@metamask/eth-ledger-bridge-keyring": "^0.10.0", "@metamask/eth-token-tracker": "^3.0.1", "@metamask/etherscan-link": "^2.1.0", diff --git a/ui/ducks/app/app.js b/ui/ducks/app/app.js index 2baa2f53d..47c440e00 100644 --- a/ui/ducks/app/app.js +++ b/ui/ducks/app/app.js @@ -55,6 +55,7 @@ export default function reduceApp(state = {}, action) { ledgerWebHidConnectedStatus: WEBHID_CONNECTED_STATUSES.UNKNOWN, ledgerTransportStatus: TRANSPORT_STATES.NONE, newNetworkAdded: '', + newCollectibleAddedMessage: '', ...state, }; @@ -290,6 +291,12 @@ export default function reduceApp(state = {}, action) { newNetworkAdded: action.value, }; + case actionConstants.SET_NEW_COLLECTIBLE_ADDED_MESSAGE: + return { + ...appState, + newCollectibleAddedMessage: action.value, + }; + case actionConstants.LOADING_METHOD_DATA_STARTED: return { ...appState, diff --git a/ui/pages/add-collectible/add-collectible.component.js b/ui/pages/add-collectible/add-collectible.component.js index 4bf0ecdb0..a0fc8639f 100644 --- a/ui/pages/add-collectible/add-collectible.component.js +++ b/ui/pages/add-collectible/add-collectible.component.js @@ -1,27 +1,43 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; import { useI18nContext } from '../../hooks/useI18nContext'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; import Box from '../../components/ui/box'; import TextField from '../../components/ui/text-field'; import PageContainer from '../../components/ui/page-container'; +import { + addCollectibleVerifyOwnership, + setNewCollectibleAddedMessage, +} from '../../store/actions'; export default function AddCollectible() { const t = useI18nContext(); const history = useHistory(); + const dispatch = useDispatch(); const [address, setAddress] = useState(''); const [tokenId, setTokenId] = useState(''); + const handleAddCollectible = async () => { + try { + await dispatch(addCollectibleVerifyOwnership(address, tokenId)); + } catch (error) { + const { message } = error; + dispatch(setNewCollectibleAddedMessage(message)); + history.push(DEFAULT_ROUTE); + return; + } + dispatch(setNewCollectibleAddedMessage('success')); + history.push(DEFAULT_ROUTE); + }; + return ( { - console.log( - `Adding collectible with ID: ${tokenId} and address ${address}`, - ); - history.push(DEFAULT_ROUTE); + handleAddCollectible(); }} submitText={t('add')} onCancel={() => { diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 94a0e16cb..c9c03aa64 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -92,6 +92,8 @@ export default class Home extends PureComponent { newNetworkAdded: PropTypes.string, setNewNetworkAdded: PropTypes.func.isRequired, isSigningQRHardwareTransaction: PropTypes.bool.isRequired, + newCollectibleAddedMessage: PropTypes.string, + setNewCollectibleAddedMessage: PropTypes.func.isRequired, }; state = { @@ -225,9 +227,42 @@ export default class Home extends PureComponent { infuraBlocked, newNetworkAdded, setNewNetworkAdded, + newCollectibleAddedMessage, + setNewCollectibleAddedMessage, } = this.props; return ( + {newCollectibleAddedMessage ? ( + + {newCollectibleAddedMessage === 'success' ? ( + + ) : null} + + {newCollectibleAddedMessage === 'success' + ? t('newCollectibleAddedMessage') + : t('newCollectibleAddFailed', [ + newCollectibleAddedMessage, + ])} + +