feat: support memebership page

.env

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_POSTS_PAGE_SIZE=20
 NEXT_PUBLIC_THEME=penx-theme-garden
 
-DATABASE_URL=postgresql://user:[email protected]:5437/demo
+DATABASE_URL=postgresql://user:[email protected]:5437/demo

.github/workflows/create-images.yml

@@ -31,4 +31,4 @@ jobs:
           multiPlatform: true
           platform: linux/amd64,linux/arm64
           username: ${{ secrets.GHCR_USERNAME }}
-          password: ${{ secrets.GHCR_TOKEN }}
+          password: ${{ secrets.GHCR_TOKEN }}

README.md

@@ -41,3 +41,5 @@ Deploy your blog in **10 minutes**!
 
 
 ## ⚖️ License
+
+

app/(creator-fi)/CreatorFiLayout.tsx

@@ -2,7 +2,6 @@
 
 import { PropsWithChildren, Suspense } from 'react'
 import { useQueryEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
-import { useQueryEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
 import { ClientOnly } from '@/components/ClientOnly'
 import LoadingCircle from '@/components/icons/loading-circle'
 import { Profile } from '@/components/Profile/Profile'
@@ -51,7 +50,6 @@ interface Props {
 }
 
 export function CreatorFiLayout({ children, space }: PropsWithChildren<Props>) {
-  useQueryEthPrice()
   useQueryEthBalance()
 
   return (

app/(creator-fi)/Space/SpaceNav.tsx

@@ -29,7 +29,7 @@ export function SpaceNav({}: Props) {
   return (
     <div className="flex justify-center">
       <Link href={Paths.plans} className={linkClassName(Paths.plans)}>
-        subscription
+        Membership
       </Link>
 
       <Link href={Paths.trade} className={linkClassName(Paths.trade)}>

app/(creator-fi)/Space/SpaceStats.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import { ReactNode } from 'react'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
+import { useEthPrice } from '@/hooks/useEthPrice'
 import { precision } from '@/lib/math'
 import { useBalance } from 'wagmi'
-import { useSpaceContext } from '@/components/SpaceContext'
 
 interface Props {}
 

app/(creator-fi)/creator-fi/plans/AddPlanDialog/AddPlanForm.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { NumberInput } from '@/app/(creator-fi)/components/NumberInput'
 import { editorDefaultValue } from '@/app/(creator-fi)/constants'
-import { useEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
+import { usePlans } from '@/app/(creator-fi)/hooks/usePlans'
 import LoadingDots from '@/components/icons/loading-dots'
 import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { useCheckChain } from '@/hooks/useCheckChain'
+import { useEthPrice } from '@/hooks/useEthPrice'
 import { useWagmiConfig } from '@/hooks/useWagmiConfig'
 import { spaceAbi } from '@/lib/abi'
 import { addToIpfs } from '@/lib/addToIpfs'
@@ -42,6 +43,7 @@ export function AddPlanForm() {
   const { ethPrice } = useEthPrice()
   const wagmiConfig = useWagmiConfig()
   const checkChain = useCheckChain()
+  const { refetch } = usePlans()
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
@@ -65,10 +67,12 @@ export function AddPlanForm() {
       const cid = await addToIpfs(
         JSON.stringify({
           name: data.name,
-          benefits: JSON.stringify(editorDefaultValue),
+          benefits: editorDefaultValue,
         }),
       )
 
+      // console.log('=======cid:', cid, 'ethPrice:', ethPrice)
+
       const price = precision.token(Number(data.price) / ethPrice)
       const hash = await writeContract(wagmiConfig, {
         address: space.address as Address,
@@ -80,6 +84,9 @@ export function AddPlanForm() {
       await waitForTransactionReceipt(wagmiConfig, { hash })
 
       setIsOpen(false)
+      setTimeout(() => {
+        refetch()
+      }, 1500)
       toast.success('Add Plan successfully!')
     } catch (error) {
       const msg = extractErrorMessage(error)
@@ -130,7 +137,7 @@ export function AddPlanForm() {
         <Button
           type="submit"
           className="w-full"
-          disabled={isLoading || !form.formState.isValid}
+          disabled={isLoading || !form.formState.isValid || !ethPrice}
         >
           {isLoading ? <LoadingDots /> : <p>Add</p>}
         </Button>

app/(creator-fi)/creator-fi/plans/PlanItem.tsx

@@ -3,13 +3,13 @@
 import { useMemberDialog } from '@/app/(creator-fi)/components/MemberDialog/useMemberDialog'
 import { Plan } from '@/app/(creator-fi)/domains/Plan'
 import { useAddress } from '@/app/(creator-fi)/hooks/useAddress'
-import { useEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
 import { useMembers } from '@/app/(creator-fi)/hooks/useMembers'
 import { useSubscriptions } from '@/app/(creator-fi)/hooks/useSubscriptions'
 import { PlateEditor } from '@/components/editor/plate-editor'
 import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
+import { useEthPrice } from '@/hooks/useEthPrice'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { EditIcon } from 'lucide-react'
 import { useAccount } from 'wagmi'
@@ -35,7 +35,7 @@ export function PlanItem({ plan }: Props) {
   )
 
   return (
-    <Card className="relative flex min-h-[520px] flex-col justify-between gap-4 rounded-xl p-4 shadow-none bg-background">
+    <Card className="relative flex min-h-[520px] flex-col justify-between gap-4 rounded-xl p-4 shadow-none bg-background w-[300px]">
       {space.isFounder(address) && (
         <Button
           variant="ghost"
@@ -46,7 +46,7 @@ export function PlanItem({ plan }: Props) {
           <EditIcon size={20} className="text-foreground/50" />
         </Button>
       )}
-      <div>
+      <div className="space-y-1">
         <div className="flex">
           <div>{plan.name}</div>
         </div>
@@ -58,8 +58,8 @@ export function PlanItem({ plan }: Props) {
         </div>
       </div>
 
-      <div className="prose-xl prose-neutral flex-1 prose-p:m-4 prose-p:leading-none">
-        <PlateEditor value={plan.benefitsJson} readonly />
+      <div className="flex-1">
+        <PlateEditor value={plan.benefitsJson} readonly className="p-0" />
       </div>
 
       <Button

app/(creator-fi)/creator-fi/plans/PlanList.tsx

@@ -22,12 +22,16 @@ export function PlanList({}: Props) {
   }
 
   return (
-    <div className="w-full">
-      {space.isFounder(address) && <AddPlanDialog />}
+    <div className="w-full flex flex-col gap-6">
+      {space.isFounder(address) && (
+        <div className="flex justify-center">
+          <AddPlanDialog />
+        </div>
+      )}
 
       <UpdatePlanDialog />
       <MemberDialog />
-      <div className="mt-4 grid grid-cols-1 justify-center gap-4 sm:grid-cols-2 md:grid-cols-2  lg:grid-cols-3">
+      <div className="mt-4 flex items-center justify-center gap-4 flex-wrap">
         {plans.map((item, index) => {
           return <PlanItem key={index} plan={item} />
         })}

app/(creator-fi)/creator-fi/plans/UpdatePlanDialog/UpdatePlanForm.tsx

@@ -4,7 +4,6 @@ import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { NumberInput } from '@/app/(creator-fi)/components/NumberInput'
 import { PlanStatus } from '@/app/(creator-fi)/domains/Plan'
-import { useEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
 import { usePlans } from '@/app/(creator-fi)/hooks/usePlans'
 import { PlateEditor } from '@/components/editor/plate-editor'
 import LoadingDots from '@/components/icons/loading-dots'
@@ -21,6 +20,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { useCheckChain } from '@/hooks/useCheckChain'
+import { useEthPrice } from '@/hooks/useEthPrice'
 import { useWagmiConfig } from '@/hooks/useWagmiConfig'
 import { spaceAbi } from '@/lib/abi'
 import { addToIpfs } from '@/lib/addToIpfs'
@@ -54,8 +54,8 @@ export function UpdatePlanForm() {
     resolver: zodResolver(FormSchema),
     defaultValues: {
       status: plan.status,
-      name: plan.name,
-      price: plan.getUsdPrice(ethPrice).toFixed(2),
+      name: plan.name || '',
+      price: plan.getUsdPrice(ethPrice).toFixed(2) || '',
       benefits: plan.benefits,
     },
   })
@@ -74,10 +74,12 @@ export function UpdatePlanForm() {
       const cid = await addToIpfs(
         JSON.stringify({
           name: data.name,
-          benefits: data.benefits,
+          benefits: JSON.parse(data.benefits),
         }),
       )
 
+      // console.log('cid=======:', cid)
+
       const price = precision.token(Number(data.price) / ethPrice)
       const hash = await writeContract(wagmiConfig, {
         address: space.address as Address,
@@ -135,7 +137,7 @@ export function UpdatePlanForm() {
                   <FormControl>
                     <NumberInput
                       placeholder=""
-                      precision={2}
+                      precision={6}
                       {...field}
                       className="w-full"
                     />

app/(creator-fi)/domains/Plan.ts

@@ -40,14 +40,13 @@ export class Plan {
   }
 
   get benefits() {
-    try {
-      JSON.parse(this.raw.benefits)
-      return this.raw.benefits
-    } catch (error) {
-      return JSON.stringify(editorDefaultValue)
+    if (Array.isArray(this.raw?.benefits)) {
+      return JSON.stringify(this.raw.benefits)
     }
+    return JSON.stringify(editorDefaultValue)
   }
   get benefitsJson() {
+    if (Array.isArray(this.raw.benefits)) return this.raw.benefits
     try {
       JSON.parse(this.raw.benefits)
       return this.raw.benefits

app/membership/page.tsx

@@ -0,0 +1,60 @@
+import { PlanList } from '@/app/(creator-fi)/creator-fi/plans/PlanList'
+import { SpaceProvider } from '@/components/SpaceContext'
+import { getSite, getSpace } from '@/lib/fetchers'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export const dynamic = 'force-static'
+export const revalidate = 3600 * 24
+
+export default async function HomePage() {
+  const [site] = await Promise.all([getSite()])
+
+  if (!site?.spaceId) return null
+  const space = await getSpace(site.spaceId)
+
+  return (
+    <SpaceProvider space={space}>
+      <Link
+        href="/"
+        className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-foreground/5 mt-2 ml-2"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          // width="1em"
+          // height="2em"
+          viewBox="0 0 12 24"
+          className="h-6"
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="m3.343 12l7.071 7.071L9 20.485l-7.778-7.778a1 1 0 0 1 0-1.414L9 3.515l1.414 1.414z"
+          ></path>
+        </svg>
+      </Link>
+
+      <div className="flex flex-col items-center space-x-2 pt-8">
+        {site.logo && (
+          <Image
+            src={site.logo}
+            alt="avatar"
+            width={192}
+            height={192}
+            className="h-20 w-20 rounded-full"
+          />
+        )}
+        <h3 className="pb-2 pt-4 text-2xl font-bold leading-8 tracking-tight">
+          {site.name}
+        </h3>
+      </div>
+
+      <div className="flex flex-col items-center space-x-2 pt-8 gap-10">
+        <div className="text-center text-4xl font-bold">
+          Choose a subscription plan
+        </div>
+        <PlanList />
+      </div>
+    </SpaceProvider>
+  )
+}