Skip to content

Commit

Permalink
Merge pull request #54 from Praashh/fe/optimization
Browse files Browse the repository at this point in the history
Fe Optimization + Engine Testing init
  • Loading branch information
Praashh authored Oct 22, 2024
2 parents 4ae55b1 + a767be4 commit 410c673
Show file tree
Hide file tree
Showing 35 changed files with 2,785 additions and 522 deletions.
12 changes: 1 addition & 11 deletions apps/client/actions/Event/getEventDetails.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,7 @@ export async function getEventDetails(eventId: string) {
const event = await prisma.event.findUnique({
where: {
id: eventId,
},
include: {
orderBook: {
include: {
yes: true,
no: true,

},
},
},
});
}});

if (!event) {
throw new Error("Event not found");
Expand Down
9 changes: 2 additions & 7 deletions apps/client/actions/OTP/sendOtp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@ const twilioClient = twilio(
export const sendSMSOTP = async (phoneNumber: string) => {
if(phoneNumber.length <= 10)return { success: false, message: "Failed to update OTP" };
try {
const OTP = Math.floor(1000 + Math.random() * 9000).toString();
const OTP = Math.floor(100000 + Math.random() * 9000).toString();

// Check if OTP already exists
const isOtpDataExists = await prisma.oTP.findUnique({
where: { otpID: phoneNumber },
});
console.log("isOtpDataExists", isOtpDataExists);

if (isOtpDataExists) {
// Update existing OTP
Expand All @@ -27,13 +26,11 @@ export const sendSMSOTP = async (phoneNumber: string) => {
expiresAt: new Date(Date.now() + 10 * 60 * 1000)
},
});
console.log("updateOtp", updateOtp);

if (!updateOtp) {
return { success: false, message: "Failed to update OTP" };
} else {
const res = await sendTwillioMsg(OTP, phoneNumber)
console.log("res in update", res)
return res;
}
} else {
Expand All @@ -45,13 +42,11 @@ export const sendSMSOTP = async (phoneNumber: string) => {
expiresAt: new Date(Date.now() + 10 * 60 * 1000),
},
});
console.log("newOTP", newOTP);

if (!newOTP) {
return { success: false, message: "Failed to create OTP" };
}
const res = await sendTwillioMsg(OTP, phoneNumber)
console.log("res in new otp", res)
return res;
}
} catch (error) {
Expand All @@ -68,7 +63,7 @@ async function sendTwillioMsg(OTP: string, phoneNumber: string) {
from: process.env.TWILIO_NUMBER,
to: phoneNumber,
});
console.log(message);
console.log(message); // just to get rid of linting error

return { success: true, message: "send OTP" };
} catch (error) {
Expand Down
2 changes: 1 addition & 1 deletion apps/client/actions/OTP/validateOtp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const verifySMSOTPAction = async (otp: string, phoneNumber: string) => {
otp,
},
});
console.log(otpData);
// console.log("otpData", otpData);
if(otpData?.isVerified){
return { verified: true, message: "User Already Exists" };
}
Expand Down
2 changes: 1 addition & 1 deletion apps/client/app/(lobby)/auth/signin/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client"
import { Login } from '@/components/landing/Auth/Singin';
import React from 'react';
import { Login } from '../../../../components/landing/Auth/Singin';

