Vento Swap Widget

React widget for token swapping on AO (Vento SDK). Draggable button, modal, token selector, quotes, execution, and live status. Light/dark themes.

Features

• Floating button (optional drag)
• Quotes + execution (@vela-ventures/vento-sdk)
• Wallet-aware overlay when not connected

Install

npm i @vela-ventures/vento-widget

React 18+ is required.

Quick start

import { VentoWidget } from "@vento/widget";

export default function App() {
  return <VentoWidget />;
}

The widget uses window.arweaveWallet.getActiveAddress(). If unavailable, it shows a "Wallet is not connected" overlay.

Passing a wallet (optional)

If you want to provide a wallet explicitly (e.g., injected or custom), pass it to the widget. The widget will wrap it with createDataItemSigner internally.

<VentoWidget wallet={window.arweaveWallet} />

Controlled wallet state (optional)

For better wallet connection management, you can control the wallet state explicitly:

import { ConnectButton, useConnection } from "@arweave-wallet-kit/react";

function App() {
  const { connected, connect, disconnect } = useConnection();

  return (
    <>
      <VentoWidget
        theme="dark"
        onConnectWallet={connect}
        isWalletConnected={connected}
      />
    </>
  );
}

Props (most-used)

type ModalPosition = {
  top?: string;
  right?: string;
  bottom?: string;
  left?: string;
};

interface VentoWidgetProps {
  theme?: "light" | "dark"; // default: "dark"
  position?: ModalPosition; // button position
  draggable?: boolean; // default: true
  wallet?: any; // optional
  isWalletConnected?: boolean; // controlled wallet state
  walletAddress?: string; // controlled wallet address
  onConnectWallet?: () => void; // connect wallet callback
  // More: buttonClassName, modalClassName, showBackdrop, buttonContent, onButtonClick, onModalClose
}

Theming

CSS variables are scoped to .vento-widget. You can override them in host apps:

.vento-widget {
  /* host overrides */
}

Development

npm run dev       # watch build
npm run build     # production build
npm run type-check

Notes

• Externalized deps: @vela-ventures/vento-sdk, @permaweb/aoconnect (install in host app).
• Wallet detection uses getActiveAddress() with overlay fallback.

License

MIT