Skip to content
This repository was archived by the owner on Dec 26, 2023. It is now read-only.

Commit 1b83670

Browse files
with-heartwith-heart
committed
feat: add tokens sold out celebration
1 parent a74be91 commit 1b83670

File tree

6 files changed

+126
-28
lines changed

6 files changed

+126
-28
lines changed

‎frontend/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@ethersproject/abi": "^5.4.1",
1111
"@fontsource/inter": "^4.5.0",
1212
"@fontsource/source-code-pro": "^4.5.0",
13+
"@react-hook/window-size": "^3.0.7",
1314
"@testing-library/jest-dom": "^5.11.4",
1415
"@testing-library/react": "^11.1.0",
1516
"@testing-library/user-event": "^12.1.10",
@@ -20,6 +21,7 @@
2021
"next": "^11.1.2",
2122
"next-i18next": "^8.8.0",
2223
"react": "^17.0.2",
24+
"react-confetti": "^6.0.1",
2325
"react-dom": "^17.0.2",
2426
"use-nft": "^0.10.1",
2527
"web-vitals": "^1.0.1",

‎frontend/public/glitter-confetti.gif

587 KB
Loading

‎frontend/public/locales/en/common.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,7 @@
4646
"errorMinting": "Unable to Mint NFT",
4747
"disconnectWallet": "Disconnect Wallet",
4848
"etherscanMessage": "View your TX on Etherscan",
49-
"testnet": "Testnet"
49+
"testnet": "Testnet",
50+
"glitterConfetti": "A man throwing glitter in a fabulous manner",
51+
"soldOut": "DEV Tokens are now sold out to our {{count}} community members"
5052
}

‎frontend/src/components/DirectMint/DirectMintBox.tsx

Lines changed: 75 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,54 @@
1-
import React from 'react';
2-
import DirectMint from './DirectMint';
3-
import Logo from '../../components/Logo';
41
import {
52
Badge,
63
Box,
74
Container,
8-
Flex,
95
Heading,
6+
Link,
107
Stack,
118
Text,
12-
Link,
139
} from '@chakra-ui/react';
10+
import { useWindowSize } from '@react-hook/window-size';
1411
import { useTranslation } from 'next-i18next';
12+
import Image from 'next/image';
13+
import React, { useEffect, useState } from 'react';
14+
import Confetti from 'react-confetti';
15+
import Logo from '../../components/Logo';
16+
import { useDevNFTSupply } from '../../hooks/useDevNFTSupply';
1517
import {
1618
DEVELOPER_DAO_CONTRACT_NETWORK,
1719
TOKEN_FINDER_URL,
1820
} from '../../utils/DeveloperDaoConstants';
19-
import { useDevNFTSupply } from '../../hooks/useDevNFTSupply';
21+
import DirectMint from './DirectMint';
22+
23+
const Celebration = () => {
24+
const [width, height] = useWindowSize();
25+
const [isRunning, setIsRunning] = useState(true);
26+
const isSSR = typeof window !== 'undefined';
27+
28+
useEffect(() => {
29+
setTimeout(() => {
30+
setIsRunning(false);
31+
}, 3000);
32+
}, []);
33+
34+
return isSSR ? (
35+
<Confetti
36+
numberOfPieces={300}
37+
colors={['gold', 'silver']}
38+
width={width}
39+
height={height}
40+
recycle={isRunning}
41+
/>
42+
) : null;
43+
};
2044

