@dubsdotapp/expo 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -417,6 +417,12 @@ var DubsClient = class {
   getErrorCodesLocal() {
     return { ...SOLANA_PROGRAM_ERRORS };
   }
+  // ── App Config ──
+  /** Fetch the app's UI customization config (accent color, icon, tagline) */
+  async getAppConfig() {
+    const res = await this.request("GET", "/apps/config");
+    return res.uiConfig || {};
+  }
 };
 
 // src/storage.ts
@@ -455,7 +461,7 @@ function createSecureStoreStorage() {
 }
 
 // src/provider.tsx
-import { createContext as createContext3, useContext as useContext3, useMemo, useCallback as useCallback11 } from "react";
+import { createContext as createContext3, useContext as useContext3, useMemo, useCallback as useCallback11, useState as useState11, useEffect as useEffect7 } from "react";
 import { Connection } from "@solana/web3.js";
 
 // src/managed-wallet.tsx
@@ -565,7 +571,8 @@ import {
   Text,
   TouchableOpacity,
   ActivityIndicator,
-  StyleSheet
+  StyleSheet,
+  Image
 } from "react-native";
 
 // src/ui/theme.ts
@@ -606,6 +613,9 @@ function useDubsTheme() {
   const scheme = useColorScheme();
   return scheme === "light" ? light : dark;
 }
+function mergeTheme(base, overrides) {
+  return { ...base, ...overrides };
+}
 
 // src/ui/ConnectWalletScreen.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -613,14 +623,24 @@ function ConnectWalletScreen({
   onConnect,
   connecting = false,
   error = null,
-  appName = "Dubs"
+  appName = "Dubs",
+  accentColor,
+  appIcon,
+  tagline
 }) {
   const t = useDubsTheme();
+  const accent = accentColor || t.accent;
   return /* @__PURE__ */ jsx(View, { style: [styles.container, { backgroundColor: t.background }], children: /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.brandingSection, children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.logoCircle, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx(Text, { style: styles.logoText, children: "D" }) }),
+      appIcon ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          source: { uri: appIcon },
+          style: styles.logoImage
+        }
+      ) : /* @__PURE__ */ jsx(View, { style: [styles.logoCircle, { backgroundColor: accent }], children: /* @__PURE__ */ jsx(Text, { style: styles.logoText, children: appName.charAt(0).toUpperCase() }) }),
       /* @__PURE__ */ jsx(Text, { style: [styles.appName, { color: t.text }], children: appName }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, { color: t.textMuted }], children: "Connect your Solana wallet to get started" })
