Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
alexastro01 committed Jun 2, 2024
2 parents 1968c08 + c98d71e commit 4056728
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 203 deletions.
109 changes: 53 additions & 56 deletions packages/nextjs/app/create-campaign/page.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,40 @@
"use client";

import React, { useState } from 'react';
import { useScaffoldWriteContract } from '~~/hooks/scaffold-eth';
import { parseEther } from 'viem'
import React, { useState } from "react";
import { parseEther } from "viem";
import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";

const CreateCampaign: React.FC = () => {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [emoji, setEmoji] = useState('');
const [desiredAmount, setDesiredAmount] = useState('');
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [emoji, setEmoji] = useState("");
const [desiredAmount, setDesiredAmount] = useState("");
const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("DonationContract");


const handleImageUpload = e => {
const file = e.target.files[0];
if (file) {
// Perform actions with the file, such as uploading to a server or displaying a preview
console.log("Selected file:", file);
}
};

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log({ name, description, emoji, desiredAmount });
// Handle form submission, e.g., send data to the backend
};

async function createCampaign() {

try {
await writeYourContractAsync({
functionName: "createCampaign",
args: [name, "0x865981cad2e01237a47f765f46e3e19f3a1cdfcc",
parseEther(`${desiredAmount}`)],

});
} catch (e) {
console.error("Error setting greeting:", e);
}
async function createCampaign() {
try {
await writeYourContractAsync({
functionName: "createCampaign",
args: [name, "0x865981cad2e01237a47f765f46e3e19f3a1cdfcc", parseEther(`${desiredAmount}`)],
});
} catch (e) {
console.error("Error setting greeting:", e);
}





}

return (
<div className="flex justify-center items-center min-h-screen ">
Expand All @@ -47,64 +45,63 @@ const CreateCampaign: React.FC = () => {
<label className="label">
<span className="label-text">Name</span>
</label>
<input
type="text"
placeholder="Campaign Name"
className="input input-bordered w-full"
value={name}
onChange={(e) => setName(e.target.value)}
required
<input
type="text"
placeholder="Campaign Name"
className="input input-bordered w-full"
value={name}
onChange={e => setName(e.target.value)}
required
/>
</div>

<div className="form-control">
<label className="label">
<span className="label-text">Description</span>
</label>
<textarea
placeholder="Campaign Description"
className="textarea textarea-bordered w-full"
value={description}
onChange={(e) => setDescription(e.target.value)}
required
<textarea
placeholder="Campaign Description"
className="textarea textarea-bordered w-full"
value={description}
onChange={e => setDescription(e.target.value)}
required
/>
</div>

<div className="form-control">
<label className="label">
<span className="label-text">Emoji (Symbol)</span>
<span className="label-text">Upload image</span>
</label>
<input
type="text"
placeholder="e.g., 🎉"
className="input input-bordered w-full"
value={emoji}
onChange={(e) => setEmoji(e.target.value)}
required
<input
type="file"
accept="image/*"
className="input textarea textarea-bordered w-full"
onChange={e => handleImageUpload(e)}
/>
</div>

<div className="form-control">
<label className="label">
<span className="label-text">Desired Amount</span>
</label>
<input
type="number"
placeholder="Desired Amount"
className="input input-bordered w-full"
value={desiredAmount}
onChange={(e) => setDesiredAmount(e.target.value)}
required
<input
type="number"
placeholder="Desired Amount"
className="input input-bordered w-full"
value={desiredAmount}
onChange={e => setDesiredAmount(e.target.value)}
required
/>
</div>

<div className="form-control mt-6">
<button type="submit" className="btn btn-primary w-full" onClick={() => createCampaign()}>Create Campaign</button>
<button type="submit" className="btn btn-primary w-full" onClick={() => createCampaign()}>
Create Campaign
</button>
</div>
</form>
</div>
</div>
);
};

export default CreateCampaign;
export default CreateCampaign;
84 changes: 42 additions & 42 deletions packages/nextjs/components/Campaigns.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Card } from './Card'
import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
import React, { useEffect, useState } from "react";
import { Card } from "./Card";
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

interface Campaign {
campaignId: string;
Expand All @@ -12,11 +12,9 @@ interface Campaign {
const Campaigns = () => {
const [campaigns, setCampaigns] = useState<Campaign[]>([]);

const APIURL = "https://api.studio.thegraph.com/query/72991/donation/version/latest";


const APIURL = 'https://api.studio.thegraph.com/query/72991/donation/version/latest'

const tokensQuery = `
const tokensQuery = `
{
campaigns(first: 5) {
campaignId,
Expand All @@ -25,46 +23,48 @@ const tokensQuery = `
campaignName
}
}
`

const client = new ApolloClient({
uri: APIURL,
cache: new InMemoryCache(),
})
`;

const client = new ApolloClient({
uri: APIURL,
cache: new InMemoryCache(),
});

useEffect(() => {
const fetchData = async () => {
try {
const { data } = await client.query({
query: gql(tokensQuery),
fetchPolicy: 'no-cache',
});
setCampaigns(data.campaigns);
} catch (err) {
console.log('Error fetching data: ', err);
}
};

fetchData();
}, []);
useEffect(() => {
const fetchData = async () => {
try {
const { data } = await client.query({
query: gql(tokensQuery),
fetchPolicy: "no-cache",
});
setCampaigns(data.campaigns);
} catch (err) {
console.log("Error fetching data: ", err);
}
};

fetchData();
}, []);

return (
<div className="grid grid-cols-3 mx-auto mt-8 items-center">
{campaigns ? campaigns.map((campaign) => (
<Card
key={campaign.campaignId}
imgSrc="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
title={campaign.campaignName}
campaignOwner={`${campaign.campaignOwner}`}
isLive={campaign.isLive}
campaignId={campaign.campaignId}
description={'Tester campaign'}
/>
)) : <div>Loading...</div>}
{campaigns ? (
campaigns.map(campaign => (
<Card
key={campaign.campaignId}
imgSrc="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
title={campaign.campaignName}
campaignOwner={`${campaign.campaignOwner}`}
isLive={campaign.isLive}
campaignId={campaign.campaignId}
// description={'Tester campaign'}
/>
))
) : (
<div>Loading...</div>
)}
</div>
)
}
);
};

export default Campaigns
export default Campaigns;
Loading

0 comments on commit 4056728

Please sign in to comment.