Ihre Commit-Nachricht

packages/hardhat/contracts/KindKoin_DonationHub.sol → packages/hardhat/contracts/MantaCare_DonationHub.sol

@@ -12,7 +12,7 @@ import "@openzeppelin/contracts/token/ERC20/utils/SafeERC20.sol";
 import "@openzeppelin/contracts/utils/math/SafeMath.sol";
 
 // A smart contract for managing donations to various projects.
-contract KindKoin_DonationHub is Ownable, Pausable, ReentrancyGuard {
+contract MantaCare_DonationHub is Ownable, Pausable, ReentrancyGuard {
     using SafeMath for uint256;
     using SafeERC20 for IERC20;
     // Stores information about a donation project.

packages/hardhat/deploy/00_deploy_your_contract.ts

@@ -21,7 +21,7 @@ const deployYourContract: DeployFunction = async function (hre: HardhatRuntimeEn
   const { deployer } = await hre.getNamedAccounts();
   const { deploy } = hre.deployments;
 
-  await deploy("KindKoin_DonationHub", {
+  await deploy("MantaCare_DonationHub", {
     from: deployer,
     log: true,
     autoMine: true,

packages/nextjs/components/DonateModal.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+// Importiere hier weitere benötigte Hooks und Bibliotheken
+
+type DonateModalProps = {
+  onClose: () => void;
+};
+
+const DonateModal: React.FC<DonateModalProps> = ({ onClose }) => {
+  const [currency, setCurrency] = useState<string>("DFI");
+  const [amount, setAmount] = useState<string>("");
+  const [isApproved, setIsApproved] = useState<boolean>(true); // Annahme: DFI benötigt keine Genehmigung
+
+  const handleCurrencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setCurrency(e.target.value);
+    setIsApproved(e.target.value === "DFI"); // Setze isApproved auf false für ERC20-Token
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAmount(e.target.value);
+  };
+
+  const handleApprove = async () => {
+    // Füge hier die Logik für die Token-Genehmigung hinzu
+    setIsApproved(true); // Nach erfolgreicher Genehmigung
+  };
+
+  const handleDonate = async () => {
+    if (currency === "DFI") {
+      // Rufe hier die donateDFI Funktion auf
+    } else {
+      // Rufe hier die donateWithToken Funktion auf
+    }
+    onClose(); // Schließe das Modal nach der Transaktion
+  };
+
+  return (
+    <div className="modal">
+      <div className="modal-content">
+        <select value={currency} onChange={handleCurrencyChange}>
+          <option value="DFI">DFI</option>
+          <option value="USDT">USDT</option>
+          <option value="USDC">USDC</option>
+          <option value="EURC">EURC</option>
+          <option value="jUSD">jUSD</option>
+        </select>
+        <input type="text" value={amount} onChange={handleAmountChange} placeholder="Betrag" />
+        {isApproved ? (
+          <button onClick={handleDonate}>Senden</button>
+        ) : (
+          <button onClick={handleApprove}>Approve</button>
+        )}
+        <button onClick={onClose}>Schließen</button>
+      </div>
+    </div>
+  );
+};
+
+export default DonateModal;

packages/nextjs/components/Header.tsx

@@ -37,8 +37,8 @@ export const HeaderMenuLinks = () => {
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive ? "btn-primary shadow-md" : ""
+              } hover: hover:shadow-md focus:!btn-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
             >
               {icon}
               <span>{label}</span>
@@ -62,12 +62,12 @@ export const Header = () => {
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
+    <div className="sticky lg:static top-0 navbar bg-header min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
             tabIndex={0}
-            className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
+            className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-hover" : "hover:bg-hover"}`}
             onClick={() => {
               setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
             }}
@@ -77,7 +77,7 @@ export const Header = () => {
           {isDrawerOpen && (
             <ul
               tabIndex={0}
-              className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+              className="menu menu-compact dropdown-content mt-3 p-2 bg-header rounded-box w-52"
               onClick={() => {
                 setIsDrawerOpen(false);
               }}
@@ -88,10 +88,10 @@ export const Header = () => {
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
           <div className="flex relative w-10 h-10">
-            <Image alt="KindKoin_Logo" className="cursor-pointer" fill src="/logo.svg" />
+            <Image alt="MantaCare_Logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">KindKoin</span>
+            <span className="font-bold leading-tight">MantaCare</span>
             <span className="text-xs">Connect. Donate. Transform.</span>
           </div>
         </Link>

packages/nextjs/components/MetaHeader.tsx

@@ -14,7 +14,7 @@ type MetaHeaderProps = {
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/` : "/";
 
 export const MetaHeader = ({
-  title = "KindKoin App",
+  title = "MantaCare App",
   description = "Connect. Donate. Transform.",
   image = "thumbnail.jpg",
   twitterCard = "summary_large_image",

packages/nextjs/pages/index.tsx

@@ -1,62 +1,73 @@
-import Link from "next/link";
+import { useState } from "react";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { MetaHeader } from "~~/components/MetaHeader";
+import DonateModal from "~~/components/DonateModal";
+import Image from 'next/image';
 
 const Home: NextPage = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<number | null>(null);
+
+  const openDonateModal = (projectId: number) => {
+    setSelectedProject(projectId);
+    setShowModal(true);
+  };
+
+  const projects = [
+    { id: 0, name: "Medical Response Crew", imageUrl: "/mrc.jpg" },
+    { id: 1, name: "Crisis Relief Team", imageUrl: "/crt.png" },
+    { id: 2, name: "Humanitas in Centro", imageUrl: "/hic.jpg" },
+    // Weitere Projekte hinzufügen mit ihren Bildpfaden
+  ];
+
   return (
-    <>
-      <MetaHeader />
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-left mb-8">
-            <span className="block text-4xl font-bold">Dein Spenden-Hub</span>
-            <span className="block text-2xl mb-16">Willkommen zurück!</span>
-          </h1>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/pages/index.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              KindKoin.sol
-            </code>{" "}
-            in{" "}
-            <code className="bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
-          </p>
+    <div className="relative max-w-screen-xl mx-auto">
+      <div className="background-container">
+        <Image 
+          src="/MantaCare_Hintergrund.png" 
+          alt="Hintergrund" 
+          layout="fill" 
+          objectFit="cover" 
+          className="background-image" 
+        />
+      </div>
+
+      <div className="text-over-image absolute top-1/2 left-0 right-0 transform -translate-y-1/2 px-4">
+        <div className="max-w-md mx-auto text-left">
+          <h1 className="text-4xl font-bold text-white">Dein Spenden-Hub</h1>
+          <h2 className="text-xl text-white">Willkommen zurück!</h2>
         </div>
+      </div>
 
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contract
-                </Link>{" "}
-                tab.
-              </p>
+      <main className="container mx-auto my-8 relative mt-64">
+        <section className="grid grid-cols-1 md:grid-cols-3 gap-8 my-8">
+          {projects.map(project => (
+            <div key={project.id} className="bg-project-square p-4 rounded-xl shadow-md">
+              <Image
+                src={project.imageUrl}
+                alt={`Project ${project.name}`}
+                width={500}  
+                height={300} 
+                className="rounded-md"
+              />
+              <h2 className="text-xl font-semibold text-white mt-4">{project.name}</h2>
+              <div className="mt-4">
+                <button
+                  className="btn-primary text-white p-2 rounded btn-hover-donate"
+                  onClick={() => openDonateModal(project.id)}
+                >
+                  Donate
+                </button>
+                <button className="btn-secondary text-black p-2 rounded ml-2 btn-hover-details">Details</button>
+              </div>
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
+          ))}
+        </section>
+      </main>
+
+      {showModal && selectedProject !== null && (
+        <DonateModal projectId={selectedProject} onClose={() => setShowModal(false)} />
+      )}
+    </div>
   );
 };