feat: tally integration

app/(general)/integration/tally/[daoSlug]/[proposal]/page.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { ProposalDetails } from "@/integrations/tally/components/proposal-details"
+
+export default function Page({
+  params: { daoSlug, proposal },
+}: {
+  params: { daoSlug: string; proposal: string }
+}) {
+  return (
+    <ProposalDetails
+      daoSlug={decodeURIComponent(daoSlug)}
+      proposalId={decodeURIComponent(proposal)}
+    />
+  )
+}

app/(general)/integration/tally/[daoSlug]/delegates/page.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { DaoDelegations } from "@/integrations/tally/components/dao-delegations"
+
+export default function Page({
+  params: { daoSlug },
+}: {
+  params: { daoSlug: string }
+}) {
+  return <DaoDelegations slug={decodeURIComponent(daoSlug)} />
+}

app/(general)/integration/tally/[daoSlug]/page.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { Governor } from "@/integrations/tally/components/governor"
+
+export default function Page({
+  params: { daoSlug },
+}: {
+  params: { daoSlug: string }
+}) {
+  return <Governor slug={decodeURIComponent(daoSlug)} />
+}

app/(general)/integration/tally/[daoSlug]/proposals/page.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { DaoProposals } from "@/integrations/tally/components/dao-proposals"
+
+export default function Page({
+  params: { daoSlug },
+}: {
+  params: { daoSlug: string }
+}) {
+  return <DaoProposals slug={decodeURIComponent(daoSlug)} />
+}

app/(general)/integration/tally/api-key-form-gate.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { ReactNode } from "react"
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { useTally } from "@/integrations/tally/hooks/use-tally"
+
+export const ApiKeyFormGate = ({ children }: { children: ReactNode }) => {
+  const { apiKey, setApiKey } = useTally()
+  const formSchema = z.object({
+    apiKey: z.string().min(1),
+  })
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+  return apiKey ? (
+    <>
+      {children}
+      <Button
+        variant="outline"
+        className="mt-8"
+        onClick={() => setApiKey(null)}
+      >
+        Remove API key
+      </Button>
+    </>
+  ) : (
+    <Card>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit((values: z.infer<typeof formSchema>) =>
+            setApiKey(values.apiKey)
+          )}
+        >
+          <CardHeader>
+            <CardTitle>Set Tally API Key</CardTitle>
+            <CardDescription>
+              Please enter your Tally API key, if you don&apos;t have one, get
+              one from{" "}
+              <Link
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://www.tally.xyz/user/settings"
+              >
+                Tally
+              </Link>
+              .
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl className="input">
+                    <Input
+                      className="border bg-background text-muted-foreground"
+                      placeholder="Tally API key"
+                      {...field}
+                      {...form.register("apiKey")}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" className="w-full">
+              Set API key
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  )
+}

app/(general)/integration/tally/layout.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import React from "react"
+import Link from "next/link"
+import { turboIntegrations } from "@/data/turbo-integrations"
+import { LuBook } from "react-icons/lu"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import {
+  PageHeader,
+  PageHeaderCTA,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/layout/page-header"
+import { PageSection } from "@/components/layout/page-section"
+import { LightDarkImage } from "@/components/shared/light-dark-image"
+import { TallyProvider } from "@/integrations/tally/tally-provider"
+
+import { ApiKeyFormGate } from "./api-key-form-gate"
+
+interface LayoutProps {
+  children?: React.ReactNode
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <TallyProvider>
+      <div className="container relative mt-20">
+        <PageHeader className="pb-8">
+          <LightDarkImage
+            LightImage={turboIntegrations.tally.imgDark}
+            DarkImage={turboIntegrations.tally.imgLight}
+            alt="Tally Logo"
+            width={100}
+            height={100}
+          />
+          <PageHeaderHeading>{turboIntegrations.tally.name}</PageHeaderHeading>
+          <PageHeaderDescription>
+            Tally gives users real power in their decentralized organizations.
+            On Tally, users can delegate voting power, create or pass proposals
+            to spend DAO funds, manage a protocol, and upgrade smart
+            contracts—all onchain. Onchain governance is important, no matter
+            the chain. Tally supports DAOs on Ethereum, Polygon, Arbitrum,
+            Optimism, Avalanche, BNB Chain, Gnosis, Base, Moonbeam, and Scroll.
+          </PageHeaderDescription>
+          <PageHeaderCTA>
+            <Link
+              href={turboIntegrations.tally.url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className={cn(buttonVariants({ variant: "outline" }))}
+            >
+              <LuBook className="mr-2 h-4 w-4" />
+              Documentation
+            </Link>
+          </PageHeaderCTA>
+        </PageHeader>
+        <PageSection className="w-full">
+          <ApiKeyFormGate>{children}</ApiKeyFormGate>
+        </PageSection>
+      </div>
+    </TallyProvider>
+  )
+}

app/(general)/integration/tally/opengraph-image.tsx

@@ -0,0 +1,9 @@
+import { IntegrationOgImage } from "@/components/ui/social/og-image-integrations"
+
+export const runtime = "edge"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export default IntegrationOgImage("arweave")

app/(general)/integration/tally/page.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { ExploreGovernors } from "@/integrations/tally/components/explore-governors"
+
+export default function Page() {
+  return <ExploreGovernors />
+}

app/(general)/integration/tally/twitter-image.tsx

@@ -0,0 +1,9 @@
+import Image from "./opengraph-image"
+
+export const runtime = "edge"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export default Image

components/shared/example-demos.tsx

@@ -520,6 +520,22 @@ const demos = [
       </div>
     ),
   },
+  {
+    title: turboIntegrations.tally.name,
+    description: turboIntegrations.tally.description,
+    href: turboIntegrations.tally.href,
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <LightDarkImage
+          LightImage={turboIntegrations.tally.imgDark}
+          DarkImage={turboIntegrations.tally.imgLight}
+          alt="Tally logo"
+          height={100}
+          width={100}
+        />
+      </div>
+    ),
+  },
   {
     title: turboIntegrations.starter.name,
     description: turboIntegrations.starter.description,

data/turbo-integrations.ts

@@ -208,6 +208,15 @@ export const turboIntegrations = {
     category: "services",
     imgDark: "/integrations/defi-llama.png",
   },
+  tally: {
+    name: "Tally",
+    href: "/integration/tally",
+    url: "https://docs.tally.xyz",
+    description: "Tally is a frontend for onchain decentralized organizations.",
+    category: "services",
+    imgLight: "/integrations/tally.png",
+    imgDark: "/integrations/tally.png",
+  },
   starter: {
     name: "Starter Template",
     href: "/integration/starter",