# wallet (https://docs.salla.dev/twilight/react/api/modules/wallet)



Use `wallet` for an account wallet page: the balance plus a page of transactions. It has no `queries`, only the plain function.

```tsx title="app/components/WalletBalance.tsx"
import { useQuery } from '@tanstack/react-query';
import { useUser } from '@salla.sa/twilight-theme-engine/hooks/useUser';
import { wallet } from '@salla.sa/twilight-theme-engine/api/wallet';

export function WalletBalance() {
  const { isLoggedIn } = useUser();
  const { data } = useQuery({
    queryKey: ['wallet', 'list', { page: 1 }],
    queryFn: () => wallet.list(),
    enabled: isLoggedIn,
  });

  return <p>{data?.balance}</p>;
}
```

## Methods [#methods]

| Method | Parameters                                                           | Returns                                                                        | Request                                 | Login needed |
| ------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------- | ------------ |
| `list` | `params?: { page?: number; perPage?: number; signal?: AbortSignal }` | `Promise<{ items: TransactionItem[]; next: string \| null; balance: number }>` | `GET balance/wallet?page=1&per_page=10` | Yes          |

Defaults: `page` 1, `perPage` 10. A `TransactionItem` has `id`, `order_id`, `transaction_type`, `action_type`, `type`, `title`, `description`, `amount`, `created_at` and `expired_at`.

## Queries [#queries]

There is no `queries` object. If you want caching, write your own options with a key that includes the page (and the locale or scope if they matter), as in the example above.

## Gotchas [#gotchas]

* Guests have no token and the call fails. Gate it with `useUser().isLoggedIn`.
* The balance comes back on every page, next to that page's transactions.
* `next` is the API's `next_page_url` (a URL or `null`), not a cursor. Request the next page by number.
* A missing `transactions.data` becomes `[]`; a missing `transactions` object throws.
* Errors are not caught. Handle 401 and 403 yourself, for example with `orUnauthorized` ([Errors](https://docs.salla.dev/twilight/react/api/errors-timeouts-and-retries)).

## See also [#see-also]

* [Account wallet route](https://docs.salla.dev/twilight/react/routes/account-wallet)
* [loyalty](https://docs.salla.dev/twilight/react/api/modules/loyalty)
* [Write your own endpoint](https://docs.salla.dev/twilight/react/api/write-your-own-endpoint)