@dubsdotapp/expo 0.1.0

package/src/ui/SettingsSheet.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import { useDubsTheme } from './theme';
+import { UserProfileCard } from './UserProfileCard';
+
+export interface SettingsSheetProps {
+  walletAddress: string;
+  username?: string;
+  avatarUrl?: string | null;
+  memberSince?: string | null;
+  appVersion?: string;
+  onCopyAddress?: () => void;
+  onSupport?: () => void;
+  onLogout: () => void | Promise<void>;
+  loggingOut?: boolean;
+}
+
+function truncateAddress(address: string, chars = 4): string {
+  if (address.length <= chars * 2 + 3) return address;
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+}
+
+export function SettingsSheet({
+  walletAddress,
+  username,
+  avatarUrl,
+  memberSince,
+  appVersion,
+  onCopyAddress,
+  onSupport,
+  onLogout,
+  loggingOut = false,
+}: SettingsSheetProps) {
+  const t = useDubsTheme();
+
+  return (
+    <ScrollView
+      style={[styles.container, { backgroundColor: t.background }]}
+      contentContainerStyle={styles.content}
+    >
+      {/* Profile card */}
+      <UserProfileCard
+        walletAddress={walletAddress}
+        username={username}
+        avatarUrl={avatarUrl}
+        memberSince={memberSince}
+      />
+
+      {/* Action rows */}
+      <View style={[styles.actionsCard, { backgroundColor: t.surface, borderColor: t.border }]}>
+        {onCopyAddress ? (
+          <TouchableOpacity
+            style={styles.actionRow}
+            onPress={onCopyAddress}
+            activeOpacity={0.7}
+          >
+            <View style={styles.actionRowLeft}>
+              <Text style={[styles.actionLabel, { color: t.text }]}>Wallet Address</Text>
+              <Text style={[styles.actionValue, { color: t.textMuted }]}>
+                {truncateAddress(walletAddress)}
+              </Text>
+            </View>
+            <Text style={[styles.copyLabel, { color: t.accent }]}>Copy</Text>
+          </TouchableOpacity>
+        ) : null}
+
+        {onSupport ? (
+          <>
+            {onCopyAddress ? (
+              <View style={[styles.separator, { backgroundColor: t.border }]} />
+            ) : null}
+            <TouchableOpacity
+              style={styles.actionRow}
+              onPress={onSupport}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.actionLabel, { color: t.text }]}>Help & Support</Text>
+              <Text style={[styles.chevron, { color: t.textMuted }]}>{'\u203A'}</Text>
+            </TouchableOpacity>
+          </>
+        ) : null}
+      </View>
+
+      {/* Logout button */}
+      <TouchableOpacity
+        style={[styles.logoutButton, { borderColor: t.live }]}
+        onPress={onLogout}
+        disabled={loggingOut}
+        activeOpacity={0.7}
+      >
+        {loggingOut ? (
+          <ActivityIndicator color={t.live} size="small" />
+        ) : (
+          <Text style={[styles.logoutText, { color: t.live }]}>Log Out</Text>
+        )}
+      </TouchableOpacity>
+
+      {/* App version */}
+      {appVersion ? (
+        <Text style={[styles.version, { color: t.textDim }]}>v{appVersion}</Text>
+      ) : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    paddingTop: 24,
+    gap: 20,
+  },
+  actionsCard: {
+    borderRadius: 16,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  actionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  actionRowLeft: {
+    flex: 1,
+    gap: 2,
+  },
+  actionLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  actionValue: {
+    fontSize: 13,
+    fontFamily: 'monospace',
+  },
+  copyLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  chevron: {
+    fontSize: 22,
+    fontWeight: '300',
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 16,
+  },
+  logoutButton: {
+    height: 52,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoutText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  version: {
+    fontSize: 12,
+    textAlign: 'center',
+  },
+});

package/src/ui/UserProfileCard.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import { useDubsTheme } from './theme';
+
+export interface UserProfileCardProps {
+  walletAddress: string;
+  username?: string;
+  avatarUrl?: string | null;
+  memberSince?: string | null;
+}
+
+function truncateAddress(address: string, chars = 4): string {
+  if (address.length <= chars * 2 + 3) return address;
+  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+}
+
+function formatMemberSince(iso: string): string {
+  const date = new Date(iso);
+  const month = date.toLocaleString('en-US', { month: 'short' });
+  const year = date.getFullYear();
+  return `Member since ${month} ${year}`;
+}
+
+export function UserProfileCard({
+  walletAddress,
+  username,
+  avatarUrl,
+  memberSince,
+}: UserProfileCardProps) {
+  const t = useDubsTheme();
+
+  const imageUri = useMemo(
+    () =>
+      avatarUrl ||
+      `https://api.dicebear.com/9.x/avataaars/png?seed=${walletAddress}&size=128`,
+    [avatarUrl, walletAddress],
+  );
+
+  return (
+    <View style={[styles.card, { backgroundColor: t.surface, borderColor: t.border }]}>
+      <Image source={{ uri: imageUri }} style={styles.avatar} />
+      <View style={styles.info}>
+        {username ? (
+          <Text style={[styles.username, { color: t.text }]}>{username}</Text>
+        ) : null}
+        <Text style={[styles.address, { color: t.textMuted }]}>
+          {truncateAddress(walletAddress)}
+        </Text>
+        {memberSince ? (
+          <Text style={[styles.memberSince, { color: t.textDim }]}>
+            {formatMemberSince(memberSince)}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+    gap: 14,
+  },
+  avatar: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: '#1A1A24',
+  },
+  info: {
+    flex: 1,
+    gap: 2,
+  },
+  username: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  address: {
+    fontSize: 14,
+    fontFamily: 'monospace',
+  },
+  memberSince: {
+    fontSize: 12,
+    marginTop: 2,
+  },
+});