2145
// Layout for the Direct Mint Box
2246
// used on the minting page
2347
const DirectMintBox = () => {
2448
const { t } = useTranslation();
2549
const { isLoading, remainingPublicSupply, uniqueTokenHolders } =
2650
useDevNFTSupply();
51+
const isSoldOut = isLoading ? false : remainingPublicSupply === 0;
2752

2853
return (
2954
<>
@@ -32,7 +57,7 @@ const DirectMintBox = () => {
3257
borderWidth="4px"
3358
borderRadius="lg"
3459
w={{ base: '75%', s: '90%' }}
35-
padding="20"
60+
padding={isSoldOut ? 10 : 20}
3661
>
3762
<Stack spacing={6} align="center">
3863
<Logo w={52} h={52} />
@@ -42,23 +67,49 @@ const DirectMintBox = () => {
4267
<Heading fontSize={{ base: '1.25rem', sm: '2rem' }}>
4368
{t('mintPageHeader')}
4469
</Heading>
45-
<Text fontSize={{ base: 'xs', sm: 'xl' }}>
46-
{t('availableTokensText')}{' '}
47-
<Link color="#3182ce" href={TOKEN_FINDER_URL} isExternal>
48-
{t('here')}
49-
</Link>
50-
</Text>
51-
<Text fontSize={{ base: 'xs', sm: 'xl' }}>
52-
{t('remainingTokensText', {
53-
remainingTokens: isLoading
54-
? '...'
55-
: remainingPublicSupply.toLocaleString(),
56-
uniqueAddressCount: isLoading
57-
? '...'
58-
: uniqueTokenHolders?.toLocaleString(),
59-
})}
60-
</Text>
61-
<DirectMint />
70+
{isSoldOut ? (
71+
<>
72+
<Box maxW="350px">
73+
<Image
74+
src="/glitter-confetti.gif"
75+
alt={t('glitterConfetti')}
76+
width={429}
77+
height={350}
78+
/>
79+
</Box>
80+
<Container>
81+
<Text fontSize="2xl" align="center">
82+
🎉{' '}
83+
{/* @ts-expect-error unsure how to type the options argument */}
84+
{t('soldOut', {
85+
count: uniqueTokenHolders?.toLocaleString() ?? '...',
86+
})}
87+
! 🎉
88+
</Text>
89+
</Container>
90+
<Celebration />
91+
</>
92+
) : (
93+
<>
94+
<Text fontSize={{ base: 'xs', sm: 'xl' }}>
95+
{t('availableTokensText')}{' '}
96+
<Link color="#3182ce" href={TOKEN_FINDER_URL} isExternal>
97+
{t('here')}
98+
</Link>
99+
</Text>
100+
<Text fontSize={{ base: 'xs', sm: 'xl' }}>
101+
{t('remainingTokensText', {
102+
remainingTokens: isLoading
103+
? '...'
104+
: remainingPublicSupply.toLocaleString(),
105+
uniqueAddressCount: isLoading
106+
? '...'
107+
: uniqueTokenHolders?.toLocaleString(),
108+
})}
109+
</Text>
110+
<DirectMint />
111+
</>
112+
)}
62113
</Stack>
63114
</Box>
64115
</Container>

‎frontend/src/pages/mint.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import DirectMintBox from '../components/DirectMint/DirectMintBox';
33
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
4-
import { useTranslation } from 'next-i18next';
54
import PageLayout from '../layout/Page';
65
import { chakra } from '@chakra-ui/react';
76

87
const Mint = () => {
9-
const { t } = useTranslation();
108
return (
119
<>
1210
<PageLayout>

‎frontend/yarn.lock

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1843,6 +1843,39 @@
18431843
prop-types "^15.7.2"
18441844
tslib "^2.1.0"
18451845

1846+
"@react-hook/debounce@^3.0.0":
1847+
version "3.0.0"
1848+
resolved "https://registry.yarnpkg.com/@react-hook/debounce/-/debounce-3.0.0.tgz#9eea8b5d81d4cb67cd72dd8657b3ff724afc7cad"
1849+
integrity sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==
1850+
dependencies:
1851+
"@react-hook/latest" "^1.0.2"
1852+
1853+
"@react-hook/event@^1.2.1":
1854+
version "1.2.6"
1855+
resolved "https://registry.yarnpkg.com/@react-hook/event/-/event-1.2.6.tgz#52f91578add934acc1203328ca09ab14fc7ee58e"
1856+
integrity sha512-JUL5IluaOdn5w5Afpe/puPa1rj8X6udMlQ9dt4hvMuKmTrBS1Ya6sb4sVgvfe2eU4yDuOfAhik8xhbcCekbg9Q==
1857+
1858+
"@react-hook/latest@^1.0.2":
1859+
version "1.0.3"
1860+
resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
1861+
integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
1862+
1863+
"@react-hook/throttle@^2.2.0":
1864+
version "2.2.0"
1865+
resolved "https://registry.yarnpkg.com/@react-hook/throttle/-/throttle-2.2.0.tgz#d0402714a06e1ba0bc1da1fdf5c3c5cd0e08d45a"
1866+
integrity sha512-LJ5eg+yMV8lXtqK3lR+OtOZ2WH/EfWvuiEEu0M3bhR7dZRfTyEJKxH1oK9uyBxiXPtWXiQggWbZirMCXam51tg==
1867+
dependencies:
1868+
"@react-hook/latest" "^1.0.2"
1869+
1870+
"@react-hook/window-size@^3.0.7":
1871+
version "3.0.7"
1872+
resolved "https://registry.yarnpkg.com/@react-hook/window-size/-/window-size-3.0.7.tgz#00d176e7a8eb55814e161eae34aae20afbcbe35d"
1873+
integrity sha512-bK5ed/jN+cxy0s1jt2CelCnUt7jZRseUvPQ22ZJkUl/QDOsD+7CA/6wcqC3c0QweM/fPBRP6uI56TJ48SnlVww==
1874+
dependencies:
1875+
"@react-hook/debounce" "^3.0.0"
1876+
"@react-hook/event" "^1.2.1"
1877+
"@react-hook/throttle" "^2.2.0"
1878+
18461879
"@rushstack/eslint-patch@^1.0.6":
18471880
version "1.0.6"
18481881
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz"
@@ -8399,6 +8432,13 @@ react-clientside-effect@^1.2.2:
83998432
dependencies:
84008433
"@babel/runtime" "^7.12.13"
84018434

8435+
react-confetti@^6.0.1:
8436+
version "6.0.1"
8437+
resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.0.1.tgz#d4f57b5a021dd908a6243b8f63b6009b00818d10"
8438+
integrity sha512-ZpOTBrqSNhWE4rRXCZ6E6U+wGd7iYHF5MGrqwikoiBpgBq9Akdu0DcLW+FdFnLjyZYC+VfAiV2KeFgYRMyMrkA==
8439+
dependencies:
8440+
tween-functions "^1.2.0"
8441+
84028442
react-dom@^16.8.6:
84038443
version "16.14.0"
84048444
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
@@ -9639,6 +9679,11 @@ tunnel-agent@^0.6.0:
96399679
dependencies:
96409680
safe-buffer "^5.0.1"
96419681

9682+
tween-functions@^1.2.0:
9683+
version "1.2.0"
9684+
resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
9685+
integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
9686+
96429687
tweetnacl@^0.14.3, tweetnacl@~0.14.0:
96439688
version "0.14.5"
96449689
resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"

0 commit comments

Comments
 (0)