feat: donation

src/api/getExchangeRate.ts

@@ -0,0 +1,33 @@
+import axios from "axios";
+
+const symbolToCoinGeckoId: { [key: string]: string } = {
+  ETH: "ethereum",
+};
+
+export const getExchangeRate = async (
+  currencySymbol: string
+): Promise<number | void> => {
+  try {
+    const response = await axios.get(
+      `https://api.coingecko.com/coins/${symbolToCoinGeckoId[currencySymbol]}`,
+      {
+        headers: {
+          "x-cg-pro-api-key": import.meta.env.VITE_COINGECKO_API_KEY,
+        },
+      }
+    );
+    console.log(response.data);
+    return response.data;
+  } catch (ex) {
+    console.error(ex);
+    const hardcodedRates = {
+      ETH: 1940.79,
+      DAI: 1,
+      CELO: 0.535419,
+      MATIC: 0.800984,
+    };
+    return hardcodedRates[
+      currencySymbol as keyof typeof hardcodedRates
+    ] as number;
+  }
+};

src/components/DonationModal.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react";
+import { useAccountAbstraction } from "@/store";
+import { useQuery } from "@tanstack/react-query";
+import { getExchangeRate } from "@/api/getExchangeRate";
+import { parseEther } from "viem";
+import { useCleanifyContract } from "@/hooks";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  reportId: number;
+};
+
+export const DonationModal = ({ isOpen, onClose, reportId }: Props) => {
+  const [donationAmount, setDonationAmount] = useState("");
+
+  const { chain } = useAccountAbstraction();
+  const coinSymbol = chain.nativeCurrency.symbol;
+
+  const { data: exchangeRate } = useQuery({
+    queryKey: ["exchangeRate", coinSymbol],
+    queryFn: () => getExchangeRate(coinSymbol),
+  });
+
+  const { contract } = useCleanifyContract();
+
+  const handleDonate = async () => {
+    const options = {
+      value: String(parseEther(donationAmount)),
+    };
+    await contract.addRewards(reportId, options);
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Make a Donation</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl>
+            <FormLabel>Donation Amount ({coinSymbol})</FormLabel>
+            <Input
+              type="number"
+              placeholder="Enter donation amount"
+              value={donationAmount}
+              onChange={(e) => setDonationAmount(e.target.value)}
+            />
+            <Text pt={2}>
+              equivalent to: {Number(donationAmount) * (exchangeRate || 0)}$
+            </Text>
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={handleDonate}>
+            Donate
+          </Button>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DonationModal;

src/components/index.ts

@@ -7,3 +7,4 @@ export * from "./Navbar";
 export * from "./NetworkSelector";
 export * from "./SafeInfo";
 export * from "./MapComponent";
+export * from "./DonationModal";

src/hooks/useReportById.ts

@@ -1,32 +1,34 @@
-import { useReportMetadata } from "@hooks/useReportMetadata.ts"
-import { BaseReport } from "@models/report.ts"
-import { useEffect, useState } from "react"
-import { useCleanifyContract } from "@hooks/useCleanifyContract.ts"
+import { useReportMetadata } from "@hooks/useReportMetadata.ts";
+import { BaseReport } from "@models/report.ts";
+import { useEffect, useState } from "react";
+import { useCleanifyContract } from "@hooks/useCleanifyContract.ts";
 
 export const useReportById = (id: number) => {
+  const { contract } = useCleanifyContract();
 
-  const { contract } = useCleanifyContract()
+  const [baseReport, setBaseReport] = useState<BaseReport>();
 
-  const [baseReport, setBaseReport] = useState<BaseReport>()
+  const { report } = useReportMetadata(baseReport);
 
-  const { report } = useReportMetadata(baseReport)
-
-  useEffect(() => {
+  const getReport = async () => {
     if (contract) {
-      contract.reports(id).then((baseReport) => {
+      contract.getReportById(id).then((baseReport) => {
         setBaseReport({
           id: baseReport.id.toNumber(),
           creator: baseReport.creator,
           metadata: baseReport.metadata,
           totalRewards: baseReport.totalRewards.toNumber(),
           state: baseReport.state,
-        })
-      })
+        });
+      });
     }
-  }, [id])
+  };
+
+  useEffect(() => {
+    getReport();
+  }, []);
 
   return {
     report,
-  }
-
-}
+  };
+};

