forked from neptune-mutual-blue/nft-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
[tokenId].jsx
113 lines (93 loc) · 3.16 KB
/
[tokenId].jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import {
useCallback,
useEffect,
useRef,
useState
} from 'react'
import { useRouter } from 'next/router'
import Seo from '@/components/Seo/Seo'
import { AppConstants } from '@/constants/AppConstants'
import { BaseLayout } from '@/layouts/BaseLayout'
import { NftApi } from '@/service/nft-api'
import { resourcesVideoData } from '@/service/video-api'
import { weiToToken } from '@/utils/currencyHelpers'
import { MintNft } from '@/views/MintNft'
import { useWeb3React } from '@web3-react/core'
export async function getStaticProps (context) {
try {
const [nftDetailsResponse, premiumNftsResponse, mintingLevelResponse, videoResponse] = await Promise.all([NftApi.getNftDetails(context.params.tokenId), NftApi.premiumNfts(), NftApi.mintingLevels(), resourcesVideoData()])
if (nftDetailsResponse.data.length === 0) {
return {
notFound: true
}
}
return {
props: {
nftDetails: nftDetailsResponse.data[0],
premiumNfts: premiumNftsResponse.data,
mintingLevels: mintingLevelResponse.data,
videos: videoResponse
},
revalidate: 60 * 60 // one hour
}
} catch (error) {
return {
notFound: true
}
}
}
export async function getStaticPaths () {
return { paths: [], fallback: 'blocking' }
}
const MintNftPage = ({ nftDetails, premiumNfts, mintingLevels, videos }) => {
const router = useRouter()
const { account } = useWeb3React()
const logWantToMintExecuted = useRef(false)
const [userProgress, setUserProgress] = useState({
totalLiquidityAdded: 0,
totalPolicyPurchased: 0
})
const logWantToMint = useCallback(async () => {
// This is because react in strict mode, executes useEffect twice.
if (logWantToMintExecuted.current === false) {
logWantToMintExecuted.current = true
try {
const { tokenId } = router.query
await NftApi.logWantToMint(tokenId)
} catch (err) {
console.error(err)
}
}
}, [router.query])
useEffect(() => {
logWantToMint()
}, [logWantToMint])
useEffect(() => {
const fetchMilestones = async () => {
const data = await NftApi.mintingLevelsMilestone(account)
setUserProgress({
totalLiquidityAdded: weiToToken(data.data[0].totalLiquidityAdded, AppConstants.FALLBACK_LIQUIDITY_TOKEN_DECIMALS),
totalPolicyPurchased: weiToToken(data.data[0].totalPolicyPurchased, AppConstants.FALLBACK_LIQUIDITY_TOKEN_DECIMALS)
})
}
fetchMilestones()
}, [account])
if (!nftDetails) {
return <></>
}
return (
<>
<Seo
ogURL={'/marketplace/' + nftDetails.tokenId + '/'}
title='NFT Minting Levels / Neptune Mutual'
ogImage='/assets/images/meta/nft-detail.png'
ogImageAlt={`Neptune Mutual NFT ${nftDetails?.name}`}
description='Dive deeper to get the insights relating to multiple levels with our view-level page. Make informed decisions to maximize the value of your NFT investments.'
/>
<BaseLayout videos={videos}>
<MintNft nftDetails={nftDetails} premiumNfts={premiumNfts} mintingLevels={mintingLevels} currentProgress={userProgress} />
</BaseLayout>
</>
)
}
export default MintNftPage