Add council and pool contract links to frontend

BlossomLabs · Sep 23, 2024 · d94383e · d94383e
1 parent 56136ca
commit d94383e
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 5 deletions.
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
           <ToastProvider>
             <div className="flex flex-col min-h-screen">
               <Header />
-              <main className="flex-grow px-4 container max-w-3xl mx-auto">
+              <main className="flex-grow container max-w-4xl mx-auto">
                 {children}
               </main>
               <Toaster />

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { Badge } from "@repo/ui/components/ui/badge";
+import { Label } from "@repo/ui/components/ui/label";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { getAddress } from "viem";
@@ -34,10 +37,16 @@ export default function Page() {
 
   return (
     <main>
-      <CouncilName
-        name={councilData?.councilName}
-        className="h-12 text-4xl font-bold mb-4 text-accent"
-      />
+      <ContractLinks council={council} pool={councilData?.pool} />
+      <Link
+        href={`https://explorer.superfluid.finance/optimism-mainnet/accounts/${council}?tab=pools`}
+        target="_blank"
+      >
+        <CouncilName
+          name={councilData?.councilName}
+          className="h-12 text-4xl font-bold mb-4 text-accent"
+        />
+      </Link>
       <VotingCard
         className="max-w-lg mx-auto"
         council={council}
@@ -50,3 +59,30 @@ export default function Page() {
     </main>
   );
 }
+
+function ContractLinks({
+  council,
+  pool,
+}: { council: string | undefined; pool: string | undefined }) {
+  return (
+    <div className="flex flex-row gap-1 mb-4 items-center justify-end">
+      <Label className="pr-2">Contracts: </Label>
+      <Badge variant="outline">
+        <Link
+          href={`https://explorer.optimism.io/address/${council}`}
+          target="_blank"
+        >
+          Council
+        </Link>
+      </Badge>
+      <Badge variant="outline">
+        <Link
+          href={`https://explorer.optimism.io/address/${pool}`}
+          target="_blank"
+        >
+          Pool
+        </Link>
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/web/src/hooks/useCouncil.ts b/apps/web/src/hooks/useCouncil.ts
@@ -8,6 +8,7 @@ export const useCouncil = (council: `0x${string}` | undefined) => {
       query CouncilNameAndGrantees($council: String) {
         council(id: $council) {
           councilName
+          pool
           grantees {
             name
             account
@@ -20,6 +21,7 @@ export const useCouncil = (council: `0x${string}` | undefined) => {
       councilName: string;
       grantees: { name: string; account: `0x${string}` }[];
       maxAllocationsPerMember: number;
+      pool: string;
     };
   }>({
     queryKey: ["data"],

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -20,6 +20,7 @@
     "typescript": "^5"
   },
   "dependencies": {
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.2.1",
     "class-variance-authority": "^0.7.0",

diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };