generated from stacks-network/.github
-
Notifications
You must be signed in to change notification settings - Fork 102
/
Nakamoto.tsx
97 lines (91 loc) · 2.91 KB
/
Nakamoto.tsx
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
import {
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalOverlay,
} from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { Badge } from '../../../ui/Badge';
import { ButtonLink } from '../../../ui/ButtonLink';
import { Flex } from '../../../ui/Flex';
import { Image } from '../../../ui/Image';
import { Modal } from '../../../ui/Modal';
import { Text } from '../../../ui/Text';
import { TextLink } from '../../../ui/TextLink';
export function NakamotoModal() {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
const nakamotoModalShown = localStorage.getItem('nakamoto3ModalShown');
try {
const dismissQueryParam = new URLSearchParams(window.location.search).get('dismiss');
// to run performance testing without the modal
if (dismissQueryParam === 'nakamoto') {
return;
}
} catch (e) {}
if (!nakamotoModalShown || nakamotoModalShown === 'false') {
setIsOpen(true);
}
}, []);
const handleClose = () => {
localStorage.setItem('nakamoto3ModalShown', 'true');
setIsOpen(false);
};
const queryClient = useQueryClient();
return (
<Modal title={'Nakamoto'} isOpen={isOpen} onClose={() => handleClose()}>
<ModalOverlay />
<ModalContent width={'762px'} maxWidth={'full'}>
<ModalCloseButton
_focus={{
boxShadow: 'none',
}}
/>
<ModalBody pt={'12'}>
<Flex direction={'column'} alignItems={'center'} gap={'6'}>
<Badge
color={'purple.600'}
bg={'purple.100'}
px={'2'}
py={'1'}
fontSize={'xs'}
rounded={'full'}
border={'1px'}
borderColor={'purple.300'}
fontWeight={'medium'}
>
NAKAMOTO UPGRADE
</Badge>
<Text fontSize={'4xl'} textAlign={'center'}>
Nakamoto 3.0 is live on Primary Testnet
</Text>
<Image src={'/nakamoto.png'} alt={'Nakamoto'} />
<ButtonLink
variant={'primary'}
href={'/?chain=testnet'}
onClick={() => {
handleClose();
void queryClient.clear();
}}
_hover={{ textDecoration: 'none' }}
>
Explore Nakamoto 3.0
</ButtonLink>
<ModalFooter borderTop={'1px'} width={'full'} justifyContent={'center'}>
<TextLink
color={'purple.600'}
href={'https://stacks.org/core-developers-ship-release-candidate-2'}
fontSize={'sm'}
target={'_blank'}
>
Learn more about Nakamoto 3.0 ↗
</TextLink>
</ModalFooter>
</Flex>
</ModalBody>
</ModalContent>
</Modal>
);
}