get asset list on sell nft click

Author: iskysun96

projects/orakle-nft-marketplace-app-frontend/src/atoms.ts

@@ -7,5 +7,4 @@ export const algorandClientAtom = atom<AlgorandClient | null>(null)
 export const listClientAtom = atom<NftMarketplaceListClient | null>(null)
 export const isSellingAtom = atom<boolean>(false)
 export const appDetailsListAtom = atom<appDetails[]>([])
-export const assetHoldingAtom = atom<bigint[]>([])
 export const healthAtom = atom<boolean>(false)

projects/orakle-nft-marketplace-app-frontend/src/components/Header.tsx

@@ -1,7 +1,7 @@
 import { useWallet } from '@txnlab/use-wallet'
 import { useAtomValue } from 'jotai'
 import { useState } from 'react'
-import { isSellingAtom } from '../atoms'
+import { algorandClientAtom, isSellingAtom } from '../atoms'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import ConnectWallet from './ConnectWallet'
 import MintNft from './MintNft'
@@ -11,16 +11,27 @@ import Withdraw from './Withdraw'
 export function Header() {
   const { activeAddress } = useWallet()
   const isSelling = useAtomValue(isSellingAtom)
+  const algorandClient = useAtomValue(algorandClientAtom)
 
   const [openWalletModal, setOpenWalletModal] = useState(false)
   const [openSellModal, setOpenSellModal] = useState(false)
   const [openWithdrawModal, setOpenWithdrawModal] = useState(false)
   const [openMintModal, setOpenMintModal] = useState(false)
+  const [assetHolding, setAssetHolding] = useState<bigint[]>([])
 
   const toggleWalletModal = () => {
     setOpenWalletModal((prev) => !prev)
   }
   const toggleSellModal = () => {
+    if (activeAddress && algorandClient) {
+      algorandClient!.account.getInformation(activeAddress!).then((info) => {
+        const listOfAssetsHolding = []
+        for (const asset of info.assets!) {
+          listOfAssetsHolding.push(BigInt(asset.assetId))
+        }
+        setAssetHolding(listOfAssetsHolding)
+      })
+    }
     setOpenSellModal((prev) => !prev)
   }
   const toggleWithdrawModal = () => {
@@ -51,7 +62,7 @@ export function Header() {
         </button>
       </div>
       <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-      <Sell openModal={openSellModal} setModalState={setOpenSellModal} />
+      <Sell assetHolding={assetHolding} openModal={openSellModal} setModalState={setOpenSellModal} />
       <Withdraw openModal={openWithdrawModal} setModalState={setOpenWithdrawModal} />
       <MintNft openModal={openMintModal} setModalState={setOpenMintModal} />
     </div>

projects/orakle-nft-marketplace-app-frontend/src/components/Sell.tsx

@@ -2,16 +2,17 @@ import { useWallet } from '@txnlab/use-wallet'
 import { useAtomValue } from 'jotai'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
-import { algorandClientAtom, assetHoldingAtom, listClientAtom } from '../atoms'
+import { algorandClientAtom, listClientAtom } from '../atoms'
 import * as methods from '../methods'
 import { getCurrentNftmClient } from '../utils/getCurrentNftmClient'
 
 interface SellInterface {
+  assetHolding: bigint[]
   openModal: boolean
   setModalState: (value: boolean) => void
 }
 
-const Sell = ({ openModal, setModalState }: SellInterface) => {
+const Sell = ({ assetHolding, openModal, setModalState }: SellInterface) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [assetIdToSell, setAssetIdToSell] = useState<string>('')
   const [unitaryPrice, setUnitaryPrice] = useState<string>('')
@@ -22,7 +23,6 @@ const Sell = ({ openModal, setModalState }: SellInterface) => {
   const { signer, activeAddress, clients, activeAccount } = useWallet()
   const algorandClient = useAtomValue(algorandClientAtom)
   const listClient = useAtomValue(listClientAtom)
-  const assetHolding = useAtomValue(assetHoldingAtom)
 
   const handleMethodCall = async () => {
     setLoading(true)

projects/orakle-nft-marketplace-app-frontend/src/hooks/useMarketPlace.ts

@@ -2,7 +2,7 @@ import AlgorandClient from '@algorandfoundation/algokit-utils/types/algorand-cli
 import { useWallet } from '@txnlab/use-wallet'
 import { useAtom, useSetAtom } from 'jotai'
 import { useEffect, useState } from 'react'
-import { algorandClientAtom, appDetailsListAtom, assetHoldingAtom, healthAtom, isSellingAtom, listClientAtom } from '../atoms'
+import { algorandClientAtom, appDetailsListAtom, healthAtom, isSellingAtom, listClientAtom } from '../atoms'
 import { NftMarketplaceListClient } from '../contracts/NftMarketplaceList'
 import { getAppList } from '../utils/getAppList'
 import { marketplaceListAppId } from '../utils/marketplaceListAppId'
@@ -16,7 +16,6 @@ export function useMarketPlace() {
   const [listClient, setListClient] = useAtom(listClientAtom)
   const setAppDetailsList = useSetAtom(appDetailsListAtom)
   const setIsSelling = useSetAtom(isSellingAtom)
-  const setAssetHolding = useSetAtom(assetHoldingAtom)
   const setHealthAtom = useSetAtom(healthAtom)
   const [health, setHealth] = useState(false)
 
@@ -71,14 +70,6 @@ export function useMarketPlace() {
         const isUserSelling = appList.some((app) => app.creator === activeAddress)
         setIsSelling(isUserSelling)
         setHealthAtom(true)
-
-        algorandClient.account.getInformation(activeAddress).then((info) => {
-          const listOfAssetsHolding = []
-          for (const asset of info.assets!) {
-            listOfAssetsHolding.push(BigInt(asset.assetId))
-          }
-          setAssetHolding(listOfAssetsHolding)
-        })
       })
     }
   }, [algorandClient, listClient, activeAddress])