Assignment 3 : Let users see the p2p transactions.

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

@@ -1,39 +1,109 @@
-import { SidebarItem } from "../../components/SidebarItem";
+import { SidebarItem } from '../../components/SidebarItem'
 
 export default function Layout({
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }): JSX.Element {
   return (
-    <div className="flex">
-        <div className="w-72 border-r border-slate-300 min-h-screen mr-4 pt-28">
-            <div>
-                <SidebarItem href={"/dashboard"} icon={<HomeIcon />} title="Home" />
-                <SidebarItem href={"/transfer"} icon={<TransferIcon />} title="Transfer" />
-                <SidebarItem href={"/transactions"} icon={<TransactionsIcon />} title="Transactions" />
-            </div>
+    <div className='flex'>
+      <div className='w-72 border-r border-slate-300 min-h-screen mr-4 pt-28'>
+        <div>
+          <SidebarItem href={'/dashboard'} icon={<HomeIcon />} title='Home' />
+          <SidebarItem
+            href={'/transfer'}
+            icon={<TransferIcon />}
+            title='Transfer'
+          />
+          <SidebarItem
+            href={'/transactions'}
+            icon={<TransactionsIcon />}
+            title='Transactions'
+          />
+          <SidebarItem
+            href={'/p2p'}
+            icon={<P2PTransferIcon />}
+            title='Transactions'
+          />
         </div>
-            {children}
+      </div>
+      {children}
     </div>
-  );
+  )
 }
 
 // Icons Fetched from https://heroicons.com/
 function HomeIcon() {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-  </svg>
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      stroke-width='1.5'
+      stroke='currentColor'
+      className='w-6 h-6'
+    >
+      <path
+        stroke-linecap='round'
+        stroke-linejoin='round'
+        d='m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'
+      />
+    </svg>
+  )
 }
 function TransferIcon() {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
-  </svg>
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      stroke-width='1.5'
+      stroke='currentColor'
+      className='w-6 h-6'
+    >
+      <path
+        stroke-linecap='round'
+        stroke-linejoin='round'
+        d='M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5'
+      />
+    </svg>
+  )
 }
 
 function TransactionsIcon() {
-    return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-  </svg>
-
-}
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      stroke-width='1.5'
+      stroke='currentColor'
+      className='w-6 h-6'
+    >
+      <path
+        stroke-linecap='round'
+        stroke-linejoin='round'
+        d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
+      />
+    </svg>
+  )
+}
+
+function P2PTransferIcon() {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      strokeWidth={1.5}
+      stroke='currentColor'
+      className='w-6 h-6'
+    >
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941'
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { getServerSession } from 'next-auth'
+import { SendCard } from '../../../components/SendCard'
+import { authOptions } from '../../lib/auth'
+import prisma from '@repo/db/client'
+import { BalanceCard } from '../../../components/BalanceCard'
+import { P2PTransactions } from '../../../components/P2PTransactions'
+
+async function getBalance() {
+  const session = await getServerSession(authOptions)
+  const balance = await prisma.balance.findFirst({
+    where: {
+      userId: Number(session?.user?.id),
+    },
+  })
+  return {
+    amount: balance?.amount || 0,
+    locked: balance?.locked || 0,
+  }
+}
+
+async function getP2PTransactions() {
+  const session = await getServerSession(authOptions)
+  const txns = await prisma.p2pTransfer.findMany({
+    where: {
+      OR: [
+        {
+          fromUserId: Number(session?.user?.id),
+        },
+        { toUserId: Number(session?.user?.id) },
+      ],
+    },
+  })
+
+  return txns.map((t) => ({
+    time: t.timestamp,
+    amount: t.amount,
+    transactionType: t.fromUserId == session?.user?.id ? 'Sent' : 'Received',
+  }))
+}
+
+export default async function () {
+  const balance = await getBalance()
+  const transactions = await getP2PTransactions()
+
+  return (
+    <div className='w-screen'>
+      <div className='text-4xl text-[#6a51a6] pt-8 mb-8 font-bold'>
+        P2P Transfer
+      </div>
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 p-4'>
+        <div>
+          <SendCard />
+        </div>
+        <div>
+          <BalanceCard amount={balance.amount} locked={balance.locked} />
+          <div className='pt-4'>
+            <P2PTransactions transactions={transactions} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+'use server'
+
+import { getServerSession } from 'next-auth'
+import { authOptions } from '../auth'
+import prisma from '@repo/db/client'
+
+export async function createOnRampTransaction(
+  amount: number,
+  provider: string
+) {
+  const session = await getServerSession(authOptions)
+  const token = Math.random().toString()
+  const userId = await session.user.id
+
+  if (!userId) {
+    return {
+      message: 'User not logged in.',
+    }
+  }
+  await prisma.onRampTransaction.create({
+    data: {
+      status: 'Processing',
+      provider: provider,
+      amount: amount,
+      startTime: new Date(),
+      userId: Number(userId),
+      token: token,
+    },
+  })
+  return {
+    message: 'On ramp transaction added.',
+  }
+}

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

@@ -0,0 +1,60 @@
+'use server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '../auth'
+import prisma from '@repo/db/client'
+import { resolve } from 'path'
+
+export async function p2pTransfer(to: string, amount: number) {
+  const session = await getServerSession(authOptions)
+  const from = session?.user?.id
+  if (!from) {
+    return {
+      message: 'Error while sending',
+    }
+  }
+  const toUser = await prisma.user.findFirst({
+    where: {
+      number: to,
+    },
+  })
+
+  if (!toUser) {
+    return {
+      message: 'User not found',
+    }
+  }
+  await prisma.$transaction(async (tx) => {
+    // Lockin for the prostgress so that while updating can be done only by one user.
+    await tx.$queryRaw`SELECT * FROM "Balance" WHERE "userId" = ${Number(from)} FOR UPDATE`
+
+    const fromBalance = await tx.balance.findUnique({
+      where: { userId: Number(from) },
+    })
+    // await new Promise((resolve) => setTimeout(resolve, 4000))
+
+    if (!fromBalance || fromBalance.amount < amount) {
+      throw new Error('Insufficient funds')
+    }
+
+    await tx.balance.update({
+      where: { userId: Number(from) },
+      data: { amount: { decrement: amount } },
+    })
+
+    await tx.balance.update({
+      where: { userId: toUser.id },
+      data: { amount: { increment: amount } },
+    })
+    await tx.p2pTransfer.create({
+      data: {
+        fromUserId: Number(from),
+        toUserId: toUser.id,
+        amount,
+        timestamp: new Date(),
+      },
+    })
+  })
+  return {
+    message: 'Transaction successful...',
+  }
+}

apps/user-app/components/AddMoneyCard.tsx

@@ -1,42 +1,65 @@
-"use client"
-import { Button } from "@repo/ui/button";
-import { Card } from "@repo/ui/card";
-import { Center } from "@repo/ui/center";
-import { Select } from "@repo/ui/select";
-import { useState } from "react";
-import { TextInput } from "@repo/ui/textinput";
+'use client'
+import { Button } from '@repo/ui/button'
+import { Card } from '@repo/ui/card'
+import { Center } from '@repo/ui/center'
+import { Select } from '@repo/ui/select'
+import { useState } from 'react'
+import { TextInput } from '@repo/ui/textinput'
+import { createOnRampTransaction } from '../app/lib/actions/createOnRampTxn'
 
-const SUPPORTED_BANKS = [{
-    name: "HDFC Bank",
-    redirectUrl: "https://netbanking.hdfcbank.com"
-}, {
-    name: "Axis Bank",
-    redirectUrl: "https://www.axisbank.com/"
-}];
+const SUPPORTED_BANKS = [
+  {
+    name: 'HDFC Bank',
+    redirectUrl: 'https://netbanking.hdfcbank.com',
+  },
+  {
+    name: 'Axis Bank',
+    redirectUrl: 'https://www.axisbank.com/',
+  },
+]
 
 export const AddMoney = () => {
-    const [redirectUrl, setRedirectUrl] = useState(SUPPORTED_BANKS[0]?.redirectUrl);
-    return <Card title="Add Money">
-    <div className="w-full">
-        <TextInput label={"Amount"} placeholder={"Amount"} onChange={() => {
-
-        }} />
-        <div className="py-4 text-left">
-            Bank
-        </div>
-        <Select onSelect={(value) => {
-            setRedirectUrl(SUPPORTED_BANKS.find(x => x.name === value)?.redirectUrl || "")
-        }} options={SUPPORTED_BANKS.map(x => ({
+  const [redirectUrl, setRedirectUrl] = useState(
+    SUPPORTED_BANKS[0]?.redirectUrl
+  )
+  const [amount, setAmount] = useState(0)
+  const [provider, setProvider] = useState(SUPPORTED_BANKS[0]?.name || '')
+  return (
+    <Card title='Add Money'>
+      <div className='w-full'>
+        <TextInput
+          label={'Amount'}
+          placeholder={'Amount'}
+          onChange={(value) => {
+            setAmount(value)
+          }}
+        />
+        <div className='py-4 text-left'>Bank</div>
+        <Select
+          onSelect={(value) => {
+            setRedirectUrl(
+              SUPPORTED_BANKS.find((x) => x.name === value)?.redirectUrl || ''
+            )
+            setProvider(
+              SUPPORTED_BANKS.find((x) => x.name === value)?.redirectUrl || ''
+            )
+          }}
+          options={SUPPORTED_BANKS.map((x) => ({
             key: x.name,
-            value: x.name
-        }))} />
-        <div className="flex justify-center pt-4">
-            <Button onClick={() => {
-                window.location.href = redirectUrl || "";
-            }}>
+            value: x.name,
+          }))}
+        />
+        <div className='flex justify-center pt-4'>
+          <Button
+            onClick={async () => {
+              await createOnRampTransaction(amount * 100, provider)
+              window.location.href = redirectUrl || ''
+            }}
+          >
             Add Money
-            </Button>
+          </Button>
         </div>
-    </div>
-</Card>
-}
+      </div>
+    </Card>
+  )
+}