From db0230f23a720f0875cd6bfbdbe8455f8f38ac81 Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Thu, 20 Jan 2022 11:49:49 -0600 Subject: [PATCH] NFT UX cleanup grab-bag (#13352) * NFT UX cleanup --- app/scripts/metamask-controller.js | 5 +- .../collectible-details.js | 60 ++++++++++--------- .../app/collectible-details/index.scss | 10 ++-- .../app/collectibles-tab/collectibles-tab.js | 48 ++++++++------- ui/components/app/collectibles-tab/index.scss | 2 +- .../app/wallet-overview/token-overview.js | 2 +- .../wallet-overview/token-overview.test.js | 2 + ui/css/itcss/components/send.scss | 17 ++++-- ui/ducks/send/send.js | 5 +- ui/ducks/send/send.test.js | 2 + ui/store/actions.js | 23 +++++-- 11 files changed, 106 insertions(+), 70 deletions(-) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 906b33fc9..e7b588043 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -243,6 +243,8 @@ export default class MetamaskController extends EventEmitter { initState.CollectiblesController, ); + this.collectiblesController.setApiKey(process.env.OPENSEA_KEY); + process.env.COLLECTIBLES_V1 && (this.collectibleDetectionController = new CollectibleDetectionController( { @@ -648,8 +650,7 @@ export default class MetamaskController extends EventEmitter { this.collectiblesController.checkAndUpdateSingleCollectibleOwnershipStatus( knownCollectible, false, - // TODO add this when checkAndUpdateSingleCollectibleOwnershipStatus is updated - // { userAddress, chainId }, + { userAddress, chainId }, ); } } diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js index 4182e3fcf..1cfa7590e 100644 --- a/ui/components/app/collectible-details/collectible-details.js +++ b/ui/components/app/collectible-details/collectible-details.js @@ -130,6 +130,7 @@ export default function CollectibleDetails({ collectible }) { @@ -154,27 +154,31 @@ export default function CollectiblesTab({ onAddNFT }) { alignItems={ALIGN_ITEMS.CENTER} justifyContent={JUSTIFY_CONTENT.CENTER} > - - {isMainnet && !useCollectibleDetection ? ( - - ) : ( - - )} - - - {t('or')} - + {!isMainnet && Object.keys(collections).length < 1 ? null : ( + <> + + {isMainnet && !useCollectibleDetection ? ( + + ) : ( + + )} + + + {t('or')} + + + )} { }); useEffect(() => { - if (token.isERC721) { + if (token.isERC721 && process.env.COLLECTIBLES_V1) { dispatch( showModal({ name: 'CONVERT_TOKEN_TO_NFT', diff --git a/ui/components/app/wallet-overview/token-overview.test.js b/ui/components/app/wallet-overview/token-overview.test.js index 8cd15c1bb..77ab8ec16 100644 --- a/ui/components/app/wallet-overview/token-overview.test.js +++ b/ui/components/app/wallet-overview/token-overview.test.js @@ -54,6 +54,7 @@ describe('TokenOverview', () => { }); it('should show ConvertTokenToNFT modal when token passed in props is an ERC721', () => { + process.env.COLLECTIBLES_V1 = true; const token = { name: 'test', isERC721: true, @@ -69,6 +70,7 @@ describe('TokenOverview', () => { name: 'CONVERT_TOKEN_TO_NFT', tokenAddress: '0x01', }); + process.env.COLLECTIBLES_V1 = false; }); }); }); diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss index 512f21fc1..113f46eec 100644 --- a/ui/css/itcss/components/send.scss +++ b/ui/css/itcss/components/send.scss @@ -203,12 +203,12 @@ box-shadow: 2px 2px 2px var(--alto); } -.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button { +.customize-gas-tooltip-container input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } -.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button { +.customize-gas-tooltip-container input[type='number']:hover::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } @@ -684,10 +684,19 @@ flex-grow: 1; } + @media screen and (max-width: $break-small) { + &__asset-data { + width: 60%; + } + } + &__symbol { @include Paragraph; margin-bottom: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } &__name { @@ -1061,12 +1070,12 @@ justify-content: center; } - input[type="number"]::-webkit-inner-spin-button { + input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } - input[type="number"]:hover::-webkit-inner-spin-button { + input[type='number']:hover::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js index aac325d54..4d6090168 100644 --- a/ui/ducks/send/send.js +++ b/ui/ducks/send/send.js @@ -1438,7 +1438,10 @@ export function updateSendAsset({ type, details }) { details.address, userAddress, ); - if (standard === ERC721 || standard === ERC1155) { + if ( + process.env.COLLECTIBLES_V1 && + (standard === ERC721 || standard === ERC1155) + ) { await dispatch(hideLoadingIndication()); dispatch( showModal({ diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js index 9359c4253..93f082170 100644 --- a/ui/ducks/send/send.test.js +++ b/ui/ducks/send/send.test.js @@ -1524,6 +1524,7 @@ describe('Send Slice', () => { }); it('should show ConvertTokenToNFT modal and throw "invalidAssetType" error when token passed in props is an ERC721 or ERC1155', async () => { + process.env.COLLECTIBLES_V1 = true; getTokenStandardAndDetailsStub.mockImplementation(() => Promise.resolve({ standard: 'ERC1155' }), ); @@ -1552,6 +1553,7 @@ describe('Send Slice', () => { }, type: 'UI_MODAL_OPEN', }); + process.env.COLLECTIBLES_V1 = false; }); }); diff --git a/ui/store/actions.js b/ui/store/actions.js index 6473d2c58..8e3c1dbd2 100644 --- a/ui/store/actions.js +++ b/ui/store/actions.js @@ -2767,13 +2767,26 @@ export function loadingTokenParamsFinished() { }; } -export function getTokenParams(tokenAddress) { +export function getTokenParams(address) { return (dispatch, getState) => { const tokenList = getTokenList(getState()); const existingTokens = getState().metamask.tokens; - const existingToken = existingTokens.find(({ address }) => - isEqualCaseInsensitive(tokenAddress, address), + const { selectedAddress } = getState().metamask; + const { chainId } = getState().metamask.provider; + const existingCollectibles = getState().metamask?.allCollectibles?.[ + selectedAddress + ]?.[chainId]; + const existingToken = existingTokens.find(({ address: tokenAddress }) => + isEqualCaseInsensitive(address, tokenAddress), ); + const existingCollectible = existingCollectibles?.find( + ({ address: collectibleAddress }) => + isEqualCaseInsensitive(address, collectibleAddress), + ); + + if (existingCollectible) { + return null; + } if (existingToken) { return Promise.resolve({ @@ -2785,9 +2798,9 @@ export function getTokenParams(tokenAddress) { dispatch(loadingTokenParamsStarted()); log.debug(`loadingTokenParams`); - return getSymbolAndDecimals(tokenAddress, tokenList).then( + return getSymbolAndDecimals(address, tokenList).then( ({ symbol, decimals }) => { - dispatch(addToken(tokenAddress, symbol, Number(decimals))); + dispatch(addToken(address, symbol, Number(decimals))); dispatch(loadingTokenParamsFinished()); }, );