Skip to main content
If your app already manages wallet connection (through Wagmi, RainbowKit, or a custom adapter), you can pass that wallet directly to Trustware instead of letting the SDK run its own discovery. The widget UX stays the same; only wallet ownership changes, and the user does not have to sign twice or reconnect their wallet.

​
When to use this pattern

Choose this pattern when:
  • your app has an existing Wagmi or RainbowKit setup
  • you have custom wallet orchestration and do not want the SDK to interfere
  • you want the full widget flow but need Trustware to use your connected wallet
If your app does not yet manage wallet state, use the drop-in widget instead.

​
Setup

1

Install the SDK

npm install @trustware/sdk
# or
pnpm add @trustware/sdk
2

Import the Wagmi adapter

The useWagmi adapter is exported from a separate sub-path to keep the main bundle lean. It converts a viem WalletClient into the wallet interface that TrustwareProvider expects.
import { useWagmi } from "@trustware/sdk/wallet";
3

Create a stable wallet reference with useMemo

useWalletClient returns a new object reference on every render. Wrap the adapter in useMemo so the wallet reference only changes when walletClient itself changes.
import { useMemo } from "react";
import { useWalletClient } from "wagmi";
import { useWagmi } from "@trustware/sdk/wallet";

const { data: walletClient } = useWalletClient();
const wallet = useMemo(
  () => (walletClient ? useWagmi(walletClient) : undefined),
  [walletClient]
);
4

Pass the wallet to TrustwareProvider

Provide the memoized wallet via the wallet prop and set autoDetect={false} to prevent the SDK from running its own wallet discovery alongside your host-managed wallet.
import { useMemo } from "react";
import { useWalletClient } from "wagmi";
import { TrustwareProvider, TrustwareWidget } from "@trustware/sdk";
import { useWagmi } from "@trustware/sdk/wallet";

export function DepositPanel() {
  const { data: walletClient } = useWalletClient();
  const wallet = useMemo(
    () => (walletClient ? useWagmi(walletClient) : undefined),
    [walletClient]
  );

  return (
    <TrustwareProvider
      config={trustwareConfig}
      wallet={wallet}
      autoDetect={false}
    >
      <TrustwareWidget />
    </TrustwareProvider>
  );
}

​
How it works

​
What useWagmi does

useWagmi adapts a viem WalletClient to the WalletInterFaceAPI that TrustwareProvider accepts. It exposes the address, chain, and signing methods Trustware needs to build and submit routes, without requiring you to implement that bridge yourself.

​
autoDetect={false}

Setting autoDetect={false} tells TrustwareProvider not to run its own wallet discovery. Without this, the SDK would attempt auto-detection even when a wallet is already provided, which can cause conflicts with your existing wallet state.
Always set autoDetect={false} when passing a wallet prop. Leaving auto-detection enabled alongside a host wallet can result in unexpected wallet switching.

​
Why useMemo matters

useWalletClient from Wagmi returns a new object reference on every render cycle, even when the underlying wallet hasn’t changed. Without useMemo, every render would produce a new wallet value, causing TrustwareProvider to treat each one as a wallet change and unnecessarily re-initialize its internal state.

​
Using with RainbowKit

TrustwareProvider must sit inside your Wagmi and RainbowKit providers so it has access to their React context. If you place it outside WagmiProvider, calls to useWalletClient will fail. 
import { WagmiProvider } from "wagmi";
import { QueryClientProvider } from "@tanstack/react-query";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { TrustwareProvider } from "@trustware/sdk";

function Providers({ children }) {
  const { data: walletClient } = useWalletClient();
  const wallet = useMemo(
    () => (walletClient ? useWagmi(walletClient) : undefined),
    [walletClient]
  );

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <TrustwareProvider
            config={trustwareConfig}
            wallet={wallet}
            autoDetect={false}
          >
            {children}
          </TrustwareProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

​
Using with embedded wallets

The same pattern works for embedded wallets your app provisions, for example through Privy. Use useEIP1193 from @trustware/sdk/wallet to adapt any EIP-1193 provider, including an embedded wallet’s provider, into the wallet interface TrustwareProvider accepts. As with every host wallet, pass it through the wallet prop and set autoDetect={false}. See use Trustware with embedded wallets for the full pattern, including how to resolve the embedded wallet safely and run swaps and deposits against it.