feat: lens integration

app/(general)/integration/lens-protocol/explore/page.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { ExploreProfiles } from '@/integrations/lens-protocol/components/profile/explore-profiles'
+import { ExplorePublications } from '@/integrations/lens-protocol/components/publications/explore-publications'
+
+export default function PageIntegration() {
+  return (
+    <>
+      <ExploreProfiles />
+      <ExplorePublications />
+    </>
+  )
+}

app/(general)/integration/lens-protocol/layout.tsx

@@ -0,0 +1,77 @@
+'use client'
+import { ReactNode } from 'react'
+
+import { LensProvider } from '@lens-protocol/react-web'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import Balancer from 'react-wrap-balancer'
+
+import { WalletConnect } from '@/components/blockchain/wallet-connect'
+import { IsDarkTheme } from '@/components/shared/is-dark-theme'
+import { IsLightTheme } from '@/components/shared/is-light-theme'
+import { IsWalletConnected } from '@/components/shared/is-wallet-connected'
+import { IsWalletDisconnected } from '@/components/shared/is-wallet-disconnected'
+import { LinkComponent } from '@/components/shared/link-component'
+import { FADE_DOWN_ANIMATION_VARIANTS } from '@/config/design'
+import { turboIntegrations } from '@/data/turbo-integrations'
+import { Navbar } from '@/integrations/lens-protocol/components/navbar'
+import { lensProviderConfig } from '@/integrations/lens-protocol/lens-provider'
+
+export default function LayoutIntegration({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <div className="flex-center flex flex-1 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="Lens Protocol logo" className="mx-auto" height={200} src={turboIntegrations.lensProtocol.imgDark} width={300} />
+          </IsLightTheme>
+          <IsDarkTheme>
+            <Image alt="Lens Protocol logo" className="mx-auto" height={200} src={turboIntegrations.lensProtocol.imgLight} width={300} />
+          </IsDarkTheme>
+          <motion.h1
+            className="text-gradient-sand mt-3 text-center text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-8xl md:leading-[6rem]"
+            variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            Lens Protocol
+          </motion.h1>
+          <motion.p className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <Balancer>{turboIntegrations.lensProtocol.description}</Balancer>
+          </motion.p>
+          <motion.div className="my-4 text-xl" variants={FADE_DOWN_ANIMATION_VARIANTS}>
+            <LinkComponent isExternal href={turboIntegrations.lensProtocol.url}>
+              <button className="btn btn-primary">Documentation</button>
+            </LinkComponent>
+          </motion.div>
+        </motion.div>
+
+        <div className="container mx-auto mt-10  max-w-screen-xl gap-6 text-center">
+          <IsWalletDisconnected>
+            <WalletConnect className="mx-auto inline-block" />
+          </IsWalletDisconnected>
+        </div>
+      </div>
+      <section className="w-full lg:mt-10 max-w-screen-2xl">
+        <IsWalletConnected>
+          <LensProvider config={lensProviderConfig}>
+            <div className="shadow-md pb-8 w-full rounded-xl dark:bg-neutral-900">
+              <Navbar />
+              <div className="container px-8 flex w-full flex-col items-center">{children}</div>
+            </div>
+          </LensProvider>
+        </IsWalletConnected>
+      </section>
+    </>
+  )
+}

app/(general)/integration/lens-protocol/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('lensProtocol')

app/(general)/integration/lens-protocol/page.tsx

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

app/(general)/integration/lens-protocol/profiles/[handle]/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { Profile } from '@/integrations/lens-protocol/components/profile/profile'
+
+export default function PageIntegration({ params }: { params: { handle: string } }) {
+  return <Profile handle={params.handle} />
+}

app/(general)/integration/lens-protocol/profiles/address/[address]/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { AddressProfiles } from '@/integrations/lens-protocol/components/profile/address-profiles'
+
+export default function PageIntegration({ params }: { params: { address: string } }) {
+  return <AddressProfiles address={params.address} />
+}

app/(general)/integration/lens-protocol/profiles/page.tsx

@@ -0,0 +1,6 @@
+'use client'
+import { OwnedProfiles } from '@/integrations/lens-protocol/components/profile/owned-profiles'
+
+export default function PageIntegration() {
+  return <OwnedProfiles />
+}

app/(general)/integration/lens-protocol/publications/[id]/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { PublicationId } from '@lens-protocol/react-web'
+
+import { Publication } from '@/integrations/lens-protocol/components/publications/publication'
+
+export default function PageIntegration({ params }: { params: { id: string } }) {
+  return <Publication publicationId={params.id as PublicationId} />
+}

