From 5ca4a8868fb0f99615a7c186ea506a3e61f9a9ff Mon Sep 17 00:00:00 2001
From: sahar-fehri <sahar.fehri@consensys.net>
Date: Thu, 30 May 2024 16:19:49 +0200
Subject: [PATCH] fix: rebase and refactor

---
 .../asset-picker-modal-nft-tab.tsx            | 60 +++++++++---------
 .../asset-picker-modal/asset-picker-modal.tsx | 61 +++----------------
 .../asset-picker-modal/index.scss             |  8 +++
 3 files changed, 45 insertions(+), 84 deletions(-)

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-nft-tab.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-nft-tab.tsx
index e435b4bbbff7..4f51dbfdad7d 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-nft-tab.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-nft-tab.tsx
@@ -20,9 +20,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 import Spinner from '../../../ui/spinner';
-import { useScrollRequired } from '../../../../hooks/useScrollRequired';
 import { getIsStillNftsFetching } from '../../../../ducks/metamask/metamask';
-import PropTypes from 'prop-types';
 
 type NFT = {
   address: string;
@@ -42,22 +40,27 @@ type Collection = {
   nfts: NFT[];
 };
 
+type PreviouslyOwnedCollections = {
+  collectionName: string;
+  nfts: NFT[];
+};
+
 type AssetPickerModalNftTabProps = {
   collectionDataFiltered: Collection[];
-  previouslyOwnedCollection: any;
+  previouslyOwnedCollection: PreviouslyOwnedCollections;
   onClose: () => void;
+  renderSearch: () => void;
 };
 
 export function AssetPickerModalNftTab({
   collectionDataFiltered,
   previouslyOwnedCollection,
-  onClose
+  onClose,
+  renderSearch,
 }: AssetPickerModalNftTabProps) {
   const t = useI18nContext();
 
   const hasAnyNfts = Object.keys(collectionDataFiltered).length > 0;
-  const { isScrollable, isScrolledToBottom, ref, onScroll } =
-  useScrollRequired();
   const isNftsStillFetched = useSelector(getIsStillNftsFetching);
   const [showLoader, setShowLoader] = useState(true);
 
@@ -84,30 +87,25 @@ export function AssetPickerModalNftTab({
 
   if (hasAnyNfts) {
     return (
-      <Box
-      className="modal-tab__main-view"
-      ref={ref}
-      onScroll={onScroll}
-    >
-      <NftsItems
-        collections={collectionDataFiltered}
-        previouslyOwnedCollection={previouslyOwnedCollection}
-        isModal={true}
-        onCloseModal={() => onClose()}
-        showTokenId={true}
-        displayPreviouslyOwnedCollection={false}
-      />
-      {isScrollable &&
-      isScrolledToBottom &&
-      isNftsStillFetched.isFetchingInProgress ? (
-        <Box className="modal-tab__loading">
-          <Spinner
-            color="var(--color-warning-default)"
-            className="loading-overlay__spinner"
-          />
-        </Box>
-      ) : null}
-    </Box>
+      <Box className="modal-tab__main-view">
+        {renderSearch()}
+        <NftsItems
+          collections={collectionDataFiltered}
+          previouslyOwnedCollection={previouslyOwnedCollection}
+          isModal={true}
+          onCloseModal={() => onClose()}
+          showTokenId={true}
+          displayPreviouslyOwnedCollection={false}
+        />
+        {isNftsStillFetched.isFetchingInProgress ? (
+          <Box className="modal-tab__fetching">
+            <Spinner
+              color="var(--color-warning-default)"
+              className="loading-overlay__spinner"
+            />
+          </Box>
+        ) : null}
+      </Box>
     );
   }
   return (
@@ -148,4 +146,4 @@ export function AssetPickerModalNftTab({
       </Box>
     </Box>
   );
-}
\ No newline at end of file
+}
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
index 91c4036cbe77..71382d535088 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
@@ -14,23 +14,21 @@ import {
   TextFieldSearchSize,
   AvatarTokenSize,
   AvatarToken,
+  Text,
 } from '../../../component-library';
 import {
   BlockSize,
   BorderRadius,
-  TextColor,
   TextVariant,
   TextAlign,
   Display,
   AlignItems,
-  FlexDirection,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 import { AssetType } from '../../../../../shared/constants/transaction';
 
 import { useNftsCollections } from '../../../../hooks/useNftsCollections';
-import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 import {
   getCurrentChainId,
   getCurrentCurrency,
@@ -52,6 +50,7 @@ import { getRenderableTokenData } from '../../../../hooks/useTokensToSearch';
 import { useEqualityCheck } from '../../../../hooks/useEqualityCheck';
 import AssetList from './AssetList';
 import { Asset, Collection, Token } from './types';
+import { AssetPickerModalNftTab } from './asset-picker-modal-nft-tab';
 
 type AssetPickerModalProps = {
   isOpen: boolean;
@@ -78,8 +77,6 @@ export function AssetPickerModal({
 
   const { collections, previouslyOwnedCollection } = useNftsCollections();
 
-  const hasAnyNfts = Object.keys(collections).length > 0;
-
   const collectionsKeys = Object.keys(collections);
 
   const collectionsData = collectionsKeys.reduce((acc: unknown[], key) => {
@@ -327,54 +324,12 @@ export function AssetPickerModal({
                   name={t('nfts')}
                   tabKey="nfts"
                 >
-                  {hasAnyNfts ? (
-                    <Box className="modal-tab__main-view">
-                      <Search />
-                      <NftsItems
-                        collections={collectionDataFiltered}
-                        previouslyOwnedCollection={previouslyOwnedCollection}
-                        isModal={true}
-                        onCloseModal={() => onClose()}
-                        showTokenId={true}
-                        displayPreviouslyOwnedCollection={false}
-                      />
-                    </Box>
-                  ) : (
-                    <Box
-                      padding={12}
-                      display={Display.Flex}
-                      flexDirection={FlexDirection.Column}
-                      alignItems={AlignItems.center}
-                      justifyContent={JustifyContent.center}
-                    >
-                      <Box justifyContent={JustifyContent.center}>
-                        <img src="./images/no-nfts.svg" />
-                      </Box>
-                      <Box
-                        display={Display.Flex}
-                        justifyContent={JustifyContent.center}
-                        alignItems={AlignItems.center}
-                        flexDirection={FlexDirection.Column}
-                        className="nfts-tab__link"
-                      >
-                        <Text
-                          color={TextColor.textMuted}
-                          variant={TextVariant.headingSm}
-                          textAlign={TextAlign.Center}
-                          as="h4"
-                        >
-                          {t('noNFTs')}
-                        </Text>
-                        <ButtonLink
-                          size={ButtonLinkSize.Sm}
-                          href={ZENDESK_URLS.NFT_TOKENS}
-                          externalLink
-                        >
-                          {t('learnMoreUpperCase')}
-                        </ButtonLink>
-                      </Box>
-                    </Box>
-                  )}
+                  <AssetPickerModalNftTab
+                    collectionDataFiltered={collectionDataFiltered}
+                    previouslyOwnedCollection={previouslyOwnedCollection}
+                    onClose={onClose}
+                    renderSearch={Search}
+                  />
                 </Tab>
               }
             </Tabs>
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
index 29dd69ecb3fa..bec402481064 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss
@@ -101,5 +101,13 @@
       justify-content: center;
       padding: 15px;
     }
+
+    &__fetching {
+      display: flex;
+      height: 100px;
+      align-items: center;
+      justify-content: center;
+      padding: 15px;
+    }
   }
 }