# salla-wallet (https://docs.salla.dev/twilight/react/web-components/salla-wallet)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The customer's wallet page: a balance card, a gift card redeem box (salla-gift-card-redeem), and a table of wallet
transactions with a "load more" button. Use it as the main content of the wallet page for a signed-in customer.
It takes no props. It loads 10 transactions per page from `/balance/wallet`, shows credits with a `+` and debits with a `-`,
shows an empty state when there are no transactions, and reloads the first page after a gift card is redeemed
so the new balance appears.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-wallet>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaWallet } from '@salla.sa/twilight-components-react/wallet';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaWallet } from '@salla.sa/twilight-components-react/wallet';

export function Example() {
  return (
    <SallaWallet />
  );
}
```

```html
<salla-wallet></salla-wallet>
```

## Related [#related]

Renders: [`<salla-gift-card-redeem>`](https://docs.salla.dev/twilight/react/web-components/salla-gift-card-redeem), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-tooltip>`](https://docs.salla.dev/twilight/react/web-components/salla-tooltip).