feat: 💄UX/UI Improvements on HiddenCollections section (#7912)

Fix some UI broken + improve SimpleHash tool
LedgerHQ · Oct 29, 2024 · c2cd1a8 · c2cd1a8
1 parent 4febbaa
commit c2cd1a8
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 185 deletions.
diff --git a/.changeset/short-hotels-invite.md b/.changeset/short-hotels-invite.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+UX/UI Improvements on HiddenCollections section
diff --git a/...ive-desktop/src/newArch/features/Collectibles/Nfts/screens/Gallery/useNftGalleryModel.tsx b/...ive-desktop/src/newArch/features/Collectibles/Nfts/screens/Gallery/useNftGalleryModel.tsx
@@ -3,12 +3,13 @@ import { useDispatch, useSelector } from "react-redux";
 import { State } from "~/renderer/reducers";
 import { accountSelector } from "~/renderer/reducers/accounts";
 import { hiddenNftCollectionsSelector } from "~/renderer/reducers/settings";
-import { useNftGalleryFilter, isThresholdValid, Chain } from "@ledgerhq/live-nft-react";
+import { useNftGalleryFilter, isThresholdValid } from "@ledgerhq/live-nft-react";
 import { nftsByCollections } from "@ledgerhq/live-nft";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { openModal } from "~/renderer/actions/modals";
 import { useOnScreen } from "LLD/hooks/useOnScreen";
 import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
+import { BlockchainEVM } from "@ledgerhq/live-nft/supported";
 
 const defaultNumberOfVisibleNfts = 10;
 
@@ -31,7 +32,7 @@ const useNftGalleryModel = () => {
   const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
     nftsOwned: account?.nfts || [],
     addresses: account?.freshAddress || "",
-    chains: [account?.currency.id ?? Chain.ETHEREUM],
+    chains: [account?.currency.id ?? BlockchainEVM.Ethereum],
     threshold: isThresholdValid(threshold) ? Number(threshold) : 75,
   });
 

diff --git a/apps/ledger-live-desktop/src/renderer/hooks/useSyncNFTsWithAccounts.ts b/apps/ledger-live-desktop/src/renderer/hooks/useSyncNFTsWithAccounts.ts
@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { useHideSpamCollection } from "./useHideSpamCollection";
-import { isThresholdValid, supportedChains, useCheckNftAccount } from "@ledgerhq/live-nft-react";
+import { isThresholdValid, useCheckNftAccount } from "@ledgerhq/live-nft-react";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { useSelector } from "react-redux";
 import { accountsSelector, orderedVisibleNftsSelector } from "../reducers/accounts";
 import isEqual from "lodash/isEqual";
