d-bis/js
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3 from thirdweb-dev/am/listing

Browse Source 
Display all NFTs on marketplace listing
This commit is contained in:
adam-maj
2022-03-18 18:47:32 -04:00
committed by GitHub
parent 5cff09d02c 471289a53d
commit 8fa1728996
2 changed files with 124 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
@3rdweb-sdk/react/hooks/useAlchemy.ts
+25 -9
View File
@@ -1,10 +1,9 @@
import { useActiveChainId, useWeb3 } from ".";
import { useQueryWithNetwork } from "./query/useQueryWithNetwork";
import { AlchemyWeb3, createAlchemyWeb3 } from "@alch/alchemy-web3";
import { alchemyUrlMap } from "components/app-layouts/providers";
import { useEffect, useState } from "react";
import { SUPPORTED_CHAIN_ID } from "utils/network";
import { useActiveChainId, useWeb3 } from ".";
import { useQueryWithNetwork } from "./query/useQueryWithNetwork";
export function useAlchemy() {
const activeChainId = useActiveChainId();
@@ -24,9 +23,11 @@ export function useAlchemy() {
export type WalletNftData = {
contractAddress: string;
tokenId: number;
tokenType: "ERC1155" | "ERC721";
image: string;
name?: string;
tokenType: "erc1155" | "erc721";
image?: string;
metadata?: {
[key: string]: any;
};
};
export function useWalletNFTs() {
@@ -43,20 +44,35 @@ export function useWalletNFTs() {
const data = await alchemy.getNfts({ owner: address });
const nftData = data.ownedNfts
.map((nft) => {
if (!nft.contract.address) {
return null;
}
if ((nft as any).metadata && (nft as any).metadata.image) {
return {
contractAddress: nft.contract.address,
tokenId: parseInt(nft.id.tokenId, 16),
...(nft as any).metadata,
metadata: (nft as any).metadata,
image: (nft as any).metadata?.image.replace(
"ipfs://",
`${process.env.NEXT_PUBLIC_IPFS_GATEWAY_URL}/`,
),
tokenType: nft.id.tokenMetadata?.tokenType,
};
} else if ((nft as any).metadata) {
return {
contractAddress: nft.contract.address,
tokenId: parseInt(nft.id.tokenId, 16),
metadata: (nft as any).metadata,
tokenType: nft.id.tokenMetadata?.tokenType,
};
} else {
return {
contractAddress: nft.contract.address,
tokenId: parseInt(nft.id.tokenId, 16),
tokenType: nft.id.tokenMetadata?.tokenType,
};
}
return null;
})
.filter((nft) => !!nft);
components/contract-pages/forms/mint/list.marketplace.tsx
+99 -19
View File
@@ -15,11 +15,13 @@ import {
FormHelperText,
FormLabel,
Heading,
Icon,
Image,
Input,
Select,
Spinner,
Stack,
Text,
Tooltip,
useModalContext,
} from "@chakra-ui/react";
@@ -30,6 +32,7 @@ import { CurrencySelector } from "components/shared/CurrencySelector";
import { useTxNotifications } from "hooks/useTxNotifications";
import React from "react";
import { useForm } from "react-hook-form";
import { FaImage } from "react-icons/fa";
const LIST_FORM_ID = "marketplace-list-form";
interface IMarketplaceListForm {
@@ -151,25 +154,102 @@ export const MarketplaceListForm: React.FC<IMarketplaceListForm> = ({
</FormHelperText>
{nfts?.length ? (
<Flex gap={2} flexWrap="wrap">
{nfts.map((nft, id) => (
<Tooltip key={id} label={nft.name || ""}>
<Image
src={nft.image}
width="140px"
height="140px"
alt={nft.name || ""}
borderRadius="md"
cursor="pointer"
onClick={() =>
isSelected(nft)
? setValue("selected", undefined)
: setValue("selected", nft)
}
border={isSelected(nft) ? "5px solid" : undefined}
borderColor={isSelected(nft) ? "purple.500" : undefined}
/>
</Tooltip>
))}
{nfts.map((nft, id) => {
if (nft.image) {
return (
<Tooltip
key={id}
label={`
Name: ${nft.metadata?.name} |
Contract: ${nft.contractAddress} |
Token ID: ${nft.tokenId} |
Token Type: ${nft.tokenType}
`}
>
<Image
src={nft.image}
width="140px"
height="140px"
alt={nft.metadata?.name || ""}
borderRadius="md"
cursor="pointer"
onClick={() =>
isSelected(nft)
? setValue("selected", undefined)
: setValue("selected", nft)
}
border={isSelected(nft) ? "5px solid" : undefined}
borderColor={
isSelected(nft) ? "purple.500" : undefined
}
/>
</Tooltip>
);
}
if (nft.metadata && nft.metadata.name) {
return (
<Tooltip
key={id}
label={`
Name: ${nft.metadata?.name} |
Contract: ${nft.contractAddress} |
Token ID: ${nft.tokenId} |
Token Type: ${nft.tokenType}
`}
>
<Center
flexDirection="column"
width="140px"
height="140px"
borderRadius="md"
cursor="pointer"
onClick={() =>
isSelected(nft)
? setValue("selected", undefined)
: setValue("selected", nft)
}
border={isSelected(nft) ? "5px solid" : undefined}
borderColor={
isSelected(nft) ? "purple.500" : undefined
}
bg="gray.200"
>
<Text>{nft.metadata?.name}</Text>
</Center>
</Tooltip>
);
}
return (
<Tooltip
key={id}
label={`
Contract: ${nft.contractAddress} |
Token ID: ${nft.tokenId} |
Token Type: ${nft.tokenType}
`}
>
<Center
flexDirection="column"
width="140px"
height="140px"
borderRadius="md"
cursor="pointer"
onClick={() =>
isSelected(nft)
? setValue("selected", undefined)
: setValue("selected", nft)
}
border={isSelected(nft) ? "5px solid" : undefined}
borderColor={isSelected(nft) ? "purple.500" : undefined}
bg="gray.200"
>
<Icon as={FaImage} boxSize={3} />
</Center>
</Tooltip>
);
})}
</Flex>
) : (
<Center height="60px">