From bcf5aaee8727425a974e9d090c39fdf67ca53a24 Mon Sep 17 00:00:00 2001
From: 0xzio <zio.penx@gmail.com>
Date: Thu, 14 Nov 2024 20:32:06 +0800
Subject: [PATCH] feat: improve create-fi page

---
 app/(blog)/wallet/page.tsx                    |  2 +-
 app/(creator-fi)/CreatorFiLayout.tsx          | 32 +++++++------------
 app/(creator-fi)/Space/HolderList.tsx         | 10 +++---
 app/(creator-fi)/Space/SpaceAddress.tsx       |  4 +--
 app/(creator-fi)/Space/SpaceBasicInfo.tsx     | 22 +++++--------
 app/(creator-fi)/Space/SpaceNav.tsx           |  6 +---
 app/(creator-fi)/Space/SpaceStats.tsx         |  6 ++--
 app/(creator-fi)/Space/TradeList.tsx          |  4 +--
 app/(creator-fi)/Space/Transaction.tsx        |  2 +-
 app/(creator-fi)/SpaceToken/BuyBtn.tsx        |  7 ++--
 app/(creator-fi)/SpaceToken/BuyPanel.tsx      |  6 ++--
 app/(creator-fi)/SpaceToken/SellBtn.tsx       |  3 +-
 app/(creator-fi)/SpaceToken/SellPanel.tsx     |  8 ++---
 .../SpaceToken/hooks/useSpaceTokenBalance.ts  |  4 +--
 .../components/MemberDialog/MemberDialog.tsx  | 10 +++---
 .../components/MemberDialog/TokenSelect.tsx   |  6 ++--
 app/(creator-fi)/components/NumberInput.tsx   |  2 +-
 app/(creator-fi)/creator-fi/layout.tsx        |  5 +--
 app/(creator-fi)/creator-fi/members/page.tsx  |  6 ++--
 app/(creator-fi)/creator-fi/page.tsx          |  4 +--
 .../plans/AddPlanDialog/AddPlanForm.tsx       |  4 +--
 .../creator-fi/plans/PlanItem.tsx             |  4 +--
 .../creator-fi/plans/PlanList.tsx             |  4 +--
 .../plans/UpdatePlanDialog/UpdatePlanForm.tsx |  4 +--
 .../creator-fi/staking/StakingPanel.tsx       |  4 +--
 .../creator-fi/subscription-records/page.tsx  |  5 ++-
 app/(creator-fi)/creator-fi/trade/page.tsx    | 11 +++++--
 app/(creator-fi)/hooks/useContributors.ts     |  4 +--
 app/(creator-fi)/hooks/useHolders.ts          |  4 +--
 app/(creator-fi)/hooks/useMembers.ts          |  4 +--
 app/(creator-fi)/hooks/usePlans.ts            |  3 +-
 app/(creator-fi)/hooks/useShareOrders.ts      |  4 +--
 app/(creator-fi)/hooks/useSpace.ts            |  1 -
 .../hooks/useSubscriptionRecords.ts           |  4 +--
 app/(creator-fi)/hooks/useSubscriptions.ts    |  3 +-
 app/(creator-fi)/hooks/useTokenBalance.ts     |  4 +--
 app/(creator-fi)/hooks/useTrades.ts           |  4 +--
 app/(creator-fi)/hooks/useVestings.ts         |  3 +-
 app/(creator-fi)/layout.tsx                   | 26 ++++++++++-----
 components/PostActions/PostActions.tsx        |  2 +-
 .../PostActions/TipToken/TipTokenDialog.tsx   | 12 +++++--
 components/PostActions/TippedAmount.tsx       | 32 +++++++++++++++++--
 components/SpaceContext.tsx                   | 26 +++++++++++++++
 components/ui/dialog.tsx                      |  2 +-
 hooks/useTipStats.ts                          |  4 +--
 lib/fetchers.ts                               | 20 +++++++++++-
 next.config.js                                |  2 +-
 47 files changed, 213 insertions(+), 136 deletions(-)
 create mode 100644 components/SpaceContext.tsx

