import React from 'react'
import { useAccount } from 'wagmi'
import { ChainAddress } from '@futureverse/asset-register/types'
import { useAssets } from '@futureverse/asset-register-react/v2'
import { useFuturePassAccountAddress } from '@futureverse/react'
// React component to render all collectibles owned by a FuturePass user logged in.
export const AssetList = () => {
// Get EOA address
const { address } = useAccount()
// Get FV address
const { data: fpAccount } = useFuturePassAccountAddress()
const collectionIds = [
"7672:root:1234",
"7672:root:2341",
"99992:xrpl:rhMF5EWPpv6tn29fYF9x5Ny7Srs6x8x4iR"
]
const {
assets
} = useAssets(
{
first: 1000,
addresses: [address as ChainAddress, fpAccount as ChainAddress],
collectionIds
},
{ enabled: !!fpAccount && !!address },
)
if (!assets) {
return null
}
return (
<div>
{assets.map((asset) => <Asset key={asset.id} asset={asset} />)}
</div>
)
}