# AI Integration Contract

Use this file when an AI coding agent is asked to add `@nexus-cross/dapp-ui` to a React DApp.

## Get ONEUSD

Prefer the turn-key wagmi wrapper when the app already uses CROSSx Connect Kit:

```tsx
import type { ReactNode } from "react";
import { CrossGetOneUsd } from "@nexus-cross/connect-kit-react";

export function AppLayout({ children }: { children: ReactNode }) {
  return (
    <>
      {children}
      <CrossGetOneUsd env="production" mode="floating" theme="dark" />
    </>
  );
}
```

Mount `CrossGetOneUsd` once in the persistent app/root layout, below
`CrossConnectKitProvider` and outside route pages. This keeps the floating
transaction status visible during same-site client-side route changes. A full
page reload or navigation to another site does not preserve an in-memory status.

Rules:

- Do not recreate the chooser, Swap, Bridge, Relay, History, Recover, APR, or transaction-status UI.
- Use `mode="floating"` for the fixed FAB and `mode="button"` for an inline trigger.
- In both modes, a submitted Swap/Bridge status is always rendered as a floating status surface.
- Use `buttonComponent` only when the host must supply a styled button component.
- Keep the component mounted while a transaction is pending; do not conditionally render it per route.
- `GetOneUsd` reads the S3 `getOneUsd.modes` flags. Missing flags default to Swap `true`, Bridge `true`, Transfer Crypto `false`.
- The Transfer Crypto modal owns the `Deposit`, `History`, and `Recover` tabs. It shares one live orders subscription across them.
- `CrossGetOneUsd` supplies wagmi Bridge and Relay adapters. Do not duplicate those adapters in DApp code.
- Use the low-level `GetOneUsd` export only when the host already owns every `bridge` and `relay` function port required by its TypeScript props.

For an inline host-styled trigger:

```tsx
const GetOneUsdButton = styled.button`
  border-radius: 12px;
`;

<CrossGetOneUsd
  env="production"
  mode="button"
  buttonComponent={GetOneUsdButton}
/>;
```

Keep all visible user-facing copy in English. Let the package own its modal
copy, colors, mobile keyboard behavior, safe-area handling, and transaction lock.