Feat/collectibles send flow #13048

adonesky1 · 2021-12-10T16:22:16Z

This PR enables sending of ERC721 tokens from within the final piece of bringing the extension to parity with mobile for NFT support. ERC1155 sends are not yet enabled (as is the case on mobile).
Relevant Figma Designs

Screenshots:
Stepping through the Send Flow:

If the user does not own the collectible (if it is in the "Previously Owned" Section) they can still click into view the details,
but they will not see a send button available:

And if the token is an ERC1155 we show but disable the send button with an info tooltip to indicate that we don't yet support sending this type of token:

Manual testing steps:

Add an NFT to your wallet on a test net (you can use this faucet)
Click into the details page of the NFT and click the send button
Go through the send flow as you would for a token.
Verify that the NFT has sent to the address you intended.
Click back into the token details page, the send button should disappear, and when you return back up to the collectibles tab, that NFT should be removed from your primary collection and added to the "Previously Owned" section.

Related (and non-blocking in my opinion) work still left to do:

Migrate or add notification tell users they will have to manually migrate their ERC721/1155 tokens via the Import NFT flow.
Add validation prevent users from adding ERC721/1155 tokens through the add tokens flow (and direct them to the Import NFT flow)
Create an NFT flow in the test-dapp
This related but not blocking bug for which I have PRs here and here (WIP)
ERC1155 sending

github-actions · 2021-12-10T16:22:30Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

metamaskbot · 2021-12-17T18:12:41Z

Builds ready [cea4fe9]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1075 ± 13 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	67	1103	323	431	207
		domContentLoaded	1015	1128	1075	26	13
		load	1015	1128	1075	26	13
		domInteractive	1015	1128	1075	26	13

highlights:

storybook

metamaskbot · 2021-12-17T22:25:51Z

Builds ready [714f5df]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1339 ± 104 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	1487	397	420	202
		domContentLoaded	1070	1685	1338	217	104
		load	1070	1685	1339	216	104
		domInteractive	1070	1684	1338	217	104

highlights:

storybook

ui/ducks/send/send.js

ui/pages/send/send-content/send-asset-row/send-asset-row.component.js

metamaskbot · 2022-01-04T20:31:54Z

Builds ready [898f775]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1211 ± 68 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	1445	483	445	214
		domContentLoaded	1039	1556	1210	141	68
		load	1039	1556	1211	141	68
		domInteractive	1039	1556	1210	141	68

highlights:

storybook

metamaskbot · 2022-01-04T23:10:29Z

Builds ready [845fc2e]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1126 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	65	1413	407	457	219
		domContentLoaded	1041	1425	1124	90	43
		load	1041	1426	1126	89	43
		domInteractive	1041	1425	1124	90	43

highlights:

storybook

Needs a re-review

metamaskbot · 2022-01-06T18:24:26Z

Builds ready [f6d4123]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1098 ± 22 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	67	1170	596	495	238
		domContentLoaded	1037	1177	1097	47	23
		load	1037	1177	1098	46	22
		domInteractive	1037	1177	1097	47	23

highlights:

storybook

adonesky1 · 2022-01-06T21:13:20Z

app/scripts/metamask-controller.js

+              knownCollectible,
+              false,
+              // TODO add this when checkAndUpdateSingleCollectibleOwnershipStatus is updated
+              // { userAddress, chainId },


This should/will be added once this PR lands MetaMask/core#672 and a new controllers version is cut.

We can add this after this PR is merged, correct?

What affect will this call to this.collectiblesController.checkAndUpdateSingleCollectibleOwnershipStatus have before this code is uncommented?

Yea we can add it later. Until the PR is merged and this code is uncommented the following scenario is possible:

User sends NFT on Account 1

User switches to Account 2 before transaction is complete

Transaction is confirmed while user is on Account 2

The collectibles controller will check whether this collectible is owned by Account 2 and update its status, but the NFT was owned by Account 1 so it won't find it and no status will be updated.

