> ## Documentation Index > Fetch the complete documentation index at: https://docs.trustware.io/llms.txt > Use this file to discover all available pages before exploring further. # Get started with the Trustware SDK > Install @trustware/sdk, configure TrustwareConfigOptions, and render your first cross-chain deposit widget in a React app in under five minutes. This quickstart covers the React SDK integration path. For server-side or backend integrations, start with the [API Overview](/api-reference/overview). This guide walks you through installing the SDK, obtaining an API key, configuring your route, and rendering the deposit widget. By the end you'll have a working deposit flow embedded in your React app. Add `@trustware/sdk` to your project using your preferred package manager: ```bash npm theme={null} npm install @trustware/sdk ``` ```bash pnpm theme={null} pnpm add @trustware/sdk ``` The package is published as [`@trustware/sdk`](https://www.npmjs.com/package/@trustware/sdk) on npm. The SDK requires React 18.2+ or React 19. Install the peer dependencies if you haven't already: ```bash npm theme={null} npm install react react-dom viem ``` ```bash pnpm theme={null} pnpm add react react-dom viem ``` `react` and `react-dom` are marked as optional peer dependencies; if your app already has them installed, no extra step is needed. `viem` is required. `apiKey` is a required field in `TrustwareConfigOptions`. Create one in the [Client Dashboard](https://dashboard.trustware.io): create an organization, create a project, then spin up an SDK key. The raw key is shown only once, so copy it immediately. See the [Client Dashboard](#client-dashboard) section below for the full tour. Store the key as an environment variable: ```bash theme={null} NEXT_PUBLIC_TRUSTWARE_API_KEY=your-api-key-here ``` Never commit your API key to source control. Use your framework's environment variable support: `NEXT_PUBLIC_` prefix for Next.js, `VITE_` for Vite. The `routes.toChain` and `routes.toToken` fields are required; everything else is optional: ```ts theme={null} import { type TrustwareConfigOptions } from "@trustware/sdk"; const trustwareConfig = { apiKey: process.env.NEXT_PUBLIC_TRUSTWARE_API_KEY!, routes: { toChain: "8453", // destination chain ID (Base) toToken: "0xEeee...", // destination token address defaultSlippage: 1, // slippage percentage, defaults to 1 options: { routeRefreshMs: 15000, // route preview refresh interval }, }, autoDetectProvider: true, // let the SDK discover injected wallets messages: { title: "Deposit", description: "Move funds into the destination asset and chain.", }, } satisfies TrustwareConfigOptions; ``` | Field | Required | Description | | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------ | | `apiKey` | Yes | Your Trustware API key | | `routes.toChain` | Yes | Destination chain ID as a string | | `routes.toToken` | Yes | Destination token address | | `routes.toAddress` | No | Recipient address. Can be updated at runtime via `Trustware.setDestinationAddress` | | `routes.defaultSlippage` | No | Slippage percentage. Defaults to `1` | | `routes.options` | No | Refresh and amount-constraint settings (`routeRefreshMs`, `fixedFromAmount`, `minAmountOut`, `maxAmountOut`) | | `autoDetectProvider` | No | Enable SDK-managed wallet discovery. Defaults to `false` | | `messages` | No | Override widget title and description copy | | `theme` | No | Widget color and radius overrides | | `walletConnect` | No | WalletConnect connector overrides | | `retry` | No | Rate-limit retry behavior | | `features` | No | Feature flags (`tokensPagination`, `balanceStreaming`, `shouldAllowGA4`) | | `onError`, `onSuccess`, `onEvent` | No | Lifecycle callbacks | See [configuration overview](/configuration/overview) for the full reference of every field. Mount `TrustwareProvider` once near the root of your component tree and pass in your config: ```tsx theme={null} import { TrustwareProvider } from "@trustware/sdk"; export function Providers({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` All `TrustwareWidget` instances and `useTrustware` calls within the tree share this config and wallet state. Drop `` anywhere inside the provider tree: ```tsx theme={null} import { TrustwareWidget } from "@trustware/sdk"; export function DepositPage() { return (

