> ## Documentation Index
> Fetch the complete documentation index at: https://docs.caldera.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Get started with the Metalayer Bridge Widget for cross-chain token bridging

## Features

* Cross-chain token bridging
* Multi-wallet support (Ethereum + Solana)
* Responsive design
* Framework agnostic
* Type-safe with TypeScript

## Installation

### EVM Only

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm add viem wagmi @tanstack/react-query @metalayer/sdk @metalayer/widget
  ```

  ```bash npm theme={null}
  npm install viem wagmi @tanstack/react-query @metalayer/sdk @metalayer/widget
  ```

  ```bash yarn theme={null}
  yarn add viem wagmi @tanstack/react-query @metalayer/sdk @metalayer/widget
  ```
</CodeGroup>

### EVM + Solana (beta)

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm add viem wagmi @tanstack/react-query @solana/web3.js @solana/spl-token @metalayer/sdk @metalayer/widget
  ```

  ```bash npm theme={null}
  npm install viem wagmi @tanstack/react-query @solana/web3.js @solana/spl-token @metalayer/sdk @metalayer/widget
  ```

  ```bash yarn theme={null}
  yarn add viem wagmi @tanstack/react-query @solana/web3.js @solana/spl-token @metalayer/sdk @metalayer/widget
  ```
</CodeGroup>

<Warning>
  **Solana support is currently in beta** and not available in mainnet environments. Contact our team to enable Solana bridging for testnet.
</Warning>

## API Key Setup

Contact our team to get your API key.

## Basic Usage

```tsx theme={null}
import '@metalayer/widget/styles.css';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WidgetProvider, Widget } from '@metalayer/widget';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
});

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <WidgetProvider
          sdkConfig={{
            apiKey: 'your-api-key',
            environment: 'mainnet',
          }}
          onSupportedChainsLoad={(chains) => {
            // Update your wagmi config with the widget's supported chains
          }}
        >
          <Widget onConnectClick={() => openWalletModal()} />
        </WidgetProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

> **Note:** The widget requires a `WagmiProvider` from your application. Use
> `onSupportedChainsLoad` to update your wagmi config with the chains the widget supports.