Cross-chain swaps with Mayan

What We’re Building

A cross-chain swap application built with Next.js that integrates Dynamic’s JavaScript SDK (no React SDK dependency) with Mayan’s bridge aggregator. This app enables users to:

Sign in with email OTP, Google, or an injected wallet via a fully custom auth UI
Execute token swaps from any EVM network to EVM or non-EVM destinations (Solana, Sui, HyperCore)
Access competitive exchange rates through Mayan’s routing system
Track swap progress in real-time

If you want to take a quick look at the final code, check out the GitHub repository.

Building the Application

Project setup

This recipe uses Next.js with Dynamic’s JavaScript SDK (@dynamic-labs-sdk/client and @dynamic-labs-sdk/evm) plus @dynamic-labs-sdk/react-hooks for reactive auth state. All signing and wallet creation uses the headless JS SDK; the react-hooks package only provides DynamicProvider, useUser, and useGetWalletAccounts for managing auth state in React without a full UI SDK dependency.

Dashboard: Under Chains & Networks, enable every EVM network your Mayan routes use (Ethereum, Polygon, BSC, Avalanche, Arbitrum, Optimism, Base). Under Sign-in Methods and Wallets, enable what your flow needs (including Embedded wallets). Under Security → Allowed Origins, add the origin where the app runs (for example http://localhost:3000).

Install dependencies

npm install @dynamic-labs-sdk/client @dynamic-labs-sdk/evm @dynamic-labs-sdk/react-hooks @mayanfinance/swap-sdk viem @tanstack/react-query

pnpm add @dynamic-labs-sdk/client @dynamic-labs-sdk/evm @dynamic-labs-sdk/react-hooks @mayanfinance/swap-sdk viem @tanstack/react-query

yarn add @dynamic-labs-sdk/client @dynamic-labs-sdk/evm @dynamic-labs-sdk/react-hooks @mayanfinance/swap-sdk viem @tanstack/react-query

Configure Environment

.env

NEXT_PUBLIC_DYNAMIC_ENV_ID=your-environment-id-here

Initialize Dynamic Client

Create src/lib/dynamic.ts to set up the JS SDK client and register the EVM extension:

src/lib/dynamic.ts

import { createDynamicClient } from "@dynamic-labs-sdk/client";
import { addEvmExtension } from "@dynamic-labs-sdk/evm";

export const dynamicClient = createDynamicClient({
  environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID!,
  metadata: { name: "Mayan Bridge" },
});

if (typeof window !== "undefined") {
  addEvmExtension();
}

Create Wallet Context

Create src/lib/providers.tsx. DynamicProvider (from @dynamic-labs-sdk/react-hooks) owns reactive auth state; InnerProviders reads it via useUser() and useGetWalletAccounts(). The core signing and wallet creation logic still uses the headless JS SDK:

src/lib/providers.tsx

"use client";

import {
  createContext, useContext, useEffect, useCallback, type ReactNode,
} from "react";
import {
  getWalletAccounts, onEvent, isSignedIn, logout,
  detectOAuthRedirect, completeSocialAuthentication,
} from "@dynamic-labs-sdk/client";
import { createWaasWalletAccounts } from "@dynamic-labs-sdk/client/waas";
import { isEvmWalletAccount, type EvmWalletAccount } from "@dynamic-labs-sdk/evm";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DynamicProvider, useUser, useGetWalletAccounts } from "@dynamic-labs-sdk/react-hooks";
import { dynamicClient } from "./dynamic";

interface WalletContextValue {
  evmAccount: EvmWalletAccount | null;
  loggedIn: boolean;
  ensureEvmWallet: () => Promise<void>;
  disconnect: () => Promise<void>;
}

const WalletContext = createContext<WalletContextValue>({
  evmAccount: null,
  loggedIn: false,
  ensureEvmWallet: async () => {},
  disconnect: async () => {},
});

export function useWallet() {
  return useContext(WalletContext);
}

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 1000 * 60 * 5, refetchOnWindowFocus: false } },
});

