+ );
+}
diff --git a/src/app/bakery/components/Swap/LiFiWrapper.tsx b/src/app/bakery/components/Swap/LiFiWrapper.tsx
new file mode 100644
index 00000000..b71f1599
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/bakery/components/Swap/Swap.tsx b/src/app/bakery/components/Swap/Swap.tsx
index 7ca9a90b..4b1a2f9e 100644
--- a/src/app/bakery/components/Swap/Swap.tsx
+++ b/src/app/bakery/components/Swap/Swap.tsx
@@ -17,8 +17,9 @@ import { LiquidityBanner } from "../Banners/LiquidityBanner";
import { BridgeBanner } from "../Banners/BridgeBanner";
import { TotalSupply } from "../TotalSupply";
import { sanitizeInputValue } from "@/app/core/util/sanitizeInput";
+import { Bridge } from "./Bridge";
-export type TSwapMode = "BAKE" | "BURN";
+export type TSwapMode = "BAKE" | "BURN" | "BRIDGE";
export type TSwapState = {
mode: TSwapMode;
@@ -80,24 +81,10 @@ export function Swap() {
}));
};
- const renderActive = () => {
- return (
-