package/src/ui/index.ts

@@ -0,0 +1,8 @@
+export { ConnectWalletScreen } from './ConnectWalletScreen';
+export type { ConnectWalletScreenProps } from './ConnectWalletScreen';
+export { UserProfileCard } from './UserProfileCard';
+export type { UserProfileCardProps } from './UserProfileCard';
+export { SettingsSheet } from './SettingsSheet';
+export type { SettingsSheetProps } from './SettingsSheet';
+export { useDubsTheme } from './theme';
+export type { DubsTheme } from './theme';

package/src/ui/theme.ts

@@ -0,0 +1,57 @@
+import { useColorScheme } from 'react-native';
+
+export interface DubsTheme {
+  background: string;
+  surface: string;
+  surfaceActive: string;
+  border: string;
+  text: string;
+  textSecondary: string;
+  textMuted: string;
+  textDim: string;
+  accent: string;
+  success: string;
+  live: string;
+  errorText: string;
+  errorBg: string;
+  errorBorder: string;
+}
+
+const dark: DubsTheme = {
+  background: '#08080D',
+  surface: '#111118',
+  surfaceActive: '#7C3AED',
+  border: '#1A1A24',
+  text: '#FFFFFF',
+  textSecondary: '#E0E0EE',
+  textMuted: '#666666',
+  textDim: '#555555',
+  accent: '#7C3AED',
+  success: '#22C55E',
+  live: '#EF4444',
+  errorText: '#F87171',
+  errorBg: '#1A0A0A',
+  errorBorder: '#3A1515',
+};
+
+const light: DubsTheme = {
+  background: '#FFFFFF',
+  surface: '#F0F0F5',
+  surfaceActive: '#7C3AED',
+  border: '#E0E0E8',
+  text: '#111118',
+  textSecondary: '#333333',
+  textMuted: '#888888',
+  textDim: '#999999',
+  accent: '#7C3AED',
+  success: '#16A34A',
+  live: '#DC2626',
+  errorText: '#DC2626',
+  errorBg: '#FEF2F2',
+  errorBorder: '#FECACA',
+};
+
+export function useDubsTheme(): DubsTheme {
+  const scheme = useColorScheme();
+  return scheme === 'light' ? light : dark;
+}

package/src/utils/transaction.ts

@@ -0,0 +1,67 @@
+import { Connection, Transaction } from '@solana/web3.js';
+import type { TransactionConfirmationStatus } from '@solana/web3.js';
+import type { WalletAdapter } from '../wallet/types';
+
+/**
+ * Deserialize a base64-encoded transaction, sign via wallet adapter, send to Solana.
+ * Returns the transaction signature.
+ */
+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);
+
+  // 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`);
+}

package/src/wallet/index.ts

@@ -0,0 +1,3 @@
+export type { WalletAdapter } from './types';
+export { MwaWalletAdapter } from './mwa-adapter';
+export type { MwaAdapterConfig, MwaTransactFn } from './mwa-adapter';

package/src/wallet/mwa-adapter.ts

