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 } from 'viem/chains'

// Required Wolf host integration: implement this same-origin proxy so its
// market response contains only GRASS, WATER, WOOD, and STONE.
const WOLF_ENGINE_REST_BASE_URL = "/api/engine/wolf"

// The nested Trade Store has a separate data-plane contract. This route must
// expose /v1/config, /v1/markets, /v1/tokens, and token price history.
const AEGIS_SWAP_REST_BASE_URL = '/api/aegis'

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

  // 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}`,
    },
  }

  return (
    <AegisEngineWidget
      chains={engineChains}
      enabledChainIds={[1]}
      pinnedChainIds={[1]}
      theme="light"
      accentColor="#753a19"
      accentTextColor="#f4f8f5"
      ariaLabel="Wolf Game Trade and Earn"
      surfaces={["buy", "lend"]}
      defaultSurface="buy"
      surfaceLabels={{
        "buy": "Trade",
        "lend": "Earn",
      }}
      partnerContextVariant="embedded"
      lendPresentation="simple-yield"
      lendAmountUnitDefault="token"
      lendCopy={{
        "fundsDestinationNote": "Your {symbol} goes into the market. If {symbol} gets cheaper, your share may be worth less when you withdraw. You can keep earning while the market is active.",
        "manageAddFunds": "Earn more with this resource.",
        "submit": "Deposit",
        "amountLabel": "Deposit Amount",
      }}
      showTransactionSteps={true}
      defaultApprovalMode="exact"
      showApprovalMode={false}
      showAmountSlider="always"
      detailsPlacement="none"
      defaultTransactionDetailsOpen={false}
      defaultMode="lend"
      maxEngineSwapPriceImpactBps={500}
      borrowFlow="simple"
      defaultMarketId="evm_1_0xC516DBA7BD70AA2DCB986BB1C27208EA29ECD097FA0CE636611E88E54AE4444D"
      buySwapConfig={{
        "chainId": 1,
        "enabledChainIds": [1],
        "pinnedChainIds": [1],
        "poolIds": ["GRASS_USDC","WATER_USDC","WOOD_USDC","STONE_USDC"],
        "presentation": "store",
        "storeLayout": "list",
        "storePriceQuantity": 1000,
        "storeQuickAmounts": ["25%","50%","75%","max"],
        "storeCopy": {"title":"","subtitle":"","priceHeading":"Per 1,000","rowHint":"","sheetEyebrow":"","referenceTotalLabel":"Estimated total","priceVariationHint":"Final price may vary.","buyProtectionHint":"","sellProtectionHint":"","executablePriceHint":"","balanceConnectHint":"Connect wallet to see balance","walletConnectHint":""},
        "showTransactionSteps": true,
        "showExecutionDetails": false,
        "defaultExecutionDetailsOpen": false,
      }}
      chainId={chainId}
      onChainChange={setChainId}
      engineDataSource={{ kind: "rest", baseUrl: WOLF_ENGINE_REST_BASE_URL }}
      backendBaseUrl={AEGIS_SWAP_REST_BASE_URL}
    />
  )
}