OpenOcean
GitHub
Widget

Configuration

Customize the OpenOcean Widget with various configuration options.

Basic Configuration

Terminal
JS
1
import { OpenOceanWidget } from '@openocean.finance/widget';
2


3
const widgetConfig = {
4
  fromChain: 8453,  // Source chain ID
5
  toChain: 8453,    // Destination chain ID
6
  fromToken: '0x0000000000000000000000000000000000000000', // Native token (ETH)
7
  toToken: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913', // USDC
8
  fromAmount: '1',   // Amount to be swapped
9
  subvariant: "bridge", // Enable cross-chain functionality
10
  theme: {
11
    container: {
12
      border: '1px solid rgb(234, 234, 234)',
13
      borderRadius: '16px',
14
    },
15
  },
16
  languages: {
17
    allow: ['en'], // bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh
18
  },
19
};
20


21
export const WidgetPage = () => {
22
  return (
23
    <OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
24
  );
25
};

Configuration Options

fromChain / toChain

Chain IDs for source and destination chains. Use the same value for same-chain swaps.

fromToken / toToken

Token addresses. Use 0x0000...0000 for native tokens.

fromAmount

Default amount to swap (as string).

subvariant

Set to "bridge" for cross-chain functionality.

languages

Restrict languages with allow or deny arrays.

appearance

Set to "light" or "dark".

Theme Customization

Fully customize the widget appearance to match your brand:

Terminal
JS
1
theme: {
2
  palette: {
3
    primary: { main: "#fb534f" },
4
    secondary: { main: "#FFC800" },
5
    background: {
6
      default: "#222037",
7
      paper: "#29273D"
8
    },
9
    text: {
10
      primary: "#ffffff",
11
      secondary: "#8C7F8C"
12
    },
13
    grey: {
14
      200: "#EEEFF2",
15
      300: "#D5DAE1",
16
      700: "#555B62",
17
      800: "#373F48"
18
    }
19
  },
20
  shape: {
21
    borderRadius: 12,
22
    borderRadiusSecondary: 12,
23
    borderRadiusTertiary: 24
24
  },
25
  typography: {
26
    fontFamily: "Inter, sans-serif"
27
  },
28
  container: {
29
    boxShadow: "0px 8px 32px rgba(0, 0, 0, 0.08)",
30
    borderRadius: "16px"
31
  },
32
  components: {
33
    MuiCard: {
34
      defaultProps: { variant: "filled" }
35
    },
36
    MuiTabs: {
37
      styleOverrides: {
38
        root: {
39
          backgroundColor: "#29273D",
40
          ".MuiTabs-indicator": {
41
            backgroundColor: "#17122b"
42
          }
43
        }
44
      }
45
    }
46
  }
47
}

Referral Fee

The default referrer fee is 0%. Customize your fee via the config playground. Contact the team on Telegram for fee share adjustments.

Next Steps

Advanced Integration

Full integration examples.