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. It is recommended to use version ^5.72.0 or above.

Basic example

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

import { OpenOceanWidget } from '@openocean.finance/widget';
const widgetConfig = {
    fromChain: 8453,  // Source chain ID
    toChain: 8453,    // Destination chain ID (same as source in this case)
    fromToken: '0x0000000000000000000000000000000000000000', // Address of the token you are sending (e.g., native token like ETH)
    toToken: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',   // Address of the token you want to receive
    fromAmount: '1'   // Amount to be swapped 
    subvariant："bridge" // Set this only if you're enabling cross-chain functionality
    theme: {
      container: {
        border: '1px solid rgb(234, 234, 234)',
        borderRadius: '16px',
      },
    },
  };
  export const WidgetPage = () => {
    return (
      <OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
    );
};

Example of loading the widget under a nested (second-level) route: In the route configuration, change /trade to /trade/*: <Route path="/trade/*" element={} />