[WIP] Feat: Add Allo Protocol

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

@@ -0,0 +1,72 @@
+'use client'
+import { ReactNode } from 'react'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { usePathname } from 'next/navigation'
+import Balancer from 'react-wrap-balancer'
+
+import { IsDarkTheme } from '@/components/shared/is-dark-theme'
+import { IsLightTheme } from '@/components/shared/is-light-theme'
+import { LinkComponent } from '@/components/shared/link-component'
+import { FADE_DOWN_ANIMATION_VARIANTS } from '@/config/design'
+import { turboIntegrations } from '@/data/turbo-integrations'
+import { cn } from '@/lib/utils'
+
+const integrationData = turboIntegrations.allo
+const registryPath = '/integration/allo/registry'
+const alloPath = '/integration/allo/pool'
+
+export default function LayoutIntegration({ children }: { children: ReactNode }) {
+  const pathname = usePathname()
+
+  return (
+    <>
+      <div className="flex-center flex-col items-center justify-center text-center">
+        <motion.div
+          animate="show"
+          className="max-w-3xl px-5 text-center xl:px-0"
+          initial="hidden"
+          viewport={{ once: true }}
+          whileInView="show"
+          variants={{
+            hidden: {},
+            show: {
+              transition: {
+                staggerChildren: 0.15,
+              },
+            },
+          }}>
+          <IsLightTheme>
+            <Image alt="Starter logo" className="mx-auto rounded-full" height={100} src={integrationData.imgDark} width={100} />
+          </IsLightTheme>
+          <IsDarkTheme>
+            <Image alt="Starter logo" className="mx-auto rounded-full" height={100} src={integrationData.imgLight} width={100} />
+          </IsDarkTheme>
+          <motion.h1
+            className="text-gradient-sand my-8 text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-8xl md:leading-[6rem]"
+            variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            {integrationData.name}
+          </motion.h1>
+          <motion.p className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <Balancer>{integrationData.description}</Balancer>
+          </motion.p>
+          <motion.div className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <LinkComponent className="btn btn-primary" href={integrationData.url}>
+              Documentation
+            </LinkComponent>
+            <motion.div className="mt-8 flex flex-col justify-center gap-x-14 text-2xl sm:flex-row" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+              <LinkComponent href={registryPath}>
+                <button className={cn('btn hover:opacity-75', pathname === alloPath && 'opacity-50')}>Project Registry</button>
+              </LinkComponent>
+              <LinkComponent href={alloPath}>
+                <button className={cn('btn hover:opacity-75', pathname === registryPath && 'opacity-50')}>Pool</button>
+              </LinkComponent>
+            </motion.div>
+          </motion.div>
+        </motion.div>
+      </div>
+      {children}
+    </>
+  )
+}

app/(general)/integration/allo/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('allo')

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

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function PageIntegration() {
+  redirect('/integration/allo/registry')
+}

app/(general)/integration/allo/pool/page.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { WalletConnect } from '@/components/blockchain/wallet-connect'
+import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
+import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
+import { AlloAllocate, AlloCreatePool, AlloDistribute, AlloFundPool, AlloRegisterRecipient } from '@/integrations/allo/components/pool'
+
+export default function PageAllo() {
+  return (
+    <section className="w-full lg:mt-10">
+      <div className="container mx-auto mt-10 max-w-screen-lg gap-6">
+        <IsWalletConnected>
+          <div className="flex w-full flex-col gap-y-10">
+            <AlloCreatePool />
+            <AlloAllocate />
+            <AlloDistribute />
+            <AlloFundPool />
+            <AlloRegisterRecipient />
+          </div>
+        </IsWalletConnected>
+        <IsWalletDisconnected>
+          <WalletConnect className="inline-block" />
+        </IsWalletDisconnected>
+      </div>
+    </section>
+  )
+}

app/(general)/integration/allo/registry/page.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { WalletConnect } from '@/components/blockchain/wallet-connect'
+import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
+import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
+import { RegistryCreateProfile, RegistryUpdateProfileMetadata, RegistryUpdateProfileName } from '@/integrations/allo/components/registry'
+
+export default function PageRegistry() {
+  return (
+    <section className="w-full lg:mt-10">
+      <div className="container mx-auto mt-10 max-w-screen-lg gap-6">
+        <IsWalletConnected>
+          <div className="flex w-full flex-col gap-y-10">
+            <RegistryCreateProfile />
+            <RegistryUpdateProfileName />
+            <RegistryUpdateProfileMetadata />
+          </div>
+        </IsWalletConnected>
+        <IsWalletDisconnected>
+          <WalletConnect className="inline-block" />
+        </IsWalletDisconnected>
+      </div>
+    </section>
+  )
+}