app/(general)/integration/lens-protocol/search/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+import { SearchProfiles } from '@/integrations/lens-protocol/components/profile/search-profiles'
+import { SearchPublications } from '@/integrations/lens-protocol/components/publications/search-publications'
+
+export default function PageIntegration() {
+  const searchParams = useSearchParams()
+  const query = searchParams.get('q') ?? ''
+  return (
+    <>
+      <SearchProfiles query={query} />
+      <SearchPublications query={query} />
+    </>
+  )
+}

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

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

data/turbo-integrations.ts

@@ -129,6 +129,14 @@ export const turboIntegrations = {
     imgLight: '/integrations/arweave-light.png',
     imgDark: '/integrations/arweave-dark.png',
   },
+  lensProtocol: {
+    name: 'Lens Protocol',
+    href: '/integration/lens-protocol',
+    url: 'https://www.lens.xyz/',
+    description: 'Lens Protocol is the social layer for Web3',
+    imgLight: '/integrations/lensprotocol-light.svg',
+    imgDark: '/integrations/lensprotocol-dark.svg',
+  },
   starter: {
     name: 'Starter Template',
     href: '/integration/starter',

integrations/lens-protocol/components/auth/is-user-authenticated.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+import { useActiveWallet } from '@lens-protocol/react-web'
+
+import { Spinner } from '../spinner'
+
+export const IsUserAuthenticated = ({ children, showLoading }: { children: ReactNode; showLoading?: boolean }) => {
+  const { data: wallet, loading } = useActiveWallet()
+  if (loading && showLoading) return <Spinner />
+  if (wallet && children) return <>{children}</>
+  return null
+}

integrations/lens-protocol/components/auth/login-button.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+
+import { useWalletLogin } from '@lens-protocol/react-web'
+import { useAccount } from 'wagmi'
+
+import { useToast } from '@/lib/hooks/use-toast'
+
+export const LoginButton = () => {
+  const { execute: login, error: loginError, isPending } = useWalletLogin()
+  const { address } = useAccount()
+  const { toast, dismiss } = useToast()
+
+  useEffect(() => {
+    if (loginError) showErrorToast(String(loginError))
+  }, [loginError])
+
+  const showErrorToast = (loginError: string) => {
+    toast({
+      title: 'Login failed',
+      description: loginError,
+    })
+
+    setTimeout(() => {
+      dismiss()
+    }, 10000)
+  }
+
+  const onLoginClick = async () => {
+    if (!address) return null
+    await login({
+      address,
+    })
+  }
+  return (
+    <button className="btn btn-emerald whitespace-nowrap" disabled={!address || isPending} onClick={onLoginClick}>
+      Log in
+    </button>
+  )
+}

integrations/lens-protocol/components/auth/logout-button.tsx

@@ -0,0 +1,11 @@
+import { useWalletLogout } from '@lens-protocol/react-web'
+
+export const LogoutButton = () => {
+  const { execute: logout, isPending } = useWalletLogout()
+
+  return (
+    <button className="btn btn-primary whitespace-nowrap" disabled={isPending} onClick={logout}>
+      Log out
+    </button>
+  )
+}

integrations/lens-protocol/components/auth/not-authenticated-yet.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+import { useActiveWallet } from '@lens-protocol/react-web'
+
+export const NotAuthenticatedYet = ({ children }: { children: ReactNode }) => {
+  const { data: wallet } = useActiveWallet()
+  if (!wallet) return <>{children}</>
+  return null
+}

integrations/lens-protocol/components/feed.tsx

@@ -0,0 +1,39 @@
+import { ProfileId, useActiveProfile, useFeed } from '@lens-protocol/react-web'
+
+import { PublicationCard, PublicationCardMode } from './publications/publication-card'
+import { Spinner } from './spinner'
+
+export const Feed = ({ profileId }: { profileId: ProfileId }) => {
+  const activeProfile = useActiveProfile()
+  const { data, loading, hasMore, next } = useFeed({
+    observerId: activeProfile?.data?.id ?? undefined,
+    profileId,
+    limit: 10,
+  })
+  console.error(data)
+  if (loading) return <Spinner />
+  return (
+    <div>
+      <h2 className="font-semibold text-xs mb-2">Feed</h2>
+      {data?.map((feedItem) => (
+        <PublicationCard
+          key={feedItem.root.id}
+          feedItem={feedItem}
+          mode={feedItem.comments?.[0] ? PublicationCardMode.FeedComment : PublicationCardMode.Normal}
+          publication={feedItem.root}
+        />
+      ))}
+      {hasMore && (
+        <button className="btn btn-primary mt-4 w-auto mb-6 m-auto" disabled={loading} onClick={() => next()}>
+          Load more
+        </button>
+      )}
+      {loading && (
+        <div className="text-center w-full my-6">
+          <Spinner />
+        </div>
+      )}
+      {!data?.length && <span>User feed is empty.</span>}
+    </div>
+  )
+}