Skip to content

Commit 2cba494

Browse files
DengreSarthakDengreSarthak
authored
Merge pull request #4 from StabilityNexus/InitialFrontend
Integrated and Updated the frontend with the contracts.
2 parents 9377f20 + 877fff0 commit 2cba494

21 files changed

Lines changed: 9797 additions & 2141 deletions

‎app/[oracleId]/InteractionClient.tsx‎

Lines changed: 476 additions & 68 deletions
Large diffs are not rendered by default.

‎app/[oracleId]/page.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
11
import { notFound } from 'next/navigation'
22
import InteractionClient from './InteractionClient'
33
import { Suspense } from 'react'
4-
import { mockOracles } from '@/lib/mock-data'
5-
6-
interface OraclePageProps {
7-
params: {
8-
oracleId: string
9-
}
10-
}
114

125
export async function generateStaticParams() {
13-
return mockOracles.map((oracle) => ({
14-
oracleId: oracle.id,
15-
}))
6+
return [{ oracleId: 'o' }]
167
}
178

18-
export default function VaultPage({ params }: OraclePageProps) {
9+
export default function OraclePage() {
1910
return (
2011
<Suspense>
21-
<InteractionClient oracleId={params.oracleId} />
12+
<InteractionClient />
2213
</Suspense>
2314
)
2415
}

‎app/create/page.tsx‎

Lines changed: 7 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,18 @@
11
import { Navigation } from "@/components/navigation"
2-
import { CreateOracleForm } from "@/components/create-oracle-form"
3-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
4-
import { Badge } from "@/components/ui/badge"
5-
import { Zap, Shield, Database, Clock } from "lucide-react"
2+
import CreateOracleIntegrated from "@/components/createOracle"
63

74
export default function CreatePage() {
85
return (
9-
<div className="min-h-screen bg-background">
6+
<div className="min-h-screen bg-background font-[oblique] tracking-wide" style={{ fontStyle: 'oblique 12deg' }}>
107
<Navigation />
11-
12-
<div className="container mx-auto px-4 py-8">
13-
{/* Header */}
8+
<div className="container mx-auto px-4 py-8 mt-12">
149
<div className="mb-8 text-center">
15-
<h1 className="text-4xl font-bold mb-4">Create Your Oracle</h1>
16-
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
17-
Deploy a custom oracle to connect real-world data to blockchain applications
10+
<h1 className="text-4xl text-slate-200 mb-2 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Create Oracle</h1>
11+
<p className="text-slate-200 text-xl max-w-3xl mx-auto">
12+
Deploy the on‑chain Oracle contract by providing the exact constructor parameters.
1813
</p>
1914
</div>
20-
21-
<div className="grid lg:grid-cols-4 gap-8">
22-
{/* Main Form */}
23-
<div className="lg:col-span-3">
24-
<CreateOracleForm />
25-
</div>
26-
27-
{/* Sidebar */}
28-
<div className="space-y-6">
29-
{/* Benefits */}
30-
<Card className="border-border bg-card">
31-
<CardHeader>
32-
<CardTitle className="text-lg">Why Create an Oracle?</CardTitle>
33-
</CardHeader>
34-
<CardContent className="space-y-4">
35-
<div className="flex items-start gap-3">
36-
<div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
37-
<Zap className="h-4 w-4 text-primary" />
38-
</div>
39-
<div>
40-
<h4 className="font-semibold text-sm">Monetize Data</h4>
41-
<p className="text-xs text-muted-foreground">Earn fees from every data request</p>
42-
</div>
43-
</div>
44-
45-
<div className="flex items-start gap-3">
46-
<div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
47-
<Shield className="h-4 w-4 text-primary" />
48-
</div>
49-
<div>
50-
<h4 className="font-semibold text-sm">Secure & Reliable</h4>
51-
<p className="text-xs text-muted-foreground">Built-in validation and redundancy</p>
52-
</div>
53-
</div>
54-
55-
<div className="flex items-start gap-3">
56-
<div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
57-
<Database className="h-4 w-4 text-primary" />
58-
</div>
59-
<div>
60-
<h4 className="font-semibold text-sm">Multi-Chain</h4>
61-
<p className="text-xs text-muted-foreground">Deploy across multiple blockchains</p>
62-
</div>
63-
</div>
64-
65-
<div className="flex items-start gap-3">
66-
<div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
67-
<Clock className="h-4 w-4 text-primary" />
68-
</div>
69-
<div>
70-
<h4 className="font-semibold text-sm">Real-time Updates</h4>
71-
<p className="text-xs text-muted-foreground">Configurable update frequencies</p>
72-
</div>
73-
</div>
74-
</CardContent>
75-
</Card>
76-
77-
{/* Popular Categories */}
78-
<Card className="border-border bg-card">
79-
<CardHeader>
80-
<CardTitle className="text-lg">Popular Categories</CardTitle>
81-
<CardDescription>Most requested oracle types</CardDescription>
82-
</CardHeader>
83-
<CardContent>
84-
<div className="flex flex-wrap gap-2">
85-
<Badge variant="secondary" className="text-xs">
86-
Price Feeds
87-
</Badge>
88-
<Badge variant="secondary" className="text-xs">
89-
Weather
90-
</Badge>
91-
<Badge variant="secondary" className="text-xs">
92-
Sports
93-
</Badge>
94-
<Badge variant="secondary" className="text-xs">
95-
Randomness
96-
</Badge>
97-
<Badge variant="secondary" className="text-xs">
98-
IoT Sensors
99-
</Badge>
100-
<Badge variant="secondary" className="text-xs">
101-
Market Data
102-
</Badge>
103-
</div>
104-
</CardContent>
105-
</Card>
106-
107-
{/* Deployment Info */}
108-
<Card className="border-border bg-card">
109-
<CardHeader>
110-
<CardTitle className="text-lg">Deployment Details</CardTitle>
111-
</CardHeader>
112-
<CardContent className="space-y-3 text-sm">
113-
<div className="flex justify-between">
114-
<span className="text-muted-foreground">Base Fee:</span>
115-
<span className="font-semibold">0.05 ETH</span>
116-
</div>
117-
<div className="flex justify-between">
118-
<span className="text-muted-foreground">Gas Estimate:</span>
119-
<span className="font-semibold">~$25</span>
120-
</div>
121-
<div className="flex justify-between">
122-
<span className="text-muted-foreground">Deploy Time:</span>
123-
<span className="font-semibold">2-5 minutes</span>
124-
</div>
125-
<div className="flex justify-between">
126-
<span className="text-muted-foreground">Revenue Share:</span>
127-
<span className="font-semibold">95% to you</span>
128-
</div>
129-
</CardContent>
130-
</Card>
131-
132-
{/* Support */}
133-
<Card className="border-border bg-card">
134-
<CardHeader>
135-
<CardTitle className="text-lg">Need Help?</CardTitle>
136-
</CardHeader>
137-
<CardContent className="text-sm space-y-2">
138-
<p className="text-muted-foreground">Check our documentation or join our Discord for support.</p>
139-
<div className="flex flex-col gap-2">
140-
<a href="#" className="text-primary hover:underline">
141-
View Documentation
142-
</a>
143-
<a href="#" className="text-primary hover:underline">
144-
Join Discord
145-
</a>
146-
<a href="#" className="text-primary hover:underline">
147-
Example Oracles
148-
</a>
149-
</div>
150-
</CardContent>
151-
</Card>
152-
</div>
153-
</div>
15+
<CreateOracleIntegrated />
15416
</div>
15517
</div>
15618
)

‎app/explorer/page.tsx‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@ import { Navigation } from "@/components/navigation"
55
import { OracleCard } from "@/components/oracle-card"
66
import { Input } from "@/components/ui/input"
77
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
8-
import { mockOracles, categories, chains } from "@/lib/mock-data"
9-
import { Search } from "lucide-react"
8+
import { useOracles } from "@/hooks/useOracles"
9+
import { Search, Loader2 } from "lucide-react"
1010

1111
export default function ExplorerPage() {
1212
const [searchQuery, setSearchQuery] = useState("")
1313
const [selectedCategory, setSelectedCategory] = useState("All Categories")
14+
const { oracles, loading, error } = useOracles()
15+
16+
const categories = ["All Categories", "Price Feed", "Weather", "Sports", "Custom"]
1417

1518
const filteredOracles = useMemo(() => {
16-
return mockOracles.filter((oracle) => {
19+
return oracles.filter((oracle) => {
1720
const matchesSearch =
1821
oracle.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
1922
oracle.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -23,16 +26,16 @@ export default function ExplorerPage() {
2326

2427
return matchesSearch && matchesCategory && oracle.status === "active"
2528
})
26-
}, [searchQuery, selectedCategory])
29+
}, [oracles, searchQuery, selectedCategory])
2730

2831
return (
29-
<div className="min-h-screen bg-background">
32+
<div className="min-h-screen bg-background font-[oblique] tracking-wide" style={{ fontStyle: 'oblique 12deg' }}>
3033
<Navigation />
3134

3235
<div className="container mx-auto px-6 pt-24 pb-12">
3336
{/* Header */}
3437
<div className="mb-12 text-center">
35-
<h1 className="text-5xl font-bold tracking-tight mb-6 bg-gradient-to-r from-white to-primary bg-clip-text text-transparent">
38+
<h1 className="text-5xl font-bold tracking-wide mb-6 bg-gradient-to-r from-white to-primary bg-clip-text text-transparent" style={{ fontStyle: 'oblique 15deg' }}>
3639
Orb Oracle Explorer
3740
</h1>
3841
</div>
@@ -65,17 +68,52 @@ export default function ExplorerPage() {
6568
</div>
6669

6770
{/* Oracle Grid */}
68-
{filteredOracles.length > 0 ? (
71+
{loading ? (
72+
<div className="text-center py-20">
73+
<Loader2 className="h-16 w-16 mx-auto mb-6 animate-spin text-primary" />
74+
<p className="text-xl font-light text-slate-200 mb-8">
75+
Loading oracles from blockchain...
76+
</p>
77+
</div>
78+
) : error ? (
79+
<div className="text-center py-20">
80+
<div className="text-red-500 mb-6">
81+
<Search className="h-16 w-16 mx-auto mb-4 opacity-50" />
82+
</div>
83+
<p className="text-xl font-light text-red-400 mb-8">
84+
{error}
85+
</p>
86+
<p className="text-sm text-slate-400 mb-4">
87+
Make sure you're connected to the correct network and the Oracle Factory is deployed.
88+
</p>
89+
</div>
90+
) : filteredOracles.length > 0 ? (
6991
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-8 max-w-7xl mx-auto">
7092
{filteredOracles.map((oracle) => (
7193
<OracleCard key={oracle.id} oracle={oracle} />
7294
))}
7395
</div>
96+
) : oracles.length === 0 ? (
97+
<div className="text-center py-20">
98+
<Search className="h-16 w-16 mx-auto mb-6 opacity-30" />
99+
<p className="text-xl font-light text-slate-200 mb-8">
100+
No oracles deployed yet
101+
</p>
102+
<p className="text-sm text-slate-400 mb-8">
103+
Be the first to create an oracle on this network!
104+
</p>
105+
<a
106+
href="/create"
107+
className="text-primary hover:text-primary/80 transition-colors font-medium"
108+
>
109+
Create Oracle
110+
</a>
111+
</div>
74112
) : (
75113
<div className="text-center py-20">
76114
<Search className="h-16 w-16 mx-auto mb-6 opacity-30" />
77-
<p className="text-xl font-light text-muted-foreground mb-8">
78-
No active oracles found
115+
<p className="text-xl font-light text-slate-200 mb-8">
116+
No oracles match your search
79117
</p>
80118
<button
81119
onClick={() => {

‎app/layout.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import type React from "react"
2-
import type { Metadata } from "next"
3-
import { GeistSans } from "geist/font/sans"
4-
import { GeistMono } from "geist/font/mono"
5-
import { Analytics } from "@vercel/analytics/next"
6-
import { Suspense } from "react"
7-
import "./globals.css"
1+
2+
3+
import '@rainbow-me/rainbowkit/styles.css'
4+
import './globals.css'
5+
import { Metadata } from 'next'
6+
import { Inter } from 'next/font/google'
7+
import { ThemeProvider } from '@/providers/ThemeProvider'
8+
import { WalletProvider } from '@/providers/WalletProvider'
9+
10+
const inter = Inter({ subsets: ['latin'] })
811

912
export const metadata: Metadata = {
10-
title: "OracleNet - Decentralized Oracle Platform",
11-
description:
12-
"Build, deploy, and manage decentralized oracles that connect real-world data to blockchain applications",
13-
generator: "v0.app",
13+
title: 'Raindrop',
14+
description: 'Generated by create next app',
1415
}
1516

1617
export default function RootLayout({
@@ -19,11 +20,21 @@ export default function RootLayout({
1920
children: React.ReactNode
2021
}>) {
2122
return (
22-
<html lang="en" className="dark">
23-
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
24-
<Suspense fallback={null}>{children}</Suspense>
25-
<Analytics />
23+
<html lang='en'>
24+
<body className={inter.className}>
25+
<WalletProvider>
26+
<ThemeProvider
27+
attribute='class'
28+
defaultTheme='system'
29+
enableSystem
30+
disableTransitionOnChange
31+
>
32+
<main className="min-h-screen flex flex-col">
33+
{children}
34+
</main>
35+
</ThemeProvider>
36+
</WalletProvider>
2637
</body>
2738
</html>
2839
)
29-
}
40+
}

‎app/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Orb from "@/components/Orb"
77

88
export default function HomePage() {
99
return (
10-
<div className="min-h-screen bg-background">
10+
<div className="min-h-screen bg-background font-[oblique] tracking-wide" style={{ fontStyle: 'oblique 12deg' }}>
1111
{/* <SplashCursor /> */}
1212
<Navigation />
1313

@@ -41,7 +41,7 @@ export default function HomePage() {
4141
</div>
4242
<div className="container mx-auto px-4 text-center z-10 relative">
4343
<div className="max-w-4xl mx-auto">
44-
<h1 className="text-4xl md:text-5xl font-bold mb-8 text-balance">
44+
<h1 className="text-4xl md:text-5xl font-medium mb-8 text-balance tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>
4545
Orb Oracle:
4646
<div><span className="text-primary">The Price of Everything</span></div>
4747
</h1>
@@ -63,7 +63,7 @@ export default function HomePage() {
6363
<section className="h-screen flex items-center justify-center">
6464
<div className="container mx-auto px-4">
6565
<div className="text-center mb-16">
66-
<h2 className="text-3xl md:text-4xl font-bold mb-4">Why choose OracleNet?</h2>
66+
<h2 className="text-3xl md:text-4xl font-bold mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Why choose OracleNet?</h2>
6767
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
6868
Enterprise-grade infrastructure for the next generation of decentralized applications
6969
</p>
@@ -137,7 +137,7 @@ export default function HomePage() {
137137
<section className="h-screen flex items-center justify-center">
138138
<div className="container mx-auto px-4 text-center">
139139
<div className="max-w-2xl mx-auto">
140-
<h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to build the future?</h2>
140+
<h2 className="text-3xl md:text-4xl font-bold mb-6 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Ready to build the future?</h2>
141141
<p className="text-xl text-muted-foreground mb-8">
142142
Join thousands of developers building the next generation of decentralized applications
143143
</p>

0 commit comments

Comments
 (0)