# Account wallet (https://docs.salla.dev/twilight/react/routes/account-wallet)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

The customer sees their store-credit balance and a table of transactions (cashback, refunds, purchases paid from the wallet). Customise it to show the balance in your own way.

## URL [#url]

| URL                         | Notes                           |
| --------------------------- | ------------------------------- |
| `/account/wallet`           | first page                      |
| `/ar/account/wallet?page=2` | with a language prefix and page |

| Param           | Type   | Notes                              |
| --------------- | ------ | ---------------------------------- |
| `page` (search) | number | Kept in the URL only when above 1. |

The optional `locale` segment exists, but the generated loader call does not use it.

## Route file [#route-file]

```tsx title="app/routes/account.wallet.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Wallet } from '@salla.sa/twilight-theme-engine/routes/account';
import type { WalletPageProps } from '@salla.sa/twilight-theme-engine/routes/account';
import { CustomerPageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/account/wallet')({
  validateSearch: (search: Record<string, unknown>) => {
    const page = Number(search.page) || 1;
    return page > 1 ? { page } : {};
  },
  loaderDeps: ({ search }) => ({ page: search.page }),
  loader: ({ deps }): Promise<WalletPageProps> => Wallet.loader({ search: { page: deps.page ?? 1 } }),
  head: withHead(Wallet),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: WalletComponent,
});

function WalletComponent() {
  const data: WalletPageProps = Route.useLoaderData();
  return <Wallet.Component {...data} />;
}
```

To take the page over, delete the `// @auto-generated` line and edit the file. See [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).

### A customised version [#a-customised-version]

Show the balance above the engine's table. Only the component changes:

```tsx title="app/routes/account.wallet.tsx"
function WalletComponent() {
  const data: WalletPageProps = Route.useLoaderData();
  return (
    <>
      <p className="mb-4">Balance: {data.balance}</p>
      <Wallet.Component {...data} />
    </>
  );
}
```

## What it loads [#what-it-loads]

`WalletPageProps` is `{ page, query: { page }, transactions, balance, pagination: { next } }`. A transaction has `id`, `order_id`, `action_type` (such as `cashback`, `refund`, `purchase_by_wallet`), `title`, `amount`, `created_at` and `expired_at` (Unix seconds). The loader reads the wallet with the customer's token, 10 transactions per page, and more rows load in the browser. `pagination.next` is `null` on the last page.

The head sets the title, description and language alternates.

## Edge cases [#edge-cases]

* **Signed out or expired token.** A guest, or a customer whose token the API rejects with 401 or 403, is sent to the home page with `?intended_to=` holding the page they asked for. The Salla SDK opens the sign-in form there and returns them to the page after sign-in.
* **No transactions.** The page shows a "no transactions" message instead of the table.

## See also [#see-also]

* [Account notifications](https://docs.salla.dev/twilight/react/routes/account-notifications), the next account page
* [Account layout](https://docs.salla.dev/twilight/react/routes/account) and [Loading data](https://docs.salla.dev/twilight/react/guide/loading-data)