Without the PR merged and code uncommented (in its current state) If however the user hasn't switched accounts between when they sent the NFT and when the transaction was confirmed, the status update will be completed correctly.

metamaskbot · 2022-01-06T21:40:42Z

Builds ready [127eae4]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1215 ± 84 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	67	1195	495	479	230
		domContentLoaded	1028	1673	1213	177	85
		load	1028	1673	1215	176	84
		domInteractive	1028	1673	1213	177	85

highlights:

storybook

danjm · 2022-01-07T20:07:33Z

ui/pages/send/send-content/send-asset-row/send-asset-row.container.js

    accounts: getMetaMaskAccounts(state),
    nativeCurrency: getNativeCurrency(state),
    nativeCurrencyImage: getNativeCurrencyImage(state),
+    testState: state,


Is this supposed to be here?

nope 😶‍🌫️

removed here fea5a50

georgewrmarshall

Looks great!! A couple nit picky 8px grid suggestions and the collapse state of the collectible dropdowns didn't seem to be working as intended for me? Overall really nice UI work!!

ui/components/app/collectible-details/collectible-details.js

georgewrmarshall · 2022-01-07T21:43:25Z

ui/components/app/collectible-details/collectible-details.js

+              <Typography
+                color={COLORS.UI4}
+                variant={TYPOGRAPHY.H6}
+                boxProps={{ margin: 0, marginBottom: 3 }}


Adhere to 8px grid. marginBottom: 3 would be 12px(3*4px). Update to 16px

Suggested change

boxProps={{ margin: 0, marginBottom: 3 }}

boxProps={{ margin: 0, marginBottom: 4 }}

fixed here: 2a88844

ui/components/app/collectibles-items/collectibles-items.js

metamaskbot · 2022-01-07T22:45:38Z

Builds ready [fea5a50]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1157 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	65	1273	525	503	241
		domContentLoaded	998	1449	1156	124	59
		load	998	1449	1157	124	60
		domInteractive	998	1449	1156	124	59

highlights:

storybook

ui/components/app/collectible-details/index.scss

metamaskbot · 2022-01-08T00:00:09Z

Builds ready [8771e9b]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1168 ± 41 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	1374	696	534	256
		domContentLoaded	1051	1382	1164	84	40
		load	1052	1382	1168	85	41
		domInteractive	1051	1382	1164	84	40

highlights:

storybook

georgewrmarshall

Looks great to me! Nicely done 💯

danjm · 2022-01-10T12:21:29Z

app/scripts/metamask-controller.js

