@bandohq/widget NPM

Bando Spend Widget

The ideal widget to make crypto spendable easily and efficiently.

Check the complete documentation here:

Key Features

All-in-One Solution: Support for all ecosystems, chains and tokens, and products supported by Bando (more and more added every week).
Wallet Management: Includes UI for managing wallets (EVM, solana coming soon) with the option to use your own wallet solution.
Flexible Styling: Customizable themes and styles to seamlessly integrate with your app's design.
Multi-Language Support: Complete UI translations to cater to a global audience.
Broad Compatibility: Tested with React, Next.js, Vite.

Installation

Prerequisites:

Node.js v16+
@tanstack/react-query
wagmi
@bigmi/react
@solana/wallet-adapter-react

Step 1: Install Dependencies

Install the Bando Widget using your favorite package manager eg:

pnpm add @bandohq/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

Configuration

Create a configuration file for your widget:

Configuration Example

import { BandoWidget, WidgetConfig } from "@bandohq/widget";

const widgetConfig: WidgetConfig = {
  theme: {
    container: {
      border: "1px solid rgb(234, 234, 234)",
      borderRadius: "16px",
    },
  },
};

export const WidgetPage = () => {
  return (
    <BandoWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};

Usage

Import and Render the Widget

import { BandoWidget } from "@bandohq/widget";

function App() {
  return <BandoWidget integrator="Your dApp/company name" />;
}

Customize the Widget

You can pass configuration properties and other adjustments:

<BandoWidget
  fromChain="celo"
  fromToken="CELO"
  theme={{
    container: {
      border: "2px solid #000",
      borderRadius: "8px",
    },
  }}
/>

Technologies Used

React
Viem and Wagmi (for on-chain interactions)
Solana support coming soon

Getting Started

Guides:

Next.js Guide

License

This project is licensed under the Apache 2.0 license.

Contact

If you have any questions or suggestions, contact us at support@bando.cool.

Special thanks to @lifinance

"Great software, likewise, requires a fanatical devotion to beauty. If you look inside good software, you find that parts no one is ever supposed to see are beautiful too." - Paul Graham

The bando widget is built on top of the amazing @lifi/wallet-management package and their on @lifi/widget architecture.