From 3cff801b8e02b402158fe8951cb747ae634150e1 Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Wed, 1 Dec 2021 17:46:26 -0600 Subject: [PATCH] Revert "Feat/collectibles display (#12873)" (#12934) This reverts commit 81ea24f08a7b62d40fbd7d38b79fe9f04f730633. --- app/_locales/en/messages.json | 27 +-- app/scripts/controllers/preferences.js | 2 +- app/scripts/lib/ens-ipfs/setup.js | 4 +- app/scripts/metamask-controller.js | 69 +++--- app/scripts/migrations/068.js | 61 ----- app/scripts/migrations/068.test.js | 56 ----- app/scripts/migrations/index.js | 2 - package.json | 2 +- shared/constants/network.js | 2 - ui/components/app/app-components.scss | 2 - .../collectible-details.js | 212 ------------------ .../collectible-details.stories.js | 23 -- .../collectible-options.js | 61 ----- .../app/collectible-details/index.scss | 26 --- .../collectibles-items.component.js | 102 ++------- .../app/collectibles-items/index.scss | 18 -- .../collectibles-tab.component.js | 39 +--- ui/components/ui/box/box.js | 2 +- ui/components/ui/typography/typography.js | 4 - ui/components/ui/typography/typography.scss | 6 - ui/css/design-system/attributes.scss | 1 - ui/ducks/metamask/metamask.js | 39 ---- ui/helpers/constants/design-system.js | 5 - ui/helpers/constants/routes.js | 2 +- ui/helpers/utils/util.js | 16 -- .../add-collectible.component.js | 18 +- ui/pages/asset/asset.js | 13 +- ui/pages/routes/routes.component.js | 3 +- .../advanced-tab/advanced-tab.component.js | 5 +- ui/store/actions.js | 10 - yarn.lock | 28 +-- 31 files changed, 86 insertions(+), 774 deletions(-) delete mode 100644 app/scripts/migrations/068.js delete mode 100644 app/scripts/migrations/068.test.js delete mode 100644 ui/components/app/collectible-details/collectible-details.js delete mode 100644 ui/components/app/collectible-details/collectible-details.stories.js delete mode 100644 ui/components/app/collectible-details/collectible-options.js delete mode 100644 ui/components/app/collectible-details/index.scss delete mode 100644 ui/components/app/collectibles-items/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 3aef9a1a8..55859b47c 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -139,6 +139,9 @@ "addNFT": { "message": "Add NFT" }, + "addNFTLowerCase": { + "message": "add NFT" + }, "addNetwork": { "message": "Add Network" }, @@ -562,9 +565,6 @@ "contract": { "message": "Contract" }, - "contractAddress": { - "message": "Contract address" - }, "contractAddressError": { "message": "You are sending tokens to the token's contract address. This may result in the loss of these tokens." }, @@ -706,9 +706,6 @@ "depositEther": { "message": "Deposit Ether" }, - "description": { - "message": "Description" - }, "details": { "message": "Details" }, @@ -875,9 +872,6 @@ "editPermission": { "message": "Edit Permission" }, - "enableAutoDetect": { - "message": " Enable Autodetect" - }, "enableFromSettings": { "message": " Enable it from Settings." }, @@ -1291,9 +1285,6 @@ "importMyWallet": { "message": "Import My Wallet" }, - "importNFTs": { - "message": "Import NFTs" - }, "importTokenQuestion": { "message": "Import token?" }, @@ -1486,9 +1477,6 @@ "likeToImportTokens": { "message": "Would you like to import these tokens?" }, - "link": { - "message": "Link" - }, "links": { "message": "Links" }, @@ -2171,9 +2159,6 @@ "removeAccountDescription": { "message": "This account will be removed from your wallet. Please make sure you have the original Secret Recovery Phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. " }, - "removeNFT": { - "message": "Remove NFT" - }, "requestsAwaitingAcknowledgement": { "message": "requests waiting to be acknowledged" }, @@ -2492,9 +2477,6 @@ "somethingWentWrong": { "message": "Oops! Something went wrong." }, - "source": { - "message": "Source" - }, "speedUp": { "message": "Speed Up" }, @@ -3284,9 +3266,6 @@ "message": "View $1 on Etherscan", "description": "$1 is the action type. e.g (Account, Transaction, Swap)" }, - "viewOnOpensea": { - "message": "View on Opensea" - }, "viewinExplorer": { "message": "View $1 in Explorer", "description": "$1 is the action type. e.g (Account, Transaction, Swap)" diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 09e8d4936..738432e73 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -61,7 +61,7 @@ export default class PreferencesController { hideZeroBalanceTokens: false, }, // ENS decentralized website resolution - ipfsGateway: 'https://cloudflare-ipfs.com/ipfs/', + ipfsGateway: 'dweb.link', infuraBlocked: null, ledgerTransportType: window.navigator.hid ? LEDGER_TRANSPORT_TYPES.WEBHID diff --git a/app/scripts/lib/ens-ipfs/setup.js b/app/scripts/lib/ens-ipfs/setup.js index 8d50f0a1c..c7d1b2c09 100644 --- a/app/scripts/lib/ens-ipfs/setup.js +++ b/app/scripts/lib/ens-ipfs/setup.js @@ -50,8 +50,6 @@ export default function setupEnsIpfsResolver({ async function attemptResolve({ tabId, name, pathname, search, fragment }) { const ipfsGateway = getIpfsGateway(); - const ipfsGatewayHost = new URL(ipfsGateway)?.host; - extension.tabs.update(tabId, { url: `loading.html` }); let url = `https://app.ens.domains/name/${name}`; try { @@ -63,7 +61,7 @@ export default function setupEnsIpfsResolver({ const resolvedUrl = `https://${hash}.${type.slice( 0, 4, - )}.${ipfsGatewayHost}${pathname}${search || ''}${fragment || ''}`; + )}.${ipfsGateway}${pathname}${search || ''}${fragment || ''}`; try { // check if ipfs gateway has result const response = await fetchWithTimeout(resolvedUrl, { diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 3cf2974e1..a6d39262c 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -41,10 +41,7 @@ import { GAS_DEV_API_BASE_URL, SWAPS_CLIENT_ID, } from '../../shared/constants/swaps'; -import { - IPFS_DEFAULT_GATEWAY_URL, - MAINNET_CHAIN_ID, -} from '../../shared/constants/network'; +import { MAINNET_CHAIN_ID } from '../../shared/constants/network'; import { DEVICE_NAMES, KEYRING_TYPES, @@ -190,44 +187,32 @@ export default class MetamaskController extends EventEmitter { provider: this.provider, }); - this.collectiblesController = new CollectiblesController( - { - onPreferencesStateChange: (cb) => - this.preferencesController.store.subscribe((preferencesState) => { - const { ipfsGateway } = this.preferencesController.store.getState(); - const modifiedPreferencesState = { - ...preferencesState, - ipfsGateway: ipfsGateway.endsWith('/ipfs/') - ? ipfsGateway - : `${ipfsGateway}/ipfs/`, - }; - return cb(modifiedPreferencesState); - }), - onNetworkStateChange: this.networkController.store.subscribe.bind( - this.networkController.store, - ), - getAssetName: this.assetsContractController.getAssetName.bind( - this.assetsContractController, - ), - getAssetSymbol: this.assetsContractController.getAssetSymbol.bind( - this.assetsContractController, - ), - getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind( - this.assetsContractController, - ), - getOwnerOf: this.assetsContractController.getOwnerOf.bind( - this.assetsContractController, - ), - balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind( - this.assetsContractController, - ), - uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind( - this.assetsContractController, - ), - }, - { ipfsGateway: `${IPFS_DEFAULT_GATEWAY_URL}/ipfs/` }, - initState.CollectiblesController, - ); + this.collectiblesController = new CollectiblesController({ + onPreferencesStateChange: this.preferencesController.store.subscribe.bind( + this.preferencesController.store, + ), + onNetworkStateChange: this.networkController.store.subscribe.bind( + this.networkController.store, + ), + getAssetName: this.assetsContractController.getAssetName.bind( + this.assetsContractController, + ), + getAssetSymbol: this.assetsContractController.getAssetSymbol.bind( + this.assetsContractController, + ), + getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind( + this.assetsContractController, + ), + getOwnerOf: this.assetsContractController.getOwnerOf.bind( + this.assetsContractController, + ), + balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind( + this.assetsContractController, + ), + uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind( + this.assetsContractController, + ), + }); process.env.COLLECTIBLES_V1 && (this.collectibleDetectionController = new CollectibleDetectionController( diff --git a/app/scripts/migrations/068.js b/app/scripts/migrations/068.js deleted file mode 100644 index dda99d11e..000000000 --- a/app/scripts/migrations/068.js +++ /dev/null @@ -1,61 +0,0 @@ -import { cloneDeep } from 'lodash'; -import { IPFS_DEFAULT_GATEWAY_URL } from '../../../shared/constants/network'; - -const version = 68; - -function addUrlProtocolPrefix(urlString) { - if (!urlString.match(/(^http:\/\/)|(^https:\/\/)/u)) { - return `https://${urlString}`; - } - return urlString; -} - -export default { - version, - - async migrate(originalVersionedData) { - const versionedData = cloneDeep(originalVersionedData); - versionedData.meta.version = version; - const state = versionedData.data; - const newState = transformState(state); - versionedData.data = newState; - return versionedData; - }, -}; - -function transformState(state) { - const PreferencesController = state?.PreferencesController || {}; - const preferences = PreferencesController.preferences || {}; - const oldIpfsGateWay = preferences.ipfsGateway; - - let newState; - - if (oldIpfsGateWay && oldIpfsGateWay !== 'dweb.link') { - const newIpfsGateway = new URL( - addUrlProtocolPrefix(oldIpfsGateWay), - ).toString(); - newState = { - ...state, - PreferencesController: { - ...PreferencesController, - preferences: { - ...preferences, - ipfsGateway: newIpfsGateway, - }, - }, - }; - } else { - newState = { - ...state, - PreferencesController: { - ...PreferencesController, - preferences: { - ...preferences, - ipfsGateway: IPFS_DEFAULT_GATEWAY_URL, - }, - }, - }; - } - - return newState; -} diff --git a/app/scripts/migrations/068.test.js b/app/scripts/migrations/068.test.js deleted file mode 100644 index 249fcc48b..000000000 --- a/app/scripts/migrations/068.test.js +++ /dev/null @@ -1,56 +0,0 @@ -import { IPFS_DEFAULT_GATEWAY_URL } from '../../../shared/constants/network'; -import migration68 from './068'; - -describe('migration #68', () => { - it('should update the version metadata', async () => { - const oldStorage = { - meta: { - version: 67, - }, - data: {}, - }; - - const newStorage = await migration68.migrate(oldStorage); - expect(newStorage.meta).toStrictEqual({ - version: 68, - }); - }); - - it('should set preference ipfsGateway to "https://cloudflare-ipfs.com" if ipfsGateway is old default dweb.link', async () => { - const expectedValue = IPFS_DEFAULT_GATEWAY_URL; // = https://cloudflare-ipfs.com - const oldStorage = { - meta: {}, - data: { - PreferencesController: { - preferences: { - ipfsGateway: 'dweb.link', - }, - }, - }, - }; - - const newStorage = await migration68.migrate(oldStorage); - expect(newStorage.data.PreferencesController.preferences.ipfsGateway).toBe( - expectedValue, - ); - }); - - it('should update preference ipfsGateway to a full url version of user set ipfsGateway if ipfsGateway is not old default dweb.link', async () => { - const expectedValue = 'https://random.ipfs/'; - const oldStorage = { - meta: {}, - data: { - PreferencesController: { - preferences: { - ipfsGateway: 'random.ipfs', - }, - }, - }, - }; - - const newStorage = await migration68.migrate(oldStorage); - expect(newStorage.data.PreferencesController.preferences.ipfsGateway).toBe( - expectedValue, - ); - }); -}); diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js index ece1046e6..2471381f5 100644 --- a/app/scripts/migrations/index.js +++ b/app/scripts/migrations/index.js @@ -71,7 +71,6 @@ import m064 from './064'; import m065 from './065'; import m066 from './066'; import m067 from './067'; -import m068 from './068'; const migrations = [ m002, @@ -140,7 +139,6 @@ const migrations = [ m065, m066, m067, - m068, ]; export default migrations; diff --git a/package.json b/package.json index bf86e39ff..83ed9eabe 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "@keystonehq/metamask-airgapped-keyring": "0.2.1", "@material-ui/core": "^4.11.0", "@metamask/contract-metadata": "^1.28.0", - "@metamask/controllers": "^21.0.1", + "@metamask/controllers": "^20.1.0", "@metamask/eth-ledger-bridge-keyring": "^0.10.0", "@metamask/eth-token-tracker": "^3.0.1", "@metamask/etherscan-link": "^2.1.0", diff --git a/shared/constants/network.js b/shared/constants/network.js index 893832db3..2210605d0 100644 --- a/shared/constants/network.js +++ b/shared/constants/network.js @@ -171,5 +171,3 @@ export const UNSUPPORTED_RPC_METHODS = new Set([ // eth-json-rpc-middleware – but our UI does not support it. 'eth_signTransaction', ]); - -export const IPFS_DEFAULT_GATEWAY_URL = 'https://cloudflare-ipfs.com'; diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index f602a82cc..26d0d4fa1 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -7,8 +7,6 @@ @import 'app-header/index'; @import 'asset-list-item/asset-list-item'; @import 'confirm-page-container/index'; -@import 'collectibles-items/index'; -@import 'collectible-details/index'; @import 'connected-accounts-list/index'; @import 'connected-accounts-permissions/index'; @import 'connected-sites-list/index'; diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js deleted file mode 100644 index 2894b5b39..000000000 --- a/ui/components/app/collectible-details/collectible-details.js +++ /dev/null @@ -1,212 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { getTokenTrackerLink } from '@metamask/etherscan-link'; -import Box from '../../ui/box'; -import Typography from '../../ui/typography/typography'; -import { - COLORS, - TYPOGRAPHY, - BLOCK_SIZES, - FONT_WEIGHT, - JUSTIFY_CONTENT, - FLEX_DIRECTION, - OVERFLOW_WRAP, - DISPLAY, -} from '../../../helpers/constants/design-system'; -import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - getAssetImageURL, - isEqualCaseInsensitive, - shortenAddress, -} from '../../../helpers/utils/util'; -import { - getCurrentChainId, - getIpfsGateway, - getRpcPrefsForCurrentProvider, - getSelectedIdentity, -} from '../../../selectors'; -import AssetNavigation from '../../../pages/asset/components/asset-navigation'; -import { getCollectibleContracts } from '../../../ducks/metamask/metamask'; -import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; -import { removeAndIgnoreCollectible } from '../../../store/actions'; -import { - GOERLI_CHAIN_ID, - KOVAN_CHAIN_ID, - MAINNET_CHAIN_ID, - POLYGON_CHAIN_ID, - RINKEBY_CHAIN_ID, - ROPSTEN_CHAIN_ID, -} from '../../../../shared/constants/network'; -import { getEnvironmentType } from '../../../../app/scripts/lib/util'; -import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; -import CollectibleOptions from './collectible-options'; - -export default function CollectibleDetails({ collectible }) { - const { image, name, description, address, tokenId } = collectible; - const t = useI18nContext(); - const history = useHistory(); - const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); - const ipfsGateway = useSelector(getIpfsGateway); - const collectibleContracts = useSelector(getCollectibleContracts); - const currentNetwork = useSelector(getCurrentChainId); - - const collectibleContractName = collectibleContracts.find( - ({ address: contractAddress }) => - isEqualCaseInsensitive(contractAddress, address), - )?.name; - const selectedAccountName = useSelector( - (state) => getSelectedIdentity(state).name, - ); - const collectibleImageURL = getAssetImageURL(image, ipfsGateway); - const dispatch = useDispatch(); - - const onRemove = () => { - dispatch(removeAndIgnoreCollectible(address, tokenId)); - history.push(DEFAULT_ROUTE); - }; - - const getOpenSeaLink = () => { - switch (currentNetwork) { - case MAINNET_CHAIN_ID: - return `https://opensea.io/assets/${address}/${tokenId}`; - case POLYGON_CHAIN_ID: - return `https://opensea.io/assets/matic/${address}/${tokenId}`; - case GOERLI_CHAIN_ID: - case KOVAN_CHAIN_ID: - case ROPSTEN_CHAIN_ID: - case RINKEBY_CHAIN_ID: - return `https://testnets.opensea.io/assets/${address}/${tokenId}`; - default: - return null; - } - }; - - const openSeaLink = getOpenSeaLink(); - return ( - <> - history.push(DEFAULT_ROUTE)} - optionsButton={ - global.platform.openTab({ url: openSeaLink }) - : null - } - onRemove={onRemove} - /> - } - /> - -
- - - - - - {name} - - - {`#${tokenId}`} - - - {t('description')} - - - {description} - - -
- - - - {t('source')} - - - - {image} - - - - - - {t('contractAddress')} - - - - {getEnvironmentType() === ENVIRONMENT_TYPE_POPUP - ? shortenAddress(address) - : address} - - - - - - - ); -} - -CollectibleDetails.propTypes = { - collectible: PropTypes.object, -}; diff --git a/ui/components/app/collectible-details/collectible-details.stories.js b/ui/components/app/collectible-details/collectible-details.stories.js deleted file mode 100644 index a64e15703..000000000 --- a/ui/components/app/collectible-details/collectible-details.stories.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import CollectibleDetails from './collectible-details'; - -export default { - title: 'Collectibles Detail', - id: __filename, -}; - -export const basic = () => { - const collectible = { - name: 'Catnip Spicywright', - tokenId: '1124157', - address: '0x06012c8cf97bead5deae237070f9587f8e7a266d', - image: './images/catnip-spicywright.png', - description: - "Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.", - }; - return ( -
- -
- ); -}; diff --git a/ui/components/app/collectible-details/collectible-options.js b/ui/components/app/collectible-details/collectible-options.js deleted file mode 100644 index 5df1b2019..000000000 --- a/ui/components/app/collectible-details/collectible-options.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { useContext, useState } from 'react'; -import PropTypes from 'prop-types'; - -import { I18nContext } from '../../../contexts/i18n'; -import { Menu, MenuItem } from '../../ui/menu'; - -const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { - const t = useContext(I18nContext); - const [ - collectibleOptionsButtonElement, - setCollectibleOptionsButtonElement, - ] = useState(null); - const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false); - - return ( - <> - - - ) : ( - - - - )} + + + - {t('importNFTs')} + {t('addNFTLowerCase')} @@ -198,7 +145,4 @@ export default function CollectiblesItems({ CollectiblesItems.propTypes = { onAddNFT: PropTypes.func.isRequired, onRefreshList: PropTypes.func.isRequired, - collections: PropTypes.array, - useCollectibleDetection: PropTypes.bool.isRequired, - onEnableAutoDetect: PropTypes.func.isRequired, }; diff --git a/ui/components/app/collectibles-items/index.scss b/ui/components/app/collectibles-items/index.scss deleted file mode 100644 index 4a2f62bad..000000000 --- a/ui/components/app/collectibles-items/index.scss +++ /dev/null @@ -1,18 +0,0 @@ -.collectibles-items { - &__image { - border-radius: 0.625rem; - width: 100%; - height: 100%; - } -} - -.collection-icon { - border-radius: 50%; - width: 2rem; - height: 2rem; - padding: 0.5rem; - background: $ui-4; - color: $ui-white; - text-align: center; - line-height: 1; -} diff --git a/ui/components/app/collectibles-tab/collectibles-tab.component.js b/ui/components/app/collectibles-tab/collectibles-tab.component.js index 2c061c1d0..42c85d17a 100644 --- a/ui/components/app/collectibles-tab/collectibles-tab.component.js +++ b/ui/components/app/collectibles-tab/collectibles-tab.component.js @@ -1,7 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; import Box from '../../ui/box'; import Button from '../../ui/button'; import Typography from '../../ui/typography/typography'; @@ -16,49 +14,20 @@ import { FONT_WEIGHT, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - getCollectibles, - getCollectibleContracts, -} from '../../../ducks/metamask/metamask'; -import { getUseCollectibleDetection } from '../../../selectors'; -import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; -import { detectCollectibles } from '../../../store/actions'; export default function CollectiblesTab({ onAddNFT }) { - const collectibles = useSelector(getCollectibles); - const collectibleContracts = useSelector(getCollectibleContracts); - const useCollectibleDetection = useSelector(getUseCollectibleDetection); - const history = useHistory(); + const collectibles = []; const newNFTsDetected = false; const t = useI18nContext(); - const collections = {}; - const dispatch = useDispatch(); - - collectibles.forEach((collectible) => { - if (collections[collectible.address]) { - collections[collectible.address].collectibles.push(collectible); - } else { - const collectionContract = collectibleContracts.find( - ({ address }) => address === collectible.address, - ); - collections[collectible.address] = { - collectionName: collectionContract?.name || collectible.name, - collectionImage: - collectionContract?.logo || collectible.collectionImage, - collectibles: [collectible], - }; - } - }); return (
{collectibles.length > 0 ? ( dispatch(detectCollectibles())} - onEnableAutoDetect={() => history.push(EXPERIMENTAL_ROUTE)} + onRefreshList={() => { + console.log('refreshing collectibles'); + }} /> ) : ( diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js index 3b663b594..b9fc2f5ce 100644 --- a/ui/components/ui/box/box.js +++ b/ui/components/ui/box/box.js @@ -169,6 +169,6 @@ Box.propTypes = { display: PropTypes.oneOf(Object.values(DISPLAY)), width: PropTypes.oneOf(Object.values(BLOCK_SIZES)), height: PropTypes.oneOf(Object.values(BLOCK_SIZES)), - backgroundColor: PropTypes.string, + backgroundColor: PropTypes.oneOf(Object.values(COLORS)), className: PropTypes.string, }; diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js index 0e505c131..2d11ca3cc 100644 --- a/ui/components/ui/typography/typography.js +++ b/ui/components/ui/typography/typography.js @@ -7,7 +7,6 @@ import { FONT_STYLE, TEXT_ALIGN, TYPOGRAPHY, - OVERFLOW_WRAP, } from '../../../helpers/constants/design-system'; import Box, { MultipleSizes } from '../box'; @@ -23,7 +22,6 @@ export default function Typography({ fontStyle = 'normal', fontSize, align, - overflowWrap, boxProps = {}, margin = [1, 0], }) { @@ -37,7 +35,6 @@ export default function Typography({ [`typography--align-${align}`]: Boolean(align), [`typography--color-${color}`]: Boolean(color), [`typography--size-${fontSize}`]: Boolean(fontSize), - [`typography--overflowwrap-${overflowWrap}`]: Boolean(overflowWrap), }, ); @@ -72,7 +69,6 @@ Typography.propTypes = { margin: MultipleSizes, fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), - overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)), fontSize: PropTypes.string, tag: PropTypes.oneOf([ 'p', diff --git a/ui/components/ui/typography/typography.scss b/ui/components/ui/typography/typography.scss index 2fb59c479..ea1cbaff3 100644 --- a/ui/components/ui/typography/typography.scss +++ b/ui/components/ui/typography/typography.scss @@ -45,12 +45,6 @@ } } - @each $overflow in design-system.$overflow-wrap { - &--overflowwrap-#{$overflow} { - overflow-wrap: $overflow; - } - } - @for $i from 1 through 8 { &--spacing-#{$i} { margin: #{$i * 4}px auto; diff --git a/ui/css/design-system/attributes.scss b/ui/css/design-system/attributes.scss index 1afaf8e96..4a187a949 100644 --- a/ui/css/design-system/attributes.scss +++ b/ui/css/design-system/attributes.scss @@ -80,7 +80,6 @@ $border-style: solid, double, none, dashed, dotted; $directions: top, right, bottom, left; $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item; $text-align: left, right, center, justify, end; -$overflow-wrap: normal, break-word; $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900; $font-style: normal, italic, oblique; $font-size: 10px, 12px; diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js index 2461789fa..9578826e1 100644 --- a/ui/ducks/metamask/metamask.js +++ b/ui/ducks/metamask/metamask.js @@ -256,45 +256,6 @@ export const getUnconnectedAccountAlertShown = (state) => export const getTokens = (state) => state.metamask.tokens; -export const getCollectibles = (state) => { - const { - metamask: { - allCollectibles, - provider: { chainId }, - selectedAddress, - }, - } = state; - - let decFormattedChainId; - if (typeof chainId === 'string' && isHexString(chainId)) { - decFormattedChainId = `${parseInt(chainId, 16)}`; - } else if (typeof chainId === 'number') { - decFormattedChainId = `${chainId}`; - } - - return allCollectibles?.[selectedAddress]?.[decFormattedChainId] || []; -}; - -export const getCollectibleContracts = (state) => { - const { - metamask: { - allCollectibleContracts, - provider: { chainId }, - selectedAddress, - }, - } = state; - - let decFormattedChainId; - if (typeof chainId === 'string' && isHexString(chainId)) { - decFormattedChainId = `${parseInt(chainId, 16)}`; - } else if (typeof chainId === 'number') { - decFormattedChainId = `${chainId}`; - } - return ( - allCollectibleContracts?.[selectedAddress]?.[decFormattedChainId] || [] - ); -}; - export function getBlockGasLimit(state) { return state.metamask.currentBlockGasLimit; } diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js index d8c0dcfd6..ae26f9d28 100644 --- a/ui/helpers/constants/design-system.js +++ b/ui/helpers/constants/design-system.js @@ -171,11 +171,6 @@ export const FONT_WEIGHT = { 900: 900, }; -export const OVERFLOW_WRAP = { - BREAK_WORD: 'break-word', - NORMAL: 'normal', -}; - export const FONT_STYLE = { ITALIC: 'italic', NORMAL: 'normal', diff --git a/ui/helpers/constants/routes.js b/ui/helpers/constants/routes.js index 1de62a7ff..541dad5c1 100644 --- a/ui/helpers/constants/routes.js +++ b/ui/helpers/constants/routes.js @@ -93,7 +93,7 @@ const PATH_NAME_MAP = { [DEFAULT_ROUTE]: 'Home', [UNLOCK_ROUTE]: 'Unlock Page', [LOCK_ROUTE]: 'Lock Page', - [`${ASSET_ROUTE}/:asset/:id`]: `Asset Page`, + [`${ASSET_ROUTE}/:asset`]: `Asset Page`, [SETTINGS_ROUTE]: 'Settings Page', [GENERAL_ROUTE]: 'General Settings Page', [ADVANCED_ROUTE]: 'Advanced Settings Page', diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js index b197c3972..f7d839d08 100644 --- a/ui/helpers/utils/util.js +++ b/ui/helpers/utils/util.js @@ -3,7 +3,6 @@ import abi from 'human-standard-token-abi'; import BigNumber from 'bignumber.js'; import * as ethUtil from 'ethereumjs-util'; import { DateTime } from 'luxon'; -import { util } from '@metamask/controllers'; import { addHexPrefix } from '../../../app/scripts/lib/util'; import { GOERLI_CHAIN_ID, @@ -429,18 +428,3 @@ export const toHumanReadableTime = (t, milliseconds) => { export function clearClipboard() { window.navigator.clipboard.writeText(''); } - -export function getAssetImageURL(image, ipfsGateway) { - let result = image; - if (!image || !ipfsGateway || typeof image !== 'string') { - return ''; - } - - if (image.startsWith('ipfs://')) { - const contentIdentifier = util.getIpfsUrlContentIdentifier(image); - result = ipfsGateway.endsWith('/') - ? ipfsGateway + contentIdentifier - : `${ipfsGateway}/${contentIdentifier}`; - } - return result; -} diff --git a/ui/pages/add-collectible/add-collectible.component.js b/ui/pages/add-collectible/add-collectible.component.js index 2cf724c8b..a0fc8639f 100644 --- a/ui/pages/add-collectible/add-collectible.component.js +++ b/ui/pages/add-collectible/add-collectible.component.js @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { isValidHexAddress } from '@metamask/controllers/dist/util'; import { useI18nContext } from '../../hooks/useI18nContext'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; @@ -20,7 +19,6 @@ export default function AddCollectible() { const [address, setAddress] = useState(''); const [tokenId, setTokenId] = useState(''); - const [disabled, setDisabled] = useState(true); const handleAddCollectible = async () => { try { @@ -35,16 +33,6 @@ export default function AddCollectible() { history.push(DEFAULT_ROUTE); }; - const validateAndSetAddress = (val) => { - setDisabled(!isValidHexAddress(val) || !tokenId); - setAddress(val); - }; - - const validateAndSetTokenId = (val) => { - setDisabled(!isValidHexAddress(address) || !val); - setTokenId(val); - }; - return ( { history.push(DEFAULT_ROUTE); }} - disabled={disabled} + disabled={false} contentComponent={ @@ -68,7 +56,7 @@ export default function AddCollectible() { placeholder="0x..." type="text" value={address} - onChange={(e) => validateAndSetAddress(e.target.value)} + onChange={(e) => setAddress(e.target.value)} fullWidth autoFocus margin="normal" @@ -81,7 +69,7 @@ export default function AddCollectible() { placeholder={t('nftTokenIdPlaceholder')} type="number" value={tokenId} - onChange={(e) => validateAndSetTokenId(e.target.value)} + onChange={(e) => setTokenId(e.target.value)} fullWidth margin="normal" /> diff --git a/ui/pages/asset/asset.js b/ui/pages/asset/asset.js index ae09e8a22..303d6fdeb 100644 --- a/ui/pages/asset/asset.js +++ b/ui/pages/asset/asset.js @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { Redirect, useParams } from 'react-router-dom'; -import CollectibleDetails from '../../components/app/collectible-details/collectible-details'; -import { getCollectibles, getTokens } from '../../ducks/metamask/metamask'; +import { getTokens } from '../../ducks/metamask/metamask'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; import { isEqualCaseInsensitive } from '../../helpers/utils/util'; @@ -12,18 +11,12 @@ import TokenAsset from './components/token-asset'; const Asset = () => { const nativeCurrency = useSelector((state) => state.metamask.nativeCurrency); const tokens = useSelector(getTokens); - const collectibles = useSelector(getCollectibles); - const { asset, id } = useParams(); + const { asset } = useParams(); const token = tokens.find(({ address }) => isEqualCaseInsensitive(address, asset), ); - const collectible = collectibles.find( - ({ address, tokenId }) => - isEqualCaseInsensitive(address, asset) && id === tokenId, - ); - useEffect(() => { const el = document.querySelector('.app'); el.scroll(0, 0); @@ -32,8 +25,6 @@ const Asset = () => { let content; if (token) { content = ; - } else if (collectible) { - content = ; } else if (asset === nativeCurrency) { content = ; } else { diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index f83efe74d..ae2142891 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -184,8 +184,7 @@ export default class Routes extends Component { path={`${CONNECT_ROUTE}/:id`} component={PermissionsConnect} /> - - + ); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js index a66bd4f45..c24ddb868 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js @@ -566,7 +566,10 @@ export default class AdvancedTab extends PureComponent { } handleIpfsGatewaySave() { - this.props.setIpfsGateway(this.state.ipfsGateway); + const url = new URL(addUrlProtocolPrefix(this.state.ipfsGateway)); + const { host } = url; + + this.props.setIpfsGateway(host); } renderIpfsGatewayControl() { diff --git a/ui/store/actions.js b/ui/store/actions.js index c6e08e1a8..3262c0d19 100644 --- a/ui/store/actions.js +++ b/ui/store/actions.js @@ -2203,16 +2203,6 @@ export function setOpenSeaEnabled(val) { }; } -export function detectCollectibles() { - return async (dispatch) => { - dispatch(showLoadingIndication()); - log.debug(`background.detectCollectibles`); - await promisifiedBackground.detectCollectibles(); - dispatch(hideLoadingIndication()); - await forceUpdateMetamaskState(dispatch); - }; -} - export function setAdvancedGasFee(val) { return (dispatch) => { dispatch(showLoadingIndication()); diff --git a/yarn.lock b/yarn.lock index 73e111cf3..03a1c9a8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2601,19 +2601,19 @@ semver "^7.3.5" yargs "^17.0.1" -"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.28.0", "@metamask/contract-metadata@^1.31.0": - version "1.31.0" - resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.31.0.tgz#9e3e46de7a955ea1ca61f7db20d9a17b5e91d3d0" - integrity sha512-4FBJkg/vDiYp/thIiZknxrJ0lfsj2eWIPenwlNZmoqOhoL4VqhK5eKWxi+EuGMvv9taP+QBRk6Key7wC1uL78A== +"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.28.0", "@metamask/contract-metadata@^1.30.0": + version "1.30.0" + resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.30.0.tgz#fa8e1b0c3e7aaa963986088f691fb553ffbe3904" + integrity sha512-b2usYW/ptQYnE6zhUmr4T+nvOAQJK5ABcpKudyQANpy4K099elpv4aN0WcrcOcwV99NHOdMzFP3ZuG0HoAyOBQ== -"@metamask/controllers@^21.0.1": - version "21.0.1" - resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-21.0.1.tgz#f7776a448afd3869dce76ecb34549e867fa78ec4" - integrity sha512-E8JLRlTC7jyUgJSaXgFYa3g5pt5NCtA87hyarZFoolNKL6yrQgLHxqRyfGV28TsNsawl1i++rxb/8rgAJSRPHw== +"@metamask/controllers@^20.1.0": + version "20.1.0" + resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-20.1.0.tgz#1d8386dc22d14f9fd9feb8b3cc8314d663587550" + integrity sha512-Z/7uLGXZWbCBbtCybR3jo1bx3mcvZRUSm1i43od4dnJoQo2+Veq4ePrFVgPKS3WtLIM/hzZuI7UTAQ9HNX9aew== dependencies: "@ethereumjs/common" "^2.3.1" "@ethereumjs/tx" "^3.2.1" - "@metamask/contract-metadata" "^1.31.0" + "@metamask/contract-metadata" "^1.30.0" "@types/uuid" "^8.3.0" abort-controller "^3.0.0" async-mutex "^0.2.6" @@ -2632,7 +2632,7 @@ ethjs-unit "^0.1.6" ethjs-util "^0.1.6" human-standard-collectible-abi "^1.0.2" - human-standard-multi-collectible-abi "^1.0.4" + human-standard-multi-collectible-abi "^1.0.2" human-standard-token-abi "^2.0.0" immer "^9.0.6" isomorphic-fetch "^3.0.0" @@ -14654,10 +14654,10 @@ human-standard-collectible-abi@^1.0.2: resolved "https://registry.yarnpkg.com/human-standard-collectible-abi/-/human-standard-collectible-abi-1.0.2.tgz#077bae9ed1b0b0b82bc46932104b4b499c941aa0" integrity sha512-nD3ITUuSAIBgkaCm9J2BGwlHL8iEzFjJfTleDAC5Wi8RBJEXXhxV0JeJjd95o+rTwf98uTE5MW+VoBKOIYQh0g== -human-standard-multi-collectible-abi@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/human-standard-multi-collectible-abi/-/human-standard-multi-collectible-abi-1.0.4.tgz#981625bc1a6bea5fef90567f9e12c11581fac497" - integrity sha512-ylR9JDXClDJAxWD/QJxsjXJJdLTUmhipTquMAgrfybXL3qX3x3P/vmKg92A7qFu7SqVOf2hyv5dA8vX0j+0Thg== +human-standard-multi-collectible-abi@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/human-standard-multi-collectible-abi/-/human-standard-multi-collectible-abi-1.0.3.tgz#be5896b13f8622289cff70040e478366931bf3d7" + integrity sha512-1VXqats7JQqDZozLKhpmFG0S33hVePrkLNRJNKfJTxewR0heYKjSoz72kqs+6O/Tywi0zW4fWe7dfTaPX4j7gQ== human-standard-token-abi@^1.0.2: version "1.0.2"