Dip frontend

frontend/api-management/api/auth.ts

@@ -0,0 +1,31 @@
+import { Login, Register } from "../models/user";
+
+export async function signUp(data: Register) {
+    const res = await fetch("https://tappin-api.onrender.com/auth/sign-up", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            email: data.email,
+            password: data.password,
+            name: data.name,
+            address: data.address,
+        }),
+    });
+    console.log(res);
+}
+
+export async function login(data: Login) {
+    const res = await fetch("https://tappin-api.onrender.com/auth/login", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            email: data.email,
+            password: data.password,
+        }),
+    });
+    console.log(res);
+}

frontend/api-management/models/user.ts

@@ -0,0 +1,11 @@
+export class Login {
+    declare email: string;
+    declare password: string;
+}
+
+export class Register {
+    declare email: string;
+    declare password: string;
+    declare name: string;
+    declare address: string;
+}

frontend/app/(root)/search/page.tsx

@@ -0,0 +1,10 @@
+import SearchWrapper from '@/components/search/SearchWrapper'
+import React from 'react'
+
+export default function page() {
+    return (
+        <div className='py-[3%]'>
+            <SearchWrapper />
+        </div>
+    )
+}

frontend/components/Rent/RentHome.tsx

@@ -29,7 +29,7 @@ export default function RentHome() {
                         <h2>Rent a machine today</h2>
                         <span className='md:text-xl font-medium opacity-80'><em>Start your journey here!</em></span>
                     </div>
-                    <Button className='offsetstyle flex items-center gap-2 bg-white generalBorder text-black hover:text-white '>Start here! <ChevronRightCircle /></Button>
+                    <Link className='offsetstyle text-sm flex items-center gap-2 bg-white generalBorder text-black hover:text-white ' href="/search">Start here! </Link>
                 </div>
             </div>
             {/* <div style={{ backgroundImage: `url(${images.daemon})`, backgroundRepeat: "no-repeat", backgroundPosition: "90%", }} className='w-full bg-pink-300 my-4 offsetEffect generalBorder flex flex-col gap-4 items-center justify-center'>

frontend/components/landing/onboard/OnboardTabs.tsx

@@ -1,10 +1,14 @@
 "use client"
+import { login, signUp } from '@/api-management/api/auth'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { useWallet } from '@solana/wallet-adapter-react'
 import React, { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export default function OnboardTabs() {
+    const { publicKey, sendTransaction } = useWallet();
+
     const [activeTab, setActiveTab] = useState('Login')
     return (
         <div className='md:w-[60%]'>
@@ -21,36 +25,50 @@ export default function OnboardTabs() {
                     <div>
                         <h2 className='font-bold text-3xl'>Login back to your TAppIN account.</h2>
                         <span>use your registered email and password to login</span>
-                        <form action="" className='py-6 flex flex-col gap-3 lg:w-[50%]'>
+                        <form action={(e: FormData) => {
+                            const email = e.get("email")?.toString() ?? "";
+                            const password = e.get("password")?.toString() ?? "";
+
+                            login({ email: email, password: password })
+
+                        }} className='py-6 flex flex-col gap-3 lg:w-[50%]'>
                             <div>
                                 <span className='text-xs'>Enter your email</span>
-                                <Input type='email' placeholder='[email protected]' className='offsetEffect generalBorder ' />
+                                <Input name='email' type='email' placeholder='[email protected]' className='offsetEffect generalBorder ' />
                             </div>
                             <div>
                                 <span className='text-xs'>Enter your password</span>
-                                <Input type='password' placeholder='******' className='offsetEffect generalBorder' />
+                                <Input name='password' type='password' placeholder='******' className='offsetEffect generalBorder' />
                             </div>
                             <span className='text-xs'>
                                 by logging in you agree to our <u>terms and conditions</u>
                             </span>
-                            <Button className='bg-green-400 text-black hover:text-white offsetstyle generalBorder'>Login</Button>
+                            <Button type='submit' className='bg-green-400 text-black hover:text-white offsetstyle generalBorder'>Login</Button>
                         </form>
                     </div>
                     : <div>
                         <h2 className='font-bold text-3xl'>Register a new TAppIN account</h2>
                         <span>create a new account, enter the details below</span>
-                        <form action="" className='py-6 flex flex-col gap-3 lg:w-[50%]'>
+                        <form action={(e: FormData) => {
+                            const email = e.get("email")?.toString() ?? "";
+                            const password = e.get("password")?.toString() ?? "";
+                            const name = e.get("name")?.toString() ?? "";
+
+
+                            signUp({ email: email, password: password, address: publicKey?.toString() ?? "", name: name })
+
+                        }} className='py-6 flex flex-col gap-3 lg:w-[50%]'>
                             <div>
                                 <span className='text-xs'>Enter your email</span>
-                                <Input type='email' placeholder='[email protected]' className='offsetEffect generalBorder ' />
+                                <Input name='email' type='email' placeholder='[email protected]' className='offsetEffect generalBorder ' />
                             </div>
                             <div>
                                 <span className='text-xs'>Enter a username</span>
-                                <Input type='text' placeholder='alandoe123' className='offsetEffect generalBorder ' />
+                                <Input name='name' type='text' placeholder='alandoe123' className='offsetEffect generalBorder ' />
                             </div>
                             <div>
                                 <span className='text-xs'>Create your password</span>
-                                <Input type='password' placeholder='******' className='offsetEffect generalBorder' />
+                                <Input name='password' type='password' placeholder='******' className='offsetEffect generalBorder' />
                             </div>
                             <div>
                                 <span className='text-xs'>Re type your password</span>
@@ -59,7 +77,7 @@ export default function OnboardTabs() {
                             <span className='text-xs'>
                                 by creating a new account  you agree to our <u>terms and conditions</u>
                             </span>
-                            <Button className='bg-orange-400 text-black hover:text-white offsetstyle generalBorder'>Register</Button>
+                            <Button type='submit' className='bg-orange-400 text-black hover:text-white offsetstyle generalBorder'>Register</Button>
                         </form>
                     </div>}
             </div>

frontend/components/search/SearchWrapper.tsx

@@ -0,0 +1,25 @@
+"use client"
+import React from 'react'
+import { Input } from '../ui/input'
+import { Button } from '../ui/button'
+import ComputeCard from './cards/ComputeCard'
+
+export default function SearchWrapper() {
+    return (
+        <div className='px-[5%]'>
+            <div className='w-full generalBorder offsetEffect bg-yellow-300'>
+                <h2 className='text-3xl font-bold'>Available compute</h2>
+                <span>Here is the compute you have to access from our providers</span>
+            </div>
+            <div className='py-4'>
+                <div className='flex items-center gap-4'>
+                    <Input className='generalTabsBorder offsetEffect w-[40%]' placeholder='search for compute' /> <Button className='generalTabsBorder offsetstyle bg-orange-800'>Filter</Button>
+                </div>
+            </div>
+            <div className='grid grid-cols-4 gap-4'>
+                <ComputeCard props={{ activity: 4, cpu: "4/24GB", gpu: "1/15GB", id: "9iisjkjJHHH98j", name: "tappin.dip98", space: "0.003/24TB" }} />
+                <ComputeCard props={{ activity: 2, cpu: "20/32GB", gpu: "2/35GB", id: "9iisjkjJHHH98j", name: "tappin.amit78", space: "0.13/64TB" }} />
+            </div>
+        </div>
+    )
+}

frontend/components/search/cards/ComputeCard.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button';
+import { SpecsCard } from '@/constants/images/models/specscard.model'
+import { Rocket } from 'lucide-react';
+import React from 'react'
+
+interface Props {
+    props: SpecsCard;
+}
+export default function ComputeCard({ props }: Props) {
+    return (
+        <div className='offsetstyle p-4 border  gap-2 border-black rounded-md bg-green-300'>
+            <div className='grid grid-cols-2 gap-2'>
+                <div className='flex flex-col '>
+                    <span className='text-xs text-gray-600'>Device name</span>
+                    <h1 className='text-xl font-medium'>{props.name}</h1>
+                </div>
+                <div className='flex flex-col'>
+                    <span className='text-xs text-gray-600'>Available CPU</span>
+                    <h1 className='text-xl font-medium'>{props.cpu}</h1>
+                </div>
+                <div className='flex flex-col'>
+                    <span className='text-xs text-gray-600'>Available GPU</span>
+                    <h1 className='text-xl font-medium'>{props.gpu}</h1>
+                </div>
+                <div className='flex flex-col'>
+                    <span className='text-xs text-gray-600'>Available space</span>
+                    <h1 className='text-xl font-medium'>{props.space}</h1>
+                </div>
+                <div className='flex flex-col'>
+                    <span className='text-xs text-gray-600'>Instances</span>
+                    <h1 className='text-xl font-medium'>{props.activity}</h1>
+                </div>
+            </div>
+            <div className='pt-2'>
+                <Button className='generalBorder flex items-center gap-2 offsetstyle w-full'>Launch <Rocket size={15} /></Button>
+            </div>
+        </div>
+    )
+}

frontend/package.json

@@ -15,6 +15,7 @@
     "@solana/wallet-adapter-react-ui": "^0.9.35",
     "@solana/wallet-adapter-wallets": "^0.19.32",
     "@solana/web3.js": "^1.93.4",
+    "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.399.0",