diff --git a/src/components/ApproveCampaign.tsx b/src/components/ApproveCampaign.tsx index 0c81303..7ae749f 100644 --- a/src/components/ApproveCampaign.tsx +++ b/src/components/ApproveCampaign.tsx @@ -1,13 +1,23 @@ -import { Box, Button, Heading, useToast, Text } from '@chakra-ui/react' +import { Box, Button, Heading, Text, useToast } from '@chakra-ui/react' import { motion } from 'framer-motion' import React, { useEffect, useState } from 'react' -import { Address } from "viem" +import { Address } from 'viem' import { useContractWrite, useNetwork, usePrepareContractWrite, useWaitForTransaction } from 'wagmi' import ERC20Contract from '../../contracts/out/ERC20.sol/ERC20.json' import SuccessComponent from 'components/layout/SuccessComponent' -const ApproveCampaign = ({ campaignAddress, txnData, rewardTokenAddress }: {campaignAddress: string, txnData: any, rewardTokenAddress: string}) => { +const ApproveCampaign = ({ + campaignAddress, + txnData, + rewardTokenAddress, + actionId, +}: { + campaignAddress: `0x${string}` | undefined + txnData: any + rewardTokenAddress: string + actionId: string +}) => { const toast = useToast() const network = useNetwork() const [isSubmitting, setIsSubmitting] = useState(false) @@ -67,50 +77,52 @@ const ApproveCampaign = ({ campaignAddress, txnData, rewardTokenAddress }: {camp return ( - - Create Campaign - - {!writeSuccess && -<> - - You need to approve the campaign contract -
- to distribute awards on your behalf. -
+ + Create Campaign + + {!writeSuccess && ( + <> + + You need to approve the campaign contract +
+ to distribute awards on your behalf. +
- - - - - - } + + + +
+ + )} - {/* TODO: Add campaign ref to the link */} - {writeSuccess && ( - - - - )} + {/* TODO: Add campaign ref to the link */} + {writeSuccess && ( + + + + )} ) } diff --git a/src/pages/CreateCampaign.tsx b/src/pages/CreateCampaign.tsx index 80fe243..83d485e 100644 --- a/src/pages/CreateCampaign.tsx +++ b/src/pages/CreateCampaign.tsx @@ -1,4 +1,5 @@ import { Box, Button, FormControl, FormHelperText, FormLabel, Heading, Input, useBreakpointValue, useColorMode, useToast } from '@chakra-ui/react' +import ApproveCampaign from 'components/ApproveCampaign' import Background from 'components/Background' import Container from 'components/layout/Container' import { motion } from 'framer-motion' @@ -7,8 +8,6 @@ import { networks } from 'utils/network' import { parseUnits } from 'viem' import { useAccount, useContractWrite, useNetwork, usePrepareContractWrite, useWaitForTransaction } from 'wagmi' import CampaignFactory from '../../contracts/out/CampaignFactory.sol/CampaignFactory.json' -import ApproveCampaign from 'components/ApproveCampaign' - function randomIntFromInterval(min: number, max: number) { // min and max included @@ -47,7 +46,11 @@ const CreateCampaign = () => { const { data, isLoading: writeLoading, isError: writeError, write } = useContractWrite(config) - const { data: txnData, isLoading: isContractLoading, isSuccess: writeSuccess } = useWaitForTransaction({ + const { + data: txnData, + isLoading: isContractLoading, + isSuccess: writeSuccess, + } = useWaitForTransaction({ hash: data?.hash, }) @@ -101,7 +104,7 @@ const CreateCampaign = () => { }) } }, [writeSuccess, data]) - + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { @@ -147,8 +150,13 @@ const CreateCampaign = () => { borderRadius: '40px', border: '1px solid rgba(179, 186, 209, 0.5)', }}> - {(writeSuccess && txnData?.logs) ? ( - + {writeSuccess && txnData?.logs ? ( + ) : (
diff --git a/src/pages/createlink.tsx b/src/pages/createlink.tsx index cc982f8..958f2b9 100644 --- a/src/pages/createlink.tsx +++ b/src/pages/createlink.tsx @@ -12,23 +12,38 @@ import CampaignsMenu from 'components/layout/CampaignsMenu' import Container from 'components/layout/Container' import History from 'components/layout/History' import SuccessComponent from 'components/layout/SuccessComponent' +import { useRouter } from 'next/router' import { CampaignType } from 'types/index' +import { Address } from 'viem' import referralCampaignContract from '../../contracts/out/ReferralCampaign.sol/ReferralCampaign.json' const CreateLink: NextPage = () => { // TODO: Fetch proof from shared state + const router = useRouter() + + const { campaignAddress, actionId } = router.query + const account = useAccount() const theme = useTheme() const { colorMode } = useColorMode() const formWidth = useBreakpointValue({ base: '90%', md: '600px' }) const toast = useToast() const publicClient = usePublicClient() - const [selectedCampaign, setSelectedCampaign] = useState({ - id: '', - owner: '0x', - campaign: '0x', - actionId: '', - }) + const [selectedCampaign, setSelectedCampaign] = useState( + !!campaignAddress + ? { + id: '', + owner: '0x', + campaign: campaignAddress as Address, + actionId: actionId as string, + } + : { + id: '', + owner: '0x', + campaign: '0x', + actionId: '', + } + ) const [link, setLink] = useState('') const [args, setArgs] = useState([]) const [isTxSubmitted, setIsTxSubmitted] = useState(false) @@ -59,7 +74,7 @@ const CreateLink: NextPage = () => { // address: "0x8fa7b813f246e0dd7cbb04437487fb113912224a", // 1112 // address: "0xa364f00198854cd1c0a24e2c502bc39d8aa29a22", // 1113 // address: "0xd6917c944be9f91fc4c90521c789f7028cbe66ba", // 1332721324098588 - address: selectedCampaign.campaign, + address: !!campaignAddress ? (campaignAddress as `0x${string}`) : selectedCampaign.campaign, args, onSettled(data, error) { console.warn('Settled', { data, error }) @@ -106,10 +121,13 @@ const CreateLink: NextPage = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isContractWriteError, isTxSubmitted, contractWriteError]) + const protocol = window.location.host === 'localhost:3000' ? 'http' : 'https' + useEffect(() => { if (wasTxSuccessful) { - const protocol = window.location.host === 'localhost:3000' ? 'http' : 'https' - const url = `${protocol}://${window.location.host}/retrieve?campaignId=${selectedCampaign?.actionId}&campaignAddy=${selectedCampaign?.campaign}&ref=${address}` + const url = !campaignAddress + ? `${protocol}://${window.location.host}/retrieve?campaignId=${selectedCampaign?.actionId}&campaignAddy=${selectedCampaign?.campaign}&ref=${address}` + : `${protocol}://${window.location.host}/retrieve?campaignId=${actionId}&campaignAddy=${campaignAddress}&ref=${address}` setLink(url) toast({ @@ -213,7 +231,11 @@ const CreateLink: NextPage = () => { Create Referral Link - + {!campaignAddress ? ( + + ) : ( +
Campaign: {actionId}
+ )} {!link && ( @@ -237,6 +259,9 @@ const CreateLink: NextPage = () => { ) : ( + {!!campaignAddress && ( + + )} {selectedCampaign?.id.length > 0 && ( )}