salla-wallet

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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

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

RelatedCopy Anchor Link

Renders: <salla-gift-card-redeem>, <salla-button>, <salla-tooltip>.