input-output-hk · mchappell · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025
@@ -151,3 +151,9 @@ HANDLE_RESOLUTION_CACHE_LIFETIME=600000
 
 # mempool.space api
 MEMPOOLSPACE_URL=https://mempool.lw.iog.io
+
+# Swaps api
+STEELSWAP_API_URL=https://steelswap.lw.iog.io
+
+# NFTcdn.io
+ASSET_CDN_URL=http://dev-nft.lw.iog.io
@@ -123,3 +123,9 @@ MEMPOOLSPACE_URL=https://mempool.lw.iog.io
 
 # Local feature flags override
 FF_OVERRIDE='{"notifications-center": false}'
+
+# Swaps api
+SWAPS_API_URL=
+
+# NFTcdn.io
+ASSET_CDN_URL=http://dev-nft.lw.iog.io
@@ -18,7 +18,7 @@
   "permissions": ["webRequest", "storage", "tabs", "unlimitedStorage"],
   "host_permissions": ["<all_urls>"],
   "content_security_policy": {
-    "extension_pages": "default-src 'self' $LOCALHOST_DEFAULT_SRC; frame-src https://connect.trezor.io/ https://www.youtube-nocookie.com; script-src 'self' 'wasm-unsafe-eval'; font-src 'self' data: https://use.typekit.net; object-src 'self'; connect-src $MEMPOOLSPACE_URL $BLOCKFROST_URLS $MAESTRO_URLS $CARDANO_SERVICES_URLS $CARDANO_WS_SERVER_URLS $SENTRY_URL $DAPP_RADAR_APPI_URL https://coingecko.live-mainnet.eks.lw.iog.io https://coingecko.live-mainnet.eks.lw.iog.io https://muesliswap.live-mainnet.eks.lw.iog.io $LOCALHOST_CONNECT_SRC $POSTHOG_HOST https://use.typekit.net https://api.handle.me/ https://*.api.handle.me/ data:; style-src * 'unsafe-inline'; img-src * data: blob:;"
+    "extension_pages": "default-src 'self' $LOCALHOST_DEFAULT_SRC; frame-src https://connect.trezor.io/ https://www.youtube-nocookie.com; script-src 'self' 'wasm-unsafe-eval'; font-src 'self' data: https://use.typekit.net; object-src 'self'; connect-src $MEMPOOLSPACE_URL $BLOCKFROST_URLS $MAESTRO_URLS $CARDANO_SERVICES_URLS $CARDANO_WS_SERVER_URLS $SENTRY_URL $DAPP_RADAR_APPI_URL $STEELSWAP_API_URL $ASSET_CDN_URL https://coingecko.live-mainnet.eks.lw.iog.io https://coingecko.live-mainnet.eks.lw.iog.io https://muesliswap.live-mainnet.eks.lw.iog.io $LOCALHOST_CONNECT_SRC $POSTHOG_HOST https://use.typekit.net https://api.handle.me/ https://*.api.handle.me/ data:; style-src * 'unsafe-inline'; img-src * data: blob:;"
   },
   "content_scripts": [
     {

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import React, { useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { walletRoutePaths } from '../../routes';
@@ -24,6 +25,9 @@ import TransactionsIconHover from '../../assets/icons/hover-transactions-icon.co
 import VotingIconDefault from '../../assets/icons/voting-icon.component.svg';
 import VotingIconHover from '../../assets/icons/hover-voting-icon.component.svg';
 
+import SwapIconDefault from '../../assets/icons/trending-up.component.svg';
+import SwapIconHover from '../../assets/icons/hover-trending-up.component.svg';
+
 import { MenuItemList } from '@src/utils/constants';
 import styles from './MainFooter.module.scss';
 import { useAnalyticsContext, useBackgroundServiceAPIContext } from '@providers';
@@ -38,7 +42,7 @@ const { GOV_TOOLS_URLS } = config();
 
 const includesCoin = /coin/i;
 
-// eslint-disable-next-line complexity
+// eslint-disable-next-line complexity, sonarjs/cognitive-complexity
 export const MainFooter = (): React.ReactElement => {
   const location = useLocation<{ pathname: string }>();
   const history = useHistory();
@@ -48,6 +52,7 @@ export const MainFooter = (): React.ReactElement => {
   const backgroundServices = useBackgroundServiceAPIContext();
 
   const isDappExplorerEnabled = posthog.isFeatureFlagEnabled(ExperimentName.DAPP_EXPLORER);
+  const isSwapCenterEnabled = posthog.isFeatureFlagEnabled(ExperimentName.SWAP_CENTER);
   const isVotingCenterEnabled = !!GOV_TOOLS_URLS[environmentName];
   const currentLocation = location?.pathname;
   const isWalletIconActive =
@@ -68,6 +73,7 @@ export const MainFooter = (): React.ReactElement => {
   const StakingIcon = currentHoveredItem === MenuItemList.STAKING ? StakingIconHover : StakingIconDefault;
   const DappExplorerIcon = currentHoveredItem === MenuItemList.DAPPS ? DappExplorerIconHover : DappExplorerIconDefault;
   const VotingIcon = currentHoveredItem === MenuItemList.VOTING ? VotingIconHover : VotingIconDefault;
+  const SwapIcon = currentHoveredItem === MenuItemList.VOTING ? SwapIconHover : SwapIconDefault;
 
   const sendAnalytics = (postHogAction?: PostHogAction) => {
     if (postHogAction) {
@@ -97,6 +103,11 @@ export const MainFooter = (): React.ReactElement => {
         break;
     }
 
+    if (path === walletRoutePaths.swaps) {
+      backgroundServices.handleOpenBrowser({ section: BrowserViewSections.SWAPS });
+      return;
+    }
+
     if (path === walletRoutePaths.dapps) {
       backgroundServices.handleOpenBrowser({ section: BrowserViewSections.DAPP_EXPLORER });
       return;
@@ -178,6 +189,20 @@ export const MainFooter = (): React.ReactElement => {
             <DappExplorerIcon className={styles.icon} />
           </button>
         )}
+        {isSwapCenterEnabled && (
+          <button
+            onMouseEnter={() => onMouseEnterItem(MenuItemList.SWAPS)}
+            onMouseLeave={onMouseLeaveItem}
+            data-testid="main-footer-swaps"
+            onClick={() => handleNavigation(walletRoutePaths.swaps)}
+          >
+            {currentLocation === walletRoutePaths.swaps ? (
+              <SwapIconHover className={styles.icon} />
+            ) : (
+              <SwapIcon className={styles.icon} />
+            )}
+          </button>
+        )}
       </div>
     </div>
   );

@@ -1,5 +1,6 @@
+/* eslint-disable no-console */
 /* eslint-disable unicorn/no-useless-undefined */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
 import { logger, useObservable } from '@lace/common';
 import { firstValueFrom } from 'rxjs';
 import { map, take, filter } from 'rxjs/operators';
@@ -20,6 +21,7 @@ export type UseCollateralReturn = {
   txFee: Cardano.Lovelace;
   hasEnoughAda: boolean;
   txBuilder?: TxBuilder;
+  availableUtxoCollateral?: Cardano.Utxo[];
 };
 
 export const useCollateral = (): UseCollateralReturn => {
@@ -33,6 +35,10 @@ export const useCollateral = (): UseCollateralReturn => {
   const walletAddress = addresses?.[0]?.address;
   const hasEnoughAda = useHasEnoughCollateral();
   const isSyncingForTheFirstTime = useSyncingTheFirstTime(); // here we check wallet is syncing for the first time
+  const [availableUtxoCollateral, setAvailableUtxoCollateral] = useState<Cardano.Utxo[]>();
+  const unspendable = useObservable(inMemoryWallet?.balance?.utxo.unspendable$);
+  const hasCollateral = useMemo(() => unspendable?.coins >= COLLATERAL_AMOUNT_LOVELACES, [unspendable?.coins]);
+
   const output: Cardano.TxOut = useMemo(
     () => ({
       address: walletAddress && Cardano.PaymentAddress(walletAddress),
@@ -43,6 +49,24 @@ export const useCollateral = (): UseCollateralReturn => {
     [walletAddress]
   );
 
+  useEffect(() => {
+    if (hasCollateral) return;
+    const checkCollateral = async () => {
+      // if there aren't any utxos, this will never complete
+      const utxo = await firstValueFrom(
+        inMemoryWallet.utxo.available$.pipe(
+          map((utxos) => utxos.find((o) => !o[1].value?.assets && o[1].value.coins >= COLLATERAL_AMOUNT_LOVELACES)),
+          filter(isNotNil),
+          take(1)
+        )
+      );
+      if (utxo.length > 0) {
+        setAvailableUtxoCollateral([utxo]);
+      }
+    };
+    checkCollateral();
+  }, [hasEnoughAda, hasCollateral, inMemoryWallet.utxo.available$, unspendable]);
+
   const initializeCollateralTx = useCallback(async () => {
     // if the wallet has not been synced at least once or has no balance don't initialize Tx
     if (!hasEnoughAda || isSyncingForTheFirstTime) return;
@@ -103,6 +127,7 @@ export const useCollateral = (): UseCollateralReturn => {
     isSubmitting,
     txFee,
     hasEnoughAda,
-    txBuilder
+    txBuilder,
+    availableUtxoCollateral
   };
 };
@@ -113,6 +113,9 @@ const handleOpenBrowser = async (data: OpenBrowserData) => {
     case BrowserViewSections.DAPP_EXPLORER:
       path = walletRoutePaths.dapps;
       break;
+    case BrowserViewSections.SWAPS:
+      path = walletRoutePaths.swaps;
+      break;
   }
   const params = data.urlSearchParams ? `?${data.urlSearchParams}` : '';
   const url = `app.html#${path}${params}`;

@@ -53,7 +53,8 @@ export enum BrowserViewSections {
   ADD_SHARED_WALLET = 'add_shared_wallet',
   NAMI_MIGRATION = 'nami_migration',
   NAMI_HW_FLOW = 'nami_hw_flow',
-  DAPP_EXPLORER = 'dapp-explorer'
+  DAPP_EXPLORER = 'dapp-explorer',
+  SWAPS = 'swaps'
 }
 
 export interface OpenBrowserData {

@@ -2,7 +2,12 @@ import { Cardano } from '@cardano-sdk/core';
 import { z } from 'zod';
 import { DeepRequired } from 'utility-types';
 import { JsonType } from 'posthog-js';
-import { commonSchema, dappExplorerSchema, glacierDropSchema } from '@providers/PostHogClientProvider/schema';
+import {
+  commonSchema,
+  dappExplorerSchema,
+  glacierDropSchema,
+  swapCenterSchema
+} from '@providers/PostHogClientProvider/schema';
 
 export enum ExperimentName {
   CREATE_PAPER_WALLET = 'create-paper-wallet',
@@ -17,7 +22,8 @@ export enum ExperimentName {
   NFTPRINTLAB = 'nftprintlab',
   GLACIER_DROP = 'glacier-drop',
   MEMPOOLSPACE_FEE_MARKET = 'bitcoin-mempool-space-fee-market',
-  NOTIFICATIONS_CENTER = 'notifications-center'
+  NOTIFICATIONS_CENTER = 'notifications-center',
+  SWAP_CENTER = 'swap-center'
 }
 
 export type FeatureFlag = `${ExperimentName}`;
@@ -33,6 +39,7 @@ export type FeatureFlagsByNetwork = Record<Cardano.NetworkMagics, FeatureFlags>;
 export type FeatureFlagCommonSchema = DeepRequired<z.infer<typeof commonSchema>>;
 export type FeatureFlagDappExplorerSchema = DeepRequired<z.infer<typeof dappExplorerSchema>>;
 export type FeatureFlagGlacierDropSchema = DeepRequired<z.infer<typeof glacierDropSchema>>;
+export type FeatureFlagSwapCenterSchema = DeepRequired<z.infer<typeof swapCenterSchema>>;
 
 // Using `false` as a fallback type for the payload, as it can be optional, and we (sadly) don't have
 // strict null checks enabled so `false` is a replacement for `undefined` in this case
@@ -42,6 +49,7 @@ type FeatureFlagPayload<T extends Record<string, unknown> = {}> = (FeatureFlagCo
 type FeatureFlagCustomPayloads = {
   [ExperimentName.DAPP_EXPLORER]: FeatureFlagPayload<FeatureFlagDappExplorerSchema>;
   [ExperimentName.GLACIER_DROP]: FeatureFlagPayload<FeatureFlagGlacierDropSchema>;
+  [ExperimentName.SWAP_CENTER]: FeatureFlagPayload<FeatureFlagSwapCenterSchema>;
 };
 
 export type FeatureFlagPayloads = {

@@ -29,6 +29,8 @@ export interface ExtensionUpdateData {
 export const AUTHORIZED_DAPPS_KEY = 'authorizedDapps';
 export const ABOUT_EXTENSION_KEY = 'aboutExtension';
 export const MIDNIGHT_EVENT_BANNER_KEY = 'midnightEventBanner';
+export const SWAPS_DISCLAIMER_ACKNOWLEDGED = 'swapsDisclaimerAcknowledged';
+export const SWAPS_TARGET_SLIPPAGE = 'swapsTargetSlippage';
 
 export interface BackgroundStorage {
   message?: Message;

@@ -33,7 +33,8 @@ import {
   FeatureFlagsByNetwork,
   FeatureFlags,
   RawFeatureFlagPayloads,
-  FeatureFlagGlacierDropSchema
+  FeatureFlagGlacierDropSchema,
+  FeatureFlagSwapCenterSchema
 } from '@lib/scripts/types/feature-flags';
 import { config } from '@src/config';
 import { featureFlagSchema, networksEnumSchema, NetworksEnumSchema } from '../schema';
@@ -338,6 +339,11 @@ export class PostHogClient<Action extends string = string> {
           continue;
         }
 
+        if (featureFlag === ExperimentName.SWAP_CENTER) {
+          payloadsByFeature[featureFlag] = featureFlagSchema.swapCenter.parse(payload) as FeatureFlagSwapCenterSchema;
+          continue;
+        }
+
         // type-casting can be removed after Lace uses strict null checks
         payloadsByFeature[featureFlag] = featureFlagSchema.common.parse(payload) as FeatureFlagCommonSchema;
       } catch (error) {

@@ -41,7 +41,8 @@ const defaultFeatureFlags: FeatureFlags = {
   [ExperimentName.NFTPRINTLAB]: false,
   [ExperimentName.GLACIER_DROP]: false,
   [ExperimentName.MEMPOOLSPACE_FEE_MARKET]: false,
-  [ExperimentName.NOTIFICATIONS_CENTER]: false
+  [ExperimentName.NOTIFICATIONS_CENTER]: false,
+  [ExperimentName.SWAP_CENTER]: false
 };
 
 export const featureFlagsByNetworkInitialValue: FeatureFlagsByNetwork = {

@@ -47,8 +47,17 @@ export const glacierDropSchema = commonSchema.merge(
   })
 );
 
+export const swapCenterSchema = commonSchema.merge(
+  z.object({
+    defaultSlippagePercentages: z.array(z.number()),
+    initialSlippagePercentage: z.number(),
+    maxSlippagePercentage: z.number()
+  })
+);
+
 export const featureFlagSchema = {
   common: z.preprocess(parseJsonPreprocessor, commonSchema),
   dappExplorer: z.preprocess(parseJsonPreprocessor, dappExplorerSchema),
-  glacierDrop: z.preprocess(parseJsonPreprocessor, glacierDropSchema)
+  glacierDrop: z.preprocess(parseJsonPreprocessor, glacierDropSchema),
+  swapCenter: z.preprocess(parseJsonPreprocessor, swapCenterSchema)
 };
@@ -49,7 +49,8 @@ export const walletRoutePaths = {
     customize: '/nami/migration/customize',
     allDone: '/nami/migration/all-done',
     hwFlow: '/nami/nami-mode/hwTab'
-  }
+  },
+  swaps: '/swaps'
 };
 
 export const dAppRoutePaths = {

@@ -83,7 +83,8 @@ export enum MenuItemList {
   TRANSACTIONS = 'transactions',
   STAKING = 'staking',
   DAPPS = 'dapps',
-  VOTING = 'voting'
+  VOTING = 'voting',
+  SWAPS = 'swaps'
 }
 
 export const POPUP_WINDOW = {

@@ -26,6 +26,8 @@ export const SideMenu = (): React.ReactElement => {
   const analytics = useAnalyticsContext();
   const posthog = usePostHogClientContext();
   const isDappExplorerEnabled = posthog.isFeatureFlagEnabled(ExperimentName.DAPP_EXPLORER);
+  const isSwapCenterEnabled = posthog.isFeatureFlagEnabled(ExperimentName.SWAP_CENTER);
+
   const { isSharedWallet, environmentName } = useWalletStore();
   const { blockchain } = useCurrentBlockchain();
 
@@ -66,6 +68,8 @@ export const SideMenu = (): React.ReactElement => {
       case routes.nfts:
         sendAnalytics(PostHogAction.NFTsClick);
         break;
+      case routes.swaps:
+        sendAnalytics(PostHogAction.SwapsClick);
     }
     push(field.key);
   };
@@ -87,6 +91,9 @@ export const SideMenu = (): React.ReactElement => {
   if (!isVotingCenterEnabled) {
     excludeItems.push(MenuItemList.VOTING);
   }
+  if (!isSwapCenterEnabled) {
+    excludeItems.push(MenuItemList.SWAPS);
+  }
   const menuItems = sideMenuConfig.filter((item) => !excludeItems.includes(item.id));
 
   return (

@@ -25,6 +25,9 @@ import DappExplorerIconActive from '@assets/icons/tiles-solid-gradient.component
 import VotingIconDefault from '@assets/icons/voting-icon.component.svg';
 import VotingIconHover from '@assets/icons/hover-voting-icon.component.svg';
 
+import SwapIconDefault from '@assets/icons/trending-up.component.svg';
+import SwapIconHover from '@assets/icons/hover-trending-up.component.svg';
+
 import { SideMenuItemConfig } from '@types';
 
 export const sideMenuConfig: SideMenuItemConfig[] = [
@@ -82,6 +85,15 @@ export const sideMenuConfig: SideMenuItemConfig[] = [
     regularIcon: DappExplorerIconDefault,
     hoverIcon: DappExplorerIconHover,
     activeIcon: DappExplorerIconActive
+  },
+  {
+    id: MenuItemList.SWAPS,
+    label: 'browserView.sideMenu.links.swapsCenter',
+    testId: 'item-swaps',
+    path: routes.swaps,
+    regularIcon: SwapIconDefault,
+    hoverIcon: SwapIconHover,
+    activeIcon: SwapIconHover
   }
 ];