WIP: Sb test 304

package.json

@@ -14,51 +14,52 @@
     "find-deadcode": "ts-prune | grep -v '(used in module)'"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@rainbow-me/rainbowkit": "^2.2.3",
+    "@lifi/widget": "^3.21.3",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@rainbow-me/rainbowkit": "^2.2.5",
     "@safe-global/safe-apps-sdk": "^8.1.0",
     "@sentry/browser": "^8.47.0",
     "@sentry/nextjs": "^8.47.0",
     "@sentry/react": "^7.109.0",
-    "@tanstack/react-query": "^5.64.2",
+    "@tanstack/react-query": "^5.77.2",
     "@tanstack/react-query-devtools": "^5.66.7",
     "@wagmi/connectors": "^5.7.7",
     "@wagmi/core": "^2.16.4",
     "blo": "^1.1.1",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.18.0",
     "graphql-request": "^7.1.2",
     "nanoid": "^5.0.7",
-    "next": "14.1.0",
+    "next": "15.1.0",
     "pino-pretty": "^11.2.2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-tooltip": "^5.28.0",
-    "viem": "^2.22.9",
-    "wagmi": "^2.14.8"
+    "viem": "^2.23.4",
+    "wagmi": "^2.15.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.43.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10",
-    "dotenv": "^16.3.1",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "autoprefixer": "^10.4.18",
+    "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
-    "eslint": "^8",
+    "eslint": "^8.57.0",
     "eslint-config-next": "13.5.4",
-    "postcss": "^8",
+    "postcss": "^8.4.35",
     "serve": "^14.2.1",
-    "storybook": "^7.5.0",
+    "storybook": "^7.6.17",
     "tailwindcss": "3.4.1",
     "ts-prune": "^0.10.3",
     "tsx": "^4.19.1",
-    "typescript": "^5"
+    "typescript": "^5.4.2"
   },
   "packageManager": "[email protected]"
 }

sentry.client.config.ts

@@ -24,4 +24,12 @@ if (process.env.NEXT_PUBLIC_SENTRY_DSN)
 
     // Setting this option to true will print useful information to the console while you're setting up Sentry.
     debug: false,
+
+    // Add this to prevent multiple instances
+    beforeSend(event) {
+      if (event.exception) {
+        console.log("Sentry event:", event);
+      }
+      return event;
+    },
   });

src/app/bakery/components/Banners/LiquidityBanner.tsx

