mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
dc217dd536
* yet more nft ux cleanups
81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { isEqual } from 'lodash';
|
|
import {
|
|
getCollectibles,
|
|
getCollectibleContracts,
|
|
} from '../ducks/metamask/metamask';
|
|
import { getCurrentChainId, getSelectedAddress } from '../selectors';
|
|
import { usePrevious } from './usePrevious';
|
|
|
|
export function useCollectiblesCollections() {
|
|
const [collections, setCollections] = useState({});
|
|
const [previouslyOwnedCollection, setPreviouslyOwnedCollection] = useState({
|
|
collectionName: 'Previously Owned',
|
|
collectibles: [],
|
|
});
|
|
const collectibles = useSelector(getCollectibles);
|
|
const [collectiblesLoading, setCollectiblesLoading] = useState(
|
|
() => collectibles?.length >= 0,
|
|
);
|
|
const selectedAddress = useSelector(getSelectedAddress);
|
|
const chainId = useSelector(getCurrentChainId);
|
|
const collectibleContracts = useSelector(getCollectibleContracts);
|
|
const prevCollectibles = usePrevious(collectibles);
|
|
const prevChainId = usePrevious(chainId);
|
|
const prevSelectedAddress = usePrevious(selectedAddress);
|
|
useEffect(() => {
|
|
const getCollections = () => {
|
|
setCollectiblesLoading(true);
|
|
if (selectedAddress === undefined || chainId === undefined) {
|
|
return;
|
|
}
|
|
const newCollections = {};
|
|
const newPreviouslyOwnedCollections = {
|
|
collectionName: 'Previously Owned',
|
|
collectibles: [],
|
|
};
|
|
|
|
collectibles.forEach((collectible) => {
|
|
if (collectible?.isCurrentlyOwned === false) {
|
|
newPreviouslyOwnedCollections.collectibles.push(collectible);
|
|
} else if (newCollections[collectible.address]) {
|
|
newCollections[collectible.address].collectibles.push(collectible);
|
|
} else {
|
|
const collectionContract = collectibleContracts.find(
|
|
({ address }) => address === collectible.address,
|
|
);
|
|
newCollections[collectible.address] = {
|
|
collectionName: collectionContract?.name || collectible.name,
|
|
collectionImage:
|
|
collectionContract?.logo || collectible.collectionImage,
|
|
collectibles: [collectible],
|
|
};
|
|
}
|
|
});
|
|
setCollections(newCollections);
|
|
setPreviouslyOwnedCollection(newPreviouslyOwnedCollections);
|
|
setCollectiblesLoading(false);
|
|
};
|
|
|
|
if (
|
|
!isEqual(prevCollectibles, collectibles) ||
|
|
!isEqual(prevSelectedAddress, selectedAddress) ||
|
|
!isEqual(prevChainId, chainId)
|
|
) {
|
|
getCollections();
|
|
}
|
|
}, [
|
|
collectibles,
|
|
prevCollectibles,
|
|
collectibleContracts,
|
|
setCollectiblesLoading,
|
|
chainId,
|
|
prevChainId,
|
|
selectedAddress,
|
|
prevSelectedAddress,
|
|
]);
|
|
|
|
return { collectiblesLoading, collections, previouslyOwnedCollection };
|
|
}
|