From cd8dc8d486788b8c6457c96e1804aa06a2898cd0 Mon Sep 17 00:00:00 2001 From: Agustin Pane Date: Mon, 2 Nov 2020 09:27:49 -0300 Subject: [PATCH] Uses orderedNFTAssets (#1546) Co-authored-by: Daniel Sanchez --- src/logic/collectibles/store/selectors/index.ts | 6 +++++- src/routes/safe/components/Balances/Collectibles/index.tsx | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/logic/collectibles/store/selectors/index.ts b/src/logic/collectibles/store/selectors/index.ts index e8940dcc..1c5e6412 100644 --- a/src/logic/collectibles/store/selectors/index.ts +++ b/src/logic/collectibles/store/selectors/index.ts @@ -1,5 +1,5 @@ import { createSelector } from 'reselect' -import { NFTAsset, NFTAssets, NFTTokens } from 'src/logic/collectibles/sources/collectibles.d' +import { NFTAsset, NFTAssets, NFTToken, NFTTokens } from 'src/logic/collectibles/sources/collectibles.d' import { AppReduxState } from 'src/store' import { NFT_ASSETS_REDUCER_ID, NFT_TOKENS_REDUCER_ID } from 'src/logic/collectibles/store/reducer/collectibles' @@ -20,6 +20,10 @@ export const availableNftAssetsAddresses = createSelector(nftTokensSelector, (us return Array.from(new Set(userNftTokens.map((nftToken) => nftToken.assetAddress))) }) +export const orderedNFTAssets = createSelector(nftTokensSelector, (userNftTokens): NFTToken[] => + userNftTokens.sort((a, b) => a.name.localeCompare(b.name)), +) + export const activeNftAssetsListSelector = createSelector( nftAssetsListSelector, safeActiveAssetsSelector, diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx index fa2185da..14efee7b 100644 --- a/src/routes/safe/components/Balances/Collectibles/index.tsx +++ b/src/routes/safe/components/Balances/Collectibles/index.tsx @@ -6,7 +6,7 @@ import { useSelector } from 'react-redux' import Item from './components/Item' import Paragraph from 'src/components/layout/Paragraph' -import { activeNftAssetsListSelector, nftTokensSelector } from 'src/logic/collectibles/store/selectors' +import { activeNftAssetsListSelector, orderedNFTAssets } from 'src/logic/collectibles/store/selectors' import SendModal from 'src/routes/safe/components/Balances/SendModal' import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables' import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics' @@ -81,7 +81,7 @@ const Collectibles = (): React.ReactElement => { const classes = useStyles() const [selectedToken, setSelectedToken] = React.useState() const [sendNFTsModalOpen, setSendNFTsModalOpen] = React.useState(false) - const nftTokens = useSelector(nftTokensSelector) + const nftTokens = useSelector(orderedNFTAssets) const activeAssetsList = useSelector(activeNftAssetsListSelector) const { trackEvent } = useAnalytics()