my createcampaign code : import React, { useState } from 'react' import { useNavigate } from 'react-router-dom'; import { ethers } from 'ethers';

import { useStateContext } from '../context'; import { money } from '../assets'; import { CustomButton, FormField, Loader } from '../components'; import { checkIfImage } from '../utils';

const CreateCampaign = () => { const navigate = useNavigate(); const [isLoading, setIsLoading] = useState(false); const { createCampaign } = useStateContext(); const [form, setForm] = useState({ name: '', title: '', description: '', target: '', deadline: '', image: '' });

const handleFormFieldChange = (fieldName, e) => { setForm({ ...form, [fieldName]: e.target.value }) }

const handleSubmit = async (e) => { e.preventDefault();

checkIfImage(form.image, async (exists) => {
  if(exists) {
    setIsLoading(true)
    await createCampaign({ ...form, target: ethers.utils.parseUnits(form.target, 18)})
    setIsLoading(false);
    navigate('/');
  } else {
    alert('Provide valid image URL')
    setForm({ ...form, image: '' });
  }
})

}

return (

{isLoading && }

Start a Campaign

) }

export default CreateCampaign

And my context's indec.js code: import React, { useContext, createContext } from 'react';

import { useAddress, useContract, useMetamask, useContractWrite } from '@thirdweb-dev/react'; import { ethers } from 'ethers'; import { EditionMetadataWithOwnerOutputSchema } from '@thirdweb-dev/sdk';

const StateContext = createContext();

export const StateContextProvider = ({ children }) => { const { contract } = useContract('0xEAB4bBf28B3D8B3D07dB6CCC874513cd2b8B4B6e'); const { mutateAsync: createCampaign } = useContractWrite(contract, 'createCampaign');

const address = useAddress(); const connect = useMetamask();

const publishCampaign = async (form) => { try { const data = await createCampaign({ args: [ address, // owner form.title, // title form.description, // description form.target, new Date(form.deadline).getTime(), // deadline, form.image, ], });

  console.log("contract call success", data)
} catch (error) {
  console.log("contract call failure", error)
}

}

const getCampaigns = async () => { const campaigns = await contract.call('getCampaigns');

const parsedCampaings = campaigns.map((campaign, i) => ({
  owner: campaign.owner,
  title: campaign.title,
  description: campaign.description,
  target: ethers.utils.formatEther(campaign.target.toString()),
  deadline: campaign.deadline.toNumber(),
  amountCollected: ethers.utils.formatEther(campaign.amountCollected.toString()),
  image: campaign.image,
  pId: i
}));

return parsedCampaings;

}

const getUserCampaigns = async () => { const allCampaigns = await getCampaigns();

const filteredCampaigns = allCampaigns.filter((campaign) => campaign.owner === address);

return filteredCampaigns;

}

const donate = async (pId, amount) => { const data = await contract.call('donateToCampaign', [pId], { value: ethers.utils.parseEther(amount)});

return data;

}

const getDonations = async (pId) => { const donations = await contract.call('getDonators', [pId]); const numberOfDonations = donations[0].length;

const parsedDonations = [];

for(let i = 0; i < numberOfDonations; i++) {
  parsedDonations.push({
    donator: donations[0][i],
    donation: ethers.utils.formatEther(donations[1][i].toString())
  })
}

return parsedDonations;

}

return ( <StateContext.Provider value={{ address, contract, connect, createCampaign: publishCampaign, getCampaigns, getUserCampaigns, donate, getDonations }}

{children} </StateContext.Provider> ) }

export const useStateContext = () => useContext(StateContext);

adrianhajdin / project_crowdfunding

After submitting on create capaign loader is bufffering continuously #85

Start a Campaign

You will get 100% of the raised amount