📦 NEW: approve transaction

src/components/ApproveCampaign.tsx

@@ -0,0 +1,118 @@
+import { Box, Button, Heading, useToast, Text } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
+import React, { useEffect, useState } from 'react'
+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 toast = useToast()
+ const network = useNetwork()
+ const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
+ const [returnedData, setReturnedData] = useState<any>('')
+
+ const chainId: number = network.chain?.id ?? 5
+
+ const { config, error, isError } = usePrepareContractWrite({
+  abi: ERC20Contract.abi,
+  enabled: !!campaignAddress,
+  functionName: 'approve',
+  address: rewardTokenAddress as Address,
+  args: [campaignAddress, '1000000000000000000000000000000'],
+ })
+
+ const { data, isLoading: writeLoading, isError: writeError, write } = useContractWrite(config)
+
+ const { isLoading: isContractLoading, isSuccess: writeSuccess } = useWaitForTransaction({
+  hash: data?.hash,
+ })
+
+ useEffect(() => {
+  if (writeSuccess) {
+   console.log('Returned Data', data)
+   setReturnedData(data)
+
+   toast({
+    title: 'Success',
+    description: 'Transaction submited successfully',
+    status: 'success',
+    duration: 9000,
+    isClosable: true,
+   })
+  }
+ }, [writeSuccess, data])
+
+ const handleSubmit = async (e: React.FormEvent) => {
+  e.preventDefault()
+  try {
+   console.log('Sending TX')
+   console.log('campaignAddress: ', campaignAddress)
+   if (!!write) {
+    await write?.()
+    setIsSubmitting(true)
+   }
+  } catch (error) {
+   toast({
+    title: 'Error',
+    description: 'There was an error',
+    status: 'error',
+    duration: 9000,
+    isClosable: true,
+   })
+   setIsSubmitting(false)
+  }
+ }
+
+ return (
+  <Box>
+      <Heading as="h2" fontSize="32px" fontFamily="Dm Sans" textAlign="center">
+        Create Campaign
+      </Heading>
+      {!writeSuccess && 
+<>
+      <Text as="h5" fontSize="xl" marginY={10}>
+        You need to approve the campaign contract 
+        <br />
+        to distribute awards on your behalf.
+      </Text>
+
+     <Box display="flex" justifyContent="center" mt={5}>
+        <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.2 }}>
+        <Button
+          backgroundColor="purple.300"
+          variant="gradient"
+          border={'0.5px solid #312E2A'}
+          boxShadow={'2.8px 3.8px 0px 0px #312E2A'}
+          py={2}
+          px={28}
+          fontFamily="Dm Sans"
+          color="white"
+          type="submit"
+          isLoading={isSubmitting}
+          onClick={handleSubmit}
+          disabled={writeLoading || isContractLoading}>
+          {writeLoading || isContractLoading ? 'Loading...' : 'Approve'}
+        </Button>
+        </motion.div>
+      </Box>
+      </>
+      }
+
+        {/* TODO: Add campaign ref to the link */}
+        {writeSuccess && (
+      <Box display="flex" justifyContent="center" mt={5}>
+          <SuccessComponent
+          link={null}
+          data={data ? data : txnData}
+          message={`Successfully ${data ? "approved the campaign" : "created a new campaign"}`}
+          subtitle=" "
+          />
+          </Box>
+        )}
+  </Box>
+ )
+}
+
+export default ApproveCampaign

src/components/layout/CampaignsMenu.tsx

@@ -27,7 +27,7 @@ const CampaignsMenu = ({ selectedCampaign, setSelectedCampaign, isActive }: any)
  const chainId: number = network.chain?.id ?? 5
 
  useEffect(() => {
-  const endpoint = networks[chainId].factorySubgraph
+  const endpoint = networks[chainId]?.factorySubgraph
   setCurrentEndpoint(endpoint)
  }, [chainId])
 

src/components/layout/SuccessComponent.tsx

@@ -17,7 +17,7 @@ const SuccessComponent = ({ link, data, message = '', subtitle = '' }: { link: s
 
  return (
   <Box margin={10} top="64px" textAlign="center">
-   <Heading as="h3" size="lg" textAlign="center" margin={5}>
+   <Heading as="h3" size="xl" textAlign="center" margin={5}>
     {message}
    </Heading>
    {link && (

src/pages/CreateCampaign.tsx

@@ -1,14 +1,14 @@
 import { Box, Button, FormControl, FormHelperText, FormLabel, Heading, Input, useBreakpointValue, useColorMode, useToast } from '@chakra-ui/react'
 import Background from 'components/Background'
 import Container from 'components/layout/Container'
-import SuccessComponent from 'components/layout/SuccessComponent'
 import { motion } from 'framer-motion'
 import React, { useEffect, useState } from 'react'
 import { networks } from 'utils/network'
-import { v4 as uuidv4 } from 'uuid'
 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
@@ -35,25 +35,23 @@ const CreateCampaign = () => {
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
  const [isReadyToSubmit, setIsReadyToSubmit] = useState(false)
 
- const { address } = useAccount()
- const actionid = uuidv4()
-
  const chainId: number = network.chain?.id ?? 5
 
  const { config, error, isError } = usePrepareContractWrite({
   abi: CampaignFactory.abi,
   enabled: isReadyToSubmit,
   functionName: 'addCampaign',
-  address: networks[chainId].factoryContract,
+  address: networks[chainId]?.factoryContract,
   args,
  })
 
  const { data, isLoading: writeLoading, isError: writeError, write } = useContractWrite(config)
 
- const { isLoading: isContractLoading, isSuccess: writeSuccess } = useWaitForTransaction({
+ const { data: txnData, isLoading: isContractLoading, isSuccess: writeSuccess } = useWaitForTransaction({
   hash: data?.hash,
  })
- const worldId = networks[chainId].worldId
+
+ const worldId = networks[chainId]?.worldId
  const bigIntMaxReferalsperReferee = maxReferalsperReferee ? parseUnits(maxReferalsperReferee, contractDecimals) : false
  const bigIntRewardReferer = rewardReferrer ? parseUnits(rewardReferrer, contractDecimals) : false
  const bigIntRewardReferee = rewardReferee ? parseUnits(rewardReferee, contractDecimals) : false
@@ -103,7 +101,7 @@ const CreateCampaign = () => {
    })
   }
  }, [writeSuccess, data])
-
+  
  const handleSubmit = async (e: React.FormEvent) => {
   e.preventDefault()
   try {
@@ -149,14 +147,8 @@ const CreateCampaign = () => {
        borderRadius: '40px',
        border: '1px solid rgba(179, 186, 209, 0.5)',
       }}>
-      {writeSuccess ? (
-       // TODO: Add campaign ref to the link
-       <SuccessComponent
-        link={'/createlink'}
-        data={data}
-        message={`Created campaign: ${randActionId}`}
-        subtitle="Give this link to people who will make referrals"
-       />
+      {(writeSuccess && txnData?.logs) ? (
+            <ApproveCampaign campaignAddress={txnData?.logs[0]?.address} txnData={data} rewardTokenAddress={rewardTokenAddress} />
       ) : (
        <form>
         <Heading as="h2" fontSize="32px" fontFamily="Dm Sans" textAlign="center">

src/types/index.ts

@@ -1,3 +1,5 @@
+import { Address } from "viem"
+
 export interface State<T> {
  loading: boolean
  data?: T
@@ -48,7 +50,7 @@ export interface PassportStamp {
 
 export interface CampaignType {
  id: string
- owner: `0x${string}`
- campaign: `0x${string}`
+ owner: Address
+ campaign: Address
  actionId: string
 }