feat: rm nouse & adjust token code

app/~/space/[id]/(home)/layout.tsx

@@ -2,7 +2,7 @@
 
 import { ReactNode } from 'react'
 import { NavbarWrapper } from '@/components/Navbar/NavbarWrapper'
-import { useChainSpace, useQueryChainSpace } from '@/hooks/useChainSpace'
+import { useChainSpace } from '@/hooks/useChainSpace'
 import { SpaceInfo } from '../Space/SpaceInfo'
 import { TradeList } from '../Space/TradeList'
 import { Transaction } from '../Transaction'
@@ -13,7 +13,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   if (!space) return null
 
   return (
-    <div className="">
+    <div>
       <NavbarWrapper className="gap-1"></NavbarWrapper>
       <div className="flex lg:flex-row flex-col-reverse w-full sm:w-full xl:w-[1200px]  mx-auto gap-12 mt-10 p-3 lg:p-0">
         <div className="flex flex-col gap-6 md:flex-1 rounded-2xl w-full md:w-auto">

app/~/space/[id]/Transaction.tsx

@@ -1,13 +1,10 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useState } from 'react'
 import { BuyPanel } from '@/components/spaceToken/BuyPanel'
 import { SellPanel } from '@/components/spaceToken/SellPanel'
-import { useAddress } from '@/hooks/useAddress'
 import { useSpace } from '@/hooks/useSpace'