Top up your balance

); } ``` The widget handles the full deposit flow: wallet connection, token selection, amount entry, and transaction confirmation. ## Full working example Here's the complete setup in a single file, copied directly from the SDK README: ```tsx theme={null} import { TrustwareProvider, TrustwareWidget, type TrustwareConfigOptions, } from "@trustware/sdk"; const trustwareConfig = { apiKey: process.env.NEXT_PUBLIC_TRUSTWARE_API_KEY!, routes: { toChain: "8453", toToken: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", defaultSlippage: 1, options: { routeRefreshMs: 15000, }, }, autoDetectProvider: true, messages: { title: "Deposit", description: "Move funds into the destination asset and chain.", }, } satisfies TrustwareConfigOptions; export function App() { return ( ); } ``` ## Client Dashboard The [Client Dashboard](https://dashboard.trustware.io) is where you manage everything about your Trustware integration: your organization, your projects, your SDK keys, and the transaction and analytics data flowing through the SDK. You can run multiple projects under a single organization, each with its own SDK keys and isolated data. This is useful for separating environments (e.g. staging vs. production) or distinct products. ### Quick start You land on the **Overview** tab, which shows the account you're signed in as and your authentication status. On first sign-in you're prompted to name your organization (a description is optional). Give it a project name, a slug, and an optional description. Go to the **Projects** tab, select your project, and create a key. Creating the org and project does not create a key automatically. You do this step manually. The raw SDK key is shown only once, in a one-time pop-up. Copy it immediately and store it securely. The raw key can't be retrieved again later. Once you have a key, plug it into `TrustwareConfigOptions` as shown in the steps above and start routing transactions. ### Navigation The dashboard has six tabs in the left sidebar, plus quick switchers for your organization, project, and account (and a sign-out control). **Overview.** Your home base. Shows your account and authentication status, the tenants and workspaces you can access, and shortcut sections: *Jump back in* (pills into a project's access and analytics pages), *Quick actions* (manage projects, manage members, view analytics, update profile), *At a glance* (current setup state with a recommended next step), and *Common paths* (invite a teammate, set up project access, review SDK usage). **Organizations.** View organization status, create new organizations, and switch between the orgs you belong to. Shows the creation date, seat/member count, and a member list with each person's role, status, last active time, and email, including who the owners and admins are. Note: only owners can change owner rows, and an org must always keep at least one active owner. **Projects.** Choose between projects or create a new one. Each project shows its active status, creation date, slug, and SDK key limit (default 3). This is where you manage SDK keys: * **Create keys** (owners and admins only) with a label, an optional origin URL, and optional notes. Each key shows its creation date, SDK ID, and active status. The raw key appears once on creation via a copy-to-clipboard pop-up. * **Edit, rotate, revoke, or delete** keys as needed. * Manage **project members and roles**: grant admin access or suspend accounts. **Coming soon:** Paymaster management will live in the Projects tab, letting you link and manage paymasters per project. This isn't available in production yet. **Transactions.** A live view of activity for a selected project and SDK key: loaded activity, successful transactions, and total quoted destination amount (\$). The activity list shows each transaction's date, status, sponsored/unsponsored flag, route taken, amount, and the source and destination wallets, with links out to block explorers. Expanding the route shows which provider and which LP pools were used. Filter by SDK key, status, source chain, destination chain, provider, and date range, or look up a specific transaction by hash. **Analytics.** Aggregate insight across your usage. Filter by organization/project/key, time window (last 7/30/90 days), granularity (daily/weekly/monthly), and chain. Headline stats cover requests/total volume, successful routes, observed failures, and paymaster usage (gas sponsored, \$). Below that: a request-volume trend graph, a per-chain breakdown (requests, routes, errors, sponsored \$), and your top SDK key and top projects for the selected window. **Settings.** Manage your profile: update your account email, display name, and an optional description shown in the dashboard. Includes account deletion and a help/support panel ([support@trustware.io](mailto:support@trustware.io)). ### Need help? Reach the team any time at [support@trustware.io](mailto:support@trustware.io). ## Next steps * **Bring your own wallet**: if your app already manages wallet connection through Wagmi or viem, see [Host wallet bridge](/integration/host-wallet). * **Control the widget programmatically**: open and close the widget from your own UI with [Controlled widget](/integration/controlled-widget). * **Build a custom UI**: skip the widget entirely and use the [Headless core API](/integration/headless-core). * **Customize appearance**: adjust colors, radius, and copy in [Configuration](/configuration/overview).