add keystatic, upgrade account section and notifications, refactor to ark api

.env.mainnet

@@ -8,6 +8,9 @@ NEXT_PUBLIC_STARKSCAN_URL=https://starkscan.co
 NEXT_PUBLIC_SUBGRAPH_NAME=https://api.thegraph.com/subgraphs/name/redbeardeth/starknet-bridge-mainnet
 NEXT_PUBLIC_APIBARA_HANDLE=graphql
 NEXT_PUBLIC_REALMS_SUBGRAPH_NAME=https://api.thegraph.com/subgraphs/name/bibliothecaforadventurers/realms
+NEXT_PUBLIC_REALMS_BRIDGE_SUBGRAPH_NAME=https://api.studio.thegraph.com/query/73174/realms-bridge-main/version/latest
+NEXT_PUBLIC_REALMS_LEGACY_REWARD_SUBGRAPH_NAME=https://api.studio.thegraph.com/query/73174/legacy-rewards-sepolia/version/latest
+
 
 # @see https://next-auth.js.org/configuration/options#nextauth_url
 AUTH_URL='http://localhost:3000'

.env.sepolia

@@ -8,6 +8,7 @@ NEXT_PUBLIC_STARKSCAN_URL=https://testnet.starkscan.co
 NEXT_PUBLIC_SUBGRAPH_NAME=redbeardeth/starknet-bridge-goerli
 NEXT_PUBLIC_APIBARA_HANDLE=goerli-graphql
 NEXT_PUBLIC_REALMS_SUBGRAPH_NAME=bibliothecadao/goerli-realms
+NEXT_PUBLIC_REALMS_BRIDGE_SUBGRAPH_NAME=https://api.studio.thegraph.com/query/73174/realms-bridge/version/latest
 NEXT_PUBLIC_REALMS_LEGACY_REWARD_SUBGRAPH_NAME=https://api.studio.thegraph.com/query/73174/legacy-rewards-sepolia/version/latest
 
 

.vscode/settings.json

@@ -24,8 +24,13 @@
   "deno.enable": false,
   "deno.lint": false,
   "deno.unstable": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features"
+    // Sometimes vscode prettier doesn't format .tsx file without this config.
+    // see also: https://stackoverflow.com/questions/61731587/vscode-prettier-doesnt-format-tsx-file
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 
   /*"deno.enable": true,

apps/frontinus-house/package.json

@@ -18,7 +18,7 @@
     "@types/remarkable": "^2.0.8",
     "autoprefixer": "^10.4.19",
     "graphql": "^16.9.0",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.10.0",
     "highlightjs-solidity": "^2.0.6",
     "postcss": "^8.4.41",
     "react": "catalog:react18",

apps/frontinus-house/src/components/header.tsx

@@ -13,25 +13,29 @@ import {
 } from "lucide-react";
 import { Link } from "react-router-dom";
 
+import { Badge } from "@realms-world/ui/components/ui/badge";
+import { Button } from "@realms-world/ui/components/ui/button";
 import {
-  Badge,
-  Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
+} from "@realms-world/ui/components/ui/card";
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Input,
+} from "@realms-world/ui/components/ui/dropdown-menu";
+import { Input } from "@realms-world/ui/components/ui/input";
+import {
   Sheet,
   SheetContent,
   SheetTrigger,
-} from "@realms-world/ui";
+} from "@realms-world/ui/components/ui/sheet";
 
 export default function Header() {
   return (

apps/frontinus-house/src/components/sidebar.tsx

@@ -2,14 +2,15 @@ import { sidelinks } from "@/data/menuLinks";
 import { Bell, Package2 } from "lucide-react";
 import { Link } from "react-router-dom";
 
+import { Button } from "@realms-world/ui/components/ui/button";
 import {
-  Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@realms-world/ui";
+} from "@realms-world/ui/components/ui/card";
+
 
 interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
   isCollapsed: boolean;

apps/frontinus-house/src/lib/network/index.ts

@@ -1,30 +1,28 @@
-import { createStarknetNetwork } from './starknet';
-import { createEvmNetwork } from './evm';
-import { NetworkID } from '@/types';
-import { ReadWriteNetwork } from './types';
+import { createStarknetNetwork } from "./starknet";
+import { createEvmNetwork } from "./evm";
+import { NetworkID } from "@/types";
+import { ReadWriteNetwork } from "./types";
 
+const starknetNetwork = createStarknetNetwork("sn");
+const starknetSepoliaNetwork = createStarknetNetwork("sn-sep");
+const ethereumNetwork = createEvmNetwork("eth");
+const sepoliaNetwork = createEvmNetwork("sep");
 
-const starknetNetwork = createStarknetNetwork('sn');
-const starknetSepoliaNetwork = createStarknetNetwork('sn-sep');
-const ethereumNetwork = createEvmNetwork('eth');
-const sepoliaNetwork = createEvmNetwork('sep');
+export const enabledNetworks: NetworkID[] = import.meta.env
+  .VITE_ENABLED_NETWORKS
+  ? (import.meta.env.VITE_ENABLED_NETWORKS.split(",") as NetworkID[])
+  : ["sn", "sn-sep"];
 
-export const enabledNetworks: NetworkID[] = import.meta.env.VITE_ENABLED_NETWORKS
-  ? (import.meta.env.VITE_ENABLED_NETWORKS.split(',') as NetworkID[])
-  : ['eth', 'sep', 'sn', 'sn-sep'];
-
-export const evmNetworks: NetworkID[] = [
-  'eth',
-  'sep',
-];
+export const evmNetworks: NetworkID[] = ["eth", "sep"];
 
 export const getNetwork = (id: NetworkID) => {
-  if (!enabledNetworks.includes(id)) throw new Error(`Network ${id} is not enabled`);
+  if (!enabledNetworks.includes(id))
+    throw new Error(`Network ${id} is not enabled`);
 
-  if (id === 'eth') return ethereumNetwork;
-  if (id === 'sep') return sepoliaNetwork;
-  if (id === 'sn') return starknetNetwork;
-  if (id === 'sn-sep') return starknetSepoliaNetwork;
+  if (id === "eth") return ethereumNetwork;
+  if (id === "sep") return sepoliaNetwork;
+  if (id === "sn") return starknetNetwork;
+  if (id === "sn-sep") return starknetSepoliaNetwork;
 
   throw new Error(`Unknown network ${id}`);
 };
@@ -37,7 +35,7 @@ export const getReadWriteNetwork = (id: NetworkID): ReadWriteNetwork => {
 };
 
 export const enabledReadWriteNetworks: NetworkID[] = enabledNetworks.filter(
-  id => !getNetwork(id).readOnly
+  (id) => !getNetwork(id).readOnly,
 );
 
 /**
@@ -47,4 +45,4 @@ export const enabledReadWriteNetworks: NetworkID[] = enabledNetworks.filter(
  */
 export const supportsNullCurrent = (networkID: NetworkID) => {
   return !evmNetworks.includes(networkID);
-};
+};

