Getting Started
Install the widget
To get started, install the latest version of OpenOcean Widget and required packages.
npm install @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={} />
Last updated