function InnerProviders({ children }: { children: ReactNode }) {
  const { data: user } = useUser();
  const loggedIn = user !== null;
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const evmAccount = walletAccounts.find(isEvmWalletAccount) ?? null;

  const disconnect = useCallback(async () => {
    await logout(dynamicClient);
  }, []);

  const ensureEvmWallet = useCallback(async () => {
    try {
      const accounts = getWalletAccounts(dynamicClient);
      if (!accounts.some(isEvmWalletAccount) && isSignedIn(dynamicClient)) {
        await createWaasWalletAccounts({ chains: ["EVM"] }, dynamicClient);
      }
    } catch {}
  }, []);

  useEffect(() => {
    const unsub = onEvent(
      { event: "walletAccountsChanged", listener: () => { void ensureEvmWallet(); } },
      dynamicClient,
    );
    return () => unsub?.();
  }, [ensureEvmWallet]);

  useEffect(() => {
    const handleOAuthRedirect = async () => {
      if (typeof window === "undefined") return;
      try {
        const url = new URL(window.location.href);
        if (await detectOAuthRedirect({ url }, dynamicClient)) {
          await completeSocialAuthentication({ url }, dynamicClient);
          await ensureEvmWallet();
          window.history.replaceState({}, "", window.location.pathname);
        }
      } catch {}
    };
    handleOAuthRedirect();
  }, [ensureEvmWallet]);

  return (
    <WalletContext.Provider value={{ evmAccount, loggedIn, ensureEvmWallet, disconnect }}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WalletContext.Provider>
  );
}

export default function Providers({ children }: { children: ReactNode }) {
  return (
    <DynamicProvider client={dynamicClient}>
      <InnerProviders>{children}</InnerProviders>
    </DynamicProvider>
  );
}

Define Supported Chains

Create src/constants/chains.ts. The FROM chain must be EVM (the wallet signs the transaction); the TO chain can be any chain Mayan supports:

src/constants/chains.ts

import { mainnet, polygon, bsc, avalanche, arbitrum, optimism, base } from "viem/chains";

export type ChainKey =
  | "ethereum" | "polygon" | "bsc" | "avalanche"
  | "arbitrum" | "optimism" | "base"
  | "solana" | "sui" | "hypercore";

export const EVM_CHAINS = [
  { id: mainnet.id,  name: "Ethereum Mainnet", key: "ethereum"  as ChainKey },
  { id: polygon.id,  name: "Polygon",          key: "polygon"   as ChainKey },
  { id: bsc.id,      name: "BSC",              key: "bsc"       as ChainKey },
  { id: avalanche.id,name: "Avalanche",        key: "avalanche" as ChainKey },
  { id: arbitrum.id, name: "Arbitrum",         key: "arbitrum"  as ChainKey },
  { id: optimism.id, name: "Optimism",         key: "optimism"  as ChainKey },
  { id: base.id,     name: "Base",             key: "base"      as ChainKey },
];

export const NON_EVM_CHAINS = [
  { id: "solana",    name: "Solana",                    key: "solana"    as ChainKey },
  { id: "sui",       name: "Sui",                       key: "sui"       as ChainKey },
  { id: "hypercore", name: "HyperCore (Hyperliquid)",   key: "hypercore" as ChainKey },
];

export const ALL_CHAINS = [...EVM_CHAINS, ...NON_EVM_CHAINS];

export const isEVMChain = (chain: { id: number | string }): boolean =>
  typeof chain.id === "number";

Create Multi-Chain Swap Component

Create src/components/MultiChainSwap.tsx. The core integration uses getSwapFromEvmTxPayload to build the transaction and createWalletClientForWalletAccount to send it via the user’s EVM wallet:

src/components/MultiChainSwap.tsx

"use client";

