@dubsdotapp/expo 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -8,6 +8,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "react-native": "./dist/index.js",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }

package/src/client.ts

@@ -30,6 +30,7 @@ import type {
   DubsAppUser,
   CheckUsernameResult,
   LiveScore,
+  UiConfig,
 } from './types';
 
 export interface DubsClientConfig {
@@ -372,4 +373,12 @@ export class DubsClient {
   getErrorCodesLocal(): Record<number, SolanaErrorCode> {
     return { ...SOLANA_PROGRAM_ERRORS };
   }
+
+  // ── App Config ──
+
+  /** Fetch the app's UI customization config (accent color, icon, tagline) */
+  async getAppConfig(): Promise<UiConfig> {
+    const res = await this.request<{ uiConfig: UiConfig }>('GET', '/apps/config');
+    return res.uiConfig || {};
+  }
 }

package/src/index.ts

@@ -54,6 +54,7 @@ export type {
   AuthStatus,
   LiveScore,
   LiveScoreCompetitor,
+  UiConfig,
 } from './types';
 
 // Provider
@@ -84,7 +85,7 @@ export type {
 } from './hooks';
 
 // UI
-export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsTheme } from './ui';
+export { AuthGate, ConnectWalletScreen, UserProfileCard, SettingsSheet, useDubsTheme, mergeTheme } from './ui';
 export type { AuthGateProps, RegistrationScreenProps, ConnectWalletScreenProps, UserProfileCardProps, SettingsSheetProps, DubsTheme } from './ui';
 
 // Game widgets

package/src/managed-wallet.tsx

@@ -22,6 +22,10 @@ interface ManagedWalletProviderProps {
   cluster: string;
   storage: TokenStorage;
   renderConnectScreen?: ((props: ConnectWalletScreenProps) => React.ReactNode) | false;
+  /** Developer UI config overrides for the connect screen */
+  accentColor?: string;
+  appIcon?: string;
+  tagline?: string;
   children: (adapter: MwaWalletAdapter) => React.ReactNode;
 }
 