+      /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, { color: t.textMuted }], children: tagline || "Connect your Solana wallet to get started" })
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.actionSection, children: [
       error ? /* @__PURE__ */ jsx(
@@ -636,7 +656,7 @@ function ConnectWalletScreen({
       /* @__PURE__ */ jsx(
         TouchableOpacity,
         {
-          style: [styles.connectButton, { backgroundColor: t.accent }],
+          style: [styles.connectButton, { backgroundColor: accent }],
           onPress: onConnect,
           disabled: connecting,
           activeOpacity: 0.8,
@@ -671,6 +691,12 @@ var styles = StyleSheet.create({
     alignItems: "center",
     marginBottom: 8
   },
+  logoImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 16,
+    marginBottom: 8
+  },
   logoText: {
     fontSize: 36,
     fontWeight: "800",
@@ -726,6 +752,9 @@ function ManagedWalletProvider({
   cluster,
   storage,
   renderConnectScreen,
+  accentColor,
+  appIcon,
+  tagline,
   children
 }) {
   const [connected, setConnected] = useState(false);
@@ -813,7 +842,10 @@ function ManagedWalletProvider({
       onConnect: handleConnect,
       connecting,
       error,
-      appName
+      appName,
+      accentColor,
+      appIcon,
+      tagline
     };
     if (renderConnectScreen) {
       return /* @__PURE__ */ jsx2(Fragment, { children: renderConnectScreen(connectProps) });
@@ -835,7 +867,7 @@ import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
-  Image,
+  Image as Image2,
   Animated,
   ScrollView
 } from "react-native";
@@ -1280,7 +1312,8 @@ function AuthGate({
   renderLoading,
   renderError,
   renderRegistration,
-  appName = "Dubs"
+  appName = "Dubs",
+  accentColor
 }) {
   const { client } = useDubs();
   const auth = useAuth();
@@ -1349,7 +1382,8 @@ function AuthGate({
         registering: isRegistering,
         error: regError,
         client,
-        appName
+        appName,
+        accentColor
       }
     );
   }
@@ -1418,9 +1452,11 @@ function DefaultRegistrationScreen({
   registering,
   error,
   client,
-  appName
+  appName,
+  accentColor
 }) {
   const t = useDubsTheme();
+  const accent = accentColor || t.accent;
   const [step, setStep] = useState10(0);
   const [avatarSeed, setAvatarSeed] = useState10(generateSeed);
   const [avatarStyle, setAvatarStyle] = useState10("adventurer");
@@ -1481,8 +1517,8 @@ function DefaultRegistrationScreen({
       /* @__PURE__ */ jsx3(Text2, { style: [s.title, { color: t.text }], children: "Choose Your Avatar" }),
       /* @__PURE__ */ jsx3(Text2, { style: [s.subtitle, { color: t.textMuted }], children: "Pick a look that represents you" }),
       /* @__PURE__ */ jsx3(StepIndicator, { currentStep: 0 }),
-      /* @__PURE__ */ jsx3(View2, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs2(View2, { style: [s.avatarFrame, { borderColor: t.accent }], children: [
-        /* @__PURE__ */ jsx3(Image, { source: { uri: avatarUrl }, style: s.avatarLarge }),
+      /* @__PURE__ */ jsx3(View2, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs2(View2, { style: [s.avatarFrame, { borderColor: accent }], children: [
+        /* @__PURE__ */ jsx3(Image2, { source: { uri: avatarUrl }, style: s.avatarLarge }),
         /* @__PURE__ */ jsx3(View2, { style: [s.checkBadge, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx3(Text2, { style: s.checkBadgeText, children: "\u2713" }) })
       ] }) }),
       /* @__PURE__ */ jsxs2(View2, { style: s.avatarActions, children: [
@@ -1498,10 +1534,10 @@ function DefaultRegistrationScreen({
         /* @__PURE__ */ jsx3(
           TouchableOpacity2,
           {
-            style: [s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + "15" }],
+            style: [s.outlineBtn, { borderColor: accent, backgroundColor: accent + "15" }],
             onPress: () => setShowStyles(!showStyles),
             activeOpacity: 0.7,
-            children: /* @__PURE__ */ jsx3(Text2, { style: [s.outlineBtnText, { color: t.accent }], children: "\u263A  Customize" })
+            children: /* @__PURE__ */ jsx3(Text2, { style: [s.outlineBtnText, { color: accent }], children: "\u263A  Customize" })
           }
         )
       ] }),
@@ -1509,8 +1545,8 @@ function DefaultRegistrationScreen({
         TouchableOpacity2,
         {
           onPress: () => setAvatarStyle(st),
-          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }],
-          children: /* @__PURE__ */ jsx3(Image, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
+          style: [s.styleThumbWrap, { borderColor: st === avatarStyle ? accent : t.border }],
+          children: /* @__PURE__ */ jsx3(Image2, { source: { uri: getAvatarUrl(st, avatarSeed, 80) }, style: s.styleThumb })
         },
         st
       )) })
@@ -1518,7 +1554,7 @@ function DefaultRegistrationScreen({
     /* @__PURE__ */ jsx3(View2, { style: s.bottomRow, children: /* @__PURE__ */ jsx3(
       TouchableOpacity2,
       {
-        style: [s.primaryBtn, { backgroundColor: t.accent, flex: 1 }],
+        style: [s.primaryBtn, { backgroundColor: accent, flex: 1 }],
         onPress: () => animateToStep(1),
         activeOpacity: 0.8,
         children: /* @__PURE__ */ jsx3(Text2, { style: s.primaryBtnText, children: "Continue  \u203A" })
@@ -1533,8 +1569,8 @@ function DefaultRegistrationScreen({
       ] }),
       /* @__PURE__ */ jsx3(Text2, { style: [s.subtitle, { color: t.textMuted }], children: "This is how others will see you" }),
       /* @__PURE__ */ jsx3(StepIndicator, { currentStep: 1 }),
-      /* @__PURE__ */ jsx3(View2, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs2(View2, { style: [s.avatarFrameSmall, { borderColor: t.accent }], children: [
-        /* @__PURE__ */ jsx3(Image, { source: { uri: avatarUrl }, style: s.avatarSmall }),
+      /* @__PURE__ */ jsx3(View2, { style: s.avatarCenter, children: /* @__PURE__ */ jsxs2(View2, { style: [s.avatarFrameSmall, { borderColor: accent }], children: [
+        /* @__PURE__ */ jsx3(Image2, { source: { uri: avatarUrl }, style: s.avatarSmall }),
         /* @__PURE__ */ jsx3(View2, { style: [s.checkBadgeSm, { backgroundColor: t.success }], children: /* @__PURE__ */ jsx3(Text2, { style: s.checkBadgeTextSm, children: "\u2713" }) })
       ] }) }),
       /* @__PURE__ */ jsxs2(View2, { style: s.inputGroup, children: [
@@ -1545,7 +1581,7 @@ function DefaultRegistrationScreen({
         /* @__PURE__ */ jsx3(
           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,
@@ -1571,7 +1607,7 @@ function DefaultRegistrationScreen({
       /* @__PURE__ */ jsx3(
         TouchableOpacity2,
         {
-          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,
@@ -1591,7 +1627,7 @@ function DefaultRegistrationScreen({
       /* @__PURE__ */ jsxs2(View2, { style: [s.profileCard, { borderColor: t.border }], children: [
         /* @__PURE__ */ jsx3(Text2, { style: [s.profileLabel, { color: t.textMuted }], children: "Your Profile" }),
         /* @__PURE__ */ jsxs2(View2, { style: s.profileRow, children: [
-          /* @__PURE__ */ jsx3(Image, { source: { uri: avatarUrl }, style: s.profileAvatar }),
+          /* @__PURE__ */ jsx3(Image2, { source: { uri: avatarUrl }, style: s.profileAvatar }),
           /* @__PURE__ */ jsxs2(View2, { style: { gap: 4 }, children: [
             /* @__PURE__ */ jsxs2(Text2, { style: [s.profileUsername, { color: t.text }], children: [
               "@",
@@ -1643,7 +1679,7 @@ function DefaultRegistrationScreen({
       /* @__PURE__ */ jsx3(
         TouchableOpacity2,
         {
-          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,
@@ -1778,6 +1814,11 @@ function DubsProvider({
   const client = useMemo(() => new DubsClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
   const connection = useMemo(() => new Connection(rpcUrl, { commitment: "confirmed" }), [rpcUrl]);
   const storage = useMemo(() => tokenStorage || createSecureStoreStorage(), [tokenStorage]);
+  const [uiConfig, setUiConfig] = useState11({});
+  useEffect7(() => {
+    client.getAppConfig().then(setUiConfig).catch(() => {
+    });
+  }, [client]);
   if (externalWallet) {
     return /* @__PURE__ */ jsx4(
       ExternalWalletProvider,
@@ -1785,13 +1826,14 @@ function DubsProvider({
         client,
         connection,
         wallet: externalWallet,
-        appName,
+        appName: uiConfig.appName || appName,
         network,
         storage,
         managed,
         renderLoading,
         renderError,
         renderRegistration,
+        accentColor: uiConfig.accentColor,
         children
       }
     );
@@ -1799,22 +1841,26 @@ function DubsProvider({
   return /* @__PURE__ */ jsx4(
     ManagedWalletProvider,
     {
-      appName,
+      appName: uiConfig.appName || appName,
       cluster,
       storage,
       renderConnectScreen,
+      accentColor: uiConfig.accentColor,
+      appIcon: uiConfig.appIcon,
+      tagline: uiConfig.tagline,
       children: (adapter) => /* @__PURE__ */ jsx4(
         ManagedInner,
         {
           client,
           connection,
           wallet: adapter,
-          appName,
+          appName: uiConfig.appName || appName,
           network,
           storage,
           renderLoading,
           renderError,
           renderRegistration,
+          accentColor: uiConfig.accentColor,
           children
         }
       )
@@ -1831,6 +1877,7 @@ function ManagedInner({
   renderLoading,
   renderError,
   renderRegistration,
+  accentColor,
   children
 }) {
   const managedDisconnect = useDisconnect();
@@ -1854,6 +1901,7 @@ function ManagedInner({
       renderError,
       renderRegistration,
       appName,
+      accentColor,
       children
     }
   ) });
@@ -1869,6 +1917,7 @@ function ExternalWalletProvider({
   renderLoading,
   renderError,
   renderRegistration,
+  accentColor,
   children
 }) {
   const disconnect = useCallback11(async () => {
@@ -1896,6 +1945,7 @@ function ExternalWalletProvider({
       renderError,
       renderRegistration,
       appName,
+      accentColor,
       children
     }
   ) });
@@ -1910,7 +1960,7 @@ function useDubs() {
 
 // src/ui/UserProfileCard.tsx
 import { useMemo as useMemo2 } from "react";
-import { View as View3, Text as Text3, Image as Image2, StyleSheet as StyleSheet3 } from "react-native";
+import { View as View3, Text as Text3, Image as Image3, StyleSheet as StyleSheet3 } from "react-native";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function truncateAddress(address, chars = 4) {
   if (address.length <= chars * 2 + 3) return address;
@@ -1934,7 +1984,7 @@ function UserProfileCard({
     [avatarUrl, walletAddress]
   );
   return /* @__PURE__ */ jsxs3(View3, { style: [styles2.card, { backgroundColor: t.surface, borderColor: t.border }], children: [
-    /* @__PURE__ */ jsx5(Image2, { source: { uri: imageUri }, style: styles2.avatar }),
+    /* @__PURE__ */ jsx5(Image3, { source: { uri: imageUri }, style: styles2.avatar }),
     /* @__PURE__ */ jsxs3(View3, { style: styles2.info, children: [
       username ? /* @__PURE__ */ jsx5(Text3, { style: [styles2.username, { color: t.text }], children: username }) : null,
       /* @__PURE__ */ jsx5(Text3, { style: [styles2.address, { color: t.textMuted }], children: truncateAddress(walletAddress) }),
@@ -2129,7 +2179,7 @@ var styles3 = StyleSheet4.create({
 });
 
 // src/ui/game/GamePoster.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { StyleSheet as StyleSheet5, View as View5, Text as Text5 } from "react-native";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function computeCountdown(lockTimestamp) {
@@ -2179,7 +2229,7 @@ function GamePoster({ game, ImageComponent }) {
   ] });
 }
 function TeamLogoInternal({ url, size, Img }) {
-  const [failed, setFailed] = useState11(false);
+  const [failed, setFailed] = useState12(false);
   if (!url || failed) {
     return /* @__PURE__ */ jsx7(View5, { style: [styles4.logoPlaceholder, { width: size, height: size, borderRadius: size / 2 }] });
   }
@@ -2359,7 +2409,7 @@ var styles5 = StyleSheet6.create({
 });
 
 // src/ui/game/PickWinnerCard.tsx
-import { useState as useState12, useMemo as useMemo4 } from "react";
+import { useState as useState13, useMemo as useMemo4 } from "react";
 import { StyleSheet as StyleSheet7, View as View7, Text as Text7, TouchableOpacity as TouchableOpacity4 } from "react-native";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function PickWinnerCard({
@@ -2430,7 +2480,7 @@ function TeamOption({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = useState12(false);
+  const [imgFailed, setImgFailed] = useState13(false);
   const Img = ImageComponent || __require("react-native").Image;
   const showImage = imageUrl && !imgFailed;
   return /* @__PURE__ */ jsxs7(
@@ -2471,7 +2521,7 @@ var styles6 = StyleSheet7.create({
 });
 
 // src/ui/game/PlayersCard.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { StyleSheet as StyleSheet8, View as View8, Text as Text8 } from "react-native";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function truncateWallet(addr, chars) {
@@ -2520,7 +2570,7 @@ function BettorRow({
   ImageComponent,
   t
 }) {
-  const [imgFailed, setImgFailed] = useState13(false);
+  const [imgFailed, setImgFailed] = useState14(false);
   const Img = ImageComponent || __require("react-native").Image;
   const showAvatar = bettor.avatar && !imgFailed;
   return /* @__PURE__ */ jsxs8(View8, { style: [styles7.row, !isFirst && { borderTopColor: t.border, borderTopWidth: 1 }], children: [
@@ -2617,6 +2667,7 @@ export {
   SettingsSheet,
   UserProfileCard,
   createSecureStoreStorage,
+  mergeTheme,
   parseSolanaError,
   signAndSendBase64Transaction,
   useAuth,