Advanced Integration
A complete demo application showcasing the integration of OpenOcean Widget with wallet connectivity using Wagmi and RainbowKit.
Getting Started
Install Dependencies
Install the required packages for this demo:
Using npm
npm install @openocean.finance/widget wagmi @tanstack/react-query @rainbow-me/rainbowkit react react-domUsing yarn
yarn add @openocean.finance/widget wagmi @tanstack/react-query @rainbow-me/rainbowkit react react-domUsing pnpm
pnpm add @openocean.finance/widget wagmi @tanstack/react-query @rainbow-me/rainbowkit react react-domKey Dependencies
OpenOcean Widget - The main widget component for token swapping
Wagmi - Type-safe, extensible, and modular library for building Ethereum apps
RainbowKit - React library for wallet connection UI
TanStack Query - Async state manager for requests and caching
Project Structure
This demo consists of a single file implementation:
src/
├── main.tsx # Main application file (everything in one file)
├── components/
│ └── wagmi.ts # Wagmi configuration
└── index.css # Global stylesComplete Example
The entire application is implemented in a single main.tsx file:
import { createRoot } from 'react-dom/client'
import { OpenOceanWidget } from "@openocean.finance/widget";
import { useConnectModal, RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { http, createConfig, useAccount, WagmiProvider, useDisconnect } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import '@rainbow-me/rainbowkit/styles.css'
// Wagmi Configuration
export const config = createConfig({
chains: [mainnet],
connectors: [
injected({
shimDisconnect: true,
}),
],
transports: {
[mainnet.id]: http(),
},
})
const queryClient = new QueryClient()
function App() {
const { openConnectModal } = useConnectModal()
const { isConnected } = useAccount()
const { disconnect } = useDisconnect()
const handleDisconnectWallet = () => {
try {
console.log("Attempting to disconnect wallet")
disconnect()
console.log("Wallet disconnected")
} catch (error) {
console.error("Disconnect failed:", error)
}
}
const widgetConfig = {
variant: "compact" as const,
appearance: "dark" as const,
subvariant: "split" as const,
theme: {
palette: {
primary: {
main: "#fb534f"
},
secondary: {
main: "#FFC800"
},
background: {
default: "#222037",
paper: "#29273D"
},
text: {
primary: "#ffffff",
secondary: "#8C7F8C"
},
grey: {
200: "#EEEFF2",
300: "#D5DAE1",
700: "#555B62",
800: "#373F48"
}
},
shape: {
borderRadius: 12,
borderRadiusSecondary: 12,
borderRadiusTertiary: 24
},
typography: {
fontFamily: "Inter, sans-serif"
},
container: {
boxShadow: "0px 8px 32px rgba(0, 0, 0, 0.08)",
borderRadius: "16px"
},
components: {
MuiCard: {
defaultProps: {
variant: "filled"
}
},
MuiTabs: {
styleOverrides: {
root: {
backgroundColor: "#29273D",
".MuiTabs-indicator": {
backgroundColor: "#17122b"
}
}
}
}
}
},
walletConfig: {
onConnect: ()=> {
openConnectModal?.()
}
}
}
return (
<div style={{ background: "#0a0a0a", minHeight: "100vh" }}>
<nav style={{
background: "#1a1a1a",
padding: "15px 20px",
borderBottom: "1px solid #333",
display: "flex",
gap: "20px",
alignItems: "center"
}}>
<h2 style={{ color: "#ffffff", margin: 0 }}>OpenOcean Widget Demo</h2>
</nav>
<div style={{ padding: "20px" }}>
<div style={{
background: "#1a1a1a",
padding: "10px",
marginBottom: "20px",
borderRadius: "8px",
color: "#ffffff",
fontSize: "12px"
}}>
{!isConnected && <button
onClick={openConnectModal}
style={{
background: "#2196F3",
color: "#ffffff",
border: "none",
padding: "8px 16px",
borderRadius: "4px",
cursor: "pointer",
marginRight: "10px"
}}
>
Open Connect Modal
</button>}
{isConnected && (
<button
onClick={handleDisconnectWallet}
style={{
background: "#f44336",
color: "#ffffff",
border: "none",
padding: "8px 16px",
borderRadius: "4px",
cursor: "pointer"
}}
>
Disconnect
</button>
)}
</div>
<div style={{
width: "100%",
height: "600px",
border: "1px solid #333",
borderRadius: "12px",
overflow: "hidden"
}}>
<OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
</div>
</div>
</div>
);
}
// Render the application
createRoot(document.getElementById('root')!).render(
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
<App />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)Features
This demo includes:
Wallet Integration: Seamless wallet connection using RainbowKit
OpenOcean Widget: Full-featured token swapping widget
Custom Theme: Dark theme with custom styling
Responsive Design: Mobile-friendly interface
Single File Architecture: Everything in one
main.tsxfile for easy deployment
Running the Demo
Install dependencies:
npm installStart the development server:
npm run devOpen your browser and navigate to the local development URL
Configuration
The widget is configured with:
Variant: Compact layout
Appearance: Dark theme
Subvariant: Split view
Chains: Ethereum mainnet
Wallet Integration: RainbowKit modal
Customization
You can customize the widget by modifying the widgetConfig object in the main.tsx file. Key customization options include:
Theme colors and styling
Supported chains
Default tokens
Widget appearance and layout
Last updated