diff --git a/frontend/app/package.json b/frontend/app/package.json
index 3cbefac1..1c474975 100644
--- a/frontend/app/package.json
+++ b/frontend/app/package.json
@@ -19,7 +19,6 @@
"@react-spring/web": "^9.7.3",
"@tanstack/react-query": "^5.31.0",
"dnum": "^2.11.0",
- "focus-trap-react": "^10.2.3",
"geist": "^1.3.0",
"next": "14.2.2",
"react": "^18",
diff --git a/frontend/app/src/app/page.tsx b/frontend/app/src/app/page.tsx
index d2ec97a2..0a47b033 100644
--- a/frontend/app/src/app/page.tsx
+++ b/frontend/app/src/app/page.tsx
@@ -1,7 +1,8 @@
"use client";
-import { AppLauncher } from "@/src/comps/AppLauncher/AppLauncher";
import { css } from "@/styled-system/css";
+import { Button } from "@liquity2/uikit";
+import Link from "next/link";
export default function Home() {
return (
@@ -9,11 +10,30 @@ export default function Home() {
className={css({
display: "flex",
alignItems: "center",
+ justifyContent: "center",
+ gap: 16,
width: "100%",
height: "100%",
})}
>
-
+ {([
+ ["/contracts", true],
+ ["/earn", true],
+ ["/borrow", false],
+ ] as const).map(([path, enabled]) => (
+
+
+
+ ))}
);
}
diff --git a/frontend/app/src/comps/AppLauncher/AppIcon.tsx b/frontend/app/src/comps/AppLauncher/AppIcon.tsx
deleted file mode 100644
index 5ffa6bc2..00000000
--- a/frontend/app/src/comps/AppLauncher/AppIcon.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-
-import { a, useSpring } from "@react-spring/web";
-import { match } from "ts-pattern";
-
-type IconProps = {
- state: "initial" | "idle" | "active";
-};
-
-export const springConfig = {
- mass: 1,
- tension: 800,
- friction: 40,
-};
-
-export function AppIcon({
- iconType,
- state,
-}: {
- iconType: "borrow" | "leverage" | "earn";
- state: IconProps["state"];
-}) {
- return match(iconType)
- .with("borrow", () => )
- .with("leverage", () => )
- .with("earn", () => )
- .exhaustive();
-}
-
-function AppIconBorrow({ state }: IconProps) {
- const { t1, t2 } = useSpring({
- t1: state === "active"
- ? "translate(36 0) scale(1.1)"
- : "translate(0 0) scale(1)",
- t2: state === "active"
- ? "translate(-36 0) scale(1.1)"
- : "translate(0 0) scale(1)",
- config: springConfig,
- });
- return (
-
-
-
-
- );
-}
-
-function AppIconLeverage({ state }: IconProps) {
- const { t1, t2 } = useSpring({
- t1: state === "active"
- ? "translate(0 56) scale(0)"
- : "translate(0 36) scale(2)",
- t2: state === "active"
- ? "translate(-6 -6) scale(6.8)"
- : "translate(20 0) scale(3.6)",
- config: springConfig,
- });
-
- return (
-
-
-
-
- );
-}
-
-function AppIconEarn({ state }: IconProps) {
- const { squareT, squareRadius, circleT } = useSpring({
- squareT: state === "active" ? "scale(1.4)" : "scale(1)",
- squareRadius: state === "active" ? "28" : "0",
- circleT: state === "active" ? "scale(0.8)" : "scale(1)",
- config: springConfig,
- });
- return (
-
-
-
-
- );
-}
-
-function IconBase({ children }: { children: ReactNode }) {
- return (
-
- );
-}
diff --git a/frontend/app/src/comps/AppLauncher/AppLauncher.tsx b/frontend/app/src/comps/AppLauncher/AppLauncher.tsx
deleted file mode 100644
index 3ec1a3e4..00000000
--- a/frontend/app/src/comps/AppLauncher/AppLauncher.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-"use client";
-
-import { css } from "@/styled-system/css";
-import { a, useSpring } from "@react-spring/web";
-import Link from "next/link";
-import { useState } from "react";
-import { AppIcon, springConfig } from "./AppIcon";
-
-type AppData = readonly [
- label: string,
- description: string,
- href: string,
- bg: string,
- fg: string,
- iconType: "borrow" | "leverage" | "earn",
-];
-
-const apps: AppData[] = [
- [
- "Borrow",
- "Borrow BOLD stablecoin against ETH and staked ETH at a rate that you set",
- "/borrow",
- "#121B44",
- "#FFFFFF",
- "borrow",
- ],
- [
- "Leverage",
- "Multiply your ETH and staked ETH at a funding rate that you set",
- "/leverage",
- "#63D77D",
- "#121B44",
- "leverage",
- ],
- [
- "Earn",
- "Deposit BOLD and earn real yield",
- "/earn",
- "#405AE5",
- "#FFFFFF",
- "earn",
- ],
-];
-
-export function AppLauncher() {
- const [highlighted, setHighlighted] = useState(null);
-
- const { gridTemplateColumns } = useSpring({
- gridTemplateColumns: apps.map((app) => (
- highlighted === app ? "1.1fr" : "1fr"
- )).join(" "),
- config: springConfig,
- });
-
- return (
-
- {apps.map((app) => (
- {
- setHighlighted(highlighted ? app : null);
- }}
- />
- ))}
-
- );
-}
-
-function AppCard({
- app,
- highlighted,
- onHighlightChange,
-}: {
- app: AppData;
- highlighted: boolean;
- onHighlightChange: (highlighted: boolean) => void;
-}) {
- const [label, description, href, bg, fg, iconType] = app;
-
- const { titleT, arrowT } = useSpring({
- titleT: highlighted ? "scale(1.2)" : "scale(1)",
- arrowT: highlighted ? "scale(1.4)" : "scale(1)",
- config: springConfig,
- });
-
- return (
- onHighlightChange(true)}
- onMouseLeave={() => onHighlightChange(false)}
- onFocus={() => onHighlightChange(true)}
- onBlur={() => onHighlightChange(false)}
- className={css({
- outline: "none",
- _active: {
- translate: "0 2px",
- },
- _focusVisible: {
- zIndex: 2,
- outlineOffset: 0,
- outlineColor: "#FFFFFF",
- },
- })}
- >
-
-
-
-
-
- {label}
-
-
-
-
-
-
- {description}
-
-