feat: update bridge

package.json

@@ -23,6 +23,7 @@
     "clean": "rm -rf node_modules dist .output .wrangler"
   },
   "dependencies": {
+    "@across-protocol/app-sdk": "0.5.0",
     "@fontsource-variable/ibm-plex-sans": "5.2.8",
     "@lingui/core": "5.7.0",
     "@lingui/react": "5.7.0",

src/components/trade/components/global-modals.tsx

@@ -7,6 +7,7 @@ const GlobalSettingsDialog = createLazyComponent(() => import("./global-settings
 const SpotSwapModal = createLazyComponent(() => import("./spot-swap-modal"), "SpotSwapModal");
 const CommandMenu = createLazyComponent(() => import("./command-menu"), "CommandMenu");
 const PointsModal = createLazyComponent(() => import("../tradebox/points-modal"), "PointsModal");
+const AcrossBridgeModal = createLazyComponent(() => import("../tradebox/across-bridge-modal"), "AcrossBridgeModal");
 
 export function GlobalModals() {
 	return (
@@ -17,6 +18,7 @@ export function GlobalModals() {
 			<SpotSwapModal />
 			<CommandMenu />
 			<PointsModal />
+			<AcrossBridgeModal />
 		</Suspense>
 	);
 }

src/components/trade/header/top-nav.tsx

@@ -1,11 +1,12 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { DownloadSimpleIcon, DropIcon, GearIcon, TrophyIcon } from "@phosphor-icons/react";
+import { ArrowsLeftRightIcon, DownloadSimpleIcon, DropIcon, GearIcon, TrophyIcon } from "@phosphor-icons/react";
 import { useConnection } from "wagmi";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/cn";
 import { useExchangeScope } from "@/providers/exchange-scope";
 import {
+	useAcrossBridgeModalActions,
 	useDepositModalActions,
 	useFaucetModalActions,
 	usePointsModalActions,
@@ -35,6 +36,7 @@ export function TopNav() {
 	const { open: openFaucetModal } = useFaucetModalActions();
 	const { open: openPointsModal } = usePointsModalActions();
 	const { open: openSettingsDialog } = useSettingsDialogActions();
+	const { open: openAcrossBridge } = useAcrossBridgeModalActions();
 	const { isConnected } = useConnection();
 	const { scope } = useExchangeScope();
 
@@ -69,7 +71,7 @@ export function TopNav() {
 							<TrophyIcon className="size-4" />
 							<Trans>Points</Trans>
 						</Button>
-						{isTestnet ? (
+						{isTestnet && (
 							<Button
 								variant="outlined"
 								onClick={openFaucetModal}
@@ -78,7 +80,8 @@ export function TopNav() {
 								<DropIcon className="size-4" />
 								<Trans>Faucet</Trans>
 							</Button>
-						) : (
+						)}
+						{!isTestnet && (
 							<Button
 								variant="outlined"
 								onClick={() => openDepositModal("deposit")}
@@ -88,6 +91,16 @@ export function TopNav() {
 								<Trans>Deposit</Trans>
 							</Button>
 						)}
+						{!isTestnet && (
+							<Button
+								variant="outlined"
+								onClick={openAcrossBridge}
+								className="h-6 px-2 text-xs font-medium rounded-xs bg-fill-100 border border-border-300 text-text-950 hover:border-border-500 transition-colors inline-flex items-center gap-1 shadow-xs"
+							>
+								<ArrowsLeftRightIcon className="size-4" />
+								<Trans>Bridge</Trans>
+							</Button>
+						)}
 					</>
 				)}
 				<UserMenu />