Optimized

apps/user-app/app/(dashboard)/layout.tsx

@@ -1,10 +1,17 @@
+import { redirect } from "next/navigation";
 import { SidebarItem } from "../../components/SidebarItem";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../lib/auth";
 
-export default function Layout({
+export default async function Layout({
   children,
 }: {
   children: React.ReactNode;
-}): JSX.Element {
+}): Promise<JSX.Element> {
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    redirect('/')
+  } 
   return (
     <div className="flex">
         <div className="w-72 border-r border-slate-300 min-h-screen mr-4 pt-28">

apps/user-app/app/(dashboard)/p2p/page.tsx

@@ -1,7 +1,32 @@
+import { getServerSession } from "next-auth";
+import { OnRampTransactions } from "../../../components/OnRampTransactions";
 import { SendCard } from "../../../components/SendCard";
+import { authOptions } from "../../lib/auth";
+import prisma from "@repo/db/client";
+import { time } from "console";
 
-export default function() {
-    return <div className="w-full">
+async function getP2pTranstions() {
+    const session = await getServerSession(authOptions);
+    const txns = await prisma.p2pTransfer.findMany({
+        where: {
+            fromUserId: Number(session?.user?.id)
+        }
+    });
+    return txns.map(t => ({
+        time: t.timestamp,
+        amount: t.amount,
+        status: "",
+        provider: ""
+    }))
+}
+
+export default async function() {
+    const transactions = await getP2pTranstions();
+
+    return <div className="grid grid-cols-1 gap-4 md:grid-cols-2 p-4 w-screen">
         <SendCard />
+        <div className="flex items-center">
+            <OnRampTransactions transactions={transactions}/>   
+        </div>
     </div>
 }

apps/user-app/app/lib/actions/createOnrampTransaction.ts

@@ -12,6 +12,9 @@ export async function createOnRampTransaction(provider: string, amount: number)
             message: "Unauthenticated request"
         }
     }
+    if(!amount){
+        throw new Error('No Amount');
+    }
     const token = (Math.random() * 1000).toString();
     await prisma.onRampTransaction.create({
         data: {
@@ -23,7 +26,7 @@ export async function createOnRampTransaction(provider: string, amount: number)
             amount: amount * 100
         }
     });
-
+    
     return {
         message: "Done"
     }

apps/user-app/components/AddMoneyCard.tsx

@@ -35,8 +35,13 @@ export const AddMoney = () => {
         }))} />
         <div className="flex justify-center pt-4">
             <Button onClick={async () => {
-                await createOnRampTransaction(provider, value)
-                window.location.href = redirectUrl || "";
+                try {
+                    const res = await createOnRampTransaction(provider, value);
+
+                    window.location.href = redirectUrl || "";
+                } catch(e) {
+                    alert("No Amount");
+                }
             }}>
             Add Money
             </Button>

apps/user-app/components/SendCard.tsx

@@ -5,12 +5,14 @@ import { Center } from "@repo/ui/center";
 import { TextInput } from "@repo/ui/textinput";
 import { useState } from "react";
 import { p2pTransfer } from "../app/lib/actions/p2pTransfer";
+import { useRouter } from 'next/navigation'
 
 export function SendCard() {
     const [number, setNumber] = useState("");
     const [amount, setAmount] = useState("");
+    const router = useRouter();
 
-    return <div className="h-[90vh]">
+    return <div className="">
         <Center>
             <Card title="Send">
                 <div className="min-w-72 pt-2">
@@ -22,7 +24,16 @@ export function SendCard() {
                     }} />
                     <div className="pt-4 flex justify-center">
                         <Button onClick={async () => {
-                            await p2pTransfer(number, Number(amount) * 100)
+                            try {
+                                const res = await p2pTransfer(number, Number(amount) * 100)
+                                if(res){
+                                    alert(res.message);
+                                } else {
+                                    router.push('/transfer');
+                                }
+                            } catch(e) {
+                                alert("Insufficient fund")
+                            }
                         }}>Send</Button>
                     </div>
                 </div>

packages/ui/src/Center.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
 export const Center = ({ children }: { children: React.ReactNode }) => {
-    return <div className="flex justify-center flex-col h-full">
+    return <div className="flex justify-center flex-col md:h-full">
         <div className="flex justify-center">
             {children}
         </div>

packages/ui/src/TextInput.tsx

@@ -11,6 +11,6 @@ export const TextInput = ({
 }) => {
     return <div className="pt-2">
         <label className="block mb-2 text-sm font-medium text-gray-900">{label}</label>
-        <input onChange={(e) => onChange(e.target.value)} type="text" id="first_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder={placeholder} />
+        <input onChange={(e) => onChange(e.target.value)} type="number" id="first_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder={placeholder} />
     </div>
 }