diff --git a/app/(blog)/wallet/page.tsx b/app/(blog)/wallet/page.tsx
index 607661fa..b19f97ff 100644
--- a/app/(blog)/wallet/page.tsx
+++ b/app/(blog)/wallet/page.tsx
@@ -5,7 +5,7 @@ export const revalidate = 3600 * 24
 
 export default async function Page() {
   return (
-    <div className="pt-10">
+    <div className="pt-10 mx-auto md:max-w-3xl">
       <Wallet />
     </div>
   )
diff --git a/app/(creator-fi)/CreatorFiLayout.tsx b/app/(creator-fi)/CreatorFiLayout.tsx
index b7e91e46..13d9f468 100644
--- a/app/(creator-fi)/CreatorFiLayout.tsx
+++ b/app/(creator-fi)/CreatorFiLayout.tsx
@@ -3,18 +3,18 @@
 import { PropsWithChildren, Suspense } from 'react'
 import { useQueryEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
 import { useQueryEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
-import { useQuerySpace, useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { ClientOnly } from '@/components/ClientOnly'
 import LoadingCircle from '@/components/icons/loading-circle'
 import { Profile } from '@/components/Profile/Profile'
+import { SpaceType } from '@/lib/types'
 import Link from 'next/link'
 import { SpaceBasicInfo } from './Space/SpaceBasicInfo'
 import { SpaceNav } from './Space/SpaceNav'
 
 interface HeaderProps {
-  isLoading: boolean
+  space: SpaceType
 }
-function Header({ isLoading }: HeaderProps) {
+function Header({ space }: HeaderProps) {
   return (
     <header className="flex h-16 items-center justify-between px-4">
       <div className="flex flex-1 items-center gap-2 ">
@@ -36,10 +36,9 @@ function Header({ isLoading }: HeaderProps) {
             ></path>
           </svg>
         </Link>
-        {isLoading && <div>Loading..</div>}
-        {!isLoading && <SpaceBasicInfo />}
+        <SpaceBasicInfo space={space} />
       </div>
-      <SpaceNav></SpaceNav>
+      <SpaceNav />
       <div className="flex flex-1 justify-end">
         <Profile />
       </div>
@@ -47,26 +46,17 @@ function Header({ isLoading }: HeaderProps) {
   )
 }
 
-export function CreatorFiLayout({ children }: PropsWithChildren) {
+interface Props {
+  space: SpaceType
+}
+
+export function CreatorFiLayout({ children, space }: PropsWithChildren<Props>) {
   useQueryEthPrice()
   useQueryEthBalance()
-  useQuerySpace()
-  const { space } = useSpace()
-
-  if (!space?.address) {
-    return (
-      <>
-        <Header isLoading />
-        <div className="flex h-[80vh] items-center justify-center">
-          <LoadingCircle />
-        </div>
-      </>
-    )
-  }
 
   return (
     <>
-      <Header isLoading={false} />
+      <Header space={space} />
       {children}
     </>
   )
diff --git a/app/(creator-fi)/Space/HolderList.tsx b/app/(creator-fi)/Space/HolderList.tsx
index c449ccea..e440e0c4 100644
--- a/app/(creator-fi)/Space/HolderList.tsx
+++ b/app/(creator-fi)/Space/HolderList.tsx
@@ -1,16 +1,16 @@
 'use client'
 
+import { useHolders } from '@/app/(creator-fi)/hooks/useHolders'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Skeleton } from '@/components/ui/skeleton'
 import { UserAvatar } from '@/components/UserAvatar'
-import { useHolders } from '@/app/(creator-fi)/hooks/useHolders'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { precision } from '@/lib/math'
 import { cn, shortenAddress } from '@/lib/utils'
 
 interface Props {}
 
 export function HolderList({}: Props) {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { holders, isLoading } = useHolders()
 
   if (isLoading) {
@@ -38,7 +38,9 @@ export function HolderList({}: Props) {
             <div className="text-sm">{shortenAddress(item.account)}</div>
           </div>
           <div className="flex gap-1">
-            <span className="font-bold">{precision.toDecimal(item.balance).toFixed(2)}</span>
+            <span className="font-bold">
+              {precision.toDecimal(item.balance).toFixed(2)}
+            </span>
             {space.symbolName}
           </div>
         </div>
diff --git a/app/(creator-fi)/Space/SpaceAddress.tsx b/app/(creator-fi)/Space/SpaceAddress.tsx
index 914b55a5..7be73e61 100644
--- a/app/(creator-fi)/Space/SpaceAddress.tsx
+++ b/app/(creator-fi)/Space/SpaceAddress.tsx
@@ -2,12 +2,12 @@
 
 import { Badge } from '@/components/ui/badge'
 import { useCopyToClipboard } from '@/app/(creator-fi)/hooks/useCopyToClipboard'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { Copy } from 'lucide-react'
 import { toast } from 'sonner'
+import { useSpaceContext } from '@/components/SpaceContext'
 
 export function SpaceAddress() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { address = '' } = space
   const { copy } = useCopyToClipboard()
   return (
diff --git a/app/(creator-fi)/Space/SpaceBasicInfo.tsx b/app/(creator-fi)/Space/SpaceBasicInfo.tsx
index 0eef18f8..0761fee7 100644
--- a/app/(creator-fi)/Space/SpaceBasicInfo.tsx
+++ b/app/(creator-fi)/Space/SpaceBasicInfo.tsx
@@ -1,33 +1,27 @@
 'use client'
 
-import { useAddress } from '@/app/(creator-fi)/hooks/useAddress'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { Button } from '@/components/ui/button'
-import { getSpaceId } from '@/lib/getSpaceId'
+import { SpaceType } from '@/lib/types'
+import { getUrl } from '@/lib/utils'
 
-interface Props {}
-
-export function SpaceBasicInfo({}: Props) {
-  const address = useAddress()
-  const { space } = useSpace()
-  const spaceId = getSpaceId()
+interface Props {
+  space: SpaceType
+}
 
+export function SpaceBasicInfo({ space }: Props) {
   return (
     <div className="flex items-center gap-2">
       <img
         alt={space.name || ''}
         className="h-9 w-9 rounded-lg bg-foreground shadow-sm"
-        src={
-          space.logo ||
-          'https://public.blob.vercel-storage.com/eEZHAoPTOBSYGBE3/JRajRyC-PhBHEinQkupt02jqfKacBVHLWJq7Iy.png'
-        }
+        src={getUrl(space.logo)}
       />
 
       <div className="text-lg font-bold">{space.name}</div>
       {/* <SpaceAddress /> */}
       <Button size="sm" variant="secondary" className="rounded-full">
         <a
-          href={`https://www.respace.one/space/${spaceId}`}
+          href={`https://www.respace.one/space/${space.address}`}
           className="flex items-center gap-1"
           target="_blank"
         >
diff --git a/app/(creator-fi)/Space/SpaceNav.tsx b/app/(creator-fi)/Space/SpaceNav.tsx
index c4323aa2..cc3b6dd0 100644
--- a/app/(creator-fi)/Space/SpaceNav.tsx
+++ b/app/(creator-fi)/Space/SpaceNav.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -9,9 +8,6 @@ interface Props {}
 
 export function SpaceNav({}: Props) {
   const pathname = usePathname()
-  const { space } = useSpace()
-
-  if (!space) return null
 
   const Paths = {
     about: `/creator-fi`,
@@ -27,7 +23,7 @@ export function SpaceNav({}: Props) {
   const linkClassName = (path: string) =>
     cn(
       'inline-flex item-center justify-center py-1.5 border-b-2 px-3 -mb-[1px] border-transparent',
-      path === pathname && 'border-black border-zinc-400'
+      path === pathname && 'border-black border-zinc-400',
     )
 
   return (
diff --git a/app/(creator-fi)/Space/SpaceStats.tsx b/app/(creator-fi)/Space/SpaceStats.tsx
index d5fa1718..63ecfea9 100644
--- a/app/(creator-fi)/Space/SpaceStats.tsx
+++ b/app/(creator-fi)/Space/SpaceStats.tsx
@@ -3,14 +3,14 @@
 import { ReactNode } from 'react'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useEthPrice } from '@/app/(creator-fi)/hooks/useEthPrice'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { precision } from '@/lib/math'
 import { useBalance } from 'wagmi'
+import { useSpaceContext } from '@/components/SpaceContext'
 
 interface Props {}
 
 export function SpaceStats({}: Props) {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { ethPrice } = useEthPrice()
 
   return (
@@ -49,7 +49,7 @@ function StatsItem({ title, value }: StatsItemProps) {
 }
 
 function MarketCap() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data, isLoading } = useBalance({ address: space.address })
   const { ethPrice } = useEthPrice()
   if (isLoading || !data) return <Skeleton className="h-8"></Skeleton>
diff --git a/app/(creator-fi)/Space/TradeList.tsx b/app/(creator-fi)/Space/TradeList.tsx
index 1eee4d2a..2f1a6550 100644
--- a/app/(creator-fi)/Space/TradeList.tsx
+++ b/app/(creator-fi)/Space/TradeList.tsx
@@ -2,16 +2,16 @@
 
 import { Skeleton } from '@/components/ui/skeleton'
 import { UserAvatar } from '@/components/UserAvatar'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { useTrades } from '@/app/(creator-fi)/hooks/useTrades'
 import { precision } from '@/lib/math'
 import { cn, shortenAddress } from '@/lib/utils'
 import { TradeType } from '../constants'
+import { useSpaceContext } from '@/components/SpaceContext'
 
 interface Props {}
 
 export function TradeList({}: Props) {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { trades, isLoading } = useTrades()
 
   if (isLoading) {
diff --git a/app/(creator-fi)/Space/Transaction.tsx b/app/(creator-fi)/Space/Transaction.tsx
index 333eff36..65d30ec1 100644
--- a/app/(creator-fi)/Space/Transaction.tsx
+++ b/app/(creator-fi)/Space/Transaction.tsx
@@ -18,7 +18,7 @@ export function Transaction() {
   }
 
   return (
-    <div className="rounded-2xl bg-white p-4 shadow-sm dark:bg-zinc-950/50">
+    <div className="rounded-2xl bg-background p-4 shadow-sm">
       <div className="rounded-lg">
         <div className="mb-3 flex text-foreground/80">
           <button
diff --git a/app/(creator-fi)/SpaceToken/BuyBtn.tsx b/app/(creator-fi)/SpaceToken/BuyBtn.tsx
index 4b31d3fb..a7f2928d 100644
--- a/app/(creator-fi)/SpaceToken/BuyBtn.tsx
+++ b/app/(creator-fi)/SpaceToken/BuyBtn.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { useQueryEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { useTrades } from '@/app/(creator-fi)/hooks/useTrades'
 import LoadingDots from '@/components/icons/loading-dots'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import { WalletConnectButton } from '@/components/WalletConnectButton'
 import { useAddress } from '@/hooks/useAddress'
@@ -37,7 +37,7 @@ export const BuyBtn = ({
   const balance = useSpaceTokenBalance()
   const { refetch: refetchEth } = useQueryEthBalance()
   const address = useAddress()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const trade = useTrades()
   const wagmiConfig = useWagmiConfig()
   const checkChain = useCheckChain()
@@ -80,12 +80,13 @@ export const BuyBtn = ({
     )
   return (
     <Button
+      variant="brand"
       className="h-[50px] w-full rounded-xl"
       disabled={!isAmountValid || isInsufficientBalance || loading}
       onClick={() => onBuy()}
     >
       {loading ? (
-        <LoadingDots  />
+        <LoadingDots />
       ) : isInsufficientBalance ? (
         'Insufficient ETH balance'
       ) : isAmountValid ? (
diff --git a/app/(creator-fi)/SpaceToken/BuyPanel.tsx b/app/(creator-fi)/SpaceToken/BuyPanel.tsx
index acec6aaf..abc9fbca 100644
--- a/app/(creator-fi)/SpaceToken/BuyPanel.tsx
+++ b/app/(creator-fi)/SpaceToken/BuyPanel.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import { precision } from '@/lib/math'
 import { toFloorFixed } from '@/lib/utils'
@@ -13,7 +13,7 @@ export const BuyPanel = () => {
   const [ethAmount, setEthAmount] = useState<string>('')
   const [tokenAmount, setTokenAmount] = useState<string>('')
   const { ethBalance } = useEthBalance()
-  const { space } = useSpace()
+  const space = useSpaceContext()
 
   const isAmountValid = parseFloat(ethAmount) > 0 && parseFloat(tokenAmount) > 0
 
@@ -66,7 +66,7 @@ export const BuyPanel = () => {
         </div>
       </div>
 
-      <div className="mb-4 rounded-xl bg-gray-100 p-4 dark:bg-zinc-900">
+      <div className="mb-4 rounded-xl bg-foreground/5 p-4">
         <div className="text-sm">Buy</div>
         <AmountInput
           symbolName={space.symbolName}
diff --git a/app/(creator-fi)/SpaceToken/SellBtn.tsx b/app/(creator-fi)/SpaceToken/SellBtn.tsx
index ffdcb617..433829df 100644
--- a/app/(creator-fi)/SpaceToken/SellBtn.tsx
+++ b/app/(creator-fi)/SpaceToken/SellBtn.tsx
@@ -81,12 +81,13 @@ export const SellBtn = ({
     <>
       {address ? (
         <Button
+          variant="brand"
           className="h-[50px] w-full rounded-xl"
           disabled={!isAmountValid || isInsufficientBalance || loading}
           onClick={() => onSell()}
         >
           {loading ? (
-            <LoadingDots  />
+            <LoadingDots />
           ) : isInsufficientBalance ? (
             `Insufficient ${space.symbolName} balance`
           ) : isAmountValid ? (
diff --git a/app/(creator-fi)/SpaceToken/SellPanel.tsx b/app/(creator-fi)/SpaceToken/SellPanel.tsx
index 3a1b0fe0..ca4700e3 100644
--- a/app/(creator-fi)/SpaceToken/SellPanel.tsx
+++ b/app/(creator-fi)/SpaceToken/SellPanel.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import { precision } from '@/lib/math'
 import { toFloorFixed } from '@/lib/utils'
@@ -12,7 +12,7 @@ import { SpaceTokenBalance } from './SpaceTokenBalance'
 export const SellPanel = () => {
   const [ethAmount, setEthAmount] = useState<string>('')
   const [tokenAmount, setTokenAmount] = useState<string>('')
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data: tokenBalance } = useSpaceTokenBalance()
 
   const isAmountValid = parseFloat(tokenAmount) > 0
@@ -50,7 +50,7 @@ export const SellPanel = () => {
 
   return (
     <>
-      <div className="mb-2 rounded-xl bg-gray-100 p-4 dark:bg-zinc-900">
+      <div className="mb-2 rounded-xl bg-foreground/5 p-4">
         <div className="text-sm">Sell</div>
 
         <AmountInput
@@ -83,7 +83,7 @@ export const SellPanel = () => {
         </div>
       </div>
 
-      <div className="mb-4 rounded-xl bg-gray-100 p-4 dark:bg-zinc-900">
+      <div className="mb-4 rounded-xl bg-foreground/5 p-4">
         <div className="text-sm">Buy</div>
 
         <AmountInput
diff --git a/app/(creator-fi)/SpaceToken/hooks/useSpaceTokenBalance.ts b/app/(creator-fi)/SpaceToken/hooks/useSpaceTokenBalance.ts
index 561e879f..5c3021a0 100644
--- a/app/(creator-fi)/SpaceToken/hooks/useSpaceTokenBalance.ts
+++ b/app/(creator-fi)/SpaceToken/hooks/useSpaceTokenBalance.ts
@@ -1,5 +1,5 @@
 import { useAddress } from '@/app/(creator-fi)/hooks/useAddress'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
@@ -11,7 +11,7 @@ export const formatAmount = (value: string): string => {
 
 export function useSpaceTokenBalance() {
   const address = useAddress()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   return useReadContract({
     address: space.address as Address,
     abi: spaceAbi,
diff --git a/app/(creator-fi)/components/MemberDialog/MemberDialog.tsx b/app/(creator-fi)/components/MemberDialog/MemberDialog.tsx
index a77bf479..412eba0a 100644
--- a/app/(creator-fi)/components/MemberDialog/MemberDialog.tsx
+++ b/app/(creator-fi)/components/MemberDialog/MemberDialog.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { useQueryEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
+import { useSpaceContext } from '@/components/SpaceContext'
 import {
   Dialog,
   DialogContent,
@@ -7,8 +9,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { useQueryEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { MemberForm } from './MemberForm'
 import { useMemberDialog } from './useMemberDialog'
 
@@ -16,7 +16,7 @@ interface Props {}
 
 export function MemberDialog({}: Props) {
   const { isOpen, setIsOpen } = useMemberDialog()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   useQueryEthBalance()
 
   return (
@@ -26,8 +26,8 @@ export function MemberDialog({}: Props) {
         <DialogHeader>
           <DialogTitle>Subscription</DialogTitle>
           <div className="text-sm text-neutral-600">
-            Subscribe to become a member of the <span className="font-bold">{space.name}</span>{' '}
-            space.
+            Subscribe to become a member of the{' '}
+            <span className="font-bold">{space.name}</span> space.
           </div>
         </DialogHeader>
         <MemberForm space={space} />
diff --git a/app/(creator-fi)/components/MemberDialog/TokenSelect.tsx b/app/(creator-fi)/components/MemberDialog/TokenSelect.tsx
index 469426ee..079a9d6d 100644
--- a/app/(creator-fi)/components/MemberDialog/TokenSelect.tsx
+++ b/app/(creator-fi)/components/MemberDialog/TokenSelect.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { forwardRef } from 'react'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { useEthBalance } from '@/app/(creator-fi)/hooks/useEthBalance'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { useTokenBalance } from '@/app/(creator-fi)/hooks/useTokenBalance'
+import { useSpaceContext } from '@/components/SpaceContext'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { precision } from '@/lib/math'
 
 interface Props {
@@ -14,7 +14,7 @@ interface Props {
 
 export const TokenSelect = forwardRef<HTMLDivElement, Props>(
   function TokenSelect({ value, onChange }, ref) {
-    const { space } = useSpace()
+    const space = useSpaceContext()
     const { ethBalance } = useEthBalance()
     const { data } = useTokenBalance()
     const isEth = value === 'ETH'
diff --git a/app/(creator-fi)/components/NumberInput.tsx b/app/(creator-fi)/components/NumberInput.tsx
index 3d118e43..9839683f 100644
--- a/app/(creator-fi)/components/NumberInput.tsx
+++ b/app/(creator-fi)/components/NumberInput.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import { matchNumber } from '@/lib/utils'
-import { Input } from '../../../components/ui/input'
+import { Input } from '@/components/ui/input'
 
 export interface NumberInputProps
   extends Omit<
diff --git a/app/(creator-fi)/creator-fi/layout.tsx b/app/(creator-fi)/creator-fi/layout.tsx
index 4669e6a1..c8578416 100644
--- a/app/(creator-fi)/creator-fi/layout.tsx
+++ b/app/(creator-fi)/creator-fi/layout.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { ReactNode, useState } from 'react'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useSpaceContext } from '../../../components/SpaceContext'
 
 enum TabTypes {
   Holders = 'Holders',
@@ -12,11 +12,8 @@ enum TabTypes {
 export const dynamic = 'force-static'
 
 export default function Layout({ children }: { children: ReactNode }) {
-  const { space } = useSpace()
   const [type, setType] = useState(TabTypes.Trades)
 
-  if (!space) return null
-
   return (
     <div>
       <div className="mx-auto mt-4 flex w-full flex-col gap-12 p-3 sm:w-full">
diff --git a/app/(creator-fi)/creator-fi/members/page.tsx b/app/(creator-fi)/creator-fi/members/page.tsx
index 19ebef54..d7d49915 100644
--- a/app/(creator-fi)/creator-fi/members/page.tsx
+++ b/app/(creator-fi)/creator-fi/members/page.tsx
@@ -1,14 +1,12 @@
 'use client'
 
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
+import { useSpaceContext } from '../../../../components/SpaceContext'
 import { MemberList } from '../../Space/MemberList'
 
 export const dynamic = 'force-static'
 // export const revalidate = 3600 * 24
 
 export default function Page() {
-  const { space } = useSpace()
-
-  if (!space) return null
+  const space = useSpaceContext()
   return <MemberList space={space}></MemberList>
 }
diff --git a/app/(creator-fi)/creator-fi/page.tsx b/app/(creator-fi)/creator-fi/page.tsx
index 562b2e98..feab4d5a 100644
--- a/app/(creator-fi)/creator-fi/page.tsx
+++ b/app/(creator-fi)/creator-fi/page.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { PlateEditor } from '@/components/editor/plate-editor'
+import { useSpaceContext } from '@/components/SpaceContext'
 
 export const dynamic = 'force-static'
 
 export default function Page() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
 
   return <PlateEditor value={space.aboutJson} readonly />
 }
diff --git a/app/(creator-fi)/creator-fi/plans/AddPlanDialog/AddPlanForm.tsx b/app/(creator-fi)/creator-fi/plans/AddPlanDialog/AddPlanForm.tsx
index 9d984294..e7bab384 100644
--- a/app/(creator-fi)/creator-fi/plans/AddPlanDialog/AddPlanForm.tsx
+++ b/app/(creator-fi)/creator-fi/plans/AddPlanDialog/AddPlanForm.tsx
@@ -5,8 +5,8 @@ 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 { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import LoadingDots from '@/components/icons/loading-dots'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import {
   Form,
@@ -38,7 +38,7 @@ const FormSchema = z.object({
 export function AddPlanForm() {
   const [isLoading, setLoading] = useState(false)
   const { setIsOpen } = useAddPlanDialog()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { ethPrice } = useEthPrice()
   const wagmiConfig = useWagmiConfig()
   const checkChain = useCheckChain()
diff --git a/app/(creator-fi)/creator-fi/plans/PlanItem.tsx b/app/(creator-fi)/creator-fi/plans/PlanItem.tsx
index 520888da..5820dd5f 100644
--- a/app/(creator-fi)/creator-fi/plans/PlanItem.tsx
+++ b/app/(creator-fi)/creator-fi/plans/PlanItem.tsx
@@ -5,9 +5,9 @@ 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 { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 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 { useConnectModal } from '@rainbow-me/rainbowkit'
@@ -23,7 +23,7 @@ export function PlanItem({ plan }: Props) {
   const address = useAddress()
   const { ethPrice } = useEthPrice()
   const { setState } = useUpdatePlanDialog()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { isConnected } = useAccount()
   const { openConnectModal } = useConnectModal()
   const { subscriptions } = useSubscriptions()
diff --git a/app/(creator-fi)/creator-fi/plans/PlanList.tsx b/app/(creator-fi)/creator-fi/plans/PlanList.tsx
index 40d572e0..6fd4c6ad 100644
--- a/app/(creator-fi)/creator-fi/plans/PlanList.tsx
+++ b/app/(creator-fi)/creator-fi/plans/PlanList.tsx
@@ -3,7 +3,7 @@
 import { MemberDialog } from '@/app/(creator-fi)/components/MemberDialog/MemberDialog'
 import { useAddress } from '@/app/(creator-fi)/hooks/useAddress'
 import { usePlans } from '@/app/(creator-fi)/hooks/usePlans'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { AddPlanDialog } from './AddPlanDialog/AddPlanDialog'
 import { PlanItem } from './PlanItem'
 import { UpdatePlanDialog } from './UpdatePlanDialog/UpdatePlanDialog'
@@ -12,7 +12,7 @@ interface Props {}
 
 export function PlanList({}: Props) {
   const { plans, isLoading } = usePlans()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const address = useAddress()
 
   if (isLoading) return <div className="text-foreground/60">Loading...</div>
diff --git a/app/(creator-fi)/creator-fi/plans/UpdatePlanDialog/UpdatePlanForm.tsx b/app/(creator-fi)/creator-fi/plans/UpdatePlanDialog/UpdatePlanForm.tsx
index ae41a0cd..6665fcd3 100644
--- a/app/(creator-fi)/creator-fi/plans/UpdatePlanDialog/UpdatePlanForm.tsx
+++ b/app/(creator-fi)/creator-fi/plans/UpdatePlanDialog/UpdatePlanForm.tsx
@@ -6,9 +6,9 @@ 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 { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import { PlateEditor } from '@/components/editor/plate-editor'
 import LoadingDots from '@/components/icons/loading-dots'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import {
   Form,
@@ -44,7 +44,7 @@ export function UpdatePlanForm() {
   const [isLoading, setLoading] = useState(false)
   const wagmiConfig = useWagmiConfig()
   const { setIsOpen } = useUpdatePlanDialog()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { ethPrice } = useEthPrice()
   const { plan } = useUpdatePlanDialog()
   const { refetch } = usePlans()
diff --git a/app/(creator-fi)/creator-fi/staking/StakingPanel.tsx b/app/(creator-fi)/creator-fi/staking/StakingPanel.tsx
index f1a7f8ca..54236e97 100644
--- a/app/(creator-fi)/creator-fi/staking/StakingPanel.tsx
+++ b/app/(creator-fi)/creator-fi/staking/StakingPanel.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
 import LoadingDots from '@/components/icons/loading-dots'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { Button } from '@/components/ui/button'
 import { WalletConnectButton } from '@/components/WalletConnectButton'
 import { useCheckChain } from '@/hooks/useCheckChain'
@@ -25,7 +25,7 @@ export const StakingPanel = () => {
   const { writeContractAsync } = useWriteContract()
   const [tokenAmount, setTokenAmount] = useState<string>('')
   const { data: tokenBalance } = useSpaceTokenBalance()
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { isConnected } = useAccount()
   const wagmiConfig = useWagmiConfig()
   const checkChain = useCheckChain()
diff --git a/app/(creator-fi)/creator-fi/subscription-records/page.tsx b/app/(creator-fi)/creator-fi/subscription-records/page.tsx
index f8971f45..0bf9553f 100644
--- a/app/(creator-fi)/creator-fi/subscription-records/page.tsx
+++ b/app/(creator-fi)/creator-fi/subscription-records/page.tsx
@@ -1,12 +1,11 @@
 'use client'
 
-import { useSpace } from '@/app/(creator-fi)/hooks/useSpace'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { SubscriptionRecordList } from '../../Space/SubscriptionRecordList'
 
 export const dynamic = 'force-static'
 
 export default function Page() {
-  const { space } = useSpace()
-  if (!space) return
+  const space = useSpaceContext()
   return <SubscriptionRecordList space={space} />
 }
diff --git a/app/(creator-fi)/creator-fi/trade/page.tsx b/app/(creator-fi)/creator-fi/trade/page.tsx
index afe5be27..6b3be8a6 100644
--- a/app/(creator-fi)/creator-fi/trade/page.tsx
+++ b/app/(creator-fi)/creator-fi/trade/page.tsx
@@ -1,13 +1,20 @@
+import { getSite, getSpace } from '@/lib/fetchers'
 import { Transaction } from '../../Space/Transaction'
 
 export const dynamic = 'force-static'
 export const revalidate = 3600 * 24
 
-export default function Page() {
+export default async function Page() {
+  const site = await getSite()
+  if (!site?.spaceId) return null
+  const space = await getSpace(site.spaceId)
+
   return (
     <div className="flex h-[80vh] items-center justify-center">
       <div className="w-full space-y-8 md:w-[480px]">
-        <div className="text-center text-4xl font-bold">Trade token</div>
+        <div className="text-center text-4xl font-bold">
+          Trade ${space.symbol} token
+        </div>
         <Transaction />
       </div>
     </div>
diff --git a/app/(creator-fi)/hooks/useContributors.ts b/app/(creator-fi)/hooks/useContributors.ts
index 83e88ca6..663e32f5 100644
--- a/app/(creator-fi)/hooks/useContributors.ts
+++ b/app/(creator-fi)/hooks/useContributors.ts
@@ -1,10 +1,10 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
-import { useSpace } from './useSpace'
 
 export function useContributors() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data: contributors = [], ...rest } = useReadContract({
     address: space.address as Address,
     abi: spaceAbi,
diff --git a/app/(creator-fi)/hooks/useHolders.ts b/app/(creator-fi)/hooks/useHolders.ts
index 70949ad2..fadb82de 100644
--- a/app/(creator-fi)/hooks/useHolders.ts
+++ b/app/(creator-fi)/hooks/useHolders.ts
@@ -1,11 +1,11 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { RESPACE_SUBGRAPH_URL } from '@/lib/constants'
 import { Holder } from '@/lib/types'
 import { useQuery } from '@tanstack/react-query'
 import { gql, request } from 'graphql-request'
-import { useSpace } from './useSpace'
 
 export function useHolders() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
 
   const query = gql`
     query getHolders($spaceAddress: String!) {
diff --git a/app/(creator-fi)/hooks/useMembers.ts b/app/(creator-fi)/hooks/useMembers.ts
index 0ca302b7..9e118489 100644
--- a/app/(creator-fi)/hooks/useMembers.ts
+++ b/app/(creator-fi)/hooks/useMembers.ts
@@ -1,10 +1,10 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
-import { useSpace } from './useSpace'
 
 export function useMembers() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data: members = [], ...rest } = useReadContract({
     address: space.address as Address,
     abi: spaceAbi,
diff --git a/app/(creator-fi)/hooks/usePlans.ts b/app/(creator-fi)/hooks/usePlans.ts
index 635b40fb..34310185 100644
--- a/app/(creator-fi)/hooks/usePlans.ts
+++ b/app/(creator-fi)/hooks/usePlans.ts
@@ -1,4 +1,5 @@
 import { Plan, PlanInfo } from '@/app/(creator-fi)/domains/Plan'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { useWagmiConfig } from '@/hooks/useWagmiConfig'
 import { spaceAbi } from '@/lib/abi'
 import { isIPFSCID } from '@/lib/utils'
@@ -9,7 +10,7 @@ import { IPFS_GATEWAY } from '../constants'
 import { useSpace } from './useSpace'
 
 export function usePlans() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const wagmiConfig = useWagmiConfig()
   const { data: plans = [], ...rest } = useQuery({
     queryKey: ['plans', space.address],
diff --git a/app/(creator-fi)/hooks/useShareOrders.ts b/app/(creator-fi)/hooks/useShareOrders.ts
index 9984c09c..12dde0c2 100644
--- a/app/(creator-fi)/hooks/useShareOrders.ts
+++ b/app/(creator-fi)/hooks/useShareOrders.ts
@@ -1,10 +1,10 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
-import { useSpace } from './useSpace'
 
 export function useShareOrders() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data: orders = [], ...rest } = useReadContract({
     address: space.address as Address,
     abi: spaceAbi,
diff --git a/app/(creator-fi)/hooks/useSpace.ts b/app/(creator-fi)/hooks/useSpace.ts
index e95925c8..78001ab8 100644
--- a/app/(creator-fi)/hooks/useSpace.ts
+++ b/app/(creator-fi)/hooks/useSpace.ts
@@ -20,7 +20,6 @@ export function useSpace() {
 
 export function useQuerySpace() {
   const spaceId = getSpaceId()
-  console.log('=========spaceId:', spaceId)
 
   const { data, ...rest } = useQuery({
     queryKey: ['space'],
diff --git a/app/(creator-fi)/hooks/useSubscriptionRecords.ts b/app/(creator-fi)/hooks/useSubscriptionRecords.ts
index 70fe7f7e..8a69d735 100644
--- a/app/(creator-fi)/hooks/useSubscriptionRecords.ts
+++ b/app/(creator-fi)/hooks/useSubscriptionRecords.ts
@@ -1,11 +1,11 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { RESPACE_SUBGRAPH_URL } from '@/lib/constants'
 import { SubscriptionRecord, Trade } from '@/lib/types'
 import { useQuery } from '@tanstack/react-query'
 import { gql, request } from 'graphql-request'
-import { useSpace } from './useSpace'
 
 export function useSubscriptionRecords() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
 
   const query = gql`
     query getSubscriptionRecords($spaceAddress: String!) {
diff --git a/app/(creator-fi)/hooks/useSubscriptions.ts b/app/(creator-fi)/hooks/useSubscriptions.ts
index 4c79525a..4c9d9fff 100644
--- a/app/(creator-fi)/hooks/useSubscriptions.ts
+++ b/app/(creator-fi)/hooks/useSubscriptions.ts
@@ -1,11 +1,12 @@
 import { Subscription } from '@/app/(creator-fi)/domains/Subscription'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
 import { useSpace } from './useSpace'
 
 export function useSubscriptions() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data = [], ...rest } = useReadContract({
     address: space.address as Address,
     abi: spaceAbi,
diff --git a/app/(creator-fi)/hooks/useTokenBalance.ts b/app/(creator-fi)/hooks/useTokenBalance.ts
index 277492dc..78782b5a 100644
--- a/app/(creator-fi)/hooks/useTokenBalance.ts
+++ b/app/(creator-fi)/hooks/useTokenBalance.ts
@@ -1,15 +1,15 @@
 import { EthBalance } from '@/app/(creator-fi)/domains/EthBalance'
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { atom } from 'jotai'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
 import { useAddress } from './useAddress'
-import { useSpace } from './useSpace'
 
 export const ethBalanceAtom = atom<EthBalance>({} as EthBalance)
 
 export function useTokenBalance() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const address = useAddress()
   const res = useReadContract({
     address: space.address as Address,
diff --git a/app/(creator-fi)/hooks/useTrades.ts b/app/(creator-fi)/hooks/useTrades.ts
index 8475ea36..427c21ca 100644
--- a/app/(creator-fi)/hooks/useTrades.ts
+++ b/app/(creator-fi)/hooks/useTrades.ts
@@ -1,11 +1,11 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { RESPACE_SUBGRAPH_URL } from '@/lib/constants'
 import { Trade } from '@/lib/types'
 import { useQuery } from '@tanstack/react-query'
 import { gql, request } from 'graphql-request'
-import { useSpace } from './useSpace'
 
 export function useTrades() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
 
   const query = gql`
     query getTrades($spaceAddress: String!) {
diff --git a/app/(creator-fi)/hooks/useVestings.ts b/app/(creator-fi)/hooks/useVestings.ts
index 539b51bc..4625fc73 100644
--- a/app/(creator-fi)/hooks/useVestings.ts
+++ b/app/(creator-fi)/hooks/useVestings.ts
@@ -1,3 +1,4 @@
+import { useSpaceContext } from '@/components/SpaceContext'
 import { spaceAbi } from '@/lib/abi'
 import { Address } from 'viem'
 import { useReadContract } from 'wagmi'
@@ -13,7 +14,7 @@ export type Vesting = {
 }
 
 export function useVestings() {
-  const { space } = useSpace()
+  const space = useSpaceContext()
   const { data: vestings = [], ...rest } = useReadContract({
     address: space.address as Address,
     abi: spaceAbi,
diff --git a/app/(creator-fi)/layout.tsx b/app/(creator-fi)/layout.tsx
index 793ca6b0..23343f7c 100644
--- a/app/(creator-fi)/layout.tsx
+++ b/app/(creator-fi)/layout.tsx
@@ -1,17 +1,27 @@
-'use client'
-
+import { getSite, getSpace } from '@/lib/fetchers'
 import { StoreProvider } from '@/store'
 import { Toaster } from 'sonner'
+import { SpaceProvider } from '../../components/SpaceContext'
 import { CreatorFiLayout } from './CreatorFiLayout'
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const site = await getSite()
+  if (!site?.spaceId) return null
+  const space = await getSpace(site.spaceId)
+
   return (
     <div className="min-h-screen bg-foreground/5">
-      <StoreProvider>
-        <Toaster className="dark:hidden" />
-        <Toaster theme="dark" className="hidden dark:block" />
-        <CreatorFiLayout>{children}</CreatorFiLayout>
-      </StoreProvider>
+      <SpaceProvider space={space}>
+        <StoreProvider>
+          <Toaster className="dark:hidden" />
+          <Toaster theme="dark" className="hidden dark:block" />
+          <CreatorFiLayout space={space}>{children}</CreatorFiLayout>
+        </StoreProvider>
+      </SpaceProvider>
     </div>
   )
 }
diff --git a/components/PostActions/PostActions.tsx b/components/PostActions/PostActions.tsx
index 601fdbab..5e37a5dc 100644
--- a/components/PostActions/PostActions.tsx
+++ b/components/PostActions/PostActions.tsx
@@ -25,8 +25,8 @@ export function PostActions({ post, receivers }: Props) {
         <TippersDialog post={post} receivers={receivers} />
       </div>
       <div className="flex items-center gap-1">
-        {typeof post.creationId === 'number' && <CollectButton post={post} />}
         <TipTokenButton post={post} receivers={receivers} />
+        {typeof post.creationId === 'number' && <CollectButton post={post} />}
       </div>
     </div>
   )
diff --git a/components/PostActions/TipToken/TipTokenDialog.tsx b/components/PostActions/TipToken/TipTokenDialog.tsx
index c55b535a..2f4c3831 100644
--- a/components/PostActions/TipToken/TipTokenDialog.tsx
+++ b/components/PostActions/TipToken/TipTokenDialog.tsx
@@ -11,6 +11,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { useAllocationCap } from '@/hooks/useAllocationCap'
+import { useTipInfo } from '@/hooks/useTipInfo'
 import { useTipStats } from '@/hooks/useTipStats'
 import { useWagmiConfig } from '@/hooks/useWagmiConfig'
 import { tipAbi } from '@/lib/abi'
@@ -22,6 +23,7 @@ import { toFloorFixed } from '@/lib/utils'
 import { Post } from '@penxio/types'
 import { readContract, waitForTransactionReceipt } from '@wagmi/core'
 import { SetStateAction } from 'jotai'
+import { useParams } from 'next/navigation'
 import pRetry, { AbortError } from 'p-retry'
 import { toast } from 'sonner'
 import { Address } from 'viem'
@@ -49,6 +51,7 @@ export function TipTokenDialog({
   receivers,
 }: Props) {
   const [amount, setAmount] = useState('1')
+  const params = useParams()
   const { address = '' } = useAccount()
   let { data: executionFee } = useReadContract({
     address: addressMap.Tip,
@@ -56,7 +59,8 @@ export function TipTokenDialog({
     functionName: 'executionFee',
   })
 
-  const { refetch: refetchTipInfo } = useTipStats(receivers)
+  const { refetch: refetchTipStats } = useTipStats(receivers)
+  const { refetch: refetchTipInfo } = useTipInfo(post.id)
   const { data: data, isLoading: isLoadingCap, refetch } = useAllocationCap()
 
   const { writeContractAsync } = useWriteContract()
@@ -122,7 +126,11 @@ export function TipTokenDialog({
       toast.success('Tip $PEN successfully')
       await refetch()
       setTimeout(() => {
-        refetchTipInfo()
+        if (params?.slug) {
+          refetchTipInfo()
+        } else {
+          refetchTipStats()
+        }
       }, 4000)
     } catch (error) {
       console.log('====error>>>:', error)
diff --git a/components/PostActions/TippedAmount.tsx b/components/PostActions/TippedAmount.tsx
index a411dd63..dd575469 100644
--- a/components/PostActions/TippedAmount.tsx
+++ b/components/PostActions/TippedAmount.tsx
@@ -2,9 +2,12 @@
 
 import { Dispatch, SetStateAction } from 'react'
 import { Skeleton } from '@/components/ui/skeleton'
+import { useTipInfo } from '@/hooks/useTipInfo'
 import { useTipStats } from '@/hooks/useTipStats'
 import { precision } from '@/lib/math'
 import { Post } from '@penxio/types'
+import { DollarSign } from 'lucide-react'
+import { useParams } from 'next/navigation'
 
 interface Props {
   post: Post
@@ -12,7 +15,31 @@ interface Props {
   setIsOpen: Dispatch<SetStateAction<boolean>>
 }
 
-export function TippedAmount({ post, receivers, setIsOpen }: Props) {
+export function TippedAmount(props: Props) {
+  const params = useParams()
+  const slug = params.slug
+
+  if (slug) {
+    return <TippedAmountInPostDetail {...props} />
+  }
+  return <TippedAmountInHome {...props} />
+}
+
+export function TippedAmountInPostDetail({ post, setIsOpen }: Props) {
+  const { data, isLoading } = useTipInfo(post.id)
+  if (isLoading) return <Skeleton className="h-6 w-12" />
+  return (
+    <div
+      className="flex items-center justify-between text-foreground gap-1 cursor-pointer opacity-70 hover:opacity-100"
+      onClick={() => setIsOpen(true)}
+    >
+      <DollarSign size={18} />
+      <div> {!data ? '0' : precision.toDecimal(data?.totalAmount)}</div>
+    </div>
+  )
+}
+
+export function TippedAmountInHome({ post, receivers, setIsOpen }: Props) {
   const { data = [], isLoading } = useTipStats(receivers)
   if (isLoading) return <Skeleton className="h-6 w-12" />
   const item = data.find((i) => i.uri === post.id)
@@ -22,7 +49,8 @@ export function TippedAmount({ post, receivers, setIsOpen }: Props) {
       className="flex items-center justify-between text-foreground gap-1 cursor-pointer opacity-70 hover:opacity-100"
       onClick={() => setIsOpen(true)}
     >
-      <span className="i-[ri--quill-pen-ai-fill]"></span>
+      {/* <span className="i-[ri--quill-pen-ai-fill]"></span> */}
+      <DollarSign size={18} />
       <div> {!data ? '0' : precision.toDecimal(item?.totalAmount)}</div>
     </div>
   )
diff --git a/components/SpaceContext.tsx b/components/SpaceContext.tsx
new file mode 100644
index 00000000..d5e8a701
--- /dev/null
+++ b/components/SpaceContext.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { createContext, PropsWithChildren, useContext } from 'react'
+import { SpaceType } from '@/lib/types'
+import { Space } from '../app/(creator-fi)/domains/Space'
+
+export const SpaceContext = createContext({} as Space)
+
+interface Props {
+  space: SpaceType
+}
+
+export const SpaceProvider = ({
+  space,
+  children,
+}: PropsWithChildren<Props>) => {
+  return (
+    <SpaceContext.Provider value={new Space(space)}>
+      {children}
+    </SpaceContext.Provider>
+  )
+}
+
+export function useSpaceContext() {
+  return useContext(SpaceContext)
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 9e13a890..293a251e 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg w-11/12',
         className,
       )}
       {...props}
diff --git a/hooks/useTipStats.ts b/hooks/useTipStats.ts
index 5b73dfc8..37088431 100644
--- a/hooks/useTipStats.ts
+++ b/hooks/useTipStats.ts
@@ -8,7 +8,7 @@ type TipInfo = {
   uri: string
 }
 
-export function useTipStats(receivers: string[]) {
+export function useTipStats(receivers: string[] = []) {
   const query = gql`
     query geTips($receivers: [Bytes]) {
       tips(where: { receiver_in: $receivers }) {
@@ -30,7 +30,7 @@ export function useTipStats(receivers: string[]) {
         },
       })
     },
-    enabled: !!receivers,
+    enabled: receivers.length > 0,
   })
 
   return {
diff --git a/lib/fetchers.ts b/lib/fetchers.ts
index 51fb4f08..8702d9bc 100644
--- a/lib/fetchers.ts
+++ b/lib/fetchers.ts
@@ -1,7 +1,9 @@
 import prisma from '@/lib/prisma'
 import { getSite as getSiteInfo } from '@/server/lib/getSite'
+import ky from 'ky'
 import { unstable_cache } from 'next/cache'
-import { PostStatus } from './constants'
+import { PostStatus, RESPACE_BASE_URI } from './constants'
+import { SpaceType } from './types'
 import { getUrl } from './utils'
 
 export async function getSite() {
@@ -113,3 +115,19 @@ export async function getTagWithPost(name: string) {
 //     },
 //   )()
 // }
+
+export async function getSpace(spaceId: string) {
+  return await unstable_cache(
+    async () => {
+      const response = await ky
+        .get(RESPACE_BASE_URI + `/api/get-space?address=${spaceId}`)
+        .json<SpaceType>()
+      return response
+    },
+    [`space-${spaceId}`],
+    {
+      revalidate: 10,
+      tags: [`space-${spaceId}`],
+    },
+  )()
+}
diff --git a/next.config.js b/next.config.js
index 8c1a6d80..9cf68b79 100644
--- a/next.config.js
+++ b/next.config.js
@@ -23,8 +23,8 @@ module.exports = {
     'penx-theme-micro',
     'penx-theme-card',
     'penx-theme-minimal',
-    'penx-theme-photo',
     'penx-theme-garden',
+    'penx-theme-photo',
   ],
 
   images: {