Introduce initial UI

web/package.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@ensdomains/thorin": "1.0.0-beta.9",
+    "@tanstack/react-form": "^0.35.0",
     "@tanstack/react-query": "^5.60.2",
     "@tanstack/react-router": "^1.81.9",
     "connectkit": "^1.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "ts-pattern": "^5.5.0",
     "viem": "2.x",
     "wagmi": "^2.12.32"
   },

web/src/components/Header.tsx

@@ -0,0 +1,15 @@
+import { Heading } from "@ensdomains/thorin";
+import { Link } from "@tanstack/react-router";
+
+export const Header = () => {
+    return (
+        <header className="flex flex-col justify-between items-start">
+            <Heading>ENS Auto Renewal</Heading>
+            <div className="flex gap-4">
+                <Link to="/">Home</Link>
+                <Link to="/list">View all actions</Link>
+                <Link to="/action/new">Create new action</Link>
+            </div>
+        </header>
+    );
+};

web/src/hooks/enstate.tsx

@@ -0,0 +1,49 @@
+import { queryOptions } from "@tanstack/react-query";
+
+// {
+//     "name": "helgesson.eth",
+//     "address": "0xd577D1322cB22eB6EAC1a008F62b18807921EFBc",
+//     "avatar": "https://ipfs.euc.li/ipfs/bafkreigiqg7bxushl3ogmdavtuk5jsh3g4xbyskn3blqu4kaw2wj4odgp4",
+//     "display": "helgesson.eth",
+//     "records": {
+//     "avatar": "ipfs://bafkreigiqg7bxushl3ogmdavtuk5jsh3g4xbyskn3blqu4kaw2wj4odgp4",
+//     "com.discord": "Svemat#5531",
+//     "com.github": "svemat01",
+//     "com.twitter": "Helgesson_",
+//     "email": "[email protected]",
+//     "org.telegram": "helgesson",
+//     "url": "https://jakobhelgesson.com"
+//     },
+//     "chains": {
+//     "eth": "0xd577D1322cB22eB6EAC1a008F62b18807921EFBc"
+//     },
+//     "fresh": 1731744359845,
+//     "resolver": "0x4976fb03C32e5B8cfe2b6cCB31c09Ba78EBaBa41",
+//     "errors": {}
+//     }
+type EnstateResponse = {
+    name: string;
+    address: string;
+    avatar?: string;
+    errors?: Record<string, string>;
+};
+
+const lookupEnsName = async (name: string): Promise<EnstateResponse> => {
+    if (!name || !name.includes(".") || name.endsWith(".")) {
+        throw new Error("Invalid ENS name");
+    }
+
+    const res = await fetch(`https://sepolia.enstate.rs/n/${name}`);
+
+    if (!res.ok) {
+        throw new Error("Failed to lookup ENS name");
+    }
+
+    return res.json() as Promise<EnstateResponse>;
+};
+
+export const lookupEnsNameQueryOptions = (name: string) =>
+    queryOptions({
+        queryKey: ["enstate", "name", name],
+        queryFn: () => lookupEnsName(name),
+    });

web/src/index.css

@@ -17,12 +17,9 @@
 
 a {
     font-weight: 500;
-    color: #646cff;
+    color: inherit;
     text-decoration: inherit;
 }
-a:hover {
-    color: #535bf2;
-}
 
 body {
     margin: 0;

web/src/routeTree.gen.ts

@@ -16,16 +16,30 @@ import { Route as rootRoute } from './routes/__root'
 
 // Create Virtual Routes
 
+const ListLazyImport = createFileRoute('/list')()
 const IndexLazyImport = createFileRoute('/')()
+const ActionNewLazyImport = createFileRoute('/action/new')()
 
 // Create/Update Routes
 
+const ListLazyRoute = ListLazyImport.update({
+  id: '/list',
+  path: '/list',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/list.lazy').then((d) => d.Route))
+
 const IndexLazyRoute = IndexLazyImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
+const ActionNewLazyRoute = ActionNewLazyImport.update({
+  id: '/action/new',
+  path: '/action/new',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/action/new.lazy').then((d) => d.Route))
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -37,39 +51,63 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexLazyImport
       parentRoute: typeof rootRoute
     }
+    '/list': {
+      id: '/list'
+      path: '/list'
+      fullPath: '/list'
+      preLoaderRoute: typeof ListLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/action/new': {
+      id: '/action/new'
+      path: '/action/new'
+      fullPath: '/action/new'
+      preLoaderRoute: typeof ActionNewLazyImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexLazyRoute
+  '/list': typeof ListLazyRoute
+  '/action/new': typeof ActionNewLazyRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexLazyRoute
+  '/list': typeof ListLazyRoute
+  '/action/new': typeof ActionNewLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexLazyRoute
+  '/list': typeof ListLazyRoute
+  '/action/new': typeof ActionNewLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/list' | '/action/new'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/list' | '/action/new'
+  id: '__root__' | '/' | '/list' | '/action/new'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexLazyRoute: typeof IndexLazyRoute
+  ListLazyRoute: typeof ListLazyRoute
+  ActionNewLazyRoute: typeof ActionNewLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexLazyRoute: IndexLazyRoute,
+  ListLazyRoute: ListLazyRoute,
+  ActionNewLazyRoute: ActionNewLazyRoute,
 }
 
 export const routeTree = rootRoute
@@ -82,11 +120,19 @@ export const routeTree = rootRoute
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/"
+        "/",
+        "/list",
+        "/action/new"
       ]
     },
     "/": {
       "filePath": "index.lazy.tsx"
+    },
+    "/list": {
+      "filePath": "list.lazy.tsx"
+    },
+    "/action/new": {
+      "filePath": "action/new.lazy.tsx"
     }
   }
 }