Bernard karaba | Register for OpenGuild Sub0 Challenges

challenge-3-frontend/app/page.tsx

@@ -1,110 +1,107 @@
-import Image from "next/image";
-import Link from "next/link";
+// pages/yield-farming.tsx
+'use client';
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+
+export default function YieldFarming() {
+  const [stakeAmount, setStakeAmount] = useState("");
+  const [withdrawAmount, setWithdrawAmount] = useState("");
+  const isAdmin = true; // simulate admin check
 
-export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <div className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          src="/og-logo.png"
-          alt="OpenGuild logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <p>Get started by checking out the demos</p>
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            <Link href="/wallet">Wallet</Link>
-          </li>
-          <li className="mb-2">
-            <Link href="/send-transaction">Send transaction</Link>
-          </li>
-          <li className="mb-2">
-            <Link href="/write-contract">Write contract</Link>
-          </li>
-          <li className="mb-2">
-            <Link href="/mint-redeem-lst-bifrost">Mint/Redeem LST Bifrost</Link>
-          </li>
-        </ol>
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://github.com/buildstationorg/dotui"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://github.com/buildstationorg/dotui/tree/main/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </div>
-      <footer className="row-start-3 flex flex-col gap-4">
-        <div className="flex gap-6 flex-wrap items-center justify-center">
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://github.com/buildstationorg/dotui/tree/main/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/file.svg"
-              alt="File icon"
-              width={16}
-              height={16}
-            />
-            Learn
-          </a>
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://github.com/buildstationorg/dotui/tree/main/components"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/window.svg"
-              alt="Window icon"
-              width={16}
-              height={16}
-            />
-            Components
-          </a>
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://openguild.wtf"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/globe.svg"
-              alt="Globe icon"
-              width={16}
-              height={16}
-            />
-            Go to openguild.wtf →
-          </a>
-        </div>
-        <div className="text-sm text-muted-foreground">
-          Maintained by <a className="underline underline-offset-4" href="https://buildstation.org" target="_blank" rel="noopener noreferrer">buildstation.org</a> with support from <a className="underline underline-offset-4" href="https://openguild.wtf" target="_blank" rel="noopener noreferrer">OpenGuild</a>
-        </div>
-      </footer>
+    <div className="p-8 grid gap-8 max-w-5xl mx-auto font-sans">
+      {/* Stake Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Stake Your Tokens</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <Input
+            placeholder="Amount to stake"
+            value={stakeAmount}
+            onChange={(e) => setStakeAmount(e.target.value)}
+          />
+          <Button>Stake</Button>
+          <p className="text-sm text-muted-foreground">LP Token Balance: 120.5</p>
+          <p className="text-sm text-muted-foreground">Estimated APR: 18.25%</p>
+        </CardContent>
+      </Card>
+
+      {/* Rewards Dashboard */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Rewards Dashboard</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <p className="text-lg font-semibold">Pending Rewards: 42.00</p>
+          <Button>Claim Rewards</Button>
+          <p className="text-sm text-muted-foreground">Staking Duration: 12 days</p>
+          <div className="flex items-center gap-2">
+            <span className="text-xs">Progress to 30-day boost:</span>
+            <Progress value={40} className="w-full" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Withdraw Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Withdraw Tokens</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <Input
+            placeholder="Amount to withdraw"
+            value={withdrawAmount}
+            onChange={(e) => setWithdrawAmount(e.target.value)}
+          />
+          <Button>Withdraw</Button>
+          <p className="text-sm text-muted-foreground">Currently Staked: 250.00</p>
+        </CardContent>
+      </Card>
+
+      {/* Emergency Withdraw */}
+      <Card className="border-red-500">
+        <CardHeader>
+          <CardTitle className="text-red-600">⚠ Emergency Withdraw</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <p className="text-sm text-red-500">
+            Use only if absolutely necessary. This action is irreversible and might forfeit rewards.
+          </p>
+          <Button variant="destructive">Emergency Withdraw</Button>
+        </CardContent>
+      </Card>
+
+      {/* Admin Panel */}
+      {isAdmin && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Admin Panel</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <p className="text-sm text-muted-foreground">Current Reward Rate: 2.5x</p>
+            <Input placeholder="New Reward Rate (e.g., 3.0)" />
+            <Button>Update Rate</Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Boost Multiplier Tracker */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Boost Multiplier</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <p className="text-lg font-semibold">Current Multiplier: 1.5x</p>
+          <div className="flex items-center gap-2">
+            <span className="text-xs">Progress to 2x:</span>
+            <Progress value={75} className="w-full" />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }

challenge-3-frontend/components/ui/card.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "@/lib/utils"; // use your utility function for merging classes
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-2xl border border-muted bg-background p-6 shadow-sm", className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mb-4", className)} {...props} />
+);
+
+const CardTitle = ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3 className={cn("text-lg font-semibold", className)} {...props} />
+);
+
+const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("space-y-4", className)} {...props} />
+);
+
+export { Card, CardHeader, CardTitle, CardContent };

challenge-3-frontend/components/ui/progress.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "@/lib/utils"; // make sure you have this utility
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, max = 100, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
+      {...props}
+    >
+      <div
+        className="h-full bg-primary transition-all"
+        style={{ width: `${(value / max) * 100}%` }}
+      />
+    </div>
+  )
+);
+
+Progress.displayName = "Progress";
+
+export { Progress };