# Getting Started

### **Install the widget**

To get started, install the latest version of OpenOcean Widget and required packages.

{% tabs %}
{% tab title="npm" %}
`npm install @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query`
{% endtab %}

{% tab title="yarn" %}
`yarn add @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query`
{% endtab %}

{% tab title="pnpm" %}
`pnpm add @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query`
{% endtab %}
{% endtabs %}

* [Wagmi](https://wagmi.sh/) is type safe, extensible, and modular library for building Ethereum apps.
* [Bigmi](https://github.com/openocean/bigmi) is modular TypeScript library that provides reactive primitives for building Bitcoin applications.
* [@solana/wallet-adapter-react](https://github.com/anza-xyz/wallet-adapter) is modular TypeScript wallet adapters and components for Solana applications.
* [TanStack Query](https://tanstack.com/query/v5) 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. 

```javascript
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',
      },
    },
  languages: {
    allow: ['en'], // bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh
    // deny: ['uk'],
  },
  };
  export const WidgetPage = () => {
    return (
      <OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
    );
};
```

{% hint style="warning" %}
**Example of loading the widget under a nested (second-level) route:**\
In the route configuration, change `/trade` to `/trade/*`:
\
`<Route path="/trade/*" element={} />`
{% endhint %}