@@ -115,8 +115,8 @@ export function LiquidBreadIcon() {
       >
         <rect fill="white" width="36" height="34" />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M7.56522 2C4.49163 2 2 4.49163 2 7.56522C2 10.451 4.19646 12.8238 7.00879 13.103V25.6521C7.00879 29.4941 10.1233 32.6087 13.9653 32.6087H21.7564C25.5984 32.6087 28.7129 29.4941 28.7129 25.6521V13.1236C31.6573 12.9787 34 10.5455 34 7.56522C34 4.49163 31.5084 2 28.4348 2L7.56522 2Z"
         />
       </mask>
@@ -135,8 +135,8 @@ export function LiquidBreadIcon() {
         height="31"
       >
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M7.56522 2C4.49163 2 2 4.49163 2 7.56522C2 10.451 4.19646 12.8238 7.00879 13.103V25.6521C7.00879 29.4941 10.1233 32.6087 13.9653 32.6087H21.7564C25.5984 32.6087 28.7129 29.4941 28.7129 25.6521V13.1236C31.6573 12.9787 34 10.5455 34 7.56522C34 4.49163 31.5084 2 28.4348 2L7.56522 2Z"
           fill={`url(#paint0_linear_2_128_${iconId})`}
         />
@@ -162,8 +162,8 @@ export function LiquidBreadIcon() {
           y2="6.77695"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D04EC5" />
-          <stop offset="1" stop-color="#ED7BC7" />
+          <stop stopColor="#D04EC5" />
+          <stop offset="1" stopColor="#ED7BC7" />
         </linearGradient>
         <linearGradient
           id={`paint1_linear_2_128_${iconId}`}
@@ -173,9 +173,9 @@ export function LiquidBreadIcon() {
           y2="-23.4653"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#FC6BAA" />
-          <stop offset="0.545065" stop-color="#D158D7" />
-          <stop offset="1" stop-color="#AF2CEC" />
+          <stop stopColor="#FC6BAA" />
+          <stop offset="0.545065" stopColor="#D158D7" />
+          <stop offset="1" stopColor="#AF2CEC" />
         </linearGradient>
       </defs>
     </svg>

src/app/bakery/components/Swap/Bridge.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { Route, RouteExecutionUpdate, WidgetConfig } from "@lifi/widget";
+import {
+  LiFiWidget,
+  useWidgetEvents,
+  WidgetEvent,
+  WidgetSkeleton,
+} from "@lifi/widget";
+import { LiFiWrapper } from "./LiFiWrapper";
+import { useEffect } from "react";
+import { useModal } from "@/app/core/context/ModalContext";
+import { useToast } from "@/app/core/context/ToastContext/ToastContext";
+
+export function Bridge() {
+  /*
+  From LiFi Docs (https://docs.li.fi/widget/widget-events#list-of-events)
+  To minimize unnecessary re-renders and prevent potential glitches in the main Widget component, please integrate the useWidgetEvents hook outside of the component where the main LiFiWidget is integrated.
+  */
+  const widgetEvents = useWidgetEvents();
+  const { setModal } = useModal();
+  const { toastDispatch } = useToast();
+
+  useEffect(() => {
+    const onRouteExecutionCompleted = (route: Route) => {
+      setModal({ type: "LIFI_BRIDGE", route });
+    };
+    const onRouteExecutionFailed = (update: RouteExecutionUpdate) => {
+      console.log("__ LIFI BRIDGE FIALED __", update.process, {
+        error: update.process.error,
+        message: update.process.message,
+      });
+      toastDispatch({
+        type: "CUSTOM",
+        payload: {
+          variant: "error",
+          message: update.process.error?.message || "Transaction failed, try again later!",
+        },
+      });
+    };
+
+    widgetEvents.on(
+      WidgetEvent.RouteExecutionCompleted,
+      onRouteExecutionCompleted
+    );
+    widgetEvents.on(
+      WidgetEvent.RouteExecutionFailed,
+      onRouteExecutionFailed
+    );
+
+    return () => widgetEvents.all.clear();
+  }, [widgetEvents]);
+
+  return <LiFiMainWrapper />;
+}
+
+function LiFiMainWrapper() {
+  const config = {
+    appearance: "system",
+    // initialize to xDai on Gnosis chain
+    toToken: "0x0000000000000000000000000000000000000000",
+    toChain: 100,
+    theme: {
+      container: {
+        boxShadow: "0px 8px 32px rgba(0, 0, 0, 0.08)",
+        borderRadius: "16px",
+      },
+    },
+    disabledUI: ["toToken"],
+  } as Partial<WidgetConfig>;
+
+  return (
+    <div>
+      <LiFiWrapper fallback={<WidgetSkeleton config={config} />}>
+        <LiFiWidget config={config} integrator="nextjs-example" />
+      </LiFiWrapper>
+    </div>
+  );
+}

src/app/bakery/components/Swap/LiFiWrapper.tsx

@@ -0,0 +1,33 @@
+import { useSyncExternalStore, type PropsWithChildren } from "react";
+
+function subscribe() {
+  return () => {};
+}
+
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ */
+export function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+interface LiFiWrapperProps extends PropsWithChildren {
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ */
+export function LiFiWrapper({ children, fallback = null }: LiFiWrapperProps) {
+  const hydrated = useHydrated();
+  return hydrated ? children : fallback;
+}