app/(general)/integration/allo/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

app/(general)/page.tsx

@@ -349,6 +349,21 @@ const features = [
       </div>
     ),
   },
+  {
+    title: turboIntegrations.allo.name,
+    description: turboIntegrations.allo.description,
+    href: turboIntegrations.allo.href,
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <IsLightTheme>
+          <Image alt="Allo logo" className="rounded-full" height={100} src={turboIntegrations.allo.imgDark} width={100} />
+        </IsLightTheme>
+        <IsDarkTheme>
+          <Image alt="Allo logo" className="rounded-full" height={100} src={turboIntegrations.allo.imgLight} width={100} />
+        </IsDarkTheme>
+      </div>
+    ),
+  },
   {
     title: turboIntegrations.starter.name,
     description: turboIntegrations.starter.description,

data/turbo-integrations.ts

@@ -96,6 +96,14 @@ export const turboIntegrations = {
     imgLight: '/integrations/gelato-light.svg',
     imgDark: '/integrations/gelato-light.svg',
   },
+  allo: {
+    name: 'Allo Protocol',
+    href: '/integration/allo',
+    url: 'https://docs.allo.gitcoin.co/',
+    description: 'Allo Protocol is an open-source protocol that enables groups to efficiently and transparently allocate pooled capital.',
+    imgLight: '/integrations/allo.jpeg',
+    imgDark: '/integrations/allo.jpeg',
+  },
   starter: {
     name: 'Starter Template',
     href: '/integration/starter',

integrations/allo/README.md

@@ -0,0 +1,62 @@
+# Starter TurboETH Integration
+
+Welcome to the Starter TurboETH Integration! This folder serves as a blueprint for creating new integrations in TurboETH. If you're looking to contribute a new integration, simply copy this directory, and also the starter page located at `app/integration/starter`, to begin your development.
+
+## Creating a new integration
+
+Below are the steps to create a new integration.
+
+1. Copy the integration folder template from `/integrations/starter` and add your integration code, adhering to the file structure patterns evident in this folder.
+
+2. Duplicate the integration page from `/app/(general)/integration/starter` and populate it with your integration pages' code.
+
+3. Locate any API endpoints associated with your integration in the `/api` folder within the page folder of your integration. An example API endpoint can be found at `/app/(general)/integration/starter/api/hello-world/route.ts`. These API endpoints should follow the new [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) patterns of Next.js 13.
+
+4. Enter the data related to your integration in `/data/turbo-integrations.ts`. Here, add a new object with the name, description, image, and URL of your integration.
+
+5. Update the OG image configuration of your integration page in the `opengraph-image.tsx` file. Do this by replacing the argument of the `IntegrationOgImage` function with the object key of your integration used in the previous step.
+
+## Understanding the Starter template
+
+Each component of the Starter TurboETH template is designed to help streamline your development process:
+
+- **abis/**: Put your contract's ABI here. Each ABI should be in its own TypeScript file.
+
+- **client/**: Any client initialization for your chosen module or SDK should be placed here.
+
+- **components/**: This is the home for your React components. 'Read' components, which display data from a contract, and 'write' components, that send transactions, should all be placed here.
+
+- **hooks/**: Place your custom React hooks in this folder. These hooks are intended to manage state updates and encapsulate the logic for interacting with Ethereum contracts.
+
+- **starter-wagmi.ts**: This is a generated file from [wagmi-cli](https://wagmi.sh/cli/getting-started). It includes hooks for your contracts .
+
+- **index.ts**: Consider this as the entry point for your integration. It should export all the hooks, components, and utility functions that your integration provides.
+
+- **wagmi.config.ts**: This file should hold the wagmi-cli configuration for your integration, which includes settings like compiler version and optimization.
+
+- **README.md**: Here, you should document your integration. Explain its purpose, its use, and any important information a new developer or user should know.
+
+Each of these elements plays a crucial role in making your integration functional and accessible.
+
+## File Structure
+
+```
+integrations/starter
+├─ abis/
+│  ├─ starter-abi.ts
+├─ client/
+│  ├─ index.ts
+├─ components/
+│  ├─ starter-header.tsx
+├─ generated/
+│  ├─ starter-wagmi.ts
+├─ hooks/
+│  ├─ use-starter.ts
+├─ utils/
+│  ├─ types.ts
+├─ index.ts
+├─ README.md
+├─ wagmi.config.ts
+```
+
+By using this template, you'll create well-organized and understandable integrations that are easy for you and others to navigate. Happy coding!