d-bis/impersonator
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add gg22 notif bar

Browse Source
This commit is contained in:
apoorvlathey
2024-10-30 16:58:54 +04:00
parent dd471cfd5b
commit 8a509da130
3 changed files with 143 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/Body/NotificationBar.tsx
View File

@@ -18,15 +18,15 @@ const CLOSED_KEY = "new-ui-notif-closed";
function NotificationBar() {
const isClosed = localStorage.getItem(CLOSED_KEY);
const [isVisible, setIsVisible] = useState(
isClosed === "true" ? false : true
);
// const [isVisible, setIsVisible] = useState(
// isClosed === "true" ? false : true
// );
useEffect(() => {
if (!isVisible) {
localStorage.setItem(CLOSED_KEY, "true");
}
}, [isVisible]);
// useEffect(() => {
// if (!isVisible) {
// localStorage.setItem(CLOSED_KEY, "true");
// }
// }, [isVisible]);
// const [donor, setDonor] = useState<string>();
@@ -41,21 +41,52 @@ function NotificationBar() {
// });
// }, []);
return isVisible ? (
return process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
<Alert status="info" bg={"#151515"}>
<Center w="100%">
<Text>
<span style={{ fontSize: "1.2rem" }}>✨</span>{" "}
<span style={{ fontWeight: "bold" }}>New UI is here</span>
</Text>
<Link
href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
isExternal
_hover={{
textDecor: "none",
}}
>
<HStack
position="relative"
sx={{
"&::after": {
content: '""',
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: "2px",
background: "linear-gradient(90deg, #FF0080, #7928CA, #FF0080)",
backgroundSize: "200% 100%",
animation: "gradient 3s linear infinite",
"@keyframes gradient": {
"0%": { backgroundPosition: "0% 0%" },
"100%": { backgroundPosition: "200% 0%" },
},
},
}}
>
<Text>Support on</Text>
<HStack ml={-0.5} fontWeight="bold">
<Text>Gitcoin Grants</Text>
<ExternalLinkIcon />
</HStack>
</HStack>
</Link>
</Center>
<CloseButton
{/* <CloseButton
alignSelf="flex-start"
position="relative"
right={-1}
top={-1}
onClick={() => setIsVisible(false)}
/>
/> */}
</Alert>
) : null;
}

4
components/Body/index.tsx
View File

@@ -640,7 +640,9 @@ function Body() {
return (
<>
{/* <NotificationBar /> */}
{process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" && (
<NotificationBar />
)}
<Container mt="10" mb="16" minW={["0", "0", "2xl", "2xl"]}>
<Flex>
<Spacer flex="1" />

190
components/Footer.tsx
View File

@@ -100,102 +100,100 @@ function Footer() {
<Stack direction={{ base: "column", md: "row" }}>
<Center>Found the project helpful?</Center>
<HStack>
{process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE === "true" ? (
<>
<Text>Support it on</Text>
<Link
href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
isExternal
>
<HStack fontWeight="bold" textDecor="underline">
<Text>Gitcoin Grants</Text>
<ExternalLinkIcon />
</HStack>
</Link>
</>
) : (
<>
<Button
size={"sm"}
fontWeight={"bold"}
onClick={() => {
openSupportModal();
}}
bg={"blackAlpha.500"}
>
Support!
</Button>
<Modal
isOpen={isSupportModalOpen}
onClose={closeSupportModal}
isCentered
>
<ModalOverlay
bg="none"
backdropFilter="auto"
backdropBlur="3px"
/>
<ModalContent bg={"brand.lightBlack"}>
<ModalHeader>Support</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<Container>
<Center>
<CustomConnectButton />
</Center>
<Text mt={4} size="md">
Select amount to donate:
</Text>
<SimpleGrid mt={3} columns={3}>
{["0.001", "0.005", "0.01"].map((value, i) => (
<GridItem key={i}>
<Center>
<Button
onClick={() => handleDonate(value)}
isDisabled={
!isConnected || chain?.unsupported
}
>
{value} Ξ
</Button>
</Center>
</GridItem>
))}
</SimpleGrid>
<Center mt={4}>or</Center>
<InputGroup mt={4}>
<Input
type="number"
placeholder="Custom amount"
onChange={(e) => setDonateValue(e.target.value)}
isDisabled={!isConnected || chain?.unsupported}
/>
<InputRightElement
bg="gray.600"
fontWeight={"bold"}
roundedRight={"lg"}
>
Ξ
</InputRightElement>
</InputGroup>
<Center mt={2}>
<Button
onClick={() => {
if (donateValue) {
handleDonate(donateValue);
}
}}
isDisabled={!donateValue || chain?.unsupported}
>
Donate
</Button>
</Center>
</Container>
</ModalBody>
</ModalContent>
</Modal>
</>
)}
<Button
size={"sm"}
fontWeight={"bold"}
onClick={() => {
openSupportModal();
}}
bg={"blackAlpha.500"}
>
Support!
</Button>
<Modal
isOpen={isSupportModalOpen}
onClose={closeSupportModal}
isCentered
>
<ModalOverlay
bg="none"
backdropFilter="auto"
backdropBlur="3px"
/>
<ModalContent bg={"brand.lightBlack"}>
<ModalHeader>Support</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
{process.env.NEXT_PUBLIC_GITCOIN_GRANTS_ACTIVE ===
"true" && (
<Center mb={6} py={3} bg="whiteAlpha.200" rounded={"lg"}>
<HStack>
<Text>Support on</Text>
<Link
href={process.env.NEXT_PUBLIC_GITCOIN_GRANTS_LINK}
isExternal
>
<HStack fontWeight="bold" textDecor="underline">
<Text>Gitcoin Grants</Text>
<ExternalLinkIcon />
</HStack>
</Link>
</HStack>
</Center>
)}
<Container>
<Center>
<CustomConnectButton />
</Center>
<Text mt={4} size="md">
Select amount to donate:
</Text>
<SimpleGrid mt={3} columns={3}>
{["0.001", "0.005", "0.01"].map((value, i) => (
<GridItem key={i}>
<Center>
<Button
onClick={() => handleDonate(value)}
isDisabled={!isConnected || chain?.unsupported}
>
{value} Ξ
</Button>
</Center>
</GridItem>
))}
</SimpleGrid>
<Center mt={4}>or</Center>
<InputGroup mt={4}>
<Input
type="number"
placeholder="Custom amount"
onChange={(e) => setDonateValue(e.target.value)}
isDisabled={!isConnected || chain?.unsupported}
/>
<InputRightElement
bg="gray.600"
fontWeight={"bold"}
roundedRight={"lg"}
>
Ξ
</InputRightElement>
</InputGroup>
<Center mt={2}>
<Button
onClick={() => {
if (donateValue) {
handleDonate(donateValue);
}
}}
isDisabled={!donateValue || chain?.unsupported}
>
Donate
</Button>
</Center>
</Container>
</ModalBody>
</ModalContent>
</Modal>
</HStack>
</Stack>
</Alert>