Merge pull request #44 from marvinmarnold/fe-approveui

📦 NEW: enable user to copy link
marvinmarnold · Aug 17, 2023 · c503672 · c503672
2 parents 41450e3 + 5f00674
commit c503672
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 60 deletions.
diff --git 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<boolean>(false)
@@ -67,50 +77,52 @@ const ApproveCampaign = ({ campaignAddress, txnData, rewardTokenAddress }: {camp
 
  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>
+   <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>
-      </>
-      }
+      <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>
-        )}
+   {/* TODO: Add campaign ref to the link */}
+   {writeSuccess && (
+    <Box display="flex" justifyContent="center" mt={5}>
+     <SuccessComponent
+      link={`${window.location.host === 'localhost:3000' ? 'http' : 'https'}://${
+       window.location.host
+      }/createlink?campaignAddress=${campaignAddress}&actionId=${actionId}`}
+      data={data ? data : txnData}
+      message={`Successfully ${data ? 'approved the campaign' : 'created a new campaign'}`}
+      subtitle="Start sharing the link"
+     />
+    </Box>
+   )}
   </Box>
  )
 }

diff --git 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) ? (
-            <ApproveCampaign campaignAddress={txnData?.logs[0]?.address} txnData={data} rewardTokenAddress={rewardTokenAddress} />
+      {writeSuccess && txnData?.logs ? (
+       <ApproveCampaign
+        campaignAddress={txnData?.logs[0]?.address}
+        txnData={data}
+        rewardTokenAddress={rewardTokenAddress}
+        actionId={randActionId.toString()}
+       />
       ) : (
        <form>
         <Heading as="h2" fontSize="32px" fontFamily="Dm Sans" textAlign="center">

diff --git 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<CampaignType>({
-  id: '',
-  owner: '0x',
-  campaign: '0x',
-  actionId: '',
- })
+ const [selectedCampaign, setSelectedCampaign] = useState<CampaignType>(
+  !!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<any[]>([])
  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
       </h2>
 
-      <CampaignsMenu selectedCampaign={selectedCampaign} setSelectedCampaign={setSelectedCampaign} isActive={proof?.length === 0} />
+      {!campaignAddress ? (
+       <CampaignsMenu selectedCampaign={selectedCampaign} setSelectedCampaign={setSelectedCampaign} isActive={proof?.length === 0} />
+      ) : (
+       <div>Campaign: {actionId}</div>
+      )}
 
       <Box display="flex" justifyContent="center" mt={5}>
        {!link && (
@@ -237,6 +259,9 @@ const CreateLink: NextPage = () => {
           </motion.div>
          ) : (
           <Box>
+           {!!campaignAddress && (
+            <Worldcoin proof={proof} setProof={setProof} setNullifier={setNullifier} setRoot={setRoot} action={actionId as string} />
+           )}
            {selectedCampaign?.id.length > 0 && (
             <Worldcoin proof={proof} setProof={setProof} setNullifier={setNullifier} setRoot={setRoot} action={selectedCampaign?.actionId} />
            )}