Skip to main content

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.

This quickstart covers the React SDK integration path. For server-side or backend integrations, start with the API 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.
1

Install the package

Add @trustware/sdk to your project using your preferred package manager:
npm install @trustware/sdk
The package is published as @trustware/sdk on npm.
The SDK requires React 18.2+ or React 19. Install the peer dependencies if you haven’t already:
npm install 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.
2

Get an API key

apiKey is a required field in TrustwareConfigOptions. Create one in the Client Dashboard: 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 section below for the full tour.Store the key as an environment variable:
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.
3

Configure TrustwareConfigOptions

The routes.toChain and routes.toToken fields are required; everything else is optional:
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;
FieldRequiredDescription
apiKeyYesYour Trustware API key
routes.toChainYesDestination chain ID as a string
routes.toTokenYesDestination token address
routes.toAddressNoRecipient address. Can be updated at runtime via Trustware.setDestinationAddress
routes.defaultSlippageNoSlippage percentage. Defaults to 1
routes.optionsNoRefresh and amount-constraint settings (routeRefreshMs, fixedFromAmount, minAmountOut, maxAmountOut)
autoDetectProviderNoEnable SDK-managed wallet discovery. Defaults to false
messagesNoOverride widget title and description copy
themeNoWidget color and radius overrides
walletConnectNoWalletConnect connector overrides
retryNoRate-limit retry behavior
featuresNoFeature flags (tokensPagination, balanceStreaming, shouldAllowGA4)
onError, onSuccess, onEventNoLifecycle callbacks
See configuration overview for the full reference of every field.
4

Wrap your app with TrustwareProvider

Mount TrustwareProvider once near the root of your component tree and pass in your config:
import { TrustwareProvider } from "@trustware/sdk";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TrustwareProvider config={trustwareConfig}>
      {children}
    </TrustwareProvider>
  );
}
All TrustwareWidget instances and useTrustware calls within the tree share this config and wallet state.
5

Render TrustwareWidget

Drop <TrustwareWidget /> anywhere inside the provider tree:
import { TrustwareWidget } from "@trustware/sdk";

export function DepositPage() {
  return (
    <div>
      <h1>Top up your balance</h1>
      <TrustwareWidget />
    </div>
  );
}
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: 
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 (
    <TrustwareProvider config={trustwareConfig}>
      <TrustwareWidget />
    </TrustwareProvider>
  );
}

​
Client Dashboard

The Client Dashboard 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

1

Sign in

You land on the Overview tab, which shows the account you’re signed in as and your authentication status.
2

Create an organization

On first sign-in you’re prompted to name your organization (a description is optional).
3

Create a default project

Give it a project name, a slug, and an optional description.
4

Spin up an SDK key

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.
5

Copy your key

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. 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).

​
Need help?

Reach the team any time at support@trustware.io.

​
Next steps

  • Bring your own wallet: if your app already manages wallet connection through Wagmi or viem, see Host wallet bridge.
  • Control the widget programmatically: open and close the widget from your own UI with Controlled widget.
  • Build a custom UI: skip the widget entirely and use the Headless core API.
  • Customize appearance: adjust colors, radius, and copy in Configuration.