Issue/privy wagmi

README.md

@@ -13,6 +13,10 @@ VoiceDeck is a platform that allows users to contribute retroactive funding for
 - Contribute funds with embedded crypto wallet
 - Track personal contribution activity and metrics
 
+## Data Flow
+
+This diagram provide a high level overview of data flow:
+<img width="1632" alt="VD-sequential diagram_20240229" src="https://github.com/VoiceDeck/app/assets/1610146/53bdf97e-da9d-449f-b178-bbe2be67a1f0">
 
 ## Tech Stack
 

app/api/wallet-generate/route.ts

@@ -0,0 +1,32 @@
+// import { PrivyClient } from "@privy-io/server-auth";
+// import { type NextRequest, NextResponse } from "next/server";
+
+// export async function POST(req: NextRequest) {
+// 	const privy = new PrivyClient(
+// 		process.env.PRIVY_APP_ID ?? "",
+// 		process.env.PRIVY_APP_SECRET ?? "",
+// 	);
+
+// 	const { address } = await req.json();
+// 	console.log("address", address);
+
+// 	if (!address) {
+// 		console.log("Missing required fields");
+// 		return NextResponse.json(
+// 			{ error: "Missing required fields" },
+// 			{ status: 400 },
+// 		);
+// 	}
+
+// 	const wallet = await privy.importUser({
+// 		linkedAccounts: [
+// 			{
+// 				type: "email",
+// 				address: address,
+// 			},
+// 		],
+// 		createEthereumWallet: true,
+// 	});
+
+// 	return NextResponse.json({ wallet }, { status: 200 });
+// }

app/checkout/success/page.tsx

