diff --git a/.gitignore b/.gitignore
index 73c1456ea2..83b24ad25c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,5 +36,8 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 
+.yalc
+yalc.lock
+
 # Local Netlify folder
 .netlify
diff --git a/apps/extension/package.json b/apps/extension/package.json
index f654bd4a6c..b194652cd5 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -35,7 +35,7 @@
     "@dao-xyz/borsh": "^5.1.5",
     "@ledgerhq/hw-transport": "^6.31.4",
     "@ledgerhq/hw-transport-webusb": "^6.29.4",
-    "@namada/sdk": "0.22.0",
+    "@namada/sdk": "0.23.0-beta.1",
     "@zondax/ledger-namada": "^2.0.0",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.20.11",
-    "@namada/sdk-node": "^0.22.0",
+    "@namada/sdk-node": "0.23.0-beta.1",
     "@svgr/webpack": "^6.3.1",
     "@types/chrome": "^0.0.237",
     "@types/firefox-webext-browser": "^94.0.1",
diff --git a/apps/extension/src/Approvals/Commitment.tsx b/apps/extension/src/Approvals/Commitment.tsx
index 1a33345357..4c97e74841 100644
--- a/apps/extension/src/Approvals/Commitment.tsx
+++ b/apps/extension/src/Approvals/Commitment.tsx
@@ -1,4 +1,4 @@
-import { TxType } from "@namada/sdk";
+import { IbcTransferProps, TxType } from "@namada/sdk";
 import {
   BondProps,
   ClaimRewardsProps,
@@ -12,6 +12,9 @@ import {
 } from "@namada/types";
 import { shortenAddress } from "@namada/utils";
 import { NamCurrency } from "App/Common/NamCurrency";
+import * as J from "fp-ts/Json";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/Option";
 import { ReactNode } from "react";
 import { FaVoteYea } from "react-icons/fa";
 import { FaRegEye, FaWallet } from "react-icons/fa6";
@@ -19,6 +22,7 @@ import { GoStack } from "react-icons/go";
 import { PiDotsNineBold } from "react-icons/pi";
 import { isShieldedPool, parseTransferType, ShieldedPoolLabel } from "utils";
 import { TransactionCard } from "./TransactionCard";
+import { OsmosisSwapMemo } from "./types";
 
 type CommitmentProps = {
   commitment: CommitmentDetailProps;
@@ -37,6 +41,7 @@ const IconMap: Record<TxType, React.ReactNode> = {
   [TxType.VoteProposal]: <FaVoteYea />,
   [TxType.Batch]: <PiDotsNineBold />,
   [TxType.ClaimRewards]: <GoStack />,
+  [TxType.OsmosisSwap]: <FaWallet />,
 };
 
 const TitleMap: Record<TxType, string> = {
@@ -51,6 +56,7 @@ const TitleMap: Record<TxType, string> = {
   [TxType.VoteProposal]: "Vote",
   [TxType.Batch]: "Batch",
   [TxType.ClaimRewards]: "Claim Rewards",
+  [TxType.OsmosisSwap]: "Shielded Swap",
 };
 
 const formatAddress = (address: string): string =>
@@ -147,6 +153,27 @@ export const Commitment = ({
       wrapperFeePayer
     );
     title = `${type} ${title}`;
+  } else if (commitment.txType === TxType.IBCTransfer) {
+    const ibcTx = commitment as CommitmentDetailProps<IbcTransferProps>;
+
+    // It's fine not to handle errors here as memo can be optional and not JSON at all
+    const maybeMemo = pipe(
+      O.fromNullable(ibcTx.memo),
+      O.map((memo) => J.parse(memo)),
+      O.map(O.fromEither),
+      O.flatten
+    );
+
+    const maybeOsmosisSwapMemo = pipe(
+      maybeMemo,
+      O.map(OsmosisSwapMemo.decode),
+      O.map(O.fromEither),
+      O.flatten
+    );
+
+    if (O.isSome(maybeOsmosisSwapMemo)) {
+      title = TitleMap[TxType.OsmosisSwap];
+    }
   }
 
   return (
diff --git a/apps/extension/src/Approvals/types.ts b/apps/extension/src/Approvals/types.ts
index dc56de68fe..96c80409fd 100644
--- a/apps/extension/src/Approvals/types.ts
+++ b/apps/extension/src/Approvals/types.ts
@@ -1,3 +1,4 @@
+import * as t from "io-ts";
 import { Message } from "router";
 
 export enum TopLevelRoute {
@@ -40,3 +41,63 @@ export enum Status {
   Pending,
   Failed,
 }
+
+const NamadaOsmosisSwap = t.type({
+  overflow_receiver: t.string,
+  shielded_amount: t.string,
+  shielding_data: t.string,
+});
+
+const FinalMemoNamada = t.type({
+  osmosis_swap: NamadaOsmosisSwap,
+});
+
+const FinalMemo = t.type({
+  namada: FinalMemoNamada,
+});
+
+const OnFailedDelivery = t.type({
+  local_recovery_addr: t.string,
+});
+
+const RouteItem = t.type({
+  pool_id: t.string,
+  token_out_denom: t.string,
+});
+
+const Slippage = t.type({
+  min_output_amount: t.string,
+});
+
+const OsmosisSwapMsg = t.type({
+  final_memo: FinalMemo,
+  on_failed_delivery: OnFailedDelivery,
+  output_denom: t.string,
+  receiver: t.string,
+  route: t.array(RouteItem),
+  slippage: Slippage,
+});
+
+const Msg = t.type({
+  osmosis_swap: OsmosisSwapMsg,
+});
+
+const Wasm = t.type({
+  contract: t.string,
+  msg: Msg,
+});
+
+export const OsmosisSwapMemo = t.type({
+  wasm: Wasm,
+});
+
+export type NamadaOsmosisSwap = t.TypeOf<typeof NamadaOsmosisSwap>;
+export type FinalMemoNamada = t.TypeOf<typeof FinalMemoNamada>;
+export type FinalMemo = t.TypeOf<typeof FinalMemo>;
+export type OnFailedDelivery = t.TypeOf<typeof OnFailedDelivery>;
+export type RouteItem = t.TypeOf<typeof RouteItem>;
+export type Slippage = t.TypeOf<typeof Slippage>;
+export type OsmosisSwapMsg = t.TypeOf<typeof OsmosisSwapMsg>;
+export type Msg = t.TypeOf<typeof Msg>;
+export type Wasm = t.TypeOf<typeof Wasm>;
+export type OsmosisSwapMemo = t.TypeOf<typeof OsmosisSwapMemo>;
diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json
index 8293bcb772..10d6097f70 100644
--- a/apps/namadillo/package.json
+++ b/apps/namadillo/package.json
@@ -12,7 +12,7 @@
     "@keplr-wallet/types": "^0.12.136",
     "@namada/chain-registry": "^1.5.2",
     "@namada/indexer-client": "4.0.5",
-    "@namada/sdk-multicore": "0.22.0",
+    "@namada/sdk-multicore": "0.23.0-beta.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/query-core": "^5.40.0",
     "@tanstack/react-query": "^5.40.0",
@@ -79,7 +79,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
-    "@namada/sdk-node": "^0.22.0",
+    "@namada/sdk-node": "0.23.0-beta.1",
     "@namada/vite-esbuild-plugin": "^1.0.1",
     "@playwright/test": "^1.24.1",
     "@svgr/webpack": "^6.5.1",
diff --git a/apps/namadillo/src/App/AppRoutes.tsx b/apps/namadillo/src/App/AppRoutes.tsx
index 1a9ede7c1c..dd43e02cd3 100644
--- a/apps/namadillo/src/App/AppRoutes.tsx
+++ b/apps/namadillo/src/App/AppRoutes.tsx
@@ -36,6 +36,7 @@ import { StakingOverview } from "./Staking/StakingOverview";
 import { StakingRewards } from "./Staking/StakingRewards";
 import { StakingWithdrawModal } from "./Staking/StakingWithdrawModal";
 import { Unstake } from "./Staking/Unstake";
+import { SwapModule } from "./Swap/SwapModule";
 import { SwitchAccountPanel } from "./SwitchAccount/SwitchAccountPanel";
 import { TransactionDetails } from "./Transactions/TransactionDetails";
 import { TransactionHistory } from "./Transactions/TransactionHistory";
@@ -99,6 +100,9 @@ export const MainRoutes = (): JSX.Element => {
             <Route path={routes.unshield} element={<div />} />
           </Route>
 
+          {/* Swapping */}
+          <Route path={routes.swap} element={<SwapModule />} />
+
           {/* Transaction History */}
           {(features.namTransfersEnabled || features.ibcTransfersEnabled) && (
             <Route>
diff --git a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx b/apps/namadillo/src/App/Common/AvailableAmountFooter.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx
rename to apps/namadillo/src/App/Common/AvailableAmountFooter.tsx
diff --git a/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx b/apps/namadillo/src/App/Common/ConnectProviderButton.tsx
similarity index 89%
rename from apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx
rename to apps/namadillo/src/App/Common/ConnectProviderButton.tsx
index 0b1a2c31d9..e8ae0ef9b8 100644
--- a/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx
+++ b/apps/namadillo/src/App/Common/ConnectProviderButton.tsx
@@ -3,11 +3,13 @@ import { ActionButton } from "@namada/components";
 type ConnectProviderButtonProps = {
   onClick?: () => void;
   disabled?: boolean;
+  text?: string;
 };
 
 export const ConnectProviderButton = ({
   onClick,
   disabled,
+  text,
 }: ConnectProviderButtonProps): JSX.Element => {
   return (
     <ActionButton
@@ -18,7 +20,7 @@ export const ConnectProviderButton = ({
       size="xs"
       backgroundColor="white"
     >
-      Select Address
+      {text || "Select Address"}
     </ActionButton>
   );
 };
diff --git a/apps/namadillo/src/App/Transfer/CurrentStatus.tsx b/apps/namadillo/src/App/Common/CurrentStatus.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/CurrentStatus.tsx
rename to apps/namadillo/src/App/Common/CurrentStatus.tsx
diff --git a/apps/namadillo/src/App/Common/LedgerDeviceTooltip.tsx b/apps/namadillo/src/App/Common/LedgerDeviceTooltip.tsx
new file mode 100644
index 0000000000..42f54d5e71
--- /dev/null
+++ b/apps/namadillo/src/App/Common/LedgerDeviceTooltip.tsx
@@ -0,0 +1,32 @@
+import { routes } from "App/routes";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import { Link, useNavigate } from "react-router-dom";
+import { IconTooltip } from "./IconTooltip";
+
+export const LedgerDeviceTooltip = (): JSX.Element => {
+  const navigate = useNavigate();
+  return (
+    <IconTooltip
+      className="absolute w-4 h-4 top-0 right-0 mt-4 mr-5"
+      icon={<BsQuestionCircleFill className="w-4 h-4 text-yellow" />}
+      text={
+        <span>
+          If your device is connected and the app is open, please go to{" "}
+          <Link
+            onClick={(e) => {
+              e.preventDefault();
+              navigate(routes.settingsLedger, {
+                state: { backgroundLocation: location },
+              });
+            }}
+            to={routes.settingsLedger}
+            className="text-yellow"
+          >
+            Settings
+          </Link>{" "}
+          and pair your device with Namadillo.
+        </span>
+      }
+    />
+  );
+};
diff --git a/apps/namadillo/src/App/Common/SelectAssetModal.tsx b/apps/namadillo/src/App/Common/SelectAssetModal.tsx
new file mode 100644
index 0000000000..bb9cb9c705
--- /dev/null
+++ b/apps/namadillo/src/App/Common/SelectAssetModal.tsx
@@ -0,0 +1,100 @@
+import { Stack } from "@namada/components";
+import { Search } from "App/Common/Search";
+import { SelectModal } from "App/Common/SelectModal";
+import { TokenCard } from "App/Common/TokenCard";
+import { ConnectedWalletInfo } from "App/Transfer/ConnectedWalletInfo";
+import { nativeTokenAddressAtom } from "atoms/chain/atoms";
+import { applicationFeaturesAtom } from "atoms/settings/atoms";
+import BigNumber from "bignumber.js";
+import clsx from "clsx";
+import { useAtomValue } from "jotai";
+import { useMemo, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { Address, Asset, NamadaAsset } from "types";
+
+type DisplayAmount = BigNumber;
+type FiatAmount = BigNumber;
+type SelectWalletModalProps = {
+  onClose: () => void;
+  onSelect: (address: Address) => void;
+  assets: Asset[];
+  walletAddress: string;
+  ibcTransfer?: "deposit" | "withdraw";
+  balances?: Record<Address, [DisplayAmount, FiatAmount?]>;
+};
+
+export const SelectAssetModal = ({
+  onClose,
+  onSelect,
+  assets,
+  walletAddress,
+  ibcTransfer,
+  balances,
+}: SelectWalletModalProps): JSX.Element => {
+  const { namTransfersEnabled } = useAtomValue(applicationFeaturesAtom);
+  const nativeTokenAddress = useAtomValue(nativeTokenAddressAtom).data;
+
+  const [filter, setFilter] = useState("");
+
+  const filteredAssets = useMemo(() => {
+    return assets.filter(
+      (asset) =>
+        asset.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 ||
+        asset.symbol.toLowerCase().indexOf(filter.toLowerCase()) >= 0
+    );
+  }, [assets, filter]);
+
+  return (
+    <SelectModal title="Select Asset" onClose={onClose}>
+      <ConnectedWalletInfo walletAddress={walletAddress} />
+      <div className="my-4">
+        <Search placeholder="Search asset" onChange={setFilter} />
+      </div>
+      <Stack
+        as="ul"
+        gap={0}
+        className="max-h-[400px] overflow-auto dark-scrollbar pb-4 mr-[-0.5rem]"
+      >
+        {filteredAssets.map((asset) => {
+          // Fpr IbcTransfer(Deposits), we consider base denom as a token address.
+          const tokenAddress =
+            ibcTransfer === "deposit" ?
+              asset.base
+            : (asset as NamadaAsset).address;
+
+          const disabled =
+            !namTransfersEnabled && asset.address === nativeTokenAddress;
+          return (
+            <li key={asset.base} className="text-sm">
+              <button
+                onClick={() => {
+                  onSelect(tokenAddress);
+                  onClose();
+                }}
+                className={twMerge(
+                  clsx(
+                    "text-left px-4 py-2.5",
+                    "w-full rounded-sm border border-transparent",
+                    "hover:border-neutral-400 transition-colors duration-150",
+                    { "pointer-events-none opacity-50": disabled }
+                  )
+                )}
+                disabled={disabled}
+              >
+                <TokenCard
+                  asset={asset}
+                  address={tokenAddress}
+                  disabled={disabled}
+                  balance={balances?.[tokenAddress]}
+                />
+              </button>
+            </li>
+          );
+        })}
+        {filteredAssets.length === 0 && (
+          <p className="py-2 font-light">There are no available assets</p>
+        )}
+      </Stack>
+    </SelectModal>
+  );
+};
diff --git a/apps/namadillo/src/App/Transfer/SelectWalletModal.tsx b/apps/namadillo/src/App/Common/SelectWalletModal.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/SelectWalletModal.tsx
rename to apps/namadillo/src/App/Common/SelectWalletModal.tsx
diff --git a/apps/namadillo/src/App/Transfer/SelectedAsset.tsx b/apps/namadillo/src/App/Common/SelectedAsset.tsx
similarity index 97%
rename from apps/namadillo/src/App/Transfer/SelectedAsset.tsx
rename to apps/namadillo/src/App/Common/SelectedAsset.tsx
index 7271a0ec99..e0729cd86a 100644
--- a/apps/namadillo/src/App/Transfer/SelectedAsset.tsx
+++ b/apps/namadillo/src/App/Common/SelectedAsset.tsx
@@ -1,9 +1,9 @@
 import { SkeletonLoading, Tooltip } from "@namada/components";
+import { EmptyResourceIcon } from "App/Transfer/EmptyResourceIcon";
 import clsx from "clsx";
 import { getAssetImageUrl } from "integrations/utils";
 import { GoChevronDown } from "react-icons/go";
 import { Asset } from "types";
-import { EmptyResourceIcon } from "./EmptyResourceIcon";
 
 type SelectedAssetProps = {
   asset?: Asset;
diff --git a/apps/namadillo/src/App/Common/SidebarMenuItem.tsx b/apps/namadillo/src/App/Common/SidebarMenuItem.tsx
index fedcef554f..0e004c5a9a 100644
--- a/apps/namadillo/src/App/Common/SidebarMenuItem.tsx
+++ b/apps/namadillo/src/App/Common/SidebarMenuItem.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 export const SidebarMenuItem = ({ url, children }: Props): JSX.Element => {
   const className = clsx(
-    "flex items-center gap-5 text-lg text-white",
+    "flex items-center gap-4 text-lg text-white",
     "transition-colors duration-300 ease-out-quad hover:text-cyan",
     {
       "!text-neutral-500 pointer-events-none select-none": !url,
diff --git a/apps/namadillo/src/App/Transfer/TokenAmountCard.tsx b/apps/namadillo/src/App/Common/TokenAmountCard.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/TokenAmountCard.tsx
rename to apps/namadillo/src/App/Common/TokenAmountCard.tsx
diff --git a/apps/namadillo/src/App/Common/TokenCard.tsx b/apps/namadillo/src/App/Common/TokenCard.tsx
index 8be72cf227..a41d049ed9 100644
--- a/apps/namadillo/src/App/Common/TokenCard.tsx
+++ b/apps/namadillo/src/App/Common/TokenCard.tsx
@@ -1,24 +1,42 @@
+import { Stack } from "@namada/components";
 import { InactiveChannelWarning } from "App/Common/InactiveChannelWarning";
 import { AssetImage } from "App/Transfer/AssetImage";
+import BigNumber from "bignumber.js";
 import { ReactNode } from "react";
 import { Address, Asset } from "types";
+import { FiatCurrency } from "./FiatCurrency";
 
 export const TokenCard = ({
   address,
   asset,
+  balance,
   disabled,
 }: {
   address: Address;
   asset: Asset;
+  balance?: [BigNumber, BigNumber?];
   disabled?: ReactNode;
 }): JSX.Element => {
+  const [amount, fiatAmount] = balance || [];
+
   return (
     <div className="flex items-center gap-4" title={address}>
       <div className="aspect-square w-10 h-10">
         <AssetImage asset={asset} />
       </div>
-      <div className="text-base leading-none">
-        {asset.symbol}
+      <div className="text-base leading-none grow">
+        <Stack direction="horizontal" className="justify-between items-center">
+          <div>{asset.symbol}</div>
+          <Stack gap={1} className="items-end">
+            {amount && <div>{amount.toFixed()}</div>}
+            {fiatAmount && (
+              <FiatCurrency
+                className="text-neutral-600 text-sm"
+                amount={fiatAmount}
+              />
+            )}
+          </Stack>
+        </Stack>
         <InactiveChannelWarning address={address} />
         {disabled && (
           <div className="text-red-500 text-xs">disabled until phase 5</div>
diff --git a/apps/namadillo/src/App/Common/TransactionFee.tsx b/apps/namadillo/src/App/Common/TransactionFee.tsx
index 58983e3417..9ebfa58017 100644
--- a/apps/namadillo/src/App/Common/TransactionFee.tsx
+++ b/apps/namadillo/src/App/Common/TransactionFee.tsx
@@ -1,19 +1,28 @@
 import BigNumber from "bignumber.js";
+import clsx from "clsx";
 import { TokenCurrency } from "./TokenCurrency";
 
 type TransactionFeeProps = {
   displayAmount: BigNumber;
   symbol: string;
+  compact?: boolean;
 };
 
 export const TransactionFee = ({
   displayAmount,
   symbol,
+  compact = false,
 }: TransactionFeeProps): JSX.Element => {
   return (
     <div className="flex w-full gap-2">
-      <span className="text-sm mt-[3px] ml-1 underline leading-none text-neutral-300">
-        Transaction Fee
+      <span
+        className={clsx(
+          "text-sm mt-[3px] ml-1 leading-none text-neutral-300",
+          { underline: !compact },
+          { "text-neutral-400": compact }
+        )}
+      >
+        {compact ? "Fee:" : "Transaction Fee"}
       </span>
       <TokenCurrency
         symbol={symbol}
diff --git a/apps/namadillo/src/App/Common/TransactionFeeButton.tsx b/apps/namadillo/src/App/Common/TransactionFeeButton.tsx
index 6dd11698c9..05141011c7 100644
--- a/apps/namadillo/src/App/Common/TransactionFeeButton.tsx
+++ b/apps/namadillo/src/App/Common/TransactionFeeButton.tsx
@@ -13,10 +13,12 @@ export const TransactionFeeButton = ({
   feeProps,
   className,
   isShieldedTransfer = false,
+  compact = false,
 }: {
   feeProps: TransactionFeeProps;
   className?: string;
   isShieldedTransfer?: boolean;
+  compact?: boolean;
 }): JSX.Element => {
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -34,16 +36,18 @@ export const TransactionFeeButton = ({
     <>
       <div
         className={twMerge(
-          "flex items-center justify-between gap-5 flex-1",
+          "flex items-center",
+          compact ? "gap-2" : "justify-between gap-5 flex-1",
           className
         )}
       >
         <TransactionFee
+          compact={compact}
           displayAmount={gasDisplayAmount?.totalDisplayAmount || BigNumber(0)}
-          symbol={gasDisplayAmount?.asset.symbol || ""}
+          symbol={(!compact && gasDisplayAmount?.asset.symbol) || ""}
         />
         <div className="flex items-center gap-2">
-          <div className="text-neutral-500 text-xs">Fees:</div>
+          {!compact && <div className="text-neutral-500 text-xs">Fees:</div>}
           <button
             type="button"
             className={twMerge(
diff --git a/apps/namadillo/src/App/Common/TransactionReceipt.tsx b/apps/namadillo/src/App/Common/TransactionReceipt.tsx
index 06115a4708..34a66f29df 100644
--- a/apps/namadillo/src/App/Common/TransactionReceipt.tsx
+++ b/apps/namadillo/src/App/Common/TransactionReceipt.tsx
@@ -9,7 +9,6 @@ import {
 } from "App/Transfer/common";
 import { SelectedChain } from "App/Transfer/SelectedChain";
 import { SelectedWallet } from "App/Transfer/SelectedWallet";
-import { TokenAmountCard } from "App/Transfer/TokenAmountCard";
 import { TransferArrow } from "App/Transfer/TransferArrow";
 import { getChainRegistryByChainId } from "atoms/integrations";
 import BigNumber from "bignumber.js";
@@ -19,6 +18,7 @@ import { useMemo } from "react";
 import { FaCheckCircle } from "react-icons/fa";
 import { GoHourglass, GoXCircle } from "react-icons/go";
 import { PartialTransferTransactionData, TransferStep } from "types";
+import { TokenAmountCard } from "./TokenAmountCard";
 
 type TransactionReceiptProps = {
   transaction: PartialTransferTransactionData;
diff --git a/apps/namadillo/src/App/Transfer/WalletCard.tsx b/apps/namadillo/src/App/Common/WalletCard.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/WalletCard.tsx
rename to apps/namadillo/src/App/Common/WalletCard.tsx
diff --git a/apps/namadillo/src/App/Transfer/__mocks__/assets.tsx b/apps/namadillo/src/App/Common/__mocks__/assets.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/__mocks__/assets.tsx
rename to apps/namadillo/src/App/Common/__mocks__/assets.tsx
diff --git a/apps/namadillo/src/App/Transfer/__mocks__/chains.ts b/apps/namadillo/src/App/Common/__mocks__/chains.ts
similarity index 100%
rename from apps/namadillo/src/App/Transfer/__mocks__/chains.ts
rename to apps/namadillo/src/App/Common/__mocks__/chains.ts
diff --git a/apps/namadillo/src/App/Transfer/__mocks__/providers.ts b/apps/namadillo/src/App/Common/__mocks__/providers.ts
similarity index 100%
rename from apps/namadillo/src/App/Transfer/__mocks__/providers.ts
rename to apps/namadillo/src/App/Common/__mocks__/providers.ts
diff --git a/apps/namadillo/src/App/Common/__tests__/SelectAssetModal.test.tsx b/apps/namadillo/src/App/Common/__tests__/SelectAssetModal.test.tsx
new file mode 100644
index 0000000000..43c08d8201
--- /dev/null
+++ b/apps/namadillo/src/App/Common/__tests__/SelectAssetModal.test.tsx
@@ -0,0 +1,75 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { assetMockList } from "../__mocks__/assets";
+import { SelectAssetModal } from "../SelectAssetModal";
+
+jest.mock("hooks/useIsChannelInactive", () => ({
+  useIsChannelInactive: jest.fn(() => ({
+    isInactive: false,
+    trace: "",
+  })),
+}));
+
+describe("SelectAssetModal", () => {
+  const onCloseMock = jest.fn();
+  const onSelectMock = jest.fn();
+  const mockAddress = "cosmos1xnu3p06fkke8hnl7t83hzhggrca59syf0wjqgh";
+
+  it("should render the modal title", () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList}
+        walletAddress={mockAddress}
+      />
+    );
+    expect(screen.getByText("Select Asset")).toBeInTheDocument();
+  });
+
+  it("should render all assets", () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList}
+        walletAddress={mockAddress}
+      />
+    );
+    expect(screen.getByText("BTC")).toBeInTheDocument();
+    expect(screen.getByText("ETH")).toBeInTheDocument();
+  });
+
+  it("should filter assets based on search input", async () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList}
+        walletAddress={mockAddress}
+      />
+    );
+    fireEvent.change(screen.getByPlaceholderText(/search/i, { exact: false }), {
+      target: { value: "bit" },
+    });
+
+    // Event is debounced
+    waitFor(() => {
+      expect(screen.getByText("Bitcoin")).toBeInTheDocument();
+      expect(screen.queryByText("Ethereum")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should call onSelect and onClose when an asset is selected", () => {
+    render(
+      <SelectAssetModal
+        onClose={onCloseMock}
+        onSelect={onSelectMock}
+        assets={assetMockList}
+        walletAddress={mockAddress}
+      />
+    );
+    fireEvent.click(screen.getByText("BTC"));
+    expect(onSelectMock).toHaveBeenCalledWith(assetMockList[1].address);
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});
diff --git a/apps/namadillo/src/App/Transfer/__tests__/WalletCard.test.tsx b/apps/namadillo/src/App/Common/__tests__/WalletCard.test.tsx
similarity index 92%
rename from apps/namadillo/src/App/Transfer/__tests__/WalletCard.test.tsx
rename to apps/namadillo/src/App/Common/__tests__/WalletCard.test.tsx
index 085ec1756b..cfa8e81565 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/WalletCard.test.tsx
+++ b/apps/namadillo/src/App/Common/__tests__/WalletCard.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { WalletCard } from "App/Transfer/WalletCard";
-import { walletMock } from "../__mocks__/providers";
+import { walletMock } from "App/Common/__mocks__/providers";
+import { WalletCard } from "App/Common/WalletCard";
 
 describe("Component: WalletCard", () => {
   it("should render wallet name and icon", () => {
diff --git a/apps/namadillo/src/App/Icons/SwapArrowsIcon.tsx b/apps/namadillo/src/App/Icons/SwapArrowsIcon.tsx
new file mode 100644
index 0000000000..83a33c85cb
--- /dev/null
+++ b/apps/namadillo/src/App/Icons/SwapArrowsIcon.tsx
@@ -0,0 +1,34 @@
+type SwapArrowsIconProps = {
+  color: string;
+};
+
+export const SwapArrowsIcon = ({ color }: SwapArrowsIconProps): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="2"
+        y="2"
+        width="44"
+        height="44"
+        rx="22"
+        fill="#262626"
+        stroke={color}
+        strokeWidth="3"
+      />
+      <path
+        d="M16.6582 36.7599L22.4317 26.7599L10.8847 26.7599L16.6582 36.7599ZM15.6582 12.9259L15.6582 27.7599L17.6582 27.7599L17.6582 12.9259L15.6582 12.9259Z"
+        fill={color}
+      />
+      <path
+        d="M31.1543 12.9259L25.3808 22.9259L36.9278 22.9259L31.1543 12.9259ZM32.1543 36.7599L32.1543 21.9259L30.1543 21.9259L30.1543 36.7599L32.1543 36.7599Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
diff --git a/apps/namadillo/src/App/Icons/SwapIcon.tsx b/apps/namadillo/src/App/Icons/SwapIcon.tsx
index 90d778c2ea..c9d8e61645 100644
--- a/apps/namadillo/src/App/Icons/SwapIcon.tsx
+++ b/apps/namadillo/src/App/Icons/SwapIcon.tsx
@@ -1,19 +1,28 @@
-export const SwapIcon = (): JSX.Element => {
+export const SwapIcon = ({
+  className,
+}: {
+  className?: string;
+}): JSX.Element => {
   return (
-    <svg viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g opacity="0.25">
+    <svg
+      className={className}
+      viewBox="0 0 15 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g>
         <circle
           cx="4.96143"
           cy="5.57031"
           r="4.375"
-          fill="white"
+          fill="currentColor"
           stroke="black"
         />
         <circle
           cx="9.83643"
           cy="10.4453"
           r="4.375"
-          fill="white"
+          fill="currentColor"
           stroke="black"
         />
       </g>
diff --git a/apps/namadillo/src/App/Icons/SwapTradeIcon.tsx b/apps/namadillo/src/App/Icons/SwapTradeIcon.tsx
new file mode 100644
index 0000000000..7690a25eee
--- /dev/null
+++ b/apps/namadillo/src/App/Icons/SwapTradeIcon.tsx
@@ -0,0 +1,20 @@
+type SwapTradeIcon = {
+  color: string;
+};
+
+export const SwapTradeIcon = ({ color }: SwapTradeIcon): JSX.Element => {
+  return (
+    <svg
+      width="13"
+      height="25"
+      viewBox="0 0 13 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.5874 24.7425L12.3609 14.7425L0.8139 14.7425L6.5874 24.7425ZM5.5874 0.9086L5.5874 15.7425L7.5874 15.7425L7.5874 0.9086L5.5874 0.9086Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
diff --git a/apps/namadillo/src/App/Layout/Navigation.tsx b/apps/namadillo/src/App/Layout/Navigation.tsx
index 584567d0c6..9d345e4932 100644
--- a/apps/namadillo/src/App/Layout/Navigation.tsx
+++ b/apps/namadillo/src/App/Layout/Navigation.tsx
@@ -1,5 +1,6 @@
 import { SidebarMenuItem } from "App/Common/SidebarMenuItem";
 import { ShieldIcon } from "App/Icons/ShieldIcon";
+import { SwapIcon } from "App/Icons/SwapIcon";
 import { routes } from "App/routes";
 import { applicationFeaturesAtom } from "atoms/settings";
 import { useAtomValue } from "jotai";
@@ -50,6 +51,11 @@ export const Navigation = (): JSX.Element => {
       icon: <LuArrowDownToLine />,
       url: routes.receive,
     },
+    {
+      label: "Shielded Swaps",
+      icon: <SwapIcon className="w-[18px]" />,
+      url: routes.swap,
+    },
     {
       label: "History",
       icon: <GoHistory />,
diff --git a/apps/namadillo/src/App/Masp/assets/swap-in-progress.png b/apps/namadillo/src/App/Masp/assets/swap-in-progress.png
new file mode 100644
index 0000000000..7eb8b4f7a8
Binary files /dev/null and b/apps/namadillo/src/App/Masp/assets/swap-in-progress.png differ
diff --git a/apps/namadillo/src/App/Swap/SwapCalculations.tsx b/apps/namadillo/src/App/Swap/SwapCalculations.tsx
new file mode 100644
index 0000000000..1591502c77
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapCalculations.tsx
@@ -0,0 +1,371 @@
+import { ActionButton, Stack } from "@namada/components";
+import { mapUndefined } from "@namada/utils";
+import { ConnectProviderButton } from "App/Common/ConnectProviderButton";
+import { SelectAssetModal } from "App/Common/SelectAssetModal";
+import { SelectWalletModal } from "App/Common/SelectWalletModal";
+import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
+import { SwapArrowsIcon } from "App/Icons/SwapArrowsIcon";
+import { defaultShieldedAccountAtom } from "atoms/accounts";
+import {
+  namadaAssetsSortedAtom,
+  namadaShieldedAssetsAtom,
+} from "atoms/balance";
+import { tokenPricesFamily } from "atoms/prices/atoms";
+import BigNumber from "bignumber.js";
+import { TransactionFeeProps, useTransactionFee } from "hooks";
+import { useAvailableAmountMinusFees } from "hooks/useAvailableAmountMinusFee";
+import { useWalletManager } from "hooks/useWalletManager";
+import { wallets } from "integrations";
+import { KeplrWalletManager } from "integrations/Keplr";
+import { getChainFromAddress } from "integrations/utils";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toDisplayAmount } from "utils";
+import { SwapSource } from "./SwapSource";
+import {
+  useSwapBuyAmount,
+  useSwapSellAmount,
+  useSwapValidation,
+} from "./hooks";
+import { SwapQuote, SwapState, SwapStatus } from "./state";
+import {
+  swapMinAmountAtom,
+  swapQuoteAtom,
+  swapStateAtom,
+  swapStatusAtom,
+} from "./state/atoms";
+
+const ValidationMessages: Record<string, string> = {
+  NoSellAssetSelected: "Select a token to sell",
+  NoBuyAssetSelected: "Select a token to buy",
+  SwapModeNone: "Enter an amount to swap",
+  SellAmountIsZero: "Calculating amount to sell",
+  BuyAmountIsZero: "Calculating amount to buy",
+  SellAmountExceedsBalance: "Insufficient balance",
+  NoWalletConnected: "Connect Keplr Wallet",
+  Ok: "Review",
+};
+
+const keplr = new KeplrWalletManager();
+
+export const SwapCalculations = (): JSX.Element => {
+  // Local state
+  const [sellAssetSelectorModalOpen, setSellAssetSelectorModalOpen] =
+    useState(false);
+  const [buyAssetSelectorModalOpen, setBuyAssetSelectorModalOpen] =
+    useState(false);
+  const [showConnectToWalletButton, setShowConnectToWalletButton] =
+    useState(false);
+  const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
+
+  // Feature state
+  const [swapState, setSwapState] = useAtom(swapStateAtom);
+  const { data: quote } = useAtomValue(swapQuoteAtom);
+  const setStatus = useSetAtom(swapStatusAtom);
+  const minAmount = useAtomValue(swapMinAmountAtom);
+  const sellAmount = useSwapSellAmount();
+  const buyAmount = useSwapBuyAmount();
+
+  // Global state
+  const sortedAssets = useAtomValue(namadaAssetsSortedAtom);
+  const { data: assetsWithBalance } = useAtomValue(namadaShieldedAssetsAtom);
+  const { data: tokenPrices } = useAtomValue(
+    tokenPricesFamily(sortedAssets.map((a) => a.address))
+  );
+  const feeProps = useTransactionFee(["IbcTransfer"]);
+  const shieldedAccountAddress = useAtomValue(
+    defaultShieldedAccountAtom
+  )?.address;
+
+  const { walletAddress, connectToChainId } = useWalletManager(keplr);
+
+  // Derived state
+  const { sellAsset, buyAsset } = swapState;
+  const availableAmount = mapUndefined(
+    (address) => assetsWithBalance?.[address]?.amount,
+    sellAsset?.address
+  );
+  const availableAmountMinusFees = useAvailableAmountMinusFees(
+    feeProps.gasConfig,
+    sellAsset?.address,
+    availableAmount
+  );
+  const validationResult = useSwapValidation({
+    mode: swapState.mode,
+    sellAmount,
+    buyAmount,
+    sellAsset,
+    buyAsset,
+    availableAmountMinusFees,
+    walletAddress,
+  });
+
+  const balances = Object.entries(assetsWithBalance || {}).reduce(
+    (acc, [key, { amount }]) => {
+      const price = tokenPrices?.[key];
+      const fiatAmount = price && amount.multipliedBy(price);
+      const val: [BigNumber, BigNumber?] =
+        fiatAmount ? [amount, fiatAmount] : [amount];
+      acc[key] = val;
+
+      return acc;
+    },
+    {} as Record<string, [BigNumber, BigNumber?]>
+  );
+
+  // Handlers
+  const onChangeSellAmount = useCallback((a: BigNumber | undefined): void => {
+    if (a) {
+      setSwapState((s) => ({
+        ...s,
+        mode: "sell",
+        sellAmount: a,
+      }));
+    } else {
+      setSwapState({
+        mode: "none",
+      });
+    }
+  }, []);
+
+  const onChangeBuyAmount = useCallback((a: BigNumber | undefined): void => {
+    if (a) {
+      setSwapState((s) => ({
+        ...s,
+        mode: "buy",
+        buyAmount: a,
+      }));
+    } else {
+      setSwapState({
+        mode: "none",
+      });
+    }
+  }, []);
+
+  const onSwapArrowsClick = useCallback((): void => {
+    const update = (s: SwapState): SwapState => {
+      if (swapState.mode !== "none") {
+        const newMode = swapState.mode === "sell" ? "buy" : "sell";
+        return {
+          mode: newMode,
+          sellAmount: s.buyAmount,
+          buyAmount: s.sellAmount,
+        };
+      }
+
+      return s;
+    };
+
+    if (sellAsset && buyAsset) {
+      setSwapState((s) => ({
+        ...update(s),
+        sellAsset: buyAsset,
+        buyAsset: sellAsset,
+      }));
+    }
+  }, [sellAsset?.symbol, buyAsset?.symbol, swapState.mode]);
+
+  const onChangeSellSelectedAsset = useCallback(
+    (address: string): void => {
+      const asset = sortedAssets.find((a) => a.address === address);
+
+      setSwapState((s) => ({
+        ...s,
+        sellAsset: asset,
+        buyAsset: asset?.address === buyAsset?.address ? sellAsset : s.buyAsset,
+      }));
+    },
+    [sortedAssets.length, sellAsset?.symbol, buyAsset?.symbol]
+  );
+
+  const onChangeBuySelectedAsset = useCallback(
+    (address: string): void => {
+      const asset = sortedAssets.find((a) => a.address === address);
+
+      setSwapState((s) => ({
+        ...s,
+        sellAsset:
+          asset?.address === sellAsset?.address ? buyAsset : s.sellAsset,
+        buyAsset: asset,
+      }));
+    },
+    [sortedAssets.length, buyAsset?.symbol, sellAsset?.symbol]
+  );
+
+  useEffect(() => {
+    // This prevents button flash and makes sure that we are connected to osmosis
+    const handler = setTimeout(() => {
+      const chain = getChainFromAddress(walletAddress || "");
+      setShowConnectToWalletButton(chain?.chain_id !== "osmosis-1");
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [walletAddress]);
+
+  const onChangeWallet = useCallback((): void => {
+    connectToChainId("osmosis-1");
+  }, []);
+
+  return (
+    <>
+      <Stack>
+        <div className="relative">
+          <SwapSource
+            asset={sellAsset}
+            isLoadingAssets={false}
+            openAssetSelector={() => setSellAssetSelectorModalOpen(true)}
+            availableAmount={availableAmount}
+            availableAmountMinusFees={availableAmountMinusFees}
+            amount={sellAmount}
+            onChangeAmount={onChangeSellAmount}
+            isSubmitting={false}
+            label="Sell"
+          />
+          {showConnectToWalletButton && (
+            <div className="absolute top-4 right-4 h-[30px]">
+              <ConnectProviderButton
+                text="Connect to Osmosis"
+                onClick={() => {
+                  setWalletSelectorModalOpen(true);
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <i
+          className="flex items-center justify-center w-13 mx-auto relative z-10 -my-8 cursor-pointer duration-300 hover:rotate-180 transition-transform ease-in-out"
+          onClick={onSwapArrowsClick}
+        >
+          <SwapArrowsIcon color={"#FF0"} />
+        </i>
+        <SwapSource
+          asset={buyAsset}
+          isLoadingAssets={false}
+          openAssetSelector={() => setBuyAssetSelectorModalOpen(true)}
+          // To not show buy amount if sell amount is empty
+          amount={sellAmount && buyAmount}
+          onChangeAmount={onChangeBuyAmount}
+          isSubmitting={false}
+          label="Buy"
+        />
+        {feeProps && sellAsset && buyAsset && tokenPrices && (
+          <SwapCalculationsFooter
+            feeProps={feeProps}
+            swapState={swapState}
+            minAmount={minAmount}
+            tokenPrice={tokenPrices[buyAsset.address]}
+            quote={quote}
+          />
+        )}
+
+        <ActionButton
+          outlineColor="yellow"
+          backgroundColor="yellow"
+          backgroundHoverColor="transparent"
+          textColor="black"
+          textHoverColor="yellow"
+          disabled={validationResult !== "Ok"}
+          onClick={() => setStatus(SwapStatus.review())}
+        >
+          {ValidationMessages[validationResult]}
+        </ActionButton>
+      </Stack>
+
+      {sellAssetSelectorModalOpen && shieldedAccountAddress && (
+        <SelectAssetModal
+          onClose={() => setSellAssetSelectorModalOpen(false)}
+          assets={sortedAssets}
+          balances={balances}
+          onSelect={onChangeSellSelectedAsset}
+          walletAddress={shieldedAccountAddress}
+        />
+      )}
+      {buyAssetSelectorModalOpen && shieldedAccountAddress && (
+        <SelectAssetModal
+          onClose={() => setBuyAssetSelectorModalOpen(false)}
+          assets={sortedAssets}
+          balances={balances}
+          onSelect={onChangeBuySelectedAsset}
+          walletAddress={shieldedAccountAddress}
+        />
+      )}
+      {walletSelectorModalOpen && (
+        <SelectWalletModal
+          availableWallets={[wallets.keplr]}
+          onClose={() => setWalletSelectorModalOpen(false)}
+          onConnect={onChangeWallet}
+        />
+      )}
+    </>
+  );
+};
+
+type SwapCalculationsFooterProps = {
+  feeProps: TransactionFeeProps;
+  tokenPrice: BigNumber;
+  quote?: SwapQuote;
+  swapState: SwapState;
+  minAmount?: BigNumber;
+};
+
+const SwapCalculationsFooter = ({
+  feeProps,
+  swapState,
+  tokenPrice,
+  quote,
+  minAmount,
+}: SwapCalculationsFooterProps): JSX.Element => {
+  const { sellAsset, buyAsset } = swapState;
+  // Quote cache, prevents blinking when quote is temporarily undefined
+  const lastValidQuoteRef = useRef<typeof quote>();
+  useEffect(() => {
+    if (typeof quote !== "undefined") {
+      lastValidQuoteRef.current = quote;
+    }
+  }, [quote]);
+
+  const quoteToUse = quote ?? lastValidQuoteRef.current;
+
+  const sellAmountPerOneBuy = useMemo(() => {
+    if (!quoteToUse || !buyAsset || !minAmount) {
+      return;
+    }
+
+    const baseAmount =
+      ["sell", "none"].includes(swapState.mode) ?
+        quoteToUse.amountIn
+      : quoteToUse.amountOut;
+
+    return toDisplayAmount(
+      buyAsset,
+      minAmount.div(toDisplayAmount(buyAsset, baseAmount))
+    );
+  }, [buyAsset?.symbol, quoteToUse]);
+
+  if (!quoteToUse || !sellAmountPerOneBuy || !sellAsset || !buyAsset) {
+    return <></>;
+  }
+
+  const { priceImpact } = quoteToUse;
+  const price = tokenPrice.times(BigNumber(1).plus(priceImpact));
+  const valFiat = sellAmountPerOneBuy.times(price);
+
+  return (
+    <Stack className="text-sm">
+      <Stack
+        className="justify-between items-center text-neutral-400"
+        direction="horizontal"
+      >
+        <div className="underline">
+          1 {sellAsset.symbol} ≈ {sellAmountPerOneBuy.toFixed(6)}{" "}
+          {buyAsset.symbol} (${valFiat.toFixed(6)})
+        </div>
+        <TransactionFeeButton
+          compact={true}
+          feeProps={feeProps}
+          isShieldedTransfer={true}
+        />
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/apps/namadillo/src/App/Swap/SwapHeader.tsx b/apps/namadillo/src/App/Swap/SwapHeader.tsx
new file mode 100644
index 0000000000..d1c8e599fc
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapHeader.tsx
@@ -0,0 +1,13 @@
+import { SwapIcon } from "App/Icons/SwapIcon";
+
+export const SwapHeader = (): JSX.Element => {
+  return (
+    <header className="flex flex-col items-center text-center mb-8 gap-5">
+      <h1 className="text-yellow"> Shielded Swaps </h1>
+      <i className="flex items-center justify-center w-13 text-yellow mx-auto relative z-10">
+        <SwapIcon />
+      </i>
+      <p>Swap an asset you hold in the shield pool</p>
+    </header>
+  );
+};
diff --git a/apps/namadillo/src/App/Swap/SwapInProgress.tsx b/apps/namadillo/src/App/Swap/SwapInProgress.tsx
new file mode 100644
index 0000000000..adc6ba57a3
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapInProgress.tsx
@@ -0,0 +1,99 @@
+import { Heading, Stack } from "@namada/components";
+import anime from "animejs";
+import { clearDisposableSigner } from "atoms/transfer/services";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { OsmosisSwapTransactionData } from "types";
+import { useTransactionEventListener } from "utils";
+import swapInProgressImg from "../Masp/assets/swap-in-progress.png";
+import { swapStatusAtom } from "./state/atoms";
+
+export const SwapInProgress = (): JSX.Element => {
+  const [status, setStatus] = useAtom(swapStatusAtom);
+  const imageContainerRef = useRef<HTMLImageElement | null>(null);
+  const headerRef = useRef<HTMLHeadingElement | null>(null);
+
+  useTransactionEventListener(["ShieldedOsmosisSwap.Success"], async (e) => {
+    const tx = e.detail as OsmosisSwapTransactionData;
+    if (
+      status.t === "Confirming" &&
+      status.txHash &&
+      tx.hash === status.txHash
+    ) {
+      await clearDisposableSigner(tx.refundTarget);
+      setStatus({ t: "Completed" });
+    }
+  });
+
+  useTransactionEventListener(["ShieldedOsmosisSwap.Error"], async (e) => {
+    if (
+      status.t === "Confirming" &&
+      status.txHash &&
+      e.detail.hash === status.txHash
+    ) {
+      setStatus({
+        t: "Error",
+        message: e.detail.errorMessage || "Transaction failed",
+      });
+    }
+  });
+
+  useEffect(() => {
+    if (!imageContainerRef.current || !headerRef.current) return;
+
+    const image = imageContainerRef.current.children[0] as HTMLImageElement;
+    const header = headerRef.current.children[0] as HTMLHeadingElement;
+
+    const timelineOpacity = anime.timeline({
+      easing: "easeOutExpo",
+    });
+    const timelineRotation = anime.timeline({
+      easing: "easeInOutCirc",
+      loop: true,
+    });
+
+    timelineOpacity.add({
+      targets: [image, header],
+      opacity: [0, 1],
+      duration: 1000,
+      easing: "easeOutBack",
+    });
+
+    timelineRotation.add(
+      {
+        targets: [image],
+        rotate: {
+          value: "-=180",
+          duration: 600,
+        },
+      },
+      "+=1000"
+    );
+
+    timelineRotation.add(
+      {
+        targets: [image],
+        rotate: {
+          value: "-=180",
+          duration: 600,
+        },
+      },
+      "+=1000"
+    );
+  }, []);
+
+  return (
+    <Stack className="mt-[150px]">
+      <div ref={headerRef}>
+        <Heading className="text-center text-2xl font-normal text-yellow">
+          Shielded swap in
+          <br />
+          progress
+        </Heading>
+      </div>
+      <div ref={imageContainerRef} className="flex items-center justify-center">
+        <img className="max-w-[280px]" src={swapInProgressImg} alt="" />
+      </div>
+    </Stack>
+  );
+};
diff --git a/apps/namadillo/src/App/Swap/SwapModule.tsx b/apps/namadillo/src/App/Swap/SwapModule.tsx
new file mode 100644
index 0000000000..527728f44e
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapModule.tsx
@@ -0,0 +1,49 @@
+import { Panel } from "@namada/components";
+import { useAtomValue } from "jotai";
+import { Link } from "react-router-dom";
+import { swapStatusAtom } from "./state/atoms";
+import { SwapCalculations } from "./SwapCalculations";
+import { SwapHeader } from "./SwapHeader";
+import { SwapInProgress } from "./SwapInProgress";
+import { SwapReview } from "./SwapReview";
+import { SwapSuccess } from "./SwapSuccess";
+
+// TODO: for better state isolation, we should create a new store for the swap module
+// and pass the shared state(accounts, fees, etc.) as props to the module components
+export const SwapModule = (): JSX.Element => {
+  const status = useAtomValue(swapStatusAtom);
+
+  return (
+    <Panel className="relative rounded-sm flex flex-col flex-1 pt-9">
+      {!["Broadcasting", "Confirming", "Completed"].includes(status.t) && (
+        <SwapHeader />
+      )}
+
+      <section className="w-full max-w-[480px] mx-auto" role="widget">
+        {status.t === "Idle" && <SwapCalculations />}
+        {["Review", "Building", "AwaitingSignature", "Error"].includes(
+          status.t
+        ) && <SwapReview />}
+
+        {["Confirming", "Broadcasting"].includes(status.t) && (
+          <SwapInProgress />
+        )}
+        {status.t === "Completed" && <SwapSuccess />}
+
+        {!["Broadcasting", "Confirming", "Completed", "Error"].includes(
+          status.t
+        ) && (
+          <p className="w-full mt-6 text-center font-light hover:text-purple-500 transition-colors">
+            <Link
+              to="https://osmosis.zone"
+              target="_blank"
+              rel="noreferrer nofollow"
+            >
+              Powered by Osmosis
+            </Link>
+          </p>
+        )}
+      </section>
+    </Panel>
+  );
+};
diff --git a/apps/namadillo/src/App/Swap/SwapReview.tsx b/apps/namadillo/src/App/Swap/SwapReview.tsx
new file mode 100644
index 0000000000..a3c0a41fcc
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapReview.tsx
@@ -0,0 +1,307 @@
+import { ActionButton, Stack, Text } from "@namada/components";
+import { CurrentStatus } from "App/Common/CurrentStatus";
+import { IconTooltip } from "App/Common/IconTooltip";
+import { InlineError } from "App/Common/InlineError";
+import { LedgerDeviceTooltip } from "App/Common/LedgerDeviceTooltip";
+import { WalletAddress } from "App/Common/WalletAddress";
+import { SwapTradeIcon } from "App/Icons/SwapTradeIcon";
+import { ledgerStatusDataAtom } from "atoms/ledger";
+import { tokenPricesFamily } from "atoms/prices/atoms";
+import BigNumber from "bignumber.js";
+import clsx from "clsx";
+import { useWalletManager } from "hooks/useWalletManager";
+import { KeplrWalletManager } from "integrations/Keplr";
+import { getAssetImageUrl } from "integrations/utils";
+import invariant from "invariant";
+import { useAtom, useAtomValue } from "jotai";
+import { useCallback, useEffect, useState } from "react";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import { toDisplayAmount } from "utils";
+import {
+  usePerformOsmosisSwapTx,
+  useSwapBuyAmount,
+  useSwapSellAmount,
+} from "./hooks";
+import { useSwapReviewValidation } from "./hooks/useSwapReviewValidation";
+import { statusMessages, SwapStatus } from "./state";
+import {
+  swapMinAmountAtom,
+  swapQuoteAtom,
+  swapSlippageAtom,
+  swapStateAtom,
+  swapStatusAtom,
+} from "./state/atoms";
+
+const keplr = new KeplrWalletManager();
+export const SwapReview = (): JSX.Element => {
+  const [slippageInput, setSlippageInput] = useState("");
+  // Feature state  sanity checks
+  const [status, setStatus] = useAtom(swapStatusAtom);
+  const { sellAsset, buyAsset } = useAtomValue(swapStateAtom);
+  const sellAmount = useSwapSellAmount();
+  const buyAmount = useSwapBuyAmount();
+  const minAmount = useAtomValue(swapMinAmountAtom);
+  const [{ default: slippage, override: slippageOverride }, setSlippage] =
+    useAtom(swapSlippageAtom);
+  const { data: quote } = useAtomValue(swapQuoteAtom);
+
+  invariant(sellAsset, "Sell asset is required");
+  invariant(buyAsset, "Buy asset is required");
+
+  const sellPrice = useAtomValue(tokenPricesFamily([sellAsset.address])).data?.[
+    sellAsset.address
+  ];
+  const buyPrice = useAtomValue(tokenPricesFamily([buyAsset.address])).data?.[
+    buyAsset.address
+  ];
+
+  invariant(quote, "Quote is required");
+  invariant(sellAmount, "Swap sell amount is required");
+  invariant(buyAmount, "Swap buy amount is required");
+  invariant(minAmount, "Minimum amount is required");
+
+  // Global state
+  const [ledgerStatus, setLedgerStatusStop] = useAtom(ledgerStatusDataAtom);
+
+  // Derived state
+  const ledgerAccountInfo = ledgerStatus && {
+    deviceConnected: ledgerStatus.connected,
+    errorMessage: ledgerStatus.errorMessage,
+  };
+  const sellAmountFiat = sellPrice && sellPrice.times(sellAmount);
+  const buyPriceImpact =
+    buyPrice && buyPrice.times(BigNumber(1).plus(quote.priceImpact));
+  const buyAmountFiat = buyPriceImpact && buyPriceImpact.times(buyAmount);
+  const receiveAtLeastDenominated = toDisplayAmount(buyAsset, minAmount);
+
+  const swapFee = quote.effectiveFee
+    .times(100)
+    .decimalPlaces(2, BigNumber.ROUND_HALF_UP);
+  const fiatFee =
+    buyPriceImpact &&
+    buyPrice.times(buyPriceImpact).times(quote.effectiveFee).decimalPlaces(3);
+  const fiatFeeDisplay =
+    !fiatFee ? "#"
+    : fiatFee.lt(0.01) ? "<$0.01"
+    : `~$${fiatFee.toString()}`;
+
+  const { walletAddress } = useWalletManager(keplr);
+
+  const { error: _err, performSwap } = usePerformOsmosisSwapTx();
+  const onSwap = useCallback(async (): Promise<void> => {
+    await performSwap({ localRecoveryAddr: walletAddress });
+  }, [walletAddress, performSwap]);
+
+  const validationResult = useSwapReviewValidation({
+    walletAddress,
+    ledgerAccountInfo,
+  });
+
+  const onSlippageChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      if (val === "" || val.match(/^\d{1}(\.\d{0,1})?$/)) {
+        setSlippageInput(val);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!BigNumber(slippageInput).isNaN()) {
+      setSlippage(BigNumber(slippageInput).div(100));
+    } else {
+      setSlippage(null);
+    }
+  }, [slippageInput]);
+
+  const isProcessing = ["Building", "AwaitingSignature"].includes(status.t);
+
+  // We stop the ledger status check when the transfer is in progress
+  useEffect(() => {
+    setLedgerStatusStop(["Building", "AwaitingSignature"].includes(status.t));
+  }, [status.t]);
+
+  return (
+    <>
+      <Stack>
+        <div className="relative bg-neutral-800 rounded-lg px-4 py-5 border border-yellow font-light">
+          <Text className="mt-0">Review Shielded Swap</Text>
+          <Stack direction="horizontal">
+            <span>
+              <img
+                className={clsx(
+                  "w-15 aspect-square object-cover select-none",
+                  "object-center bg-neutral-800 rounded-full"
+                )}
+                alt={`${sellAsset.name} image`}
+                src={getAssetImageUrl(sellAsset)}
+              />
+            </span>
+            <Stack gap={0} className="justify-center grow">
+              <Text className="text-sm my-0">Sell</Text>
+              <Text className="text-lg my-0">
+                {sellAmount.toString()} {sellAsset.symbol}
+              </Text>
+            </Stack>
+            <Text className="my-0 mb-2 self-end">
+              ${sellAmountFiat && sellAmountFiat.decimalPlaces(2).toString()}
+            </Text>
+          </Stack>
+          <i className="flex w-15 justify-center my-4">
+            <SwapTradeIcon color={"#FF0"} />
+          </i>
+          <Stack direction="horizontal">
+            <span>
+              <img
+                className={clsx(
+                  "w-15 aspect-square object-cover select-none",
+                  "object-center bg-neutral-800 rounded-full"
+                )}
+                alt={`${buyAsset.name} image`}
+                src={getAssetImageUrl(buyAsset)}
+              />
+            </span>
+            <Stack gap={0} className="justify-center grow">
+              <Text className="text-sm my-0">Buy</Text>
+              <Text className="text-lg my-0">
+                {buyAmount.toString()} {buyAsset.symbol}
+              </Text>
+            </Stack>
+            <Text className="my-0 mb-2 self-end">
+              ${buyAmountFiat && buyAmountFiat.decimalPlaces(2).toString()}
+            </Text>
+          </Stack>
+          <hr className="my-5 mx-2 border-white opacity-[5%]" />
+          <Stack gap={3}>
+            <ReviewRow>
+              <div>Swap Fee</div>
+              <p>
+                {fiatFeeDisplay} ({swapFee.toString()}%)
+              </p>
+            </ReviewRow>
+            <ReviewRow>
+              <div className="self-center">Slippage tolerance</div>
+              <div className="relative inline-block">
+                <input
+                  type="text"
+                  placeholder={slippage.times(100).toString()}
+                  className={clsx(
+                    "peer h-full pl-3 pr-4 w-16 placeholder-yellow-600 text-yellow text-right bg-transparent",
+                    "outline-none border border-transparent rounded-sm focus:py-2 focus:pr-7 focus:border-yellow transition-all",
+                    "disabled:cursor-not-allowed disabled:opacity-50"
+                  )}
+                  onChange={onSlippageChange}
+                  value={slippageInput}
+                  disabled={isProcessing}
+                />
+                <span
+                  className={clsx(
+                    "absolute right-0 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none peer-focus:right-3 transition-all",
+                    "peer-disabled:opacity-50",
+                    { "text-yellow": !!slippageOverride },
+                    { "text-yellow-600": !slippageOverride }
+                  )}
+                >
+                  %
+                </span>
+              </div>
+            </ReviewRow>
+            <ReviewRow>
+              <div>Receive at least</div>
+              <div>
+                {receiveAtLeastDenominated
+                  .decimalPlaces(6, BigNumber.ROUND_DOWN)
+                  .toString()}{" "}
+                {buyAsset.symbol}
+              </div>
+            </ReviewRow>
+            {walletAddress && (
+              <ReviewRow>
+                <Stack
+                  direction="horizontal"
+                  className="relative items-center"
+                  gap={2}
+                >
+                  Local recovery address
+                  <IconTooltip
+                    className=""
+                    icon={
+                      <BsQuestionCircleFill className="w-4 h-4 text-yellow" />
+                    }
+                    text={
+                      <span>
+                        This is the address where your assets will land in case
+                        something goes wrong on the destination chain.
+                      </span>
+                    }
+                  />
+                </Stack>
+                <WalletAddress address={walletAddress} displayTooltip={true} />
+              </ReviewRow>
+            )}
+          </Stack>
+        </div>
+        {status.t === "Error" && <InlineError errorMessage={status.message} />}
+        {!["Building", "AwaitingSignature", "Broadcasting"].includes(
+          status.t
+        ) && (
+          <div className="relative">
+            <ActionButton
+              outlineColor="yellow"
+              backgroundColor="yellow"
+              backgroundHoverColor="transparent"
+              textColor="black"
+              textHoverColor="yellow"
+              disabled={validationResult !== "Ok"}
+              onClick={onSwap}
+            >
+              {ValidationMessages[validationResult]}
+            </ActionButton>
+
+            {validationResult === "LedgerDeviceNotConnected" && (
+              <LedgerDeviceTooltip />
+            )}
+          </div>
+        )}
+        {["Building", "AwaitingSignature", "Broadcasting"].includes(status.t) ?
+          <CurrentStatus
+            status={statusMessages[status.t].title}
+            explanation={statusMessages[status.t].description}
+          />
+        : <ActionButton
+            outlineColor="yellow"
+            backgroundColor="transparent"
+            backgroundHoverColor="yellow"
+            textColor="yellow"
+            textHoverColor="black"
+            onClick={() => setStatus(SwapStatus.idle())}
+          >
+            Back
+          </ActionButton>
+        }
+      </Stack>
+    </>
+  );
+};
+
+const ReviewRow = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element => {
+  return (
+    <Stack
+      direction="horizontal"
+      className="justify-between text-neutral-300 text-sm"
+    >
+      {children}
+    </Stack>
+  );
+};
+
+const ValidationMessages: Record<string, string> = {
+  NoWalletConnected: "Connect Keplr Wallet",
+  LedgerDeviceNotConnected: "Connect your ledger and open the Namada App",
+  Ok: "Swap",
+};
diff --git a/apps/namadillo/src/App/Swap/SwapSource.tsx b/apps/namadillo/src/App/Swap/SwapSource.tsx
new file mode 100644
index 0000000000..4a60b13d0f
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapSource.tsx
@@ -0,0 +1,83 @@
+import { AmountInput, Text } from "@namada/components";
+import { AvailableAmountFooter } from "App/Common/AvailableAmountFooter";
+import { SelectedAsset } from "App/Common/SelectedAsset";
+import { TokenAmountCard } from "App/Common/TokenAmountCard";
+import BigNumber from "bignumber.js";
+import clsx from "clsx";
+import { Asset } from "types";
+import { amountMaxDecimalPlaces } from "utils/assets";
+
+export type SwapSourceProps = {
+  asset?: Asset;
+  isLoadingAssets?: boolean;
+  isSubmitting?: boolean;
+  openAssetSelector?: () => void;
+  amount?: BigNumber;
+  availableAmount?: BigNumber;
+  availableAmountMinusFees?: BigNumber;
+  onChangeAmount?: (amount?: BigNumber) => void;
+  label?: string;
+};
+
+export const SwapSource = ({
+  asset,
+  isLoadingAssets,
+  openAssetSelector,
+  availableAmount,
+  availableAmountMinusFees,
+  amount,
+  onChangeAmount,
+  isSubmitting,
+  label,
+}: SwapSourceProps): JSX.Element => {
+  return (
+    <div className="relative bg-neutral-800 rounded-lg px-4 py-5 border border-yellow">
+      {/** Intro header - Ex: "IBC To Namada" */}
+      {label && (
+        <Text className="text-neutral-500 font-light mt-0 mb-2">{label}</Text>
+      )}
+
+      {/** Asset selector */}
+      {!isSubmitting && (
+        <div className="grid grid-cols-[max-content_auto] gap-5 mb-3">
+          <SelectedAsset
+            asset={asset}
+            isLoading={isLoadingAssets}
+            onClick={openAssetSelector}
+          />
+          <AmountInput
+            className={clsx(
+              "text-right [&_input]:text-right [&_input]:text-3xl [&_input]:bg-transparent",
+              "[&_input]:!border-0 [&_input]:px-0"
+            )}
+            disabled={!asset || !onChangeAmount}
+            value={amount}
+            onChange={(e) => onChangeAmount?.(e.target.value)}
+            placeholder="Amount"
+            maxDecimalPlaces={amountMaxDecimalPlaces(asset)}
+          />
+        </div>
+      )}
+
+      {/** Available amount footer */}
+      {!isSubmitting && asset && availableAmountMinusFees && (
+        <footer>
+          <AvailableAmountFooter
+            availableAmount={availableAmount}
+            availableAmountMinusFees={availableAmountMinusFees}
+            asset={asset}
+            onClickMax={() =>
+              onChangeAmount && onChangeAmount(availableAmountMinusFees)
+            }
+          />
+        </footer>
+      )}
+
+      {isSubmitting && asset && amount && (
+        <div className="pt-1.5 pb-3">
+          <TokenAmountCard asset={asset} displayAmount={amount} />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/namadillo/src/App/Swap/SwapSuccess.tsx b/apps/namadillo/src/App/Swap/SwapSuccess.tsx
new file mode 100644
index 0000000000..6fa9418a1e
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/SwapSuccess.tsx
@@ -0,0 +1,168 @@
+import { Heading, Stack } from "@namada/components";
+import anime from "animejs";
+import { useSetAtom } from "jotai";
+import { useCallback, useEffect, useRef } from "react";
+import { CgCheck } from "react-icons/cg";
+import { SwapStatus } from "./state";
+import { swapStateAtom, swapStatusAtom } from "./state/atoms";
+
+export const SwapSuccess = (): JSX.Element => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const headerRef = useRef<HTMLHeadingElement | null>(null);
+
+  // Feature state
+  const setStatus = useSetAtom(swapStatusAtom);
+  const setSwapState = useSetAtom(swapStateAtom);
+
+  // Handlers
+  const onComplete = useCallback(() => {
+    setStatus(SwapStatus.idle());
+    setSwapState({ mode: "none" });
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current || !headerRef.current) return;
+
+    const circles =
+      containerRef.current.querySelectorAll<HTMLDivElement>(".circle");
+
+    const header = headerRef.current.children[0] as HTMLHeadingElement;
+
+    const [outer, middle, inner, center] = circles;
+
+    const timeline = anime.timeline({
+      easing: "easeOutExpo",
+    });
+
+    timeline.add({
+      targets: outer,
+      scale: [0, 1],
+      opacity: [0, 1],
+      duration: 1000,
+    });
+
+    timeline.add(
+      {
+        targets: middle,
+        scale: [0, 1],
+        opacity: [0, 1],
+        duration: 1000,
+      },
+      "-=500"
+    );
+    timeline.add(
+      {
+        targets: outer,
+        opacity: [1, 0],
+        scale: [1, 0.5],
+        duration: 1000,
+      },
+      "-=1000"
+    );
+
+    timeline.add(
+      {
+        targets: inner,
+        scale: [0, 1],
+        opacity: [0, 1],
+        duration: 1000,
+      },
+      "-=500"
+    );
+    timeline.add(
+      {
+        targets: middle,
+        opacity: [1, 0],
+        scale: [1, 0.5],
+        duration: 1000,
+      },
+      "-=1000"
+    );
+
+    timeline.add(
+      {
+        targets: [center, header],
+        opacity: [0, 1],
+        duration: 1000,
+        easing: "easeOutBack",
+      },
+      "-=500"
+    );
+
+    timeline.add(
+      {
+        targets: inner,
+        opacity: [1, 0],
+        duration: 1000,
+      },
+      "-=1000"
+    );
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onComplete();
+    }, 4000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <Stack className="mt-[150px]" gap={0}>
+      <div ref={headerRef}>
+        <Heading className="heading text-center text-2xl font-normal text-yellow">
+          Complete
+        </Heading>
+      </div>
+      <div className="flex items-center justify-center h-[280px]">
+        <div ref={containerRef} className="relative">
+          <div
+            className="circle absolute rounded-full border border-yellow-400"
+            style={{
+              width: 280,
+              height: 280,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+
+          <div
+            className="circle absolute rounded-full border border-yellow-400"
+            style={{
+              width: 210,
+              height: 210,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+
+          <div
+            className="circle absolute rounded-full border border-yellow-400"
+            style={{
+              width: 165,
+              height: 165,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+
+          <div
+            className="flex items-center justify-center circle absolute rounded-full bg-yellow-400"
+            style={{
+              width: 155,
+              height: 155,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <CgCheck className="text-black scale-[12]" />
+          </div>
+        </div>
+      </div>
+    </Stack>
+  );
+};
diff --git a/apps/namadillo/src/App/Swap/hooks/index.ts b/apps/namadillo/src/App/Swap/hooks/index.ts
new file mode 100644
index 0000000000..e5e365ae57
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from "./usePerformOsmosisSwapTx";
+export * from "./useSwapBuyAmount";
+export * from "./useSwapSellAmount";
+export * from "./useSwapValidation";
diff --git a/apps/namadillo/src/App/Swap/hooks/usePerformOsmosisSwapTx.tsx b/apps/namadillo/src/App/Swap/hooks/usePerformOsmosisSwapTx.tsx
new file mode 100644
index 0000000000..fe69d73e4d
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/hooks/usePerformOsmosisSwapTx.tsx
@@ -0,0 +1,265 @@
+import { OsmosisSwapProps } from "@namada/sdk-multicore";
+import { AccountType } from "@namada/types";
+import { allDefaultAccountsAtom } from "atoms/accounts";
+import { chainAtom } from "atoms/chain";
+import {
+  dispatchToastNotificationAtom,
+  getNotificationId,
+} from "atoms/notifications";
+import { createOsmosisSwapTxAtom } from "atoms/transfer/atoms";
+import {
+  clearDisposableSigner,
+  getDisposableSigner,
+  persistDisposableSigner,
+} from "atoms/transfer/services";
+import BigNumber from "bignumber.js";
+import { useTransactionFee } from "hooks";
+import { useTransactionActions } from "hooks/useTransactionActions";
+import invariant from "invariant";
+import { useAtomValue, useSetAtom } from "jotai";
+import { broadcastTxWithEvents, signTx, TransactionPair } from "lib/query";
+import { useCallback, useState } from "react";
+import { NamadaAsset, OsmosisSwapTransactionData, TransferStep } from "types";
+import { TransactionError } from "types/errors";
+import { toBaseAmount } from "utils";
+import { SwapStatus } from "../state";
+import {
+  swapMinAmountAtom,
+  swapQuoteAtom,
+  swapStateAtom,
+  swapStatusAtom,
+} from "../state/atoms";
+import { useSwapBuyAmount } from "./useSwapBuyAmount";
+import { useSwapSellAmount } from "./useSwapSellAmount";
+
+// TODO: Should be a different address for housefire
+const SWAP_CONTRACT_ADDRESS =
+  "osmo14q5zmg3fp774kpz2j8c52q7gqjn0dnm3vcj3guqpj4p9xylqpc7s2ezh0h";
+
+export type OsmosisSwapTxProps = {
+  localRecoveryAddr?: string;
+};
+
+type TxHash = string;
+
+type UsePerformOsmosisSwapResult = {
+  txHash?: TxHash;
+  error?: Error;
+  performSwap: (props: OsmosisSwapTxProps) => Promise<void>;
+};
+
+export function usePerformOsmosisSwapTx(): UsePerformOsmosisSwapResult {
+  const [txHash, setTxHash] = useState<TxHash | undefined>();
+  const [error, setError] = useState<Error | undefined>();
+
+  // Feature state
+  const setStatus = useSetAtom(swapStatusAtom);
+  const { buyAsset, sellAsset } = useAtomValue(swapStateAtom);
+  const sellAmount = useSwapSellAmount();
+  const buyAmount = useSwapBuyAmount();
+  const quoteQuery = useAtomValue(swapQuoteAtom);
+  const minAmount = useAtomValue(swapMinAmountAtom);
+
+  // Global state
+  const namadaChain = useAtomValue(chainAtom);
+  const { mutateAsync: performOsmosisSwap } = useAtomValue(
+    createOsmosisSwapTxAtom
+  );
+  const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
+  const shieldedAccount = defaultAccounts.data?.find(
+    (a) => a.type === AccountType.ShieldedKeys
+  );
+  const transparentAccount = defaultAccounts.data?.find(
+    (a) => a.type !== AccountType.ShieldedKeys
+  );
+  const dispatchNotification = useSetAtom(dispatchToastNotificationAtom);
+  const feeProps = useTransactionFee(["IbcTransfer"]);
+
+  const { storeTransaction } = useTransactionActions();
+
+  const storeTransferTransaction = (
+    tx: TransactionPair<OsmosisSwapProps>,
+    displayAmount: BigNumber,
+    displayTargetMinAmount: BigNumber,
+    asset: NamadaAsset,
+    targetAsset: NamadaAsset
+  ): OsmosisSwapTransactionData => {
+    // We have to use the last element from lists in case we revealPK
+    const props = tx.encodedTxData.meta?.props.pop();
+    const lastTx = tx.encodedTxData.txs.pop();
+    invariant(props && lastTx, "Invalid transaction data");
+    const lastInnerTxHash = lastTx.innerTxHashes.pop();
+    invariant(lastInnerTxHash, "Inner tx not found");
+    invariant(props.transfer.refundTarget, "No refund target found");
+
+    const transferTransaction: OsmosisSwapTransactionData = {
+      hash: lastTx.hash,
+      innerHash: lastInnerTxHash.toLowerCase(),
+      currentStep: TransferStep.WaitingConfirmation,
+      rpc: "",
+      type: "ShieldedOsmosisSwap",
+      status: "pending",
+      asset,
+      targetAsset,
+      minAmountOut: displayTargetMinAmount,
+      chainId: namadaChain.data?.chainId || "",
+      destinationChainId: "",
+      memo: tx.encodedTxData.wrapperTxProps.memo || props.transfer.memo,
+      displayAmount,
+      shielded: true,
+      sourceAddress: `${transparentAccount?.alias} - shielded`,
+      destinationAddress: props.transfer.receiver,
+      refundTarget: props.transfer.refundTarget,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    storeTransaction(transferTransaction);
+    return transferTransaction;
+  };
+
+  const performSwap = useCallback(
+    async (props: OsmosisSwapTxProps): Promise<void> => {
+      const { localRecoveryAddr } = props;
+      setError(undefined);
+      setTxHash(undefined);
+      setStatus(SwapStatus.building());
+
+      try {
+        const quote = quoteQuery.data;
+
+        invariant(localRecoveryAddr, "No local recovery address found");
+        invariant(shieldedAccount, "No shielded account found");
+        invariant(transparentAccount, "No transparent account found");
+        invariant(quote, "No quote found");
+        invariant(sellAmount, "No sell amount");
+        invariant(buyAmount, "No buy amount");
+        invariant(sellAsset && buyAsset, "Missing swap assets");
+        invariant(minAmount, "No minimum amount calculated");
+
+        const toTrace =
+          buyAsset.traces?.find((t) => t.type === "ibc")?.chain.path ||
+          // For NAM token, we want to use address directly
+          buyAsset.address;
+        invariant(toTrace, "No IBC trace found");
+
+        const route = quote.routes[0]?.pools;
+        invariant(route, "No swap route found");
+
+        const disposableRefundTarget = await getDisposableSigner();
+        const transfer = {
+          amountInBaseDenom: toBaseAmount(sellAsset, sellAmount),
+          channelId: "channel-1",
+          portId: "transfer",
+          token: sellAsset.address,
+          source: shieldedAccount.pseudoExtendedKey!,
+          gasSpendingKey: shieldedAccount.pseudoExtendedKey!,
+          receiver: SWAP_CONTRACT_ADDRESS,
+          refundTarget: disposableRefundTarget.address,
+        };
+
+        const params = {
+          transfer,
+          outputDenom: toTrace,
+          recipient: shieldedAccount.address,
+          overflow: transparentAccount.address,
+          slippage: {
+            0: minAmount.integerValue(BigNumber.ROUND_DOWN).toString(),
+          },
+          localRecoveryAddr,
+          route,
+          osmosisRestRpc: "https://osmosis-rest.publicnode.com",
+        };
+
+        setStatus(SwapStatus.building());
+
+        const signer = await getDisposableSigner();
+
+        await persistDisposableSigner(disposableRefundTarget.address);
+        const encodedTxData = await performOsmosisSwap({
+          signer,
+          account: transparentAccount,
+          params: [params],
+          gasConfig: feeProps.gasConfig,
+        });
+
+        setStatus(SwapStatus.awaitingSignature());
+        const signedTxs = await signTx(encodedTxData, signer.address);
+
+        const transactionPair: TransactionPair<OsmosisSwapProps> = {
+          signedTxs,
+          encodedTxData,
+        };
+
+        const notificationId = getNotificationId(transactionPair);
+
+        dispatchNotification({
+          id: notificationId,
+          type: "pending",
+          title: "Transaction pending",
+          description: (
+            <div>
+              Your shielded swap is being processed. This can take a few
+              moments.
+            </div>
+          ),
+        });
+
+        setStatus(SwapStatus.broadcasting());
+
+        try {
+          await broadcastTxWithEvents(
+            transactionPair.encodedTxData,
+            transactionPair.signedTxs,
+            transactionPair.encodedTxData.meta?.props,
+            "ShieldedOsmosisSwap"
+          );
+        } catch (error) {
+          await clearDisposableSigner(disposableRefundTarget.address);
+
+          dispatchNotification({
+            id: notificationId,
+            details: error instanceof Error ? error.message : undefined,
+            type: "error",
+            title: "Swap error",
+            description: "",
+          });
+          throw new TransactionError<OsmosisSwapProps>("Transaction error", {
+            cause: {
+              originalError: error,
+              context: transactionPair,
+            },
+          });
+        }
+
+        const ibcTxData = storeTransferTransaction(
+          transactionPair,
+          sellAmount,
+          buyAmount,
+          sellAsset,
+          buyAsset
+        );
+
+        setTxHash(ibcTxData.hash);
+        setStatus(SwapStatus.confirming(ibcTxData.hash));
+      } catch (err) {
+        setError(err as Error);
+        setStatus(SwapStatus.error((err as Error).message));
+      }
+    },
+    [
+      buyAmount?.toString(),
+      sellAmount?.toString(),
+      transparentAccount?.address,
+      shieldedAccount?.address,
+      feeProps.gasConfig.gasLimit,
+      minAmount,
+    ]
+  );
+
+  return {
+    txHash,
+    error,
+    performSwap,
+  };
+}
diff --git a/apps/namadillo/src/App/Swap/hooks/useSwapBuyAmount.tsx b/apps/namadillo/src/App/Swap/hooks/useSwapBuyAmount.tsx
new file mode 100644
index 0000000000..277fe37b89
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/hooks/useSwapBuyAmount.tsx
@@ -0,0 +1,37 @@
+import BigNumber from "bignumber.js";
+import { useAtomValue } from "jotai";
+import { useMemo, useRef } from "react";
+import { toDisplayAmount } from "utils";
+import { SwapQuote } from "../state";
+import { swapQuoteAtom, swapStateAtom } from "../state/atoms";
+
+export const useSwapBuyAmount = (): BigNumber | undefined => {
+  const {
+    mode,
+    buyAsset,
+    buyAmount: stateBuyAmount,
+  } = useAtomValue(swapStateAtom);
+  const quote = useAtomValue(swapQuoteAtom).data;
+
+  const lastQuoteRef = useRef<SwapQuote | null>(null);
+
+  const buyAmount = useMemo(() => {
+    if (mode === "buy") {
+      return stateBuyAmount;
+    }
+
+    // Update ref when we have a quote
+    if (quote) {
+      lastQuoteRef.current = quote;
+    }
+
+    // Use current quote or fallback to last known quote
+    const quoteToUse = quote ?? lastQuoteRef.current;
+
+    if (quoteToUse && buyAsset) {
+      return toDisplayAmount(buyAsset, quoteToUse.amountOut);
+    }
+  }, [mode, stateBuyAmount, quote, buyAsset]);
+
+  return buyAmount;
+};
diff --git a/apps/namadillo/src/App/Swap/hooks/useSwapReviewValidation.tsx b/apps/namadillo/src/App/Swap/hooks/useSwapReviewValidation.tsx
new file mode 100644
index 0000000000..749e951925
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/hooks/useSwapReviewValidation.tsx
@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+
+export const useSwapReviewValidation = ({
+  walletAddress,
+  ledgerAccountInfo,
+}: {
+  walletAddress?: string;
+  ledgerAccountInfo?: { deviceConnected: boolean; errorMessage: string };
+}): string => {
+  return useMemo(() => {
+    if (!walletAddress) {
+      return "NoWalletConnected";
+    } else if (ledgerAccountInfo && !ledgerAccountInfo.deviceConnected) {
+      return "LedgerDeviceNotConnected";
+    } else {
+      return "Ok";
+    }
+  }, [
+    walletAddress,
+    ledgerAccountInfo?.deviceConnected,
+    ledgerAccountInfo?.errorMessage,
+  ]);
+};
diff --git a/apps/namadillo/src/App/Swap/hooks/useSwapSellAmount.tsx b/apps/namadillo/src/App/Swap/hooks/useSwapSellAmount.tsx
new file mode 100644
index 0000000000..34bf5bb2e0
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/hooks/useSwapSellAmount.tsx
@@ -0,0 +1,37 @@
+import BigNumber from "bignumber.js";
+import { useAtomValue } from "jotai";
+import { useMemo, useRef } from "react";
+import { toDisplayAmount } from "utils";
+import { SwapQuote } from "../state";
+import { swapQuoteAtom, swapStateAtom } from "../state/atoms";
+
+export const useSwapSellAmount = (): BigNumber | undefined => {
+  const {
+    mode,
+    sellAsset,
+    sellAmount: stateSellAmount,
+  } = useAtomValue(swapStateAtom);
+  const quote = useAtomValue(swapQuoteAtom).data;
+
+  const lastQuoteRef = useRef<SwapQuote | null>(null);
+
+  const sellAmount = useMemo(() => {
+    if (mode === "sell" || mode === "none") {
+      return stateSellAmount;
+    }
+
+    // Update ref when we have a quote
+    if (quote) {
+      lastQuoteRef.current = quote;
+    }
+
+    // Use current quote or fallback to last known quote
+    const quoteToUse = quote ?? lastQuoteRef.current;
+
+    if (quoteToUse && sellAsset) {
+      return toDisplayAmount(sellAsset, quoteToUse.amountIn);
+    }
+  }, [mode, stateSellAmount, quote, sellAsset]);
+
+  return sellAmount;
+};
diff --git a/apps/namadillo/src/App/Swap/hooks/useSwapValidation.tsx b/apps/namadillo/src/App/Swap/hooks/useSwapValidation.tsx
new file mode 100644
index 0000000000..4fdc80da09
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/hooks/useSwapValidation.tsx
@@ -0,0 +1,54 @@
+import BigNumber from "bignumber.js";
+import { useMemo } from "react";
+import { NamadaAsset } from "types";
+import { SwapState } from "../state";
+
+export const useSwapValidation = ({
+  mode,
+  sellAmount,
+  buyAmount,
+  buyAsset,
+  sellAsset,
+  availableAmountMinusFees,
+  walletAddress,
+}: {
+  mode: SwapState["mode"];
+  sellAmount?: BigNumber;
+  buyAmount?: BigNumber;
+  buyAsset?: NamadaAsset;
+  sellAsset?: NamadaAsset;
+  availableAmountMinusFees?: BigNumber;
+  walletAddress?: string;
+}): string => {
+  return useMemo(() => {
+    if (!sellAsset) {
+      return "NoSellAssetSelected";
+    } else if (!buyAsset) {
+      return "NoBuyAssetSelected";
+    } else if (mode === "none") {
+      return "SwapModeNone";
+    } else if (!sellAmount || sellAmount.isZero()) {
+      return "SellAmountIsZero";
+    } else if (!buyAmount || buyAmount.isZero()) {
+      return "BuyAmountIsZero";
+    } else if (
+      !availableAmountMinusFees ||
+      (sellAmount &&
+        availableAmountMinusFees &&
+        sellAmount.gt(availableAmountMinusFees))
+    ) {
+      return "SellAmountExceedsBalance";
+    } else if (!walletAddress) {
+      return "NoWalletConnected";
+    } else {
+      return "Ok";
+    }
+  }, [
+    sellAsset?.address,
+    buyAsset?.address,
+    mode,
+    sellAmount,
+    buyAmount,
+    walletAddress,
+  ]);
+};
diff --git a/apps/namadillo/src/App/Swap/state/atoms.ts b/apps/namadillo/src/App/Swap/state/atoms.ts
new file mode 100644
index 0000000000..93b1a9ddd1
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/state/atoms.ts
@@ -0,0 +1,223 @@
+//
+// Atoms for state shared across osmosis swap feature
+// If any of those are used outside of the swap feature, consider moving them up to a more global atoms file
+//
+import {
+  getChainRegistryByChainId,
+  getCorrespondingIbcAsset,
+  namadaRegistryChainAssetsMapAtom,
+} from "atoms/integrations";
+import BigNumber from "bignumber.js";
+import invariant from "invariant";
+import { atom, Setter } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+import { atomWithStorage } from "jotai/utils";
+import debounce from "lodash.debounce";
+import { SwapStorage } from "types";
+import { toBaseAmount } from "utils";
+import { fetchQuote, SLIPPAGE } from "./functions";
+import type { SwapState, SwapStatusType } from "./types";
+import { SwapStatus } from "./types";
+
+const swapStorageAtom = atomWithStorage<SwapStorage>(
+  "namadillo:swap",
+  {},
+  undefined,
+  { getOnInit: true }
+);
+
+const sellAssetAtom = atom(
+  (get) => {
+    const swapStorage = get(swapStorageAtom);
+    const chainAssetsMapAtom = get(namadaRegistryChainAssetsMapAtom);
+
+    const namadaAssets =
+      chainAssetsMapAtom.isSuccess ?
+        Object.values(chainAssetsMapAtom.data)
+      : [];
+
+    return namadaAssets.find(
+      (asset) => asset.symbol === swapStorage.assetSymbolSell
+    );
+  },
+  (_get, set, assetSymbolSell: string | undefined) => {
+    set(swapStorageAtom, (prev) => ({
+      ...prev,
+      assetSymbolSell,
+    }));
+  }
+);
+
+const buyAssetAtom = atom(
+  (get) => {
+    const swapStorage = get(swapStorageAtom);
+    const chainAssetsMapAtom = get(namadaRegistryChainAssetsMapAtom);
+
+    const namadaAssets =
+      chainAssetsMapAtom.isSuccess ?
+        Object.values(chainAssetsMapAtom.data)
+      : [];
+
+    return namadaAssets.find(
+      (asset) => asset.symbol === swapStorage.assetSymbolBuy
+    );
+  },
+  (_get, set, assetSymbolBuy: string | undefined) => {
+    set(swapStorageAtom, (prev) => ({
+      ...prev,
+      assetSymbolBuy,
+    }));
+  }
+);
+
+const defaultSwapState: SwapState = { mode: "none" };
+const baseSwapStateAtom = atom<SwapState>(defaultSwapState);
+
+export const internalSwapStateAtom = atom(
+  (get) => {
+    const sellAsset = get(sellAssetAtom);
+    const buyAsset = get(buyAssetAtom);
+    const baseState = get(baseSwapStateAtom);
+
+    return {
+      ...baseState,
+      sellAsset: baseState.sellAsset || sellAsset,
+      buyAsset: baseState.buyAsset || buyAsset,
+    };
+  },
+  (get, set, update: SwapState | ((prev: SwapState) => SwapState)) => {
+    set(baseSwapStateAtom, update);
+    const { sellAsset, buyAsset } = get(internalSwapStateAtom);
+
+    set(sellAssetAtom, sellAsset?.symbol);
+    set(buyAssetAtom, buyAsset?.symbol);
+  }
+);
+
+// We use debounced version of the swap state for fetching quotes to avoid excessive requests
+const debouncedSwapStateAtom = atom<SwapState>(defaultSwapState);
+
+const internalDebouncedSwapStateAtom = atom((get) => {
+  const sellAsset = get(sellAssetAtom);
+  const buyAsset = get(buyAssetAtom);
+  const baseState = get(debouncedSwapStateAtom);
+
+  return {
+    ...baseState,
+    sellAsset: baseState.sellAsset || sellAsset,
+    buyAsset: baseState.buyAsset || buyAsset,
+  };
+});
+
+const debouncedSet = debounce((set: Setter, value: SwapState) => {
+  set(debouncedSwapStateAtom, value);
+}, 300);
+
+export const swapStateAtom = atom(
+  (get) => get(internalSwapStateAtom),
+  (get, set, update: SwapState | ((prev: SwapState) => SwapState)) => {
+    set(internalSwapStateAtom, update);
+    const val = get(internalSwapStateAtom);
+    debouncedSet(set, val);
+  }
+);
+
+export const setInternalSwapStateAtom = atom(
+  null,
+  (_get, set, update: SwapState | ((prev: SwapState) => SwapState)) => {
+    set(internalSwapStateAtom, update);
+  }
+);
+
+export const swapStatusAtom = atom<SwapStatusType>(SwapStatus.idle());
+
+export const swapQuoteAtom = atomWithQuery((get) => {
+  const swapState = get(internalDebouncedSwapStateAtom);
+  const swapStatus = get(swapStatusAtom);
+  const { sellAsset, buyAsset } = swapState;
+
+  // TODO: this should be configurable once we support osmosis testnet
+  const osmosisAssets =
+    getChainRegistryByChainId("osmosis-1")?.assets.assets || [];
+
+  //We only want to refetch when sellAmount changes when selling, and buyAmount when buying
+  const sellKey =
+    swapState.mode === "sell" ?
+      `${swapState.sellAmount}-${swapState.sellAsset?.symbol}-${swapState.buyAsset?.symbol}`
+    : "sell";
+  const buyKey =
+    swapState.mode === "buy" ?
+      `${swapState.buyAmount}-${swapState.buyAsset?.symbol}-${swapState.sellAsset?.symbol}`
+    : "buy";
+
+  // We do not want to refetch during the actual swap process,
+  // to not confuse the user with changing quotes
+  const refetchOnStatus = ["Idle", "Review"].includes(swapStatus.t);
+
+  return {
+    enabled: Boolean(sellAsset && buyAsset),
+    // We are refetching every 5 seconds to keep the quote up to date,
+    // in case someone keeps the swap screen open for a long time
+    refetchInterval: refetchOnStatus && 5000,
+    queryKey: ["swapQuote", sellKey, buyKey],
+    queryFn: async () => {
+      // Sanity checks
+      invariant(sellAsset, "Sell asset not found");
+      invariant(buyAsset, "Buy asset not found");
+
+      const fromOsmosis = getCorrespondingIbcAsset(sellAsset, osmosisAssets);
+      const toOsmosis = getCorrespondingIbcAsset(buyAsset, osmosisAssets);
+
+      invariant(fromOsmosis, "From asset is not found in Osmosis assets");
+      invariant(toOsmosis, "To asset is not found in Osmosis assets");
+
+      // If amount is empty, we still want to get a quote for 1 unit of the asset
+      const baseAmount =
+        swapState.mode === "sell" ?
+          toBaseAmount(sellAsset, swapState.sellAmount!)
+        : swapState.mode === "buy" ?
+          toBaseAmount(buyAsset, swapState.buyAmount!)
+        : toBaseAmount(buyAsset, BigNumber(1));
+
+      const simulateSell =
+        swapState.mode === "sell" || swapState.mode === "none";
+
+      const params =
+        simulateSell ?
+          {
+            tokenIn: `${baseAmount}${fromOsmosis.base}`,
+            tokenOutDenom: toOsmosis.base,
+          }
+        : {
+            tokenOut: `${baseAmount}${toOsmosis.base}`,
+            tokenInDenom: fromOsmosis.base,
+          };
+
+      return await fetchQuote(params);
+    },
+  };
+});
+
+const internalSwapSlippageAtom = atom<{
+  default: BigNumber;
+  override: BigNumber | null;
+}>({ default: BigNumber(SLIPPAGE), override: null });
+
+export const swapSlippageAtom = atom(
+  (get) => get(internalSwapSlippageAtom),
+  (_get, set, slippage: BigNumber | null) => {
+    set(internalSwapSlippageAtom, (s) => ({
+      ...s,
+      override: slippage,
+    }));
+  }
+);
+
+export const swapMinAmountAtom = atom<BigNumber | undefined>((get) => {
+  const quote = get(swapQuoteAtom).data;
+  const slippage = get(swapSlippageAtom);
+  const slippageValue = slippage.override || slippage.default;
+
+  if (!quote) return;
+  return quote.amount.times(BigNumber(1).minus(slippageValue));
+});
diff --git a/apps/namadillo/src/App/Swap/state/functions.ts b/apps/namadillo/src/App/Swap/state/functions.ts
new file mode 100644
index 0000000000..a035a265e4
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/state/functions.ts
@@ -0,0 +1,105 @@
+import BigNumber from "bignumber.js";
+import { SwapQuote } from "./types";
+
+type SwapResponseCommonOk = {
+  route: Array<{
+    pools: Array<{
+      id: number;
+      type: number;
+      spread_factor: string;
+      token_out_denom: string;
+      taker_fee: string;
+    }>;
+    "has-cw-pool": boolean;
+    out_amount: string;
+    in_amount: string;
+  }>;
+  effective_fee: string;
+  price_impact: string;
+  in_base_out_quote_spot_price: string;
+};
+
+type SwapResponseSellOk = SwapResponseCommonOk & {
+  amount_in: {
+    denom: string;
+    amount: string;
+  };
+  amount_out: string;
+};
+type SwapResponseBuyOk = SwapResponseCommonOk & {
+  amount_in: string;
+  amount_out: {
+    denom: string;
+    amount: string;
+  };
+};
+
+type SwapResponseOk = SwapResponseSellOk | SwapResponseBuyOk;
+
+type SwapResponseError = {
+  message: string;
+};
+
+const isSwapResponseOk = (
+  response: SwapResponseOk | SwapResponseError
+): response is SwapResponseOk => {
+  return (response as SwapResponseOk).route !== undefined;
+};
+
+const isSwapResponseSellOk = (
+  response: SwapResponseOk | SwapResponseError
+): response is SwapResponseSellOk => {
+  return typeof (response as SwapResponseSellOk).amount_out === "string";
+};
+
+export const SLIPPAGE = 0.001;
+
+export type FetchQuoteParams =
+  | {
+      tokenIn: string;
+      tokenOutDenom: string;
+    }
+  | {
+      tokenOut: string;
+      tokenInDenom: string;
+    };
+
+export const fetchQuote = async (
+  params: FetchQuoteParams
+): Promise<SwapQuote> => {
+  const quote = await fetch(
+    "https://sqs.osmosis.zone/router/quote?" +
+      new URLSearchParams({
+        ...params,
+        humanDenoms: "false",
+      }).toString()
+  );
+  const data: SwapResponseOk | SwapResponseError = await quote.json();
+  if (isSwapResponseOk(data)) {
+    const amount = BigNumber(
+      isSwapResponseSellOk(data) ? data.amount_out : data.amount_in
+    );
+    const amountIn = BigNumber(
+      isSwapResponseSellOk(data) ? data.amount_in.amount : data.amount_in
+    );
+    const amountOut = BigNumber(
+      isSwapResponseSellOk(data) ? data.amount_out : data.amount_out.amount
+    );
+
+    return {
+      amountIn,
+      amountOut,
+      amount,
+      priceImpact: BigNumber(data.price_impact),
+      effectiveFee: BigNumber(data.effective_fee),
+      routes: data.route.map((hop) => ({
+        pools: hop.pools.map((pool) => ({
+          poolId: String(pool.id),
+          tokenOutDenom: pool.token_out_denom,
+        })),
+      })),
+    };
+  } else {
+    throw new Error(data.message);
+  }
+};
diff --git a/apps/namadillo/src/App/Swap/state/index.ts b/apps/namadillo/src/App/Swap/state/index.ts
new file mode 100644
index 0000000000..eea524d655
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/state/index.ts
@@ -0,0 +1 @@
+export * from "./types";
diff --git a/apps/namadillo/src/App/Swap/state/types.ts b/apps/namadillo/src/App/Swap/state/types.ts
new file mode 100644
index 0000000000..fee1529af4
--- /dev/null
+++ b/apps/namadillo/src/App/Swap/state/types.ts
@@ -0,0 +1,89 @@
+//
+// Local types specific to the swap feature, should not be used outside of it
+// If any of those are used outside of the swap feature, consider moving them up to a more global types file
+
+import BigNumber from "bignumber.js";
+import { NamadaAsset } from "types";
+
+export type SwapStatusType =
+  | { t: "Idle" }
+  | { t: "Review" }
+  | { t: "Building" }
+  | { t: "AwaitingSignature" }
+  | { t: "Broadcasting" }
+  | { t: "Confirming"; txHash: string }
+  | { t: "Completed" }
+  | { t: "Error"; message: string };
+
+export const SwapStatus = {
+  idle: (): SwapStatusType => ({ t: "Idle" }),
+  review: (): SwapStatusType => ({ t: "Review" }),
+  building: (): SwapStatusType => ({ t: "Building" }),
+  awaitingSignature: (): SwapStatusType => ({ t: "AwaitingSignature" }),
+  broadcasting: (): SwapStatusType => ({ t: "Broadcasting" }),
+  confirming: (txHash: string): SwapStatusType => ({ t: "Confirming", txHash }),
+  completed: (): SwapStatusType => ({ t: "Completed" }),
+  error: (message: string): SwapStatusType => ({ t: "Error", message }),
+};
+
+export const statusMessages: Record<
+  SwapStatusType["t"],
+  { title: string; description: string }
+> = {
+  Idle: {
+    title: "Ready to swap",
+    description: "Review the details and submit your swap.",
+  },
+  Review: {
+    title: "Reviewing transaction",
+    description: "Please review the transaction details before proceeding.",
+  },
+  Building: {
+    title: "Building transaction",
+    description:
+      "Your transaction is being built. This may take a few moments.",
+  },
+  AwaitingSignature: {
+    title: "Awaiting signature",
+    description: "Please sign the transaction in your wallet.",
+  },
+  Broadcasting: {
+    title: "Broadcasting transaction",
+    description: "Your transaction is being broadcast to the network.",
+  },
+  Confirming: {
+    title: "Confirming transaction",
+    description:
+      "Your transaction is being confirmed. This may take a few moments.",
+  },
+  Completed: {
+    title: "Swap completed",
+    description: "Your swap has been successfully completed.",
+  },
+  Error: {
+    title: "Transaction error",
+    description: "An error occurred during the transaction. Please try again.",
+  },
+};
+
+export type SwapState = {
+  mode: "sell" | "buy" | "none";
+  sellAmount?: BigNumber;
+  buyAmount?: BigNumber;
+  sellAsset?: NamadaAsset;
+  buyAsset?: NamadaAsset;
+};
+
+export type SwapQuote = {
+  amountIn: BigNumber;
+  amountOut: BigNumber;
+  amount: BigNumber;
+  effectiveFee: BigNumber;
+  priceImpact: BigNumber;
+  routes: {
+    pools: {
+      poolId: string;
+      tokenOutDenom: string;
+    }[];
+  }[];
+};
diff --git a/apps/namadillo/src/App/Transactions/LocalStorageTransactionCard.tsx b/apps/namadillo/src/App/Transactions/LocalStorageTransactionCard.tsx
index 597a5b0c62..73d859b33b 100644
--- a/apps/namadillo/src/App/Transactions/LocalStorageTransactionCard.tsx
+++ b/apps/namadillo/src/App/Transactions/LocalStorageTransactionCard.tsx
@@ -6,6 +6,7 @@ import { AssetImage } from "App/Transfer/AssetImage";
 import { isShieldedAddress, isTransparentAddress } from "App/Transfer/common";
 import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
 
+import { SwapTradeIcon } from "App/Icons/SwapTradeIcon";
 import { tokenPricesFamily } from "atoms/prices/atoms";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
@@ -16,7 +17,7 @@ import {
   IoCloseCircleOutline,
 } from "react-icons/io5";
 import { twMerge } from "tailwind-merge";
-import { TransferTransactionData } from "types";
+import { OsmosisSwapTransactionData, TransferTransactionData } from "types";
 import keplrSvg from "../../integrations/assets/keplr.svg";
 
 type TransactionCardProps = {
@@ -27,6 +28,7 @@ const getTitle = (transferTransaction: TransferTransactionData): string => {
   const { type } = transferTransaction;
   if (type === "IbcToShielded") return "IBC Shielding";
   if (type === "ShieldedToIbc") return "IBC Unshielding";
+  if (type === "ShieldedOsmosisSwap") return "Shielded Swap";
   return "";
 };
 
@@ -60,12 +62,14 @@ export const LocalStorageTransactionCard = ({
   const sender = transaction.sourceAddress;
   const receiver = transaction.destinationAddress;
   const transactionFailed = transaction.status === "error";
+  const isSwap = transaction.type === "ShieldedOsmosisSwap";
   return (
     <article
       className={clsx(
-        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 items-center my-1 font-semibold",
+        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 my-1 font-semibold",
         "gap-5 bg-neutral-800 rounded-sm px-5 py-5 text-white border border-transparent",
-        "transition-colors duration-200 hover:border-neutral-500"
+        "transition-colors duration-200 hover:border-neutral-500",
+        isSwap ? "items-start" : "items-center"
       )}
     >
       <div className="flex items-center gap-3">
@@ -115,23 +119,54 @@ export const LocalStorageTransactionCard = ({
         </div>
       </div>
 
-      <div className="flex items-center">
-        <div className="aspect-square w-10 h-10">
-          <AssetImage asset={transaction.asset} />
-        </div>
-        <div className="ml-2 flex flex-col">
-          <TokenCurrency
-            className="text-white"
-            amount={displayAmount}
-            symbol={transaction.asset.symbol}
-          />
-          {dollarAmount && (
-            <FiatCurrency
-              className="text-neutral-400 text-sm"
-              amount={dollarAmount}
+      <div className={isSwap ? "mt-1" : ""}>
+        <div className="flex items-center">
+          <div className="aspect-square w-10 h-10">
+            <AssetImage asset={transaction.asset} />
+          </div>
+          <div className="ml-2 flex flex-col">
+            <TokenCurrency
+              className="text-white"
+              amount={displayAmount}
+              symbol={transaction.asset.symbol}
             />
-          )}
+            {dollarAmount && !isSwap && (
+              <FiatCurrency
+                className="text-neutral-400 text-sm"
+                amount={dollarAmount}
+              />
+            )}
+          </div>
         </div>
+        {transaction.type === "ShieldedOsmosisSwap" && (
+          <>
+            <i className="flex w-15 my-2 ml-3">
+              <SwapTradeIcon color={"#FF0"} />
+            </i>
+            <div className="flex items-center">
+              <div className="aspect-square w-10 h-10">
+                <AssetImage
+                  asset={
+                    (transaction as OsmosisSwapTransactionData).targetAsset
+                  }
+                />
+              </div>
+              <div className="ml-2 flex flex-col">
+                <TokenCurrency
+                  className="text-white"
+                  amount={
+                    (transaction as OsmosisSwapTransactionData).minAmountOut
+                  }
+                  symbol={
+                    (transaction as OsmosisSwapTransactionData).targetAsset
+                      .symbol
+                  }
+                />
+                {/* dollar amount for target asset */}
+              </div>
+            </div>
+          </>
+        )}
       </div>
       <div className="flex flex-col">
         <h4 className="text-neutral-400">From</h4>
@@ -139,7 +174,8 @@ export const LocalStorageTransactionCard = ({
           className={
             (
               isShieldedAddress(sender ?? "") ||
-              transaction.type === "ShieldedToIbc"
+              transaction.type === "ShieldedToIbc" ||
+              transaction.type === "ShieldedOsmosisSwap"
             ) ?
               "text-yellow"
             : ""
@@ -147,7 +183,8 @@ export const LocalStorageTransactionCard = ({
         >
           {(
             isShieldedAddress(sender ?? "") ||
-            transaction.type === "ShieldedToIbc"
+            transaction.type === "ShieldedToIbc" ||
+            transaction.type === "ShieldedOsmosisSwap"
           ) ?
             <span className="flex items-center gap-1">
               <FaLock className="w-4 h-4" /> Shielded
diff --git a/apps/namadillo/src/App/Transactions/TransactionHistory.tsx b/apps/namadillo/src/App/Transactions/TransactionHistory.tsx
index 3e40c12b0c..4de406b64f 100644
--- a/apps/namadillo/src/App/Transactions/TransactionHistory.tsx
+++ b/apps/namadillo/src/App/Transactions/TransactionHistory.tsx
@@ -65,7 +65,11 @@ export const TransactionHistory = (): JSX.Element => {
 
   const completedIbcShieldTransactions = completedIbcTransactions
     .filter((transaction) => {
-      const acceptedTypes = ["IbcToShielded", "ShieldedToIbc"];
+      const acceptedTypes = [
+        "IbcToShielded",
+        "ShieldedToIbc",
+        "ShieldedOsmosisSwap",
+      ];
       const isAcceptedType = acceptedTypes.includes(transaction.type);
       const isAcceptedChain =
         transaction.destinationChainId === chainId ||
diff --git a/apps/namadillo/src/App/Transfer/SuccessAnimation.tsx b/apps/namadillo/src/App/Transfer/SuccessAnimation.tsx
index 35d539c831..e39dcdbbb8 100644
--- a/apps/namadillo/src/App/Transfer/SuccessAnimation.tsx
+++ b/apps/namadillo/src/App/Transfer/SuccessAnimation.tsx
@@ -1,11 +1,11 @@
 import anime from "animejs";
+import { TokenAmountCard } from "App/Common/TokenAmountCard";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { useScope } from "hooks/useScope";
 import { useRef } from "react";
 import { FaCheckCircle } from "react-icons/fa";
 import { Asset } from "types";
-import { TokenAmountCard } from "./TokenAmountCard";
 
 type SuccessAnimationProps = {
   amount: BigNumber;
diff --git a/apps/namadillo/src/App/Transfer/TransferDestination.tsx b/apps/namadillo/src/App/Transfer/TransferDestination.tsx
index b6e04bea1f..650ef53623 100644
--- a/apps/namadillo/src/App/Transfer/TransferDestination.tsx
+++ b/apps/namadillo/src/App/Transfer/TransferDestination.tsx
@@ -2,6 +2,8 @@ import { Asset } from "@chain-registry/types";
 import { Stack } from "@namada/components";
 import { AccountType } from "@namada/types";
 import { shortenAddress } from "@namada/utils";
+import { ConnectProviderButton } from "App/Common/ConnectProviderButton";
+import { TokenAmountCard } from "App/Common/TokenAmountCard";
 import { TransactionFee } from "App/Common/TransactionFee";
 import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import { routes } from "App/routes";
@@ -26,12 +28,10 @@ import { Address } from "types";
 import namadaShieldedIcon from "./assets/namada-shielded.svg";
 import namadaTransparentIcon from "./assets/namada-transparent.svg";
 import shieldedEye from "./assets/shielded-eye.svg";
-import { ConnectProviderButton } from "./ConnectProviderButton";
 import { CustomAddressForm } from "./CustomAddressForm";
 import { DestinationAddressModal } from "./DestinationAddressModal";
 import { SelectedWallet } from "./SelectedWallet";
 import { ShieldedPropertiesTooltip } from "./ShieldedPropertiesTooltip";
-import { TokenAmountCard } from "./TokenAmountCard";
 
 type TransferDestinationProps = {
   isShieldedAddress?: boolean;
diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx
index 4004506ce9..05ddaf2236 100644
--- a/apps/namadillo/src/App/Transfer/TransferModule.tsx
+++ b/apps/namadillo/src/App/Transfer/TransferModule.tsx
@@ -1,4 +1,5 @@
 import { ActionButton, Stack } from "@namada/components";
+import { CurrentStatus } from "App/Common/CurrentStatus";
 import { IconTooltip } from "App/Common/IconTooltip";
 import { InlineError } from "App/Common/InlineError";
 import { params, routes } from "App/routes";
@@ -24,7 +25,6 @@ import { AssetWithAmountAndChain } from "types";
 import { filterAvailableAssetsWithBalance } from "utils/assets";
 import { getDisplayGasFee } from "utils/gas";
 import { isIbcAddress, isShieldedAddress } from "./common";
-import { CurrentStatus } from "./CurrentStatus";
 import { IbcChannels } from "./IbcChannels";
 import { SelectToken } from "./SelectToken";
 import { SuccessAnimation } from "./SuccessAnimation";
diff --git a/apps/namadillo/src/App/Transfer/TransferSource.tsx b/apps/namadillo/src/App/Transfer/TransferSource.tsx
index 1e5ef1ce77..03e78a7413 100644
--- a/apps/namadillo/src/App/Transfer/TransferSource.tsx
+++ b/apps/namadillo/src/App/Transfer/TransferSource.tsx
@@ -1,18 +1,19 @@
 import { Asset } from "@chain-registry/types";
 import { AmountInput, Tooltip } from "@namada/components";
 import { copyToClipboard, shortenAddress } from "@namada/utils";
+import { AvailableAmountFooter } from "App/Common/AvailableAmountFooter";
+import { SelectedAsset } from "App/Common/SelectedAsset";
+import { TokenAmountCard } from "App/Common/TokenAmountCard";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { wallets } from "integrations";
 import { useState } from "react";
 import { GoCheck } from "react-icons/go";
 import { Address } from "types";
+import { amountMaxDecimalPlaces } from "utils/assets";
 import namadaShieldedIcon from "./assets/namada-shielded.svg";
 import namadaTransparentIcon from "./assets/namada-transparent.svg";
-import { AvailableAmountFooter } from "./AvailableAmountFooter";
 import { isShieldedAddress, isTransparentAddress } from "./common";
-import { SelectedAsset } from "./SelectedAsset";
-import { TokenAmountCard } from "./TokenAmountCard";
 
 export type TransferSourceProps = {
   isLoadingAssets?: boolean;
@@ -30,17 +31,6 @@ export type TransferSourceProps = {
   onChangeAmount?: (amount: BigNumber | undefined) => void;
 };
 
-const amountMaxDecimalPlaces = (asset?: Asset): number | undefined => {
-  if (typeof asset !== "undefined") {
-    for (const { denom, exponent } of asset.denom_units) {
-      if (denom === asset.display) {
-        return exponent;
-      }
-    }
-  }
-  return undefined;
-};
-
 const getWalletIcon = (
   sourceAddress?: string,
   selectedTokenType?: "shielded" | "transparent" | "keplr"
diff --git a/apps/namadillo/src/App/Transfer/__tests__/AssetImage.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/AssetImage.test.tsx
index e6218ff38e..264cc3ffef 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/AssetImage.test.tsx
+++ b/apps/namadillo/src/App/Transfer/__tests__/AssetImage.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { AssetImage } from "App/Transfer/AssetImage";
 
 import { Asset } from "types";
-import { assetMock, assetWithoutLogo } from "../__mocks__/assets";
+import { assetMock, assetWithoutLogo } from "../../Common/__mocks__/assets";
 
 jest.mock("integrations/utils", () => ({
   getAssetImageUrl: jest.fn((asset: Asset) =>
diff --git a/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx
new file mode 100644
index 0000000000..38aab529d7
--- /dev/null
+++ b/apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx
@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { assetMock } from "App/Common/__mocks__/assets";
+import { AvailableAmountFooter } from "App/Common/AvailableAmountFooter";
+import BigNumber from "bignumber.js";
+import { Asset } from "types";
+
+describe("Component: AvailableAmountFooter", () => {
+  it("should render an empty tag when no available amount is provided", () => {
+    const { container } = render(<AvailableAmountFooter />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should render with correct information and behaviour enabled", () => {
+    const callback = jest.fn();
+    render(
+      <AvailableAmountFooter
+        availableAmountMinusFees={new BigNumber(1234.456)}
+        asset={assetMock as Asset}
+        onClickMax={callback}
+      />
+    );
+    const amount = screen.getByText("1,234");
+    expect(amount.parentNode?.textContent).toContain("1,234.456 ETH");
+    fireEvent.click(amount.parentNode!);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not display MAX button when no callback was provided", () => {
+    render(
+      <AvailableAmountFooter
+        availableAmountMinusFees={new BigNumber(100)}
+        asset={assetMock as Asset}
+      />
+    );
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should display the balance and the disabled button when the amount is zero", () => {
+    const callback = jest.fn();
+    render(
+      <AvailableAmountFooter
+        availableAmount={new BigNumber(123)}
+        availableAmountMinusFees={new BigNumber(0)}
+        asset={assetMock as Asset}
+        onClickMax={callback}
+      />
+    );
+    const amount = screen.getByText("123");
+    fireEvent.click(amount.parentNode!);
+    expect(callback).toHaveBeenCalled();
+    const warning = screen.getByText("Insufficient balance to cover the fee");
+    expect(warning).toBeVisible();
+    const balance = screen.getByText("123 ETH");
+    expect(balance).toBeVisible();
+  });
+});
diff --git a/apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx
index 327f4abe37..d78a6197c5 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx
+++ b/apps/namadillo/src/App/Transfer/__tests__/ChainCard.test.tsx
@@ -1,7 +1,7 @@
 import { Chain } from "@chain-registry/types";
 import { render, screen } from "@testing-library/react";
+import { randomChainMock } from "App/Common/__mocks__/chains";
 import { ChainCard } from "App/Transfer/ChainCard";
-import { randomChainMock } from "../__mocks__/chains";
 
 describe("Component: ChainCard", () => {
   it("renders the chain's name", () => {
diff --git a/apps/namadillo/src/App/Transfer/__tests__/SelectChainModal.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/SelectChainModal.test.tsx
new file mode 100644
index 0000000000..23f3a0c3ff
--- /dev/null
+++ b/apps/namadillo/src/App/Transfer/__tests__/SelectChainModal.test.tsx
@@ -0,0 +1,72 @@
+import { Chain } from "@chain-registry/types";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { namadaChainMock, randomChainMock } from "App/Common/__mocks__/chains";
+import { walletMock } from "App/Common/__mocks__/providers";
+import { SelectChainModal } from "App/Transfer/SelectChainModal";
+
+describe("Component: SelectChainModal", () => {
+  const mockChains = [randomChainMock, namadaChainMock];
+  const mockAddress = "cosmos1xnu3p06fkke8hnl7t83hzhggrca59syf0wjqgh";
+
+  it("should render component and list of chains correctly", () => {
+    render(
+      <SelectChainModal
+        chains={mockChains as Chain[]}
+        onClose={jest.fn()}
+        onSelect={jest.fn()}
+        wallet={walletMock}
+        walletAddress={mockAddress}
+      />
+    );
+    expect(screen.getByText("Namada")).toBeInTheDocument();
+    expect(screen.getByText("TestChain")).toBeInTheDocument();
+
+    // Truncated wallet address
+    expect(
+      screen.getByText("cosmos1x...yf0wjqgh", {
+        exact: false,
+      })
+    ).toBeInTheDocument();
+
+    // Check for modal title
+    expect(screen.getByText("Select Source Chain")).toBeInTheDocument();
+
+    // Check if all chains are rendered
+    mockChains.forEach((chain) => {
+      expect(screen.getByText(chain.pretty_name!)).toBeInTheDocument();
+      expect(
+        screen.getByAltText(`${chain.pretty_name} logo`)
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("should select the correct chain on click", () => {
+    const handleSelect = jest.fn();
+    render(
+      <SelectChainModal
+        onClose={jest.fn()}
+        onSelect={handleSelect}
+        chains={mockChains as Chain[]}
+        wallet={walletMock}
+        walletAddress={mockAddress}
+      />
+    );
+    fireEvent.click(screen.getByText(mockChains[0].pretty_name!));
+    expect(handleSelect).toHaveBeenCalledWith(mockChains[0]);
+  });
+
+  it("should display warning message if no chains were provided", () => {
+    const handleSelect = jest.fn();
+    render(
+      <SelectChainModal
+        onClose={jest.fn()}
+        onSelect={handleSelect}
+        chains={[]}
+        wallet={walletMock}
+        walletAddress={mockAddress}
+      />
+    );
+    expect(screen.getByText(/no available chains/i, { exact: false }))
+      .toBeInTheDocument;
+  });
+});
diff --git a/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx
index 173a929273..1d92c4d018 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx
+++ b/apps/namadillo/src/App/Transfer/__tests__/SelectedAsset.test.tsx
@@ -1,8 +1,8 @@
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { SelectedAsset } from "App/Transfer/SelectedAsset"; // Adjust the path accordingly
+import { assetMock } from "App/Common/__mocks__/assets";
+import { SelectedAsset } from "App/Common/SelectedAsset"; // Adjust the path accordingly
 import { Asset } from "types";
-import { assetMock } from "../__mocks__/assets";
 
 describe("SelectedAsset", () => {
   it("renders disabled", () => {
diff --git a/apps/namadillo/src/App/Transfer/__tests__/SelectedChain.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/SelectedChain.test.tsx
index d00eae5cf0..259fb14ff0 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/SelectedChain.test.tsx
+++ b/apps/namadillo/src/App/Transfer/__tests__/SelectedChain.test.tsx
@@ -1,9 +1,9 @@
 import { Chain } from "@chain-registry/types";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
+import { randomChainMock } from "App/Common/__mocks__/chains";
+import { walletMock } from "App/Common/__mocks__/providers";
 import { SelectedChain } from "App/Transfer/SelectedChain";
-import { randomChainMock } from "../__mocks__/chains";
-import { walletMock } from "../__mocks__/providers";
 
 describe("Component: SelectedChain", () => {
   it("renders disabled with no provider selected", () => {
diff --git a/apps/namadillo/src/App/Transfer/__tests__/SelectedWallet.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/SelectedWallet.test.tsx
index 9dfa18b183..005cd53263 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/SelectedWallet.test.tsx
+++ b/apps/namadillo/src/App/Transfer/__tests__/SelectedWallet.test.tsx
@@ -1,4 +1,3 @@
-import { walletMock } from "../__mocks__/providers";
 const testWalletAddress = "0x1234567890abcdefghijkl";
 const mockIntegration = {
   detect: jest.fn(),
@@ -17,6 +16,7 @@ const mockIntegration = {
 
 import { shortenAddress } from "@namada/utils";
 import { act, fireEvent, render, screen } from "@testing-library/react";
+import { walletMock } from "App/Common/__mocks__/providers";
 import { SelectedWallet } from "App/Transfer/SelectedWallet";
 
 describe("Component: SelectedWallet", () => {
diff --git a/apps/namadillo/src/App/Transfer/common.ts b/apps/namadillo/src/App/Transfer/common.ts
index ff9e0cd8a6..9cc3e30139 100644
--- a/apps/namadillo/src/App/Transfer/common.ts
+++ b/apps/namadillo/src/App/Transfer/common.ts
@@ -1,5 +1,5 @@
 import { Chain } from "@chain-registry/types";
-import { getChainRegistryByChainId } from "atoms/integrations";
+import { getChainRegistryByChainId } from "atoms/integrations/functions";
 import { getChainFromAddress } from "integrations/utils";
 import namadaShieldedSvg from "./assets/namada-shielded.svg";
 import namadaTransparentSvg from "./assets/namada-transparent.svg";
diff --git a/apps/namadillo/src/App/Transfer/index.ts b/apps/namadillo/src/App/Transfer/index.ts
index c6c54a7ca2..40c2ebf25b 100644
--- a/apps/namadillo/src/App/Transfer/index.ts
+++ b/apps/namadillo/src/App/Transfer/index.ts
@@ -1,31 +1,24 @@
 export { AddressDropdown } from "./AddressDropdown";
 export { AssetImage } from "./AssetImage";
-export { AvailableAmountFooter } from "./AvailableAmountFooter";
 export { ChainCard } from "./ChainCard";
 export { ConnectedWalletInfo } from "./ConnectedWalletInfo";
-export { ConnectProviderButton } from "./ConnectProviderButton";
-export { CurrentStatus } from "./CurrentStatus";
 export { CustomAddressForm } from "./CustomAddressForm";
 export { DestinationAddressModal } from "./DestinationAddressModal";
 export { EmptyResourceIcon } from "./EmptyResourceIcon";
 export { IbcChannels } from "./IbcChannels";
 export { ReceiveCard } from "./ReceiveCard";
 export { SelectChainModal } from "./SelectChainModal";
-export { SelectedAsset } from "./SelectedAsset";
 export { SelectedChain } from "./SelectedChain";
 export { SelectedWallet } from "./SelectedWallet";
 export { SelectToken } from "./SelectToken";
-export { SelectWalletModal } from "./SelectWalletModal";
 export { ShieldedPropertiesTooltip } from "./ShieldedPropertiesTooltip";
 export { ShieldLayout } from "./ShieldLayout";
 export { SuccessAnimation } from "./SuccessAnimation";
-export { TokenAmountCard } from "./TokenAmountCard";
 export { TransferArrow } from "./TransferArrow";
 export { TransferDestination } from "./TransferDestination";
 export { TransferLayout } from "./TransferLayout";
 export { TransferModule } from "./TransferModule";
 export { TransferSource } from "./TransferSource";
-export { WalletCard } from "./WalletCard";
 
 // Export types
 export * from "./common";
diff --git a/apps/namadillo/src/App/routes.ts b/apps/namadillo/src/App/routes.ts
index d7b680f9be..1a6efb1048 100644
--- a/apps/namadillo/src/App/routes.ts
+++ b/apps/namadillo/src/App/routes.ts
@@ -33,6 +33,9 @@ export const routes = {
   transaction: "/transaction/:hash",
   receive: "/receive",
 
+  // Swap
+  swap: "/swap",
+
   // Settings
   settings: "/settings",
   settingsAdvanced: "/settings/advanced",
diff --git a/apps/namadillo/src/atoms/accounts/atoms.ts b/apps/namadillo/src/atoms/accounts/atoms.ts
index 3255dff771..5dfe73c283 100644
--- a/apps/namadillo/src/atoms/accounts/atoms.ts
+++ b/apps/namadillo/src/atoms/accounts/atoms.ts
@@ -77,6 +77,13 @@ export const allDefaultAccountsAtom = atomWithQuery<NamadaKeychainAccount[]>(
   }
 );
 
+export const defaultShieldedAccountAtom = atom((get) => {
+  const defaultAccounts = get(allDefaultAccountsAtom);
+  return defaultAccounts.data?.find(
+    (account) => account.type === AccountType.ShieldedKeys
+  );
+});
+
 export const isLedgerAccountAtom = atom((get) => {
   const defaultAccounts = get(allDefaultAccountsAtom);
   return Boolean(
diff --git a/apps/namadillo/src/atoms/balance/atoms.ts b/apps/namadillo/src/atoms/balance/atoms.ts
index 4d059005f5..9fc01400a2 100644
--- a/apps/namadillo/src/atoms/balance/atoms.ts
+++ b/apps/namadillo/src/atoms/balance/atoms.ts
@@ -14,7 +14,10 @@ import {
   nativeTokenAddressAtom,
 } from "atoms/chain";
 import { shouldUpdateBalanceAtom } from "atoms/etc";
-import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
+import {
+  namadaRegistryChainAssetsAtom,
+  namadaRegistryChainAssetsMapAtom,
+} from "atoms/integrations";
 import { tokenPricesFamily } from "atoms/prices/atoms";
 import { maspIndexerUrlAtom, rpcUrlAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
@@ -26,7 +29,7 @@ import invariant from "invariant";
 import { atom, getDefaultStore } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 import { atomWithStorage } from "jotai/utils";
-import { Address, TokenBalance } from "types";
+import { Address, NamadaAsset, TokenBalance } from "types";
 import { namadaAsset, toDisplayAmount } from "utils";
 import { isError404 } from "utils/http";
 import {
@@ -272,6 +275,26 @@ export const shieldedTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
   };
 });
 
+// Namada assets sorted by assets with balance first
+export const namadaAssetsSortedAtom = atom<NamadaAsset[]>((get) => {
+  const assets = get(namadaRegistryChainAssetsAtom);
+  const { data: assetsWithBalance } = get(namadaShieldedAssetsAtom);
+
+  // We want assets with balance to be on top of the list
+  const sortedAssets = assets.sort((assetA, assetB) => {
+    const assetWithBalanceA = assetsWithBalance?.[assetA.address];
+    const assetWithBalanceB = assetsWithBalance?.[assetB.address];
+
+    return (
+      assetWithBalanceA && !assetWithBalanceB ? -1
+      : !assetWithBalanceA && assetWithBalanceB ? 1
+      : 0
+    );
+  });
+
+  return sortedAssets;
+});
+
 export const shieldedRewardsPerTokenAtom = atomWithQuery((get) => {
   const shieldedAssets = get(namadaShieldedAssetsAtom);
   const chainParametersQuery = get(chainParametersAtom);
diff --git a/apps/namadillo/src/atoms/integrations/atoms.ts b/apps/namadillo/src/atoms/integrations/atoms.ts
index e64ea03afc..f6f60c51f5 100644
--- a/apps/namadillo/src/atoms/integrations/atoms.ts
+++ b/apps/namadillo/src/atoms/integrations/atoms.ts
@@ -7,6 +7,7 @@ import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
 import { TxRaw } from "cosmjs-types/cosmos/tx/v1beta1/tx";
 import invariant from "invariant";
+import { atom } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
 import { atomFamily, atomWithStorage } from "jotai/utils";
 import {
@@ -16,6 +17,7 @@ import {
   BaseDenom,
   Coin,
   IbcChannels,
+  NamadaAsset,
   RpcStorage,
 } from "types";
 import { toDisplayAmount } from "utils";
@@ -345,3 +347,9 @@ export const allChainsAtom = atomWithQuery<Chain[]>((get) => {
     }, [chainSettings]),
   };
 });
+
+export const namadaRegistryChainAssetsAtom = atom<NamadaAsset[]>((get) => {
+  const { data: chainAssetsMap } = get(namadaRegistryChainAssetsMapAtom);
+
+  return chainAssetsMap ? Object.values(chainAssetsMap) : [];
+});
diff --git a/apps/namadillo/src/atoms/integrations/functions.ts b/apps/namadillo/src/atoms/integrations/functions.ts
index 218652e348..c098de73b5 100644
--- a/apps/namadillo/src/atoms/integrations/functions.ts
+++ b/apps/namadillo/src/atoms/integrations/functions.ts
@@ -266,3 +266,26 @@ export const getNamadaIbcInfo = (isHousefire: boolean): IBCInfo[] => {
 
   return ibcInfo;
 };
+
+export const getCounterpartyChainName = (asset: Asset): string | undefined => {
+  const chainName = asset.traces?.find((trace) => trace.type === "ibc")
+    ?.counterparty.chain_name;
+
+  return chainName;
+};
+
+export const getCorrespondingIbcAsset = (
+  asset: NamadaAsset,
+  ibcAssets: Asset[]
+): Asset | undefined => {
+  const assets = ibcAssets.filter((assets) => assets.symbol === asset.symbol);
+
+  if (assets.length === 1) {
+    return assets[0];
+  } else {
+    const chainName = getCounterpartyChainName(asset);
+    return assets.find(
+      (ibcAsset) => getCounterpartyChainName(ibcAsset) === chainName
+    );
+  }
+};
diff --git a/apps/namadillo/src/atoms/integrations/services.ts b/apps/namadillo/src/atoms/integrations/services.ts
index b96ae8188f..bc235bd896 100644
--- a/apps/namadillo/src/atoms/integrations/services.ts
+++ b/apps/namadillo/src/atoms/integrations/services.ts
@@ -411,6 +411,8 @@ export const transactionTypeToEventName = (
     case "IbcToShielded":
     case "IbcToTransparent":
       return "IbcTransfer";
+    case "ShieldedOsmosisSwap":
+      return "ShieldedOsmosisSwap";
   }
 };
 
diff --git a/apps/namadillo/src/atoms/notifications/functions.ts b/apps/namadillo/src/atoms/notifications/functions.ts
index cd1c8164e3..59198ac6b8 100644
--- a/apps/namadillo/src/atoms/notifications/functions.ts
+++ b/apps/namadillo/src/atoms/notifications/functions.ts
@@ -1,8 +1,17 @@
 export const notificationIdSeparator = ";";
 import { TxProps } from "@namada/types";
+import { TransactionPair } from "lib/query";
 
 export const createNotificationId = (data?: TxProps["hash"][]): string => {
   if (!data) return Date.now().toString();
   if (Array.isArray(data)) return data.join(notificationIdSeparator);
   return data;
 };
+
+export const getNotificationId = <T>(tx: TransactionPair<T>): string => {
+  const notificationId = createNotificationId(
+    tx.encodedTxData.txs.map((tx) => tx.hash)
+  );
+
+  return notificationId;
+};
diff --git a/apps/namadillo/src/atoms/transfer/atoms.ts b/apps/namadillo/src/atoms/transfer/atoms.ts
index 69aeb5c46a..ba5162b5a8 100644
--- a/apps/namadillo/src/atoms/transfer/atoms.ts
+++ b/apps/namadillo/src/atoms/transfer/atoms.ts
@@ -1,6 +1,7 @@
 import {
   DatedViewingKey,
   IbcTransferProps,
+  OsmosisSwapProps,
   ShieldedTransferProps,
   ShieldingTransferProps,
   TransparentTransferProps,
@@ -22,6 +23,7 @@ import { atomWithMutation } from "jotai-tanstack-query";
 import { BuildTxAtomParams } from "types";
 import {
   createIbcTx,
+  createOsmosisSwapTx,
   createShieldedTransferTx,
   createShieldingTransferTx,
   createTransparentTransferTx,
@@ -239,3 +241,38 @@ export const createIbcTxAtom = atomWithMutation((get) => {
     },
   };
 });
+
+export const createOsmosisSwapTxAtom = atomWithMutation((get) => {
+  const account = get(defaultAccountAtom);
+  const chain = get(chainAtom);
+  const rpcUrl = get(rpcUrlAtom);
+
+  return {
+    enabled: account.isSuccess && chain.isSuccess,
+    mutationKey: ["create-osmosis-swap-tx"],
+    mutationFn: async ({
+      params,
+      gasConfig,
+      account,
+      signer,
+      memo,
+    }: BuildTxAtomParams<OsmosisSwapProps>) => {
+      invariant(
+        signer,
+        "We always expect signer to be passed explicitly, because we might also need to unshield"
+      );
+      invariant(account, "No account");
+      invariant(params.length !== 0, "No params");
+
+      return await createOsmosisSwapTx(
+        chain.data!,
+        account,
+        params,
+        gasConfig,
+        rpcUrl,
+        signer,
+        memo
+      );
+    },
+  };
+});
diff --git a/apps/namadillo/src/atoms/transfer/services.ts b/apps/namadillo/src/atoms/transfer/services.ts
index 51777c7aa3..9e7ba4e91f 100644
--- a/apps/namadillo/src/atoms/transfer/services.ts
+++ b/apps/namadillo/src/atoms/transfer/services.ts
@@ -1,6 +1,7 @@
 import {
   BparamsMsgValue,
   IbcTransferProps,
+  OsmosisSwapProps,
   ShieldedTransferProps,
   ShieldingTransferProps,
   TransparentTransferProps,
@@ -20,6 +21,7 @@ import { Address, ChainSettings, GasConfig } from "types";
 import { getSdkInstance } from "utils/sdk";
 import {
   IbcTransfer,
+  OsmosisSwap,
   Shield,
   ShieldedTransfer,
   Unshield,
@@ -316,3 +318,54 @@ export const createIbcTx = async (
     },
   });
 };
+
+export const createOsmosisSwapTx = async (
+  chain: ChainSettings,
+  account: Account,
+  props: OsmosisSwapProps[],
+  gasConfig: GasConfig,
+  rpcUrl: string,
+  disposableSigner: GenDisposableSignerResponse,
+  memo?: string
+): Promise<EncodedTxData<OsmosisSwapProps>> => {
+  const { publicKey: signerPublicKey } = disposableSigner;
+
+  let bparams: BparamsMsgValue[] | undefined;
+  if (account.type === AccountType.Ledger) {
+    const sdk = await getSdkInstance();
+    const ledger = await sdk.initLedger();
+    bparams = await ledger.getBparams();
+    ledger.closeTransport();
+  }
+  const { transfer } = props[0];
+
+  return await workerBuildTxPair({
+    rpcUrl,
+    nativeToken: chain.nativeTokenAddress,
+    buildTxFn: async (workerLink) => {
+      const msgValue: OsmosisSwapProps = {
+        ...props[0],
+        transfer: {
+          ...transfer,
+          gasSpendingKey: transfer.gasSpendingKey,
+          bparams,
+        },
+      };
+      const msg: OsmosisSwap = {
+        type: "osmosis-swap",
+        payload: {
+          account: {
+            ...account,
+            publicKey: signerPublicKey,
+          },
+          gasConfig,
+          props: [msgValue],
+          chain,
+          memo,
+        },
+      };
+
+      return (await workerLink.osmosisSwap(msg)).payload;
+    },
+  });
+};
diff --git a/apps/namadillo/src/hooks/useAvailableAmountMinusFee/index.ts b/apps/namadillo/src/hooks/useAvailableAmountMinusFee/index.ts
new file mode 100644
index 0000000000..16520c19c6
--- /dev/null
+++ b/apps/namadillo/src/hooks/useAvailableAmountMinusFee/index.ts
@@ -0,0 +1 @@
+export * from "./useAvailableAmountMinusFee";
diff --git a/apps/namadillo/src/hooks/useAvailableAmountMinusFee/useAvailableAmountMinusFee.ts b/apps/namadillo/src/hooks/useAvailableAmountMinusFee/useAvailableAmountMinusFee.ts
new file mode 100644
index 0000000000..9cf8968bbc
--- /dev/null
+++ b/apps/namadillo/src/hooks/useAvailableAmountMinusFee/useAvailableAmountMinusFee.ts
@@ -0,0 +1,33 @@
+import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
+import BigNumber from "bignumber.js";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { GasConfig } from "types";
+import { getDisplayGasFee } from "utils/gas";
+
+export const useAvailableAmountMinusFees = (
+  gasConfig: GasConfig,
+  address?: string,
+  availableAmount?: BigNumber
+): BigNumber | undefined => {
+  const { data: chainAssetsMap } = useAtomValue(
+    namadaRegistryChainAssetsMapAtom
+  );
+
+  return useMemo(() => {
+    if (
+      !availableAmount ||
+      // Don't subtract if the gas token is different than the selected asset:
+      gasConfig.gasToken !== address
+    ) {
+      return availableAmount;
+    }
+    const displayGasFee = getDisplayGasFee(gasConfig, chainAssetsMap || {});
+
+    const amountMinusFees = availableAmount
+      .minus(displayGasFee.totalDisplayAmount)
+      .decimalPlaces(6);
+
+    return BigNumber.max(amountMinusFees, 0);
+  }, [address, availableAmount?.toString()]);
+};
diff --git a/apps/namadillo/src/hooks/useTransaction.tsx b/apps/namadillo/src/hooks/useTransaction.tsx
index 5387d590fa..ca9409c950 100644
--- a/apps/namadillo/src/hooks/useTransaction.tsx
+++ b/apps/namadillo/src/hooks/useTransaction.tsx
@@ -1,8 +1,8 @@
 import { useMutation, UseMutationResult } from "@tanstack/react-query";
 import { defaultAccountAtom } from "atoms/accounts";
 import {
-  createNotificationId,
   dispatchToastNotificationAtom,
+  getNotificationId,
 } from "atoms/notifications";
 import { getDisposableSigner } from "atoms/transfer/services";
 import invariant from "invariant";
@@ -15,6 +15,7 @@ import {
   TransactionPair,
 } from "lib/query";
 import { BuildTxAtomParams, ToastNotification } from "types";
+import { TransactionError } from "types/errors";
 import { TransactionEventTypes } from "types/events";
 import { TransactionFeeProps, useTransactionFee } from "./useTransactionFee";
 
@@ -61,14 +62,6 @@ export type UseTransactionOutput<T> = {
   unknown
 >;
 
-const getNotificationId = <T,>(tx: TransactionPair<T>): string => {
-  const notificationId = createNotificationId(
-    tx.encodedTxData.txs.map((tx) => tx.hash)
-  );
-
-  return notificationId;
-};
-
 export const useTransaction = <T,>({
   params,
   createTxAtom,
@@ -133,19 +126,6 @@ export const useTransaction = <T,>({
     });
   };
 
-  class TransactionError<T> extends Error {
-    public cause: { originalError: unknown; context: TransactionPair<T> };
-    constructor(
-      public message: string,
-      options: {
-        cause: { originalError: unknown; context: TransactionPair<T> };
-      }
-    ) {
-      super(message);
-      this.cause = options.cause;
-    }
-  }
-
   const transactionQuery = useMutation({
     mutationFn: async (
       additionalParams: Partial<BuildTxAtomParams<T>> = {}
diff --git a/apps/namadillo/src/hooks/useTransactionCallbacks.tsx b/apps/namadillo/src/hooks/useTransactionCallbacks.tsx
index 2e8b201333..c0f2990ca4 100644
--- a/apps/namadillo/src/hooks/useTransactionCallbacks.tsx
+++ b/apps/namadillo/src/hooks/useTransactionCallbacks.tsx
@@ -73,6 +73,7 @@ export const useTransactionCallback = (): void => {
   useTransactionEventListener("IbcTransfer.Success", onTransferSuccess);
   useTransactionEventListener("IbcWithdraw.Success", onTransferSuccess);
   useTransactionEventListener("ShieldedIbcWithdraw.Success", onTransferSuccess);
+  useTransactionEventListener("ShieldedOsmosisSwap.Success", onTransferSuccess);
 
   useTransactionEventListener("TransparentTransfer.Error", onTransferError);
   useTransactionEventListener("ShieldedTransfer.Error", onTransferError);
@@ -81,4 +82,5 @@ export const useTransactionCallback = (): void => {
   useTransactionEventListener("IbcTransfer.Error", onTransferError);
   useTransactionEventListener("IbcWithdraw.Error", onTransferError);
   useTransactionEventListener("ShieldedIbcWithdraw.Error", onTransferError);
+  useTransactionEventListener("ShieldedOsmosisSwap.Error", onTransferError);
 };
diff --git a/apps/namadillo/src/hooks/useTransactionNotifications.tsx b/apps/namadillo/src/hooks/useTransactionNotifications.tsx
index 5dcdda235c..2b92bf636a 100644
--- a/apps/namadillo/src/hooks/useTransactionNotifications.tsx
+++ b/apps/namadillo/src/hooks/useTransactionNotifications.tsx
@@ -15,7 +15,7 @@ import { searchAllStoredTxByHash } from "atoms/transactions";
 import BigNumber from "bignumber.js";
 import invariant from "invariant";
 import { useSetAtom } from "jotai";
-import { TransferTransactionData } from "types";
+import { OsmosisSwapTransactionData, TransferTransactionData } from "types";
 import { useTransactionEventListener } from "utils";
 
 type TxWithAmount = { amount: BigNumber };
@@ -553,4 +553,71 @@ export const useTransactionNotifications = (): void => {
       });
     }
   );
+
+  useTransactionEventListener(["ShieldedOsmosisSwap.Success"], ({ detail }) => {
+    const tx = detail as OsmosisSwapTransactionData;
+    if (!tx) return;
+    invariant(tx.hash, "Notification error: Invalid Tx hash");
+
+    const id = createNotificationId([tx.hash]);
+    const title = "Shielded Osmosis swap transaction succeeded";
+
+    dispatchNotification({
+      id,
+      title,
+      description: (
+        <>
+          Your shielded swap of{" "}
+          <b>
+            <TokenCurrency amount={tx.displayAmount} symbol={tx.asset.symbol} />{" "}
+            to{" "}
+            <TokenCurrency
+              amount={tx.minAmountOut}
+              symbol={tx.targetAsset.symbol}
+            />
+          </b>{" "}
+          has completed
+        </>
+      ),
+      type: "success",
+    });
+  });
+
+  useTransactionEventListener(["ShieldedOsmosisSwap.Error"], ({ detail }) => {
+    const tx = detail as OsmosisSwapTransactionData;
+    if (!tx) return;
+    invariant(tx.hash, "Notification error: Invalid Tx provider");
+
+    const id = createNotificationId([tx.hash]);
+    const title = "Shielded Osmosis swap transaction failed";
+
+    dispatchNotification({
+      id,
+      title,
+      description: (
+        <>
+          Your shielded swap of{" "}
+          <b>
+            <TokenCurrency amount={tx.displayAmount} symbol={tx.asset.symbol} />{" "}
+            to{" "}
+            <TokenCurrency
+              amount={tx.minAmountOut}
+              symbol={tx.targetAsset.symbol}
+            />
+          </b>{" "}
+          has failed.{" "}
+          <b>Open the Namada extension to access the refund account.</b>
+        </>
+      ),
+      details: (
+        <>
+          {tx.errorMessage}
+          <br />
+          Liquidity might not be sufficient.{" "}
+          <b>Please try adjusting the allowed slippage.</b>
+        </>
+      ),
+      type: "error",
+    });
+  });
 };
diff --git a/apps/namadillo/src/hooks/useTransactionWatcher.tsx b/apps/namadillo/src/hooks/useTransactionWatcher.tsx
index f5b727f400..5feb349415 100644
--- a/apps/namadillo/src/hooks/useTransactionWatcher.tsx
+++ b/apps/namadillo/src/hooks/useTransactionWatcher.tsx
@@ -50,6 +50,7 @@ export const useTransactionWatcher = (): void => {
               break;
             }
 
+            case "ShieldedOsmosisSwap":
             case "ShieldedToIbc":
             case "TransparentToIbc": {
               const newTx = await updateIbcWithdrawalStatus(
diff --git a/apps/namadillo/src/lib/query.ts b/apps/namadillo/src/lib/query.ts
index a8a4f5251e..2e09dc6bf3 100644
--- a/apps/namadillo/src/lib/query.ts
+++ b/apps/namadillo/src/lib/query.ts
@@ -221,6 +221,7 @@ export const isTransferEventType = (
         "TransparentTransfer",
         "ShieldedTransfer",
         "UnshieldingTransfer",
+        "ShieldedOsmosisSwap",
       ].includes(eventType)
     : false;
 };
diff --git a/apps/namadillo/src/setupTests.ts b/apps/namadillo/src/setupTests.ts
index 13eb12a25b..148ed72a3f 100644
--- a/apps/namadillo/src/setupTests.ts
+++ b/apps/namadillo/src/setupTests.ts
@@ -8,6 +8,7 @@ global.TextDecoder = TextDecoder as typeof global.TextDecoder;
 jest.mock("atoms/integrations", () => ({
   getRestApiAddressByIndex: jest.fn(),
   getRpcByIndex: jest.fn(),
+  namadaRegistryChainAssetsMapAtom: atom({ data: undefined }),
 }));
 
 jest.mock("atoms/integrations/atoms", () => ({
diff --git a/apps/namadillo/src/types.ts b/apps/namadillo/src/types.ts
index 7ff388b5dc..b02739eee2 100644
--- a/apps/namadillo/src/types.ts
+++ b/apps/namadillo/src/types.ts
@@ -4,6 +4,7 @@ import {
   Asset as ChainRegistryAsset,
   IBCInfo,
 } from "@chain-registry/types";
+import { IbcTransition } from "@chain-registry/types/assetlist.schema";
 import { ValidatorStatus } from "@namada/indexer-client";
 import { ClaimRewardsMsgValue } from "@namada/sdk-multicore";
 import { Account, ChainKey, ExtensionKey } from "@namada/types";
@@ -95,6 +96,11 @@ export type RpcStorage = {
   index: number;
 };
 
+export type SwapStorage = {
+  assetSymbolSell?: string;
+  assetSymbolBuy?: string;
+};
+
 export type Validator = Unique & {
   alias?: string;
   address: Address;
@@ -222,6 +228,7 @@ export type Asset = ChainRegistryAsset;
 
 // Namada assets should always have address field defined
 export type NamadaAsset = Asset & { address: Address };
+export type NamadaIbcTransition = IbcTransition;
 
 export type AssetWithAmount = {
   asset: Asset;
@@ -305,6 +312,12 @@ export const namadaTransferStages = {
 
 // Defines the steps in the IBC <> Namada transfer progress for tracking transaction stages.
 export const ibcTransferStages = {
+  ShieldedOsmosisSwap: [
+    TransferStep.Sign,
+    TransferStep.IbcWithdraw,
+    TransferStep.WaitingConfirmation,
+    TransferStep.Complete,
+  ] as const,
   ShieldedToIbc: [
     TransferStep.Sign,
     TransferStep.IbcWithdraw,
@@ -398,9 +411,17 @@ export type IbcTransferTransactionData = BaseTransferTransaction & {
   destinationChainId: string;
 };
 
+export type OsmosisSwapTransactionData = BaseTransferTransaction & {
+  type: "ShieldedOsmosisSwap";
+  targetAsset: Asset;
+  minAmountOut: BigNumber;
+  refundTarget: string;
+};
+
 export type TransferTransactionData =
   | BaseTransferTransaction
-  | IbcTransferTransactionData;
+  | IbcTransferTransactionData
+  | OsmosisSwapTransactionData;
 
 export type PartialTransferTransactionData = Partial<TransferTransactionData> &
   Pick<TransferTransactionData, "type" | "chainId" | "asset">;
diff --git a/apps/namadillo/src/types/errors.ts b/apps/namadillo/src/types/errors.ts
new file mode 100644
index 0000000000..f7b98a207e
--- /dev/null
+++ b/apps/namadillo/src/types/errors.ts
@@ -0,0 +1,14 @@
+import { TransactionPair } from "lib/query";
+
+export class TransactionError<T> extends Error {
+  public cause: { originalError: unknown; context: TransactionPair<T> };
+  constructor(
+    public message: string,
+    options: {
+      cause: { originalError: unknown; context: TransactionPair<T> };
+    }
+  ) {
+    super(message);
+    this.cause = options.cause;
+  }
+}
diff --git a/apps/namadillo/src/types/events.ts b/apps/namadillo/src/types/events.ts
index 1029bf5bc7..f46a9bf7e3 100644
--- a/apps/namadillo/src/types/events.ts
+++ b/apps/namadillo/src/types/events.ts
@@ -70,5 +70,7 @@ declare global {
     "IbcWithdraw.Error": CustomEvent<TransferTransactionData>;
     "ShieldedIbcWithdraw.Success": CustomEvent<TransferTransactionData>;
     "ShieldedIbcWithdraw.Error": CustomEvent<TransferTransactionData>;
+    "ShieldedOsmosisSwap.Success": CustomEvent<TransferTransactionData>;
+    "ShieldedOsmosisSwap.Error": CustomEvent<TransferTransactionData>;
   }
 }
diff --git a/apps/namadillo/src/types/txKind.ts b/apps/namadillo/src/types/txKind.ts
index a81a5d15fe..85a1e4f85a 100644
--- a/apps/namadillo/src/types/txKind.ts
+++ b/apps/namadillo/src/types/txKind.ts
@@ -11,6 +11,7 @@ export const txKinds = [
   "ShieldedTransfer",
   "ShieldingTransfer",
   "UnshieldingTransfer",
+  "ShieldedOsmosisSwap",
   "Unknown",
 ] as const;
 
diff --git a/apps/namadillo/src/utils/assets.ts b/apps/namadillo/src/utils/assets.ts
index 5c089d6ec9..69ca9e8993 100644
--- a/apps/namadillo/src/utils/assets.ts
+++ b/apps/namadillo/src/utils/assets.ts
@@ -54,3 +54,13 @@ export const filterAvailableAssetsWithBalance = (
     return previous;
   }, {});
 };
+
+export const amountMaxDecimalPlaces = (asset?: Asset): number | undefined => {
+  if (typeof asset !== "undefined") {
+    for (const { denom, exponent } of asset.denom_units) {
+      if (denom === asset.display) {
+        return exponent;
+      }
+    }
+  }
+};
diff --git a/apps/namadillo/src/workers/MaspTxMessages.ts b/apps/namadillo/src/workers/MaspTxMessages.ts
index 3825c58d5b..5860139d3a 100644
--- a/apps/namadillo/src/workers/MaspTxMessages.ts
+++ b/apps/namadillo/src/workers/MaspTxMessages.ts
@@ -6,7 +6,7 @@ import {
   TxResponseProps,
   UnshieldingTransferProps,
 } from "@namada/sdk-multicore";
-import { Account } from "@namada/types";
+import { Account, OsmosisSwapMsgValue } from "@namada/types";
 import BigNumber from "bignumber.js";
 import { EncodedTxData, TransactionPair } from "lib/query";
 import { ChainSettings, GasConfig } from "types";
@@ -74,6 +74,19 @@ export type IbcTransferDone = WebWorkerMessage<
   EncodedTxData<IbcTransferProps>
 >;
 
+type OsmosisSwapPayload = {
+  account: Account;
+  gasConfig: GasConfig;
+  props: OsmosisSwapMsgValue[];
+  chain: ChainSettings;
+  memo?: string;
+};
+export type OsmosisSwap = WebWorkerMessage<"osmosis-swap", OsmosisSwapPayload>;
+export type OsmosisSwapDone = WebWorkerMessage<
+  "osmosis-swap-done",
+  EncodedTxData<OsmosisSwapMsgValue>
+>;
+
 type GenerateIbcShieldingMemoPayload = {
   target: string;
   token: string;
diff --git a/apps/namadillo/src/workers/MaspTxWorker.ts b/apps/namadillo/src/workers/MaspTxWorker.ts
index 8f66b9a09b..b450bc77db 100644
--- a/apps/namadillo/src/workers/MaspTxWorker.ts
+++ b/apps/namadillo/src/workers/MaspTxWorker.ts
@@ -7,6 +7,7 @@ import {
   UnshieldingTransferProps,
 } from "@namada/sdk-multicore";
 import { initSdk } from "@namada/sdk-multicore/inline";
+import { OsmosisSwapMsgValue } from "@namada/types";
 import BigNumber from "bignumber.js";
 import * as Comlink from "comlink";
 import { buildTx, EncodedTxData } from "lib/query";
@@ -20,6 +21,8 @@ import {
   IbcTransferDone,
   Init,
   InitDone,
+  OsmosisSwap,
+  OsmosisSwapDone,
   Shield,
   ShieldDone,
   ShieldedRewards,
@@ -121,6 +124,17 @@ export class Worker {
     };
   }
 
+  async osmosisSwap(m: OsmosisSwap): Promise<OsmosisSwapDone> {
+    if (!this.sdk) {
+      throw new Error("SDK is not initialized");
+    }
+
+    return {
+      type: "osmosis-swap-done",
+      payload: await osmosisSwap(this.sdk, m.payload),
+    };
+  }
+
   async broadcast(m: Broadcast): Promise<BroadcastDone> {
     if (!this.sdk) {
       throw new Error("SDK is not initialized");
@@ -221,6 +235,27 @@ async function ibcTransfer(
   return encodedTxData;
 }
 
+async function osmosisSwap(
+  sdk: Sdk,
+  payload: OsmosisSwap["payload"]
+): Promise<EncodedTxData<OsmosisSwapMsgValue>> {
+  const { account, gasConfig, chain, props } = payload;
+
+  await sdk.masp.loadMaspParams("", chain.chainId);
+  const encodedTxData = await buildTx<OsmosisSwapMsgValue>(
+    sdk,
+    account,
+    gasConfig,
+    chain,
+    props,
+    sdk.tx.buildOsmosisSwap,
+    undefined,
+    false
+  );
+
+  return encodedTxData;
+}
+
 async function generateIbcShieldingMemo(
   sdk: Sdk,
   payload: GenerateIbcShieldingMemo["payload"]
@@ -297,6 +332,8 @@ export const registerTransferHandlers = (): void => {
   registerBNTransferHandler<UnshieldDone>("unshield-done");
   registerBNTransferHandler<IbcTransfer>("ibc-transfer");
   registerBNTransferHandler<IbcTransferDone>("ibc-transfer-done");
+  registerBNTransferHandler<OsmosisSwap>("osmosis-swap");
+  registerBNTransferHandler<OsmosisSwapDone>("osmosis-swap-done");
   registerBNTransferHandler<Unshield>("unshield");
   registerBNTransferHandler<GenerateIbcShieldingMemo>(
     "generate-ibc-shielding-memo"
diff --git a/packages/crypto/lib/rust-toolchain.toml b/packages/crypto/lib/rust-toolchain.toml
new file mode 100644
index 0000000000..6a3f6cc103
--- /dev/null
+++ b/packages/crypto/lib/rust-toolchain.toml
@@ -0,0 +1,4 @@
+[toolchain]
+channel = "nightly-2025-03-27"
+components = ["rustc", "cargo", "rust-std", "rust-docs", "rls", "rust-src", "rust-analysis"]
+targets = ['wasm32-unknown-unknown']
diff --git a/packages/shared/lib/src/types/masp.rs b/packages/shared/lib/src/types/masp.rs
deleted file mode 100644
index 06f49a04db..0000000000
--- a/packages/shared/lib/src/types/masp.rs
+++ /dev/null
@@ -1,351 +0,0 @@
-//! PaymentAddress - Provide wasm_bindgen bindings for shielded addresses
-//! See @namada/crypto for zip32 HD wallet functionality.
-use std::str::FromStr;
-
-use crate::utils::to_js_result;
-use js_sys::Uint8Array;
-use namada_sdk::borsh::{self, BorshDeserialize};
-use namada_sdk::masp_primitives::sapling;
-use namada_sdk::masp_primitives::sapling::ViewingKey;
-use namada_sdk::masp_primitives::zip32::{self, DiversifierIndex, ExtendedKey};
-use namada_sdk::masp_proofs::jubjub;
-use namada_sdk::state::BlockHeight;
-use namada_sdk::wallet::DatedKeypair;
-use namada_sdk::{
-    ExtendedSpendingKey as NamadaExtendedSpendingKey,
-    ExtendedViewingKey as NamadaExtendedViewingKey, PaymentAddress as NamadaPaymentAddress,
-};
-use thiserror::Error;
-use wasm_bindgen::prelude::*;
-
-#[derive(Debug, Error)]
-pub enum MaspError {
-    #[error("PaymentAddress from_str failed!")]
-    PaymentAddress,
-    #[error("BorshDeserialize failed!")]
-    BorshDeserialize,
-}
-
-/// Wrap ExtendedViewingKey
-#[wasm_bindgen]
-pub struct ExtendedViewingKey(pub(crate) NamadaExtendedViewingKey);
-
-/// wasm_bindgen bindings for ExtendedViewingKey
-#[wasm_bindgen]
-impl ExtendedViewingKey {
-    /// Instantiate ExtendedViewingKey from serialized vector
-    #[wasm_bindgen(constructor)]
-    pub fn new(key: &[u8]) -> Result<ExtendedViewingKey, String> {
-        let xfvk: zip32::ExtendedFullViewingKey = BorshDeserialize::try_from_slice(key)
-            .map_err(|err| format!("{}: {:?}", MaspError::BorshDeserialize, err))?;
-
-        let vk = NamadaExtendedViewingKey::from(xfvk);
-
-        Ok(ExtendedViewingKey(vk))
-    }
-
-    /// Return ExtendedViewingKey as Bech32-encoded String
-    pub fn encode(&self) -> String {
-        self.0.to_string()
-    }
-
-    pub fn default_payment_address(&self) -> Result<JsValue, JsError> {
-        let xfvk = zip32::ExtendedFullViewingKey::from(self.0);
-        let (diversifier_index, payment_address) = xfvk.default_address();
-        let div_idx = u32::try_from(diversifier_index)?;
-
-        to_js_result((div_idx, PaymentAddress(payment_address.into()).encode()))
-    }
-}
-
-#[wasm_bindgen]
-pub struct ProofGenerationKey(pub(crate) sapling::ProofGenerationKey);
-
-#[wasm_bindgen]
-impl ProofGenerationKey {
-    pub fn from_bytes(ak: Vec<u8>, nsk: Vec<u8>) -> ProofGenerationKey {
-        let concatenated: Vec<u8> = ak.iter().chain(nsk.iter()).cloned().collect();
-        let pgk = sapling::ProofGenerationKey::try_from_slice(concatenated.as_slice())
-            .expect("Deserializing ProofGenerationKey should not fail!");
-
-        ProofGenerationKey(pgk)
-    }
-
-    pub fn encode(&self) -> String {
-        hex::encode(
-            borsh::to_vec(&self.0).expect("Serializing ProofGenerationKey should not fail!"),
-        )
-    }
-
-    pub fn decode(encoded: String) -> ProofGenerationKey {
-        let decoded = hex::decode(encoded).expect("Decoding ProofGenerationKey should not fail!");
-
-        ProofGenerationKey(
-            sapling::ProofGenerationKey::try_from_slice(decoded.as_slice())
-                .expect("Deserializing ProofGenerationKey should not fail!"),
-        )
-    }
-}
-
-/// Wrap ExtendedSpendingKey
-#[wasm_bindgen]
-pub struct PseudoExtendedKey(pub(crate) zip32::PseudoExtendedKey);
-
-#[wasm_bindgen]
-impl PseudoExtendedKey {
-    pub fn encode(&self) -> String {
-        hex::encode(borsh::to_vec(&self.0).expect("Serializing PseudoExtendedKey should not fail!"))
-    }
-
-    pub fn can_decode(encoded: String) -> bool {
-        let decoded = hex::decode(encoded);
-        decoded.is_ok()
-    }
-
-    pub fn decode(encoded: String) -> Result<PseudoExtendedKey, JsError> {
-        let decoded = hex::decode(encoded).map_err(|err| JsError::new(&err.to_string()))?;
-        let pek = zip32::PseudoExtendedKey::try_from_slice(decoded.as_slice())
-            .map_err(|err| JsError::new(&err.to_string()))?;
-
-        Ok(PseudoExtendedKey(pek))
-    }
-
-    pub fn from(xvk: ExtendedViewingKey, pgk: ProofGenerationKey) -> Self {
-        let mut pxk = zip32::PseudoExtendedKey::from(zip32::ExtendedFullViewingKey::from(xvk.0));
-        pxk.augment_proof_generation_key(pgk.0)
-            .expect("Augmenting proof generation key should not fail!");
-
-        pxk.augment_spend_authorizing_key_unchecked(sapling::redjubjub::PrivateKey(
-            jubjub::Fr::default(),
-        ));
-
-        Self(pxk)
-    }
-
-    pub fn to_viewing_key(&self) -> Result<ExtendedViewingKey, String> {
-        let xfvk = self.0.to_viewing_key();
-        Ok(ExtendedViewingKey(NamadaExtendedViewingKey::from(xfvk)))
-    }
-}
-
-/// Wrap ExtendedSpendingKey
-#[wasm_bindgen]
-pub struct ExtendedSpendingKey(pub(crate) NamadaExtendedSpendingKey);
-
-/// wasm_bindgen bindings for ExtendedViewingKey
-#[wasm_bindgen]
-impl ExtendedSpendingKey {
-    /// Instantiate ExtendedSpendingKey from serialized vector
-    #[wasm_bindgen(constructor)]
-    pub fn new(key: Uint8Array) -> Result<ExtendedSpendingKey, String> {
-        let xsk: zip32::ExtendedSpendingKey =
-            BorshDeserialize::try_from_slice(key.to_vec().as_slice())
-                .map_err(|err| format!("{}: {:?}", MaspError::BorshDeserialize, err))?;
-
-        let xsk = NamadaExtendedSpendingKey::from(xsk);
-
-        Ok(ExtendedSpendingKey(xsk))
-    }
-
-    pub fn from_string(xsk: String) -> Result<ExtendedSpendingKey, String> {
-        let xsk = NamadaExtendedSpendingKey::from_str(&xsk).map_err(|err| err.to_string())?;
-
-        Ok(ExtendedSpendingKey(xsk))
-    }
-
-    pub fn to_viewing_key(&self) -> Result<ExtendedViewingKey, String> {
-        ExtendedViewingKey::new(&self.0.to_viewing_key().to_bytes())
-    }
-
-    pub fn to_default_address(&self) -> Result<JsValue, JsError> {
-        let xsk = zip32::ExtendedSpendingKey::from(self.0);
-        let xfvk = zip32::ExtendedFullViewingKey::from(&xsk);
-        let (div_idx, payment_address) = xfvk.default_address();
-
-        let index = u32::try_from(div_idx)?;
-        to_js_result((index, PaymentAddress(payment_address.into()).encode()))
-    }
-
-    pub fn to_proof_generation_key(&self) -> ProofGenerationKey {
-        let xsk = zip32::ExtendedSpendingKey::from(self.0);
-        let pgk = xsk
-            .to_proof_generation_key()
-            .expect("Converting to proof generation key should not fail!");
-
-        ProofGenerationKey(pgk)
-    }
-
-    pub fn to_pseudo_extended_key(&self) -> PseudoExtendedKey {
-        let xsk = zip32::ExtendedSpendingKey::from(self.0);
-        let mut pxk = zip32::PseudoExtendedKey::from(xsk);
-        pxk.augment_spend_authorizing_key_unchecked(sapling::redjubjub::PrivateKey(
-            jubjub::Fr::default(),
-        ));
-
-        PseudoExtendedKey(pxk)
-    }
-
-    /// Return ExtendedSpendingKey as Bech32-encoded String
-    pub fn encode(&self) -> String {
-        self.0.to_string()
-    }
-}
-
-/// Wrap PaymentAddress
-#[wasm_bindgen]
-pub struct PaymentAddress(pub(crate) NamadaPaymentAddress);
-
-/// wasm_bindgen bindings for PaymentAddress
-#[wasm_bindgen]
-impl PaymentAddress {
-    /// Instantiate PaymentAddress from serialized vector
-    #[wasm_bindgen(constructor)]
-    pub fn new(address: &[u8]) -> Result<PaymentAddress, String> {
-        let payment_address: sapling::PaymentAddress = BorshDeserialize::try_from_slice(address)
-            .map_err(|err| format!("{}: {:?}", MaspError::BorshDeserialize, err))?;
-        let payment_address = NamadaPaymentAddress::from(payment_address);
-        Ok(PaymentAddress(payment_address))
-    }
-
-    /// Retrieve PaymentAddress hash
-    pub fn hash(&self) -> String {
-        self.0.hash()
-    }
-
-    /// Return PaymentAddress as Bech32-encoded String
-    pub fn encode(&self) -> String {
-        self.0.to_string()
-    }
-}
-
-/// Find next payment address from current index for viewing key
-#[wasm_bindgen]
-pub fn gen_payment_address(vk: String, index: u32) -> Result<JsValue, JsError> {
-    let diversifier_index = DiversifierIndex::from(index);
-
-    let xfvk = zip32::ExtendedFullViewingKey::from(
-        NamadaExtendedViewingKey::from_str(&vk)
-            .expect("Parsing ExtendedViewingKey should not fail!"),
-    );
-    let (div_idx, masp_payment_addr) = xfvk
-        .find_address(diversifier_index)
-        .expect("Exhausted payment addresses");
-
-    let payment_addr = NamadaPaymentAddress::from(masp_payment_addr);
-    let payment_address = PaymentAddress(payment_addr);
-    let index: u32 = u32::try_from(div_idx)?;
-
-    to_js_result((index, payment_address.encode()))
-}
-
-#[wasm_bindgen]
-pub struct DatedViewingKey(pub(crate) DatedKeypair<ViewingKey>);
-
-#[wasm_bindgen]
-impl DatedViewingKey {
-    #[wasm_bindgen(constructor)]
-    pub fn new(key: String, birthday: String) -> Result<DatedViewingKey, String> {
-        let xfvk = zip32::ExtendedFullViewingKey::from(
-            NamadaExtendedViewingKey::from_str(&key)
-                .expect("Parsing ExtendedViewingKey should not fail!"),
-        )
-        .fvk
-        .vk;
-        let birthday = BlockHeight::from_str(&birthday).expect("Parsing birthday should not fail!");
-
-        Ok(DatedViewingKey(DatedKeypair {
-            key: xfvk,
-            birthday,
-        }))
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    use wasm_bindgen_test::*;
-
-    #[wasm_bindgen_test]
-    fn can_deserialize_an_extended_spending_key() {
-        // BorshSerialize'd slice, generated from @namada/crypto - zip32
-        let encoded_xsk: &[u8] = &[
-            1, 233, 222, 184, 155, 1, 0, 0, 0, 232, 94, 130, 41, 9, 58, 197, 35, 245, 249, 232,
-            225, 222, 38, 148, 105, 204, 14, 230, 30, 241, 22, 214, 38, 221, 49, 17, 147, 255, 136,
-            219, 250, 71, 230, 226, 2, 146, 75, 94, 233, 234, 254, 128, 142, 209, 73, 65, 180, 64,
-            235, 159, 125, 24, 77, 12, 246, 113, 174, 41, 217, 5, 190, 215, 6, 76, 189, 55, 31, 96,
-            85, 114, 22, 215, 250, 140, 98, 162, 95, 203, 154, 180, 0, 231, 40, 172, 36, 137, 30,
-            142, 181, 225, 143, 180, 110, 135, 2, 213, 181, 237, 102, 55, 178, 202, 2, 123, 161,
-            104, 49, 91, 37, 62, 52, 132, 72, 103, 7, 60, 110, 171, 49, 22, 100, 146, 44, 79, 205,
-            112, 25, 36, 51, 226, 228, 45, 242, 201, 220, 212, 220, 58, 92, 127, 47, 214, 59, 174,
-            182, 74, 90, 65, 229, 187, 76, 65, 246, 34, 237, 107, 208, 178, 243,
-        ];
-        let xsk = ExtendedSpendingKey::new(encoded_xsk.into())
-            .expect("Instantiating ExtendedSpendingKey struct should not fail!");
-
-        let key = xsk.encode();
-        let expected_key =
-            format!(
-                "{}{}{}",
-                "zsknam1q85aawymqyqqqq8gt6pzjzf6c53lt70gu80zd9rfes8wv8h3zmtzdhf3zxfllzxmlfr7dcszjf94a602l6qga52fgx6yp6ul05vy6r",
-                "8kwxhznkg9hmtsvn9axu0kq4tjzmtl4rrz5f0uhx45qrnj3tpy3y0gad0p376xapcz6k676e3hkt9qy7apdqc4kff7xjzysec883h2kvgkvjf",
-                "zcn7dwqvjgvlzuskl9jwu6nwr5hrl9ltrht4kffdyredmf3qlvghdd0gt9ucw4ccj7",
-            );
-
-        assert!(key.starts_with("zsknam"));
-        assert_eq!(key, expected_key);
-    }
-
-    #[wasm_bindgen_test]
-    fn can_deserialize_an_extended_viewing_key() {
-        // BorshSerialize'd slice, generated from @namada/crypto - zip32
-        let encoded_xfvk: &[u8] = &[
-            1, 233, 222, 184, 155, 1, 0, 0, 0, 232, 94, 130, 41, 9, 58, 197, 35, 245, 249, 232,
-            225, 222, 38, 148, 105, 204, 14, 230, 30, 241, 22, 214, 38, 221, 49, 17, 147, 255, 136,
-            219, 250, 231, 141, 253, 33, 141, 45, 47, 253, 94, 99, 2, 58, 233, 84, 152, 142, 60,
-            45, 175, 100, 10, 5, 32, 126, 133, 46, 214, 50, 136, 235, 250, 73, 125, 112, 103, 142,
-            119, 204, 205, 75, 30, 208, 119, 223, 218, 19, 88, 206, 173, 185, 244, 228, 224, 32,
-            104, 193, 189, 255, 9, 147, 22, 21, 240, 191, 213, 181, 237, 102, 55, 178, 202, 2, 123,
-            161, 104, 49, 91, 37, 62, 52, 132, 72, 103, 7, 60, 110, 171, 49, 22, 100, 146, 44, 79,
-            205, 112, 25, 36, 51, 226, 228, 45, 242, 201, 220, 212, 220, 58, 92, 127, 47, 214, 59,
-            174, 182, 74, 90, 65, 229, 187, 76, 65, 246, 34, 237, 107, 208, 178, 243,
-        ];
-        let xfvk = ExtendedViewingKey::new(encoded_xfvk)
-            .expect("Instantiating ExtendedViewingKey struct should not fail!");
-
-        let key = xfvk.encode();
-        let expected_key =
-            format!(
-                "{}{}{}",
-                "zvknam1q85aawymqyqqqq8gt6pzjzf6c53lt70gu80zd9rfes8wv8h3zmtzdhf3zxfllzxmltncmlfp35kjll27vvpr4625nz8rctd0vs9",
-                "q2gr7s5hdvv5ga0ayjltsv7880nxdfv0dqa7lmgf43n4dh86wfcpqdrqmmlcfjvtptu9l6k676e3hkt9qy7apdqc4kff7xjzysec883h2k",
-                "vgkvjfzcn7dwqvjgvlzuskl9jwu6nwr5hrl9ltrht4kffdyredmf3qlvghdd0gt9uce7vx4v",
-            );
-        assert!(key.starts_with("zvknam"));
-        assert_eq!(key, expected_key);
-    }
-
-    #[wasm_bindgen_test]
-    fn can_deserialize_a_payment_address() {
-        // BorshSerialize'd slice, generated from @namada/crypto - zip32
-        let encoded_payment_address: &[u8] = &[
-            100, 199, 34, 96, 93, 67, 18, 95, 86, 139, 123, 213, 141, 228, 147, 169, 218, 247, 75,
-            83, 195, 72, 73, 44, 65, 232, 243, 229, 209, 63, 183, 1, 87, 87, 203, 40, 180, 242,
-            103, 187, 245, 224, 36,
-        ];
-        let payment_address = PaymentAddress::new(encoded_payment_address)
-            .expect("Instantiating PaymentAddress struct should not fail!");
-
-        let address = payment_address.encode();
-        let hash = payment_address.hash();
-
-        let expected_address =
-            "znam1vnrjyczagvf9745t002cmeyn48d0wj6ncdyyjtzpare7t5flkuq4w47t9z60yeam7hszgyhdw2j";
-
-        let expected_hash = "4E11B97D220F336CF36A14E8DDFE15ED34BC489D";
-
-        assert!(address.starts_with("znam"));
-        assert_eq!(address, expected_address);
-        assert_eq!(hash, expected_hash);
-    }
-}
diff --git a/packages/types/src/tx/schema/index.ts b/packages/types/src/tx/schema/index.ts
index edacc6fe78..0d25ce6426 100644
--- a/packages/types/src/tx/schema/index.ts
+++ b/packages/types/src/tx/schema/index.ts
@@ -4,6 +4,7 @@ export * from "./bparams";
 export * from "./claimRewards";
 export * from "./ethBridgeTransfer";
 export * from "./ibcTransfer";
+export * from "./osmosisSwap";
 export * from "./redelegate";
 export * from "./revealPk";
 export * from "./signature";
@@ -22,6 +23,7 @@ import { BondMsgValue } from "./bond";
 import { ClaimRewardsMsgValue } from "./claimRewards";
 import { EthBridgeTransferMsgValue } from "./ethBridgeTransfer";
 import { IbcTransferMsgValue } from "./ibcTransfer";
+import { OsmosisSwapMsgValue } from "./osmosisSwap";
 import { RedelegateMsgValue } from "./redelegate";
 import { RevealPkMsgValue } from "./revealPk";
 import { SignatureMsgValue } from "./signature";
@@ -50,6 +52,7 @@ export type Schema =
   | BatchTxResultMsgValue
   | EthBridgeTransferMsgValue
   | IbcTransferMsgValue
+  | OsmosisSwapMsgValue
   | SignatureMsgValue
   | BondMsgValue
   | UnbondMsgValue
diff --git a/packages/types/src/tx/schema/osmosisSwap.ts b/packages/types/src/tx/schema/osmosisSwap.ts
new file mode 100644
index 0000000000..766697938d
--- /dev/null
+++ b/packages/types/src/tx/schema/osmosisSwap.ts
@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { field, option, variant, vec } from "@dao-xyz/borsh";
+import { OsmosisSwapProps } from "../types";
+import { IbcTransferMsgValue } from "./ibcTransfer";
+
+abstract class SlippageMsgValue {}
+
+@variant(0)
+export class MinOutputAmount extends SlippageMsgValue {
+  // 0 to follow rust convention, the amount is in the **base** denom
+  @field({ type: "string" })
+  public 0!: string;
+
+  constructor(data: MinOutputAmount) {
+    super();
+    Object.assign(this, data);
+  }
+}
+export const isMinOutputAmount = (
+  data: SlippageMsgValue
+): data is MinOutputAmount => {
+  return typeof (data as MinOutputAmount)[0] === "string";
+};
+
+@variant(1)
+export class Twap extends SlippageMsgValue {
+  @field({ type: "string" })
+  public slippagePercentage!: string;
+
+  @field({ type: "u64" })
+  public windowSeconds!: bigint;
+
+  constructor(data: SlippageMsgValue) {
+    super();
+    Object.assign(this, data);
+  }
+}
+
+export const isTwap = (data: SlippageMsgValue): data is Twap => {
+  return (
+    typeof (data as Twap).slippagePercentage === "string" &&
+    typeof (data as Twap).windowSeconds === "bigint"
+  );
+};
+
+export class OsmosisPoolHop {
+  @field({ type: "string" })
+  poolId!: string;
+
+  @field({ type: "string" })
+  tokenOutDenom!: string;
+
+  constructor(data: OsmosisPoolHop) {
+    Object.assign(this, data);
+  }
+}
+
+export class OsmosisSwapMsgValue {
+  @field({ type: IbcTransferMsgValue })
+  transfer!: IbcTransferMsgValue;
+
+  @field({ type: "string" })
+  outputDenom!: string;
+
+  @field({ type: "string" })
+  recipient!: string;
+
+  @field({ type: "string" })
+  overflow!: string;
+
+  @field({ type: SlippageMsgValue })
+  slippage!: SlippageMsgValue;
+
+  @field({ type: "string" })
+  localRecoveryAddr!: string;
+
+  @field({ type: option(vec(OsmosisPoolHop)) })
+  route?: OsmosisPoolHop[];
+
+  @field({ type: "string" })
+  osmosisRestRpc!: string;
+
+  constructor(data: OsmosisSwapProps) {
+    let slippage;
+    if (isMinOutputAmount(data.slippage)) {
+      slippage = new MinOutputAmount(data.slippage);
+    } else if (isTwap(data.slippage)) {
+      slippage = new Twap(data.slippage);
+    } else {
+      throw new Error("Invalid slippage type");
+    }
+
+    Object.assign(this, {
+      ...data,
+      transfer: new IbcTransferMsgValue(data.transfer),
+      slippage,
+      route: data.route?.map((hop) => {
+        return new OsmosisPoolHop(hop);
+      }),
+    });
+  }
+}
diff --git a/packages/types/src/tx/types.ts b/packages/types/src/tx/types.ts
index 12b6c00269..af4c96d850 100644
--- a/packages/types/src/tx/types.ts
+++ b/packages/types/src/tx/types.ts
@@ -6,6 +6,7 @@ import {
   IbcTransferMsgValue,
   MaspTxIn,
   MaspTxOut,
+  OsmosisSwapMsgValue,
   RedelegateMsgValue,
   ShieldedTransferDataMsgValue,
   ShieldedTransferMsgValue,
@@ -55,6 +56,7 @@ export type ClaimRewardsProps = ClaimRewardsMsgValue;
 export type WithdrawProps = WithdrawMsgValue;
 export type WrapperTxProps = WrapperTxMsgValue;
 export type RevealPkProps = RevealPkMsgValue;
+export type OsmosisSwapProps = OsmosisSwapMsgValue;
 
 export type SupportedTxProps =
   | BondProps
diff --git a/yarn.lock b/yarn.lock
index b6c26e20b0..eb793f0c18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3585,8 +3585,8 @@ __metadata:
     "@dao-xyz/borsh": "npm:^5.1.5"
     "@ledgerhq/hw-transport": "npm:^6.31.4"
     "@ledgerhq/hw-transport-webusb": "npm:^6.29.4"
-    "@namada/sdk": "npm:0.22.0"
-    "@namada/sdk-node": "npm:^0.22.0"
+    "@namada/sdk": "npm:0.23.0-beta.1"
+    "@namada/sdk-node": "npm:0.23.0-beta.1"
     "@svgr/webpack": "npm:^6.3.1"
     "@types/chrome": "npm:^0.0.237"
     "@types/firefox-webext-browser": "npm:^94.0.1"
@@ -3772,8 +3772,8 @@ __metadata:
     "@keplr-wallet/types": "npm:^0.12.136"
     "@namada/chain-registry": "npm:^1.5.2"
     "@namada/indexer-client": "npm:4.0.5"
-    "@namada/sdk-multicore": "npm:0.22.0"
-    "@namada/sdk-node": "npm:^0.22.0"
+    "@namada/sdk-multicore": "npm:0.23.0-beta.1"
+    "@namada/sdk-node": "npm:0.23.0-beta.1"
     "@namada/vite-esbuild-plugin": "npm:^1.0.1"
     "@playwright/test": "npm:^1.24.1"
     "@svgr/webpack": "npm:^6.5.1"
@@ -3858,9 +3858,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@namada/sdk-multicore@npm:0.22.0":
-  version: 0.22.0
-  resolution: "@namada/sdk-multicore@npm:0.22.0"
+"@namada/sdk-multicore@npm:0.23.0-beta.1":
+  version: 0.23.0-beta.1
+  resolution: "@namada/sdk-multicore@npm:0.23.0-beta.1"
   dependencies:
     "@cosmjs/encoding": "npm:^0.29.0"
     "@dao-xyz/borsh": "npm:^5.1.5"
@@ -3871,13 +3871,13 @@ __metadata:
     buffer: "npm:^6.0.3"
     semver: "npm:^7.7.2"
     slip44: "npm:^3.0.18"
-  checksum: 10c0/50c1a125ba744c4d3cb06c0249c21f654e8725a5a858a3d27c802738dc4164aa1e7fa645b241671edfc5a8cb571b6d45ae92cf2ea253ff9bfc459159c47f8ad1
+  checksum: 10c0/e3a76c702e5dd1d43c0a269b57cc2fae5803a7cb02a3b9556d189d2c5a5b34f1ac4332d0e81d7000f98afacaca001d7bedca7c1b5fcc110d4998a63913979ba8
   languageName: node
   linkType: hard
 
-"@namada/sdk-node@npm:^0.22.0":
-  version: 0.22.0
-  resolution: "@namada/sdk-node@npm:0.22.0"
+"@namada/sdk-node@npm:0.23.0-beta.1":
+  version: 0.23.0-beta.1
+  resolution: "@namada/sdk-node@npm:0.23.0-beta.1"
   dependencies:
     "@cosmjs/encoding": "npm:^0.29.0"
     "@dao-xyz/borsh": "npm:^5.1.5"
@@ -3888,13 +3888,13 @@ __metadata:
     buffer: "npm:^6.0.3"
     semver: "npm:^7.7.2"
     slip44: "npm:^3.0.18"
-  checksum: 10c0/603b795182563d95d5ec7c4e315c391b52adb33af418d9ab7ff36d78ba67396b5f860e0f2fe216a9785a6da97a0712ef5fe964ee5f25fc2bb7fce757d803814d
+  checksum: 10c0/f7c1195c56dafe8b1e6907b355d72273ca4e2be2a3c3de7b5da3c1a7ab746110f2b35f59b708c8a2c87a5366d92bf57b60811661d4be380f7a52abc08d6ed849
   languageName: node
   linkType: hard
 
-"@namada/sdk@npm:0.22.0":
-  version: 0.22.0
-  resolution: "@namada/sdk@npm:0.22.0"
+"@namada/sdk@npm:0.23.0-beta.1":
+  version: 0.23.0-beta.1
+  resolution: "@namada/sdk@npm:0.23.0-beta.1"
   dependencies:
     "@cosmjs/encoding": "npm:^0.29.0"
     "@dao-xyz/borsh": "npm:^5.1.5"
@@ -3905,7 +3905,7 @@ __metadata:
     buffer: "npm:^6.0.3"
     semver: "npm:^7.6.3"
     slip44: "npm:^3.0.18"
-  checksum: 10c0/549442a97e7e0230ae005745f35ae163bdd5e3dc865ff8175f226358f232a878624cd52b2bc4249f58d43a959872516bc1de2aebeb6b01603fd08184e4646d94
+  checksum: 10c0/21dc6d03f4b621ebef6a5db0c9c20bf1e4fe88807c76752d6a67730ed0871e625f42711a2b56bc4320d37827fd4aeadbd56a9c28c2b5f35d6253ff818e5ad73f
   languageName: node
   linkType: hard