feat: shielded swaps (#1980)

Co-authored-by: neocybereth <sean@arrowburn.co.nz>

Author: mateuszjasiuk

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

…c/App/Transfer/AvailableAmountFooter.tsx …src/App/Common/AvailableAmountFooter.tsxapps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx renamed to apps/namadillo/src/App/Common/AvailableAmountFooter.tsx apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx renamed to apps/namadillo/src/App/Common/AvailableAmountFooter.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>
   );
 };

…c/App/Transfer/ConnectProviderButton.tsx …src/App/Common/ConnectProviderButton.tsxapps/namadillo/src/App/Transfer/ConnectProviderButton.tsx renamed to apps/namadillo/src/App/Common/ConnectProviderButton.tsx apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx renamed to apps/namadillo/src/App/Common/ConnectProviderButton.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>
+      }
+    />
+  );
+};