> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://accounts.tempo.xyz/api/mcp` to find what you need.

# Deposits

Open the Tempo deposit flow from a connected account using the [Tempo Accounts SDK](/docs).

Use deposits when your app needs a user to add funds to their account. The SDK calls [`wallet_deposit`](/docs/rpc/wallet_deposit), opens the UI, and returns receipts when the selected deposit path submits account activity immediately.

In the default flow, the UI asks the user to choose the destination account, amount, chain, and token.

## Demo

By the end of this guide you'll have a button that opens the deposit flow without amount or token pre-filled.

#### Deposit Funds

[Runnable example source](https://github.com/tempoxyz/accounts/tree/main/examples/deposits)

Create an account, or use an existing one.

Interactive demo: Deposit funds. Run it in the browser or use the linked example source.

## Walkthrough

::::steps
### Connect an Account

Follow the [Connect Accounts](/docs/guides/connect-accounts) guide to let the user sign in. Deposits run after the user has a connected account that can review the request.

### Open the Deposit Flow

Call [`Hooks.wallet.useDeposit`](https://wagmi.sh/tempo/hooks/wallet.useDeposit) and invoke `deposit.mutate({})`. The UI collects the deposit details from the user.

```tsx twoslash [Deposit.tsx]
// @noErrors
import { Hooks } from 'wagmi/tempo'

export function Deposit() {
  const deposit = Hooks.wallet.useDeposit()

  return (
    <button
      disabled={deposit.isPending}
      onClick={() => deposit.mutate({})}
    >
      {deposit.isPending ? 'Opening...' : 'Open deposit'}
    </button>
  )
}
```

:::tip[Optional pre-fill]
If your app already knows the token or amount, pass them as hints. Omit fields when the user should choose them in the UI.

```tsx twoslash [Deposit.tsx]
// @noErrors
const pathUsd = '0x20c0000000000000000000000000000000000000'

deposit.mutate({
  amount: '10',
  token: pathUsd,
})
```
:::

### Show the Result

Some deposit paths return receipts immediately. Use those receipt hashes to link to the Tempo explorer or refresh balances in your app.

Other paths can settle asynchronously. When `deposit.data?.receipts` is missing, show a submitted state and let your balance query update when funds arrive.

```tsx twoslash [Deposit.tsx]
// @noErrors
import { tempo } from 'wagmi/chains'
import { Hooks } from 'wagmi/tempo'

export function Deposit() {
  const deposit = Hooks.wallet.useDeposit()
  const receipt = deposit.data?.receipts?.[0]

  return (
    <div>
      <button onClick={() => deposit.mutate({ /* ... */ })}>Deposit</button>
      {deposit.isSuccess && (
        <div>
          <span>Deposit submitted.</span>
          {receipt && (
            <a
              href={`${tempo.blockExplorers.default.url}/tx/${receipt.transactionHash}`}
              target="_blank"
              rel="noreferrer"
            >
              See receipt
            </a>
          )}
        </div>
      )}
    </div>
  )
}
```
::::

## Best Practices

### Buy MACH from Any Device

Call `Mach.fund` with a browser, mobile, or CLI provider to request MACH checkout for the connected account. Use `Mach.getFundingUrl` when the user needs to continue on another device. Both paths preserve the intended account and requested amount.

```ts
import { Mach } from 'accounts'

await Mach.fund(provider, { amount: '5' })

const checkoutUrl = Mach.getFundingUrl({
  address: '0x0000000000000000000000000000000000000001',
  amount: '5',
})
```

Checkout requires the user's confirmation. Its completion response does not by itself confirm that funds arrived. MACH is supported on Tempo mainnet; legacy MPP Credits are a separate balance.

### Deposit on Connection

If adding funds is part of onboarding, show the deposit picker immediately after
the user signs in.

```tsx twoslash [Connect.tsx]
// @noErrors
import { useConnect, useConnectors } from 'wagmi'

export function Connect() {
  const connect = useConnect()
  const [connector] = useConnectors()

  return (
    <button
      onClick={() =>
        connect.connect({
          connector,
          capabilities: { // [!code focus]
            showDeposit: true, // [!code focus]
          }, // [!code focus]
        })
      }
    >
      Sign up
    </button>
  )
}
```

:::tip
Use the object form when you want to pre-fill deposit details.

```tsx twoslash [Connect.tsx]
// @noErrors
connect.connect({
  connector,
  capabilities: { // [!code focus]
    showDeposit: { // [!code focus]
      intent: 'mach',
      amount: '10', // [!code focus]
      token: 'MACH', // [!code focus]
    }, // [!code focus]
  }, // [!code focus]
})
```
:::

## Next Steps

[Deposits Example](https://github.com/tempoxyz/accounts/tree/main/examples/deposits): Run the complete deposits example locally.

[wallet\_deposit](/docs/rpc/wallet_deposit): Read the low-level request and response shape for the deposit flow.

[Transfers](/docs/guides/transfers): Send stablecoin transfers from a connected account.

[Swaps](/docs/guides/swaps): Exchange one supported token for another.