Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: collection nft error #220

Merged
merged 6 commits into from
Aug 9, 2022
Merged

fix: collection nft error #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dbd8af2
fix: collection nft err
aspnxdd Aug 9, 2022
58af0dd
feat: hide solscan link if no hash provided
aspnxdd Aug 9, 2022
f330892
fix: fix solscan devnet url
aspnxdd Aug 9, 2022
8661056
fix: solscan link
aspnxdd Aug 9, 2022
7755425
fix: remove setError empty and print err
aspnxdd Aug 9, 2022
9c60235
fix: stop infinite loading if no nfts are found
aspnxdd Aug 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 50 additions & 45 deletions components/nft/NftCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,56 +21,61 @@ const NftCard: FC<{
}> = ({ title, imageLink, buttons }) => {
const { isDevnet } = useRPC()
return (
<div
className='d-flex flex-column flex-justify-center flex-items-center border rounded-3 p-2'
style={{ width: '185px' }}
>
<Text as='p' fontWeight='bold' className='width-full text-center mb-0'>
{title}
</Text>
<>
<div
className='border color-bg-inset rounded-3 mb-2 overflow-hidden d-flex flex-items-center flex-justify-center'
style={{ height: '168px', width: '168px', margin: '12px 0' }}
className='d-flex flex-column flex-justify-center flex-items-center border rounded-3 p-2'
style={{ width: '185px' }}
>
<div className='width-full height-full position-relative'>
{imageLink?.length ? (
<img alt={title} src={imageLink} className='object-fit-cover height-full width-full' />
) : (
''
)}
<Text as='p' fontWeight='bold' className='width-full text-center mb-0'>
{title}
</Text>
<div
className='border color-bg-inset rounded-3 mb-2 overflow-hidden d-flex flex-items-center flex-justify-center'
style={{ height: '168px', width: '168px', margin: '12px 0' }}
>
<div className='width-full height-full position-relative'>
{imageLink?.length ? (
<img alt={title} src={imageLink} className='object-fit-cover height-full width-full' />
) : (
''
)}
</div>
</div>
</div>

{buttons
?.filter((btn) => btn.as === 'button')
.map((btn, i) => (
<Button
variant={btn.variant}
onClick={() => btn.onClick && btn.onClick()}
disabled={btn.disabled}
key={i}
>
<div className={'d-flex flex-row flex-justify-center flex-items-center'}>
{btn.isLoading && <Spinner sx={{ mr: 2 }} size='small' />}
{btn.text}
</div>
</Button>
))}
{buttons
?.filter((btn) => btn.as === 'link')
.map((btn, i) => (
<Link
key={i}
target='_blank'
rel='noopener noreferrer'
href={`https://solscan.io/account/${btn.hash}?${isDevnet}`}
>
<Button leadingIcon={LinkExternalIcon} variant={btn.variant}>
{btn.text}
{buttons
?.filter((btn) => btn.as === 'button')
.map((btn, i) => (
<Button
variant={btn.variant}
onClick={() => btn.onClick && btn.onClick()}
disabled={btn.disabled}
key={i}
>
<div className={'d-flex flex-row flex-justify-center flex-items-center'}>
{btn.isLoading && <Spinner sx={{ mr: 2 }} size='small' />}
{btn.text}
</div>
</Button>
</Link>
))}
</div>
))}
{buttons
?.filter((btn) => btn.as === 'link')
.map((btn, i) => {
if (btn.hash)
return (
<Link
key={i}
target='_blank'
rel='noopener noreferrer'
href={`https://solscan.io/account/${btn.hash}${isDevnet}`}
>
<Button leadingIcon={LinkExternalIcon} variant={btn.variant}>
{btn.text}
</Button>
</Link>
)
})}
</div>
</>
)
}

Expand Down
2 changes: 1 addition & 1 deletion lib/nft/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ interface IPropertiesNft {
creators?: ICreatorsNft[]
}

interface ICollectionNft {
export interface ICollectionNft {
name: string
family: string
verified?: number
Expand Down
56 changes: 26 additions & 30 deletions pages/candy-machines/[candy_machine_ID].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Connection, PublicKey } from '@solana/web3.js'
import Head from 'next/head'
import type { NextPage } from 'next'
import { LinkExternalIcon } from '@primer/octicons-react'
import { ICollectionNft } from 'lib/nft/interfaces'

const CandyMachine: NextPage = () => {
const router = useRouter()
Expand All @@ -28,7 +29,7 @@ const CandyMachine: NextPage = () => {
const [isLoadingNfts, setIsLoadingNfts] = useState(false)
const [nfts, setNfts] = useState<Nft[]>([])
const [mintedNfts, setMintedNfts] = useState<Nft[]>([])
const [collectionNft, setCollectionNft] = useState<Nft>()
const [collectionNft, setCollectionNft] = useState<Nft | null>(null)
const [isLoading, setIsLoading] = useState<boolean>(false)
const {
isUserMinting,
Expand Down Expand Up @@ -99,25 +100,22 @@ const CandyMachine: NextPage = () => {

const fetchNfts = async () => {
setIsLoadingNfts(true)
setError('')
try {
if (!connection) return
const nfts = await getAllNftsByCM(candyMachineAccount, connection)
if (nfts.length === 0) return setIsLoadingNfts(false)
setMintedNfts(nfts)
setNftsRecoilState(nfts)
// @ts-ignore
if (nfts[0]?.collection?.key) {
setHasCollection(true)
// @ts-ignore
let nftCollectionData = await getNftByMint(nfts[0].collection.key, connection)
if (nftCollectionData.name !== '') {
setCollectionNft(nftCollectionData)
}
const collectionNftPubkey = (nfts[0]?.collection as ICollectionNft)?.key
if (!collectionNftPubkey) return
setHasCollection(true)
let nftCollectionData = await getNftByMint(collectionNftPubkey, connection)
if (nftCollectionData?.name !== '') {
setCollectionNft(nftCollectionData)
}
} catch (err) {
setNftsRecoilState([])
setError((err as Error).message)
console.error(err)
setNftsRecoilState([])
}
setIsLoadingNfts(false)
}
Expand All @@ -131,6 +129,7 @@ const CandyMachine: NextPage = () => {
fetchCandyMachine().then(setCandyMachineConfig)
fetchNfts()
setIsLoading(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [connection])

const loadingText = (
Expand Down Expand Up @@ -170,7 +169,7 @@ const CandyMachine: NextPage = () => {
<Button leadingIcon={LinkExternalIcon}>
<Link
target='_blank'
href={`https://solscan.io/account/${candyMachineAccount}?${isDevnet}`}
href={`https://solscan.io/account/${candyMachineAccount}${isDevnet}`}
sx={{ textDecoration: 'none', color: '#24292F' }}
>
View in Solscan
Expand Down Expand Up @@ -268,23 +267,20 @@ const CandyMachine: NextPage = () => {
{hasCollection && (
<div className='mb-5'>
<h4>Collection</h4>

{collectionNft && (
<div className='d-flex flex-justify-start flex-items-center gap-5 mt-3'>
<NftCard
title={collectionNft.name}
imageLink={collectionNft.image}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
</div>
)}
<div className='d-flex flex-justify-start flex-items-center gap-5 mt-3'>
<NftCard
title={collectionNft?.name ?? 'Not available'}
imageLink={collectionNft?.image ?? '/logo.png'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: collectionNft?.mint?.toBase58(),
},
]}
/>
</div>
</div>
)}
{error?.includes('Error to fetch data') && (
Expand Down