From 88e862dacb57acdab05efa2d38fa8eeb4fce04a4 Mon Sep 17 00:00:00 2001 From: Jakob Helgesson Date: Sat, 16 Nov 2024 22:28:25 +0700 Subject: [PATCH] Introduce landing page --- web/src/components/Header.tsx | 3 +- web/src/routeTree.gen.ts | 77 +++++++---- web/src/routes/__root.tsx | 2 +- web/src/routes/index.lazy.tsx | 121 ++++++++---------- .../{list.lazy.tsx => list/all.lazy.tsx} | 6 +- web/src/routes/list/index.lazy.tsx | 91 +++++++++++++ 6 files changed, 199 insertions(+), 101 deletions(-) rename web/src/routes/{list.lazy.tsx => list/all.lazy.tsx} (94%) create mode 100644 web/src/routes/list/index.lazy.tsx diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index 682e4d2..c0b615d 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -7,9 +7,10 @@ export const Header = () => { ENS Auto Renewal
Home - View all actions + View actions Create new action
+
); }; diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts index 18e0e47..d204aa1 100644 --- a/web/src/routeTree.gen.ts +++ b/web/src/routeTree.gen.ts @@ -16,24 +16,31 @@ import { Route as rootRoute } from './routes/__root' // Create Virtual Routes -const ListLazyImport = createFileRoute('/list')() const IndexLazyImport = createFileRoute('/')() +const ListIndexLazyImport = createFileRoute('/list/')() +const ListAllLazyImport = createFileRoute('/list/all')() 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 ListIndexLazyRoute = ListIndexLazyImport.update({ + id: '/list/', + path: '/list/', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/list/index.lazy').then((d) => d.Route)) + +const ListAllLazyRoute = ListAllLazyImport.update({ + id: '/list/all', + path: '/list/all', + getParentRoute: () => rootRoute, +} as any).lazy(() => import('./routes/list/all.lazy').then((d) => d.Route)) + const ActionNewLazyRoute = ActionNewLazyImport.update({ id: '/action/new', path: '/action/new', @@ -51,13 +58,6 @@ 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' @@ -65,6 +65,20 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ActionNewLazyImport parentRoute: typeof rootRoute } + '/list/all': { + id: '/list/all' + path: '/list/all' + fullPath: '/list/all' + preLoaderRoute: typeof ListAllLazyImport + parentRoute: typeof rootRoute + } + '/list/': { + id: '/list/' + path: '/list' + fullPath: '/list' + preLoaderRoute: typeof ListIndexLazyImport + parentRoute: typeof rootRoute + } } } @@ -72,42 +86,47 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexLazyRoute - '/list': typeof ListLazyRoute '/action/new': typeof ActionNewLazyRoute + '/list/all': typeof ListAllLazyRoute + '/list': typeof ListIndexLazyRoute } export interface FileRoutesByTo { '/': typeof IndexLazyRoute - '/list': typeof ListLazyRoute '/action/new': typeof ActionNewLazyRoute + '/list/all': typeof ListAllLazyRoute + '/list': typeof ListIndexLazyRoute } export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexLazyRoute - '/list': typeof ListLazyRoute '/action/new': typeof ActionNewLazyRoute + '/list/all': typeof ListAllLazyRoute + '/list/': typeof ListIndexLazyRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/list' | '/action/new' + fullPaths: '/' | '/action/new' | '/list/all' | '/list' fileRoutesByTo: FileRoutesByTo - to: '/' | '/list' | '/action/new' - id: '__root__' | '/' | '/list' | '/action/new' + to: '/' | '/action/new' | '/list/all' | '/list' + id: '__root__' | '/' | '/action/new' | '/list/all' | '/list/' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexLazyRoute: typeof IndexLazyRoute - ListLazyRoute: typeof ListLazyRoute ActionNewLazyRoute: typeof ActionNewLazyRoute + ListAllLazyRoute: typeof ListAllLazyRoute + ListIndexLazyRoute: typeof ListIndexLazyRoute } const rootRouteChildren: RootRouteChildren = { IndexLazyRoute: IndexLazyRoute, - ListLazyRoute: ListLazyRoute, ActionNewLazyRoute: ActionNewLazyRoute, + ListAllLazyRoute: ListAllLazyRoute, + ListIndexLazyRoute: ListIndexLazyRoute, } export const routeTree = rootRoute @@ -121,18 +140,22 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", - "/list", - "/action/new" + "/action/new", + "/list/all", + "/list/" ] }, "/": { "filePath": "index.lazy.tsx" }, - "/list": { - "filePath": "list.lazy.tsx" - }, "/action/new": { "filePath": "action/new.lazy.tsx" + }, + "/list/all": { + "filePath": "list/all.lazy.tsx" + }, + "/list/": { + "filePath": "list/index.lazy.tsx" } } } diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx index 77cef4d..14624d3 100644 --- a/web/src/routes/__root.tsx +++ b/web/src/routes/__root.tsx @@ -13,7 +13,7 @@ export const Route = createRootRoute({ -
+
diff --git a/web/src/routes/index.lazy.tsx b/web/src/routes/index.lazy.tsx index f45813b..2ec7b23 100644 --- a/web/src/routes/index.lazy.tsx +++ b/web/src/routes/index.lazy.tsx @@ -1,86 +1,69 @@ -import { Button, Card, Helper, Tag, Typography } from "@ensdomains/thorin"; -import { useQuery } from "@tanstack/react-query"; +import { Button, Card, Helper, Typography } from "@ensdomains/thorin"; import { createLazyFileRoute } from "@tanstack/react-router"; -import { match } from "ts-pattern"; -import { useAccount } from "wagmi"; import { Header } from "../components/Header"; -import { Action } from "../types"; export const Route = createLazyFileRoute("/")({ component: Index, }); -/** - * list of all actions - * list of all actions by owner - * - * create new action | SIG_REQ - * delete action | SIG_REQ - */ - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const getActions = async (owner: string): Promise => { - // Temporary storage of actions in local storage - const stored = localStorage.getItem("actions"); - if (!stored) { - return []; - } - - try { - const actions = JSON.parse(stored) as Action[]; - return actions.filter((action) => action.owner === owner); - } catch { - return []; - } -}; - -const ActionRow = ({ action }: { action: Action }) => { +function Index() { return ( -
  • - - {match(action.type) - .with("RENEW_NAME", () => "Renew Name") - .otherwise(() => "Unknown")} - +
    +
    -
    - - {action.names.join(", ")} +
    + + Automate Your ENS Name Management - - {action.reward} GWEI + + Set up automated renewals and custom actions for your ENS + names with advanced execution conditions +
    -
    • - ); -}; -function Index() { - const { address } = useAccount(); - const { data: actions } = useQuery({ - queryKey: ["actions", "all"], - queryFn: () => getActions(address ?? "0x0"), - }); +
    + + Automated Renewals + + Never let your ENS names expire. Set up automatic + renewals based on expiration dates. + + - return ( -
    -
    - - Add your ENS names to the list below to automatically renew them - when needed. - -
    - -
      - {actions?.map((action) => ( - - ))} -
    - {actions?.length === 0 && ( - You have not created any actions yet - )} -
    + + + + Ready to automate your ENS management? + + + Create your first automated action now and let us handle the + rest + +
    diff --git a/web/src/routes/list.lazy.tsx b/web/src/routes/list/all.lazy.tsx similarity index 94% rename from web/src/routes/list.lazy.tsx rename to web/src/routes/list/all.lazy.tsx index a4cbf37..f361591 100644 --- a/web/src/routes/list.lazy.tsx +++ b/web/src/routes/list/all.lazy.tsx @@ -2,10 +2,10 @@ import { Button, Card, Helper, Tag, Typography } from "@ensdomains/thorin"; import { useQuery } from "@tanstack/react-query"; import { createLazyFileRoute } from "@tanstack/react-router"; import { match } from "ts-pattern"; -import { Header } from "../components/Header"; -import { Action } from "../types"; +import { Header } from "../../components/Header"; +import { Action } from "../../types"; -export const Route = createLazyFileRoute("/list")({ +export const Route = createLazyFileRoute("/list/all")({ component: Index, }); diff --git a/web/src/routes/list/index.lazy.tsx b/web/src/routes/list/index.lazy.tsx new file mode 100644 index 0000000..0a43a25 --- /dev/null +++ b/web/src/routes/list/index.lazy.tsx @@ -0,0 +1,91 @@ +import { Button, Card, Helper, Tag, Typography } from "@ensdomains/thorin"; +import { useQuery } from "@tanstack/react-query"; +import { createLazyFileRoute, Link } from "@tanstack/react-router"; +import { match } from "ts-pattern"; +import { useAccount } from "wagmi"; +import { Header } from "../../components/Header"; +import { Action } from "../../types"; + +export const Route = createLazyFileRoute("/list/")({ + component: Index, +}); + +/** + * list of all actions + * list of all actions by owner + * + * create new action | SIG_REQ + * delete action | SIG_REQ + */ + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const getActions = async (owner: string): Promise => { + // Temporary storage of actions in local storage + const stored = localStorage.getItem("actions"); + if (!stored) { + return []; + } + + try { + const actions = JSON.parse(stored) as Action[]; + return actions.filter((action) => action.owner === owner); + } catch { + return []; + } +}; + +const ActionRow = ({ action }: { action: Action }) => { + return ( +
  • + + {match(action.type) + .with("RENEW_NAME", () => "Renew Name") + .otherwise(() => "Unknown")} + + +
    + + {action.names.join(", ")} + + + {action.reward} GWEI + +
    +
    • + ); +}; + +function Index() { + const { address } = useAccount(); + const { data: actions } = useQuery({ + queryKey: ["actions", address], + queryFn: () => getActions(address ?? "0x0"), + }); + + return ( +
    +
    +
    + + Add your ENS names to the list below to automatically renew + them when needed. + + View all actions +
    +
    + +
      + {actions?.map((action) => ( + + ))} +
    + {actions?.length === 0 && ( + You have not created any actions yet + )} + +     +
    + ); +}