import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { isEqual } from 'lodash'; import Box from '../../ui/box'; import Typography from '../../ui/typography/typography'; import Card from '../../ui/card'; import { COLORS, TYPOGRAPHY, JUSTIFY_CONTENT, FLEX_DIRECTION, ALIGN_ITEMS, DISPLAY, BLOCK_SIZES, FLEX_WRAP, } from '../../../helpers/constants/design-system'; import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { getCurrentChainId, getIpfsGateway, getSelectedAddress, } from '../../../selectors'; import { ASSET_ROUTE } from '../../../helpers/constants/routes'; import { getAssetImageURL } from '../../../helpers/utils/util'; import { updateCollectibleDropDownState } from '../../../store/actions'; import { usePrevious } from '../../../hooks/usePrevious'; import { getCollectiblesDropdownState } from '../../../ducks/metamask/metamask'; import { useI18nContext } from '../../../hooks/useI18nContext'; import CollectibleDefaultImage from '../collectible-default-image'; const width = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? BLOCK_SIZES.ONE_THIRD : BLOCK_SIZES.ONE_SIXTH; const PREVIOUSLY_OWNED_KEY = 'previouslyOwned'; export default function CollectiblesItems({ collections = {}, previouslyOwnedCollection = {}, }) { const dispatch = useDispatch(); const collectionsKeys = Object.keys(collections); const collectiblesDropdownState = useSelector(getCollectiblesDropdownState); const previousCollectionKeys = usePrevious(collectionsKeys); const selectedAddress = useSelector(getSelectedAddress); const chainId = useSelector(getCurrentChainId); const t = useI18nContext(); useEffect(() => { if ( chainId !== undefined && selectedAddress !== undefined && !isEqual(previousCollectionKeys, collectionsKeys) && (collectiblesDropdownState?.[selectedAddress]?.[chainId] === undefined || Object.keys(collectiblesDropdownState?.[selectedAddress]?.[chainId]) .length === 0) ) { const initState = {}; collectionsKeys.forEach((key) => { initState[key] = true; }); const newCollectibleDropdownState = { ...collectiblesDropdownState, [selectedAddress]: { ...collectiblesDropdownState?.[selectedAddress], [chainId]: initState, }, }; dispatch(updateCollectibleDropDownState(newCollectibleDropdownState)); } }, [ collectionsKeys, previousCollectionKeys, collectiblesDropdownState, selectedAddress, chainId, dispatch, ]); const ipfsGateway = useSelector(getIpfsGateway); const history = useHistory(); const renderCollectionImage = ( isPreviouslyOwnedCollection, collectionImage, collectionName, ) => { if (isPreviouslyOwnedCollection) { return null; } if (collectionImage) { return ( ); } return (
{collectionName?.[0]?.toUpperCase() ?? null}
); }; const updateCollectibleDropDownStateKey = (key, isExpanded) => { const currentAccountCollectibleDropdownState = collectiblesDropdownState[selectedAddress][chainId]; const newCurrentAccountState = { ...currentAccountCollectibleDropdownState, [key]: !isExpanded, }; collectiblesDropdownState[selectedAddress][ chainId ] = newCurrentAccountState; dispatch(updateCollectibleDropDownState(collectiblesDropdownState)); }; const renderCollection = ({ collectibles, collectionName, collectionImage, key, isPreviouslyOwnedCollection, }) => { if (!collectibles.length) { return null; } const isExpanded = collectiblesDropdownState[selectedAddress]?.[chainId]?.[key]; return (
{isExpanded ? ( {collectibles.map((collectible, i) => { const { image, address, tokenId, backgroundColor, name, } = collectible; const collectibleImage = getAssetImageURL(image, ipfsGateway); const handleImageClick = () => history.push(`${ASSET_ROUTE}/${address}/${tokenId}`); return ( {collectibleImage ? (
) : ( )}
); })}
) : null}
); }; return (
<> {collectionsKeys.map((key) => { const { collectibles, collectionName, collectionImage, } = collections[key]; return renderCollection({ collectibles, collectionName, collectionImage, key, isPreviouslyOwnedCollection: false, }); })} {renderCollection({ collectibles: previouslyOwnedCollection.collectibles, collectionName: previouslyOwnedCollection.collectionName, isPreviouslyOwnedCollection: true, key: PREVIOUSLY_OWNED_KEY, })}
); } CollectiblesItems.propTypes = { previouslyOwnedCollection: PropTypes.shape({ collectibles: PropTypes.arrayOf( PropTypes.shape({ address: PropTypes.string.isRequired, tokenId: PropTypes.string.isRequired, name: PropTypes.string, description: PropTypes.string, image: PropTypes.string, standard: PropTypes.string, imageThumbnail: PropTypes.string, imagePreview: PropTypes.string, creator: PropTypes.shape({ address: PropTypes.string, config: PropTypes.string, profile_img_url: PropTypes.string, }), }), ), collectionName: PropTypes.string, }), collections: PropTypes.shape({ collectibles: PropTypes.arrayOf( PropTypes.shape({ address: PropTypes.string.isRequired, tokenId: PropTypes.string.isRequired, name: PropTypes.string, description: PropTypes.string, image: PropTypes.string, standard: PropTypes.string, imageThumbnail: PropTypes.string, imagePreview: PropTypes.string, creator: PropTypes.shape({ address: PropTypes.string, config: PropTypes.string, profile_img_url: PropTypes.string, }), }), ), collectionImage: PropTypes.string, collectionName: PropTypes.string, }), };