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

Feat: Add mint button #143

Merged
merged 5 commits into from
Jul 20, 2022
Merged

Feat: Add mint button #143

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
17ad36a
Add mint button
cpl121 Jul 19, 2022
c285553
some buttons in nft card
cpl121 Jul 20, 2022
5c9e949
add another condition in nft card
cpl121 Jul 20, 2022
5d86e55
Merge branches 'feat/add-mint-1-nft-card' and 'dev' of github.com:box…
cpl121 Jul 20, 2022
cc52533
Merge branches 'feat/add-mint-1-nft-card' and 'dev' of github.com:box…
cpl121 Jul 20, 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
61 changes: 44 additions & 17 deletions components/NftCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,64 @@
import { useConnection } from '@solana/wallet-adapter-react'
import { Link, Button, Text, IconButton } from '@primer/react'
import { Link, Text, Button, Spinner } from '@primer/react'
import { FC } from 'react'
import { LinkExternalIcon } from '@primer/octicons-react'
import { VariantType } from '@primer/react/lib/Button/types'

const NftCard: FC<{ title: string; imageLink: string; hash?: string }> = ({ title, imageLink, hash }) => {
const NftCard: FC<{
title: string
imageLink?: string
buttons?: {
text: string
as: 'link' | 'button'
hash?: string
isLoading?: boolean
variant: VariantType
onClick?: () => void
}[]
}> = ({ title, imageLink, buttons }) => {
const { connection } = useConnection()
return (
<div
className='d-flex flex-column flex-justify-center flex-items-center border rounded-3 gap-2 py-2'
className='d-flex flex-column flex-justify-center flex-items-center border rounded-3 py-2'
style={{ width: '185px' }}
>
<Text as='p' fontWeight='bold'>
{title}
</Text>
<div
className='border rounded-3 mb-2 overflow-hidden d-flex flex-items-center flex-justify-center'
className='border color-bg-inset rounded-3 mb-2 overflow-hidden d-flex flex-items-center flex-justify-center'
style={{ height: '168px', width: '168px' }}
>
<img alt={title} src={imageLink} />
{imageLink && <img alt={title} src={imageLink} />}
</div>
{hash && (
<Link
target='_blank'
rel='noopener noreferrer'
href={`https://solscan.io/account/${hash}?${
connection.rpcEndpoint.includes('devnet') ? '?cluster=devnet' : ''
}`}
>
<Button leadingIcon={LinkExternalIcon} variant='invisible'>
View in solscan

{buttons
?.filter((btn) => btn.as === 'button')
.map((btn, i) => (
<Button variant={btn.variant} onClick={() => btn.onClick && btn.onClick()} 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>
)}
))}

{buttons
?.filter((btn) => btn.as === 'link')
.map((btn, i) => (
<Link
key={i}
target='_blank'
rel='noopener noreferrer'
href={`https://solscan.io/account/${btn.hash}?${
connection.rpcEndpoint.includes('devnet') ? '?cluster=devnet' : ''
}`}
>
<Button leadingIcon={LinkExternalIcon} variant={btn.variant}>
{btn.text}
</Button>
</Link>
))}
</div>
)
}
Expand Down
120 changes: 107 additions & 13 deletions pages/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,10 @@ import type { NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { Button } from '@primer/react'
import { SyncIcon } from '@primer/octicons-react'
import { useSetRecoilState } from 'recoil'
import { nftsState } from 'lib/recoil-store/atoms'
import { getAllNftsByCM } from 'lib/nft/actions'
import { useMintCandyMachine } from 'hooks'

const CandyMachine: NextPage = () => {
const router = useRouter()
Expand All @@ -36,6 +35,9 @@ const CandyMachine: NextPage = () => {
const [isLoading, setIsLoading] = useState(false)
const [isReloading, setIsReloading] = useState(false)
const setNftsState = useSetRecoilState(nftsState)
const { isUserMinting, itemsRemaining, mintAccount, refreshCandyMachineState } = useMintCandyMachine(
candyMachineAccount as string
)

async function viewNfts(e: React.ChangeEvent<HTMLInputElement>) {
if (!e.target.files || e.target.files.length == 0) {
Expand Down Expand Up @@ -107,6 +109,7 @@ const CandyMachine: NextPage = () => {
}

useEffect(() => {
refreshCandyMachineState()
fetchCandyMachine({ candyMachineAccount, connection }).then(setCandyMachineConfig)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [candyMachineAccount, connection, anchorWallet])
Expand Down Expand Up @@ -204,37 +207,93 @@ const CandyMachine: NextPage = () => {
<NftCard
title={'Collection Name'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
</div>
</div>
<div className='mt-5'>
<h4>Minted NFTs - 5</h4>
<div className='d-flex flex-justify-start flex-items-center gap-5 mt-3'>
{itemsRemaining > 0 && (
<NftCard
title={'New NFT'}
buttons={[
{
text: 'Mint 1 NFT',
isLoading: isUserMinting,
as: 'button',
variant: 'primary',
onClick: () => mintAccount(),
VmMad marked this conversation as resolved.
Show resolved Hide resolved
},
]}
/>
)}
<NftCard
title={'CryptoDude #1'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #2'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #3'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #4'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #5'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
</div>
</div>
Expand All @@ -244,27 +303,62 @@ const CandyMachine: NextPage = () => {
<NftCard
title={'CryptoDude #1'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #2'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #3'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #4'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
<NftCard
title={'CryptoDude #5'}
imageLink={'/favicon.ico'}
hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
buttons={[
{
text: 'View in Solscan',
as: 'link',
variant: 'invisible',
hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
},
]}
/>
</div>
</div>
Expand Down