Feat/lifi (#53)

* wip lifi modal

* bun lock update

* feat: add bridge functionality and update widget configuration

merkl.config.ts

@@ -112,11 +112,11 @@ export default createConfig({
       route: "/protocols",
       key: uuidv4(),
     },
-    // bridge: {
-    //   icon: "RiCompassesLine",
-    //   route: "/bridge",
-    //   key: uuidv4(),
-    // },
+    bridge: {
+      icon: "RiCompassesLine",
+      route: "/bridge",
+      key: uuidv4(),
+    },
     docs: {
       icon: "RiFile4Fill",
       external: true,

package.json

@@ -12,15 +12,14 @@
     "serve": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": ["packages/*"],
   "dependencies": {
     "@acab/ecsstatic": "^0.8.0",
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
     "@emotion/css": "^11.13.4",
     "@merkl/api": "0.10.203",
+    "@lifi/widget": "^3.13.1",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@remix-run/dev": "^2.11.2",

src/I18n/en.ts

@@ -8,6 +8,10 @@ const en = {
       title: "Explore opportunities",
       description: "Browse opportunities, compare rewards, and earn tokens",
     },
+    bridge: {
+      title: "Bridge funds",
+      description: "Bridge assets effortlessly between blockchains and power your DeFi journey",
+    },
   },
 };
 

src/components/composite/LiFiWidget.tsx

@@ -0,0 +1,71 @@
+import { type WidgetConfig, WidgetSkeleton } from "@lifi/widget";
+import { Suspense, lazy } from "react";
+
+const LiFiWidgetLazy = lazy(async () => {
+  const module = await import("@lifi/widget");
+
+  return { default: module.LiFiWidget };
+});
+
+export function LiFiWidget() {
+  const config: Partial<WidgetConfig> = {
+    variant: "wide",
+    subvariant: "default",
+    appearance: "dark",
+    theme: {
+      palette: {
+        primary: {
+          main: "#ff9954",
+        },
+        secondary: {
+          main: "#85b1ff",
+        },
+        background: {
+          default: "#0d2252",
+          paper: "#071534",
+        },
+        text: {
+          primary: "#dfefff",
+          secondary: "#85b1ff",
+        },
+        error: {
+          main: "#ff4e4e",
+        },
+        info: {
+          main: "#2f6cff",
+        },
+        common: {
+          white: "#dfefff",
+          black: "#0f1732",
+        },
+        grey: {
+          200: "#d6eaff",
+          300: "#85b1ff",
+          700: "#2f6cff",
+          800: "#0746ec",
+        },
+      },
+      typography: {
+        fontFamily: "Inter, sans-serif",
+      },
+      container: {
+        boxShadow: "0px 8px 32px rgba(0, 0, 0, 0.08)",
+        borderRadius: "16px",
+      },
+      shape: {
+        borderRadius: 8,
+        borderRadiusSecondary: 60,
+      },
+    },
+    fromChain: 1,
+    toChain: 324,
+    fromToken: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", // USDC
+    toToken: "0x1d17CBcF0D6D143135aE902365D2E5e2A16538D4", // USDC
+  };
+
+  return (
+    <Suspense fallback={<WidgetSkeleton config={config} />}>
+      <LiFiWidgetLazy config={config} integrator="Merkl" />
+    </Suspense>
+  );
+}

src/routes/_merkl.(home).(opportunities).tsx

@@ -21,7 +21,6 @@ export const clientLoader = Cache.wrap("opportunities", 300);
 
 export default function Index() {
   const { opportunities, chains, count, protocols } = useLoaderData<typeof loader>();
-
   return (
     <Container>
       <Space size="md" />

src/routes/_merkl.bridge.tsx

@@ -0,0 +1,24 @@
+import { Group } from "@ariakit/react";
+import type { MetaFunction } from "@remix-run/node";
+import { ClientOnly } from "remix-utils/client-only";
+import { I18n } from "src/I18n";
+import Hero from "src/components/composite/Hero";
+import { LiFiWidget } from "src/components/composite/LiFiWidget";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "Merkl" }];
+};
+
+export default function Index() {
+  return (
+    <Hero
+      icons={[{ remix: "RiPlanetFill" }]}
+      navigation={{ label: "Back to opportunities", link: "/" }}
+      title={I18n.trad.get.pages.bridge.title}
+      description={I18n.trad.get.pages.bridge.description}>
+      <Group className="my-xl">
+        <ClientOnly>{() => <LiFiWidget />}</ClientOnly>
+      </Group>
+    </Hero>
+  );
+}