apps/frontinus-house/src/pages/proposals/[id]/overview.tsx

@@ -3,15 +3,14 @@ import { Markdown } from "@/components/Markdown";
 import { _rt, getProposalId, shortenAddress } from "@/lib/utils";
 import { Proposal } from "@/types";
 import { Link, useLocation } from "react-router-dom";
+import { Button } from "@realms-world/ui/components/ui/button";
 
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Tooltip,
-} from "@realms-world/ui";
+} from "@realms-world/ui/components/ui/dropdown-menu";
 
 export default function Overview({ proposal }: { proposal: Proposal }) {
   let location = useLocation();

apps/frontinus/.gitignore

@@ -0,0 +1,18 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+.vinxi
+.output
+.vercel
+.netlify
+.wrangler
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

apps/frontinus/app.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "@tanstack/start/config";
+import tsConfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  vite: {
+    plugins: () => [
+      tsConfigPaths({
+        projects: ["./tsconfig.json"],
+      }),
+    ],
+  },
+  server: {
+    preset: "vercel",
+  },
+});

apps/frontinus/app/App.css

@@ -0,0 +1,4 @@
+:root {
+  --font-bebas-neue: "Bebas Neue";
+  --font-space-mono: "Space Mono";
+}

apps/frontinus/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

apps/frontinus/app/components/layout/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+    ErrorComponent,
+    ErrorComponentProps,
+    Link,
+    rootRouteId,
+    useMatch,
+    useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+    const router = useRouter()
+    const isRoot = useMatch({
+        strict: false,
+        select: (state) => state.id === rootRouteId,
+    })
+
+    console.error(error)
+
+    return (
+        <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+            <ErrorComponent error={error} />
+            <div className="flex gap-2 items-center flex-wrap">
+                <button
+                    onClick={() => {
+                        router.invalidate()
+                    }}
+                    className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+                >
+                    Try Again
+                </button>
+                {isRoot ? (
+                    <Link
+                        to="/"
+                        className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+                    >
+                        Home
+                    </Link>
+                ) : (
+                    <Link
+                        to="/"
+                        className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+                        onClick={(e) => {
+                            e.preventDefault()
+                            window.history.back()
+                        }}
+                    >
+                        Go Back
+                    </Link>
+                )}
+            </div>
+        </div>
+    )
+}

apps/frontinus/app/components/layout/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+    return (
+        <div className="space-y-2 p-2">
+            <div className="text-gray-600 dark:text-gray-400">
+                {children || <p>The page you are looking for does not exist.</p>}
+            </div>
+            <p className="flex items-center gap-2 flex-wrap">
+                <button
+                    onClick={() => window.history.back()}
+                    className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+                >
+                    Go back
+                </button>
+                <Link
+                    to="/"
+                    className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+                >
+                    Start Over
+                </Link>
+            </p>
+        </div>
+    )
+}

apps/frontinus/app/components/layout/mode-toggle.tsx

@@ -0,0 +1,37 @@
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@realms-world/ui/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@realms-world/ui/components/ui/dropdown-menu"
+import { useTheme } from "app/components/layout/theme-provider"
+
+export function ModeToggle() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setTheme("light")}>
+                    Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")}>
+                    Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")}>
+                    System
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}