feat(dashmint-lab): add Tokens tab for DashMint token transfers

example-apps/dashmint-lab/eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from "typescript-eslint";
 import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(["dist"]),
+  globalIgnores(["coverage", "dist"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [

example-apps/dashmint-lab/src/App.tsx

@@ -22,6 +22,7 @@ import { MintForm } from "./components/MintForm";
 import { PurchaseModal } from "./components/PurchaseModal";
 import { SetPriceModal } from "./components/SetPriceModal";
 import { SubTabs, type CollectionSubTab, type TopTab } from "./components/Tabs";
+import { TokenTransferScreen } from "./components/TokenTransferScreen";
 import { TransferModal } from "./components/TransferModal";
 import { HowItWorks } from "./components/HowItWorks";
 import { errorMessage } from "./dash/logger";
@@ -89,12 +90,14 @@ function App() {
     else if (status === "browsing") setSubTab("all");
   }, [status]);
 
-  // Re-fetch token balance whenever the Mint tab becomes active. The balance
+  // Re-fetch token balance whenever token-related tabs become active. The balance
   // effect in SessionContext only runs on login/logout/contract change, so
   // without this prompt the value could be stale (read-after-write lag from
   // a recent mint elsewhere, or simply a value from many minutes ago).
   useEffect(() => {
-    if (tab === "mint" && status === "authenticated") refreshBalance();
+    if ((tab === "mint" || tab === "tokens") && status === "authenticated") {
+      refreshBalance();
+    }
   }, [tab, status, refreshBalance]);
 
   // Load cards for the current sub-tab whenever dependencies change.
@@ -173,6 +176,10 @@ function App() {
       subtitle:
         "Create collectible cards on Dash Platform using DashMint tokens.",
     },
+    tokens: {
+      title: "Tokens",
+      subtitle: "Send DashMint tokens to another identity on Dash Platform.",
+    },
     "how-it-works": {
       title: "How it works",
       subtitle: "Understand the building blocks behind DashMint Lab.",
@@ -303,6 +310,33 @@ function App() {
           </section>
         )}
 
+        {/* ── Tokens ────────────────────────────────────────────────── */}
+        {tab === "tokens" && (
+          <section className="relative">
+            {status !== "authenticated" && (
+              <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-lg bg-bg/55 backdrop-blur-sm">
+                <p className="text-sm text-ink-2">
+                  Login to transfer DashMint tokens
+                </p>
+                <button
+                  type="button"
+                  onClick={() => setLoginOpen(true)}
+                  className="rounded-md bg-accent px-6 py-2.5 text-sm font-semibold text-bg transition hover:bg-accent-dim"
+                >
+                  Login
+                </button>
+              </div>
+            )}
+            {contractId && (
+              <TokenTransferScreen
+                contractId={contractId}
+                dashMintTokenBalance={dashMintTokenBalance}
+                onTransferred={refresh}
+              />
+            )}
+          </section>
+        )}
+
         {/* ── How it works ──────────────────────────────────────────── */}
         {tab === "how-it-works" && (
           <section>

example-apps/dashmint-lab/src/components/AppShell.tsx

@@ -63,6 +63,15 @@ export function AppShell({
           closeDrawer();
         }}
       />
+      <NavButton
+        label="Tokens"
+        glyph="$"
+        active={tab === "tokens"}
+        onClick={() => {
+          onTabChange("tokens");
+          closeDrawer();
+        }}
+      />
       <NavButton
         label="How it works"
         glyph="?"

example-apps/dashmint-lab/src/components/Tabs.tsx

@@ -4,7 +4,7 @@
  * Top-level navigation is handled by NavButton in the AppShell sidebar.
  */
 
-export type TopTab = "collection" | "mint" | "how-it-works";
+export type TopTab = "collection" | "mint" | "tokens" | "how-it-works";
 export type CollectionSubTab = "my" | "all" | "marketplace";
 
 export interface SubTabsProps {