+        // in which case we will want to check and update ownership status of the transferred collectible.
+        if (
+          txMeta.type === TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM &&
+          txMeta.txParams !== undefined


Is it possible for txMeta.type === TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM AND txMeta.txParams === undefined?

It seems unlikely. Added here for extra protection against unexpected scenarios.

brad-decker

Looks good to me, the additional code in the send duck looks clean and easy to understand, plus builds upon and extend existing standards and patterns. Great work, Alex.

adonesky1 dismissed a stale review via bcbc375 December 13, 2021 19:59

adonesky1 force-pushed the feat/collectibles-send-flow branch from 86c870c to bcbc375 Compare December 13, 2021 19:59

adonesky1 changed the base branch from develop to feat/collectibles-the-return December 13, 2021 20:00

Base automatically changed from feat/collectibles-the-return to develop December 13, 2021 23:41

adonesky1 force-pushed the feat/collectibles-send-flow branch 3 times, most recently from abee450 to 26085b7 Compare December 16, 2021 23:05

adonesky1 dismissed a stale review via 72e4021 December 17, 2021 18:27

adonesky1 force-pushed the feat/collectibles-send-flow branch 2 times, most recently from 07ea71a to 714f5df Compare December 17, 2021 21:52

adonesky1 mentioned this pull request Dec 17, 2021

Bug - For ERC721 NFT tokens #11611

Closed

adonesky1 force-pushed the feat/collectibles-send-flow branch from 481f088 to 1b74aee Compare December 22, 2021 22:46

adonesky1 commented Dec 22, 2021

View reviewed changes

ui/ducks/send/send.js Outdated Show resolved Hide resolved

adonesky1 commented Dec 22, 2021

View reviewed changes

ui/ducks/send/send.js Outdated Show resolved Hide resolved

adonesky1 force-pushed the feat/collectibles-send-flow branch 3 times, most recently from 508894e to 9223382 Compare January 4, 2022 18:49

adonesky1 commented Jan 4, 2022

View reviewed changes

ui/pages/send/send-content/send-asset-row/send-asset-row.component.js Outdated Show resolved Hide resolved

adonesky1 force-pushed the feat/collectibles-send-flow branch from 9223382 to 898f775 Compare January 4, 2022 19:55

adonesky1 mentioned this pull request Jan 4, 2022

Bump @metamask/controllers from 23.0.0 to 23.1.0 #13208

Closed

adonesky1 marked this pull request as ready for review January 4, 2022 23:01

adonesky1 requested a review from a team as a code owner January 4, 2022 23:01

adonesky1 requested review from danjm, mcmire and ryanml January 4, 2022 23:01

adonesky1 force-pushed the feat/collectibles-send-flow branch from 00220aa to f6d4123 Compare January 6, 2022 17:48

adonesky1 requested a review from mcmire January 6, 2022 18:05

adonesky1 added 2 commits January 6, 2022 14:11

cleanups

e512cf0

more cleanup

127eae4

adonesky1 commented Jan 6, 2022

View reviewed changes

adonesky1 requested a review from brad-decker January 6, 2022 21:29

mcmire previously approved these changes Jan 6, 2022

View reviewed changes

danjm reviewed Jan 7, 2022

View reviewed changes

georgewrmarshall reviewed Jan 7, 2022

View reviewed changes

address feedback

fea5a50

adonesky1 dismissed mcmire’s stale review via fea5a50 January 7, 2022 22:09

georgewrmarshall reviewed Jan 7, 2022

View reviewed changes

ui/components/app/collectible-details/index.scss Show resolved Hide resolved

address more feedback

8771e9b

adonesky1 force-pushed the feat/collectibles-send-flow branch from 2a88844 to 8771e9b Compare January 7, 2022 23:25

adonesky1 requested review from danjm, georgewrmarshall and mcmire January 7, 2022 23:31

mcmire approved these changes Jan 7, 2022

View reviewed changes

georgewrmarshall approved these changes Jan 9, 2022

View reviewed changes

danjm reviewed Jan 10, 2022

View reviewed changes

brad-decker approved these changes Jan 10, 2022

View reviewed changes

jpuri approved these changes Jan 10, 2022

View reviewed changes

adonesky1 merged commit 4826c8c into develop Jan 10, 2022

adonesky1 deleted the feat/collectibles-send-flow branch January 10, 2022 16:23

github-actions bot locked and limited conversation to collaborators Jan 10, 2022

	boxProps={{ margin: 0, marginBottom: 3 }}
	boxProps={{ margin: 0, marginBottom: 4 }}

Feat/collectibles send flow #13048

Feat/collectibles send flow #13048

Uh oh!

Conversation

adonesky1 commented Dec 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 10, 2021

Uh oh!

metamaskbot commented Dec 17, 2021

highlights:

Uh oh!

metamaskbot commented Dec 17, 2021

highlights:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented Jan 4, 2022

highlights:

Uh oh!

metamaskbot commented Jan 4, 2022

highlights:

Uh oh!

metamaskbot commented Jan 6, 2022

highlights:

Uh oh!

adonesky1 Jan 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented Jan 6, 2022

highlights:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

metamaskbot commented Jan 7, 2022

highlights:

Uh oh!

Uh oh!

metamaskbot commented Jan 8, 2022

highlights:

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brad-decker left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

adonesky1 commented Dec 10, 2021 •

edited

Loading

adonesky1 Jan 6, 2022 •

edited

Loading