-import { precision } from '@/lib/math'
-import { Address } from 'viem'
-import { useAccount, useBalance } from 'wagmi'
+import { useAccount } from 'wagmi'
 
 enum Direction {
   buy = 1,
@@ -16,7 +13,6 @@ enum Direction {
 
 export function Transaction() {
   const { space } = useSpace()
-  const address = useAddress()
   const { isConnected } = useAccount()
   const [direction, setDirection] = useState<Direction>(Direction.buy)
 

app/~/space/[id]/channel/[channelId]/MessagePanel.tsx

@@ -1,23 +1,10 @@
 import { useEffect, useRef, useState } from 'react'
-import { UserAvatar } from '@/components/UserAvatar'
-import { useMembers } from '@/hooks/useMembers'
 import { IMessage, useMessages } from '@/hooks/useMessages'
 import { trpc } from '@/lib/trpc'
-import { shortenAddress } from '@/lib/utils'
-import { Member, User } from '@prisma/client'
 import { toast } from 'sonner'
 import { useThrottledCallback } from 'use-debounce'
 import { MessageItem } from './MessageItem'
 
-type MemberWithUser = Member & {
-  user: {
-    name: string | null
-    ensName: string | null
-    email: string | null
-    address: string
-  }
-}
-
 interface Props {
   channelId: string
 }
@@ -90,8 +77,6 @@ export const MessagePanel = ({ channelId }: Props) => {
     }
   }, [messages])
 
-  // console.log('%c=render:', 'color:red', getMessagesState(channelId))
-
   return (
     <div ref={containerRef} className="flex-grow overflow-y-auto">
       {messages.length ? (

app/~/space/[id]/channel/[channelId]/SendMessagePanel.tsx

@@ -32,7 +32,6 @@ export const SendMessagePanel = ({ userId, channelId }: Props) => {
         })
 
         setMsgContent('')
-        // console.log('%c=isOK ?????', 'color:red', isOk)
       } else {
         console.error('SocketConnector not init')
         toast.error('Connector not init')

components/spaceToken/BuyPanel.tsx

@@ -55,7 +55,7 @@ export const BuyPanel = ({ space, isConnected }: Props) => {
         <div className="text-sm">Sell</div>
         <AmountInput
           symbolName="ETH"
-          icon={<img src="/eth.png" alt="ETH" className="w-5 h-auto" />}
+          icon={<img src="/eth.png" alt="ETH" className="w-5 h-auto rounded-2xl" />}
           value={ethAmount}
           onChange={(value) => handleEthChange(value)}
         />
@@ -80,7 +80,7 @@ export const BuyPanel = ({ space, isConnected }: Props) => {
             <img
               src={space.logo || ''}
               alt={space.symbolName}
-              className="w-5 h-auto"
+              className="w-5 h-auto rounded-2xl"
             />
           }
           value={tokenAmount}

components/spaceToken/SellBtn.tsx

@@ -79,9 +79,7 @@ export const SellBtn = ({
       handleSwap()
       toast.success(`${space?.name} sell successfully!`)
     } catch (error) {
-      const msg = extractErrorMessage(error)
-      console.log('%c=error', 'color:red', error, 'msg', msg)
-      toast.error(msg)
+      toast.error(extractErrorMessage(error) || 'sell error')
     }
     setLoading(false)
   }

components/spaceToken/SellPanel.tsx

@@ -1,15 +1,12 @@
-import { ChangeEvent, useMemo, useState } from 'react'
+import { useState } from 'react'
 import { useChainSpace, useQueryChainSpace } from '@/hooks/useChainSpace'
-import { useEthBalance, useQueryEthBalance } from '@/hooks/useEthBalance'
 import { precision } from '@/lib/math'
 import { toFloorFixed } from '@/lib/utils'
 import { Space } from '@prisma/client'
-import { Address } from 'viem'
 import { Button } from '../ui/button'
 import { AmountInput } from './AmountInput'
 import { EthBalance } from './EthBalance'
 import {
-  formatAmount,
   useSpaceTokenBalance,
 } from './hooks/useSpaceTokenBalance'
 import { SellBtn } from './SellBtn'
@@ -25,15 +22,14 @@ export const SellPanel = ({ space, isConnected }: Props) => {
   const [tokenAmount, setTokenAmount] = useState<string>('')
   const { space: chainSpace } = useChainSpace()
   const { refetch: refetchChainSpace } = useQueryChainSpace()
+  const { data: tokenBalance } = useSpaceTokenBalance()
 
   const isAmountValid = parseFloat(tokenAmount) > 0
 
-  const { data: tokenBalance } = useSpaceTokenBalance()
+  const isInsufficientBalance =
+    precision.toDecimal(tokenBalance! || '0') < parseFloat(tokenAmount)
 
-  const handleEthAmount = (value: string) => {
-    // Validate and format input
-    // if (/^\d*\.?\d*$/.test(value) && !value.startsWith('.')) { }
-  }
+  const handleEthAmount = (value: string) => {}
 
   const handleTokenChange = (value: string) => {
     setTokenAmount(value)
@@ -61,9 +57,6 @@ export const SellPanel = ({ space, isConnected }: Props) => {
     setEthAmount(toFloorFixed(ethAmountDecimal, 4).toString())
   }
 
-  const isInsufficientBalance =
-    precision.toDecimal(tokenBalance! || '0') < parseFloat(tokenAmount)
-
   return (
     <>
       <div className="mb-2 bg-gray-100 rounded-xl p-4">
@@ -75,7 +68,7 @@ export const SellPanel = ({ space, isConnected }: Props) => {
             <img
               src={space.logo || ''}
               alt={space.symbolName}
-              className="w-5 h-auto"
+              className="w-5 h-auto rounded-2xl"
             />
           }
           value={tokenAmount}
@@ -103,7 +96,7 @@ export const SellPanel = ({ space, isConnected }: Props) => {
         <AmountInput
           symbolName="ETH"
           disabled
-          icon={<img src="/eth.png" alt="ETH" className="w-5 h-auto" />}
+          icon={<img src="/eth.png" alt="ETH" className="w-5 h-auto rounded-2xl" />}
           value={ethAmount}
           onChange={(value) => handleEthAmount(value)}
         />

lib/socket/socketConnector.ts

@@ -191,7 +191,6 @@ export class SocketConnector {
 
   public disconnect(): void {
     if (this.socket) {
-      // console.log('%c=Manually disconnecting WebSocket', 'color:cyan');
       this.socket.disconnect()
       this.connectStatus = {
         type: ConnectStatusType.disconnect,