@jazadev/react-native 0.1.0 → 0.1.1

package/dist/index.js

@@ -5,9 +5,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/provider/JazaProvider.tsx
 import {
   useCallback as useCallback2,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo4,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState4
 } from "react";
 import { Appearance } from "react-native";
@@ -264,7 +264,9 @@ var darkTheme = {
     overlay: "rgba(12,15,15,0.8)",
     bundleBorder: "#262626",
     bundleBorderSelected: "#2dd4bf",
-    bundleBg: "#111111"
+    bundleBg: "#111111",
+    skeleton: "#2a2c2c",
+    skeletonHighlight: "#3a3d3d"
   }
 };
 var lightTheme = {
@@ -290,8 +292,8 @@ function useJaza() {
 }
 
 // src/sheet/TopUpBottomSheet.tsx
-import { useCallback, useMemo as useMemo3, useRef as useRef4 } from "react";
-import { Modal as Modal3, StyleSheet as StyleSheet9, View as View8 } from "react-native";
+import { useCallback, useMemo as useMemo3, useRef as useRef5 } from "react";
+import { Modal as Modal3, StyleSheet as StyleSheet12, View as View11 } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import BottomSheet, {
   BottomSheetBackdrop,
@@ -301,22 +303,171 @@ import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-
 
 // src/sheet/steps/OfferStep.tsx
 import {
-  ActivityIndicator,
   Pressable,
-  StyleSheet,
+  StyleSheet as StyleSheet4,
   Text,
+  View as View4
+} from "react-native";
+
+// src/components/BalanceCardSkeleton.tsx
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+
+// src/components/Skeleton.tsx
+import { useEffect, useRef } from "react";
+import {
+  Animated,
+  Easing,
+  StyleSheet,
   View
 } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function Skeleton({
+  theme,
+  width = "100%",
+  height,
+  borderRadius = theme.radius.md,
+  style
+}) {
+  const pulse = useRef(new Animated.Value(0)).current;
+  const { colors } = theme;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(pulse, {
+        toValue: 1,
+        duration: 1200,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+  const opacity = pulse.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0.45, 0.85, 0.45]
+  });
+  const styles = StyleSheet.create({
+    block: {
+      width,
+      height,
+      borderRadius,
+      backgroundColor: colors.skeleton,
+      overflow: "hidden"
+    }
+  });
+  return /* @__PURE__ */ jsx(View, { style: [styles.block, style], children: /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [StyleSheet.absoluteFill, { backgroundColor: colors.skeletonHighlight, opacity }]
+    }
+  ) });
+}
+
+// src/components/BalanceCardSkeleton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function BalanceCardSkeleton({ theme, style }) {
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const styles = StyleSheet2.create({
+    card: {
+      backgroundColor: colors.surfaceContainer,
+      borderRadius: radius2.xl,
+      padding: spacing2.md
+    },
+    label: {
+      marginBottom: spacing2.xs
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm
+    },
+    icon: {
+      width: 28,
+      height: 28,
+      borderRadius: 14
+    },
+    value: {
+      flex: 1,
+      maxWidth: 180
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    View2,
+    {
+      style: [styles.card, style],
+      accessibilityRole: "progressbar",
+      accessibilityLabel: "Loading balance",
+      children: [
+        /* @__PURE__ */ jsx2(
+          Skeleton,
+          {
+            theme,
+            width: "42%",
+            height: 14,
+            borderRadius: 6,
+            style: styles.label
+          }
+        ),
+        /* @__PURE__ */ jsxs(View2, { style: styles.row, children: [
+          /* @__PURE__ */ jsx2(Skeleton, { theme, style: styles.icon, height: 28, borderRadius: 14 }),
+          /* @__PURE__ */ jsx2(Skeleton, { theme, height: 48, borderRadius: 10, style: styles.value })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/BundleListSkeleton.tsx
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function BundleRowSkeleton({ theme }) {
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const styles = StyleSheet3.create({
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: spacing2.md,
+      borderRadius: radius2.xl,
+      backgroundColor: colors.bundleBg,
+      borderWidth: 1,
+      borderColor: colors.bundleBorder,
+      marginBottom: spacing2.sm
+    },
+    left: {
+      flex: 1,
+      marginRight: spacing2.md,
+      gap: spacing2.xs + 2
+    },
+    right: {
+      alignItems: "flex-end",
+      gap: spacing2.xs + 2
+    }
+  });
+  return /* @__PURE__ */ jsxs2(View3, { style: styles.row, children: [
+    /* @__PURE__ */ jsxs2(View3, { style: styles.left, children: [
+      /* @__PURE__ */ jsx3(Skeleton, { theme, width: "72%", height: 18, borderRadius: 6 }),
+      /* @__PURE__ */ jsx3(Skeleton, { theme, width: "48%", height: 14, borderRadius: 6 })
+    ] }),
+    /* @__PURE__ */ jsxs2(View3, { style: styles.right, children: [
+      /* @__PURE__ */ jsx3(Skeleton, { theme, width: 56, height: 18, borderRadius: 6 }),
+      /* @__PURE__ */ jsx3(Skeleton, { theme, width: 72, height: 12, borderRadius: 4 })
+    ] })
+  ] });
+}
+function BundleListSkeleton({ theme, count = 3 }) {
+  return /* @__PURE__ */ jsx3(View3, { accessibilityRole: "progressbar", accessibilityLabel: "Loading bundles", children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx3(BundleRowSkeleton, { theme }, index)) });
+}
 
 // src/components/Icon.tsx
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Icon({ name, size = 24, color }) {
-  return /* @__PURE__ */ jsx(MaterialIcons, { name, size, color });
+  return /* @__PURE__ */ jsx4(MaterialIcons, { name, size, color });
 }
 
 // src/sheet/steps/OfferStep.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function OfferStep() {
   const {
     theme,
@@ -330,7 +481,7 @@ function OfferStep() {
     goToPayment
   } = useJaza();
   const { colors, spacing: spacing2, radius: radius2 } = theme;
-  const styles = StyleSheet.create({
+  const styles = StyleSheet4.create({
     balanceCard: {
       backgroundColor: colors.surfaceContainer,
       borderRadius: radius2.xl,
@@ -411,7 +562,6 @@ function OfferStep() {
       fontSize: 16,
       fontWeight: "600"
     },
-    loading: { padding: spacing2.xl, alignItems: "center" },
     error: {
       color: colors.error,
       fontSize: 14,
@@ -421,28 +571,28 @@ function OfferStep() {
   });
   const renderBundle = (bundle) => {
     const selected = selectedBundle?.id === bundle.id;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs3(
       Pressable,
       {
         style: [styles.bundle, selected && styles.bundleSelected],
         onPress: () => setSelectedBundle(bundle),
         children: [
-          /* @__PURE__ */ jsxs(View, { children: [
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs3(View4, { children: [
+            /* @__PURE__ */ jsx5(
               Text,
               {
                 style: [styles.bundleLabel, selected && styles.bundleLabelSelected],
                 children: bundle.label ?? "Bundle"
               }
             ),
-            /* @__PURE__ */ jsxs(Text, { style: styles.bundleSub, children: [
+            /* @__PURE__ */ jsxs3(Text, { style: styles.bundleSub, children: [
               formatCredits(bundle.credits),
               " credits"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(View, { style: { alignItems: "flex-end" }, children: [
-            /* @__PURE__ */ jsx2(Text, { style: styles.bundleCredits, children: formatCredits(bundle.credits) }),
-            /* @__PURE__ */ jsxs(Text, { style: styles.bundlePrice, children: [
+          /* @__PURE__ */ jsxs3(View4, { style: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ jsx5(Text, { style: styles.bundleCredits, children: formatCredits(bundle.credits) }),
+            /* @__PURE__ */ jsxs3(Text, { style: styles.bundlePrice, children: [
               formatUsd(bundle.priceUsd),
               " USD"
             ] })
@@ -452,30 +602,36 @@ function OfferStep() {
       bundle.id
     );
   };
-  return /* @__PURE__ */ jsxs(View, { children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.balanceCard, children: [
-      /* @__PURE__ */ jsx2(Text, { style: styles.balanceLabel, children: "Current Balance" }),
-      /* @__PURE__ */ jsxs(View, { style: styles.balanceRow, children: [
-        /* @__PURE__ */ jsx2(Icon, { name: "bolt", size: 28, color: colors.primary }),
-        balanceLoading && balance === null ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: colors.primary }) : /* @__PURE__ */ jsx2(Text, { style: styles.balanceValue, children: balance !== null ? formatCredits(balance) : "\u2014" })
+  return /* @__PURE__ */ jsxs3(View4, { children: [
+    balanceLoading && balance === null ? /* @__PURE__ */ jsx5(
+      BalanceCardSkeleton,
+      {
+        theme,
+        style: { marginBottom: spacing2.lg }
+      }
+    ) : /* @__PURE__ */ jsxs3(View4, { style: styles.balanceCard, children: [
+      /* @__PURE__ */ jsx5(Text, { style: styles.balanceLabel, children: "Current Balance" }),
+      /* @__PURE__ */ jsxs3(View4, { style: styles.balanceRow, children: [
+        /* @__PURE__ */ jsx5(Icon, { name: "bolt", size: 28, color: colors.primary }),
+        /* @__PURE__ */ jsx5(Text, { style: styles.balanceValue, children: balance !== null ? formatCredits(balance) : "\u2014" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx2(Text, { style: styles.title, children: "Top-up Credits" }),
-    bundlesError ? /* @__PURE__ */ jsx2(Text, { style: styles.error, children: bundlesError }) : null,
-    bundlesLoading ? /* @__PURE__ */ jsx2(View, { style: styles.loading, children: /* @__PURE__ */ jsx2(ActivityIndicator, { color: colors.primary }) }) : bundles.map(renderBundle),
-    !bundlesLoading && !bundlesError && bundles.length === 0 ? /* @__PURE__ */ jsx2(Text, { style: styles.error, children: "No active bundles for this app." }) : null,
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx5(Text, { style: styles.title, children: "Top-up Credits" }),
+    bundlesError ? /* @__PURE__ */ jsx5(Text, { style: styles.error, children: bundlesError }) : null,
+    bundlesLoading ? /* @__PURE__ */ jsx5(BundleListSkeleton, { theme }) : bundles.map(renderBundle),
+    !bundlesLoading && !bundlesError && bundles.length === 0 ? /* @__PURE__ */ jsx5(Text, { style: styles.error, children: "No active bundles for this app." }) : null,
+    /* @__PURE__ */ jsxs3(
       Pressable,
       {
         style: styles.cta,
         onPress: goToPayment,
         disabled: !selectedBundle,
         children: [
-          /* @__PURE__ */ jsxs(Text, { style: styles.ctaText, children: [
+          /* @__PURE__ */ jsxs3(Text, { style: styles.ctaText, children: [
             "Continue with ",
             selectedBundle?.label ?? "bundle"
           ] }),
-          /* @__PURE__ */ jsx2(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
+          /* @__PURE__ */ jsx5(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
         ]
       }
     )
@@ -485,18 +641,18 @@ function OfferStep() {
 // src/sheet/steps/PaymentStep.tsx
 import { useMemo as useMemo2, useState as useState3 } from "react";
 import {
-  ActivityIndicator as ActivityIndicator2,
+  ActivityIndicator,
   Pressable as Pressable5,
-  StyleSheet as StyleSheet6,
+  StyleSheet as StyleSheet9,
   Text as Text5,
-  View as View5
+  View as View8
 } from "react-native";
 
 // src/components/PhoneDigitInput.tsx
-import { useRef, useState } from "react";
-import { Pressable as Pressable2, StyleSheet as StyleSheet2, Text as Text2, View as View2 } from "react-native";
+import { useRef as useRef2, useState } from "react";
+import { Pressable as Pressable2, StyleSheet as StyleSheet5, Text as Text2, View as View5 } from "react-native";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var MAX_DIGITS = 10;
 function PhoneDigitInput({
   theme,
@@ -506,11 +662,11 @@ function PhoneDigitInput({
   trailing
 }) {
   const { colors, spacing: spacing2 } = theme;
-  const inputRef = useRef(null);
+  const inputRef = useRef2(null);
   const [focused, setFocused] = useState(false);
   const digits = value.replace(/\D/g, "").slice(0, MAX_DIGITS);
   const activeIndex = digits.length >= MAX_DIGITS ? MAX_DIGITS - 1 : digits.length;
-  const styles = StyleSheet2.create({
+  const styles = StyleSheet5.create({
     label: {
       color: colors.onSurfaceVariant,
       fontSize: 12,
@@ -555,14 +711,14 @@ function PhoneDigitInput({
   const focusInput = () => {
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ jsxs2(View2, { children: [
-    /* @__PURE__ */ jsx3(Text2, { style: styles.label, children: "Phone Number" }),
-    /* @__PURE__ */ jsxs2(Pressable2, { style: styles.row, onPress: focusInput, children: [
+  return /* @__PURE__ */ jsxs4(View5, { children: [
+    /* @__PURE__ */ jsx6(Text2, { style: styles.label, children: "Phone Number" }),
+    /* @__PURE__ */ jsxs4(Pressable2, { style: styles.row, onPress: focusInput, children: [
       dialPressable,
-      /* @__PURE__ */ jsx3(View2, { style: styles.slots, pointerEvents: "none", children: Array.from({ length: MAX_DIGITS }, (_, i) => {
+      /* @__PURE__ */ jsx6(View5, { style: styles.slots, pointerEvents: "none", children: Array.from({ length: MAX_DIGITS }, (_, i) => {
         const char = digits[i];
         const isFocused = focused && i === activeIndex;
-        return /* @__PURE__ */ jsx3(View2, { style: styles.slot, children: /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx6(View5, { style: styles.slot, children: /* @__PURE__ */ jsx6(
           Text2,
           {
             style: [
@@ -574,7 +730,7 @@ function PhoneDigitInput({
         ) }, i);
       }) }),
       trailing,
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx6(
         BottomSheetTextInput,
         {
           ref: inputRef,
@@ -595,31 +751,31 @@ function PhoneDigitInput({
 }
 
 // src/sheet/CountryPickerSheet.tsx
-import { useEffect, useMemo, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 import {
   FlatList,
   KeyboardAvoidingView,
   Modal,
   Platform,
   Pressable as Pressable3,
-  StyleSheet as StyleSheet4,
+  StyleSheet as StyleSheet7,
   Text as Text3,
   TextInput,
-  View as View3
+  View as View6
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/theme/listStyles.ts
-import { StyleSheet as StyleSheet3 } from "react-native";
+import { StyleSheet as StyleSheet6 } from "react-native";
 function createSelectableRowStyles(theme) {
   const { colors, spacing: spacing2 } = theme;
-  return StyleSheet3.create({
+  return StyleSheet6.create({
     row: {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "space-between",
       paddingVertical: spacing2.md,
-      borderBottomWidth: StyleSheet3.hairlineWidth,
+      borderBottomWidth: StyleSheet6.hairlineWidth,
       borderBottomColor: colors.outlineVariant,
       gap: spacing2.md
     },
@@ -644,7 +800,7 @@ function createSelectableRowStyles(theme) {
 }
 
 // src/sheet/CountryPickerSheet.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function CountryPickerSheet({
   visible,
   onClose
@@ -654,7 +810,7 @@ function CountryPickerSheet({
   const insets = useSafeAreaInsets();
   const [query, setQuery] = useState2("");
   const rowStyles = createSelectableRowStyles(theme);
-  useEffect(() => {
+  useEffect2(() => {
     if (!visible) setQuery("");
   }, [visible]);
   const filtered = useMemo(() => {
@@ -664,7 +820,7 @@ function CountryPickerSheet({
       (c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase().includes(q) || c.dialCode.includes(q)
     );
   }, [countries, query]);
-  const styles = StyleSheet4.create({
+  const styles = StyleSheet7.create({
     root: {
       flex: 1,
       justifyContent: "flex-end",
@@ -726,23 +882,23 @@ function CountryPickerSheet({
       paddingVertical: spacing2.lg
     }
   });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxs3(
+      children: /* @__PURE__ */ jsxs5(
         KeyboardAvoidingView,
         {
           style: styles.root,
           behavior: Platform.OS === "ios" ? "padding" : void 0,
           children: [
-            /* @__PURE__ */ jsx4(Pressable3, { style: StyleSheet4.absoluteFill, onPress: onClose }),
-            /* @__PURE__ */ jsxs3(View3, { style: styles.sheet, children: [
-              /* @__PURE__ */ jsx4(View3, { style: styles.handle }),
-              /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx7(Pressable3, { style: StyleSheet7.absoluteFill, onPress: onClose }),
+            /* @__PURE__ */ jsxs5(View6, { style: styles.sheet, children: [
+              /* @__PURE__ */ jsx7(View6, { style: styles.handle }),
+              /* @__PURE__ */ jsx7(
                 TextInput,
                 {
                   style: styles.search,
@@ -756,7 +912,7 @@ function CountryPickerSheet({
                   returnKeyType: "search"
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx7(
                 FlatList,
                 {
                   style: styles.list,
@@ -766,7 +922,7 @@ function CountryPickerSheet({
                   keyboardDismissMode: "on-drag",
                   renderItem: ({ item }) => {
                     const selected = selectedCountry?.id === item.id;
-                    return /* @__PURE__ */ jsxs3(
+                    return /* @__PURE__ */ jsxs5(
                       Pressable3,
                       {
                         style: [rowStyles.row, selected && rowStyles.rowSelected],
@@ -775,9 +931,9 @@ function CountryPickerSheet({
                           onClose();
                         },
                         children: [
-                          /* @__PURE__ */ jsxs3(View3, { style: styles.nameRow, children: [
-                            /* @__PURE__ */ jsx4(Text3, { style: styles.flag, children: item.flag }),
-                            /* @__PURE__ */ jsx4(
+                          /* @__PURE__ */ jsxs5(View6, { style: styles.nameRow, children: [
+                            /* @__PURE__ */ jsx7(Text3, { style: styles.flag, children: item.flag }),
+                            /* @__PURE__ */ jsx7(
                               Text3,
                               {
                                 style: [
@@ -790,7 +946,7 @@ function CountryPickerSheet({
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ jsxs3(Text3, { style: styles.dial, children: [
+                          /* @__PURE__ */ jsxs5(Text3, { style: styles.dial, children: [
                             "+",
                             item.dialCode
                           ] })
@@ -798,7 +954,7 @@ function CountryPickerSheet({
                       }
                     );
                   },
-                  ListEmptyComponent: /* @__PURE__ */ jsx4(Text3, { style: styles.empty, children: "No countries match" })
+                  ListEmptyComponent: /* @__PURE__ */ jsx7(Text3, { style: styles.empty, children: "No countries match" })
                 }
               )
             ] })
@@ -814,12 +970,12 @@ import {
   FlatList as FlatList2,
   Modal as Modal2,
   Pressable as Pressable4,
-  StyleSheet as StyleSheet5,
+  StyleSheet as StyleSheet8,
   Text as Text4,
-  View as View4
+  View as View7
 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function CurrencyPickerSheet({
   visible,
   currencies,
@@ -831,7 +987,7 @@ function CurrencyPickerSheet({
   const { colors, spacing: spacing2, radius: radius2 } = theme;
   const insets = useSafeAreaInsets2();
   const rowStyles = createSelectableRowStyles(theme);
-  const styles = StyleSheet5.create({
+  const styles = StyleSheet8.create({
     backdrop: {
       flex: 1,
       backgroundColor: colors.overlay,
@@ -861,17 +1017,17 @@ function CurrencyPickerSheet({
       marginBottom: spacing2.md
     }
   });
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     Modal2,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsx5(Pressable4, { style: styles.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs4(Pressable4, { style: styles.sheet, onPress: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsx5(View4, { style: styles.handle }),
-        /* @__PURE__ */ jsx5(Text4, { style: styles.title, children: "Select currency" }),
-        /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx8(Pressable4, { style: styles.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs6(Pressable4, { style: styles.sheet, onPress: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx8(View7, { style: styles.handle }),
+        /* @__PURE__ */ jsx8(Text4, { style: styles.title, children: "Select currency" }),
+        /* @__PURE__ */ jsx8(
           FlatList2,
           {
             data: currencies,
@@ -879,12 +1035,12 @@ function CurrencyPickerSheet({
             keyboardShouldPersistTaps: "handled",
             renderItem: ({ item }) => {
               const selected = selectedCode === item.code;
-              return /* @__PURE__ */ jsx5(
+              return /* @__PURE__ */ jsx8(
                 Pressable4,
                 {
                   style: [rowStyles.row, selected && rowStyles.rowSelected],
                   onPress: () => onSelect(item.code),
-                  children: /* @__PURE__ */ jsx5(
+                  children: /* @__PURE__ */ jsx8(
                     Text4,
                     {
                       style: [rowStyles.label, selected && rowStyles.labelSelected],
@@ -902,7 +1058,7 @@ function CurrencyPickerSheet({
 }
 
 // src/sheet/steps/PaymentStep.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function PaymentStep() {
   const {
     theme,
@@ -934,7 +1090,7 @@ function PaymentStep() {
   const showCurrencyPicker = currencyOptions.length > 1;
   const formattedQuote = quote ? formatCurrencyAmount(quote.totalLocal, quote.currencyCode) : null;
   const buyLabel = quote ? `Buy ${formattedQuote}` : quoteLoading ? "Loading\u2026" : selectedBundle ? `Buy ${formatUsd(selectedBundle.priceUsd)}` : "Buy";
-  const styles = StyleSheet6.create({
+  const styles = StyleSheet9.create({
     header: {
       flexDirection: "row",
       alignItems: "center",
@@ -1047,78 +1203,78 @@ function PaymentStep() {
     }
   });
   const canSubmit = !!predict && !!quote && !quoteLoading && !predictLoading && phoneNational.replace(/\D/g, "").length >= 6;
-  return /* @__PURE__ */ jsxs5(View5, { children: [
-    /* @__PURE__ */ jsxs5(View5, { style: styles.header, children: [
-      /* @__PURE__ */ jsxs5(View5, { style: styles.headerLeft, children: [
-        /* @__PURE__ */ jsx6(Pressable5, { style: styles.backBtn, onPress: goToOffer, children: /* @__PURE__ */ jsx6(Icon, { name: "arrow-back", size: 22, color: colors.onSurfaceVariant }) }),
-        /* @__PURE__ */ jsx6(Text5, { style: styles.headerTitle, numberOfLines: 1, children: selectedBundle?.label ?? "Top-up Balance" })
+  return /* @__PURE__ */ jsxs7(View8, { children: [
+    /* @__PURE__ */ jsxs7(View8, { style: styles.header, children: [
+      /* @__PURE__ */ jsxs7(View8, { style: styles.headerLeft, children: [
+        /* @__PURE__ */ jsx9(Pressable5, { style: styles.backBtn, onPress: goToOffer, children: /* @__PURE__ */ jsx9(Icon, { name: "arrow-back", size: 22, color: colors.onSurfaceVariant }) }),
+        /* @__PURE__ */ jsx9(Text5, { style: styles.headerTitle, numberOfLines: 1, children: selectedBundle?.label ?? "Top-up Balance" })
       ] }),
-      balance !== null ? /* @__PURE__ */ jsxs5(View5, { style: styles.balanceChip, children: [
-        /* @__PURE__ */ jsx6(Icon, { name: "bolt", size: 16, color: colors.primary }),
-        /* @__PURE__ */ jsx6(Text5, { style: styles.balanceChipText, children: balance.toLocaleString() })
+      balance !== null ? /* @__PURE__ */ jsxs7(View8, { style: styles.balanceChip, children: [
+        /* @__PURE__ */ jsx9(Icon, { name: "bolt", size: 16, color: colors.primary }),
+        /* @__PURE__ */ jsx9(Text5, { style: styles.balanceChipText, children: balance.toLocaleString() })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx9(
       PhoneDigitInput,
       {
         theme,
         value: phoneNational,
         onChangeText: setPhoneNational,
-        dialPressable: /* @__PURE__ */ jsxs5(
+        dialPressable: /* @__PURE__ */ jsxs7(
           Pressable5,
           {
             style: styles.dialBtn,
             onPress: () => setCountryPickerOpen(true),
             children: [
-              /* @__PURE__ */ jsxs5(Text5, { style: styles.dialText, children: [
+              /* @__PURE__ */ jsxs7(Text5, { style: styles.dialText, children: [
                 "+",
                 selectedCountry?.dialCode ?? "\u2026"
               ] }),
-              /* @__PURE__ */ jsx6(Icon, { name: "expand-more", size: 24, color: colors.primaryContainer })
+              /* @__PURE__ */ jsx9(Icon, { name: "expand-more", size: 24, color: colors.primaryContainer })
             ]
           }
         ),
-        trailing: predict && !predictLoading ? /* @__PURE__ */ jsx6(Icon, { name: "check-circle", size: 24, color: colors.primary }) : predictLoading ? /* @__PURE__ */ jsx6(ActivityIndicator2, { color: colors.primary, size: "small" }) : null
+        trailing: predict && !predictLoading ? /* @__PURE__ */ jsx9(Icon, { name: "check-circle", size: 24, color: colors.primary }) : predictLoading ? /* @__PURE__ */ jsx9(ActivityIndicator, { color: colors.primary, size: "small" }) : null
       }
     ),
-    predict ? /* @__PURE__ */ jsx6(Text5, { style: styles.providerText, children: predict.provider.displayName }) : predictError ? /* @__PURE__ */ jsx6(Text5, { style: styles.providerError, children: predictError }) : null,
-    /* @__PURE__ */ jsxs5(View5, { style: styles.payCard, children: [
-      /* @__PURE__ */ jsxs5(View5, { style: styles.payRow, children: [
-        showCurrencyPicker ? /* @__PURE__ */ jsxs5(
+    predict ? /* @__PURE__ */ jsx9(Text5, { style: styles.providerText, children: predict.provider.displayName }) : predictError ? /* @__PURE__ */ jsx9(Text5, { style: styles.providerError, children: predictError }) : null,
+    /* @__PURE__ */ jsxs7(View8, { style: styles.payCard, children: [
+      /* @__PURE__ */ jsxs7(View8, { style: styles.payRow, children: [
+        showCurrencyPicker ? /* @__PURE__ */ jsxs7(
           Pressable5,
           {
             style: styles.currencyBtn,
             onPress: () => setCurrencyPickerOpen(true),
             children: [
-              /* @__PURE__ */ jsx6(Text5, { style: styles.currencyCode, children: selectedCurrencyCode ?? "\u2014" }),
-              /* @__PURE__ */ jsx6(Icon, { name: "expand-more", size: 20, color: colors.primaryContainer })
+              /* @__PURE__ */ jsx9(Text5, { style: styles.currencyCode, children: selectedCurrencyCode ?? "\u2014" }),
+              /* @__PURE__ */ jsx9(Icon, { name: "expand-more", size: 20, color: colors.primaryContainer })
             ]
           }
-        ) : /* @__PURE__ */ jsx6(Text5, { style: styles.currencyCode, children: selectedCurrencyCode ?? quote?.currencyCode ?? "USD" }),
-        /* @__PURE__ */ jsx6(Text5, { style: styles.amountText, children: formattedQuote ?? (selectedBundle ? formatUsd(selectedBundle.priceUsd) : "\u2014") })
+        ) : /* @__PURE__ */ jsx9(Text5, { style: styles.currencyCode, children: selectedCurrencyCode ?? quote?.currencyCode ?? "USD" }),
+        /* @__PURE__ */ jsx9(Text5, { style: styles.amountText, children: formattedQuote ?? (selectedBundle ? formatUsd(selectedBundle.priceUsd) : "\u2014") })
       ] }),
-      quoteError ? /* @__PURE__ */ jsx6(Text5, { style: styles.quoteError, children: quoteError }) : null,
-      /* @__PURE__ */ jsxs5(
+      quoteError ? /* @__PURE__ */ jsx9(Text5, { style: styles.quoteError, children: quoteError }) : null,
+      /* @__PURE__ */ jsxs7(
         Pressable5,
         {
           style: [styles.cta, !canSubmit && styles.ctaDisabled],
           onPress: () => void submitDeposit(),
           disabled: !canSubmit,
           children: [
-            /* @__PURE__ */ jsx6(Icon, { name: "lock", size: 18, color: colors.onPrimaryContainer }),
-            /* @__PURE__ */ jsx6(Text5, { style: styles.ctaText, children: buyLabel })
+            /* @__PURE__ */ jsx9(Icon, { name: "lock", size: 18, color: colors.onPrimaryContainer }),
+            /* @__PURE__ */ jsx9(Text5, { style: styles.ctaText, children: buyLabel })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx9(
       CountryPickerSheet,
       {
         visible: countryPickerOpen,
         onClose: () => setCountryPickerOpen(false)
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx9(
       CurrencyPickerSheet,
       {
         visible: currencyPickerOpen,
@@ -1135,31 +1291,31 @@ function PaymentStep() {
 }
 
 // src/sheet/steps/ResultStep.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import {
-  Animated as Animated2,
+  Animated as Animated3,
   Pressable as Pressable6,
-  StyleSheet as StyleSheet8,
+  StyleSheet as StyleSheet11,
   Text as Text6,
-  View as View7
+  View as View10
 } from "react-native";
 
 // src/components/ProcessingSpinner.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Animated, Easing, StyleSheet as StyleSheet7, View as View6 } from "react-native";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Animated as Animated2, Easing as Easing2, StyleSheet as StyleSheet10, View as View9 } from "react-native";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function ProcessingSpinner({
   theme,
   size = 64
 }) {
   const { colors } = theme;
-  const spin = useRef2(new Animated.Value(0)).current;
-  useEffect2(() => {
-    const loop = Animated.loop(
-      Animated.timing(spin, {
+  const spin = useRef3(new Animated2.Value(0)).current;
+  useEffect3(() => {
+    const loop = Animated2.loop(
+      Animated2.timing(spin, {
         toValue: 1,
         duration: 900,
-        easing: Easing.linear,
+        easing: Easing2.linear,
         useNativeDriver: true
       })
     );
@@ -1172,7 +1328,7 @@ function ProcessingSpinner({
   });
   const ring = size;
   const stroke = 4;
-  const styles = StyleSheet7.create({
+  const styles = StyleSheet10.create({
     wrap: {
       width: ring,
       height: ring,
@@ -1194,14 +1350,14 @@ function ProcessingSpinner({
       justifyContent: "center"
     }
   });
-  return /* @__PURE__ */ jsxs6(View6, { style: styles.wrap, children: [
-    /* @__PURE__ */ jsx7(Animated.View, { style: [styles.ring, { transform: [{ rotate }] }] }),
-    /* @__PURE__ */ jsx7(View6, { style: styles.icon, children: /* @__PURE__ */ jsx7(Icon, { name: "lock", size: Math.round(size * 0.38), color: colors.primary }) })
+  return /* @__PURE__ */ jsxs8(View9, { style: styles.wrap, children: [
+    /* @__PURE__ */ jsx10(Animated2.View, { style: [styles.ring, { transform: [{ rotate }] }] }),
+    /* @__PURE__ */ jsx10(View9, { style: styles.icon, children: /* @__PURE__ */ jsx10(Icon, { name: "lock", size: Math.round(size * 0.38), color: colors.primary }) })
   ] });
 }
 
 // src/sheet/steps/ResultStep.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function ResultStep() {
   const {
     theme,
@@ -1214,18 +1370,18 @@ function ResultStep() {
     retryPayment
   } = useJaza();
   const { colors, spacing: spacing2, radius: radius2 } = theme;
-  const scale = useRef3(new Animated2.Value(0)).current;
-  useEffect3(() => {
+  const scale = useRef4(new Animated3.Value(0)).current;
+  useEffect4(() => {
     if (resultPhase === "success") {
       scale.setValue(0);
-      Animated2.spring(scale, {
+      Animated3.spring(scale, {
         toValue: 1,
         useNativeDriver: true,
         friction: 6
       }).start();
     }
   }, [resultPhase, scale]);
-  const styles = StyleSheet8.create({
+  const styles = StyleSheet11.create({
     container: {
       alignItems: "center",
       paddingVertical: spacing2.xl
@@ -1293,43 +1449,43 @@ function ResultStep() {
     }
   });
   if (resultPhase === "loading") {
-    return /* @__PURE__ */ jsxs7(View7, { style: styles.container, children: [
-      /* @__PURE__ */ jsx8(View7, { style: styles.spinnerWrap, children: /* @__PURE__ */ jsx8(ProcessingSpinner, { theme, size: 64 }) }),
-      /* @__PURE__ */ jsx8(Text6, { style: [styles.title, styles.titlePulse], children: "Processing payment..." }),
-      /* @__PURE__ */ jsx8(Text6, { style: styles.subtitle, children: "Please authorize on your device" })
+    return /* @__PURE__ */ jsxs9(View10, { style: styles.container, children: [
+      /* @__PURE__ */ jsx11(View10, { style: styles.spinnerWrap, children: /* @__PURE__ */ jsx11(ProcessingSpinner, { theme, size: 64 }) }),
+      /* @__PURE__ */ jsx11(Text6, { style: [styles.title, styles.titlePulse], children: "Processing payment..." }),
+      /* @__PURE__ */ jsx11(Text6, { style: styles.subtitle, children: "Please authorize on your device" })
     ] });
   }
   if (resultPhase === "failure") {
-    return /* @__PURE__ */ jsxs7(View7, { style: styles.container, children: [
-      /* @__PURE__ */ jsx8(View7, { style: styles.failIcon, children: /* @__PURE__ */ jsx8(Icon, { name: "error-outline", size: 48, color: colors.error }) }),
-      /* @__PURE__ */ jsx8(Text6, { style: styles.title, children: "Payment failed" }),
-      /* @__PURE__ */ jsx8(Text6, { style: styles.subtitle, children: failureReason ?? depositError ?? "Something went wrong" }),
-      /* @__PURE__ */ jsx8(Pressable6, { style: styles.retryBtn, onPress: retryPayment, children: /* @__PURE__ */ jsx8(Text6, { style: styles.retryText, children: "Try again" }) }),
-      /* @__PURE__ */ jsx8(Pressable6, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ jsx8(Text6, { style: styles.doneText, children: "Dismiss" }) })
+    return /* @__PURE__ */ jsxs9(View10, { style: styles.container, children: [
+      /* @__PURE__ */ jsx11(View10, { style: styles.failIcon, children: /* @__PURE__ */ jsx11(Icon, { name: "error-outline", size: 48, color: colors.error }) }),
+      /* @__PURE__ */ jsx11(Text6, { style: styles.title, children: "Payment failed" }),
+      /* @__PURE__ */ jsx11(Text6, { style: styles.subtitle, children: failureReason ?? depositError ?? "Something went wrong" }),
+      /* @__PURE__ */ jsx11(Pressable6, { style: styles.retryBtn, onPress: retryPayment, children: /* @__PURE__ */ jsx11(Text6, { style: styles.retryText, children: "Try again" }) }),
+      /* @__PURE__ */ jsx11(Pressable6, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ jsx11(Text6, { style: styles.doneText, children: "Dismiss" }) })
     ] });
   }
   const credits = deposit?.credits ?? selectedBundle?.credits ?? 0;
-  return /* @__PURE__ */ jsxs7(View7, { style: styles.container, children: [
-    /* @__PURE__ */ jsx8(Animated2.View, { style: [styles.successIcon, { transform: [{ scale }] }], children: /* @__PURE__ */ jsx8(Icon, { name: "check-circle", size: 48, color: colors.success }) }),
-    /* @__PURE__ */ jsx8(Text6, { style: styles.title, children: "Top-up Successful" }),
-    /* @__PURE__ */ jsxs7(Text6, { style: styles.subtitle, children: [
+  return /* @__PURE__ */ jsxs9(View10, { style: styles.container, children: [
+    /* @__PURE__ */ jsx11(Animated3.View, { style: [styles.successIcon, { transform: [{ scale }] }], children: /* @__PURE__ */ jsx11(Icon, { name: "check-circle", size: 48, color: colors.success }) }),
+    /* @__PURE__ */ jsx11(Text6, { style: styles.title, children: "Top-up Successful" }),
+    /* @__PURE__ */ jsxs9(Text6, { style: styles.subtitle, children: [
       formatCredits(credits),
       " credits have been added to your balance."
     ] }),
-    /* @__PURE__ */ jsx8(Pressable6, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ jsx8(Text6, { style: styles.doneText, children: "Done" }) })
+    /* @__PURE__ */ jsx11(Pressable6, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ jsx11(Text6, { style: styles.doneText, children: "Done" }) })
   ] });
 }
 
 // src/sheet/TopUpBottomSheet.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function TopUpBottomSheet() {
   const { theme, sheetOpen, step, closeTopUp } = useJaza();
   const { colors, spacing: spacing2 } = theme;
   const insets = useSafeAreaInsets3();
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const snapPoints = useMemo3(() => ["92%"], []);
   const renderBackdrop = useCallback(
-    (props) => /* @__PURE__ */ jsx9(
+    (props) => /* @__PURE__ */ jsx12(
       BottomSheetBackdrop,
       {
         ...props,
@@ -1341,7 +1497,7 @@ function TopUpBottomSheet() {
     ),
     []
   );
-  const styles = StyleSheet9.create({
+  const styles = StyleSheet12.create({
     root: {
       flex: 1
     },
@@ -1359,7 +1515,7 @@ function TopUpBottomSheet() {
       paddingBottom: insets.bottom + spacing2.xl
     }
   });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     Modal3,
     {
       visible: sheetOpen,
@@ -1367,7 +1523,7 @@ function TopUpBottomSheet() {
       animationType: "fade",
       statusBarTranslucent: true,
       onRequestClose: closeTopUp,
-      children: /* @__PURE__ */ jsx9(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx12(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx12(
         BottomSheet,
         {
           ref,
@@ -1380,16 +1536,16 @@ function TopUpBottomSheet() {
           keyboardBlurBehavior: "restore",
           android_keyboardInputMode: "adjustResize",
           backgroundStyle: { backgroundColor: colors.surface },
-          handleComponent: () => /* @__PURE__ */ jsx9(View8, { style: styles.handle }),
-          children: /* @__PURE__ */ jsxs8(
+          handleComponent: () => /* @__PURE__ */ jsx12(View11, { style: styles.handle }),
+          children: /* @__PURE__ */ jsxs10(
             BottomSheetScrollView,
             {
               keyboardShouldPersistTaps: "handled",
               contentContainerStyle: styles.content,
               children: [
-                step === "offer" ? /* @__PURE__ */ jsx9(OfferStep, {}) : null,
-                step === "payment" ? /* @__PURE__ */ jsx9(PaymentStep, {}) : null,
-                step === "processing" ? /* @__PURE__ */ jsx9(ResultStep, {}) : null
+                step === "offer" ? /* @__PURE__ */ jsx12(OfferStep, {}) : null,
+                step === "payment" ? /* @__PURE__ */ jsx12(PaymentStep, {}) : null,
+                step === "processing" ? /* @__PURE__ */ jsx12(ResultStep, {}) : null
               ]
             }
           )
@@ -1400,7 +1556,7 @@ function TopUpBottomSheet() {
 }
 
 // src/provider/JazaProvider.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var PREDICT_DEBOUNCE_MS = 500;
 var POLL_INTERVAL_MS = 2e3;
 var POLL_TIMEOUT_MS = 12e4;
@@ -1422,7 +1578,7 @@ function JazaProvider({
       return scheme === "dark" ? "dark" : "light";
     }
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const sub = Appearance.addChangeListener(({ colorScheme }) => {
       setSystemScheme(colorScheme === "dark" ? "dark" : "light");
     });
@@ -1449,7 +1605,7 @@ function JazaProvider({
       setBalanceLoading(false);
     }
   }, [getBalance]);
-  useEffect4(() => {
+  useEffect5(() => {
     void refreshBalance();
   }, [refreshBalance]);
   const [sheetOpen, setSheetOpen] = useState4(false);
@@ -1475,9 +1631,9 @@ function JazaProvider({
   const [deposit, setDeposit] = useState4(null);
   const [depositError, setDepositError] = useState4(null);
   const [failureReason, setFailureReason] = useState4(null);
-  const predictTimer = useRef5(null);
-  const pollTimer = useRef5(null);
-  const pollStarted = useRef5(null);
+  const predictTimer = useRef6(null);
+  const pollTimer = useRef6(null);
+  const pollStarted = useRef6(null);
   const clearPoll = useCallback2(() => {
     if (pollTimer.current) {
       clearInterval(pollTimer.current);
@@ -1676,7 +1832,7 @@ function JazaProvider({
     setDepositError(null);
     setFailureReason(null);
   }, [clearPoll]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (step !== "payment" || !selectedCountry) return;
     const digits = phoneNational.replace(/\D/g, "");
     if (digits.length < 6) {
@@ -1718,7 +1874,7 @@ function JazaProvider({
     selectedCurrencyCode,
     step
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (step !== "payment" || !selectedBundle || !predict || !selectedCurrencyCode) {
       setQuote(null);
       return;
@@ -1743,7 +1899,7 @@ function JazaProvider({
       }
     })();
   }, [client, predict, selectedBundle, selectedCurrencyCode, step]);
-  useEffect4(() => () => clearPoll(), [clearPoll]);
+  useEffect5(() => () => clearPoll(), [clearPoll]);
   const value = useMemo4(
     () => ({
       theme,
@@ -1827,28 +1983,27 @@ function JazaProvider({
       onTopUpComplete
     ]
   );
-  return /* @__PURE__ */ jsxs9(JazaContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs11(JazaContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx10(TopUpBottomSheet, {})
+    /* @__PURE__ */ jsx13(TopUpBottomSheet, {})
   ] });
 }
 
 // src/widgets/JazaBalanceWidget.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import {
-  ActivityIndicator as ActivityIndicator3,
-  StyleSheet as StyleSheet10,
+  StyleSheet as StyleSheet13,
   Text as Text7,
-  View as View9
+  View as View12
 } from "react-native";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function JazaBalanceWidget({ style }) {
   const { theme, balance, balanceLoading, balanceError, refreshBalance } = useJaza();
   const { colors, spacing: spacing2, radius: radius2 } = theme;
-  useEffect5(() => {
+  useEffect6(() => {
     void refreshBalance();
   }, [refreshBalance]);
-  const styles = StyleSheet10.create({
+  const styles = StyleSheet13.create({
     card: {
       backgroundColor: colors.surfaceContainer,
       borderRadius: radius2.xl,
@@ -1877,25 +2032,28 @@ function JazaBalanceWidget({ style }) {
       marginTop: spacing2.xs
     }
   });
-  return /* @__PURE__ */ jsxs10(View9, { style: styles.card, children: [
-    /* @__PURE__ */ jsx11(Text7, { style: styles.label, children: "Current Balance" }),
-    /* @__PURE__ */ jsxs10(View9, { style: styles.row, children: [
-      /* @__PURE__ */ jsx11(Icon, { name: "bolt", size: 28, color: colors.primary }),
-      balanceLoading && balance === null ? /* @__PURE__ */ jsx11(ActivityIndicator3, { color: colors.primary }) : /* @__PURE__ */ jsx11(Text7, { style: styles.value, children: balance !== null ? formatCredits(balance) : "\u2014" })
+  if (balanceLoading && balance === null) {
+    return /* @__PURE__ */ jsx14(BalanceCardSkeleton, { theme, style });
+  }
+  return /* @__PURE__ */ jsxs12(View12, { style: styles.card, children: [
+    /* @__PURE__ */ jsx14(Text7, { style: styles.label, children: "Current Balance" }),
+    /* @__PURE__ */ jsxs12(View12, { style: styles.row, children: [
+      /* @__PURE__ */ jsx14(Icon, { name: "bolt", size: 28, color: colors.primary }),
+      /* @__PURE__ */ jsx14(Text7, { style: styles.value, children: balance !== null ? formatCredits(balance) : "\u2014" })
     ] }),
-    balanceError ? /* @__PURE__ */ jsx11(Text7, { style: styles.error, children: balanceError }) : null
+    balanceError ? /* @__PURE__ */ jsx14(Text7, { style: styles.error, children: balanceError }) : null
   ] });
 }
 
 // src/widgets/JazaTopUpButton.tsx
 import { useState as useState5 } from "react";
 import {
-  ActivityIndicator as ActivityIndicator4,
+  ActivityIndicator as ActivityIndicator2,
   Pressable as Pressable7,
-  StyleSheet as StyleSheet11,
+  StyleSheet as StyleSheet14,
   Text as Text8
 } from "react-native";
-import { Fragment, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function JazaTopUpButton({
   onRequestToken,
   label = "Top up credits",
@@ -1905,7 +2063,7 @@ function JazaTopUpButton({
   const { colors, spacing: spacing2, radius: radius2 } = theme;
   const [loading, setLoading] = useState5(false);
   const [error, setError] = useState5(null);
-  const styles = StyleSheet11.create({
+  const styles = StyleSheet14.create({
     button: {
       backgroundColor: colors.primaryContainer,
       borderRadius: radius2.full,
@@ -1945,20 +2103,20 @@ function JazaTopUpButton({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs11(Fragment, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13(Fragment, { children: [
+    /* @__PURE__ */ jsx15(
       Pressable7,
       {
         style: ({ pressed }) => [styles.button, pressed && styles.pressed],
         onPress: () => void handlePress(),
         disabled: loading,
-        children: loading ? /* @__PURE__ */ jsx12(ActivityIndicator4, { color: colors.onPrimaryContainer }) : /* @__PURE__ */ jsxs11(Fragment, { children: [
-          /* @__PURE__ */ jsx12(Text8, { style: styles.label, children: label }),
-          /* @__PURE__ */ jsx12(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
+        children: loading ? /* @__PURE__ */ jsx15(ActivityIndicator2, { color: colors.onPrimaryContainer }) : /* @__PURE__ */ jsxs13(Fragment, { children: [
+          /* @__PURE__ */ jsx15(Text8, { style: styles.label, children: label }),
+          /* @__PURE__ */ jsx15(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
         ] })
       }
     ),
-    error ? /* @__PURE__ */ jsx12(Text8, { style: styles.error, children: error }) : null
+    error ? /* @__PURE__ */ jsx15(Text8, { style: styles.error, children: error }) : null
   ] });
 }
 export {