@@ -0,0 +1,156 @@
+import { PublicKey, Transaction } from '@solana/web3.js';
+import type { WalletAdapter } from './types';
+
+/** Convert an MWA address (base64 string or Uint8Array) to a PublicKey */
+function toPublicKey(address: string | Uint8Array): PublicKey {
+  if (address instanceof Uint8Array) {
+    return new PublicKey(address);
+  }
+  // MWA protocol returns addresses as base64 — decode to bytes
+  const bytes = Uint8Array.from(atob(address), (c) => c.charCodeAt(0));
+  return new PublicKey(bytes);
+}
+
+/** The `transact` function signature from @solana-mobile/mobile-wallet-adapter-protocol-web3js */
+export type MwaTransactFn = (
+  callback: (wallet: any) => Promise<any>,
+) => Promise<any>;
+
+export interface MwaAdapterConfig {
+  /** The MWA `transact` function — import it from @solana-mobile/mobile-wallet-adapter-protocol-web3js */
+  transact: MwaTransactFn;
+  appIdentity: {
+    name: string;
+    uri?: string;
+    icon?: string;
+  };
+  cluster?: string;
+  onAuthTokenChange?: (token: string | null) => void;
+}
+
+/**
+ * Mobile Wallet Adapter implementation.
+ * Wraps @solana-mobile/mobile-wallet-adapter-protocol-web3js.
+ *
+ * Usage:
+ * ```ts
+ * import { transact } from '@solana-mobile/mobile-wallet-adapter-protocol-web3js';
+ *
+ * const adapter = new MwaWalletAdapter({
+ *   transact,
+ *   appIdentity: { name: 'My App' },
+ * });
+ * ```
+ */
+export class MwaWalletAdapter implements WalletAdapter {
+  private _publicKey: PublicKey | null = null;
+  private _connected = false;
+  private _authToken: string | null = null;
+  private readonly config: MwaAdapterConfig;
+  private readonly transact: MwaTransactFn;
+
+  constructor(config: MwaAdapterConfig) {
+    this.config = config;
+    this.transact = config.transact;
+  }
+
+  get publicKey(): PublicKey | null {
+    return this._publicKey;
+  }
+
+  get connected(): boolean {
+    return this._connected;
+  }
+
+  /**
+   * Connect to a mobile wallet. Call this before any signing.
+   */
+  async connect(): Promise<void> {
+    await this.transact(async (wallet) => {
+      const authResult = this._authToken
+        ? await wallet.reauthorize({ auth_token: this._authToken })
+        : await wallet.authorize({
+            identity: this.config.appIdentity,
+            cluster: this.config.cluster || 'mainnet-beta',
+          });
+
+      this._publicKey = toPublicKey(authResult.accounts[0].address);
+      this._authToken = authResult.auth_token;
+      this._connected = true;
+
+      this.config.onAuthTokenChange?.(this._authToken);
+    });
+  }
+
+  /**
+   * Disconnect and clear auth token.
+   */
+  disconnect(): void {
+    this._publicKey = null;
+    this._connected = false;
+    this._authToken = null;
+    this.config.onAuthTokenChange?.(null);
+  }
+
+  async signTransaction(transaction: Transaction): Promise<Transaction> {
+    if (!this._connected) throw new Error('Wallet not connected');
+
+    const signed = await this.transact(async (wallet) => {
+      const reauth = await wallet.reauthorize({ auth_token: this._authToken });
+      this._authToken = reauth.auth_token;
+      this.config.onAuthTokenChange?.(this._authToken);
+
+      const result = await wallet.signTransactions({
+        transactions: [transaction],
+      });
+      return result[0];
+    });
+
+    return signed;
+  }
+
+  async signMessage(message: Uint8Array): Promise<Uint8Array> {
+    if (!this._connected || !this._publicKey) throw new Error('Wallet not connected');
+
+    const sig = await this.transact(async (wallet) => {
+      const reauth = await wallet.reauthorize({ auth_token: this._authToken });
+      this._authToken = reauth.auth_token;
+      this.config.onAuthTokenChange?.(this._authToken);
+
+      const result = await wallet.signMessages({
+        addresses: [this._publicKey!.toBytes()],
+        payloads: [message],
+      });
+      return result[0];
+    });
+
+    return sig instanceof Uint8Array ? sig : new Uint8Array(sig);
+  }
+
+  async signAndSendTransaction(transaction: Transaction): Promise<string> {
+    if (!this._connected) throw new Error('Wallet not connected');
+
+    const signature = await this.transact(async (wallet) => {
+      const reauth = await wallet.reauthorize({ auth_token: this._authToken });
+      this._authToken = reauth.auth_token;
+      this.config.onAuthTokenChange?.(this._authToken);
+
+      const result = await wallet.signAndSendTransactions({
+        transactions: [transaction],
+      });
+      return result[0];
+    });
+
+    // MWA returns Uint8Array signature — convert to base58 string
+    if (signature instanceof Uint8Array) {
+      const bs58 = await import('@solana/web3.js').then(() => {
+        return new PublicKey(signature).toBase58();
+      }).catch(() => {
+        return Buffer.from(signature).toString('base64');
+      });
+      return bs58;
+    }
+
+    return String(signature);
+  }
+}

package/src/wallet/types.ts

@@ -0,0 +1,30 @@
+import type { Transaction, PublicKey } from '@solana/web3.js';
+
+/**
+ * Minimal wallet adapter interface.
+ * Two required methods: publicKey + signTransaction.
+ * signAndSendTransaction is optional — if not provided, the SDK signs then sends via RPC.
+ */
+export interface WalletAdapter {
+  /** The connected wallet's public key, or null if not connected */
+  publicKey: PublicKey | null;
+
+  /** Whether the wallet is currently connected */
+  connected: boolean;
+
+  /** Sign a transaction without sending it */
+  signTransaction(transaction: Transaction): Promise<Transaction>;
+
+  /**
+   * Optional: Sign and send in one step.
+   * If provided, the SDK will prefer this over signTransaction + sendRawTransaction.
+   * Returns the transaction signature.
+   */
+  signAndSendTransaction?(transaction: Transaction): Promise<string>;
+
+  /**
+   * Optional: Sign an arbitrary message (for authentication).
+   * Returns the signature as a Uint8Array.
+   */
+  signMessage?(message: Uint8Array): Promise<Uint8Array>;
+}