Skip to content

Commit

Permalink
Introduce landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@svemat01
svemat01 committed Nov 16, 2024
1 parent 99ddd4e commit 88e862d
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 101 deletions.
3 changes: 2 additions & 1 deletion web/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ export const Header = () => {
<Heading>ENS Auto Renewal</Heading>
<div className="flex gap-4">
<Link to="/">Home</Link>
<Link to="/list">View all actions</Link>
<Link to="/list">View actions</Link>
<Link to="/action/new">Create new action</Link>
</div>
<hr className="w-full pt-4" />
</header>
);
};
77 changes: 50 additions & 27 deletions web/src/routeTree.gen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -51,63 +58,75 @@ 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
}
'/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
}
}
}

// Create and export the route tree

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
Expand All @@ -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"
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/__root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const Route = createRootRoute({
<ConnectKitButton />
</div>
</div>
<div className="max-w-xl mx-auto">
<div className="max-w-3xl mx-auto">
<Outlet />
</div>
<TanStackRouterDevtools />
Expand Down
121 changes: 52 additions & 69 deletions web/src/routes/index.lazy.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<Action[]> => {
// 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 (
<li className="gap-2">
<Tag display="block">
{match(action.type)
.with("RENEW_NAME", () => "Renew Name")
.otherwise(() => "Unknown")}
</Tag>
<div className="space-y-8">
<Header />

<div className="flex gap-2 ml-1 flex-wrap">
<Typography fontVariant="body">
{action.names.join(", ")}
<div className="text-center space-y-4">
<Typography fontVariant="extraLarge" weight="bold">
Automate Your ENS Name Management
</Typography>
<Typography fontVariant="small" className="ml-auto">
{action.reward} GWEI
<Typography>
Set up automated renewals and custom actions for your ENS
names with advanced execution conditions
</Typography>
<Button
as="a"
href="/action/new"
className="w-full max-w-sm mx-auto"
>
Get Started
</Button>
</div>
</li>
);
};

function Index() {
const { address } = useAccount();
const { data: actions } = useQuery({
queryKey: ["actions", "all"],
queryFn: () => getActions(address ?? "0x0"),
});
<div className="grid md:grid-cols-3 gap-4">
<Card>
<Typography weight="bold">Automated Renewals</Typography>
<Typography>
Never let your ENS names expire. Set up automatic
renewals based on expiration dates.
</Typography>
</Card>

return (
<div className="space-y-4">
<Header />
<Typography>
Add your ENS names to the list below to automatically renew them
when needed.
</Typography>
<hr />
<Card title="Your Actions">
<ul>
{actions?.map((action) => (
<ActionRow key={action.type} action={action} />
))}
</ul>
{actions?.length === 0 && (
<Helper>You have not created any actions yet</Helper>
)}
<Button as={"a"} href="/action/new">
Create New Action
<Card>
<Typography weight="bold">Private Mempool</Typography>
<Typography>
Submit action intents privately to our secure mempool
for maximum protection.
</Typography>
</Card>

<Card>
<Typography weight="bold">Custom Conditions</Typography>
<Typography>
Define precise execution conditions like expiry dates,
gas limits, and more.
</Typography>
</Card>
</div>

<Card className="text-center">
<Typography fontVariant="large" weight="bold">
Ready to automate your ENS management?
</Typography>
<Helper>
Create your first automated action now and let us handle the
rest
</Helper>
<Button as="a" href="/action/new">
Create Action
</Button>
</Card>
</div>
Expand Down
6 changes: 3 additions & 3 deletions web/src/routes/list.lazy.tsx → web/src/routes/list/all.lazy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down
Loading

0 comments on commit 88e862d

Please sign in to comment.