Feat refactor 2.0

next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	output: 'standalone',
+	// output: 'standalone',
 	images: {
 		remotePatterns: [
 			{

package.json

@@ -7,7 +7,7 @@
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint",
-			"format": "prettier --write ."
+		"format": "prettier --write ."
 	},
 	"dependencies": {
 		"@bbachain/buffer-layout": "^1.0.0",
@@ -35,9 +35,12 @@
 		"@radix-ui/react-toggle": "^1.1.9",
 		"@radix-ui/react-toggle-group": "^1.1.10",
 		"@radix-ui/react-tooltip": "^1.2.0",
+		"@radix-ui/react-visually-hidden": "^1.2.3",
 		"@tabler/icons-react": "^3.11.0",
+		"@tanstack/query-async-storage-persister": "^5.89.0",
 		"@tanstack/react-query": "^5.51.11",
 		"@tanstack/react-query-next-experimental": "^5.51.11",
+		"@tanstack/react-query-persist-client": "^5.89.0",
 		"@tanstack/react-table": "^8.21.3",
 		"axios": "^1.8.4",
 		"class-variance-authority": "^0.7.1",
@@ -50,6 +53,7 @@
 		"jotai": "^2.9.1",
 		"lucide-react": "^0.487.0",
 		"moment": "^2.30.1",
+		"motion": "^12.23.24",
 		"next": "14.2.5",
 		"next-themes": "^0.4.4",
 		"react": "^18",

src/app/(walletConnected)/layout.tsx

@@ -1,8 +1,6 @@
 'use client'
 
 import { useWallet } from '@bbachain/wallet-adapter-react'
-import { Loader2 } from 'lucide-react'
-import { useState, useEffect } from 'react'
 import { CiWallet } from 'react-icons/ci'
 
 import ThemeImage from '@/components/common/ThemeImage'
@@ -13,35 +11,27 @@ import { useWalletListDialog } from '@/stores/walletDialog'
 export default function WalletConnectedLayout({ children }: { children: React.ReactNode }) {
 	const { publicKey: address } = useWallet()
 	const { openWalletList } = useWalletListDialog()
-	const [mounted, setMounted] = useState<boolean>(false)
-	useEffect(() => setMounted(true), [])
-
-	if (!mounted) {
-		return (
-			<div className="h-full w-full mt-60 flex flex-col space-y-3 items-center justify-center">
-				<Loader2 className="animate-spin" width={40} height={40} />
-				<p>Please wait...</p>
-			</div>
-		)
-	}
 
 	if (!address)
 		return (
-			<div className="md:mt-40 mt-20 md:mb-20 flex justify-center mb-5 px-5">
-				<Card className="md:w-[564px] w-full border-hover-green border-[1px] rounded-[16px] md:p-6 p-3 drop-shadow-lg">
+			<div className="h-min-screen px-4 h-full w-full flex justify-center">
+				<Card className="md:w-[564px] w-full h-full border-hover-green border-[1px] rounded-[16px] md:p-6 p-3 drop-shadow-lg">
 					<CardHeader className="p-0">
 						<CardTitle className="md:text-4xl text-xl text-center">Wallet Not Connected</CardTitle>
 					</CardHeader>
 					<CardContent className="px-0 py-8 flex flex-col space-y-2.5 justify-center items-center">
 						<ThemeImage
 							lightSrc={'/wallet-not-connected-light.svg'}
 							darkSrc={'/wallet-not-connected-dark.svg'}
+							quality={45}
+							priority
 							width={218}
 							height={218}
 							alt="wallet not connected logo"
 						/>
 						<p className="text-center text-sm text-main-black">
-							Please connect your wallet to use the Quick Token <br /> Generator and access features.
+							Please connect your wallet to use the Quick Token <br /> Generator and access
+							features.
 						</p>
 					</CardContent>
 					<CardFooter className="p-0">
@@ -58,5 +48,5 @@ export default function WalletConnectedLayout({ children }: { children: React.Re
 			</div>
 		)
 
-	return <div className="md:mt-40 mt-20 md:mb-20 mb-5">{children}</div>
+	return <div className="h-min-screen h-full w-full">{children}</div>
 }