@dubsdotapp/expo 0.2.42 → 0.2.43

package/README.md

@@ -117,6 +117,8 @@ function CreateBet({ eventId }: { eventId: string }) {
 | `renderError` | `fn` | *default UI* | Custom error screen |
 | `renderRegistration` | `fn` | *default UI* | Custom registration screen |
 | `managed` | `boolean` | `true` | Set `false` for headless mode (no connect screen or auth gate) |
+| `redirectUri` | `string` | — | Deeplink redirect URI for Phantom wallet (required for iOS) |
+| `appUrl` | `string` | — | App URL shown in Phantom's connect screen |
 
 ### Disconnect
 
@@ -178,12 +180,16 @@ const myStorage: TokenStorage = {
 
 | Hook | Type | Description |
 |------|------|-------------|
+| `useAuth()` | Auth | Full auth state — `user`, `isAuthenticated`, `authenticate()`, `register()`, `logout()` |
 | `useEvents(params?)` | Query | Fetch upcoming events (sports + esports) |
 | `useGame(gameId)` | Query | Single game detail |
 | `useGames(params?)` | Query | List games with filters |
-| `useCreateGame()` | Mutation | Full create lifecycle (build → sign → send → confirm) |
-| `useJoinGame()` | Mutation | Full join lifecycle |
-| `useClaim()` | Mutation | Full claim lifecycle |
+| `useNetworkGames(params?)` | Query | List games across the entire Dubs network |
+| `useCreateGame()` | Mutation | Create game on a sports/esports event (build → sign → confirm) |
+| `useCreateCustomGame()` | Mutation | Create a custom 1v1 game with arbitrary buy-in |
+| `useJoinGame()` | Mutation | Join an existing game |
+| `useClaim()` | Mutation | Claim prize or refund after game resolves |
+| `useHasClaimed(gameId)` | Query | Check if current wallet already claimed — returns `hasClaimed`, `amountClaimed`, `claimSignature` |
 
 ### Mutation Status
 
@@ -208,6 +214,157 @@ const game = await client.getGame('sport-123...');
 const codes = client.getErrorCodesLocal();
 ```
 
+## UI Components
+
+### Game Sheets
+
+Drop-in bottom sheets that handle the full transaction lifecycle (build → sign → confirm) internally.
+
+#### CreateCustomGameSheet
+
+Bottom sheet for creating a custom 1v1 game with configurable buy-in.
+
+```tsx
+import { CreateCustomGameSheet } from '@dubsdotapp/expo';
+
+<CreateCustomGameSheet
+  visible={showSheet}
+  onDismiss={() => setShowSheet(false)}
+  presetAmounts={[0.01, 0.1, 0.5]}
+  defaultAmount={0.01}
+  metadata={{ matchType: 'battleship' }}
+  onSuccess={(result) => console.log('Created!', result.gameId)}
+  onError={(err) => console.error(err)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | *required* | Show/hide the sheet |
+| `onDismiss` | `() => void` | *required* | Called when user closes the sheet |
+| `title` | `string` | `'New Game'` | Sheet header title |
+| `maxPlayers` | `number` | `2` | Max players (currently 1v1) |
+| `fee` | `number` | `0.05` | Platform fee percentage (0–1) |
+| `presetAmounts` | `number[]` | `[0.01, 0.1, 0.5]` | Quick-select buy-in chips |
+| `defaultAmount` | `number` | — | Pre-selected buy-in |
+| `metadata` | `Record<string, unknown>` | — | Arbitrary metadata attached to the game |
+| `onSuccess` | `(result) => void` | — | Called with `{ gameId, gameAddress, signature, explorerUrl, buyIn }` |
+| `onError` | `(error) => void` | — | Called on failure |
+
+#### JoinGameSheet
+
+Bottom sheet for joining an existing game. Shows buy-in, team selection, pool summary, and potential winnings.
+
+```tsx
+import { JoinGameSheet } from '@dubsdotapp/expo';
+
+<JoinGameSheet
+  visible={showSheet}
+  onDismiss={() => setShowSheet(false)}
+  game={gameData}
+  onSuccess={(result) => console.log('Joined!', result.signature)}
+  onError={(err) => console.error(err)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | *required* | Show/hide the sheet |
+| `onDismiss` | `() => void` | *required* | Called when user closes the sheet |
+| `game` | `GameDetail` | *required* | Game data from `useGame()` |
+| `ImageComponent` | `ComponentType` | — | Custom image component (e.g. expo-image) for team logos |
+| `shortName` | `(name) => string` | — | Custom team label formatter |
+| `homeColor` | `string` | `'#3B82F6'` | Home team accent color |
+| `awayColor` | `string` | `'#EF4444'` | Away team accent color |
+| `onSuccess` | `(result) => void` | — | Called with `{ signature, explorerUrl }` |
+| `onError` | `(error) => void` | — | Called on failure |
+
+#### ClaimPrizeSheet
+
+Bottom sheet for claiming a prize or refund after a game resolves. Includes a celebration animation on success.
+
+```tsx
+import { ClaimPrizeSheet } from '@dubsdotapp/expo';
+
+<ClaimPrizeSheet
+  visible={showSheet}
+  onDismiss={() => setShowSheet(false)}
+  gameId="abc123..."
+  prizeAmount={0.019}
+  isRefund={false}
+  onSuccess={(result) => console.log('Claimed!', result.explorerUrl)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | *required* | Show/hide the sheet |
+| `onDismiss` | `() => void` | *required* | Called when user closes the sheet |
+| `gameId` | `string` | *required* | Game ID to claim |
+| `prizeAmount` | `number` | *required* | Prize amount in SOL |
+| `isRefund` | `boolean` | `false` | Show refund language instead of prize language |
+| `onSuccess` | `(result) => void` | — | Called with `{ signature, explorerUrl }` |
+| `onError` | `(error) => void` | — | Called on failure |
+
+### ClaimButton
+
+Drop-in button that handles the entire claim flow internally — eligibility checks, prize/refund display, sheet lifecycle, and claimed badge. Renders nothing when the user is ineligible.
+
+```tsx
+import { ClaimButton } from '@dubsdotapp/expo';
+
+<ClaimButton
+  gameId="abc123..."
+  onSuccess={(result) => console.log('Claimed!', result.explorerUrl)}
+  onError={(err) => console.error(err)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `gameId` | `string` | *required* | Game ID to check and claim |
+| `style` | `ViewStyle` | — | Custom button style |
+| `onSuccess` | `(result) => void` | — | Called after successful claim |
+| `onError` | `(error) => void` | — | Called on failure |
+
+**Render states:**
+- Loading / no wallet / no data → renders nothing
+- Not eligible (lost, not resolved, not a bettor) → renders nothing
+- Eligible + unclaimed → solid accent button: "Claim Prize — X SOL" or "Claim Refund — X SOL"
+- Already claimed → outlined badge: "Prize Claimed!" or "Refund Claimed!"
+
+### Game Display Cards
+
+| Component | Description |
+|-----------|-------------|
+| `GamePoster` | Hero card with team logos, names, countdown, and live/locked badges |
+| `LivePoolsCard` | Pool breakdown — each side's SOL amount, bar chart, and implied odds |
+| `PickWinnerCard` | Team selection card for choosing which side to bet on |
+| `PlayersCard` | List of all bettors with avatar, username, team, and wager amount |
+| `JoinGameButton` | Fixed bottom bar with buy-in info and join CTA (hides when already joined / locked / resolved) |
+
+### Profile & Settings
+
+| Component | Description |
+|-----------|-------------|
+| `UserProfileCard` | Displays avatar, username, wallet address, and member-since date |
+| `SettingsSheet` | Full settings screen with profile card, copy address, support link, and logout |
+
+### Theming
+
+All UI components respect the developer-configured accent color from the Dubs dashboard. You can also override the theme programmatically:
+
+```tsx
+import { useDubsTheme, mergeTheme } from '@dubsdotapp/expo';
+import type { DubsTheme } from '@dubsdotapp/expo';
+
+// Inside a component — automatically respects light/dark mode + accent override
+const theme = useDubsTheme();
+
+// Or merge custom overrides manually
+const custom = mergeTheme(baseTheme, { accent: '#EF4444' });
+```
+
 ## Event ID Format
 
 - Sports: `sports:{LEAGUE}:{EVENT_ID}` (e.g. `sports:NBA:espn-nba-401...`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",