Deserialize 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 on 0g Chain
• Token swap flow with live quotes
• Fully styled with Radix + Tailwind Merge
• Written in TypeScript with full type definitions

📦 Installation

Install via npm (or yarn / pnpm):

npm install deserialize-0g-swap-widget
# or
yarn add deserialize-0g-swap-widget
# or
pnpm add deserialize-0g-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 "deserialize-0g-swap-widget";
import "deserialize-0g-swap-widget/styles.css";

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

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 "deserialize-0g-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 "deserialize-0g-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 "deserialize-0g-swap-widget";