diff --git a/packages/ui/README.md b/packages/ui/README.md
index 79f1e14..86c87ad 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -70,9 +70,10 @@ A beautiful and modern web application for creating and managing Token-2022 toke
ui/
├── src/
│ ├── app/ # Next.js app directory
-│ │ ├── create/ # Token creation pages
-│ │ ├── manage/ # Token management pages
-│ │ └── dashboard/ # Main dashboard
+│ │ ├── dashboard/ # Main dashboard
+│ │ │ ├── create/ # Token creation pages
+│ │ │ └── manage/ # Token management pages
+│ │ └── globals.css # Global styles
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base UI components
│ │ ├── forms/ # Form components
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 09b32f1..083ef30 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,8 +14,13 @@
"@mosaic/sdk": "workspace:*",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-slot": "^1.0.2",
+ "@solana/wallet-adapter-base": "^0.9.27",
+ "@solana/wallet-adapter-react": "^0.15.39",
+ "@solana/wallet-adapter-react-ui": "^0.9.39",
+ "@solana/wallet-adapter-wallets": "^0.19.37",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
+ "gill": "^0.10.2",
"lucide-react": "^0.294.0",
"next": "15.4.5",
"next-themes": "^0.2.1",
diff --git a/packages/ui/src/app/dashboard/create/page.tsx b/packages/ui/src/app/dashboard/create/page.tsx
new file mode 100644
index 0000000..5f0bcd3
--- /dev/null
+++ b/packages/ui/src/app/dashboard/create/page.tsx
@@ -0,0 +1,3 @@
+export default function CreatePage() {
+ return
Dashboard
;
+}
diff --git a/packages/ui/src/app/dashboard/manage/page.tsx b/packages/ui/src/app/dashboard/manage/page.tsx
new file mode 100644
index 0000000..e59cf2d
--- /dev/null
+++ b/packages/ui/src/app/dashboard/manage/page.tsx
@@ -0,0 +1,3 @@
+export default function ManagePage() {
+ return Dashboard
;
+}
diff --git a/packages/ui/src/app/dashboard/page.tsx b/packages/ui/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..b2a8e19
--- /dev/null
+++ b/packages/ui/src/app/dashboard/page.tsx
@@ -0,0 +1,212 @@
+'use client';
+
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Plus, Settings, Coins } from 'lucide-react';
+import Link from 'next/link';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+
+interface Token {
+ name?: string;
+ symbol?: string;
+ address?: string;
+ supply?: string;
+ type?: string;
+}
+
+export default function DashboardPage() {
+ const { connected, publicKey } = useWallet();
+ const walletConnected = connected && !!publicKey;
+
+ return walletConnected ? (
+
+ ) : (
+
+ );
+}
+
+function DashboardConnected({ publicKey }: { publicKey: string }) {
+ // Placeholder: Replace with actual token fetching logic
+ const [tokens, setTokens] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ // Simulate loading tokens
+ setTimeout(() => {
+ // Placeholder: Replace with actual token fetching
+ setTokens([]); // Empty array for "no tokens" state
+ setLoading(false);
+ }, 1000);
+ }, []);
+
+ if (loading) {
+ return (
+
+
+
+
+
Loading your tokens...
+
+
+
+ );
+ }
+
+ if (tokens.length === 0) {
+ return (
+
+
+
+
Welcome to Mosaic
+
+ Create your first token to get started with tokenization on Solana
+
+
+
+
+
+
+
+
+ Stablecoin
+
+
+
+
+ Create a regulatory-compliant stablecoin with transfer
+ restrictions and metadata management.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arcade Token
+
+
+
+
+ Deploy a gaming or utility token with custom extensions and
+ features.
+
+
+
+
+
+
+
+
+
+
+
+
+ Public Key: {publicKey.slice(0, 8)}...{publicKey.slice(-8)}
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
Your Tokens
+
+ Manage your created tokens and their extensions
+
+
+
+
+
+
+
+
+ {tokens.map((token, index) => (
+
+
+
+
+
+
+
+ {token.name || `Token ${index + 1}`}
+
+ {token.symbol || 'TKN'}
+
+
+
+
+
+
+
+ Supply:
+ {token.supply || '1,000,000'}
+
+
+ Type:
+ {token.type || 'Standard'}
+
+
+ Status:
+ Active
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+}
+
+function DashboardDisconnected() {
+ return (
+
+
+
Welcome to Mosaic
+
+ Please connect your Solana wallet to access the dashboard.
+
+
+
+ );
+}
diff --git a/packages/ui/src/app/layout.tsx b/packages/ui/src/app/layout.tsx
index b17f38b..a3f5154 100644
--- a/packages/ui/src/app/layout.tsx
+++ b/packages/ui/src/app/layout.tsx
@@ -1,11 +1,12 @@
import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { AR_One_Sans } from 'next/font/google';
import './globals.css';
import { ThemeProvider } from '@/components/theme-provider';
import { Header } from '@/components/layout/header';
import { Footer } from '@/components/layout/footer';
+import { SolanaProvider } from '@/components/solana-provider';
-const inter = Inter({ subsets: ['latin'] });
+const ar = AR_One_Sans({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Mosaic - Tokenization Engine',
@@ -19,21 +20,23 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
);
}
diff --git a/packages/ui/src/components/layout/header.tsx b/packages/ui/src/components/layout/header.tsx
index 52a8655..735bf8d 100644
--- a/packages/ui/src/components/layout/header.tsx
+++ b/packages/ui/src/components/layout/header.tsx
@@ -1,17 +1,32 @@
'use client';
-
import { ModeToggle } from '@/components/mode-toggle';
import { Button } from '@/components/ui/button';
+import { useRouter, usePathname } from 'next/navigation';
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
+import Link from 'next/link';
export function Header() {
+ const router = useRouter();
+ const pathname = usePathname();
+
return (