Integration Examples

OpenOcean Widget Integration Guide

This guide provides step-by-step instructions for integrating OpenOcean Widget into different frameworks and setups.

Table of Contents

  • Vite + React

  • Next.js (App Router)

  • Next.js (Pages Router)

  • Vue 3

  • Nuxt 3

  • Svelte

  • Remix

  • RainbowKit

  • ConnectKit

  • Privy

  • Privy + Ethers

  • Reown (WalletConnect)

  • Dynamic

  • Zustand Widget Config

  • Deposit Flow


Vite + React

Installation

Configuration

vite.config.ts

Usage

src/App.tsx

Key Points

  • Requires vite-plugin-node-polyfills for Node.js polyfills

  • Basic React integration without wallet management

  • Can be extended with wallet providers


Next.js (App Router)

Installation

Configuration

next.config.js

Usage

app/page.tsx

components/Widget.tsx

components/ClientOnly.tsx

Key Points

  • Use 'use client' directive for client components

  • Implement ClientOnly wrapper to prevent SSR issues

  • Use WidgetSkeleton as fallback during SSR

  • Configure transpilePackages in next.config.js


Next.js (Pages Router)

Installation

Same as Next.js App Router.

Usage

pages/index.tsx

components/Widget.tsx

Same implementation as App Router, but without 'use client' directive (not needed in Pages Router).

Key Points

  • Similar to App Router but uses pages/ directory

  • No need for 'use client' directive

  • Still requires ClientOnly wrapper for SSR safety


Vue 3

Installation

Configuration

vite.config.ts

Usage

src/components/Widget.vue

Key Points

  • Uses veaury to bridge React and Vue components

  • Requires both Vue and React plugins in Vite

  • Use applyPureReactInVue or applyReactInVue HOC


Nuxt 3

Installation

Configuration

nuxt.config.ts

Usage

components/WidgetContainer.vue

app.vue

Key Points

  • Use ClientOnly component for SSR safety

  • Disable SSR or use client-only rendering

  • Same Vue-React bridge approach as Vue 3


Svelte

Installation

Configuration

vite.config.ts

Usage

src/lib/OpenOceanWidget.svelte

src/lib/ReactAdapter.svelte

You'll need a React adapter component. Check the example for the full implementation.

Key Points

  • Requires a React adapter to use React components in Svelte

  • Both Svelte and React plugins needed

  • Custom adapter implementation required


Remix

Installation

Configuration

remix.config.js

Usage

app/routes/_index.tsx

app/components/OpenOceanWidget.tsx

Key Points

  • Requires React Query provider

  • Server-side rendering support

  • Configure Remix for ES modules


RainbowKit

Installation

Configuration

src/config/wagmi.ts

Usage

src/App.tsx

Key Points

  • Integrates with RainbowKit wallet connection

  • Uses walletConfig.onConnect to trigger RainbowKit modal

  • Requires Wagmi and React Query setup


ConnectKit

Installation

Configuration

src/config/queryClient.ts

src/providers/WalletProvider.tsx

Set up ConnectKit wallet provider. See example for full implementation.

Usage

src/App.tsx

Key Points

  • Uses OpenOcean's wallet-management package

  • Integrates with ConnectKit

  • Requires QueryClient setup


Privy

Installation

Configuration

src/config/queryClient.ts

Usage

src/App.tsx

Key Points

  • Integrates with Privy authentication

  • Supports multiple login methods

  • Requires Privy app ID


Privy + Ethers

Installation

Usage

Similar to Privy example but with Ethers.js integration for wallet operations.

Key Points

  • Extends Privy with Ethers.js

  • Provides more wallet control

  • See example for wallet provider implementation


Reown (WalletConnect)

Installation

Configuration

src/config/wagmi.ts

Usage

src/App.tsx

Key Points

  • Uses Reown (WalletConnect v4)

  • Requires project ID from WalletConnect Cloud

  • Full Wagmi integration


Dynamic

Installation

Configuration

src/config/dynamic.ts

Usage

src/App.tsx

Key Points

  • Integrates with Dynamic Labs wallet SDK

  • Requires environment ID

  • Supports multiple wallet types


Zustand Widget Config

Installation

Usage

This example demonstrates using Zustand for widget configuration state management with form controls.

src/store/createWidgetConfigStore.ts

src/App.tsx

src/components/WidgetView.tsx

Key Points

  • Uses Zustand for state management

  • Separates form controls from widget view

  • Allows dynamic widget configuration updates

  • Good for complex state management scenarios

  • Supports form value updates without affecting other config


Deposit Flow

Installation

Usage

This example demonstrates a deposit flow integration with custom contract calls and deposit card.

src/App.tsx

Key Points

  • Custom deposit flow with contract calls

  • Uses subvariant: 'custom' with custom: 'deposit'

  • Custom contractComponent for deposit UI

  • Disables and hides specific UI elements

  • Requires contractTool configuration


Common Configuration Options

All examples support these common configuration options:

Troubleshooting

SSR Issues

  • Use ClientOnly wrapper in Next.js/Nuxt

  • Disable SSR if not needed

  • Use WidgetSkeleton as fallback

Wallet Connection Issues

  • Ensure wallet providers are properly configured

  • Check network/chain configurations

  • Verify API keys and project IDs

Build Issues

  • Install required polyfills (buffer, process)

  • Configure Vite/Rollup for React components

  • Check transpilePackages in Next.js config

Support

For more information, visit:

Last updated