import { useEffect, useState } from "react";
import {
  createPublicClient, createWalletClient, custom, erc20Abi, http, parseUnits, type Chain,
} from "viem";
import { mainnet, polygon, bsc, avalanche, arbitrum, optimism, base } from "viem/chains";
import { createWalletClientForWalletAccount } from "@dynamic-labs-sdk/evm/viem";
import {
  fetchQuote, getSwapFromEvmTxPayload, getEvmChainIdByName, addresses,
} from "@mayanfinance/swap-sdk";
import type { Quote } from "@mayanfinance/swap-sdk";
import { ALL_CHAINS, EVM_CHAINS, isEVMChain } from "@/constants/chains";
import { fetchTokensForChain } from "@/lib/mayan-api";
import { useWallet } from "@/lib/providers";

const VIEM_CHAINS: Record<string, Chain> = {
  ethereum: mainnet, polygon, bsc, avalanche, arbitrum, optimism, base,
};

export default function MultiChainSwap() {
  const { evmAccount, loggedIn } = useWallet();
  const isConnected = loggedIn && !!evmAccount;
  const address = evmAccount?.address;

  // ... state and token loading (see full example in the GitHub repo)

  const executeSwapQuote = async (quote: Quote) => {
    if (!isConnected || !address || !evmAccount) throw new Error("Not ready");

    const viemChain = VIEM_CHAINS[quote.fromChain];
    if (!viemChain) throw new Error(`Unsupported source chain: ${quote.fromChain}`);

    const chainId = getEvmChainIdByName(quote.fromChain);

    // Get the Dynamic wallet client and rewrap it for the target chain
    const dynamicWalletClient = await createWalletClientForWalletAccount({ walletAccount: evmAccount });

    // Switch wallet to the target chain before sending
    await dynamicWalletClient.request({
      method: "wallet_switchEthereumChain",
      params: [{ chainId: `0x${viemChain.id.toString(16)}` }],
    });

    const walletClient = createWalletClient({
      account: dynamicWalletClient.account,
      chain: viemChain,
      transport: custom({
        request: async ({ method, params }: { method: string; params?: unknown[] }) => {
          if (method === "eth_chainId") return `0x${viemChain.id.toString(16)}`;
          return dynamicWalletClient.request({ method, params } as Parameters<typeof dynamicWalletClient.request>[0]);
        },
      }),
    });

    // Handle ERC-20 approval if needed
    const fromTokenContract = quote.fromToken.contract as `0x${string}`;
    const isNative = !fromTokenContract ||
      fromTokenContract === "0x0000000000000000000000000000000000000000";

    if (!isNative) {
      const publicClient = createPublicClient({ chain: viemChain, transport: http() });
      const forwarder = addresses.MAYAN_FORWARDER_CONTRACT as `0x${string}`;
      const allowance = await publicClient.readContract({
        address: fromTokenContract,
        abi: erc20Abi,
        functionName: "allowance",
        args: [address as `0x${string}`, forwarder],
      });
      const required = BigInt(quote.effectiveAmountIn64);
      if (allowance < required) {
        const approveTx = await walletClient.writeContract({
          address: fromTokenContract, abi: erc20Abi, functionName: "approve",
          args: [forwarder, required],
          account: address as `0x${string}`, chain: viemChain,
        });
        await publicClient.waitForTransactionReceipt({ hash: approveTx });
      }
    }

    // Build and send the swap transaction
    const txPayload = getSwapFromEvmTxPayload(quote, address, address, null, address, chainId, null, null);

    return walletClient.sendTransaction({
      to: txPayload.to as `0x${string}`,
      data: txPayload.data as `0x${string}`,
      value: txPayload.value != null ? BigInt(txPayload.value.toString()) : BigInt(0),
      account: address as `0x${string}`,
      chain: viemChain,
      gas: txPayload.gasLimit != null ? BigInt(txPayload.gasLimit.toString()) : undefined,
    });
  };

  // ... handleGetQuote, handleExecuteSwap, and UI rendering
  // See the complete component in the GitHub repository
}

The full component with state management, token loading, and UI rendering is available in the GitHub repository.

How It Works

Technical Implementation

Authentication (JS SDK + react-hooks for reactive state)

