Bando Spend Widget

The ideal widget to make crypto spendable easily and efficiently.

Check the complete documentation here:

• Widget Documentation
• BFP Documentation

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

• Install the Bando Widget
• Configure the Widget
• Localization
• Customize Styles
• Wallet Management

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 [email protected].

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.