Widget playground

// Install: pnpm add aegis-swap-widget  (or npm i aegis-swap-widget)

import * as React from 'react'
import { AegisEngineWidget } from 'aegis-swap-widget'
import 'aegis-swap-widget/styles.css'
import { mainnet, unichain, robinhood, base, ink } from 'viem/chains'

// Required host integration: implement this same-origin proxy and route it
// to your deployed Engine REST API. /api/engine is not provided by the widget.
const ENGINE_REST_BASE_URL = '/api/engine'

export function Engine() {
  const [chainId, setChainId] = React.useState(8453)

  // Engine needs an explicit chains map (the SDK default is mainnet-only).
  // One entry per supported chain — provide the router, RPC URLs, and explorer.
  const engineChains = {
    1: {
      chain: mainnet,
      name: 'Ethereum',
      router: '0x00581261a1200956ea05d1810fF28ffd66D8E254',
      rpcUrls: ['https://eth.drpc.org', 'https://ethereum-rpc.publicnode.com'],
      explorerTxUrl: (hash) => `https://etherscan.io/tx/${hash}`,
    },
    130: {
      chain: unichain,
      name: 'Unichain',
      router: '0x9641682F95baD3305C18c549a483F413d23dC72e',
      rpcUrls: ['https://unichain-rpc.publicnode.com', 'https://mainnet.unichain.org/'],
      explorerTxUrl: (hash) => `https://uniscan.xyz/tx/${hash}`,
    },
    4663: {
      chain: robinhood,
      name: 'Robinhood Chain',
      router: '0xe2820f3DA0abC9C65B3727A7103E3F59c00D686E',
      rpcUrls: ['https://rpc.mainnet.chain.robinhood.com'],
      explorerTxUrl: (hash) => `https://robinhoodchain.blockscout.com/tx/${hash}`,
    },
    8453: {
      chain: base,
      name: 'Base',
      router: '0x00581261a1200956ea05d1810fF28ffd66D8E254',
      rpcUrls: ['https://base-rpc.publicnode.com', 'https://mainnet.base.org'],
      explorerTxUrl: (hash) => `https://basescan.org/tx/${hash}`,
    },
    57073: {
      chain: ink,
      name: 'Ink',
      router: '0xe2820f3DA0abC9C65B3727A7103E3F59c00D686E',
      rpcUrls: ['https://rpc-gel.inkonchain.com', 'https://rpc-qnd.inkonchain.com'],
      explorerTxUrl: (hash) => `https://explorer.inkonchain.com/tx/${hash}`,
    },
  }

  return (
    <AegisEngineWidget
      chains={engineChains}
      enabledChainIds={[1, 130, 4663, 8453, 57073]}
      pinnedChainIds={[1, 130, 4663, 8453, 57073]}
      theme="auto"
      accentColor="#31d48a"
      defaultSurface="borrow"
      maxEngineSwapPriceImpactBps={500}
      showTokenPriceHistory={true}
      showEngineMarketHistory={true}
      borrowFlow="simple"
      chainId={chainId}
      onChainChange={setChainId}
      engineDataSource={{ kind: "rest", baseUrl: ENGINE_REST_BASE_URL }}
    />
  )
}