# Frameworks

## Next.js App Router

See the [Getting Started guide](broken://pages/da44cbbeddd86ec7ab9bc5c02ebcb17f8e61fa95) for a complete Next.js App Router example with step-by-step instructions.

***

## Next.js Pages Router

For Next.js Pages Router, wrap your app in `_app.tsx`:

{% code title="pages/\_app.tsx" %}

```typescript
import type { AppProps } from 'next/app';
import '@ordanetwork/sdk/react/styles.css';
import { Providers } from '../components/Providers';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Providers>
      <Component {...pageProps} />
    </Providers>
  );
}
```

{% endcode %}

{% code title="components/Providers.tsx" %}

```typescript
'use client';

import { OrdaProvider, createAppKitConfig } from '@ordanetwork/sdk/react';

const appKitConfig = createAppKitConfig({
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OrdaProvider
      config={{
        getToken: async () => {
          const res = await fetch('/api/auth/jwt', { method: 'POST' });
          return res.json();
        },
        appKitConfig,
      }}
    >
      {children}
    </OrdaProvider>
  );
}
```

{% endcode %}

{% code title="pages/api/auth/jwt.ts" %}

```typescript
import type { NextApiRequest, NextApiResponse } from 'next';
import { UniversalHttpClient, JWT } from '@ordanetwork/sdk';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const httpClient = new UniversalHttpClient(
      process.env.NEXT_PUBLIC_ORDA_API_BASE_URL || 'https://api.orda.network/v1',
      30000
    );
    const jwtApi = new JWT(httpClient);

    const { token, expiresAt } = await jwtApi.generate({
      clientId: process.env.ORDA_CLIENT_ID!,
      clientSecret: process.env.ORDA_CLIENT_SECRET!,
      permissions: [
        'quotes:read',
        'offramp:read',
        'onramp:read',
        'transactions:read',
        'recipients:read',
        'recipients:write',
      ],
    });

    res.status(200).json({
      jwt: token,
      expiresAt: Math.floor(new Date(expiresAt).getTime() / 1000),
    });
  } catch (error: any) {
    console.error('JWT generation failed:', error);
    res.status(500).json({ error: error?.message || 'Authentication failed' });
  }
}
```

{% endcode %}

***

## Vite + React

{% code title="main.tsx" %}

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@ordanetwork/sdk/react/styles.css';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

{% endcode %}

{% code title="App.tsx" %}

```typescript
import { OrdaProvider, createAppKitConfig, Widget } from '@ordanetwork/sdk/react';

const appKitConfig = createAppKitConfig({
  projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID,
});

function App() {
  return (
    <OrdaProvider
      config={{
        getToken: async () => {
          // Call your backend to get JWT
          const res = await fetch('https://yourapi.com/auth/jwt', {
            method: 'POST',
          });
          return res.json();
        },
        appKitConfig,
      }}
    >
      <div className="app">
        <Widget />
      </div>
    </OrdaProvider>
  );
}

export default App;
```

{% endcode %}

***

## Create React App

Similar to Vite, but use `process.env.REACT_APP_*` for environment variables:

{% code title="index.tsx" %}

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@ordanetwork/sdk/react/styles.css';
import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

{% endcode %}

Create React App setup is similar to Vite:

{% code title="App.tsx (Create React App)" %}

```typescript
import { OrdaProvider, createAppKitConfig, Widget } from '@ordanetwork/sdk/react';

const appKitConfig = createAppKitConfig({
  projectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID!,
});

function App() {
  return (
    <OrdaProvider
      config={{
        getToken: async () => {
          const res = await fetch('https://yourapi.com/auth/jwt', {
            method: 'POST',
          });
          return res.json();
        },
        appKitConfig,
      }}
    >
      <div className="app">
        <Widget />
      </div>
    </OrdaProvider>
  );
}

export default App;
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.orda.network/developers/widget-beta/frameworks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.