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-dom

Using yarn

yarn add @openocean.finance/widget wagmi @tanstack/react-query @rainbow-me/rainbowkit react react-dom

Using pnpm

pnpm add @openocean.finance/widget wagmi @tanstack/react-query @rainbow-me/rainbowkit react react-dom

Key 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 styles

Complete 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.tsx file for easy deployment

Running the Demo

1. Install dependencies:

npm install

1. Start the development server:

npm run dev

1. Open 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