fix: updates to wallet asset schemas (#5132)

* updates to wallet asset schemas

* update map type and market check

* much better syntax
This commit is contained in:
Charles Bachmeier 2022-11-09 10:31:30 -05:00 committed by GitHub
parent 9a38c4e58d
commit ed7f126bd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 30 deletions

@ -4,6 +4,7 @@ import { useLazyLoadQuery, usePaginationFragment } from 'react-relay'
import { NftBalancePaginationQuery } from './__generated__/NftBalancePaginationQuery.graphql'
import { NftBalanceQuery } from './__generated__/NftBalanceQuery.graphql'
import { NftBalanceQuery_nftBalances$data } from './__generated__/NftBalanceQuery_nftBalances.graphql'
const nftBalancePaginationQuery = graphql`
fragment NftBalanceQuery_nftBalances on Query @refetchable(queryName: "NftBalancePaginationQuery") {
@ -18,6 +19,7 @@ const nftBalancePaginationQuery = graphql`
edges {
node {
ownedAsset {
id
animationUrl
collection {
isVerified
@ -105,6 +107,11 @@ const nftBalanceQuery = graphql`
}
`
type NftBalanceQueryAsset = NonNullable<
NonNullable<NonNullable<NftBalanceQuery_nftBalances$data['nftBalances']>['edges']>[number]
>
//
// export type TokenQueryData = NonNullable<TokenQuery$data['tokens']>[number]
export function useNftBalanceQuery(
ownerAddress: string,
collectionFilters?: string[],
@ -127,31 +134,31 @@ export function useNftBalanceQuery(
nftBalancePaginationQuery,
queryData
)
const walletAssets: WalletAsset[] = data.nftBalances?.edges?.map((queryAsset: { node: any }) => {
const walletAssets: WalletAsset[] = data.nftBalances?.edges?.map((queryAsset: NftBalanceQueryAsset) => {
const asset = queryAsset.node.ownedAsset
return {
id: asset.id,
image_url: asset.image?.url,
image_preview_url: asset.smallImage?.url,
name: asset.name,
tokenId: asset.tokenId,
id: asset?.id,
image_url: asset?.image?.url,
image_preview_url: asset?.smallImage?.url,
name: asset?.name,
tokenId: asset?.tokenId,
asset_contract: {
address: asset.collection?.nftContracts[0].address,
schema_name: asset.collection?.nftContracts[0].standard,
name: asset.collection?.name,
description: asset.description,
image_url: asset.collection?.image?.url,
payout_address: queryAsset.node.listingFees && queryAsset.node.listingFees[0].payoutAddress,
address: asset?.collection?.nftContracts?.[0]?.address,
schema_name: asset?.collection?.nftContracts?.[0]?.standard,
name: asset?.collection?.name,
description: asset?.description,
image_url: asset?.collection?.image?.url,
payout_address: queryAsset?.node?.listingFees?.[0]?.payoutAddress,
},
collection: asset.collection,
collectionIsVerified: asset.collection?.isVerified,
collection: asset?.collection,
collectionIsVerified: asset?.collection?.isVerified,
lastPrice: queryAsset.node.lastPrice?.value,
floorPrice: asset.collection?.markets[0]?.floorPrice?.value,
creatorPercentage: queryAsset.node.listingFees && queryAsset.node.listingFees[0].basisPoints / 10000,
listing_date: asset.listings ? asset.listings[0]?.edges[0]?.node.createdAt : undefined,
floorPrice: asset?.collection?.markets?.[0]?.floorPrice?.value,
creatorPercentage: queryAsset?.node?.listingFees?.[0]?.basisPoints ?? 0 / 10000,
listing_date: asset?.listings?.edges?.[0]?.node?.createdAt,
date_acquired: queryAsset.node.lastPrice?.timestamp,
sellOrders: asset.listings?.edges,
floor_sell_order_price: asset.listings ? asset.listings[0]?.edges[0]?.node.price.value : undefined,
sellOrders: asset?.listings?.edges.map((edge: any) => edge.node),
floor_sell_order_price: asset?.listings?.edges?.[0]?.node?.price?.value,
}
})
return { walletAssets, hasNext, isLoadingNext, loadNext }

@ -91,17 +91,19 @@ export const WalletAssetDisplay = ({ asset, isSellMode }: { asset: WalletAsset;
<Row justifyContent="flex-end">
{uniqueSellOrdersMarketplaces.map((market, index) => {
return (
<Box
as="img"
key={index}
alt={market}
width="16"
height="16"
borderRadius="4"
marginLeft="4"
objectFit="cover"
src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`}
/>
market && (
<Box
as="img"
key={index}
alt={market}
width="16"
height="16"
borderRadius="4"
marginLeft="4"
objectFit="cover"
src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`}
/>
)
)
})}
</Row>