Skip to content

Commit 8a509da

Browse files
apoorvlatheyapoorvlathey
committed
add gg22 notif bar
1 parent dd471cf commit 8a509da

File tree

3 files changed

+143
-112
lines changed

3 files changed

+143
-112
lines changed

‎components/Body/NotificationBar.tsx‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ const CLOSED_KEY = "new-ui-notif-closed";
1818
function NotificationBar() {
1919
const isClosed = localStorage.getItem(CLOSED_KEY);
2020

21-
const [isVisible, setIsVisible] = useState(
22-
isClosed === "true" ? false : true
23-
);
21+
// const [isVisible, setIsVisible] = useState(
22+
// isClosed === "true" ? false : true
23+
// );
2424

25-
useEffect(() => {
26-
if (!isVisible) {
27-
localStorage.setItem(CLOSED_KEY, "true");
28-
}
29-
}, [isVisible]);
25+
// useEffect(() => {
26+
// if (!isVisible) {
27+
// localStorage.setItem(CLOSED_KEY, "true");
28+
// }
29+
// }, [isVisible]);
3030

3131
// const [donor, setDonor] = useState<string>();
3232

@@ -41,21 +41,52 @@ function NotificationBar() {
4141
// });
4242
// }, []);
4343

44-
return isVisible ? (
44+
return process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
4545
<Alert status="info" bg={"#151515"}>
4646
<Center w="100%">
47-
<Text>
48-
<span style={{ fontSize: "1.2rem" }}>✨</span>{" "}
49-
<span style={{ fontWeight: "bold" }}>New UI is here</span>
50-
</Text>
47+
<Link
48+
href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
49+
isExternal
50+
_hover={{
51+
textDecor: "none",
52+
}}
53+
>
54+
<HStack
55+
position="relative"
56+
sx={{
57+
"&::after": {
58+
content: '""',
59+
position: "absolute",
60+
bottom: 0,
61+
left: 0,
62+
right: 0,
63+
height: "2px",
64+
background: "linear-gradient(90deg, #FF0080, #7928CA, #FF0080)",
65+
backgroundSize: "200% 100%",
66+
animation: "gradient 3s linear infinite",
67+
"@keyframes gradient": {
68+
"0%": { backgroundPosition: "0% 0%" },
69+
"100%": { backgroundPosition: "200% 0%" },
70+
},
71+
},
72+
}}
73+
>
74+
<Text>Support on</Text>
75+
76+
<HStack ml={-0.5} fontWeight="bold">
77+
<Text>Gitcoin Grants</Text>
78+
<ExternalLinkIcon />
79+
</HStack>
80+
</HStack>
81+
</Link>
5182
</Center>
52-
<CloseButton
83+
{/* <CloseButton
5384
alignSelf="flex-start"
5485
position="relative"
5586
right={-1}
5687
top={-1}
5788
onClick={() => setIsVisible(false)}
58-
/>
89+
/> */}
5990
</Alert>
6091
) : null;
6192
}

‎components/Body/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,9 @@ function Body() {
640640

641641
return (
642642
<>
643-
{/* <NotificationBar /> */}
643+
{process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" && (
644+
<NotificationBar />
645+
)}
644646
<Container mt="10" mb="16" minW={["0", "0", "2xl", "2xl"]}>
645647
<Flex>
646648
<Spacer flex="1" />

‎components/Footer.tsx‎

Lines changed: 94 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -100,102 +100,100 @@ function Footer() {
100100
<Stack direction={{ base: "column", md: "row" }}>
101101
<Center>Found the project helpful?</Center>
102102
<HStack>
103-
{process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
104-
<>
105-
<Text>Support it on</Text>
106-
<Link
107-
href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
108-
isExternal
109-
>
110-
<HStack fontWeight="bold" textDecor="underline">
111-
<Text>Gitcoin Grants</Text>
112-
<ExternalLinkIcon />
113-
</HStack>
114-
</Link>
115-
</>
116-
) : (
117-
<>
118-
<Button
119-
size={"sm"}
120-
fontWeight={"bold"}
121-
onClick={() => {
122-
openSupportModal();
123-
}}
124-
bg={"blackAlpha.500"}
125-
>
126-
Support!
127-
</Button>
128-
<Modal
129-
isOpen={isSupportModalOpen}
130-
onClose={closeSupportModal}
131-
isCentered
132-
>
133-
<ModalOverlay
134-
bg="none"
135-
backdropFilter="auto"
136-
backdropBlur="3px"
137-
/>
138-
<ModalContent bg={"brand.lightBlack"}>
139-
<ModalHeader>Support</ModalHeader>
140-
<ModalCloseButton />
141-
<ModalBody pb={6}>
142-
<Container>
143-
<Center>
144-
<CustomConnectButton />
145-
</Center>
146-
<Text mt={4} size="md">
147-
Select amount to donate:
148-
</Text>
149-
<SimpleGrid mt={3} columns={3}>
150-
{["0.001", "0.005", "0.01"].map((value, i) => (
151-
<GridItem key={i}>
152-
<Center>
153-
<Button
154-
onClick={() => handleDonate(value)}
155-
isDisabled={
156-
!isConnected || chain?.unsupported
157-
}
158-
>
159-
{value} Ξ
160-
</Button>
161-
</Center>
162-
</GridItem>
163-
))}
164-
</SimpleGrid>
165-
<Center mt={4}>or</Center>
166-
<InputGroup mt={4}>
167-
<Input
168-
type="number"
169-
placeholder="Custom amount"
170-
onChange={(e) => setDonateValue(e.target.value)}
171-
isDisabled={!isConnected || chain?.unsupported}
172-
/>
173-
<InputRightElement
174-
bg="gray.600"
175-
fontWeight={"bold"}
176-
roundedRight={"lg"}
177-
>
178-
Ξ
179-
</InputRightElement>
180-
</InputGroup>
181-
<Center mt={2}>
182-
<Button
183-
onClick={() => {
184-
if (donateValue) {
185-
handleDonate(donateValue);
186-
}
187-
}}
188-
isDisabled={!donateValue || chain?.unsupported}
189-
>
190-
Donate
191-
</Button>
192-
</Center>
193-
</Container>
194-
</ModalBody>
195-
</ModalContent>
196-
</Modal>
197-
</>
198-
)}
103+
<Button
104+
size={"sm"}
105+
fontWeight={"bold"}
106+
onClick={() => {
107+
openSupportModal();
108+
}}
109+
bg={"blackAlpha.500"}
110+
>
111+
Support!
112+
</Button>
113+
<Modal
114+
isOpen={isSupportModalOpen}
115+
onClose={closeSupportModal}
116+
isCentered
117+
>
118+
<ModalOverlay
119+
bg="none"
120+
backdropFilter="auto"
121+
backdropBlur="3px"
122+
/>
123+
<ModalContent bg={"brand.lightBlack"}>
124+
<ModalHeader>Support</ModalHeader>
125+
<ModalCloseButton />
126+
<ModalBody pb={6}>
127+
{process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE ===
128+
"true" && (
129+
<Center mb={6} py={3} bg="whiteAlpha.200" rounded={"lg"}>
130+
<HStack>
131+
<Text>Support on</Text>
132+
<Link
133+
href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
134+
isExternal
135+
>
136+
<HStack fontWeight="bold" textDecor="underline">
137+
<Text>Gitcoin Grants</Text>
138+
<ExternalLinkIcon />
139+
</HStack>
140+
</Link>
141+
</HStack>
142+
</Center>
143+
)}
144+
<Container>
145+
<Center>
146+
<CustomConnectButton />
147+
</Center>
148+
<Text mt={4} size="md">
149+
Select amount to donate:
150+
</Text>
151+
<SimpleGrid mt={3} columns={3}>
152+
{["0.001", "0.005", "0.01"].map((value, i) => (
153+
<GridItem key={i}>
154+
<Center>
155+
<Button
156+
onClick={() => handleDonate(value)}
157+
isDisabled={!isConnected || chain?.unsupported}
158+
>
159+
{value} Ξ
160+
</Button>
161+
</Center>
162+
</GridItem>
163+
))}
164+
</SimpleGrid>
165+
<Center mt={4}>or</Center>
166+
<InputGroup mt={4}>
167+
<Input
168+
type="number"
169+
placeholder="Custom amount"
170+
onChange={(e) => setDonateValue(e.target.value)}
171+
isDisabled={!isConnected || chain?.unsupported}
172+
/>
173+
<InputRightElement
174+
bg="gray.600"
175+
fontWeight={"bold"}
176+
roundedRight={"lg"}
177+
>
178+
Ξ
179+
</InputRightElement>
180+
</InputGroup>
181+
<Center mt={2}>
182+
<Button
183+
onClick={() => {
184+
if (donateValue) {
185+
handleDonate(donateValue);
186+
}
187+
}}
188+
isDisabled={!donateValue || chain?.unsupported}
189+
>
190+
Donate
191+
</Button>
192+
</Center>
193+
</Container>
194+
</ModalBody>
195+
</ModalContent>
196+
</Modal>
199197
</HStack>
200198
</Stack>
201199
</Alert>

0 commit comments

Comments
 (0)