forked from neptune-mutual-blue/nft-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MintNft.jsx
168 lines (150 loc) · 6.09 KB
/
MintNft.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import AlertInfo from '@/components/Alert/AlertInfo'
import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb'
import { ConnectWallet } from '@/components/ConnectWallet/ConnectWallet'
import { LikeAndShare } from '@/components/LikeAndShare'
import NftCardWithBlurEffect
from '@/components/NftCardWithBlurEffect/NftCardWithBlurEffect'
import NftImageWithExpand from '@/components/NftImageWithExpand'
import { NftNickname } from '@/components/NftNickname'
import { NftSiblingsAndStage } from '@/components/NftSiblingsAndStage'
import { Progress } from '@/components/Progress/Progress'
import { Tags } from '@/components/Tags/Tags'
import { CustomTooltip } from '@/components/Tooltip/Tooltip'
import { mintingLevelRequirements } from '@/config/minting-levels'
import { Icon } from '@/elements/Icon'
import { MintingLevels } from '@/views/mint-nft/MintingLevels'
import { Summary } from '@/views/mint-nft/Summary'
import { useWeb3React } from '@web3-react/core'
const MintNft = ({ nftDetails, premiumNfts, mintingLevels, currentProgress }) => {
const crumbs = [
{
link: '/',
name: 'NFT Home'
},
{
link: '/marketplace/',
name: 'NFT Marketplace'
},
{
link: '/marketplace/' + nftDetails.tokenId + '/',
name: nftDetails.name
},
{
link: '#',
name: 'Minting Levels'
}
]
const { account } = useWeb3React()
const requirements = mintingLevelRequirements[nftDetails.level]
const liquidityRemaining = parseFloat(nftDetails.level ? (requirements.liquidity - currentProgress.totalLiquidityAdded).toFixed(2) : 0)
const policyPurchaseRemaining = parseFloat(nftDetails.level ? (requirements.policyPurchase - currentProgress.totalPolicyPurchased).toFixed(2) : 0)
const liquidityPercent = nftDetails.level ? currentProgress.totalLiquidityAdded > requirements.liquidity ? '100' : ((currentProgress.totalLiquidityAdded / requirements.liquidity) * 100).toFixed(2) : 0
const policyPurchasePercent = nftDetails.level ? currentProgress.totalPolicyPurchased > requirements.policyPurchase ? '100' : ((currentProgress.totalPolicyPurchased / requirements.policyPurchase) * 100).toFixed(2) : 0
const buildProgress = ({ title, percent, remaining, required, current }) => (
<div className='progress info'>
<div className='title'>{title}</div>
<Progress percent={percent} />
<div>
<div className='remaining'>
<div className='info'>
<span>${remaining} remaining</span>
<CustomTooltip text={
<div className='progress tooltip'>
<div className='label'>Required:</div>
<div className='value'>${required?.toLocaleString('en-US')}</div>
<br />
<div className='label'>Your Policy Purchase:</div>
<div className='value'>${current.toLocaleString('en-US')}</div>
<br />
<div className='label'>Remaining:</div>
<div className='value'>${remaining.toLocaleString('en-US')}</div>
</div>
}
>
<div role='button' tabIndex={0}>
<Icon variant='help-cirlce' size='sm' />
</div>
</CustomTooltip>
</div>
<div className='percent'>{percent}%</div>
</div>
</div>
</div>
)
return (
<>
<div className='mint nft page'>
<div className='breadcrumb and connect wallet'>
<Breadcrumb items={crumbs} />
<ConnectWallet />
</div>
<div className='content inset' data-connect={account ? 'true' : 'false'}>
<section className='hero'>
{nftDetails.level && (
<Tags
tags={[
{
id: '1',
slug: '1',
text: `Level ${nftDetails.level}`,
color: 'level' + nftDetails.level
}
]}
/>
)}
<NftNickname nft={nftDetails} />
<div className='character name'>Mint {nftDetails.name} for Free</div>
<NftSiblingsAndStage nft={nftDetails} />
<div className='image and milestones'>
<div className='image expand wrapper'>
<NftImageWithExpand nft={nftDetails} />
{/* <MintSuccessModal nft={nftDetails}>
<Button
type='button' size='xl' onClick={() => {
}}
>Mint this NFT
</Button>
</MintSuccessModal> */}
{/* Remove the style below when enabling the above button */}
<div className='supporting text' style={{ marginTop: '16px' }}>
{nftDetails.wantToMint} people want to mint this.
</div>
</div>
<div className='milestones'>
<h3>Your Milestones</h3>
{buildProgress({
title: 'Policy Purchase',
required: requirements?.policyPurchase,
current: currentProgress.totalPolicyPurchased,
percent: policyPurchasePercent,
remaining: policyPurchaseRemaining
})}
{buildProgress({
title: 'Added Liquidity',
required: requirements?.liquidity,
current: currentProgress.totalLiquidityAdded,
percent: liquidityPercent,
remaining: liquidityRemaining
})}
<LikeAndShare nft={nftDetails} />
</div>
</div>
</section>
<MintingLevels mintingLevels={mintingLevels} />
<Summary />
</div>
<div className='explore minting collection'>
<h3>Explore Our Collection</h3>
<div className='nft characters'>
{premiumNfts.slice(0, 6).map(nft => <NftCardWithBlurEffect key={nft.name} nft={nft} />)}
</div>
</div>
</div>
{!account &&
<div className='info box'>
<AlertInfo />
</div>}
</>
)
}
export { MintNft }