@dubsdotapp/expo 0.5.17 → 0.5.18

package/src/ui/jackpot/JackpotWidget.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { JackpotCard } from './JackpotCard';
+import { JackpotSheet } from './JackpotSheet';
+import { useJackpot } from '../../hooks/useJackpot';
+import { useDubs } from '../../provider';
+import type { EnterJackpotMutationResult } from '../../hooks/useEnterJackpot';
+import type { JackpotEntry } from '../../types';
+import type { ViewStyle } from 'react-native';
+
+export interface JackpotWidgetProps {
+  /** Style applied to the card */
+  style?: ViewStyle;
+  /** Minimum entry in SOL (default: 0.01) */
+  minEntry?: number;
+  /** Maximum entry in SOL (default: 10) */
+  maxEntry?: number;
+  /** Callback when a jackpot entry succeeds */
+  onEntry?: (result: EnterJackpotMutationResult) => void;
+  /** Callback on entry error */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Self-contained Jackpot widget — the first "crypto ad".
+ *
+ * Drop `<JackpotWidget />` anywhere in your app. Shows a live jackpot card
+ * matching the web lobby design with pot amount, player carousel, and
+ * Place Bet button. Tapping opens a scrollable sheet with full entry flow.
+ */
+export function JackpotWidget({
+  style,
+  minEntry,
+  maxEntry,
+  onEntry,
+  onError,
+}: JackpotWidgetProps) {
+  const [sheetVisible, setSheetVisible] = useState(false);
+  const { round, lastWinner } = useJackpot();
+  const { client } = useDubs();
+  const [entries, setEntries] = useState<JackpotEntry[]>([]);
+
+  // Fetch entries for the card carousel
+  useEffect(() => {
+    client.getJackpotEntries()
+      .then(res => setEntries(res.entries))
+      .catch(() => {});
+  }, [client, round?.entryCount]);
+
+  return (
+    <>
+      <JackpotCard
+        round={round}
+        lastWinner={lastWinner}
+        entries={entries}
+        onPress={() => setSheetVisible(true)}
+        style={style}
+      />
+      <JackpotSheet
+        visible={sheetVisible}
+        onDismiss={() => setSheetVisible(false)}
+        onSuccess={(result) => {
+          onEntry?.(result);
+          // Refresh entries after entry
+          client.getJackpotEntries()
+            .then(res => setEntries(res.entries))
+            .catch(() => {});
+        }}
+        onError={onError}
+        minEntry={minEntry}
+        maxEntry={maxEntry}
+      />
+    </>
+  );
+}

package/src/ui/jackpot/index.ts

@@ -0,0 +1,6 @@
+export { JackpotCard } from './JackpotCard';
+export type { JackpotCardProps } from './JackpotCard';
+export { JackpotSheet } from './JackpotSheet';
+export type { JackpotSheetProps } from './JackpotSheet';
+export { JackpotWidget } from './JackpotWidget';
+export type { JackpotWidgetProps } from './JackpotWidget';