aegis-swap-widget 0.3.4 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- 51a71c0: Update the React widget to consume the backend-aligned Core contract, refresh network and token controls, improve accessibility and receipt/status presentation, and harden package exports/declaration health.
+
+### Patch Changes
+
+- Updated dependencies [28c52c3]
+  - @aegis-engine/core@0.2.0
+
+## 0.3.5
+
+### Patch Changes
+
+- 155f6d5: Route Connect wallet and network-switch CTAs through wallet actions before swap validation. Derive the aggregated widget's submit `data-action` from the wallet connection state so it reports `connect` instead of `swap` while the CTA reads "Connect wallet".
+
+  Confirm the wallet actually moved to the target chain before the network-switch
+  CTA advances, instead of optimistically marking it switched.
+
+- Updated dependencies [d38966f]
+  - @aegis-engine/core@0.1.3
+
 ## 0.3.4
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # Aegis Swap Widget
 
-Embeddable React swap widget for Aegis direct pools. Import the component, import the CSS, and configure pools, wallet handoff, and host styling through props.
+Seamlessly embed Aegis Swap directly in your React application. Import the component, import the CSS, and configure networks, wallet handoff, and host styling through props.
 
 The host app normally only renders `<AegisSwapWidget />`. Quoting, token approval, Permit2 signing, and swap submission are handled inside the widget.
 
@@ -20,7 +20,8 @@ npm install aegis-swap-widget
 ```
 
 Peer dependencies (provided by the host app): `react >=18 <20`, `react-dom >=18 <20`,
-and `viem ^2`. The package is ESM-only and ships no runtime dependencies of its own.
+and `viem ^2`. The package is ESM-only. Its only runtime dependencies are
+`@aegis-engine/core` (the swap engine) and `lucide-react` (icons).
 
 ## Basic Usage
 
@@ -33,7 +34,53 @@ export function Swap() {
 }
 ```
 
-Without a `pools` prop, the widget uses the bundled Aegis WATER, WOOD, GRASS, and STONE pool configs. For production integrations, pass the pools the host app wants to expose.
+Without a `pools` prop, the widget loads Aegis config, token metadata, and market
+discovery from the production backend REST API. Pass `backendBaseUrl={null}` to
+use the bundled static WATER, WOOD, GRASS, and STONE mainnet pool configs, or
+pass `pools` when a host wants to pin its own audited pool set.
+
+The backend-enabled network list comes from `GET /v1/config` (`chains[]`). By
+default the widget exposes every backend chain it can configure. Projects that
+only support a subset should pass `enabledChainIds`; the first entry becomes
+the uncontrolled initial network and the widget only fetches markets for
+enabled chains:
+
+```tsx
+<AegisSwapWidget enabledChainIds={[130]} />
+<AegisSwapWidget enabledChainIds={[1, 8453]} />
+```
+
+Use `pinnedChainIds` when the project supports several chains but wants common
+choices surfaced first in the network selector and token selector. This only changes
+display order; it never enables chains outside `enabledChainIds` or backend
+config:
+
+```tsx
+<AegisSwapWidget enabledChainIds={[1, 130, 8453]} pinnedChainIds={[8453, 1]} />
+```
+
+By default the compact network selector uses the host accent color. Set
+`networkSelectorColorMode="chain"` to use the built-in DFF chain palette
+(Ethereum grey, Unichain pink, Base blue) for selector chrome:
+
+```tsx
+<AegisSwapWidget networkSelectorColorMode="chain" />
+```
+
+The selector renders as a compact chain-icon strip by default. Hosts that prefer
+a single menu trigger can opt into the dropdown presentation without changing
+the enabled network catalog:
+
+```tsx
+<AegisSwapWidget networkSelectorVariant="dropdown" />
+```
+
+The selector sits on the left by default. Use `networkSelectorPosition="right"`
+when the host chrome needs the selector on the trailing edge:
+
+```tsx
+<AegisSwapWidget networkSelectorPosition="right" />
+```
 
 By default the component uses `window.ethereum` when available, so injected wallets
 like MetaMask and Rabby work without any wallet props.
@@ -46,13 +93,16 @@ Token icons are hydrated from the same metadata table used by the Aegis website:
 
 `aegis-swap-widget` is the production widget SDK. It uses real providers, RPCs,
 pool config, approvals, Permit2 authorization, swap submission, and callbacks.
+Pull requests publish the package demo to the Cloudflare Pages branch URL
+reported by Wrangler, for example
+`https://pr-<number>.aegis-widget-preview.pages.dev`.
 
 Demo wallets, fake transaction flows, scenario controls, and mock host shells
 belong in the playground app (`apps/playground` in this monorepo). They are not
 exposed as production widget props, so an embedded widget cannot accidentally
 run in a fake mode.
 
