feat: shielded swaps

.gitignore

@@ -36,5 +36,8 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 
+.yalc
+yalc.lock
+
 # Local Netlify folder
 .netlify

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",

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,13 +12,17 @@ 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";
 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 (

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>;

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",

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.maspUnshield} element={<div />} />
           </Route>
 
+          {/* Swapping */}
+          <Route path={routes.swap} element={<SwapModule />} />
+
           {/* Transaction History */}
           {(features.namTransfersEnabled || features.ibcTransfersEnabled) && (
             <Route>

apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx → 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>
   );
 };

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>
+      }
+    />
+  );
+};

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>
+  );
+};

apps/namadillo/src/App/Transfer/SelectedAsset.tsx → apps/namadillo/src/App/Common/SelectedAsset.tsx

@@ -1,9 +1,9 @@
 import { SkeletonLoading } 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;

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,