add Support button
This commit is contained in:
apoorvlathey
123
src/components/CustomConnectButton.tsx
Normal file
123
src/components/CustomConnectButton.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { Box, Button, Image, Text } from "@chakra-ui/react";
|
||||
import { ChevronDownIcon } from "@chakra-ui/icons";
|
||||
import { ConnectButton } from "@rainbow-me/rainbowkit";
|
||||
import { blo } from "blo";
|
||||
|
||||
export const CustomConnectButton = () => {
|
||||
return (
|
||||
<ConnectButton.Custom>
|
||||
{({
|
||||
account,
|
||||
chain,
|
||||
openAccountModal,
|
||||
openChainModal,
|
||||
openConnectModal,
|
||||
authenticationStatus,
|
||||
mounted,
|
||||
}) => {
|
||||
// Note: If your app doesn't use authentication, you
|
||||
// can remove all 'authenticationStatus' checks
|
||||
const ready: boolean = mounted && authenticationStatus !== "loading";
|
||||
const connected =
|
||||
ready &&
|
||||
account &&
|
||||
chain &&
|
||||
(!authenticationStatus || authenticationStatus === "authenticated");
|
||||
return ready ? (
|
||||
<Box hidden={!ready}>
|
||||
{(() => {
|
||||
if (!connected) {
|
||||
return (
|
||||
<Button colorScheme={"telegram"} onClick={openConnectModal}>
|
||||
Connect Wallet
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
if (chain.unsupported) {
|
||||
return (
|
||||
<Button colorScheme={"red"} onClick={openChainModal}>
|
||||
Wrong network
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
py="0"
|
||||
alignItems="center"
|
||||
borderRadius="xl"
|
||||
>
|
||||
<Button
|
||||
mr={2}
|
||||
pr={2}
|
||||
bg={"gray.800"}
|
||||
_hover={{
|
||||
bg: "whiteAlpha.200",
|
||||
}}
|
||||
onClick={openChainModal}
|
||||
borderRadius="xl"
|
||||
>
|
||||
{chain.hasIcon && (
|
||||
<Box
|
||||
mr={4}
|
||||
w={6}
|
||||
bgImg={chain.iconBackground}
|
||||
overflow={"hidden"}
|
||||
rounded={"full"}
|
||||
>
|
||||
{chain.iconUrl && (
|
||||
<Image
|
||||
w={6}
|
||||
alt={chain.name ?? "Chain icon"}
|
||||
src={chain.iconUrl}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
{chain.name}
|
||||
<ChevronDownIcon ml={1} pt={1} fontSize="2xl" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={openAccountModal}
|
||||
bg="blackAlpha.500"
|
||||
border="1px solid transparent"
|
||||
_hover={{
|
||||
border: "1px",
|
||||
borderStyle: "solid",
|
||||
borderColor: "blue.400",
|
||||
backgroundColor: "gray.700",
|
||||
}}
|
||||
borderRadius="xl"
|
||||
m="1px"
|
||||
px={3}
|
||||
h="38px"
|
||||
>
|
||||
<Text
|
||||
color="white"
|
||||
fontSize="md"
|
||||
fontWeight="medium"
|
||||
mr="2"
|
||||
>
|
||||
{account.displayName}
|
||||
</Text>
|
||||
<Image
|
||||
src={
|
||||
account.ensAvatar ??
|
||||
blo(account.address as `0x${string}`)
|
||||
}
|
||||
w="24px"
|
||||
h="24px"
|
||||
rounded={"full"}
|
||||
alt={account.displayName}
|
||||
/>
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
})()}
|
||||
</Box>
|
||||
) : null;
|
||||
}}
|
||||
</ConnectButton.Custom>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
useColorMode,
|
||||
Flex,
|
||||
@@ -8,14 +9,33 @@ import {
|
||||
Text,
|
||||
Alert,
|
||||
HStack,
|
||||
Box,
|
||||
Stack,
|
||||
Center,
|
||||
Button,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
SimpleGrid,
|
||||
GridItem,
|
||||
Input,
|
||||
InputGroup,
|
||||
Container,
|
||||
InputRightElement,
|
||||
Box,
|
||||
} from "@chakra-ui/react";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faTwitter, faDiscord } from "@fortawesome/free-brands-svg-icons";
|
||||
import { useAccount, useNetwork } from "wagmi";
|
||||
import { sendTransaction } from "wagmi/actions";
|
||||
import { parseEther } from "viem";
|
||||
import Confetti from "react-confetti";
|
||||
import { CustomConnectButton } from "./CustomConnectButton";
|
||||
|
||||
const Social = ({ icon, link }: { icon: IconProp; link: string }) => {
|
||||
return (
|
||||
@@ -29,13 +49,52 @@ function Footer() {
|
||||
const { colorMode } = useColorMode();
|
||||
const underlineColor = { light: "gray.500", dark: "gray.400" };
|
||||
|
||||
const { isConnected } = useAccount();
|
||||
const { chain } = useNetwork();
|
||||
|
||||
const {
|
||||
isOpen: isSupportModalOpen,
|
||||
onOpen: openSupportModal,
|
||||
onClose: closeSupportModal,
|
||||
} = useDisclosure();
|
||||
|
||||
const [donateValue, setDonateValue] = useState<string>();
|
||||
const [showConfetti, setShowConfetti] = useState(false);
|
||||
|
||||
const handleDonate = async (value: string) => {
|
||||
try {
|
||||
await sendTransaction({
|
||||
to: "0x63A556c75443b176b5A4078e929e38bEb37a1ff2",
|
||||
value: parseEther(value),
|
||||
});
|
||||
launchConfetti();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const launchConfetti = () => {
|
||||
setShowConfetti(true);
|
||||
setTimeout(() => {
|
||||
setShowConfetti(false);
|
||||
}, 5_000);
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex py="4" borderTop="2px" borderTopColor={underlineColor[colorMode]}>
|
||||
<Spacer flex="1" />
|
||||
{showConfetti && (
|
||||
<Box zIndex={9999} position={"fixed"} top={0} left={0}>
|
||||
<Confetti
|
||||
recycle={false}
|
||||
gravity={0.15}
|
||||
numberOfPieces={2_000}
|
||||
wind={0.005}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<VStack>
|
||||
<Alert status="info" variant="solid" rounded="lg">
|
||||
<Stack direction={{ base: "column", md: "row" }}>
|
||||
<Box>Found the project helpful?</Box>
|
||||
<Center>Found the project helpful?</Center>
|
||||
<HStack>
|
||||
{process.env.REACT_APP_GITCOIN_GRANTS_ACTIVE === "true" ? (
|
||||
<>
|
||||
@@ -52,16 +111,87 @@ function Footer() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text>Support at</Text>
|
||||
<Link
|
||||
href="https://etherscan.io/address/apoorv.eth"
|
||||
isExternal
|
||||
<Button
|
||||
size={"sm"}
|
||||
colorScheme={"linkedin"}
|
||||
fontWeight={"bold"}
|
||||
onClick={() => {
|
||||
openSupportModal();
|
||||
}}
|
||||
border="1px"
|
||||
borderColor={"cyan.500"}
|
||||
>
|
||||
<HStack fontWeight="bold" textDecor="underline">
|
||||
<Text>apoorv.eth</Text>
|
||||
<ExternalLinkIcon />
|
||||
</HStack>
|
||||
</Link>
|
||||
Support!
|
||||
</Button>
|
||||
<Modal
|
||||
isOpen={isSupportModalOpen}
|
||||
onClose={closeSupportModal}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay
|
||||
bg="none"
|
||||
backdropFilter="auto"
|
||||
backdropBlur="3px"
|
||||
/>
|
||||
<ModalContent>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
Reference in New Issue
Block a user