Fear: Add Livepeer integration and latest TurboETH fixes (#7)

* feat: add livepeer integration

* feat: add CLI CTA to homepage

* refactor: remove nested button from link and non existing css style

* chore: turn site_url env public

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-turbo-eth",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Create web3 apps in turbo mode.",
   "author": "Vitor @marthendalnunes",
   "license": "MIT",

src/config/env-variables.ts

@@ -44,7 +44,7 @@ export const envVariables: EnvVariables = {
       return 'Please enter a valid list of admin addresses'
     },
   },
-  SITE_URL: {
+  NEXT_PUBLIC_SITE_URL: {
     message: 'What is going to be the URL of your website?',
     required: false,
     validate: (input: string) => {

src/config/integrations.ts

@@ -201,6 +201,34 @@ export const integrationOptions: Integrations = {
       },
     ],
   },
+  livepeer: {
+    name: 'Livepeer',
+    pageDependencies: [
+      {
+        dependencyPath: dataConfigPath,
+        type: 'snippet',
+        regexList: [/\n\s*livepeer: \{\s*name: 'Livepeer',[\s\S]*?imgDark: '\/integrations\/livepeer.svg',\s*\},/g],
+      },
+      {
+        dependencyPath: indexPagePath,
+        type: 'snippet',
+        regexList: [/\n\s*{\s*title: turboIntegrations\.livepeer\.name,[\s\S]*?<\/IsDarkTheme>\s*<\/div>\s*\),\s*},/g],
+      },
+    ],
+    env: {
+      NEXT_PUBLIC_LIVEPEER_API_KEY: {
+        message: 'What is your Livepeer API Key?',
+        instructions: 'You can get your OpenAI API Key at https://livepeer.studio/',
+        validate: (input: string) => {
+          if (z.string().min(1).safeParse(input).success) {
+            return true
+          }
+
+          return 'Livepeer API Key is required'
+        },
+      },
+    },
+  },
   starter: {
     name: 'Starter',
     pageDependencies: [

src/types.ts

@@ -70,6 +70,7 @@ export type AvailableIntegrations =
   | 'pooltogether-v4'
   | 'session-keys'
   | 'connext'
+  | 'livepeer'
   | 'starter'
 
 export type Integrations = Record<AvailableIntegrations, Integration>

template/base/.env.example

@@ -13,6 +13,12 @@ NEXT_PUBLIC_INFURA_API_KEY=
 # Enables the use of production networks in the development environment
 NEXT_PUBLIC_PROD_NETWORKS_DEV=false 
 
+# Livepeer: https://livepeer.com
+NEXT_PUBLIC_LIVEPEER_API_KEY=
+
+# Website URL
+NEXT_PUBLIC_SITE_URL=
+
 # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 # Private Variables
 # -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
@@ -26,9 +32,6 @@ DATABASE_URL=
 # Example: "0x123,0x456"
 APP_ADMINS=""
 
-# Website URL
-SITE_URL=
-
 # Disco: https://docs.disco.xyz
 # Request API access at https://discoxyz.typeform.com/requestapi
 DISCO_API_KEY=

template/base/app/(general)/integration/sign-in-with-ethereum/page.tsx

@@ -48,8 +48,8 @@ export default function PageIntegration() {
           <Balancer>{turboIntegrations.siwe.description}</Balancer>
         </motion.p>
         <motion.div className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
-          <LinkComponent isExternal href={turboIntegrations.siwe.url}>
-            <button className="btn btn-primary">Documentation</button>
+          <LinkComponent isExternal className="btn btn-primary" href={turboIntegrations.siwe.url}>
+            Documentation
           </LinkComponent>
         </motion.div>
       </motion.div>

template/base/app/(general)/layout.tsx

@@ -9,7 +9,7 @@ import { Toaster } from '@/components/ui/toaster'
 export default function GeneralLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <div className="bg-gradient-dark lg:pb-12' flex min-h-[100vh] flex-col pb-10">
+      <div className="flex min-h-[100vh] flex-col pb-10 lg:pb-12">
         <Header />
         <main className="flex-center my-32 flex flex-1 flex-col md:px-10 lg:py-20">{children}</main>
         <div className="fixed bottom-6 left-6">

template/base/app/(general)/page.tsx

@@ -1,8 +1,11 @@
 'use client'
 
+import { useState } from 'react'
+
 import { motion } from 'framer-motion'
 import Image from 'next/image'
-import { FaGithub } from 'react-icons/fa'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { FaCheck, FaCopy, FaDiscord, FaGithub } from 'react-icons/fa'
 import Balancer from 'react-wrap-balancer'
 
 import { WalletAddress } from '@/components/blockchain/wallet-address'
@@ -24,6 +27,8 @@ import { IsSignedIn } from '@/integrations/siwe/components/is-signed-in'
 import { IsSignedOut } from '@/integrations/siwe/components/is-signed-out'
 
 export default function Home() {
+  const [copied, setCopied] = useState(false)
+
   return (
     <>
       <div className="relative flex flex-1">
@@ -51,29 +56,31 @@ export default function Home() {
             <motion.p className="mt-6 text-center text-gray-500 dark:text-gray-200 md:text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
               <Balancer className="text-xl font-semibold">{siteConfig.description}</Balancer>
             </motion.p>
-            <motion.div className="mx-auto mt-6 flex items-center justify-center space-x-5" variants={FADE_DOWN_ANIMATION_VARIANTS}>
-              <a
-                className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black"
-                href={DEPLOY_URL}
-                rel="noopener noreferrer"
-                target="_blank">
-                <svg className="h-4 w-4 group-hover:text-black" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 4L20 20H4L12 4Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
-                </svg>
-                <p>Deploy to Vercel</p>
-              </a>
-              <a
+            <motion.div className="mx-auto mt-6 flex flex-wrap items-center justify-center gap-y-3 space-x-4" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+              <LinkComponent
                 className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800"
-                href="https://github.com/turbo-eth/template-web3-app"
-                rel="noopener noreferrer"
-                target="_blank">
+                href={siteConfig.links.github}>
                 <FaGithub />
                 <p>Star on GitHub</p>
-              </a>
+              </LinkComponent>
+              <LinkComponent
+                className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-indigo-400 bg-indigo-500 px-5 py-2 text-sm text-white shadow-md transition-colors hover:border-indigo-600"
+                href={siteConfig.links.discord}>
+                <FaDiscord />
+                <p>Join us on Discord</p>
+              </LinkComponent>
             </motion.div>
-            <span className="tag mt-6">⚡️TurboETH is in active development.</span>
+            <CopyToClipboard text="pnpm create turbo-eth@latest" onCopy={() => setCopied(true)}>
+              <motion.div
+                className="group mx-auto mt-8 flex max-w-fit cursor-pointer items-center justify-between gap-x-2 rounded-xl border border-gray-200 bg-white py-4 px-3 text-sm font-medium shadow-md transition-colors dark:border-gray-800 dark:bg-neutral-800 dark:text-white hover:dark:border-gray-600/70 hover:dark:bg-neutral-700/70 md:px-6 md:text-lg"
+                variants={FADE_DOWN_ANIMATION_VARIANTS}>
+                <pre>pnpm create turbo-eth@latest</pre>
+                <span className="flex-center flex h-4 w-4 cursor-pointer rounded-md text-neutral-600 dark:text-neutral-100 md:h-7 md:w-7">
+                  {copied ? <FaCheck /> : <FaCopy />}
+                </span>
+              </motion.div>
+            </CopyToClipboard>
           </motion.div>
-
           <div className="mt-10">
             <motion.div
               animate="show"
@@ -297,6 +304,21 @@ const features = [
       </div>
     ),
   },
+  {
+    title: turboIntegrations.livepeer.name,
+    description: turboIntegrations.livepeer.description,
+    href: turboIntegrations.livepeer.href,
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <IsLightTheme>
+          <Image alt="Livepeer logo" height={100} src={turboIntegrations.livepeer.imgDark} width={100} />
+        </IsLightTheme>
+        <IsDarkTheme>
+          <Image alt="Livepeer logo" height={100} src={turboIntegrations.livepeer.imgLight} width={100} />
+        </IsDarkTheme>
+      </div>
+    ),
+  },
   {
     title: turboIntegrations.connext.name,
     description: turboIntegrations.connext.description,

template/base/app/admin/layout.tsx

@@ -16,7 +16,7 @@ import { siteConfig } from '@/config/site'
 
 export default function AdminLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="bg-gradient-dark h-screen lg:grid lg:grid-cols-12">
+    <div className="h-screen lg:grid lg:grid-cols-12">
       <div className="col-span-12 flex flex-col bg-slate-50 shadow-md dark:bg-slate-800 lg:col-span-2 lg:pb-8">
         <IsMobile>
           <div className="flex p-4">

template/base/app/dashboard/layout.tsx

@@ -18,7 +18,7 @@ import { siteConfig } from '@/config/site'
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <div className="bg-gradient-dark flex h-screen flex-col lg:grid lg:grid-cols-12">
+      <div className="flex h-screen flex-col lg:grid lg:grid-cols-12">
         <div className="col-span-12 flex flex-col bg-slate-50 shadow-md dark:bg-slate-800 lg:col-span-2 lg:pb-8">
           <IsMobile>
             <div className="flex p-4">

template/base/app/layout.tsx

@@ -12,7 +12,7 @@ import { siteConfig } from '@/config/site'
 import { env } from '@/env.mjs'
 import { cn } from '@/lib/utils'
 
-const url = env.SITE_URL || 'http://localhost:3000'
+const url = env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 
 export const metadata = {
   metadataBase: new URL(url),

template/base/components/layout/header.tsx

@@ -61,10 +61,8 @@ export function Header({ className, ...props }: HTMLAttributes<HTMLElement>) {
         </div>
         <div className="flex items-center gap-4">
           <BranchButtonLoginOrAccount classNameButtonLogin="menu-item colormode" classNameButtonLogout="menu-item" />
-          <LinkComponent className="flex items-center" href="/dashboard">
-            <button className="btn btn-pill bg-gradient-button hover:scale-105 hover:shadow-lg">
-              <span className="px-2">Dashboard</span>
-            </button>
+          <LinkComponent className="btn btn-pill bg-gradient-button px-2 hover:scale-105 hover:shadow-lg" href="/dashboard">
+            Dashboard
           </LinkComponent>
           <ThemeToggle />
         </div>

template/base/components/layout/navigation-menu-general.tsx

@@ -67,7 +67,7 @@ export function NavigationMenuGeneral() {
         </NavigationMenuItem>
         <NavigationMenuItem>
           <NavigationMenuTrigger>Integrations</NavigationMenuTrigger>
-          <NavigationMenuContent>
+          <NavigationMenuContent className="overflow-y-scroll xl:max-h-[690px] 2xl:overflow-y-hidden">
             <ul className="grid w-[600px] gap-3 p-4 md:grid-cols-2">
               {Object.values(turboIntegrations).map((component) => (
                 <ListItem key={component.name} title={component.name} {...component}>

template/base/components/shared/card.tsx

@@ -52,8 +52,8 @@ export default function Card({
           </Balancer>
         </div>
         {!href ? null : (
-          <LinkComponent href={href}>
-            <button className="btn btn-light my-4">Demo</button>
+          <LinkComponent className="btn btn-light my-4" href={href}>
+            Demo
           </LinkComponent>
         )}
       </div>

template/base/components/ui/social/og-image-integrations.tsx

@@ -12,7 +12,7 @@ export const size = {
 
 export const contentType = 'image/png'
 
-const url = env.SITE_URL || 'http://localhost:3000'
+const url = env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 
 export function IntegrationOgImage(integration: keyof typeof turboIntegrations) {
   const integrationData = turboIntegrations[integration]

template/base/config/site.ts

@@ -9,6 +9,8 @@ interface SiteConfig {
   previewImg: string
   localeDefault: string
   links: {
+    docs: string
+    discord: string
     twitter: string
     github: string
   }
@@ -24,6 +26,8 @@ export const siteConfig: SiteConfig = {
   previewImg: `${SITE_CANONICAL}/preview.png`,
   localeDefault: 'en',
   links: {
+    docs: 'https://docs.turboeth.xyz/overview',
+    discord: 'https://discord.gg/U4jy7Xfh76',
     twitter: 'https://twitter.com/district_labs',
     github: 'https://github.com/turbo-eth',
   },

template/base/data/turbo-integrations.ts

@@ -72,6 +72,14 @@ export const turboIntegrations = {
     imgLight: '/integrations/pooltogether.svg',
     imgDark: '/integrations/pooltogether.svg',
   },
+  livepeer: {
+    name: 'Livepeer',
+    href: '/integration/livepeer',
+    url: 'https://livepeer.org/',
+    description: 'Livepeer is a decentralized video streaming network.',
+    imgLight: '/integrations/livepeer.svg',
+    imgDark: '/integrations/livepeer.svg',
+  },
   connext: {
     name: 'Connext',
     href: '/integration/connext',

template/base/env.mjs

@@ -11,7 +11,6 @@ export const env = createEnv({
       .string()
       .regex(/^(0x[a-fA-F0-9]{40}( *, *0x[a-fA-F0-9]{40})* *)*$/)
       .optional(),
-    SITE_URL: z.string().url().optional(),
     DISCO_API_KEY: z.string().min(1).optional(),
     OPENAI_API_KEY: z.string().min(1).optional(),
     ETHERSCAN_API_KEY: z.string().min(1).optional(),
@@ -24,12 +23,13 @@ export const env = createEnv({
     NEXT_PUBLIC_PROD_NETWORKS_DEV: z.enum(['true', 'false']).default('false'),
     NEXT_PUBLIC_ALCHEMY_API_KEY: z.string().min(1).optional(),
     NEXT_PUBLIC_INFURA_API_KEY: z.string().min(1).optional(),
+    NEXT_PUBLIC_LIVEPEER_API_KEY: z.string().min(1).optional(),
+    NEXT_PUBLIC_SITE_URL: z.string().url().optional(),
   },
   runtimeEnv: {
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     DATABASE_URL: process.env.DATABASE_URL,
     APP_ADMINS: process.env.APP_ADMINS,
-    SITE_URL: process.env.SITE_URL,
     DISCO_API_KEY: process.env.DISCO_API_KEY,
     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
     NEXT_PUBLIC_PROD_NETWORKS_DEV: process.env.NEXT_PUBLIC_PROD_NETWORKS_DEV,
@@ -40,5 +40,7 @@ export const env = createEnv({
     NEXT_PUBLIC_USE_PUBLIC_PROVIDER: process.env.NEXT_PUBLIC_USE_PUBLIC_PROVIDER,
     NEXT_PUBLIC_ALCHEMY_API_KEY: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
     NEXT_PUBLIC_INFURA_API_KEY: process.env.NEXT_PUBLIC_INFURA_API_KEY,
+    NEXT_PUBLIC_LIVEPEER_API_KEY: process.env.NEXT_PUBLIC_LIVEPEER_API_KEY,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
   },
 })

template/base/lib/utils/index.ts

@@ -17,7 +17,7 @@ export function formatDate(input: string | number): string {
 }
 
 export function absoluteUrl(path: string) {
-  return `${env.SITE_URL || 'http://localhost:3000'}${path}`
+  return `${env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'}${path}`
 }
 
 export function trimFormattedBalance(balance: string | undefined, decimals = 4) {

template/base/package.json

@@ -40,6 +40,7 @@
     "@connext/nxtp-utils": "^2.0.3",
     "@connext/sdk": "2.0.4-alpha.2",
     "@lit-protocol/lit-node-client": "2.1.161",
+    "@livepeer/react": "^2.6.0",
     "@prisma/client": "^4.8.1",
     "@radix-ui/react-accordion": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.0.2",
@@ -77,6 +78,7 @@
     "clsx": "^1.2.1",
     "dexie": "^3.2.3",
     "dexie-react-hooks": "^1.1.3",
+    "ethers": "^5.6.9",
     "eventsource-parser": "^1.0.0",
     "framer-motion": "^8.4.3",
     "iron-session": "^6.3.1",
@@ -88,6 +90,7 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.9.0",
     "react-markdown": "^8.0.4",