+import { getEnv } from "@ledgerhq/live-env";
 
 /**
  * Represents the size of groups for batching address fetching.
@@ -35,6 +36,7 @@ const TIMER = 5 * 60 * 60 * 1000; // 5 hours = 18000000 ms
  */
 
 export function useSyncNFTsWithAccounts() {
+  const SUPPORTED_NFT_CURRENCIES = getEnv("NFT_CURRENCIES");
   const nftsFromSimplehashFeature = useFeature("nftsFromSimplehash");
   const threshold = isThresholdValid(Number(nftsFromSimplehashFeature?.params?.threshold))
     ? Number(nftsFromSimplehashFeature?.params?.threshold)
@@ -80,7 +82,7 @@ export function useSyncNFTsWithAccounts() {
   useCheckNftAccount({
     addresses: groupToFetch.join(","),
     nftsOwned,
-    chains: supportedChains,
+    chains: SUPPORTED_NFT_CURRENCIES,
     threshold,
     action: hideSpamCollection,
     enabled,

diff --git a/apps/ledger-live-desktop/src/renderer/modals/SimpleHashTools/index.tsx b/apps/ledger-live-desktop/src/renderer/modals/SimpleHashTools/index.tsx
@@ -11,7 +11,7 @@ import RefreshMetadata, {
   HookResult as RefreshHookResult,
   useHook as useHookRefresh,
 } from "~/renderer/screens/settings/sections/Developer/SimpleHashTools/RefreshMetadata";
-import { Flex } from "@ledgerhq/react-ui";
+import { Flex, InfiniteLoader } from "@ledgerhq/react-ui";
 import Button from "~/renderer/components/ButtonV3";
 import SpamScore, {
   HookResult as SpamScoreHookResult,
@@ -35,6 +35,7 @@ const getItems = (
       cta: t("settings.developer.debugSimpleHash.debugSpamNft.report"),
       closeInfo: hooks.spam.closeInfo,
       displayInfo: hooks.spam.displayInfo,
+      isLoading: hooks.spam.spamReportMutation.isPending,
     },
     {
       key: "refresh",
@@ -44,6 +45,7 @@ const getItems = (
       cta: t("settings.developer.debugSimpleHash.debugRefreshMetadata.refresh"),
       closeInfo: hooks.refresh.closeInfo,
       displayInfo: hooks.refresh.displayInfo,
+      isLoading: hooks.refresh.refreshMutation.isPending,
     },
     {
       key: "check",
@@ -53,6 +55,7 @@ const getItems = (
       cta: t("settings.developer.debugSimpleHash.debugCheckSpamScore.check"),
       closeInfo: hooks.check.closeInfo,
       displayInfo: hooks.check.displayInfo,
+      isLoading: hooks.check.checkSpamScore.isLoading,
     },
   ];
 
@@ -80,6 +83,7 @@ const SimpleHashToolsDebugger = () => {
     <Modal
       name="MODAL_SIMPLEHASH_TOOLS"
       centered
+      width={800}
       render={({ onClose }) => (
         <ModalBody
           onClose={onClose}
@@ -101,15 +105,17 @@ const SimpleHashToolsDebugger = () => {
                 height={15}
               />
               <ScrollArea>
-                <Flex minHeight={550} flex={1} mt={2}>
+                <Flex minHeight={550} flex={1} mt={2} alignItems="center" justifyContent="center">
                   {activeItem.value}
                 </Flex>
               </ScrollArea>
             </>
           )}
           renderFooter={() => (
             <>
-              {displayInfo ? (
+              {activeItem.isLoading ? (
+                <InfiniteLoader />
+              ) : displayInfo ? (
                 <Button variant="main" onClick={closeInfo}>
                   {t("settings.developer.debugSimpleHash.back")}
                 </Button>

diff --git a/apps/ledger-live-desktop/src/renderer/screens/nft/Gallery/Gallery.tsx b/apps/ledger-live-desktop/src/renderer/screens/nft/Gallery/Gallery.tsx
@@ -20,8 +20,9 @@ import { State } from "~/renderer/reducers";
 import { ProtoNFT } from "@ledgerhq/types-live";
 import theme from "@ledgerhq/react-ui/styles/theme";
 import { useOnScreen } from "../useOnScreen";
-import { Chain, isThresholdValid, useNftGalleryFilter } from "@ledgerhq/live-nft-react";
+import { isThresholdValid, useNftGalleryFilter } from "@ledgerhq/live-nft-react";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { BlockchainEVM } from "@ledgerhq/live-nft/supported";
 
 const SpinnerContainer = styled.div`
   display: flex;
@@ -69,7 +70,7 @@ const Gallery = () => {
   const { nfts, fetchNextPage, hasNextPage } = useNftGalleryFilter({
     nftsOwned: account?.nfts || [],
     addresses: account?.freshAddress || "",
-    chains: [account?.currency.id ?? Chain.ETHEREUM],
+    chains: [account?.currency.id ?? BlockchainEVM.Ethereum],
     threshold: isThresholdValid(thresold) ? Number(thresold) : 75,
   });
 

diff --git a/...ger-live-desktop/src/renderer/screens/settings/sections/Accounts/HiddenNFTCollections.tsx b/...ger-live-desktop/src/renderer/screens/settings/sections/Accounts/HiddenNFTCollections.tsx
diff --git a/...e-desktop/src/renderer/screens/settings/sections/Accounts/HiddenNFTCollections/helpers.ts b/...e-desktop/src/renderer/screens/settings/sections/Accounts/HiddenNFTCollections/helpers.ts
@@ -0,0 +1,2 @@
+export const splitAddress = (str: string, length: number) =>
+  `${str.slice(0, length)}...${str.slice(-length)}`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const splitAddress = (str: string, length: number) =>
		`${str.slice(0, length)}...${str.slice(-length)}`;