@@ -32,6 +36,9 @@ export function ManagedWalletProvider({
   cluster,
   storage,
   renderConnectScreen,
+  accentColor,
+  appIcon,
+  tagline,
   children,
 }: ManagedWalletProviderProps) {
   const [connected, setConnected] = useState(false);
@@ -132,6 +139,9 @@ export function ManagedWalletProvider({
       connecting,
       error,
       appName,
+      accentColor,
+      appIcon,
+      tagline,
     };
     if (renderConnectScreen) {
       return <>{renderConnectScreen(connectProps)}</>;

package/src/provider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useCallback } from 'react';
+import React, { createContext, useContext, useMemo, useCallback, useState, useEffect } from 'react';
 import { Connection } from '@solana/web3.js';
 import { DubsClient } from './client';
 import { NETWORK_CONFIG } from './constants';
@@ -10,7 +10,7 @@ import { ManagedWalletProvider, useDisconnect } from './managed-wallet';
 import { AuthGate } from './ui/AuthGate';
 import type { RegistrationScreenProps } from './ui/AuthGate';
 import type { ConnectWalletScreenProps } from './ui/ConnectWalletScreen';
-import type { AuthStatus } from './types';
+import type { AuthStatus, UiConfig } from './types';
 
 // ── Context ──
 
@@ -80,6 +80,12 @@ export function DubsProvider({
   const connection = useMemo(() => new Connection(rpcUrl, { commitment: 'confirmed' }), [rpcUrl]);
   const storage = useMemo(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
 
+  // Fetch developer UI config on mount (silent fail = default theme)
+  const [uiConfig, setUiConfig] = useState<UiConfig>({});
+  useEffect(() => {
+    client.getAppConfig().then(setUiConfig).catch(() => {});
+  }, [client]);
+
   // ── Path A: External wallet provided (BYOA) ──
   if (externalWallet) {
     return (
@@ -87,13 +93,14 @@ export function DubsProvider({
         client={client}
         connection={connection}
         wallet={externalWallet}
-        appName={appName}
+        appName={uiConfig.appName || appName}
         network={network}
         storage={storage}
         managed={managed}
         renderLoading={renderLoading}
         renderError={renderError}
         renderRegistration={renderRegistration}
+        accentColor={uiConfig.accentColor}
       >
         {children}
       </ExternalWalletProvider>
@@ -103,22 +110,26 @@ export function DubsProvider({
   // ── Path B: Managed MWA wallet ──
   return (
     <ManagedWalletProvider
-      appName={appName}
+      appName={uiConfig.appName || appName}
       cluster={cluster}
       storage={storage}
       renderConnectScreen={renderConnectScreen}
+      accentColor={uiConfig.accentColor}
+      appIcon={uiConfig.appIcon}
+      tagline={uiConfig.tagline}
     >
       {(adapter) => (
         <ManagedInner
           client={client}
           connection={connection}
           wallet={adapter}
-          appName={appName}
+          appName={uiConfig.appName || appName}
           network={network}
           storage={storage}
           renderLoading={renderLoading}
           renderError={renderError}
           renderRegistration={renderRegistration}
+          accentColor={uiConfig.accentColor}
         >
           {children}
         </ManagedInner>
@@ -139,6 +150,7 @@ function ManagedInner({
   renderLoading,
   renderError,
   renderRegistration,
+  accentColor,
   children,
 }: {
   client: DubsClient;
@@ -150,6 +162,7 @@ function ManagedInner({
   renderLoading?: (status: AuthStatus) => React.ReactNode;
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
   renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  accentColor?: string;
   children: React.ReactNode;
 }) {
   const managedDisconnect = useDisconnect();
@@ -178,6 +191,7 @@ function ManagedInner({
         renderError={renderError}
         renderRegistration={renderRegistration}
         appName={appName}
+        accentColor={accentColor}
       >
         {children}
       </AuthGate>
@@ -198,6 +212,7 @@ function ExternalWalletProvider({
   renderLoading,
   renderError,
   renderRegistration,
+  accentColor,
   children,
 }: {
   client: DubsClient;
@@ -210,6 +225,7 @@ function ExternalWalletProvider({
   renderLoading?: (status: AuthStatus) => React.ReactNode;
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
   renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
+  accentColor?: string;
   children: React.ReactNode;
 }) {
   const disconnect = useCallback(async () => {
@@ -240,6 +256,7 @@ function ExternalWalletProvider({
         renderError={renderError}
         renderRegistration={renderRegistration}
         appName={appName}
+        accentColor={accentColor}
       >
         {children}
       </AuthGate>

package/src/types.ts

@@ -373,3 +373,12 @@ export interface LiveScore {
     statusDetail: string;
   };
 }
+
+// ── UI Config (developer branding) ──
+
+export interface UiConfig {
+  accentColor?: string;
+  appIcon?: string;
+  appName?: string;
+  tagline?: string;
+}

package/src/ui/AuthGate.tsx

@@ -56,6 +56,8 @@ export interface AuthGateProps {
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
   renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
   appName?: string;
+  /** Override accent color for registration screens (from developer UI config) */
+  accentColor?: string;
 }
 
 // ── AuthGate Component ──
@@ -68,6 +70,7 @@ export function AuthGate({
   renderError,
   renderRegistration,
   appName = 'Dubs',
+  accentColor,
 }: AuthGateProps) {
   const { client } = useDubs();
   const auth = useAuth();
@@ -143,6 +146,7 @@ export function AuthGate({
         error={regError}
         client={client}
         appName={appName}
+        accentColor={accentColor}
       />
     );
   }
@@ -256,8 +260,10 @@ function DefaultRegistrationScreen({
   error,
   client,
   appName,
-}: RegistrationScreenProps & { appName: string }) {
+  accentColor,
+}: RegistrationScreenProps & { appName: string; accentColor?: string }) {
   const t = useDubsTheme();
+  const accent = accentColor || t.accent;
 
   // ── Shared state ──
   const [step, setStep] = useState(0);
@@ -325,7 +331,7 @@ function DefaultRegistrationScreen({
         <StepIndicator currentStep={0} />
 
         <View style={s.avatarCenter}>
-          <View style={[s.avatarFrame, { borderColor: t.accent }]}>
+          <View style={[s.avatarFrame, { borderColor: accent }]}>
             <Image source={{ uri: avatarUrl }} style={s.avatarLarge} />
             <View style={[s.checkBadge, { backgroundColor: t.success }]}>
               <Text style={s.checkBadgeText}>&#10003;</Text>
@@ -342,11 +348,11 @@ function DefaultRegistrationScreen({
             <Text style={[s.outlineBtnText, { color: t.text }]}>&#8635;  Shuffle</Text>
           </TouchableOpacity>
           <TouchableOpacity
-            style={[s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + '15' }]}
+            style={[s.outlineBtn, { borderColor: accent, backgroundColor: accent + '15' }]}
             onPress={() => setShowStyles(!showStyles)}
             activeOpacity={0.7}
           >
-            <Text style={[s.outlineBtnText, { color: t.accent }]}>&#9786;  Customize</Text>
+            <Text style={[s.outlineBtnText, { color: accent }]}>&#9786;  Customize</Text>
           </TouchableOpacity>
         </View>
 
@@ -356,7 +362,7 @@ function DefaultRegistrationScreen({
               <TouchableOpacity
                 key={st}
                 onPress={() => setAvatarStyle(st)}
-                style={[s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }]}
+                style={[s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }]}
               >
                 <Image source={{ uri: getAvatarUrl(st, avatarSeed, 80) }} style={s.styleThumb} />
               </TouchableOpacity>
@@ -367,7 +373,7 @@ function DefaultRegistrationScreen({
 
       <View style={s.bottomRow}>
         <TouchableOpacity
-          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1 }]}
+          style={[s.primaryBtn, { backgroundColor: accent, flex: 1 }]}
           onPress={() => animateToStep(1)}
           activeOpacity={0.8}
         >
@@ -391,7 +397,7 @@ function DefaultRegistrationScreen({
         <StepIndicator currentStep={1} />
 
         <View style={s.avatarCenter}>
-          <View style={[s.avatarFrameSmall, { borderColor: t.accent }]}>
+          <View style={[s.avatarFrameSmall, { borderColor: accent }]}>
             <Image source={{ uri: avatarUrl }} style={s.avatarSmall} />
             <View style={[s.checkBadgeSm, { backgroundColor: t.success }]}>
               <Text style={s.checkBadgeTextSm}>&#10003;</Text>
@@ -404,7 +410,7 @@ function DefaultRegistrationScreen({
             Username <Text style={{ color: t.errorText }}>*</Text>
           </Text>
           <TextInput
-            style={[s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.accent }]}
+            style={[s.input, { backgroundColor: t.surface, color: t.text, borderColor: accent }]}
             placeholder="Enter username"
             placeholderTextColor={t.textDim}
             value={username}
@@ -434,7 +440,7 @@ function DefaultRegistrationScreen({
           <Text style={[s.secondaryBtnText, { color: t.text }]}>&#8249;  Back</Text>
         </TouchableOpacity>
         <TouchableOpacity
-          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }]}
+          style={[s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }]}
           onPress={() => animateToStep(2)}
           disabled={!canContinueUsername}
           activeOpacity={0.8}
@@ -506,7 +512,7 @@ function DefaultRegistrationScreen({
           <Text style={[s.secondaryBtnText, { color: t.text }]}>&#8249;  Back</Text>
         </TouchableOpacity>
         <TouchableOpacity
-          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: registering ? 0.7 : 1 }]}
+          style={[s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: registering ? 0.7 : 1 }]}
           onPress={handleSubmit}
           disabled={registering}
           activeOpacity={0.8}

package/src/ui/ConnectWalletScreen.tsx

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   ActivityIndicator,
   StyleSheet,
+  Image,
 } from 'react-native';
 import { useDubsTheme } from './theme';
 
@@ -17,6 +18,12 @@ export interface ConnectWalletScreenProps {
   error?: string | null;
   /** App name shown in the header. Defaults to "Dubs" */
   appName?: string;
+  /** Override accent color (e.g. from developer UI config) */
+  accentColor?: string;
+  /** URL to app icon — renders as Image instead of the default letter circle */
+  appIcon?: string;
+  /** Override subtitle text below app name */
+  tagline?: string;
 }
 
 export function ConnectWalletScreen({
@@ -24,20 +31,33 @@ export function ConnectWalletScreen({
   connecting = false,
   error = null,
   appName = 'Dubs',
+  accentColor,
+  appIcon,
+  tagline,
 }: ConnectWalletScreenProps) {
   const t = useDubsTheme();
+  const accent = accentColor || t.accent;
 
   return (
     <View style={[styles.container, { backgroundColor: t.background }]}>
       <View style={styles.content}>
         {/* Branding */}
         <View style={styles.brandingSection}>
-          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
-            <Text style={styles.logoText}>D</Text>
-          </View>
+          {appIcon ? (
+            <Image
+              source={{ uri: appIcon }}
+              style={styles.logoImage}
+            />
+          ) : (
+            <View style={[styles.logoCircle, { backgroundColor: accent }]}>
+              <Text style={styles.logoText}>
+                {appName.charAt(0).toUpperCase()}
+              </Text>
+            </View>
+          )}
           <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
           <Text style={[styles.subtitle, { color: t.textMuted }]}>
-            Connect your Solana wallet to get started
+            {tagline || 'Connect your Solana wallet to get started'}
           </Text>
         </View>
 
@@ -55,7 +75,7 @@ export function ConnectWalletScreen({
           ) : null}
 
           <TouchableOpacity
-            style={[styles.connectButton, { backgroundColor: t.accent }]}
+            style={[styles.connectButton, { backgroundColor: accent }]}
             onPress={onConnect}
             disabled={connecting}
             activeOpacity={0.8}
@@ -100,6 +120,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: 8,
   },
+  logoImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 16,
+    marginBottom: 8,
+  },
   logoText: {
     fontSize: 36,
     fontWeight: '800',

package/src/ui/index.ts

@@ -6,7 +6,7 @@ export { UserProfileCard } from './UserProfileCard';
 export type { UserProfileCardProps } from './UserProfileCard';
 export { SettingsSheet } from './SettingsSheet';
 export type { SettingsSheetProps } from './SettingsSheet';
-export { useDubsTheme } from './theme';
+export { useDubsTheme, mergeTheme } from './theme';
 export type { DubsTheme } from './theme';
 
 // Game widgets

package/src/ui/theme.ts

@@ -55,3 +55,8 @@ export function useDubsTheme(): DubsTheme {
   const scheme = useColorScheme();
   return scheme === 'light' ? light : dark;
 }
+
+/** Merge overrides into a base theme (e.g. custom accent color from developer config) */
+export function mergeTheme(base: DubsTheme, overrides: Partial<DubsTheme>): DubsTheme {
+  return { ...base, ...overrides };
+}