src/models/report.ts

@@ -23,7 +23,7 @@ export type ReportMetadata = {
   analysis: AnalyzeImageResponse;
 };
 
-enum ReportState {
+export enum ReportState {
   InReview,
   Available,
   PendingVerification,

src/screens/Report.tsx

@@ -1,49 +1,76 @@
-import { MapComponent } from "@/components";
+import { DonationModal, MapComponent } from "@/components";
 import { Routes } from "@/router";
-import { Box, Button, HStack, Image, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  HStack,
+  Image,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
 import { useParams } from "react-router-dom";
-import {useReportById} from "@hooks/useReportById.ts"
+import { useReportById } from "@hooks/useReportById.ts";
+import { ReportState } from "@/models/report";
 
 export const Report = () => {
   const params = useParams();
 
+  console.log("params.id", params.id);
 
-  const { report }= useReportById(Number(params.id))
-
-  console.log(params)
+  const { report } = useReportById(Number(params.id));
+  console.log("report", report);
 
+  console.log(params);
+  const {
+    onOpen: onOpenDonationModal,
+    onClose: onCloseDonationModal,
+    isOpen: isOpenDonationModal,
+  } = useDisclosure();
 
   if (!report) return null;
+  console.log("report.state", report.state);
   return (
-    <HStack w={"full"} h={"full"}>
-      <Box h={"full"} w={"50%"} overflow={"auto"} pr={4}>
-        <Image src={report.metadata.images[0]} w={"full"} />
-        <Box py={4}>
-          <Box pb={2}>
-            <Text fontSize="lg" fontWeight={"bold"}>
-              {report.metadata.name}
-            </Text>
-          </Box>
-          <Box pb={6}>
-            <Text fontSize="md" textAlign={"justify"}>
-              {report.metadata.analysis.description}
-            </Text>
+    <>
+      <HStack w={"full"} h={"full"}>
+        <Box h={"full"} w={"50%"} overflow={"auto"} pr={4}>
+          <Image src={report.metadata.images[0]} w={"full"} />
+          <Box py={4}>
+            <Box pb={2}>
+              <Text fontSize="lg" fontWeight={"bold"}>
+                {report.metadata.name}
+              </Text>
+            </Box>
+            <Box pb={6}>
+              <Text fontSize="md" textAlign={"justify"}>
+                {report.metadata.analysis.description}
+              </Text>
+            </Box>
+            <Box pb={4} justifyContent={"center"} display={"flex"}>
+              <Button
+                colorScheme="blue"
+                mr={3}
+                onClick={onOpenDonationModal}
+                isDisabled={report.state !== ReportState.Available}
+              >
+                Donate
+              </Button>
+              <Button colorScheme="green">Clean</Button>
+            </Box>
           </Box>
-          <Box pb={4} justifyContent={"center"} display={"flex"}>
-            <Button colorScheme="blue" mr={3}>
-              Fund the project
-            </Button>
-            <Button colorScheme="green">Clean</Button>
+          <Box h={"full"} w={"50%"}>
+            <MapComponent
+              defaultActiveReport={report.id}
+              defaultMapCenter={report.metadata.location}
+              route={Routes.Report}
+            />
           </Box>
         </Box>
-      </Box>
-      <Box h={"full"} w={"50%"}>
-        <MapComponent
-          defaultActiveReport={report.id}
-          defaultMapCenter={report.metadata.location}
-          route={Routes.Report}
-        />
-      </Box>
-    </HStack>
+      </HStack>
+      <DonationModal
+        isOpen={isOpenDonationModal}
+        onClose={onCloseDonationModal}
+        reportId={report.id}
+      />
+    </>
   );
 };