-Hosts should customize through `pools`, `chains`, `rpcUrls`,
+Hosts should customize through `backendBaseUrl`, `pools`, `chains`, `rpcUrls`,
 `metadataEndpoint`, wallet/provider callbacks, status surfaces, `accentColor`,
 `accentTextColor`, `className`, `style`, `title`, and `subtitle`. The widget is
 meant to blend into a host app without forking its internals.
@@ -91,9 +141,12 @@ tokens — is documented in [DESIGN.md](./DESIGN.md).
 
 ## Configure Pools
 
-Out of the box, `<AegisSwapWidget />` exposes the bundled WATER, WOOD, GRASS,
-and STONE mainnet pools. Use `poolIds` when a host wants a different built-in
-pool order or subset:
+Out of the box, `<AegisSwapWidget />` exposes the enabled markets returned by
+the Aegis backend for the active chain. Use `enabledChainIds` when a project
+should expose only some backend-enabled networks, and use `poolIds` when a host
+wants a different backend-market order or subset. Pass `backendBaseUrl={null}`
+when those ids should resolve against the bundled static WATER, WOOD, GRASS,
+and STONE mainnet pools:
 
 ```tsx
 import { AegisSwapWidget } from 'aegis-swap-widget'
@@ -102,6 +155,7 @@ import 'aegis-swap-widget/styles.css'
 export function Swap() {
   return (
     <AegisSwapWidget
+      backendBaseUrl={null}
       defaultPoolId="WATER_USDC"
       poolIds={['WATER_USDC', 'WOOD_USDC', 'GRASS_USDC', 'STONE_USDC']}
       theme="dark"
@@ -601,7 +655,12 @@ No other props changed. See the [CHANGELOG](./CHANGELOG.md) for the full entry.
 - `onPoolChange`: `(poolId)` fired when the active pool changes — user selection or a `poolIds` update that forces a fallback. Silent on mount.
 - `chainId`: active chain id. Defaults to Ethereum mainnet.
 - `chains`: optional chain config overrides or additional chain configs, including per-chain `v4Contracts`.
-- `networkOptions`: optional display-only entries for the network menu (`{ id, name, icon?, selected?, disabled?, status? }`). The active entry is resolved by explicit `selected: true`, else by `id` matching the active chain id, else by `name`; a list without the active chain gets it prepended so the trigger never misreports the chain in use. Non-selected options render disabled by default with optional `status` text (e.g. "Coming soon"); `icon` is `'ethereum' | 'base'`. Clicking the enabled option only closes the menu (disabled options ignore clicks) — switching is not wired yet.
+- `enabledChainIds`: backend-discovered chain ids this host project exposes. Omit to use every backend chain the widget can configure.
+- `pinnedChainIds`: preferred chain ids to surface first in backend-derived network selectors and token selector filters. This only changes display order.
+- `networkOptions`: optional entries for the network selector (`{ id, name, icon?, selected?, disabled?, status? }`). The active entry is resolved by id/name, and a list without the active chain gets it prepended so the selector never misreports the chain in use. Non-selected options are enabled only when chain switching is wired through backend discovery or `onChainChange`; `icon` is `'ethereum' | 'base' | 'unichain'`.
+- `networkSelectorVariant`: `'icons'` (default) renders the compact chain-icon strip; `'dropdown'` renders a menu button/listbox for hosts that prefer a single trigger.
+- `networkSelectorPosition`: `'left'` (default) places the selector on the leading side of the widget chrome; `'right'` places it on the trailing side.
+- `networkSelectorColorMode`: `'accent'` (default) keeps host-brand selector chrome; `'chain'` uses the built-in DFF chain palette for supported chains.
 - `pools`: direct pool configs to render and swap against. This is the canonical config path.
 - `defaultPoolId`: initial pool id when `pools` is provided.
 - `poolIds`: optional pool id order/subset. Use this when the host wants to hide pools or control ordering.

package/dist/address.d.ts

@@ -2,4 +2,11 @@ import type { Address, Hex } from 'viem';
 export declare function addressKey(address: Address | null | undefined): string;
 export declare function sameAddress(a: Address, b: Address): boolean;
 export declare function sameOptionalAddress(a: Address | null, b: Address | null): boolean;
+export type TokenIdentity = {
+    chainId: number;
+    address: Address;
+};
+export declare function tokenIdentityKey(token: TokenIdentity): string;
+export declare function sameTokenIdentity(a: TokenIdentity | null, b: TokenIdentity | null): boolean;
 export declare function samePoolId(a: Hex, b: Hex): boolean;
+export declare function truncateHex(value: string): string;