Getting Started

Install the widget

To get started, install the latest version of OpenOcean Widget and required packages.

npm

npm install @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

yarn

yarn add @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

pnpm

pnpm add @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

• Wagmi is type safe, extensible, and modular library for building Ethereum apps.

• Bigmi is modular TypeScript library that provides reactive primitives for building Bitcoin applications.

• @solana/wallet-adapter-react is modular TypeScript wallet adapters and components for Solana applications.

• TanStack Query is an async state manager that handles requests, caching, and more.

Basic example

Below is a basic example using OpenOcean Widget with container customization.

// import { OpenOceanWidget, WidgetConfig } from '@openocean.finance/widget';
const widgetConfig: WidgetConfig = {
  theme: {
    container: {
      border: '1px solid rgb(234, 234, 234)',
      borderRadius: '16px',
    },
  },
};
export const WidgetPage = () => {
  return (
    <OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};