Wallet Feature

Token management, event tickets, QR codes, and Apple/Google Wallet integration.

Location

Feature module: src/features/wallet/
Route: src/app/(tabs)/promotions/(tabs)/wallet.tsx

Overview

The wallet combines two types of items:

Perk Tokens — Redeemed perks with codes/QR codes
Event Tickets — Tickets from event applications with QR codes, barcodes, or letter-based entry

Items are sorted by creation date (newest first).

API Functions

File	Function	API	Endpoint	Description
`api/get-tokens.ts`	`getWalletTokens()`	v2	`GET perks/tokens`	Fetch perk tokens
`api/get-event-tickets.ts`	`getEventTickets()`	v2	`GET events/tickets`	Fetch event tickets
`api/redeem-token.ts`	`redeemToken()`	—	—	Redeem a perk token

Event Ticket Transform

The getEventTickets function transforms snake_case API responses to camelCase:


interface EventTicket {
  externalId: string;
  status: string;
  type: string;
  redeemUrl: string;
  createdAt: string;
  event: Event;
  tokenType: 'event' | 'barcode';
  metadata: {
    letter: string;
    barcode: string;
    barcodeFormat: string;
  } | null;
  redeemedAt: string;
}

Hooks

Hook	File	Description
`useWalletQuery`	`hooks/use-wallet-query.ts`	Combines tokens + tickets via React Query
`useInvalidateWallet`	`hooks/use-wallet-query.ts`	Returns function to invalidate wallet cache

useWalletQuery


export const useWalletQuery = (enabled: boolean = true) => {
  return useQuery({
    queryKey: walletQueryKeys.all,  // ['wallet']
    queryFn: fetchWalletData,       // merges tokens + tickets, sorted by date
    enabled,
    staleTime: 5 * 60 * 1000,
  });
};

The fetchWalletData function fetches tokens and tickets in sequence, combines them into a single array, and sorts by createdAt.

Components

Component	File	Description
`PerkTokenItem`	`components/perk-token-item.tsx`	Perk token display
`EventTicketItem`	`components/event-ticket-item.tsx`	Event ticket display
`EventQrCode`	`components/event-qr-code.tsx`	QR code for event entry
`TokenRedeemModal`	`components/token-redeem-modal.tsx`	Token redemption modal
`AddToWallet`	`components/add-to-wallet.tsx`	Apple/Google Wallet integration
`EmptyWallet`	`components/empty-wallet.tsx`	No items state
`CircleRow`	`components/circle-row.tsx`	Decorative circle row
`TriangleRow`	`components/triangle-row.tsx`	Decorative triangle row

Apple/Google Wallet

The AddToWallet component uses @giulio987/expo-wallet and react-native-wallet-manager for adding tickets to native wallets.

Strategy Pattern

The wallet uses a strategy pattern (strategies/) for rendering different wallet item types:

strategies/types.ts — Strategy interface
strategies/default.tsx — Default rendering strategy
strategies/index.ts — Strategy registry

Query Keys


// constants/query-keys.ts
export const walletQueryKeys = {
  all: ['wallet'] as const,
};

Utilities

utils/deep-link-helpers.ts — Deep link handling for wallet items