Skip to content
/ widget Public

Bando Widget - Enabling spending into every wallet and Dapp.

License

Notifications You must be signed in to change notification settings

bandohq/widget

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:


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.