const Page = () => {
return (
Expand Down
2 changes: 2 additions & 0 deletions apps/client/app/(lobby)/wallet/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ const Page = () => {
<WalletCards
icon="/assets/wallet-deposit.png"
name="Deposit"
url="/wallet/deposit"
amount={0}
btnName="Recharge"
btnOnClick={() => {}}
/>
<WalletCards
icon="/assets/wallet-withdraw.png"
name="Withdraw"
url="/wallet/withdraw"
amount={0}
btnName="Withdraw"
btnOnClick={() => {}}
Expand Down
9 changes: 9 additions & 0 deletions apps/client/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -130,4 +130,13 @@ body{
}
html {
@apply bg-gray-100;
}

.no-scrollbar::-webkit-scrollbar {
display: none;
}

.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
8 changes: 4 additions & 4 deletions apps/client/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { SessionProviders } from "@/providers/session-provider";
import Navbar from "@/components/landing/Appbar/Navbar";
import { Toaster } from "react-hot-toast";
import { Providers } from "@/providers/_provider";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
Expand Down Expand Up @@ -31,10 +31,10 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<SessionProviders>
<Navbar />
<Providers>
<Navbar />
{children}
</SessionProviders>
</Providers>
<Toaster position="top-center" reverseOrder={false} />
</body>
</html>
Expand Down
35 changes: 6 additions & 29 deletions apps/client/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,12 @@
import { HeroComp } from "@/components/landing/Home/HeroComp";
import ToggleSections from "@/components/landing/Home/ToogleSections";
import { TradeComp } from "@/components/landing/Home/TradeComp";
import { DownloadBanner } from "@/components/landing/Home/DownloadBanner";
import TradingNewsComponent from "@/components/landing/Home/TradingNewsComponent";
import FeatureComponent from "@/components/landing/Home/Features";
import ProboCare from "@/components/landing/Home/ProboCare";
"use client"
import HomeWrapper from "@/components/landing/Home/HomeWrapper";
// import TradePage from "@/components/landing/EventTrade/Trade";

export default function Page() {
return (
<div className="w-screen">
<main className="container mx-auto">
<HeroComp />
</main>
<div >
<ToggleSections />
</div>
<div>
<TradeComp />
</div>
<div>
<FeatureComponent />
</div>
<div>
<ProboCare />
</div>
<div>
<TradingNewsComponent />
</div>
<div>
<DownloadBanner />
</div>
<div>
<HomeWrapper/>
{/* <TradePage eventId="jbdjfdf"/> */}
</div>
);
}
6 changes: 3 additions & 3 deletions apps/client/components/landing/Appbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,12 @@ export const Navbar = () => {
);

return (
<nav className="py-3 px-2 border">
<div className="container mx-auto flex items-center justify-between">
<nav className="py-3 px-2 border sticky top-0 z-50 bg-gray-100">
<div className="container mx-auto flex items-center justify-between sticky">
{/* Logo */}
<div className="flex items-center">
<Link href={"/"}>
<button onClick={() => {}}>
<button onClick={() => { }}>
<div className="text-2xl font-semibold mr-5">OpiniX</div>
</button>
</Link>
Expand Down
76 changes: 20 additions & 56 deletions apps/client/components/landing/Auth/Singin.tsx
Original file line number Diff line number Diff line change
@@ -1,67 +1,32 @@
"use client"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import login from "@/public/login.png"
"use client";
import Image from "next/image";
import login from "@/public/login.png";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useState } from "react"
import { InputOTPForm } from "@/components/ui/OtpVerificationForm"
import { sendSMSOTP } from "@/actions/OTP/sendOtp"
import { LoaderCircle } from "lucide-react"
import {toast, Toaster} from "react-hot-toast";
import { useState } from "react";
import { InputOTPForm } from "@/components/ui/OtpVerificationForm";
import SigninInputForm from "@/components/ui/signin-input-form";

export function Login() {
const [showOTP, setShowOTP] = useState<boolean>(false);
const [phone, setPhone] = useState<string>("");
const [showOtp, setShowOtp] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(false);

async function handleSubmit() {
setIsLoading(true);

if (phone.length !== 10) {
toast.error("Incorrect Phone!");
setPhone('')
return;
}
// TODO: not a good way, need to fix it.
const isOtpSent = await sendSMSOTP(`+91${phone}`);

if(isOtpSent.success){
toast.success("OTP Sent!");
}else{
toast.error("Error while sending OTP, Please check your phone number");
}
setShowOtp(true);
}
const phonePrefix = process.env.NEXT_PUBLIC_PHONE_NO_PREFIX;

return (
<div className="w-full lg:grid lg:min-h-[600px] h-screen lg:grid-cols-2 xl:min-h-[800px]">
<div className="flex items-center justify-center h-screen">
<Card className="w-full max-w-md">
<Card className="w-full max-w-lg bg-white">
<CardHeader>
<CardTitle className="text-2xl text-center font-bold">{showOtp ? "Enter your OTP" : "Enter your mobile number"}</CardTitle>
<CardTitle className="text-2xl text-center font-bold">
{!showOTP ? "Enter your mobile number" : "Enter 6 digit OTP"}
</CardTitle>
</CardHeader>
<CardContent>
{showOtp ? <div className="w-full flex flex-col justify-center items-center">
<InputOTPForm phoneNumber={`+91${phone}`}/>
</div> : <> <p className="text-sm text-gray-500 mb-4">We will send you an OTP</p>
<div className="flex mb-4">
<Input
className="w-16 mr-2"
type="text"
value="+91"
disabled
/>
<Input
className="flex-grow"
type="tel"
placeholder="Phone number"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>
<Button className="w-full mb-4 bg-black text-white" onClick={handleSubmit} disabled={isLoading ? true : false}>{!isLoading ? "Get OTP" : <LoaderCircle className="animate-spin"/> }</Button></>}
{
!showOTP ? <SigninInputForm setShowOTP={setShowOTP} setphonePhone={setPhone} /> : <InputOTPForm phoneNumber={phonePrefix + phone} />
}
<p className="text-xs text-gray-500 mt-5">
By continuing, you accept that you are 18+ years of age & agree to the{' '}
By continuing, you accept that you are 18+ years of age & agree to
the{" "}
<a href="#" className="text-blue-500 hover:underline">
Terms and Conditions
</a>
Expand All @@ -80,7 +45,6 @@ export function Login() {
/>
</div>
</div>
<Toaster position="top-center"/>
</div>
)
}
);
}
99 changes: 99 additions & 0 deletions apps/client/components/landing/EventTrade/BidCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

const BidCard = () => {
const [side, setSide] = useState<"yes" | "no">("yes");
const [tradePrice, setTradePrice] = useState("");
const [tradeQuantity, setTradeQuantity] = useState("");

useEffect(() => {
async function fetchInitialData() {}
fetchInitialData();
}, []);

async function handleTrade() {}

return (
<Card className="bg-white border md:fixed md:right-10 md:w-[30%]">
<CardHeader>
<CardTitle className="">Place Order</CardTitle>
</CardHeader>
<CardContent>
<div className="flex justify-between mb-4">
<Button
variant={side === "yes" ? "default" : "outline"}
onClick={() => setSide("yes")}
className={`bg-blue-500 text-white hover:bg-blue-600 ${
side === "yes" ? "ring-2 ring-blue-400" : ""
}`}
>
Yes ₹{5}
</Button>
<Button
variant={side === "no" ? "default" : "outline"}
onClick={() => setSide("no")}
className={`bg-red-500 text-white hover:bg-red-600 ${
side === "no" ? "ring-2 ring-red-400" : ""
}`}
>
No ₹{5}
</Button>
</div>
<div className="space-y-4">
<div>
<label htmlFor="trade-price" className="block text-sm font-medium ">
Price
</label>
<Input
id="trade-price"
type="number"
value={tradePrice}
onChange={(e) => setTradePrice(e.target.value)}
className="mt-1 "
/>
<p className="text-sm text-gray-400">0 qty available</p>
</div>
<div>
<label
htmlFor="trade-quantity"
className="block text-sm font-medium "
>
Quantity
</label>
<Input
id="trade-quantity"
type="number"
value={tradeQuantity}
onChange={(e) => setTradeQuantity(e.target.value)}
className="mt-1 "
/>
</div>
<div className="flex justify-between">
<div>
<p className="text-lg font-bold">{5}</p>
<p className="text-sm text-gray-400">You put</p>
</div>
<div>
<p className="text-lg font-bold text-green-500">{5 + 5 - 3}</p>
<p className="text-sm text-gray-400">You get</p>
</div>
</div>
<Button
onClick={handleTrade}
className={`w-full text-white ${
side === "yes"
? "bg-blue-500 hover:bg-blue-600"
: "bg-red-500 hover:bg-red-600"
}`}
>
Place order
</Button>
</div>
</CardContent>
</Card>
);
};

export default BidCard;
Loading

0 comments on commit 410c673

Please sign in to comment.