@dubsdotapp/expo 0.1.2 → 0.2.0

package/src/ui/game/GamePoster.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { useDubsTheme } from '../theme';
+import type { GameDetail } from '../../types';
+
+export interface GamePosterProps {
+  game: GameDetail;
+  /** Optional Image component — pass expo-image or RN Image. Defaults to RN Image. */
+  ImageComponent?: React.ComponentType<any>;
+}
+
+function computeCountdown(lockTimestamp: number | string | null): string {
+  if (!lockTimestamp) return '';
+  const ts = typeof lockTimestamp === 'string' ? parseInt(lockTimestamp) : lockTimestamp;
+  const diff = ts * 1000 - Date.now();
+  if (diff <= 0) return 'LIVE';
+  const days = Math.floor(diff / 86400000);
+  const hours = Math.floor((diff % 86400000) / 3600000);
+  const mins = Math.floor((diff % 3600000) / 60000);
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${mins}m`;
+  return `${mins}m`;
+}
+
+/**
+ * Matchup poster hero widget.
+ * Shows the game poster image (or team logo fallback), countdown pill, and pool total.
+ */
+export function GamePoster({ game, ImageComponent }: GamePosterProps) {
+  const t = useDubsTheme();
+  const Img = ImageComponent || require('react-native').Image;
+
+  const opponents = game.opponents || [];
+  const home = opponents[0];
+  const away = opponents[1];
+  const countdown = computeCountdown(game.lockTimestamp);
+  const isLive = countdown === 'LIVE';
+
+  return (
+    <View style={styles.container}>
+      {game.media?.poster ? (
+        <Img
+          source={{ uri: game.media.poster }}
+          style={styles.image}
+          resizeMode="cover"
+        />
+      ) : (
+        <View style={[styles.image, { backgroundColor: t.surface }]}>
+          <View style={styles.fallback}>
+            <TeamLogoInternal url={home?.imageUrl} size={56} Img={Img} />
+            <Text style={styles.vs}>VS</Text>
+            <TeamLogoInternal url={away?.imageUrl} size={56} Img={Img} />
+          </View>
+        </View>
+      )}
+      <View style={styles.overlay} />
+
+      <View style={styles.teamNames}>
+        <Text style={styles.teamNameText} numberOfLines={1}>
+          {home?.name || 'Home'}
+        </Text>
+        <Text style={styles.teamNameVs}>vs</Text>
+        <Text style={styles.teamNameText} numberOfLines={1}>
+          {away?.name || 'Away'}
+        </Text>
+      </View>
+
+      {countdown ? (
+        <View style={styles.countdownPill}>
+          <Text style={[styles.countdownText, isLive && styles.countdownLive]}>
+            {countdown}
+          </Text>
+        </View>
+      ) : null}
+
+      <View style={styles.poolPill}>
+        <Text style={styles.poolText}>{game.totalPool || 0} SOL</Text>
+      </View>
+    </View>
+  );
+}
+
+function TeamLogoInternal({ url, size, Img }: { url: string | null | undefined; size: number; Img: any }) {
+  const [failed, setFailed] = useState(false);
+  if (!url || failed) {
+    return <View style={[styles.logoPlaceholder, { width: size, height: size, borderRadius: size / 2 }]} />;
+  }
+  return (
+    <Img
+      source={{ uri: url }}
+      style={{ width: size, height: size, borderRadius: size / 2 }}
+      resizeMode="contain"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 200,
+    borderRadius: 16,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  fallback: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 24,
+    zIndex: 2,
+  },
+  vs: {
+    color: '#FFF',
+    fontSize: 24,
+    fontWeight: '900',
+    zIndex: 2,
+  },
+  logoPlaceholder: {
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    zIndex: 2,
+  },
+  teamNames: {
+    position: 'absolute',
+    top: 12,
+    left: 12,
+    right: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  teamNameText: {
+    color: '#FFF',
+    fontSize: 14,
+    fontWeight: '700',
+    maxWidth: '40%',
+  },
+  teamNameVs: {
+    color: 'rgba(255,255,255,0.6)',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  countdownPill: {
+    position: 'absolute',
+    bottom: 12,
+    left: 12,
+    backgroundColor: 'rgba(0,0,0,0.65)',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  countdownText: {
+    color: '#FFF',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  countdownLive: {
+    color: '#EF4444',
+  },
+  poolPill: {
+    position: 'absolute',
+    bottom: 12,
+    right: 12,
+    backgroundColor: '#7C3AED',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+  },
+  poolText: {
+    color: '#FFF',
+    fontSize: 13,
+    fontWeight: '800',
+  },
+});

package/src/ui/game/JoinGameButton.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { useDubsTheme } from '../theme';
+import type { GameDetail, MutationStatus } from '../../types';
+
+export interface JoinGameButtonProps {
+  game: GameDetail;
+  walletAddress: string;
+  selectedTeam: 'home' | 'away' | null;
+  status: MutationStatus;
+  onJoin: () => void;
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  building: 'Building transaction...',
+  signing: 'Approve in wallet...',
+  confirming: 'Confirming on-chain...',
+  saving: 'Saving...',
+};
+
+/**
+ * Fixed bottom bar with buy-in info and join button.
+ * Renders nothing if the user already joined, or the game is locked/resolved.
+ */
+export function JoinGameButton({ game, walletAddress, selectedTeam, status, onJoin }: JoinGameButtonProps) {
+  const t = useDubsTheme();
+
+  const alreadyJoined = useMemo(() => {
+    if (!walletAddress) return false;
+    return (game.bettors || []).some(b => b.wallet === walletAddress);
+  }, [game.bettors, walletAddress]);
+
+  if (alreadyJoined || game.isLocked || game.isResolved) return null;
+
+  const isJoining = status !== 'idle' && status !== 'success' && status !== 'error';
+  const statusLabel = STATUS_LABELS[status] || '';
+
+  return (
+    <View style={[styles.bar, { backgroundColor: t.background, borderTopColor: t.border }]}>
+      <View style={styles.buyInRow}>
+        <Text style={[styles.buyInLabel, { color: t.textMuted }]}>Buy-in</Text>
+        <Text style={[styles.buyInValue, { color: t.text }]}>{game.buyIn} SOL</Text>
+      </View>
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: selectedTeam ? '#22D3EE' : t.border }]}
+        disabled={!selectedTeam || isJoining}
+        onPress={onJoin}
+        activeOpacity={0.8}
+      >
+        {isJoining ? (
+          <View style={styles.joiningRow}>
+            <ActivityIndicator size="small" color="#000" />
+            <Text style={styles.buttonText}>{statusLabel}</Text>
+          </View>
+        ) : (
+          <Text style={[styles.buttonText, !selectedTeam && { color: t.textMuted }]}>
+            {selectedTeam ? `Join Bet — ${game.buyIn} SOL` : 'Pick a team to bet'}
+          </Text>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 16, paddingTop: 12, paddingBottom: 36, borderTopWidth: 1 },
+  buyInRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 },
+  buyInLabel: { fontSize: 13 },
+  buyInValue: { fontSize: 15, fontWeight: '800' },
+  button: { borderRadius: 14, paddingVertical: 16, alignItems: 'center' },
+  buttonText: { color: '#000', fontSize: 16, fontWeight: '800' },
+  joiningRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+});

package/src/ui/game/LivePoolsCard.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { useDubsTheme } from '../theme';
+import type { GameDetail } from '../../types';
+
+export interface LivePoolsCardProps {
+  game: GameDetail;
+  /** Custom short-name function for team labels. Defaults to full name. */
+  shortName?: (name: string | null) => string;
+  /** Override bar colors. Defaults to blue/red. */
+  homeColor?: string;
+  awayColor?: string;
+}
+
+/**
+ * Pool breakdown card showing each side's SOL amount, bar chart, and implied odds.
+ */
+export function LivePoolsCard({
+  game,
+  shortName,
+  homeColor = '#3B82F6',
+  awayColor = '#EF4444',
+}: LivePoolsCardProps) {
+  const t = useDubsTheme();
+
+  const opponents = game.opponents || [];
+  const homeName = shortName ? shortName(opponents[0]?.name) : (opponents[0]?.name || 'Home');
+  const awayName = shortName ? shortName(opponents[1]?.name) : (opponents[1]?.name || 'Away');
+  const homePool = game.homePool || 0;
+  const awayPool = game.awayPool || 0;
+  const totalPool = game.totalPool || 0;
+
+  const { homePercent, awayPercent, homeOdds, awayOdds } = useMemo(() => {
+    return {
+      homePercent: totalPool > 0 ? (homePool / totalPool) * 100 : 50,
+      awayPercent: totalPool > 0 ? (awayPool / totalPool) * 100 : 50,
+      homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : '—',
+      awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : '—',
+    };
+  }, [homePool, awayPool, totalPool]);
+
+  return (
+    <View style={[styles.card, { backgroundColor: t.surface, borderColor: t.border }]}>
+      <Text style={[styles.title, { color: t.text }]}>Live Pools</Text>
+      <Text style={[styles.total, { color: t.accent }]}>{totalPool} SOL total</Text>
+
+      <View style={styles.bars}>
+        <PoolBar name={homeName} amount={homePool} percent={homePercent} color={homeColor} t={t} />
+        <PoolBar name={awayName} amount={awayPool} percent={awayPercent} color={awayColor} t={t} />
+      </View>
+
+      <View style={styles.oddsRow}>
+        <Text style={[styles.oddsText, { color: t.textMuted }]}>
+          {homeName}: <Text style={{ color: t.text, fontWeight: '700' }}>{homeOdds}x</Text>
+        </Text>
+        <Text style={[styles.oddsText, { color: t.textMuted }]}>
+          {awayName}: <Text style={{ color: t.text, fontWeight: '700' }}>{awayOdds}x</Text>
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function PoolBar({ name, amount, percent, color, t }: { name: string; amount: number; percent: number; color: string; t: any }) {
+  return (
+    <View style={styles.barRow}>
+      <Text style={[styles.barLabel, { color: t.textSecondary }]} numberOfLines={1}>{name}</Text>
+      <View style={[styles.barTrack, { backgroundColor: t.border }]}>
+        <View style={[styles.barFill, { width: `${Math.max(percent, 2)}%`, backgroundColor: color }]} />
+      </View>
+      <Text style={[styles.barAmount, { color: t.text }]}>{amount} SOL</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
+  title: { fontSize: 17, fontWeight: '700', marginBottom: 4 },
+  total: { fontSize: 14, fontWeight: '600', marginBottom: 14 },
+  bars: { gap: 10 },
+  barRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  barLabel: { width: 80, fontSize: 13, fontWeight: '600' },
+  barTrack: { flex: 1, height: 10, borderRadius: 5, overflow: 'hidden' },
+  barFill: { height: '100%', borderRadius: 5 },
+  barAmount: { width: 70, textAlign: 'right', fontSize: 13, fontWeight: '700' },
+  oddsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 12 },
+  oddsText: { fontSize: 12 },
+});

package/src/ui/game/PickWinnerCard.tsx

@@ -0,0 +1,126 @@
+import { useState, useMemo } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import { useDubsTheme } from '../theme';
+import type { GameDetail } from '../../types';
+
+export interface PickWinnerCardProps {
+  game: GameDetail;
+  selectedTeam: 'home' | 'away' | null;
+  onSelect: (team: 'home' | 'away') => void;
+  /** Custom short-name function for team labels. Defaults to full name. */
+  shortName?: (name: string | null) => string;
+  /** Override colors. Defaults to blue/red. */
+  homeColor?: string;
+  awayColor?: string;
+  /** Optional Image component (expo-image, etc.). */
+  ImageComponent?: React.ComponentType<any>;
+}
+
+/**
+ * Team selection card for picking which side to bet on.
+ */
+export function PickWinnerCard({
+  game,
+  selectedTeam,
+  onSelect,
+  shortName,
+  homeColor = '#3B82F6',
+  awayColor = '#EF4444',
+  ImageComponent,
+}: PickWinnerCardProps) {
+  const t = useDubsTheme();
+
+  const opponents = game.opponents || [];
+  const bettors = game.bettors || [];
+  const totalPool = game.totalPool || 0;
+  const homePool = game.homePool || 0;
+  const awayPool = game.awayPool || 0;
+
+  const { homeOdds, awayOdds, homeBets, awayBets } = useMemo(() => ({
+    homeOdds: homePool > 0 ? (totalPool / homePool).toFixed(2) : '—',
+    awayOdds: awayPool > 0 ? (totalPool / awayPool).toFixed(2) : '—',
+    homeBets: bettors.filter(b => b.team === 'home').length,
+    awayBets: bettors.filter(b => b.team === 'away').length,
+  }), [totalPool, homePool, awayPool, bettors]);
+
+  const homeName = shortName ? shortName(opponents[0]?.name) : (opponents[0]?.name || 'Home');
+  const awayName = shortName ? shortName(opponents[1]?.name) : (opponents[1]?.name || 'Away');
+
+  return (
+    <View style={[styles.card, { backgroundColor: t.surface, borderColor: t.border }]}>
+      <Text style={[styles.title, { color: t.text }]}>Pick Your Winner</Text>
+      <View style={styles.row}>
+        <TeamOption
+          name={homeName}
+          imageUrl={opponents[0]?.imageUrl}
+          odds={homeOdds}
+          bets={homeBets}
+          color={homeColor}
+          selected={selectedTeam === 'home'}
+          onPress={() => onSelect('home')}
+          ImageComponent={ImageComponent}
+          t={t}
+        />
+        <TeamOption
+          name={awayName}
+          imageUrl={opponents[1]?.imageUrl}
+          odds={awayOdds}
+          bets={awayBets}
+          color={awayColor}
+          selected={selectedTeam === 'away'}
+          onPress={() => onSelect('away')}
+          ImageComponent={ImageComponent}
+          t={t}
+        />
+      </View>
+    </View>
+  );
+}
+
+function TeamOption({
+  name, imageUrl, odds, bets, color, selected, onPress, ImageComponent, t,
+}: {
+  name: string; imageUrl?: string | null; odds: string; bets: number;
+  color: string; selected: boolean; onPress: () => void;
+  ImageComponent?: React.ComponentType<any>; t: any;
+}) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const Img = ImageComponent || require('react-native').Image;
+  const showImage = imageUrl && !imgFailed;
+
+  return (
+    <TouchableOpacity
+      style={[styles.option, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + '15' : t.background }]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      {showImage ? (
+        <Img source={{ uri: imageUrl }} style={styles.logo} resizeMode="contain" onError={() => setImgFailed(true)} />
+      ) : (
+        <View style={[styles.logo, styles.logoPlaceholder]} />
+      )}
+      <Text style={[styles.name, { color: t.text }]} numberOfLines={1}>{name}</Text>
+      <Text style={[styles.odds, { color }]}>{odds}x</Text>
+      <Text style={[styles.bets, { color: t.textMuted }]}>{bets} {bets === 1 ? 'bet' : 'bets'}</Text>
+      {selected && (
+        <View style={[styles.badge, { backgroundColor: color }]}>
+          <Text style={styles.badgeText}>Selected</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
+  title: { fontSize: 17, fontWeight: '700', marginBottom: 12 },
+  row: { flexDirection: 'row', gap: 12 },
+  option: { flex: 1, borderWidth: 2, borderRadius: 16, padding: 16, alignItems: 'center', gap: 8 },
+  logo: { width: 48, height: 48, borderRadius: 24 },
+  logoPlaceholder: { backgroundColor: 'rgba(128,128,128,0.2)' },
+  name: { fontSize: 15, fontWeight: '700' },
+  odds: { fontSize: 20, fontWeight: '800' },
+  bets: { fontSize: 12 },
+  badge: { borderRadius: 8, paddingHorizontal: 12, paddingVertical: 4, marginTop: 4 },
+  badgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+});

package/src/ui/game/PlayersCard.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { useDubsTheme } from '../theme';
+import type { GameDetail } from '../../types';
+
+export interface PlayersCardProps {
+  game: GameDetail;
+  /** How many chars to show on each side of a truncated wallet. Default 4. */
+  truncateChars?: number;
+  /** Override team dot colors. */
+  homeColor?: string;
+  awayColor?: string;
+  drawColor?: string;
+  /** Optional Image component (expo-image, etc.). */
+  ImageComponent?: React.ComponentType<any>;
+}
+
+function truncateWallet(addr: string, chars: number): string {
+  if (addr.length <= chars * 2 + 3) return addr;
+  return `${addr.slice(0, chars)}...${addr.slice(-chars)}`;
+}
+
+/**
+ * Card showing all bettors in a game with their avatar, username, team, and wager amount.
+ */
+export function PlayersCard({
+  game,
+  truncateChars = 4,
+  homeColor = '#3B82F6',
+  awayColor = '#EF4444',
+  drawColor = '#A855F7',
+  ImageComponent,
+}: PlayersCardProps) {
+  const t = useDubsTheme();
+  const bettors = game.bettors || [];
+
+  const dotColor = (team: 'home' | 'away' | 'draw') => {
+    if (team === 'home') return homeColor;
+    if (team === 'away') return awayColor;
+    return drawColor;
+  };
+
+  return (
+    <View style={[styles.card, { backgroundColor: t.surface, borderColor: t.border }]}>
+      <Text style={[styles.title, { color: t.text }]}>
+        Players{bettors.length > 0 ? ` (${bettors.length})` : ''}
+      </Text>
+
+      {bettors.length === 0 ? (
+        <Text style={[styles.empty, { color: t.textMuted }]}>No players yet — be the first!</Text>
+      ) : (
+        bettors.map((b, i) => (
+          <BettorRow
+            key={`${b.wallet}-${i}`}
+            bettor={b}
+            dotColor={dotColor(b.team)}
+            truncateChars={truncateChars}
+            isFirst={i === 0}
+            ImageComponent={ImageComponent}
+            t={t}
+          />
+        ))
+      )}
+    </View>
+  );
+}
+
+function BettorRow({
+  bettor, dotColor, truncateChars, isFirst, ImageComponent, t,
+}: {
+  bettor: { wallet: string; username: string | null; avatar: string | null; team: 'home' | 'away' | 'draw'; amount: number };
+  dotColor: string; truncateChars: number; isFirst: boolean;
+  ImageComponent?: React.ComponentType<any>; t: any;
+}) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const Img = ImageComponent || require('react-native').Image;
+  const showAvatar = bettor.avatar && !imgFailed;
+
+  return (
+    <View style={[styles.row, !isFirst && { borderTopColor: t.border, borderTopWidth: 1 }]}>
+      <View style={[styles.dot, { backgroundColor: dotColor }]} />
+      {showAvatar ? (
+        <Img source={{ uri: bettor.avatar }} style={styles.avatar} resizeMode="cover" onError={() => setImgFailed(true)} />
+      ) : (
+        <View style={[styles.avatar, styles.avatarPlaceholder]} />
+      )}
+      <View style={styles.nameCol}>
+        <Text style={[styles.username, { color: t.text }]} numberOfLines={1}>
+          {bettor.username || truncateWallet(bettor.wallet, truncateChars)}
+        </Text>
+      </View>
+      <Text style={[styles.amount, { color: t.textSecondary }]}>{bettor.amount} SOL</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { borderRadius: 16, borderWidth: 1, padding: 16 },
+  title: { fontSize: 17, fontWeight: '700', marginBottom: 12 },
+  empty: { fontSize: 14, textAlign: 'center', paddingVertical: 16 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, gap: 10 },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  avatar: { width: 28, height: 28, borderRadius: 14 },
+  avatarPlaceholder: { backgroundColor: 'rgba(128,128,128,0.2)' },
+  nameCol: { flex: 1 },
+  username: { fontSize: 14, fontWeight: '600' },
+  amount: { fontSize: 13, fontWeight: '700' },
+});

package/src/ui/game/index.ts

@@ -0,0 +1,10 @@
+export { GamePoster } from './GamePoster';
+export type { GamePosterProps } from './GamePoster';
+export { LivePoolsCard } from './LivePoolsCard';
+export type { LivePoolsCardProps } from './LivePoolsCard';
+export { PickWinnerCard } from './PickWinnerCard';
+export type { PickWinnerCardProps } from './PickWinnerCard';
+export { PlayersCard } from './PlayersCard';
+export type { PlayersCardProps } from './PlayersCard';
+export { JoinGameButton } from './JoinGameButton';
+export type { JoinGameButtonProps } from './JoinGameButton';

package/src/ui/index.ts

@@ -8,3 +8,13 @@ export { SettingsSheet } from './SettingsSheet';
 export type { SettingsSheetProps } from './SettingsSheet';
 export { useDubsTheme } from './theme';
 export type { DubsTheme } from './theme';
+
+// Game widgets
+export { GamePoster, LivePoolsCard, PickWinnerCard, PlayersCard, JoinGameButton } from './game';
+export type {
+  GamePosterProps,
+  LivePoolsCardProps,
+  PickWinnerCardProps,
+  PlayersCardProps,
+  JoinGameButtonProps,
+} from './game';

package/src/utils/transaction.ts

@@ -1,5 +1,4 @@
-import { Connection, Transaction } from '@solana/web3.js';
-import type { TransactionConfirmationStatus } from '@solana/web3.js';
+import { Transaction } from '@solana/web3.js';
 import type { WalletAdapter } from '../wallet/types';
 
 /**
@@ -9,59 +8,19 @@ import type { WalletAdapter } from '../wallet/types';
 export async function signAndSendBase64Transaction(
   base64Tx: string,
   wallet: WalletAdapter,
-  connection: Connection,
 ): Promise<string> {
   if (!wallet.publicKey) throw new Error('Wallet not connected');
 
-  const txBuffer = Buffer.from(base64Tx, 'base64');
-  const transaction = Transaction.from(txBuffer);
+  const binaryStr = atob(base64Tx);
+  const bytes = new Uint8Array(binaryStr.length);
+  for (let i = 0; i < binaryStr.length; i++) {
+    bytes[i] = binaryStr.charCodeAt(i);
+  }
+  const transaction = Transaction.from(bytes);
 
-  // If the wallet supports signAndSend in one step, prefer that
   if (wallet.signAndSendTransaction) {
     return wallet.signAndSendTransaction(transaction);
   }
 
-  // Otherwise: sign, then send via RPC
-  const signed = await wallet.signTransaction(transaction);
-  const signature = await connection.sendRawTransaction(signed.serialize(), {
-    skipPreflight: true,
-  });
-
-  return signature;
-}
-
-/**
- * Poll for transaction confirmation using getSignatureStatuses.
- * Uses polling instead of deprecated WebSocket-based confirmTransaction.
- */
-export async function pollTransactionConfirmation(
-  signature: string,
-  connection: Connection,
-  commitment: TransactionConfirmationStatus = 'confirmed',
-  timeout: number = 60000,
-  interval: number = 1500,
-): Promise<void> {
-  const start = Date.now();
-  const confirmationOrder: TransactionConfirmationStatus[] = ['processed', 'confirmed', 'finalized'];
-  const targetIndex = confirmationOrder.indexOf(commitment);
-
-  while (Date.now() - start < timeout) {
-    const statuses = await connection.getSignatureStatuses([signature]);
-    const status = statuses?.value?.[0];
-
-    if (status?.err) {
-      throw new Error(`Transaction failed: ${JSON.stringify(status.err)}`);
-    }
-
-    if (status?.confirmationStatus) {
-      const currentIndex = confirmationOrder.indexOf(status.confirmationStatus);
-      if (currentIndex >= targetIndex) {
-        return;
-      }
-    }
-
-    await new Promise(resolve => setTimeout(resolve, interval));
-  }
-
-  throw new Error(`Transaction confirmation timeout after ${timeout}ms`);
+  throw new Error('Wallet does not support signAndSendTransaction');
 }