@@ -0,0 +1,145 @@
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, ExternalLink } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { normieTechClient } from '@/lib/normie-tech'
+
+import { processNewContribution } from '@/lib/directus'
+
+async function getTransactionData(transactionId: string) {
+    const transactionData = (await normieTechClient.GET('/v1/{projectId}/transactions/{transactionId}',{
+        params:{
+            header:{
+                "x-api-key":process.env.NEXT_PUBLIC_NORMIE_TECH_API_KEY ?? "",
+
+            },
+            path:{
+                projectId:"voice-deck",
+                transactionId:transactionId
+            }
+
+        }
+    }))
+    return transactionData
+}
+
+
+
+export default async function PaymentSuccessPage({
+  searchParams
+}: {
+  searchParams: { transactionId?: string }
+}) {
+  if (!searchParams.transactionId) {
+    notFound()
+  }
+  const res = await getTransactionData(searchParams.transactionId)
+
+
+
+  if (res.error) {
+    return (
+      <div className="min-h-screen bg-slate-50 p-4 md:p-6 lg:p-8">
+        <div className="mx-auto max-w-2xl">
+          <Card className="overflow-hidden rounded-lg border-0 bg-white shadow-lg">
+            <div className="flex flex-col items-center p-6 text-center">
+              <h1 className="mb-2 text-2xl font-bold text-slate-900">Payment Processing Error</h1>
+              <p className="mb-6 text-slate-600">{JSON.stringify(res.error)}</p>
+              <Link href="/reports" className="w-full">
+                <Button className="w-full">Return to Reports</Button>
+              </Link>
+            </div>
+          </Card>
+        </div>
+      </div>
+    )
+  }
+  if(!res.data){
+    return "Error"
+  }
+  const { amountInFiat,blockchainTransactionId,extraMetadataJson} = res.data 
+  const extraMetadata = JSON.parse(JSON.stringify(extraMetadataJson))
+
+  if(!extraMetadata || !extraMetadata.sender || !blockchainTransactionId || !extraMetadata.hypercertId || !amountInFiat){
+    return (
+        <h1>Error some data not defined</h1>
+    )
+  }
+  await processNewContribution(
+    extraMetadata.sender,
+	blockchainTransactionId as `0x${string}`,
+	extraMetadata.hypercertId,
+	amountInFiat,
+	extraMetadata.comment	
+  )
+
+
+
+
+  return (
+    <div className="min-h-screen bg-slate-50 p-4 md:p-6 lg:p-8">
+      <div className="mx-auto max-w-2xl">
+        <Link
+          href="/reports"
+          className="mb-6 inline-flex items-center text-sm text-slate-600 hover:text-slate-900"
+        >
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          ALL REPORTS
+        </Link>
+
+        <Card className="overflow-hidden rounded-lg border-0 bg-white shadow-lg">
+          <div className="flex flex-col items-center p-6 text-center">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
+              {/* biome-ignore lint/a11y/noSvgWithoutTitle: <explanation> */}
+              <svg
+                className="h-8 w-8 text-green-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+            </div>
+
+            <h1 className="mb-2 text-2xl font-bold text-slate-900">Payment Successful!</h1>
+            <p className="mb-6 text-slate-600">
+              Thank you for supporting this important cause. Your contribution will make a real difference.
+            </p>
+
+            <div className="mb-6 w-full rounded-lg bg-slate-50 p-4">
+              <div className="text-sm text-slate-600">Transaction Amount</div>
+              <div className="text-2xl font-bold text-slate-900">${amountInFiat.toFixed(2)}</div>
+            </div>
+
+            <div className="flex w-full flex-col gap-3">
+              <Link href={`${extraMetadata.redirectUrl}`} className="w-full">
+                <Button className="w-full" variant="outline">
+                  Return to Report
+                </Button>
+              </Link>
+
+              <Link
+                href={`https://optimistic.etherscan.io/tx/${blockchainTransactionId}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-full"
+              >
+                <Button className="w-full">
+                  View on Optimism
+                  <ExternalLink className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/layout.tsx

@@ -9,7 +9,9 @@ import { Footer } from "@/components/global/footer";
 import { NavMenu } from "@/components/global/nav-menu";
 import { siteConfig } from "@/config/site";
 import { config } from "@/config/wagmi";
+import { PrivyContextProvider } from "@/contexts/privy";
 import { WagmiContextProvider } from "@/contexts/wagmi";
+import { PrivyProvider } from "@privy-io/react-auth";
 import { headers } from "next/headers";
 
 export const metadata: Metadata = {
@@ -43,19 +45,21 @@ export default function RootLayout({
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
-	const initialState = cookieToInitialState(config, headers().get("cookie"));
+	const initialState = undefined;
 	return (
 		<html lang="en">
 			<body
 				className={cn(
 					"min-h-screen bg-background font-sans antialiased flex flex-col",
 				)}
 			>
-				<WagmiContextProvider initialState={initialState}>
-					<NavMenu />
-					<div className="flex-1">{children}</div>
-					<Footer />
-				</WagmiContextProvider>
+				<PrivyContextProvider>
+					<WagmiContextProvider initialState={initialState}>
+						<NavMenu />
+						<div className="flex-1">{children}</div>
+						<Footer />
+					</WagmiContextProvider>
+				</PrivyContextProvider>
 			</body>
 		</html>
 	);

app/reports/[slug]/page.tsx

@@ -7,17 +7,23 @@
 import { Badge } from "@/components/ui/badge";
 import { DynamicCategoryIcon } from "@/components/ui/dynamic-category-icon";
 import { Separator } from "@/components/ui/separator";
-import { getContributionsByHCId } from "@/lib/directus";
+import {
+	getContributionsByHCId,
+	processNewCryptoContribution,
+} from "@/lib/directus";
 import { fetchReportBySlug } from "@/lib/impact-reports";
+import { normieTechClient } from "@/lib/normie-tech";
 import type { Report } from "@/types";
 import parse from "html-react-parser";
 import { ChevronLeft, MapPin } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
+import { comment } from "postcss";
 
 interface ReportPageProps {
 	params: { slug: string };
+	searchParams?: { [key: string]: string | string[] | undefined };
 }
 
 const getReportData = async (slug?: string | string[]) => {
@@ -35,6 +41,7 @@
 	if (!hypercertId) return null;
 	try {
 		const contributionsData = await getContributionsByHCId(hypercertId);
+
 		return contributionsData || [];
 	} catch (error) {
 		throw new Error(
@@ -59,12 +66,17 @@
 	return metadata;
 }
 
-export default async function ReportPage({ params }: ReportPageProps) {
+export default async function ReportPage({
+	params,
+	searchParams,
+}: ReportPageProps) {
 	const { slug } = params;
 	const report = await getReportData(slug);
 	const contributions = await getContributionsByHypercertId(report.hypercertId);
 	const htmlParsedStory = report.story ? parse(report.story) : null;
-	// console.log({ report });
+	console.log({ searchParams });
+	console.log({ hypercertId: report.hypercertId }, "hypercertId", report.title);
+
 	return (
 		<main className="flex flex-col justify-between h-svh md:h-fit md:px-12 pt-6">
 			{/* 192px is added to account for the funding progress on mobile */}

app/reports/page.tsx

@@ -12,6 +12,7 @@ import { FilterProvider } from "@/contexts/filter";
 import { getNumberOfContributors } from "@/lib/directus";
 import { fetchReports } from "@/lib/impact-reports";
 import type { Report } from "@/types";
+import { Suspense } from "react";
 
 export default async function ReportsPage() {
 	let uniqueReports: Report[];
@@ -32,6 +33,7 @@ export default async function ReportsPage() {
 	}
 
 	return (
+		<Suspense fallback={<div>Loading...</div>}>
 		<main className="flex flex-col gap-4 pb-[64px] md:pb-0">
 			<section className="flex flex-col items-center p-4 md:p-8 gap-4">
 				<header className="relative overflow-hidden w-full flex flex-col justify-end max-w-screen-xl min-[2560px]:max-w-screen-2xl h-[420px] 2xl:h-[520px] min-[2560px]:h-[720px] text-vd-beige-100 rounded-3xl p-4 md:p-8 2xl:p-16">
@@ -74,5 +76,6 @@ export default async function ReportsPage() {
 				</section>
 			)}
 		</main>
+		</Suspense>
 	);
 }

components/global/connect-button.tsx

@@ -2,10 +2,63 @@
 import { useWeb3Modal } from "@web3modal/wagmi/react";
 
 import { Button } from "@/components/ui/button";
+import { DEFAULT_CHAIN_ID } from "@/config/constants";
+import { config } from "@/config/wagmi";
+import { useLogin, useLogout, useWallets } from "@privy-io/react-auth";
+import { useSetActiveWallet } from "@privy-io/wagmi";
+import { disconnect } from "@wagmi/core";
+import { UserPlus } from "lucide-react";
+import { useState } from "react";
 
 const ConnectButton = () => {
-  const { open } = useWeb3Modal();
-  return <Button onClick={() => open()}>Connect Wallet</Button>;
+	// const { open } = useWeb3Modal();
+	const [isLogin, setIsLogin] = useState(false);
+
+	const { logout } = useLogout({
+		onSuccess: () => {
+			console.log("User logged out");
+			setIsLogin(false);
+		},
+	});
+	const { wallets, ready } = useWallets();
+	const { setActiveWallet } = useSetActiveWallet();
+
+	const { login } = useLogin({
+		onComplete: async (user) => {
+			console.log("user logged in...", user);
+			const wallet = user.linkedAccounts.filter((a) => a.type === "wallet")[0];
+			console.log("wallet", wallet);
+			if (wallet.address) {
+				console.log("wallets", wallets);
+				const newActiveWallet = wallets.find(
+					(wallet) => wallet.address === user.wallet?.address,
+				);
+				if (newActiveWallet) {
+					console.log("newActiveWallet", newActiveWallet);
+					console.log("chainId", newActiveWallet.chainId);
+
+					await setActiveWallet(newActiveWallet);
+					const chainId = newActiveWallet.chainId;
+					if (chainId !== DEFAULT_CHAIN_ID.toString()) {
+						await newActiveWallet.switchChain(DEFAULT_CHAIN_ID);
+					}
+				}
+			}
+			setIsLogin(true);
+		},
+
+		onError: async (error) => {
+			console.log("error while logging in...", error);
+			await disconnect(config);
+			setIsLogin(false);
+		},
+	});
+
+	return (
+		<div>
+			<Button onClick={login}>Connect Wallet</Button>
+		</div>
+	);
 };
 ConnectButton.displayName = "ConnectButton";