diff --git a/package.json b/package.json index 49e18ce..65dfd8b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ff71cf2..a6c127a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'} diff --git a/src/components/CustomConnectButton.tsx b/src/components/CustomConnectButton.tsx new file mode 100644 index 0000000..3c0c877 --- /dev/null +++ b/src/components/CustomConnectButton.tsx @@ -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 ( + + {({ + 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 ? ( + + ) : null; + }} + + ); +}; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 23ecf0d..2e15804 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -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(); + 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 ( + {showConfetti && ( + + + + )} - Found the project helpful? +
Found the project helpful?
{process.env.REACT_APP_GITCOIN_GRANTS_ACTIVE === "true" ? ( <> @@ -52,16 +111,87 @@ function Footer() { ) : ( <> - Support at - { + openSupportModal(); + }} + border="1px" + borderColor={"cyan.500"} > - - apoorv.eth - - - + Support! + + + + + Support + + + +
+ +
+ + Select amount to donate: + + + {["0.001", "0.005", "0.01"].map((value, i) => ( + +
+ +
+ + ))} + +
or
+ + setDonateValue(e.target.value)} + isDisabled={!isConnected || chain?.unsupported} + /> + + Ξ + + +
+ +
+ + + + )} diff --git a/src/index.tsx b/src/index.tsx index 425ec7f..cfb0a38 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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( - - - + + + + + + + , document.getElementById("root") );