createDynamicClient → initializes the headless Dynamic client with your environment ID.
addEvmExtension → registers EVM wallet support (called client-side only).
sendEmailOTP / verifyOTP → email magic-link authentication.
authenticateWithSocial → social OAuth (Google, etc.) with redirect handling.
connectAndVerifyWithWalletProvider → connect MetaMask or other injected wallets.
createWaasWalletAccounts → auto-create an embedded EVM wallet on sign-up.

Chain Switching

Before any transaction, wallet_switchEthereumChain is called on the Dynamic wallet client to ensure the user’s wallet is on the correct network. A custom viem transport is then created that proxies all requests through the Dynamic wallet, with eth_chainId overridden to match the target chain.

Quote Generation

fetchQuote from @mayanfinance/swap-sdk accepts the from/to token contracts and chain keys, returning one or more route candidates. The integration uses the first (best) quote.

ERC-20 Approval

Before executing a non-native token swap, the integration:

Reads the current allowance via publicClient.readContract
If insufficient, calls walletClient.writeContract to approve the Mayan Forwarder contract
Waits for the approval receipt before proceeding

Swap Execution

getSwapFromEvmTxPayload builds the EVM transaction payload (no ethers.js signer required). The payload is sent directly via walletClient.sendTransaction.

Supported Chains

Direction	Chains
FROM (source, must be EVM)	Ethereum, Polygon, BSC, Avalanche, Arbitrum, Optimism, Base
TO (destination)	All of the above + Solana, Sui, HyperCore

Referral Fee Setup

const quote = (await fetchQuote({
  amountIn64: amountInWei.toString(),
  fromToken: fromToken.contract,
  toToken: toToken.contract,
  fromChain: fromChain.key,
  toChain: toChain.key,
  slippageBps: "auto",
  referrerBps: 100, // 1% referral fee
}))[0];

const txPayload = getSwapFromEvmTxPayload(
  quote,
  address,
  address,
  { evm: "0xYourFeeRecipientAddress" }, // referrer addresses
  address,
  chainId,
  null,
  null
);

Run the Application

pnpm dev

Open http://localhost:3000.

Conclusion

This recipe demonstrates how to build a production-grade cross-chain swap interface using Dynamic’s JavaScript SDK with @dynamic-labs-sdk/react-hooks for reactive auth state. All signing, wallet creation, and session management use the headless JS SDK; the react-hooks package adds lightweight DynamicProvider/useUser/useGetWalletAccounts bindings without pulling in a full UI SDK.

Recipes

Cross-chain swaps with Mayan

What We’re Building

Building the Application

Project setup

Install dependencies

Configure Environment

Initialize Dynamic Client

Create Wallet Context

Define Supported Chains

Create Multi-Chain Swap Component

How It Works

Technical Implementation

Authentication (JS SDK + react-hooks for reactive state)

Chain Switching

Quote Generation

ERC-20 Approval

Swap Execution

Supported Chains

Referral Fee Setup

Run the Application

Conclusion

Additional Resources

​What We’re Building

​Building the Application

​Project setup

​Install dependencies

​Configure Environment

​Initialize Dynamic Client

​Create Wallet Context

​Define Supported Chains

​Create Multi-Chain Swap Component

​How It Works

​Technical Implementation

​Authentication (JS SDK + react-hooks for reactive state)

​Chain Switching

​Quote Generation

​ERC-20 Approval

​Swap Execution

​Supported Chains

​Referral Fee Setup

​Run the Application

​Conclusion

​Additional Resources

What We’re Building

Building the Application

Project setup

Install dependencies

Configure Environment

Initialize Dynamic Client

Create Wallet Context

Define Supported Chains

Create Multi-Chain Swap Component

How It Works

Technical Implementation

Authentication (JS SDK + react-hooks for reactive state)

Chain Switching

Quote Generation

ERC-20 Approval

Swap Execution

Supported Chains

Referral Fee Setup

Run the Application

Conclusion

Additional Resources