Add: Doogly widget

components/report-details/support/dialog.tsx

@@ -1,16 +1,19 @@
+"use client";
+
 import { ConnectButton } from "@/components/global/connect-button";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { Drawer, DrawerContent, DrawerHeader } from "@/components/ui/drawer";
+import { DialogTrigger } from "@/components/ui/dialog";
 import { Separator } from "@/components/ui/separator";
+import {
+	ALLO_POOLID,
+	DONATION_RECEIVER,
+	DOOGLY_CONTRACT,
+	RECEIVING_TOKEN,
+} from "@/config/constants";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import type { SupportReportInfo } from "@/types";
+import { DooglyDonateButton } from "@doogly/doogly-donate-component";
 import Image from "next/image";
 import { useState } from "react";
 import { useAccount } from "wagmi";
@@ -140,25 +143,25 @@ const SupportReport = ({
 		setOpen,
 	};
 
-	if (isDesktop) {
-		return (
-			<ReportSupportUI
-				{...props}
-				UIComponent={Dialog}
-				ContentComponent={DialogContent}
-				HeaderComponent={DialogHeader}
-			/>
-		);
-	}
-
 	return (
-		<ReportSupportUI
-			{...props}
-			UIComponent={Drawer}
-			ContentComponent={(props) => (
-				<DrawerContent {...props} className="bg-vd-beige-100 p-3" />
-			)}
-			HeaderComponent={DrawerHeader}
+		<DooglyDonateButton
+			buttonText="Support this report"
+			modalTitle="Support this report"
+			config={{
+				destinationChain: "optimism",
+				destinationAddress: DOOGLY_CONTRACT,
+				splitsAddress: DONATION_RECEIVER,
+				hypercertFractionId: hypercertId?.split("-")[2],
+				poolId: ALLO_POOLID as number,
+				destinationOutputTokenAddress: RECEIVING_TOKEN,
+			}}
+			buttonClassName="rounded-3xl bg-vd-blue-900 text-vd-beige-100 hover:bg-vd-blue-700 dark:bg-vd-beige-100 dark:text-vd-blue-900 dark:hover:bg-vd-beige-100/90 active:outline-none active:scale-95 active:ring-2 active:ring-vd-blue-400 active:ring-offset-2"
+			modalStyles={{
+				backgroundColor: "#FAF7F5",
+				headingColor: "#252E56",
+				textColor: "#252E56",
+				buttonColor: "#252F55",
+			}}
 		/>
 	);
 };

config/constants.ts

@@ -5,6 +5,23 @@ import { Environment } from "@hypercerts-org/sdk";
 export const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
 export const ENVIRONMENT = process.env.NEXT_PUBLIC_ENVIRONMENT as Environment;
 
+// This is the Doogly gateway for receiving cross-chain donations on Optimism
+export const DOOGLY_CONTRACT =
+  process.env.NEXT_PUBLIC_DOOGLY_CONTRACT ??
+  "0x3652eC40C4D8F3e804373455EF155777F250a6E2";
+// Allo pool id to transfer donations
+// If 0 then DONATION_RECEIVER could be EOA or Split Contract
+// Else DONATION_RECEIVER is expected to be Allo pool contract
+export const ALLO_POOLID = process.env.NEXT_PUBLIC_ALLO_POOLID ?? 0;
+// Donation receiver address
+export const DONATION_RECEIVER =
+  process.env.NEXT_PUBLIC_DONATION_RECEIVER ??
+  "0xD8813c65a4A21772C360f32B2C7960040fa84a8B";
+// Token address to receive donations in, defaults to USDC
+export const RECEIVING_TOKEN =
+  process.env.NEXT_PUBLIC_RECEIVING_TOKEN ??
+  "0x7F5c764cBc14f9669B88837ca1490cCa17c31607";
+
 export const testNetChains = [sepolia] as const;
 export const prodNetChains = [optimism] as const;
 

config/wagmi.ts

@@ -2,7 +2,7 @@ import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
 
 import { cookieStorage, createStorage } from "wagmi";
 import { getVoiceDeckUrl } from "./endpoint";
-import { optimism } from "viem/chains";
+import { arbitrum, base, celo, optimism } from "viem/chains";
 
 // Get projectId at https://cloud.walletconnect.com
 export const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
@@ -19,7 +19,7 @@ const metadata = {
 
 // Create wagmiConfig
 export const config = defaultWagmiConfig({
-  chains: [optimism], // required
+  chains: [optimism, base, celo, arbitrum], // required
   projectId, // required
   metadata, // required
   ssr: true,

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@anon-aadhaar/react": "^2.4.0",
     "@directus/sdk": "^15.0.2",
+    "@doogly/doogly-donate-component": "^1.0.9",
     "@ethersproject/providers": "^5.7.2",
     "@fontsource-variable/plus-jakarta-sans": "^5.0.20",
     "@hookform/resolvers": "^3.3.4",