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

# Connect your existing wallet to Trustware

> Pass your existing Wagmi, RainbowKit, or viem wallet to TrustwareProvider using the wallet prop and autoDetect={false} to keep a single wallet state.

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](/integration/drop-in-widget) instead.

## Setup

<Steps>
  <Step title="Install the SDK">
    ```bash theme={null}
    npm install @trustware/sdk
    # or
    pnpm add @trustware/sdk
    ```
  </Step>

  <Step title="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.

    ```tsx theme={null}
    import { useWagmi } from "@trustware/sdk/wallet";
    ```
  </Step>

  <Step title="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.

    ```tsx theme={null}
    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]
    );
    ```
  </Step>

  <Step title="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.

    ```tsx theme={null}
    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>
      );
    }
    ```
  </Step>
</Steps>

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

<Warning>
  Always set `autoDetect={false}` when passing a `wallet` prop. Leaving auto-detection enabled alongside a host wallet can result in unexpected wallet switching.
</Warning>

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

```tsx theme={null}
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](/guides/embedded-wallets) for the full pattern, including how to resolve the embedded wallet safely and run swaps and deposits against it.