add Support button
This commit is contained in:
apoorvlathey
@@ -27,12 +27,14 @@
|
||||
"@walletconnect/utils": "^2.7.3",
|
||||
"@walletconnect/web3wallet": "^1.7.1",
|
||||
"axios": "^0.24.0",
|
||||
"blo": "^1.0.0",
|
||||
"chakra-react-select": "^4.4.3",
|
||||
"ethereum-checksum-address": "^0.0.6",
|
||||
"ethers": "^5.4.5",
|
||||
"evm-rpcs-list": "^2.0.2",
|
||||
"framer-motion": "^4",
|
||||
"react": "^18.2.0",
|
||||
"react-confetti": "^6.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-simple-code-editor": "^0.11.0",
|
||||
|
||||
23
pnpm-lock.yaml
generated
23
pnpm-lock.yaml
generated
@@ -27,12 +27,14 @@ specifiers:
|
||||
'@walletconnect/utils': ^2.7.3
|
||||
'@walletconnect/web3wallet': ^1.7.1
|
||||
axios: ^0.24.0
|
||||
blo: ^1.0.0
|
||||
chakra-react-select: ^4.4.3
|
||||
ethereum-checksum-address: ^0.0.6
|
||||
ethers: ^5.4.5
|
||||
evm-rpcs-list: ^2.0.2
|
||||
framer-motion: ^4
|
||||
react: ^18.2.0
|
||||
react-confetti: ^6.1.0
|
||||
react-dom: ^18.2.0
|
||||
react-error-overlay: 6.0.9
|
||||
react-scripts: 5.0.1
|
||||
@@ -66,12 +68,14 @@ dependencies:
|
||||
'@walletconnect/utils': 2.10.1
|
||||
'@walletconnect/web3wallet': 1.9.1
|
||||
axios: 0.24.0
|
||||
blo: 1.0.0
|
||||
chakra-react-select: 4.7.2_r7eq5u22ldjcfbv3rbc4oq6mzm
|
||||
ethereum-checksum-address: 0.0.6
|
||||
ethers: 5.7.2
|
||||
evm-rpcs-list: 2.0.2
|
||||
framer-motion: 4.1.17_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
react-confetti: 6.1.0_react@18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
react-scripts: 5.0.1_j5ip3o3v6sktjzl5cxtjyfbuo4
|
||||
react-simple-code-editor: 0.11.3_biqbaboplfbrettd7655fr4n2y
|
||||
@@ -6302,6 +6306,11 @@ packages:
|
||||
file-uri-to-path: 1.0.0
|
||||
dev: false
|
||||
|
||||
/blo/1.0.0:
|
||||
resolution: {integrity: sha512-P838VyvMQb+Z9nccKUQhj5mxdV0U7RP/aeEpsX6rNzgn18F9KnOfvN4BKdSUcefe+vE6G7WgT0En4ubhqkEgWA==}
|
||||
engines: {node: '>=16'}
|
||||
dev: false
|
||||
|
||||
/bluebird/3.7.2:
|
||||
resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
|
||||
dev: false
|
||||
@@ -12130,6 +12139,16 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-confetti/6.1.0_react@18.2.0:
|
||||
resolution: {integrity: sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==}
|
||||
engines: {node: '>=10.18'}
|
||||
peerDependencies:
|
||||
react: ^16.3.0 || ^17.0.1 || ^18.0.0
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
tween-functions: 1.2.0
|
||||
dev: false
|
||||
|
||||
/react-dev-utils/12.0.1_gvqij7ajt65rpz4aw7xnkhglzu:
|
||||
resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
|
||||
engines: {node: '>=14'}
|
||||
@@ -13729,6 +13748,10 @@ packages:
|
||||
typescript: 4.9.5
|
||||
dev: false
|
||||
|
||||
/tween-functions/1.2.0:
|
||||
resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
|
||||
dev: false
|
||||
|
||||
/type-check/0.3.2:
|
||||
resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
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>
|
||||
|
||||
@@ -1,14 +1,62 @@
|
||||
import "@rainbow-me/rainbowkit/styles.css";
|
||||
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import {
|
||||
connectorsForWallets,
|
||||
RainbowKitProvider,
|
||||
darkTheme,
|
||||
} from "@rainbow-me/rainbowkit";
|
||||
import {
|
||||
metaMaskWallet,
|
||||
walletConnectWallet,
|
||||
rainbowWallet,
|
||||
} from "@rainbow-me/rainbowkit/wallets";
|
||||
import { configureChains, createConfig, WagmiConfig } from "wagmi";
|
||||
import { mainnet, optimism, base, arbitrum } from "wagmi/chains";
|
||||
import { publicProvider } from "wagmi/providers/public";
|
||||
|
||||
import theme from "./theme";
|
||||
import { SafeInjectProvider } from "./contexts/SafeInjectContext";
|
||||
|
||||
const { chains, publicClient } = configureChains(
|
||||
// the first chain is used by rainbowWallet to determine which chain to use
|
||||
[mainnet, optimism, base, arbitrum],
|
||||
[publicProvider()]
|
||||
);
|
||||
|
||||
const projectId = process.env.REACT_APP_WC_PROJECT_ID!;
|
||||
const connectors = connectorsForWallets([
|
||||
{
|
||||
groupName: "Recommended",
|
||||
wallets: [
|
||||
metaMaskWallet({ projectId, chains }),
|
||||
walletConnectWallet({ projectId, chains }),
|
||||
rainbowWallet({ projectId, chains }),
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
export const wagmiConfig = createConfig({
|
||||
autoConnect: false,
|
||||
connectors,
|
||||
publicClient,
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<ChakraProvider theme={theme}>
|
||||
<SafeInjectProvider>
|
||||
<App />
|
||||
</SafeInjectProvider>
|
||||
<WagmiConfig config={wagmiConfig}>
|
||||
<RainbowKitProvider
|
||||
chains={chains}
|
||||
theme={darkTheme()}
|
||||
modalSize={"compact"}
|
||||
>
|
||||
<SafeInjectProvider>
|
||||
<App />
|
||||
</SafeInjectProvider>
|
||||
</RainbowKitProvider>
|
||||
</WagmiConfig>
|
||||
</ChakraProvider>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user