-
-
-
-
-
-
-
-
- {token.address && (
-
-
-
- )}
- onDelete(token.address!)} className="text-red-600">
-
-
-
-
-
-
-
- {token.name || `Token ${index + 1}`}
- {token.symbol || 'TKN'}
-
-
-
-
- Type:
-
-
- {getTokenPatternsLabel(token.detectedPatterns)}
- {token.detectedPatterns && token.detectedPatterns.length > 1 && (
-
- {token.detectedPatterns.length} patterns
-
- )}
-
-
- Supply:
-
-
- {isLoadingSupply ? 'Loading...' : currentSupply}
-
-
-
- Decimals:
- {token.decimals || '6'}
-
-
- Created:
- {formatDate(token.createdAt)}
-
-
- Status:
- Active
-
- {token.extensions && token.extensions.length > 0 && (
-
- Extensions:
-
- )}
-
- {token.extensions.slice(0, 2).map((ext, idx) => (
-
- {ext}
-
- ))}
- {token.extensions.length > 2 && (
-
- +{token.extensions.length - 2} more
-
- )}
-
-
-
- onInputChange('mintAuthority', e.target.value)}
- />
-
-
-
- onInputChange('metadataAuthority', e.target.value)}
- />
-
-
-
- onInputChange('pausableAuthority', e.target.value)}
- />
-
-
-
- onInputChange('permanentDelegateAuthority', e.target.value)}
- />
-
-
-
-
-
- onInputChange('name', e.target.value)}
- required
- />
-
-
-
- onInputChange('symbol', e.target.value)}
- required
- />
-
-
-
-
-
-
- onInputChange('decimals', e.target.value)}
- min="0"
- max="9"
- required
- />
-
-
-
- onInputChange('uri', e.target.value)}
- />
-
-
-
-
-
- ) : (
-
- )}
-
- );
-}
diff --git a/apps/app/src/app/dashboard/create/arcade-token/page.tsx b/apps/app/src/app/dashboard/create/arcade-token/page.tsx
deleted file mode 100644
index 51e603d..0000000
--- a/apps/app/src/app/dashboard/create/arcade-token/page.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client';
-
-import { useContext } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import Link from 'next/link';
-import { CreateTemplateSidebar } from '@/components/CreateTemplateSidebar';
-import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
-import { ChainContext } from '@/context/ChainContext';
-import { useWalletAccountTransactionSendingSigner } from '@solana/react';
-import { UiWalletAccount } from '@wallet-standard/react';
-import { ArcadeTokenCreateForm } from '@/app/dashboard/create/arcade-token/ArcadeTokenCreateForm';
-
-// Component that only renders when wallet is available
-function ArcadeTokenCreateWithWallet({
- selectedWalletAccount,
- currentChain,
-}: {
- selectedWalletAccount: UiWalletAccount;
- currentChain: string;
-}) {
- // Now we can safely call the hook because we know we have valid inputs
- const transactionSendingSigner = useWalletAccountTransactionSendingSigner(
- selectedWalletAccount,
- currentChain as `solana:${string}`,
- );
-
- return (
-
-
- );
-}
-
-// Simple wrapper component that shows a message when wallet is not connected
-function ArcadeTokenCreatePage() {
- const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
- const { chain: currentChain } = useContext(ChainContext);
-
- // If wallet is connected and chain is available, render the full component
- if (selectedWalletAccount && currentChain) {
- return (
-
-
-
-
-
-
-
-
-
-
- Create Arcade Token
-Configure your arcade token parameters
-
-
-
-
-
-
-
- );
-}
-
-export default ArcadeTokenCreatePage;
diff --git a/apps/app/src/app/dashboard/create/page.tsx b/apps/app/src/app/dashboard/create/page.tsx
deleted file mode 100644
index c21bffd..0000000
--- a/apps/app/src/app/dashboard/create/page.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client';
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { DollarSign, Gamepad2, CandlestickChart, Upload } from 'lucide-react';
-import Link from 'next/link';
-
-export default function CreatePage() {
- return (
-
-
-
- Wallet Required
- Please connect your wallet to create an arcade token
-
-
-
-
-
-
-
-
-
-
-
-
-
- Create Arcade Token
-Configure your arcade token parameters
-- To create an arcade token, you need to connect a wallet first. Please use the wallet - connection button in the top navigation. -
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/create/stablecoin/StablecoinAuthorityParams.tsx b/apps/app/src/app/dashboard/create/stablecoin/StablecoinAuthorityParams.tsx
deleted file mode 100644
index 5e79aa3..0000000
--- a/apps/app/src/app/dashboard/create/stablecoin/StablecoinAuthorityParams.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useState } from 'react';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { ChevronRight } from 'lucide-react';
-import { StablecoinOptions } from '@/types/token';
-
-interface StablecoinAuthorityParamsProps {
- options: StablecoinOptions;
- onInputChange: (field: string, value: string) => void;
-}
-
-export function StablecoinAuthorityParams({ options, onInputChange }: StablecoinAuthorityParamsProps) {
- const [showOptionalParams, setShowOptionalParams] = useState(false);
-
- return (
-
-
-
-
-
- Create New Token
-Choose the type of token you want to create
-
-
-
-
-
-
-
- Create a regulatory-compliant stablecoin with transfer restrictions and metadata
- management.
-
-
-
-
-
-
-
-
-
-
-
- Deploy a gaming or utility token with custom extensions and features.
-
-
-
-
-
-
-
-
-
-
-
- Create a compliant security token with scaled UI amounts and core controls.
-
-
-
-
-
-
-
-
-
-
-
- Import an existing token to manage it through the Mosaic platform.
-
-
-
-
-
-
- Stablecoin
-
-
- Arcade Token
-
-
- Tokenized Security
-
-
- Import Existing Token
-
-
-
- onInputChange('mintAuthority', e.target.value)}
- />
-
-
-
- onInputChange('metadataAuthority', e.target.value)}
- />
-
-
-
- onInputChange('pausableAuthority', e.target.value)}
- />
-
-
-
- onInputChange('confidentialBalancesAuthority', e.target.value)}
- />
-
-
-
- onInputChange('permanentDelegateAuthority', e.target.value)}
- />
-
-
-
-
-
- onInputChange('name', e.target.value)}
- required
- />
-
-
-
- onInputChange('symbol', e.target.value)}
- required
- />
-
-
-
-
-
-
- onInputChange('decimals', e.target.value)}
- min="0"
- max="9"
- required
- />
-
-
-
- onInputChange('uri', e.target.value)}
- />
-
-
-
-
-
- ) : (
-
- )}
-
- );
-}
diff --git a/apps/app/src/app/dashboard/create/stablecoin/page.tsx b/apps/app/src/app/dashboard/create/stablecoin/page.tsx
deleted file mode 100644
index d44d59b..0000000
--- a/apps/app/src/app/dashboard/create/stablecoin/page.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client';
-
-import { useContext } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import Link from 'next/link';
-import { CreateTemplateSidebar } from '@/components/CreateTemplateSidebar';
-import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
-import { ChainContext } from '@/context/ChainContext';
-import { useWalletAccountTransactionSendingSigner } from '@solana/react';
-import { UiWalletAccount } from '@wallet-standard/react';
-import { StablecoinCreateForm } from '@/app/dashboard/create/stablecoin/StablecoinCreateForm';
-
-// Component that only renders when wallet is available
-function StablecoinCreateWithWallet({
- selectedWalletAccount,
- currentChain,
-}: {
- selectedWalletAccount: UiWalletAccount;
- currentChain: string;
-}) {
- // Now we can safely call the hook because we know we have valid inputs
- const transactionSendingSigner = useWalletAccountTransactionSendingSigner(
- selectedWalletAccount,
- currentChain as `solana:${string}`,
- );
-
- return (
-
-
- );
-}
-
-// Simple wrapper component that shows a message when wallet is not connected
-function StablecoinCreatePage() {
- const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
- const { chain: currentChain } = useContext(ChainContext);
-
- // If wallet is connected and chain is available, render the full component
- if (selectedWalletAccount && currentChain) {
- return
-
-
-
-
-
-
-
-
-
- Create Stablecoin
-Configure your stablecoin parameters
-
-
-
-
-
-
-
- );
-}
-
-export default StablecoinCreatePage;
diff --git a/apps/app/src/app/dashboard/create/tokenized-security/TokenizedSecurityAuthorityParams.tsx b/apps/app/src/app/dashboard/create/tokenized-security/TokenizedSecurityAuthorityParams.tsx
deleted file mode 100644
index e8e0940..0000000
--- a/apps/app/src/app/dashboard/create/tokenized-security/TokenizedSecurityAuthorityParams.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { TokenizedSecurityOptions } from '@/types/token';
-
-export function TokenizedSecurityAuthorityParams({
- options,
- onInputChange,
-}: {
- options: TokenizedSecurityOptions;
- onInputChange: (field: keyof TokenizedSecurityOptions, value: string) => void;
-}) {
- return (
-
-
-
- Wallet Required
- Please connect your wallet to create a stablecoin
-
-
-
-
-
-
-
-
-
-
-
-
-
- Create Stablecoin
-Configure your stablecoin parameters
-- To create a stablecoin, you need to connect a wallet first. Please use the wallet connection - button in the top navigation. -
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/create/tokenized-security/TokenizedSecurityBasicParams.tsx b/apps/app/src/app/dashboard/create/tokenized-security/TokenizedSecurityBasicParams.tsx
deleted file mode 100644
index a2243b8..0000000
--- a/apps/app/src/app/dashboard/create/tokenized-security/TokenizedSecurityBasicParams.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { EnableSrfc37Toggle } from '@/components/EnableSrfc37Toggle';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { TokenizedSecurityOptions } from '@/types/token';
-
-export function TokenizedSecurityBasicParams({
- options,
- onInputChange,
-}: {
- options: TokenizedSecurityOptions;
- onInputChange: (field: keyof TokenizedSecurityOptions, value: string) => void;
-}) {
- return (
-
-
-
-
- onInputChange('mintAuthority', e.target.value)}
- />
-
-
-
-
-
-
- onInputChange('metadataAuthority', e.target.value)}
- />
-
-
-
- onInputChange('pausableAuthority', e.target.value)}
- />
-
-
-
- onInputChange('confidentialBalancesAuthority', e.target.value)}
- />
-
-
-
- onInputChange('permanentDelegateAuthority', e.target.value)}
- />
-
-
-
- onInputChange('scaledUiAmountAuthority', e.target.value)}
- />
-
-
-
-
-
- onInputChange('name', e.target.value)}
- required
- />
-
-
-
- onInputChange('symbol', e.target.value)}
- required
- />
-
-
-
-
-
-
- onInputChange('decimals', e.target.value)}
- min={0}
- max={9}
- required
- />
-
-
-
- onInputChange('uri', e.target.value)}
- />
-
-
-
- );
- }
-
- return (
-
- );
-}
diff --git a/apps/app/src/app/dashboard/create/tokenized-security/page.tsx b/apps/app/src/app/dashboard/create/tokenized-security/page.tsx
deleted file mode 100644
index e4f51ae..0000000
--- a/apps/app/src/app/dashboard/create/tokenized-security/page.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-'use client';
-
-import { useContext } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import Link from 'next/link';
-import { CreateTemplateSidebar } from '@/components/CreateTemplateSidebar';
-import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
-import { ChainContext } from '@/context/ChainContext';
-import { useWalletAccountTransactionSendingSigner } from '@solana/react';
-import { UiWalletAccount } from '@wallet-standard/react';
-import { TokenizedSecurityCreateForm } from './TokenizedSecurityCreateForm';
-
-function TokenizedSecurityCreateWithWallet({
- selectedWalletAccount,
- currentChain,
-}: {
- selectedWalletAccount: UiWalletAccount;
- currentChain: string;
-}) {
- const transactionSendingSigner = useWalletAccountTransactionSendingSigner(
- selectedWalletAccount,
- currentChain as `solana:${string}`,
- );
-
- return (
-
-
- );
-}
-
-export default function TokenizedSecurityCreatePage() {
- const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
- const { chain: currentChain } = useContext(ChainContext);
-
- if (selectedWalletAccount && currentChain) {
- return (
-
-
-
-
-
-
-
-
-
-
- Create Tokenized Security
-Configure your tokenized security parameters
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/ActionResultModal.tsx b/apps/app/src/app/dashboard/manage/[address]/components/ActionResultModal.tsx
deleted file mode 100644
index e2b442d..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/ActionResultModal.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
-
-interface ActionResultModalProps {
- isOpen: boolean;
- onClose: () => void;
- error: string;
- transactionSignature: string;
- actionInProgress: boolean;
-}
-
-export function ActionResultModal({
- isOpen,
- onClose,
- error,
- transactionSignature,
- actionInProgress,
-}: ActionResultModalProps) {
- if (!isOpen) return null;
-
- return (
-
-
-
- Wallet Required
- Please connect your wallet to create a tokenized security
-
-
-
-
-
-
-
-
-
-
-
-
-
- Create Tokenized Security
-Configure your tokenized security parameters
-- To create a tokenized security, you need to connect a wallet first. Please use the wallet - connection button in the top navigation. -
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/ActionSidebar.tsx b/apps/app/src/app/dashboard/manage/[address]/components/ActionSidebar.tsx
deleted file mode 100644
index f94e8c4..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/ActionSidebar.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Coins, Ban, Flame, ArrowRightLeft, Trash2 } from 'lucide-react';
-
-interface ActionSidebarProps {
- isPaused: boolean;
- onTogglePause: () => void;
- onMintTokens: () => void;
- onForceTransfer: () => void;
- onForceBurn?: () => void;
- onRemoveFromStorage?: () => void;
-}
-
-export function ActionSidebar({
- isPaused,
- onTogglePause,
- onMintTokens,
- onForceTransfer,
- onForceBurn,
- onRemoveFromStorage,
-}: ActionSidebarProps) {
- return (
-
- {/* Header */}
-
-
-
-
- {/* Body */}
- - {actionInProgress ? ( - - - - ) : error ? ( - - - - ) : ( - - - - )} - {actionInProgress ? 'Action in progress...' : error ? 'Error' : 'Success'} -
-
- {/* Action in progress message */}
- {actionInProgress && (
-
-
- {/* Footer */}
-
-
- )}
-
- {/* Error Message */}
- {error && (
- - Action in progress. Please sign and submit the transaction to complete the action. -
-
-
- )}
-
- {/* Success Message */}
- {!error && !actionInProgress && (
- - {error} -
-
-
- )}
-
- {/* Transaction Link */}
- {transactionSignature && (
- - Operation completed successfully! -
-
-
-
- View transaction on Solana Explorer
-
-
- )}
-
-
-
-
-
-
- Admin Actions
-
-
- {/* */}
- {/* */}
-
-
- {onForceBurn && (
-
- )}
-
-
-
-
-
-
- Storage Management
- Manage local token data
-
-
-
-
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/AddressModal.tsx b/apps/app/src/app/dashboard/manage/[address]/components/AddressModal.tsx
deleted file mode 100644
index 3cc9689..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/AddressModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Button } from '@/components/ui/button';
-
-interface AddressModalProps {
- isOpen: boolean;
- onClose: () => void;
- onAdd: () => void;
- newAddress: string;
- onAddressChange: (address: string) => void;
- title: string;
- placeholder: string;
- buttonText: string;
-}
-
-export function AddressModal({
- isOpen,
- onClose,
- onAdd,
- newAddress,
- onAddressChange,
- title,
- placeholder,
- buttonText,
-}: AddressModalProps) {
- if (!isOpen) return null;
-
- return (
- - This only removes the token from your browser's storage. The token will continue to exist - on the blockchain. -
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/ForceBurnModal.tsx b/apps/app/src/app/dashboard/manage/[address]/components/ForceBurnModal.tsx
deleted file mode 100644
index 39194a1..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/ForceBurnModal.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { forceBurnTokens, type ForceBurnOptions } from '@/lib/management/force-burn';
-import { isAddress } from 'gill';
-import { TransactionSendingSigner } from '@solana/signers';
-import { ExternalLink, AlertCircle, Flame } from 'lucide-react';
-
-interface ForceBurnModalProps {
- isOpen: boolean;
- onClose: () => void;
- mintAddress: string;
- permanentDelegate?: string;
- transactionSendingSigner: TransactionSendingSigner
-
- {title}
-
-
-
-
- onAddressChange(e.target.value)}
- placeholder={placeholder}
- className="w-full p-2 border rounded-md"
- />
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/ForceBurnModalRefactored.tsx b/apps/app/src/app/dashboard/manage/[address]/components/ForceBurnModalRefactored.tsx
deleted file mode 100644
index 6960740..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/ForceBurnModalRefactored.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { forceBurnTokens, type ForceBurnOptions } from '@/lib/management/force-burn';
-import { TransactionSendingSigner } from '@solana/signers';
-import { Flame } from 'lucide-react';
-
-import { BaseModal } from '@/components/shared/modals/BaseModal';
-import { TransactionSuccessView } from '@/components/shared/modals/TransactionSuccessView';
-import { WarningBanner } from '@/components/shared/modals/WarningBanner';
-import { SolanaAddressInput } from '@/components/shared/form/SolanaAddressInput';
-import { AmountInput } from '@/components/shared/form/AmountInput';
-import { useTransactionModal, useWalletConnection } from '@/hooks/useTransactionModal';
-import { useInputValidation } from '@/hooks/useInputValidation';
-
-interface ForceBurnModalProps {
- isOpen: boolean;
- onClose: () => void;
- mintAddress: string;
- permanentDelegate?: string;
- transactionSendingSigner: TransactionSendingSigner
-
-
-
-
- {/* Warning Banner */}
-
-
-
- Force Burn Tokens
-
-
-
- {success ? (
-
-
-
-
- Warning: Irreversible Action
-- Force burning will permanently destroy tokens from any account. This action cannot be - undone. Only use this for compliance or emergency purposes. -
-
-
- ) : (
-
- )}
-
- {/* Additional Info */}
- {!success && (
-
-
-
- Tokens Burned Successfully!
-- {amount} tokens have been permanently burned from the specified account. -
- {transactionSignature && ( - - )} -
-
-
-
-
-
- )}
- - Note: Only the permanent delegate authority can execute force burns. Ensure - you have the necessary permissions before attempting this action. -
-
-
-
- {success ? (
- {success ? 'Force Burn Successful' : 'Force Burn Tokens'}
-
-
- )}
-
-
-
-
- )}
-
- {error && - Only the permanent delegate can execute force burns -
-{error}
}
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/ForceTransferModalRefactored.tsx b/apps/app/src/app/dashboard/manage/[address]/components/ForceTransferModalRefactored.tsx
deleted file mode 100644
index f436bd4..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/ForceTransferModalRefactored.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { forceTransferTokens, type ForceTransferOptions } from '@/lib/management/force-transfer';
-import { TransactionSendingSigner } from '@solana/signers';
-import { ArrowRightLeft } from 'lucide-react';
-
-import { BaseModal } from '@/components/shared/modals/BaseModal';
-import { TransactionSuccessView } from '@/components/shared/modals/TransactionSuccessView';
-import { WarningBanner } from '@/components/shared/modals/WarningBanner';
-import { SolanaAddressInput } from '@/components/shared/form/SolanaAddressInput';
-import { AmountInput } from '@/components/shared/form/AmountInput';
-import { useTransactionModal, useWalletConnection } from '@/hooks/useTransactionModal';
-import { useInputValidation } from '@/hooks/useInputValidation';
-
-interface ForceTransferModalProps {
- isOpen: boolean;
- onClose: () => void;
- mintAddress: string;
- permanentDelegate?: string;
- transactionSendingSigner: TransactionSendingSigner
-
- - {success ? 'Force Transfer Successful' : 'Force Transfer Tokens'} -
- - {success ? ( -
-
- ) : (
-
-
- {transactionSignature && (
- Tokens transferred successfully!
-Amount: {amount} tokens
-- From: {fromAddress.slice(0, 8)}...{fromAddress.slice(-6)} -
-- To: {toAddress.slice(0, 8)}...{toAddress.slice(-6)} -
-
-
-
- )}
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- Warning: Administrator Action
-- This will force transfer tokens from any account without the owner's - permission. Use with caution. -
-
-
- setFromAddress(e.target.value)}
- placeholder="Enter source wallet address..."
- className="w-full p-2 border rounded-md"
- />
- {fromAddress && !validateSolanaAddress(fromAddress) && (
-
-
- Please enter a valid Solana address
- )} -
-
- setToAddress(e.target.value)}
- placeholder="Enter destination wallet address..."
- className="w-full p-2 border rounded-md"
- />
- {toAddress && !validateSolanaAddress(toAddress) && (
-
-
- Please enter a valid Solana address
- )} -
-
- setAmount(e.target.value)}
- placeholder="Enter amount to transfer..."
- step="0.000000001"
- min="0"
- className="w-full p-2 border rounded-md"
- />
- {amount && !validateAmount(amount) && (
-
-
- {permanentDelegate && (
- Please enter a valid positive amount
- )} -
-
-
-
- )}
-
- {error && {error}
}
-
- {!success && (
-
- )}
-
-
-
-
-
- {success ? (
- - {success ? 'Force Transfer Successful' : 'Force Transfer Tokens'} -
-
-
- )}
-
-
-
-
- )}
-
- {error && {error}
}
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/MintModalRefactored.tsx b/apps/app/src/app/dashboard/manage/[address]/components/MintModalRefactored.tsx
deleted file mode 100644
index 3b19e43..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/MintModalRefactored.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { mintTokens, type MintOptions } from '@/lib/management/mint';
-import { TransactionSendingSigner } from '@solana/signers';
-import { Coins } from 'lucide-react';
-
-import { BaseModal } from '@/components/shared/modals/BaseModal';
-import { TransactionSuccessView } from '@/components/shared/modals/TransactionSuccessView';
-import { SolanaAddressInput } from '@/components/shared/form/SolanaAddressInput';
-import { AmountInput } from '@/components/shared/form/AmountInput';
-import { useTransactionModal, useWalletConnection } from '@/hooks/useTransactionModal';
-import { useInputValidation } from '@/hooks/useInputValidation';
-
-interface MintModalProps {
- isOpen: boolean;
- onClose: () => void;
- mintAddress: string;
- mintAuthority?: string;
- transactionSendingSigner: TransactionSendingSigner
-
- {success ? 'Mint Successful' : 'Mint Tokens'}
- - {success ? ( -
-
- ) : (
-
-
- {transactionSignature && (
- Tokens minted successfully!
-- Amount: {amount} tokens to {recipient} -
-
-
-
- )}
-
-
-
-
-
-
- )}
-
-
-
- setRecipient(e.target.value)}
- placeholder="Enter recipient Solana address..."
- className="w-full p-2 border rounded-md"
- />
- {recipient && !validateSolanaAddress(recipient) && (
-
-
- Please enter a valid Solana address
- )} -
-
- setAmount(e.target.value)}
- placeholder="Enter amount to mint..."
- step="0.000000001"
- min="0"
- className="w-full p-2 border rounded-md"
- />
- {amount && !validateAmount(amount) && (
-
-
- {mintAuthority && (
- Please enter a valid positive amount
- )} -
-
-
-
- )}
-
- {error && {error}
}
-
- {!success && (
-
- )}
-
-
-
-
-
- {success ? (
- {success ? 'Mint Successful' : 'Mint Tokens'}
-
-
- )}
-
-
-
-
- )}
-
- {error && {error}
}
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/app/src/app/dashboard/manage/[address]/components/TokenAuthorities.tsx b/apps/app/src/app/dashboard/manage/[address]/components/TokenAuthorities.tsx
deleted file mode 100644
index 8e023b3..0000000
--- a/apps/app/src/app/dashboard/manage/[address]/components/TokenAuthorities.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import { useState, useEffect, useContext } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Settings, Edit, Check, X, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
-import { TokenDisplay } from '@/types/token';
-import { updateTokenAuthority } from '@/lib/management/authority';
-import { getTokenAuthorities } from '@/lib/solana/rpc';
-import { AuthorityType } from 'gill/programs/token';
-import { isAddress } from 'gill';
-import { useWalletAccountTransactionSendingSigner } from '@solana/react';
-import { ChainContext } from '@/context/ChainContext';
-import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
-
-interface TokenAuthoritiesProps {
- token: TokenDisplay;
- setError: (error: string) => void;
-}
-
-interface AuthorityInfo {
- label: string;
- role: AuthorityType | 'Metadata';
- currentAuthority?: string;
- isEditing: boolean;
- newAuthority: string;
- isLoading: boolean;
-}
-
-export function TokenAuthorities({ setError, token }: TokenAuthoritiesProps) {
- // Create base authorities array
- const baseAuthorities: AuthorityInfo[] = [
- {
- label: 'Mint Authority',
- role: AuthorityType.MintTokens,
- currentAuthority: token.mintAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- {
- label: 'Freeze Authority',
- role: AuthorityType.FreezeAccount,
- currentAuthority: token.freezeAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- {
- label: 'Metadata Authority',
- role: 'Metadata',
- currentAuthority: token.metadataAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- {
- label: 'Pausable Authority',
- role: AuthorityType.Pause,
- currentAuthority: token.pausableAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- {
- label: 'Confidential Balances Authority',
- role: AuthorityType.ConfidentialTransferMint,
- currentAuthority: token.confidentialBalancesAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- {
- label: 'Permanent Delegate Authority',
- role: AuthorityType.PermanentDelegate,
- currentAuthority: token.permanentDelegateAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- {
- label: 'Scaled UI Amount Authority',
- role: AuthorityType.ScaledUiAmount,
- currentAuthority: token.scaledUiAmountAuthority,
- isEditing: false,
- newAuthority: '',
- isLoading: false,
- },
- ];
-
- const [authorities, setAuthorities] = useState
-
-
- Important: This is a sensitive operation that affects all token holders. Make
- sure you understand the implications before proceeding.
- {!isPaused && (
- <>
-
-
- When paused: -
-
-
- {error && (
-
- {error}
-
- )}
-
-
-
-
-
- {action} Token
-
- {isPaused ? (
- <>
- You are about to unpause the token {tokenName}. This will
- allow all token transfers to resume normally.
-
- ) : (
- <>
- You are about to pause the token {tokenName}. This will
- prevent all token transfers until the token is unpaused.
-
- )}
-
-
- -
- When paused: -
-
-
- No token transfers will be possible -
- Token holders cannot send or receive tokens -
- Mint authority cannot mint new tokens -
- Freeze authority cannot freeze or thaw tokens -
- DeFi protocols may not function properly -
- Only the pause authority can unpause the token -
-
-
-
- -
- {authorities
- .filter(authority => authority.currentAuthority)
- .map((authority, index) => (
-
-
- {!selectedWalletAccount && (
-
-
- ))}
-
-
- {!authority.isEditing && (
-
- )}
-
-
- {authority.isEditing ? (
-
-
- ) : (
-
- ) =>
- setAuthorities(prev =>
- prev.map((auth, i) =>
- i === index
- ? { ...auth, newAuthority: e.target.value }
- : auth,
- ),
- )
- }
- className="flex-1 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
- />
-
-
-
- {authority.newAuthority &&
- !validateSolanaAddress(authority.newAuthority) && (
- - Please enter a valid Solana address -
- )} -
- {authority.currentAuthority?.slice(0, 8)}...
- {authority.currentAuthority?.slice(-8)}
-
- )}
-
-
- )}
- Connect your wallet to manage authorities
-
-
- );
-}
-
-function ManageTokenExtensionsWithWallet({
- selectedWalletAccount,
- currentChain,
- token,
-}: {
- selectedWalletAccount: UiWalletAccount;
- currentChain: string;
- token: TokenDisplay;
-}) {
- const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const [showScaledUiEditor, setShowScaledUiEditor] = useState(false);
- const [newMultiplier, setNewMultiplier] = useState
-
-
- Wallet Required
- Please connect your wallet to create a tokenized security
-
-
-
-
-
-
-
-
-
-
-
-
-
- Manage Token Extensions
-Manage the extensions enabled on this token
-- To manage token extensions, you need to connect a wallet first. Please use the wallet - connection button in the top navigation. -
-
- {token.extensions && token.extensions.length > 0 ? (
-
- {token.extensions?.includes('Scaled UI Amount') && (
-
- {token.extensions.map((extension, index) => (
-
- {extension}
-
- ))}
-
- ) : (
- No extensions configured
- )} - -
-
-
-
-
- Metadata
-Update token metadata and URI
-
-
- )}
-
-
- {showScaledUiEditor && (
-
-
-
- Scaled UI Amount
-- Update the UI amount multiplier for this mint -
-
-
- )}
-
-
- setNewMultiplier(e.target.value)}
- placeholder="e.g., 1.5"
- />
-
-
-
-
-
-
-
-
-
-
- {token.name}
-
-
-
- {token.symbol}
-
-
-
-
-
- {isLoadingSupply ? 'Loading...' : currentSupply}
- -
-
-
- {token.decimals || '6'}
-
-
-
-
-
- {getTokenPatternsLabel(token.detectedPatterns)}
- {token.detectedPatterns && token.detectedPatterns.length > 1 && ( -
- {token.detectedPatterns.map((pattern, idx) => (
-
- {getTokenTypeLabel(pattern)}
-
- ))}
-
- )}
-
-
-
- {formatDate(token.createdAt)}
-
-
-
-
- {token.transactionSignature && (
-
-
- {copied &&
- {token.address}
-
-
- Copied to clipboard!
} -
-
-
- )}
-
- {token.metadataUri && (
-
-
-
- {token.transactionSignature}
-
-
-
-
-
- )}
- {token.metadataUri}
-{config.emptyMessage}
; - } - - return ( -
- {accessList.map((addr, index) => (
-
- );
- };
-
- return (
-
-
- ))}
-
- {addr.slice(0, 8)}...{addr.slice(-8)}
-
-
-
-
-
-
-
-
-
-
-
- {config.title}
- - {config.badgeText} - -{config.description}
- {renderAddressList()} -
-
- );
- }
-
- return
-
- Wallet Required
-Please connect your Solana wallet to manage tokens.
-
-
- );
- }
-
- if (!token) {
- return (
-
-
-
-
- Loading token details...
-
-
- );
- }
-
- return (
-
-
-
-
- Token Not Found
-- The token with address {address} could not be found in your local storage. -
- - - -
- {
- setError('');
- setTransactionSignature('');
- setActionInProgress(false);
- }}
- actionInProgress={actionInProgress}
- error={error}
- transactionSignature={transactionSignature}
- />
-
- {
- setShowAccessListModal(false);
- setNewAddress('');
- }}
- onAdd={addToAccessList}
- newAddress={newAddress}
- onAddressChange={setNewAddress}
- title={`Add to ${listType === 'allowlist' ? 'Allowlist' : 'Blocklist'}`}
- placeholder="Enter Solana address..."
- buttonText={`Add to ${listType === 'allowlist' ? 'Allowlist' : 'Blocklist'}`}
- />
-
- {transactionSendingSigner && (
- setShowMintModal(false)}
- mintAddress={address}
- mintAuthority={token?.mintAuthority}
- transactionSendingSigner={transactionSendingSigner}
- />
- )}
-
- {transactionSendingSigner && (
- setShowForceTransferModal(false)}
- mintAddress={address}
- permanentDelegate={token?.permanentDelegateAuthority}
- transactionSendingSigner={transactionSendingSigner}
- />
- )}
-
- {transactionSendingSigner && (
- setShowForceBurnModal(false)}
- mintAddress={address}
- permanentDelegate={token?.permanentDelegateAuthority}
- transactionSendingSigner={transactionSendingSigner}
- />
- )}
-
- {
- setShowPauseModal(false);
- setPauseError('');
- }}
- onConfirm={handlePauseConfirm}
- isPaused={isPaused}
- tokenName={token?.name || 'Token'}
- isLoading={actionInProgress}
- error={pauseError}
- />
-
- );
-}
diff --git a/apps/app/src/app/dashboard/page.tsx b/apps/app/src/app/dashboard/page.tsx
deleted file mode 100644
index eaa297d..0000000
--- a/apps/app/src/app/dashboard/page.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client';
-
-import { useContext, useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Plus, Coins, Upload } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { TokenDisplay } from '@/types/token';
-import { Loader } from '@/components/ui/loader';
-import { getAllTokens, getTokenCount } from '@/lib/token/tokenData';
-import { TokenStorage } from '@/lib/token/tokenStorage';
-import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
-import { TokenCard } from './components/TokenCard';
-
-export default function DashboardPage() {
- const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
-
- return selectedWalletAccount ?
- {/* Header */}
-
-
- {/* Modals */}
-
-
-
-
-
-
-
-
-
-
- {token.name}
-- Manage your {getTokenPatternsLabel(token.detectedPatterns)} token -
-
-
-
-
- {/* Main Content */}
- setShowMintModal(true)}
- onForceTransfer={() => setShowForceTransferModal(true)}
- onForceBurn={() => setShowForceBurnModal(true)}
- onRemoveFromStorage={handleRemoveFromStorage}
- />
-
-
- setShowAccessListModal(true)}
- onRemoveFromAccessList={removeFromAccessList}
- />
-
-
- {/* Sidebar */}
-
-
- );
- }
-
- if (!loading && tokens.length === 0) return null;
-
- return (
-
-
-
-
- Loading your tokens...
-
-
- );
-}
-
-function DashboardDisconnected() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Your Tokens
-- Manage your created tokens and their extensions ({getTokenCount()} total) -
-
- {tokens.map((token, index) => (
-
-
-
- );
-}
diff --git a/apps/app/src/app/docs/deps/page.tsx b/apps/app/src/app/docs/deps/page.tsx
deleted file mode 100644
index 7e038d5..0000000
--- a/apps/app/src/app/docs/deps/page.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-export default function DocsDepsPage() {
- return (
-
-
- Welcome to Mosaic
-Please connect your Solana wallet to access the dashboard.
-
-
- );
-}
diff --git a/apps/app/src/app/docs/layout.tsx b/apps/app/src/app/docs/layout.tsx
deleted file mode 100644
index bbeb75f..0000000
--- a/apps/app/src/app/docs/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Link from 'next/link';
-import { cn } from '@/lib/utils';
-
-export default function DocsLayout({ children }: { children: React.ReactNode }) {
- const nav = [
- { href: '/docs', label: 'Overview' },
- { href: '/docs/website', label: 'About the App' },
- { href: '/docs/templates', label: 'Token Templates' },
- { href: '/docs/deps', label: 'SDK, CLI, and Deps' },
- ];
-
- return (
- SDK, CLI, and Dependencies
-Key packages and where to find their READMEs in this repository.
- -Internal packages (paths)
--
-
-
-
packages/sdk/README.md— SDK developer guide -
- -
-
packages/cli/README.md— CLI usage and commands -
- -
-
apps/app/README.md— Dashboard app user and developer guide -
- -
-
packages/abl/README.md— Address-Based Lists (SRFC-37) bindings -
- -
-
packages/token-acl/README.md— Token ACL program bindings -
- -
-
packages/tlv-account-resolution/README.md— TLV helpers -
-
How the UI uses them
--
-
-
- Mint creation and management:
@mosaic/sdk-
- -
- Access lists (allow/block):
@mosaic/abl-
- -
- Freeze/thaw and permissionless thaw:
@mosaic/token-acl- (Token ACL) -
- -
- RPC and types:
gilland wallet adapters -
-
External references
- -
-
- );
-}
diff --git a/apps/app/src/app/docs/page.tsx b/apps/app/src/app/docs/page.tsx
deleted file mode 100644
index 30e7cc4..0000000
--- a/apps/app/src/app/docs/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function DocsOverviewPage() {
- return (
-
-
-
-
-
- {children}
-
-
- );
-}
diff --git a/apps/app/src/app/docs/templates/page.tsx b/apps/app/src/app/docs/templates/page.tsx
deleted file mode 100644
index b45d23f..0000000
--- a/apps/app/src/app/docs/templates/page.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { CapabilityKey, ExtensionKey } from '@/components/capabilities/registry';
-import { DollarSign, Gamepad2, CandlestickChart, ChevronDown } from 'lucide-react';
-import { CreateTemplateSidebar } from '@/components/CreateTemplateSidebar';
-
-export default function DocsTemplatesPage() {
- return (
- Mosaic Docs
-- Mosaic is a tokenization engine for Solana. This site lets you create and manage Token-2022 mints using - prebuilt templates (Stablecoin, Arcade Token, Tokenized Security) and operate them with modern controls. -
-What's inside
--
-
- Visual token creation flows with smart defaults -
- Dashboards to manage authorities, access lists, and account state -
- Wallet integration for signing and submission -
-
- );
-}
-
-function TemplatesAccordion() {
- const [open, setOpen] = useStateToken Templates
-- Mosaic provides three templates that compose Token-2022 extensions for common use-cases. New token - accounts start frozen and are thawed according to your access-control rules (sRFC-37 Token ACL + - standard allow/block list program). -
- -Single-signer side-effects
-- If the fee payer equals the mint authority, creation flows also set up Token ACL config, set the gating - program to ABL, create the ABL list, set extra metas on the mint, and enable permissionless thaw. -
-
- {templates.map(t => (
-
-
-
-
-
- ))}
-
- );
-}
diff --git a/apps/app/src/app/docs/website/page.tsx b/apps/app/src/app/docs/website/page.tsx
deleted file mode 100644
index 7f36f51..0000000
--- a/apps/app/src/app/docs/website/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-export default function DocsWebsitePage() {
- return (
- {t.summary}
-
- {t.badges.map(b => (
-
- {b}
-
- ))}
-
- {open === t.id && (
-
-
- )}
-
-
- );
-}
diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css
index 0d0fb6b..58c97c8 100644
--- a/apps/app/src/app/globals.css
+++ b/apps/app/src/app/globals.css
@@ -1,160 +1,803 @@
@import 'tailwindcss';
+@custom-variant dark (&:is(.dark *));
+
+/* Inline code styling - sand background for code wrapped in `` */
+.prose :not(pre) > code,
+.prose p code,
+.prose li code,
+.prose td code,
+.prose th code {
+ background-color: oklch(0.927 0.0122 96.43) !important; /* sand-200 */
+ color: oklch(0.279 0.0029 17.33) !important; /* sand-1500 */
+ padding: 0.125rem 0.375rem !important;
+ border-radius: 0.375rem !important;
+ font-size: 0.75rem !important; /* text-xs */
+ border: 1px solid oklch(0.839 0.0187 78.23) !important; /* sand-400 */
+ font-family: var(--font-berkeley-mono), ui-monospace, monospace !important;
+}
+
+/* Ensure code blocks stay clean - NO background or styling */
+.prose pre code,
+.prose pre code *,
+.prose code[class*='language-'],
+.prose code[class*='shiki'],
+.prose code[class*='hljs'],
+.prose code[class*='prism'] {
+ background: transparent !important;
+ background-color: transparent !important;
+ border: none !important;
+ padding: 0 !important;
+}
+
+/* Add padding to code blocks */
+.prose pre {
+ padding-left: 1rem !important;
+ padding-right: 1.5rem !important;
+}
+
@theme {
- /* Define custom colors for Tailwind utilities */
- --color-background: hsl(var(--background));
- --color-foreground: hsl(var(--foreground));
- --color-card: hsl(var(--card));
- --color-card-foreground: hsl(var(--card-foreground));
- --color-popover: hsl(var(--popover));
- --color-popover-foreground: hsl(var(--popover-foreground));
- --color-primary: hsl(var(--primary));
- --color-primary-foreground: hsl(var(--primary-foreground));
- --color-secondary: hsl(var(--secondary));
- --color-secondary-foreground: hsl(var(--secondary-foreground));
- --color-muted: hsl(var(--muted));
- --color-muted-foreground: hsl(var(--muted-foreground));
- --color-accent: hsl(var(--accent));
- --color-accent-foreground: hsl(var(--accent-foreground));
- --color-destructive: hsl(var(--destructive));
- --color-destructive-foreground: hsl(var(--destructive-foreground));
- --color-border: hsl(var(--border));
- --color-input: hsl(var(--input));
- --color-ring: hsl(var(--ring));
+ --color-cream: oklch(0.9553 0.0029 84.56);
+ --color-bg1: oklch(97.4% 0.004 286.33);
+
+ /* Border colors mapped to sand scale */
+ --color-border-strong: oklch(0.839 0.0187 78.23); /* sand/400 */
+ --color-border-medium: oklch(0.884 0.0163 82.79); /* sand/300 */
+ --color-border-low: oklch(0.927 0.0122 96.43); /* sand/200 */
+ --color-border-extra-low: oklch(0.9665 0.0067 97.35); /* sand/100 */
+
+ --color-sand-100: oklch(0.9665 0.0067 97.35);
+ --color-sand-200: oklch(0.927 0.0122 96.43);
+ --color-sand-300: oklch(0.884 0.0163 82.79);
+ --color-sand-400: oklch(0.839 0.0187 78.23);
+ --color-sand-500: oklch(0.7935 0.0213 74.62);
+ --color-sand-600: oklch(0.7454 0.0237 67.45);
+ --color-sand-700: oklch(0.6938 0.0247 56.8);
+ --color-sand-800: oklch(0.6436 0.0256 48.3);
+ --color-sand-900: oklch(0.5916 0.0259 41.3);
+ --color-sand-1000: oklch(0.5438 0.0206 39.32);
+ --color-sand-1100: oklch(0.4947 0.0156 41.09);
+ --color-sand-1200: oklch(0.442 0.0111 34.3);
+ --color-sand-1300: oklch(0.3909 0.0076 43.22);
+ --color-sand-1400: oklch(0.3356 0.0046 39.42);
+ --color-sand-1500: oklch(0.279 0.0029 17.33);
+ --color-sand-1600: oklch(0.2189 0.0016 17.28);
+
+ --color-highlight: oklch(1 0 0);
+
+ --color-black: oklch(0 0 0);
+ --color-white: oklch(1 0 0);
+ --color-gray-900: oklch(0.1725 0.0078 264.05);
+ --color-gray-800: oklch(0.2706 0.0141 264.05);
+ --color-gray-600: oklch(0.4569 0.0171 264.05);
+ --color-gray-500: oklch(0.5137 0.0171 264.05);
+ --color-gray-400: oklch(0.6196 0.0171 264.05);
}
-@layer base {
- :root {
- --background: 222.2 100% 99.5%;
- --foreground: 222.2 84% 4.9%;
- --card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
- --popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
- --primary: 255 80% 40%;
- --primary-foreground: 255 0% 100%;
- --secondary: 210 40% 96%;
- --secondary-foreground: 222.2 47.4% 11.2%;
- --muted: 210 40% 96%;
- --muted-foreground: 215.4 16.3% 46.9%;
- --accent: 210 40% 96%;
- --accent-foreground: 222.2 47.4% 11.2%;
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 210 40% 98%;
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 222.2 84% 4.9%;
- --radius: 0.5rem;
- --mosaic-gradient-color: #000;
- }
-
- .dark {
- --background: 222.2 84% 3%;
- --foreground: 210 40% 98%;
- --card: 222.2 84% 4.9%;
- --card-foreground: 210 40% 98%;
- --popover: 222.2 84% 4.9%;
- --popover-foreground: 210 40% 98%;
- --primary: 255 80% 55%;
- --primary-foreground: 255 0% 100%;
- --secondary: 217.2 32.6% 17.5%;
- --secondary-foreground: 210 40% 98%;
- --muted: 217.2 32.6% 17.5%;
- --muted-foreground: 215 20.2% 65.1%;
- --accent: 217.2 32.6% 17.5%;
- --accent-foreground: 210 40% 98%;
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 210 40% 98%;
- --border: 217.2 32.6% 17.5%;
- --input: 217.2 32.6% 17.5%;
- --ring: 212.7 26.8% 83.9%;
- --mosaic-gradient-color: #fff;
+:root {
+ /* Title sizes */
+ --text-h1-mobile: 36px;
+ --text-h1-desktop: 64px;
+ --text-title-2-mobile: 36px;
+ --text-title-2-desktop: 56px;
+ --text-h2-mobile: 29px;
+ --text-h2-desktop: 44px;
+ --text-title-4-mobile: 24px;
+ --text-title-4-desktop: 32px;
+ --text-title-5: 21px;
+
+ /* Body sizes */
+ --text-body-xl: 19px;
+ --text-body-l: 16px;
+ --text-body-md: 14px;
+
+ /* UI sizes */
+ --text-nav-item: 14px;
+
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+ --diagonal-pattern-color: oklch(0.927 0.0122 96.43 / 0.5);
+}
+
+/* Responsive typography classes matching Figma specs */
+
+/* Title/1: 64px, weight 500, line-height 1.03, tracking -2.88px */
+.text-h1 {
+ font-family: var(--font-abc-diatype);
+ font-size: var(--text-h1-mobile);
+ font-weight: 500;
+ line-height: 1.03;
+ letter-spacing: -2.88px;
+}
+
+@media (min-width: 768px) {
+ .text-h1 {
+ font-size: var(--text-h1-desktop);
+ }
+}
+
+/* Title/2: 56px, weight 500, line-height 1.05, tracking -2.52px */
+.text-title-2 {
+ font-family: var(--font-abc-diatype);
+ font-size: var(--text-title-2-mobile);
+ font-weight: 500;
+ line-height: 1.05;
+ letter-spacing: -2.52px;
+}
+
+@media (min-width: 768px) {
+ .text-title-2 {
+ font-size: var(--text-title-2-desktop);
+ }
+}
+
+/* Title/3: 44px, weight 500, line-height 1.1, tracking -1.76px */
+.text-h2 {
+ font-family: var(--font-abc-diatype);
+ font-size: var(--text-h2-mobile);
+ font-weight: 500;
+ line-height: 1.1;
+ letter-spacing: -1.76px;
+}
+
+@media (min-width: 768px) {
+ .text-h2 {
+ font-size: var(--text-h2-desktop);
+ }
+}
+
+/* Title/4: 32px, weight 500, line-height 1.1, tracking -1.28px */
+.text-title-4 {
+ font-family: var(--font-abc-diatype);
+ font-size: var(--text-title-4-mobile);
+ font-weight: 500;
+ line-height: 1.1;
+ letter-spacing: -1.28px;
+}
+
+@media (min-width: 768px) {
+ .text-title-4 {
+ font-size: var(--text-title-4-desktop);
}
}
+/* Title/5: 21px, weight 500, line-height 1.1, tracking -0.42px */
+.text-title-5 {
+ font-family: var(--font-abc-diatype);
+ font-size: var(--text-title-5);
+ font-weight: 500;
+ line-height: 1.1;
+ letter-spacing: -0.42px;
+}
+
+/* Body/XL: 19px, weight 450, line-height 1.3, tracking -0.19px */
+.text-body-xl {
+ font-family: var(--font-inter);
+ font-size: var(--text-body-xl);
+ font-weight: 450;
+ line-height: 1.3;
+ letter-spacing: -0.19px;
+}
+
+/* Body/L: 16px, weight 450, line-height normal, tracking -0.16px */
+.text-body-l {
+ font-family: var(--font-inter);
+ font-size: var(--text-body-l);
+ font-weight: 450;
+ line-height: normal;
+ letter-spacing: -0.16px;
+}
+
+/* Body/Md: 14px, weight 450, line-height normal, tracking -0.14px */
+.text-body-md {
+ font-family: var(--font-inter);
+ font-size: var(--text-body-md);
+ font-weight: 450;
+ line-height: normal;
+ letter-spacing: -0.14px;
+}
+
+/* Nav Item: 14px, weight 550, line-height 18px, tracking -0.28px */
+.text-nav-item {
+ font-family: var(--font-inter);
+ font-size: var(--text-nav-item);
+ font-weight: 550;
+ line-height: 18px;
+ letter-spacing: -0.28px;
+}
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+ --font-abc-diatype: var(--font-abc-diatype), system-ui, sans-serif;
+ --font-berkeley-mono: var(--font-berkeley-mono), ui-monospace, monospace;
+ --font-inter: var(--font-inter), system-ui, sans-serif;
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+ --color-border-low: oklch(0.269 0 0);
+ --color-border-medium: oklch(0.3356 0.0046 39.42);
+ --diagonal-pattern-color: oklch(0.269 0 0 / 0.3);
+}
+
@layer base {
* {
- border-color: hsl(var(--border));
+ @apply border-border outline-ring/50;
}
-
body {
- background-color: hsl(var(--background));
- color: hsl(var(--foreground));
- font-family: var(--font-sans), sans-serif;
- font-weight: 300;
+ @apply bg-background text-foreground;
}
+}
+
+/* Custom wide-spaced dashed borders using background gradients */
+.border-l-dashed-wide {
+ background: repeating-linear-gradient(
+ to bottom,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ left/1px 100% no-repeat;
+}
+
+.border-r-dashed-wide {
+ background: repeating-linear-gradient(
+ to bottom,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ right/1px 100% no-repeat;
+}
+
+.border-lr-dashed-wide {
+ background:
+ repeating-linear-gradient(
+ to bottom,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ left/1px 100% no-repeat,
+ repeating-linear-gradient(
+ to bottom,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ right/1px 100% no-repeat;
+}
+
+.border-horizontal-dashed-wide {
+ background:
+ repeating-linear-gradient(
+ to right,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ top/100% 1px no-repeat,
+ repeating-linear-gradient(
+ to right,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ bottom/100% 1px no-repeat;
+}
+
+.border-vertical-dashed-wide {
+ background: repeating-linear-gradient(
+ to bottom,
+ var(--color-border-low) 0px,
+ var(--color-border-low) 12px,
+ transparent 12px,
+ transparent 24px
+ )
+ center/1px 100% no-repeat;
+}
+
+/* Border medium dashed - 6px dash + 6px gap */
+.border-all-dashed-medium {
+ background:
+ repeating-linear-gradient(
+ to right,
+ var(--color-border-medium) 0px,
+ var(--color-border-medium) 6px,
+ transparent 6px,
+ transparent 12px
+ )
+ top/100% 1px no-repeat,
+ repeating-linear-gradient(
+ to right,
+ var(--color-border-medium) 0px,
+ var(--color-border-medium) 6px,
+ transparent 6px,
+ transparent 12px
+ )
+ bottom/100% 1px no-repeat,
+ repeating-linear-gradient(
+ to bottom,
+ var(--color-border-medium) 0px,
+ var(--color-border-medium) 6px,
+ transparent 6px,
+ transparent 12px
+ )
+ left/1px 100% no-repeat,
+ repeating-linear-gradient(
+ to bottom,
+ var(--color-border-medium) 0px,
+ var(--color-border-medium) 6px,
+ transparent 6px,
+ transparent 12px
+ )
+ right/1px 100% no-repeat;
+}
- /* Docs typography */
- .prose h1 {
- @apply text-3xl md:text-4xl font-bold mb-4;
+.border-lr-dashed-medium {
+ background:
+ repeating-linear-gradient(
+ to bottom,
+ var(--color-border-medium) 0px,
+ var(--color-border-medium) 6px,
+ transparent 6px,
+ transparent 12px
+ )
+ left/1px 100% no-repeat,
+ repeating-linear-gradient(
+ to bottom,
+ var(--color-border-medium) 0px,
+ var(--color-border-medium) 6px,
+ transparent 6px,
+ transparent 12px
+ )
+ right/1px 100% no-repeat;
+}
+
+/* Product card diagonal background - fade in on hover using opacity */
+.product-card-diagonal {
+ position: relative;
+ background-image: repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 6px,
+ rgba(233, 230, 227, 0.5) 6px,
+ rgba(233, 230, 227, 0.5) 7px
+ );
+ transition: background-image 0.2s ease-in-out;
+}
+
+.product-card-diagonal::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: repeating-linear-gradient(
+ 45deg,
+ transparent,
+ transparent 6px,
+ rgba(233, 230, 227, 1) 6px,
+ rgba(233, 230, 227, 1) 7px
+ );
+ opacity: 0;
+ transition: opacity 180ms ease-in-out;
+ pointer-events: none;
+}
+
+.group:hover .product-card-diagonal::before {
+ opacity: 1;
+}
+
+/* ABC Diatype font utilities */
+.font-diatype {
+ font-family: var(--font-abc-diatype);
+}
+
+.font-diatype-mono {
+ font-family: var(--font-berkeley-mono);
+}
+
+.font-berkeley-mono {
+ font-family: var(--font-berkeley-mono);
+ font-weight: 400;
+}
+
+.font-diatype-regular {
+ font-family: var(--font-abc-diatype);
+ font-weight: 400;
+}
+
+.font-diatype-medium {
+ font-family: var(--font-abc-diatype);
+ font-weight: 500;
+}
+
+.font-diatype-bold {
+ font-family: var(--font-abc-diatype);
+ font-weight: 700;
+}
+
+/* Inter font utilities for body text */
+.font-inter {
+ font-family: var(--font-inter);
+}
+
+.font-inter-regular {
+ font-family: var(--font-inter);
+ font-weight: 450;
+}
+
+.font-inter-medium {
+ font-family: var(--font-inter);
+ font-weight: 550;
+}
+
+.font-inter-semibold {
+ font-family: var(--font-inter);
+ font-weight: 600;
+}
+
+/* Pulse animations for hero lines and borders */
+@keyframes pulse-border-top {
+ 0% {
+ left: -2px;
+ opacity: 1;
+ filter: blur(0px);
}
- .prose h2 {
- @apply text-2xl font-semibold mt-8 mb-3;
+ 2% {
+ opacity: 1;
+ filter: blur(0px);
}
- .prose h3 {
- @apply text-xl font-semibold mt-6 mb-2;
+ 98% {
+ opacity: 1;
+ filter: blur(0px);
}
- .prose p {
- @apply leading-relaxed;
+ 100% {
+ left: 100%;
+ opacity: 1;
+ filter: blur(0px);
}
- .prose ul {
- @apply list-disc pl-5;
+}
+
+@keyframes pulse-border-right {
+ 0% {
+ top: -2px;
+ opacity: 1;
+ filter: blur(0px);
+ }
+ 2% {
+ opacity: 1;
+ filter: blur(0px);
}
+ 98% {
+ opacity: 1;
+ filter: blur(0px);
+ }
+ 100% {
+ top: 100%;
+ opacity: 1;
+ filter: blur(0px);
+ }
+}
- input,
- textarea,
- select {
- @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:border-transparent;
- background-color: hsl(var(--card));
- color: hsl(var(--foreground));
- --tw-ring-color: hsl(var(--ring));
- transition:
- box-shadow 0.2s,
- border-color 0.2s;
+@keyframes pulse-border-bottom {
+ 0% {
+ right: -2px;
+ opacity: 1;
+ filter: blur(0px);
}
+ 2% {
+ opacity: 1;
+ filter: blur(0px);
+ }
+ 98% {
+ opacity: 1;
+ filter: blur(0px);
+ }
+ 100% {
+ right: 100%;
+ opacity: 1;
+ filter: blur(0px);
+ }
+}
- input:disabled,
- textarea:disabled,
- select:disabled {
- @apply cursor-not-allowed opacity-70;
- background-color: hsl(var(--muted));
- color: hsl(var(--muted-foreground));
+@keyframes pulse-border-left {
+ 0% {
+ bottom: -2px;
+ opacity: 1;
+ filter: blur(0px);
+ }
+ 2% {
+ opacity: 1;
+ filter: blur(0px);
}
+ 98% {
+ opacity: 1;
+ filter: blur(0px);
+ }
+ 100% {
+ bottom: 100%;
+ opacity: 1;
+ filter: blur(0px);
+ }
+}
- label {
- @apply block text-sm font-medium mb-2;
+@keyframes pulse-line-horizontal {
+ 0% {
+ left: 0;
+ opacity: 0;
+ filter: blur(1px);
+ }
+ 3% {
+ opacity: 0.6;
+ filter: blur(0.5px);
+ }
+ 10% {
+ opacity: 0.9;
+ filter: blur(0px);
+ }
+ 90% {
+ opacity: 0.9;
+ filter: blur(0px);
}
+ 97% {
+ opacity: 0.6;
+ filter: blur(0.5px);
+ }
+ 100% {
+ left: 100%;
+ opacity: 0;
+ filter: blur(1px);
+ }
+}
- button {
- @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2;
- --tw-ring-color: hsl(var(--ring));
- transition:
- background 0.2s,
- color 0.2s;
+@keyframes pulse-line-vertical {
+ 0% {
+ top: 0;
+ opacity: 0;
+ filter: blur(1px);
+ }
+ 3% {
+ opacity: 0.6;
+ filter: blur(0.5px);
+ }
+ 10% {
+ opacity: 0.9;
+ filter: blur(0px);
+ }
+ 90% {
+ opacity: 0.9;
+ filter: blur(0px);
+ }
+ 97% {
+ opacity: 0.6;
+ filter: blur(0.5px);
+ }
+ 100% {
+ top: 100%;
+ opacity: 0;
+ filter: blur(1px);
}
}
-.mosaic-text {
- position: relative;
- z-index: 1;
- background-image: radial-gradient(circle, var(--mosaic-gradient-color) 55%, transparent 0%);
- background-size: 2px 3px;
- background-position: 0px 1px;
- background-repeat: repeat;
- background-clip: text;
- color: transparent;
+.pulse-border-top {
+ animation: pulse-border-top 4s ease-in-out infinite;
+ animation-delay: 0s;
}
-.mosaic-text::before {
- content: '';
- position: absolute;
- inset: -5%;
- z-index: -1;
- border-radius: 9999px;
- background:
- radial-gradient(circle at 30% 40%, #1fff9a 0%, transparent 70%),
- radial-gradient(circle at 70% 60%, #9945ff 0%, transparent 70%);
- filter: blur(20px);
- opacity: 0.3;
- pointer-events: none;
+.pulse-border-right {
+ animation: pulse-border-right 4s ease-in-out infinite;
+ animation-delay: 1s;
+}
+
+.pulse-border-bottom {
+ animation: pulse-border-bottom 4s ease-in-out infinite;
+ animation-delay: 2s;
+}
+
+.pulse-border-left {
+ animation: pulse-border-left 4s ease-in-out infinite;
+ animation-delay: 3s;
+}
+
+.pulse-line-horizontal-1 {
+ animation: pulse-line-horizontal 6s ease-in-out infinite;
+ animation-delay: 0.5s;
+}
+
+.pulse-line-horizontal-2 {
+ animation: pulse-line-horizontal 6s ease-in-out infinite;
+ animation-delay: 3.5s;
+}
+
+.pulse-line-vertical-1 {
+ animation: pulse-line-vertical 6s ease-in-out infinite;
+ animation-delay: 1.5s;
+}
+
+.pulse-line-vertical-2 {
+ animation: pulse-line-vertical 6s ease-in-out infinite;
+ animation-delay: 4.5s;
+}
+
+/* CTA Illustration Animations - Only float movement */
+
+/* Float loop animations - up and down movement */
+@keyframes cta-float {
+ 0% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-24px);
+ }
+ 100% {
+ transform: translateY(0);
+ }
+}
+
+/* Apply animations to layers with staggered delays */
+.cta-layer-1 {
+ animation: cta-float 4s cubic-bezier(0.5, 0, 0, 1) 1.8s infinite;
+ transform-origin: center;
+}
+
+.cta-layer-2 {
+ animation: cta-float 4s cubic-bezier(0.5, 0, 0, 1) 2.1s infinite;
+ transform-origin: center;
+}
+
+.cta-layer-3 {
+ animation: cta-float 4s cubic-bezier(0.5, 0, 0, 1) 2.3s infinite;
+ transform-origin: center;
+}
+
+/* Product Hero Entrance Animations */
+@keyframes hero-entrance {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8) translateY(10px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+.hero-logo {
+ animation: hero-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
+}
+
+.hero-inner-decoration {
+ animation: hero-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
+}
+
+.hero-outer-decoration {
+ animation: hero-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
+}
+
+.hero-title {
+ animation: hero-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
+}
+
+.hero-description {
+ animation: hero-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
+}
+
+.hero-actions {
+ animation: hero-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
+}
+
+/* Logo Grid Illustration Animation */
+@keyframes illustration-entrance {
+ 0% {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.illustration-animate {
+ animation: illustration-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
index f9723f7..a0afe18 100644
--- a/apps/app/src/app/layout.tsx
+++ b/apps/app/src/app/layout.tsx
@@ -1,24 +1,68 @@
import type { Metadata } from 'next';
-import { Inter, Fira_Mono } from 'next/font/google';
-// Import globals.css before any other components to avoid FOUC during HMR
+import localFont from 'next/font/local';
import './globals.css';
-import { ThemeProvider } from '@/components/theme-provider';
import { Header } from '@/components/layout/header';
-import { Footer } from '@/components/layout/footer';
+// import { Footer } from '@/components/layout/footer';
import { cn } from '@/lib/utils';
-import { ChainContextProvider } from '@/context/ChainContextProvider';
-import { SelectedWalletAccountContextProvider } from '@/context/SelectedWalletAccountContextProvider';
-import { RpcContextProvider } from '@/context/RpcContextProvider';
+import { Providers } from './providers';
+import { Toaster } from '@/components/ui/sonner';
-const fontSans = Inter({
- subsets: ['latin'],
- weight: ['300', '500', '700'],
- variable: '--font-sans',
+// Inter Variable font for body text with weights: 450, 550, 600
+const inter = localFont({
+ src: '../fonts/InterVariable.woff2',
+ variable: '--font-inter',
+ display: 'swap',
});
-const fontMono = Fira_Mono({
- subsets: ['latin'],
- weight: ['400', '500', '700'],
- variable: '--font-mono',
+
+// ABC Diatype fonts
+const abcDiatype = localFont({
+ src: [
+ {
+ path: '../fonts/ABCDiatype-Regular.woff2',
+ weight: '400',
+ style: 'normal',
+ },
+ {
+ path: '../fonts/ABCDiatype-Medium.woff2',
+ weight: '500',
+ style: 'normal',
+ },
+ {
+ path: '../fonts/ABCDiatype-Bold.woff2',
+ weight: '700',
+ style: 'normal',
+ },
+ ],
+ variable: '--font-abc-diatype',
+ display: 'swap',
+});
+
+// Berkeley Mono fonts
+const berkeleyMono = localFont({
+ src: [
+ {
+ path: '../fonts/BerkeleyMono-Regular.otf',
+ weight: '400',
+ style: 'normal',
+ },
+ {
+ path: '../fonts/BerkeleyMono-Oblique.otf',
+ weight: '400',
+ style: 'italic',
+ },
+ {
+ path: '../fonts/BerkeleyMono-Bold.otf',
+ weight: '700',
+ style: 'normal',
+ },
+ {
+ path: '../fonts/BerkeleyMono-Bold-Oblique.otf',
+ weight: '700',
+ style: 'italic',
+ },
+ ],
+ variable: '--font-berkeley-mono',
+ display: 'swap',
});
export const metadata: Metadata = {
@@ -29,20 +73,15 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
-
- About the App
-
- Mosaic UI is a Next.js app that uses gill, @solana/kit, and{' '}
- @mosaic/sdk for on-chain operations.
-
Architecture
--
-
- Providers: wallet, theme, cluster (devnet/testnet/mainnet), RPC -
- Pages: Landing, Dashboard, Create flows, Manage token pages -
- Local storage keeps a list of tokens you created -
Create flows
--
-
- Stablecoin: metadata, pausable, confidential balances, permanent delegate -
- Arcade Token: metadata, pausable, permanent delegate, allowlist -
- Tokenized Security: stablecoin set + scaled UI amount -
- ACL mode: choose allowlist (closed-loop) or blocklist -
- Single-signer side-effects: Token ACL + ABL set up automatically -
Clusters and RPC
-- The app defaults to Devnet. Use the cluster selector in the header to switch. RPC and subscriptions come - from the cluster context. -
-Wallets
-
- Connect a Solana wallet supported by @solana/wallet-adapter. You need SOL for fees on the
- chosen cluster.
-
- {children}
-
-
-
+ {children}
+ {/* */}
+
+
+
+ );
+ }
+
+ return
+
+ Wallet Required
+Please connect your Solana wallet to manage tokens.
+
+
+ );
+ }
+
+ if (!token) {
+ return (
+
+
+
+
+ Loading token details...
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ Token Not Found
++ The token with address {address} could not be found in your local storage. +
+ + + +
+ {
+ setError('');
+ setTransactionSignature('');
+ setActionInProgress(false);
+ }}
+ actionInProgress={actionInProgress}
+ error={error}
+ transactionSignature={transactionSignature}
+ />
+
+ {
+ setShowAccessListModal(false);
+ setNewAddress('');
+ }}
+ onAdd={addToAccessList}
+ newAddress={newAddress}
+ onAddressChange={setNewAddress}
+ title={`Add to ${listType === 'allowlist' ? 'Allowlist' : 'Blocklist'}`}
+ placeholder="Enter Solana address..."
+ buttonText={`Add to ${listType === 'allowlist' ? 'Allowlist' : 'Blocklist'}`}
+ />
+
+ );
+}
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 7b806ad..fd30490 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -1,9 +1,41 @@
-import { Hero } from '@/components/sections/hero';
-
-export default function HomePage() {
- return (
-
+ {/* Header */}
+
+
+ {/* Modals - ActionResultModal and AddressModal remain controlled (not user-triggered) */}
+
+
+
+ {/* Token Overview */}
+
+
+
+
+
+
+
+
+
+ {token.image ? (
+ 
+ ) : (
+
+
+
+ {token.name}
+{token.symbol}
+
+
+
+
+
+
+
+
+
+ Token Actions
+
+
+
+ e.preventDefault()}
+ >
+
+
+
+ )}
+
+
+ e.preventDefault()}
+ >
+
+
+
+
+
+ e.preventDefault()}
+ >
+
+
+
+ {token?.metadataAuthority && (
+
+
+ e.preventDefault()}
+ >
+
+
+ {
+ updateToken(address, {
+ ...(updates.name && { name: updates.name }),
+ ...(updates.symbol && { symbol: updates.symbol }),
+ ...(updates.uri && { metadataUri: updates.uri }),
+ });
+ // Also update local state for immediate UI feedback
+ setToken(prev =>
+ prev
+ ? {
+ ...prev,
+ ...(updates.name && { name: updates.name }),
+ ...(updates.symbol && {
+ symbol: updates.symbol,
+ }),
+ ...(updates.uri && {
+ metadataUri: updates.uri,
+ }),
+ }
+ : prev,
+ );
+ }}
+ />
+
+ )}
+ {token?.permanentDelegateAuthority && (
+ <>
+
+ Administrative Actions
+
+
+
+ e.preventDefault()}
+ >
+
+
+
+
+
+ e.preventDefault()}
+ >
+
+
+
+
+ )}
+ {token?.freezeAuthority && (
+ <>
+
+
+ e.preventDefault()}
+ >
+
+
+
+
+
+ e.preventDefault()}
+ >
+
+
+
+
+ )}
+
+
+ e.preventDefault()}
+ >
+
+
+
+
+ )}
+ {token?.pausableAuthority && (
+ <>
+ {
+ if (!open) {
+ updateExtensionField(address, 'pause', { error: null });
+ }
+ }}
+ >
+
+ e.preventDefault()}
+ >
+ {isPaused ? (
+ <>
+
+
+
+
+ )}
+
+
+ e.preventDefault()}
+ className="cursor-pointer text-red-600 hover:!text-red-600 hover:!bg-red-50 dark:hover:!text-red-600 dark:hover:!bg-red-800/40 rounded-lg"
+ >
+
+
+
+
+
+
+
+
+
+ {/* Settings */}
+ Token Overview
+
+
+
+
+ Settings
+
+
+
+ Permissions
+
+ {token.isSrfc37 && (
+
+ {listType === 'allowlist' ? 'Allowlist' : 'Blocklist'}
+
+ )}
+
+ Extensions
+
+
+
+
+
+
+
+ {token.isSrfc37 && (
+
+ setShowAccessListModal(true)}
+ onRemoveFromAccessList={removeFromAccessList}
+ />
+
+ )}
+
+
+
+
-
- );
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useConnector } from '@solana/connector/react';
+import { Spinner } from '@/components/ui/spinner';
+import { DashboardConnected } from '@/features/dashboard/components/dashboard-connected';
+import { DashboardDisconnected } from '@/features/dashboard/components/dashboard-disconnected';
+
+export default function DashboardPage() {
+ const { connected, selectedAccount, connecting } = useConnector();
+ const [isInitializing, setIsInitializing] = useState(true);
+
+ useEffect(() => {
+ if (connected || connecting) {
+ setIsInitializing(false);
+ return;
+ }
+
+ const recentWallet = localStorage.getItem('recentlyConnectedWallet');
+ if (!recentWallet) {
+ setIsInitializing(false);
+ return;
+ }
+
+ const timer = setTimeout(() => {
+ setIsInitializing(false);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }, [connected, connecting]);
+
+ if (connecting || (isInitializing && !connected)) {
+ return (
+
+
+ );
+ }
+
+ return connected && selectedAccount ?
-
- ) : (
- No wallets found
-Install a Solana wallet to get started
-
- {!selectedWalletAccount && (
- {
- setSelectedWalletAccount(account);
- setForceClose(true);
- }}
- onDisconnect={wallet => {
- if (
- selectedWalletAccount &&
- uiWalletAccountBelongsToUiWallet(selectedWalletAccount, wallet)
- ) {
- setSelectedWalletAccount(undefined);
- }
- }}
- onError={setError}
- />
- ))}
-
- )}
-
- Available Wallets
-
- )}
- {walletsThatSupportStandardConnect.map((wallet, index) => (
- {wallet.name}
-
-
-
-
- ) : null}
-
- );
-}
diff --git a/apps/app/src/components/ConnectWallet/WalletAccountIcon.tsx b/apps/app/src/components/ConnectWallet/WalletAccountIcon.tsx
deleted file mode 100644
index c74bad1..0000000
--- a/apps/app/src/components/ConnectWallet/WalletAccountIcon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { type UiWalletAccount, uiWalletAccountBelongsToUiWallet, useWallets } from '@wallet-standard/react';
-import Image from 'next/image';
-import React from 'react';
-
-type Props = React.ComponentProps<'img'> &
- Readonly<{
- account: UiWalletAccount;
- }>;
-
-export function WalletAccountIcon({ account }: Props) {
- const wallets = useWallets();
- let icon;
- if (account.icon) {
- icon = account.icon;
- } else {
- for (const wallet of wallets) {
- if (uiWalletAccountBelongsToUiWallet(account, wallet)) {
- icon = wallet.icon;
- break;
- }
- }
- }
- return icon ? Unconnectable wallet
-{error instanceof Error ? error.message : 'Unknown error'}
- -
-
- );
- }
-
- return (
-
-
- Connecting...
-
-
- );
-}
diff --git a/apps/app/src/components/CopyableExplorerField.tsx b/apps/app/src/components/CopyableExplorerField.tsx
deleted file mode 100644
index 2bcf35e..0000000
--- a/apps/app/src/components/CopyableExplorerField.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { ExternalLink } from 'lucide-react';
-
-interface CopyableExplorerFieldProps {
- label: string;
- value?: string;
- kind: 'address' | 'tx';
- cluster?: 'devnet' | 'testnet' | 'mainnet-beta';
-}
-
-export function CopyableExplorerField({ label, value, kind, cluster = 'devnet' }: CopyableExplorerFieldProps) {
- const [copied, setCopied] = useState(false);
- const explorerPath = kind === 'address' ? 'address' : 'tx';
-
- const onCopy = () => {
- if (!value) return;
- navigator.clipboard.writeText(value);
- setCopied(true);
- window.setTimeout(() => setCopied(false), 1500);
- };
-
- return (
-
-
-
- {children ?? wallet.name}
-
-
- {label}:
-
- );
-}
diff --git a/apps/app/src/components/CreateTemplateSidebar.tsx b/apps/app/src/components/CreateTemplateSidebar.tsx
deleted file mode 100644
index e1cac85..0000000
--- a/apps/app/src/components/CreateTemplateSidebar.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { CardHeader, CardContent, CardTitle } from '@/components/ui/card';
-import { ReactNode } from 'react';
-import { CapabilityKey, ExtensionKey, capabilityNodes, extensionNodes } from '@/components/capabilities/registry';
-
-interface CreateTemplateSidebarProps {
- aboutTitle?: string;
- description: ReactNode;
- coreCapabilities?: ReactNode[];
- enabledExtensions?: ReactNode[];
- standards?: ReactNode[];
- coreCapabilityKeys?: CapabilityKey[];
- enabledExtensionKeys?: ExtensionKey[];
- standardKeys?: CapabilityKey[];
-}
-
-export function CreateTemplateSidebar({
- aboutTitle = 'About this template',
- description,
- coreCapabilities,
- enabledExtensions,
- standards,
- coreCapabilityKeys,
- enabledExtensionKeys,
- standardKeys,
-}: CreateTemplateSidebarProps) {
- const resolvedCore = coreCapabilities ? coreCapabilities : (coreCapabilityKeys || []).map(k => capabilityNodes[k]);
- const resolvedExtensions = enabledExtensions
- ? enabledExtensions
- : (enabledExtensionKeys || []).map(k => extensionNodes[k]);
- const resolvedStandards = standards ? standards : (standardKeys || []).map(k => capabilityNodes[k]);
- return (
-
-
-
-
- {copied && Copied}
- {value && (
-
- )}
-
- {value}
-
-
-
- {aboutTitle}
-
-
-
-
- );
-}
diff --git a/apps/app/src/components/copyable-explorer-field.tsx b/apps/app/src/components/copyable-explorer-field.tsx
new file mode 100644
index 0000000..1b15907
--- /dev/null
+++ b/apps/app/src/components/copyable-explorer-field.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { ExternalLink } from 'lucide-react';
+import { CopyButton } from '@/components/ui/copy-button';
+import { buildAddressExplorerUrl, buildExplorerUrl } from '@/lib/solana/explorer';
+
+interface CopyableExplorerFieldProps {
+ label: string;
+ value?: string;
+ kind: 'address' | 'tx';
+ cluster?: 'devnet' | 'testnet' | 'mainnet-beta';
+}
+
+export function CopyableExplorerField({ label, value, kind, cluster }: CopyableExplorerFieldProps) {
+ if (!value) {
+ return (
+ {description}
-
- {resolvedCore?.length > 0 && (
-
-
- )}
-
- {(resolvedExtensions.length > 0 || resolvedStandards.length > 0) && (
- Core capabilities
--
- {resolvedCore.map((item, idx) => (
-
- {item} - ))} -
-
- )}
-
- Underlying standards
--
- {resolvedExtensions.length > 0 && (
-
- - Token extensions:{' '} - {resolvedExtensions.map((n, i) => ( - - {n} - {i < resolvedExtensions.length - 1 ? ', ' : ''} - - ))} - - )} - {resolvedStandards.map((item, idx) => ( -
- {item} - ))} -
- You can manage lists and authorities later from the token management dashboard.
-
-
+ {label}:
+
+ );
+ }
+
+ const explorerUrl =
+ kind === 'tx' ? buildExplorerUrl(value, cluster) : buildAddressExplorerUrl(value, { name: cluster });
+
+ return (
+ No value
+
+ {label}:
+
+ );
+}
diff --git a/apps/app/src/components/layout/footer.tsx b/apps/app/src/components/layout/footer.tsx
index 8ed0899..f240772 100644
--- a/apps/app/src/components/layout/footer.tsx
+++ b/apps/app/src/components/layout/footer.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
export function Footer() {
return (
-
+
+
+
+
+ {value}
+
+