Install the Wallet Widget as an NPM package for first-class React (and TypeScript) support.
npm install @legionhandtech/lht-react-widgetsReact 17+ is a peer dependency. If your project already has React installed you're good to go.
1import { LegionWallet } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionWallet
6 baseUrl="https://your-legion-domain.com"
7 userId="user-123"
8 apiKey="your-api-key"
9 theme="light"
10 />
11 );
12}You can also import from the dedicated sub-path:
import { LegionWallet } from '@legionhandtech/lht-react-widgets/wallet';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
userId | string | required | User ID to load the wallet for |
apiKey | string | — | API key for authentication (sent via postMessage) |
theme | "light" | "dark" | "light" | Theme preset |
showBalance | boolean | true | Show the balance section |
showHistory | boolean | true | Show the transaction history section |
height | string | "500px" | Widget height (CSS value). Width is always 100% |
className | string | — | CSS class applied to the outer container |
style | React.CSSProperties | — | Inline styles merged into the container |
onLoad | (detail) => void | — | Called when the widget iframe finishes loading |
onError | (message: string) => void | — | Called if the widget iframe fails to load |
All 50 theming props are optional. Here are the most commonly used ones:
| Prop | CSS Variable | Example |
|---|---|---|
walletPrimaryColor | --wallet-primary-color | "#228be6" |
walletBackgroundColor | --wallet-background-color | "#f8f9fa" |
walletTextColor | --wallet-text-color | "#333" |
walletBorderRadius | --wallet-border-radius | "12px" |
walletShadow | --wallet-shadow | "0 2px 8px rgba(0,0,0,.1)" |
walletTabActiveBackground | --wallet-tab-active-background | "#228be6" |
walletTabActiveColor | --wallet-tab-active-color | "#fff" |
walletCouponBgStart | --wallet-coupon-bg-start | "#667eea" |
walletCouponBgEnd | --wallet-coupon-bg-end | "#764ba2" |
walletFontFamily | --wallet-font-family | "Inter, sans-serif" |
walletButtonRadius | --wallet-button-radius | "6px" |
See the TypeScript WalletThemingProps interface for the complete list.
1import { useRef } from 'react';
2import { LegionWallet, LegionWalletHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionWalletHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Wallet
11 </button>
12 <LegionWallet
13 ref={widgetRef}
14 baseUrl="https://your-legion-domain.com"
15 userId="user-123"
16 apiKey="your-api-key"
17 />
18 </>
19 );
20}| Method | Description |
|---|---|
refresh() | Reloads the widget iframe |
import '@legionhandtech/lht-react-widgets/wallet-web-component';1<legion-wallet
2 user-id="user-123"
3 api-key="your-api-key"
4 theme="light">
5</legion-wallet>1import type {
2 WalletWidgetProps,
3 WalletThemingProps,
4 LegionWalletHandle,
5} from '@legionhandtech/lht-react-widgets';1<LegionWallet
2 baseUrl="https://your-legion-domain.com"
3 userId="user-123"
4 onLoad={(detail) => {
5 console.log(detail.widget); // "wallet"
6 console.log(detail.theme); // "light" | "dark"
7 }}
8/>1<LegionWallet
2 baseUrl="https://your-legion-domain.com"
3 userId="user-123"
4 onError={(message) => console.error(message)}
5/>