Deserialise Swap Widget

A plug-and-play React/Next.js widget for swapping tokens using the deserialize-evm-client-sdk. Built with Radix UI, Framer Motion, Tailwind utilities, and TypeScript.

✨ Features

• ⚡ Plug & Play React/Next.js component
• 💳 Fetches and displays wallet token balances
• 🔄 Token swap flow with live quotes
• 🎨 Fully styled with Radix + Tailwind Merge (customizable)
• 📦 Written in TypeScript with full type definitions

📦 Installation

Install via npm (or yarn / pnpm):

npm install deserialise-swap-widget
# or
yarn add deserialise-swap-widget
# or
pnpm add deserialise-swap-widget

You also need peer dependencies (if your project doesn’t already include them):

npm install react react-dom ethers framer-motion lucide-react clsx tailwind-merge

🚀 Usage

Basic Example (Next.js / React)

"use client";

import { SwapForm } from "deserialise-swap-widget";

export default function SwapPage() {
  return (
    <div className="max-w-md mx-auto mt-10">
      <SwapForm walletAddress="0xYourWalletAddress" connected={true} />
    </div>
  );
}

With Toast Notifications

import { useToast } from "@/components/ui/use-toast";
import { SwapForm } from "deserialise-swap-widget";

export default function SwapWithToast({
  walletAddress,
}: {
  walletAddress: string;
}) {
  const { toast } = useToast();

  return (
    <SwapForm
      walletAddress={walletAddress}
      connected={true}
      onToast={({ title, description, className }) =>
        toast({
          title,
          description,
          className,
        })
      }
    />
  );
}

With Default Parameters

<SwapForm
  walletAddress="0xYourWallet"
  connected={true}
  defaultParams={{
    tokenIn: "0xTokenInAddress",
    tokenOut: "0xTokenOutAddress",
    amount: "1.5",
    dexId: "ZERO_G",
  }}
/>

Listening to Param Changes

<SwapForm
  walletAddress="0xYourWallet"
  connected={true}
  onParamsChange={(params) => {
    console.log("Swap form params updated:", params);
  }}
/>

🧩 Hooks

useWalletAssets

import { useWalletAssets } from "deserialise-swap-widget";

function Balances({ walletAddress }: { walletAddress: string }) {
  const { assets, loading, error } = useWalletAssets(walletAddress);

  if (loading) return <p>Loading balances...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {assets.map((a) => (
        <li key={a.address}>
          {a.symbol}: {a.balance}
        </li>
      ))}
    </ul>
  );
}

fetchAssets

import { fetchAssets } from "deserialise-swap-widget";
import { useDeserializeEVM } from "deserialize-evm-client-sdk";

const { getBalance } = useDeserializeEVM("0xYourWallet");

const assets = await fetchAssets("0xYourWallet", getBalance);
console.log(assets);

🛠 Types

import type {
  SwapFormProps,
  TokenAsset,
  FormState,
  DexIdTypes,
  InputActionButtonType,
} from "deserialise-swap-widget";