@aurora-is-near/intents-swap-widget-standalone

The Intents Swap Widget with wallet connection built in. This is the fastest way to add cross-chain swaps to a React app: no wallet libraries, provider setup or connect button needed.

[!TIP] Your app already connects wallets, or you need TON? Use the core @aurora-is-near/intents-swap-widget with the chain adapters instead.

Quick start

1. Get an API key in Widget Studio. You can also design your widget there and copy a ready-made snippet.

2. Install:

npm install @aurora-is-near/intents-swap-widget-standalone

3. Render:

import '@aurora-is-near/intents-swap-widget/styles.css'; // installed as a dependency

import {
  Widget,
  WidgetConfigProvider,
} from '@aurora-is-near/intents-swap-widget-standalone';

export function Swap() {
  return (
    <WidgetConfigProvider config={{ apiKey: 'YOUR_STUDIO_API_KEY' }}>
      <Widget />
    </WidgetConfigProvider>
  );
}

The widget now renders its own Connect wallet button and a profile button for connecting and disconnecting.

What's included

EVM networks in the wallet modal: Ethereum, Arbitrum, Base, BSC, Polygon, Optimism, Avalanche, Gnosis, Berachain, Monad, Plasma, Scroll, X Layer, ADI, Robinhood Chain, Aurora.

Users can still swap to any supported chain, including chains they have no wallet for.

How it relates to the other packages

flowchart LR
    SA["<b>intents-swap-widget-standalone</b><br/>wallet modal + wiring"] --> CORE["<b>intents-swap-widget</b><br/>UI, quotes, state"]
    SA --> EVM[intents-swap-widget-evm]
    SA --> SOL[intents-swap-widget-solana]
    SA --> XLM[intents-swap-widget-stellar]
    EVM -. plugin .-> CORE
    SOL -. plugin .-> CORE
    XLM -. plugin .-> CORE

This package re-exports everything from the core package. The one difference is WidgetConfigProvider, which here connects the wallets and fills these config keys for you:

All other options work the same as in the core package: apiKey, appFees, allowed tokens and chains, confidentialMode, theme, localisation, …

<WidgetConfigProvider
  config={{
    apiKey: 'YOUR_STUDIO_API_KEY',
    allowedChainsList: ['eth', 'base', 'sol', 'near'],
    defaultTargetToken: { symbol: 'USDC', blockchain: 'base' },
    appFees: [{ recipient: 'your-app.near', fee: 20 }],
  }}
  theme={{ colorScheme: 'dark', accentColor: '#bc9cf8', stylePreset: 'bold' }}>
  <Widget />
</WidgetConfigProvider>

📖 Full option reference: Widget Configuration · Theming · Localisation

Extra exports

Standalone or core?

Troubleshooting

Links

License

MIT