@jazadev/react-native 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +407 -252
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +347 -189
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -57,8 +57,8 @@ __export(index_exports, {
|
|
|
57
57
|
module.exports = __toCommonJS(index_exports);
|
|
58
58
|
|
|
59
59
|
// src/provider/JazaProvider.tsx
|
|
60
|
-
var
|
|
61
|
-
var
|
|
60
|
+
var import_react9 = require("react");
|
|
61
|
+
var import_react_native13 = require("react-native");
|
|
62
62
|
|
|
63
63
|
// src/api/errors.ts
|
|
64
64
|
var JazaSdkError = class _JazaSdkError extends Error {
|
|
@@ -312,7 +312,9 @@ var darkTheme = {
|
|
|
312
312
|
overlay: "rgba(12,15,15,0.8)",
|
|
313
313
|
bundleBorder: "#262626",
|
|
314
314
|
bundleBorderSelected: "#2dd4bf",
|
|
315
|
-
bundleBg: "#111111"
|
|
315
|
+
bundleBg: "#111111",
|
|
316
|
+
skeleton: "#2a2c2c",
|
|
317
|
+
skeletonHighlight: "#3a3d3d"
|
|
316
318
|
}
|
|
317
319
|
};
|
|
318
320
|
var lightTheme = {
|
|
@@ -338,24 +340,169 @@ function useJaza() {
|
|
|
338
340
|
}
|
|
339
341
|
|
|
340
342
|
// src/sheet/TopUpBottomSheet.tsx
|
|
341
|
-
var
|
|
342
|
-
var
|
|
343
|
+
var import_react8 = require("react");
|
|
344
|
+
var import_react_native12 = require("react-native");
|
|
343
345
|
var import_react_native_gesture_handler = require("react-native-gesture-handler");
|
|
344
346
|
var import_bottom_sheet2 = __toESM(require("@gorhom/bottom-sheet"), 1);
|
|
345
347
|
var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
|
|
346
348
|
|
|
347
349
|
// src/sheet/steps/OfferStep.tsx
|
|
350
|
+
var import_react_native4 = require("react-native");
|
|
351
|
+
|
|
352
|
+
// src/components/BalanceCardSkeleton.tsx
|
|
353
|
+
var import_react_native2 = require("react-native");
|
|
354
|
+
|
|
355
|
+
// src/components/Skeleton.tsx
|
|
356
|
+
var import_react2 = require("react");
|
|
348
357
|
var import_react_native = require("react-native");
|
|
358
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
359
|
+
function Skeleton({
|
|
360
|
+
theme,
|
|
361
|
+
width = "100%",
|
|
362
|
+
height,
|
|
363
|
+
borderRadius = theme.radius.md,
|
|
364
|
+
style
|
|
365
|
+
}) {
|
|
366
|
+
const pulse = (0, import_react2.useRef)(new import_react_native.Animated.Value(0)).current;
|
|
367
|
+
const { colors } = theme;
|
|
368
|
+
(0, import_react2.useEffect)(() => {
|
|
369
|
+
const loop = import_react_native.Animated.loop(
|
|
370
|
+
import_react_native.Animated.timing(pulse, {
|
|
371
|
+
toValue: 1,
|
|
372
|
+
duration: 1200,
|
|
373
|
+
easing: import_react_native.Easing.inOut(import_react_native.Easing.ease),
|
|
374
|
+
useNativeDriver: true
|
|
375
|
+
})
|
|
376
|
+
);
|
|
377
|
+
loop.start();
|
|
378
|
+
return () => loop.stop();
|
|
379
|
+
}, [pulse]);
|
|
380
|
+
const opacity = pulse.interpolate({
|
|
381
|
+
inputRange: [0, 0.5, 1],
|
|
382
|
+
outputRange: [0.45, 0.85, 0.45]
|
|
383
|
+
});
|
|
384
|
+
const styles = import_react_native.StyleSheet.create({
|
|
385
|
+
block: {
|
|
386
|
+
width,
|
|
387
|
+
height,
|
|
388
|
+
borderRadius,
|
|
389
|
+
backgroundColor: colors.skeleton,
|
|
390
|
+
overflow: "hidden"
|
|
391
|
+
}
|
|
392
|
+
});
|
|
393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.block, style], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
394
|
+
import_react_native.Animated.View,
|
|
395
|
+
{
|
|
396
|
+
style: [import_react_native.StyleSheet.absoluteFill, { backgroundColor: colors.skeletonHighlight, opacity }]
|
|
397
|
+
}
|
|
398
|
+
) });
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// src/components/BalanceCardSkeleton.tsx
|
|
402
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
403
|
+
function BalanceCardSkeleton({ theme, style }) {
|
|
404
|
+
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
405
|
+
const styles = import_react_native2.StyleSheet.create({
|
|
406
|
+
card: {
|
|
407
|
+
backgroundColor: colors.surfaceContainer,
|
|
408
|
+
borderRadius: radius2.xl,
|
|
409
|
+
padding: spacing2.md
|
|
410
|
+
},
|
|
411
|
+
label: {
|
|
412
|
+
marginBottom: spacing2.xs
|
|
413
|
+
},
|
|
414
|
+
row: {
|
|
415
|
+
flexDirection: "row",
|
|
416
|
+
alignItems: "center",
|
|
417
|
+
gap: spacing2.sm
|
|
418
|
+
},
|
|
419
|
+
icon: {
|
|
420
|
+
width: 28,
|
|
421
|
+
height: 28,
|
|
422
|
+
borderRadius: 14
|
|
423
|
+
},
|
|
424
|
+
value: {
|
|
425
|
+
flex: 1,
|
|
426
|
+
maxWidth: 180
|
|
427
|
+
}
|
|
428
|
+
});
|
|
429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
430
|
+
import_react_native2.View,
|
|
431
|
+
{
|
|
432
|
+
style: [styles.card, style],
|
|
433
|
+
accessibilityRole: "progressbar",
|
|
434
|
+
accessibilityLabel: "Loading balance",
|
|
435
|
+
children: [
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
437
|
+
Skeleton,
|
|
438
|
+
{
|
|
439
|
+
theme,
|
|
440
|
+
width: "42%",
|
|
441
|
+
height: 14,
|
|
442
|
+
borderRadius: 6,
|
|
443
|
+
style: styles.label
|
|
444
|
+
}
|
|
445
|
+
),
|
|
446
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.row, children: [
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Skeleton, { theme, style: styles.icon, height: 28, borderRadius: 14 }),
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Skeleton, { theme, height: 48, borderRadius: 10, style: styles.value })
|
|
449
|
+
] })
|
|
450
|
+
]
|
|
451
|
+
}
|
|
452
|
+
);
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
// src/components/BundleListSkeleton.tsx
|
|
456
|
+
var import_react_native3 = require("react-native");
|
|
457
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
458
|
+
function BundleRowSkeleton({ theme }) {
|
|
459
|
+
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
460
|
+
const styles = import_react_native3.StyleSheet.create({
|
|
461
|
+
row: {
|
|
462
|
+
flexDirection: "row",
|
|
463
|
+
alignItems: "center",
|
|
464
|
+
justifyContent: "space-between",
|
|
465
|
+
padding: spacing2.md,
|
|
466
|
+
borderRadius: radius2.xl,
|
|
467
|
+
backgroundColor: colors.bundleBg,
|
|
468
|
+
borderWidth: 1,
|
|
469
|
+
borderColor: colors.bundleBorder,
|
|
470
|
+
marginBottom: spacing2.sm
|
|
471
|
+
},
|
|
472
|
+
left: {
|
|
473
|
+
flex: 1,
|
|
474
|
+
marginRight: spacing2.md,
|
|
475
|
+
gap: spacing2.xs + 2
|
|
476
|
+
},
|
|
477
|
+
right: {
|
|
478
|
+
alignItems: "flex-end",
|
|
479
|
+
gap: spacing2.xs + 2
|
|
480
|
+
}
|
|
481
|
+
});
|
|
482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.row, children: [
|
|
483
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.left, children: [
|
|
484
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { theme, width: "72%", height: 18, borderRadius: 6 }),
|
|
485
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { theme, width: "48%", height: 14, borderRadius: 6 })
|
|
486
|
+
] }),
|
|
487
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles.right, children: [
|
|
488
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { theme, width: 56, height: 18, borderRadius: 6 }),
|
|
489
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { theme, width: 72, height: 12, borderRadius: 4 })
|
|
490
|
+
] })
|
|
491
|
+
] });
|
|
492
|
+
}
|
|
493
|
+
function BundleListSkeleton({ theme, count = 3 }) {
|
|
494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { accessibilityRole: "progressbar", accessibilityLabel: "Loading bundles", children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BundleRowSkeleton, { theme }, index)) });
|
|
495
|
+
}
|
|
349
496
|
|
|
350
497
|
// src/components/Icon.tsx
|
|
351
498
|
var import_MaterialIcons = __toESM(require("@expo/vector-icons/MaterialIcons"), 1);
|
|
352
|
-
var
|
|
499
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
353
500
|
function Icon({ name, size = 24, color }) {
|
|
354
|
-
return /* @__PURE__ */ (0,
|
|
501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_MaterialIcons.default, { name, size, color });
|
|
355
502
|
}
|
|
356
503
|
|
|
357
504
|
// src/sheet/steps/OfferStep.tsx
|
|
358
|
-
var
|
|
505
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
359
506
|
function OfferStep() {
|
|
360
507
|
const {
|
|
361
508
|
theme,
|
|
@@ -369,7 +516,7 @@ function OfferStep() {
|
|
|
369
516
|
goToPayment
|
|
370
517
|
} = useJaza();
|
|
371
518
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
372
|
-
const styles =
|
|
519
|
+
const styles = import_react_native4.StyleSheet.create({
|
|
373
520
|
balanceCard: {
|
|
374
521
|
backgroundColor: colors.surfaceContainer,
|
|
375
522
|
borderRadius: radius2.xl,
|
|
@@ -450,7 +597,6 @@ function OfferStep() {
|
|
|
450
597
|
fontSize: 16,
|
|
451
598
|
fontWeight: "600"
|
|
452
599
|
},
|
|
453
|
-
loading: { padding: spacing2.xl, alignItems: "center" },
|
|
454
600
|
error: {
|
|
455
601
|
color: colors.error,
|
|
456
602
|
fontSize: 14,
|
|
@@ -460,28 +606,28 @@ function OfferStep() {
|
|
|
460
606
|
});
|
|
461
607
|
const renderBundle = (bundle) => {
|
|
462
608
|
const selected = selectedBundle?.id === bundle.id;
|
|
463
|
-
return /* @__PURE__ */ (0,
|
|
464
|
-
|
|
609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
610
|
+
import_react_native4.Pressable,
|
|
465
611
|
{
|
|
466
612
|
style: [styles.bundle, selected && styles.bundleSelected],
|
|
467
613
|
onPress: () => setSelectedBundle(bundle),
|
|
468
614
|
children: [
|
|
469
|
-
/* @__PURE__ */ (0,
|
|
470
|
-
/* @__PURE__ */ (0,
|
|
471
|
-
|
|
615
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { children: [
|
|
616
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
617
|
+
import_react_native4.Text,
|
|
472
618
|
{
|
|
473
619
|
style: [styles.bundleLabel, selected && styles.bundleLabelSelected],
|
|
474
620
|
children: bundle.label ?? "Bundle"
|
|
475
621
|
}
|
|
476
622
|
),
|
|
477
|
-
/* @__PURE__ */ (0,
|
|
623
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.Text, { style: styles.bundleSub, children: [
|
|
478
624
|
formatCredits(bundle.credits),
|
|
479
625
|
" credits"
|
|
480
626
|
] })
|
|
481
627
|
] }),
|
|
482
|
-
/* @__PURE__ */ (0,
|
|
483
|
-
/* @__PURE__ */ (0,
|
|
484
|
-
/* @__PURE__ */ (0,
|
|
628
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: { alignItems: "flex-end" }, children: [
|
|
629
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles.bundleCredits, children: formatCredits(bundle.credits) }),
|
|
630
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.Text, { style: styles.bundlePrice, children: [
|
|
485
631
|
formatUsd(bundle.priceUsd),
|
|
486
632
|
" USD"
|
|
487
633
|
] })
|
|
@@ -491,30 +637,36 @@ function OfferStep() {
|
|
|
491
637
|
bundle.id
|
|
492
638
|
);
|
|
493
639
|
};
|
|
494
|
-
return /* @__PURE__ */ (0,
|
|
495
|
-
/* @__PURE__ */ (0,
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { children: [
|
|
641
|
+
balanceLoading && balance === null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
642
|
+
BalanceCardSkeleton,
|
|
643
|
+
{
|
|
644
|
+
theme,
|
|
645
|
+
style: { marginBottom: spacing2.lg }
|
|
646
|
+
}
|
|
647
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles.balanceCard, children: [
|
|
648
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles.balanceLabel, children: "Current Balance" }),
|
|
649
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles.balanceRow, children: [
|
|
650
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "bolt", size: 28, color: colors.primary }),
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles.balanceValue, children: balance !== null ? formatCredits(balance) : "\u2014" })
|
|
500
652
|
] })
|
|
501
653
|
] }),
|
|
502
|
-
/* @__PURE__ */ (0,
|
|
503
|
-
bundlesError ? /* @__PURE__ */ (0,
|
|
504
|
-
bundlesLoading ? /* @__PURE__ */ (0,
|
|
505
|
-
!bundlesLoading && !bundlesError && bundles.length === 0 ? /* @__PURE__ */ (0,
|
|
506
|
-
/* @__PURE__ */ (0,
|
|
507
|
-
|
|
654
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles.title, children: "Top-up Credits" }),
|
|
655
|
+
bundlesError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles.error, children: bundlesError }) : null,
|
|
656
|
+
bundlesLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BundleListSkeleton, { theme }) : bundles.map(renderBundle),
|
|
657
|
+
!bundlesLoading && !bundlesError && bundles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles.error, children: "No active bundles for this app." }) : null,
|
|
658
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
659
|
+
import_react_native4.Pressable,
|
|
508
660
|
{
|
|
509
661
|
style: styles.cta,
|
|
510
662
|
onPress: goToPayment,
|
|
511
663
|
disabled: !selectedBundle,
|
|
512
664
|
children: [
|
|
513
|
-
/* @__PURE__ */ (0,
|
|
665
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.Text, { style: styles.ctaText, children: [
|
|
514
666
|
"Continue with ",
|
|
515
667
|
selectedBundle?.label ?? "bundle"
|
|
516
668
|
] }),
|
|
517
|
-
/* @__PURE__ */ (0,
|
|
669
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
|
|
518
670
|
]
|
|
519
671
|
}
|
|
520
672
|
)
|
|
@@ -522,14 +674,14 @@ function OfferStep() {
|
|
|
522
674
|
}
|
|
523
675
|
|
|
524
676
|
// src/sheet/steps/PaymentStep.tsx
|
|
525
|
-
var
|
|
526
|
-
var
|
|
677
|
+
var import_react5 = require("react");
|
|
678
|
+
var import_react_native9 = require("react-native");
|
|
527
679
|
|
|
528
680
|
// src/components/PhoneDigitInput.tsx
|
|
529
|
-
var
|
|
530
|
-
var
|
|
681
|
+
var import_react3 = require("react");
|
|
682
|
+
var import_react_native5 = require("react-native");
|
|
531
683
|
var import_bottom_sheet = require("@gorhom/bottom-sheet");
|
|
532
|
-
var
|
|
684
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
533
685
|
var MAX_DIGITS = 10;
|
|
534
686
|
function PhoneDigitInput({
|
|
535
687
|
theme,
|
|
@@ -539,11 +691,11 @@ function PhoneDigitInput({
|
|
|
539
691
|
trailing
|
|
540
692
|
}) {
|
|
541
693
|
const { colors, spacing: spacing2 } = theme;
|
|
542
|
-
const inputRef = (0,
|
|
543
|
-
const [focused, setFocused] = (0,
|
|
694
|
+
const inputRef = (0, import_react3.useRef)(null);
|
|
695
|
+
const [focused, setFocused] = (0, import_react3.useState)(false);
|
|
544
696
|
const digits = value.replace(/\D/g, "").slice(0, MAX_DIGITS);
|
|
545
697
|
const activeIndex = digits.length >= MAX_DIGITS ? MAX_DIGITS - 1 : digits.length;
|
|
546
|
-
const styles =
|
|
698
|
+
const styles = import_react_native5.StyleSheet.create({
|
|
547
699
|
label: {
|
|
548
700
|
color: colors.onSurfaceVariant,
|
|
549
701
|
fontSize: 12,
|
|
@@ -588,15 +740,15 @@ function PhoneDigitInput({
|
|
|
588
740
|
const focusInput = () => {
|
|
589
741
|
inputRef.current?.focus();
|
|
590
742
|
};
|
|
591
|
-
return /* @__PURE__ */ (0,
|
|
592
|
-
/* @__PURE__ */ (0,
|
|
593
|
-
/* @__PURE__ */ (0,
|
|
743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { children: [
|
|
744
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles.label, children: "Phone Number" }),
|
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Pressable, { style: styles.row, onPress: focusInput, children: [
|
|
594
746
|
dialPressable,
|
|
595
|
-
/* @__PURE__ */ (0,
|
|
747
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles.slots, pointerEvents: "none", children: Array.from({ length: MAX_DIGITS }, (_, i) => {
|
|
596
748
|
const char = digits[i];
|
|
597
749
|
const isFocused = focused && i === activeIndex;
|
|
598
|
-
return /* @__PURE__ */ (0,
|
|
599
|
-
|
|
750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles.slot, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
751
|
+
import_react_native5.Text,
|
|
600
752
|
{
|
|
601
753
|
style: [
|
|
602
754
|
styles.slotChar,
|
|
@@ -607,7 +759,7 @@ function PhoneDigitInput({
|
|
|
607
759
|
) }, i);
|
|
608
760
|
}) }),
|
|
609
761
|
trailing,
|
|
610
|
-
/* @__PURE__ */ (0,
|
|
762
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
611
763
|
import_bottom_sheet.BottomSheetTextInput,
|
|
612
764
|
{
|
|
613
765
|
ref: inputRef,
|
|
@@ -628,21 +780,21 @@ function PhoneDigitInput({
|
|
|
628
780
|
}
|
|
629
781
|
|
|
630
782
|
// src/sheet/CountryPickerSheet.tsx
|
|
631
|
-
var
|
|
632
|
-
var
|
|
783
|
+
var import_react4 = require("react");
|
|
784
|
+
var import_react_native7 = require("react-native");
|
|
633
785
|
var import_react_native_safe_area_context = require("react-native-safe-area-context");
|
|
634
786
|
|
|
635
787
|
// src/theme/listStyles.ts
|
|
636
|
-
var
|
|
788
|
+
var import_react_native6 = require("react-native");
|
|
637
789
|
function createSelectableRowStyles(theme) {
|
|
638
790
|
const { colors, spacing: spacing2 } = theme;
|
|
639
|
-
return
|
|
791
|
+
return import_react_native6.StyleSheet.create({
|
|
640
792
|
row: {
|
|
641
793
|
flexDirection: "row",
|
|
642
794
|
alignItems: "center",
|
|
643
795
|
justifyContent: "space-between",
|
|
644
796
|
paddingVertical: spacing2.md,
|
|
645
|
-
borderBottomWidth:
|
|
797
|
+
borderBottomWidth: import_react_native6.StyleSheet.hairlineWidth,
|
|
646
798
|
borderBottomColor: colors.outlineVariant,
|
|
647
799
|
gap: spacing2.md
|
|
648
800
|
},
|
|
@@ -667,7 +819,7 @@ function createSelectableRowStyles(theme) {
|
|
|
667
819
|
}
|
|
668
820
|
|
|
669
821
|
// src/sheet/CountryPickerSheet.tsx
|
|
670
|
-
var
|
|
822
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
671
823
|
function CountryPickerSheet({
|
|
672
824
|
visible,
|
|
673
825
|
onClose
|
|
@@ -675,19 +827,19 @@ function CountryPickerSheet({
|
|
|
675
827
|
const { theme, countries, selectedCountry, setSelectedCountry } = useJaza();
|
|
676
828
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
677
829
|
const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
|
|
678
|
-
const [query, setQuery] = (0,
|
|
830
|
+
const [query, setQuery] = (0, import_react4.useState)("");
|
|
679
831
|
const rowStyles = createSelectableRowStyles(theme);
|
|
680
|
-
(0,
|
|
832
|
+
(0, import_react4.useEffect)(() => {
|
|
681
833
|
if (!visible) setQuery("");
|
|
682
834
|
}, [visible]);
|
|
683
|
-
const filtered = (0,
|
|
835
|
+
const filtered = (0, import_react4.useMemo)(() => {
|
|
684
836
|
const q = query.trim().toLowerCase();
|
|
685
837
|
if (!q) return countries;
|
|
686
838
|
return countries.filter(
|
|
687
839
|
(c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase().includes(q) || c.dialCode.includes(q)
|
|
688
840
|
);
|
|
689
841
|
}, [countries, query]);
|
|
690
|
-
const styles =
|
|
842
|
+
const styles = import_react_native7.StyleSheet.create({
|
|
691
843
|
root: {
|
|
692
844
|
flex: 1,
|
|
693
845
|
justifyContent: "flex-end",
|
|
@@ -749,24 +901,24 @@ function CountryPickerSheet({
|
|
|
749
901
|
paddingVertical: spacing2.lg
|
|
750
902
|
}
|
|
751
903
|
});
|
|
752
|
-
return /* @__PURE__ */ (0,
|
|
753
|
-
|
|
904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
905
|
+
import_react_native7.Modal,
|
|
754
906
|
{
|
|
755
907
|
visible,
|
|
756
908
|
transparent: true,
|
|
757
909
|
animationType: "fade",
|
|
758
910
|
onRequestClose: onClose,
|
|
759
|
-
children: /* @__PURE__ */ (0,
|
|
760
|
-
|
|
911
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
912
|
+
import_react_native7.KeyboardAvoidingView,
|
|
761
913
|
{
|
|
762
914
|
style: styles.root,
|
|
763
|
-
behavior:
|
|
915
|
+
behavior: import_react_native7.Platform.OS === "ios" ? "padding" : void 0,
|
|
764
916
|
children: [
|
|
765
|
-
/* @__PURE__ */ (0,
|
|
766
|
-
/* @__PURE__ */ (0,
|
|
767
|
-
/* @__PURE__ */ (0,
|
|
768
|
-
/* @__PURE__ */ (0,
|
|
769
|
-
|
|
917
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Pressable, { style: import_react_native7.StyleSheet.absoluteFill, onPress: onClose }),
|
|
918
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles.sheet, children: [
|
|
919
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: styles.handle }),
|
|
920
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
921
|
+
import_react_native7.TextInput,
|
|
770
922
|
{
|
|
771
923
|
style: styles.search,
|
|
772
924
|
placeholder: "Search country",
|
|
@@ -779,8 +931,8 @@ function CountryPickerSheet({
|
|
|
779
931
|
returnKeyType: "search"
|
|
780
932
|
}
|
|
781
933
|
),
|
|
782
|
-
/* @__PURE__ */ (0,
|
|
783
|
-
|
|
934
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
935
|
+
import_react_native7.FlatList,
|
|
784
936
|
{
|
|
785
937
|
style: styles.list,
|
|
786
938
|
data: filtered,
|
|
@@ -789,8 +941,8 @@ function CountryPickerSheet({
|
|
|
789
941
|
keyboardDismissMode: "on-drag",
|
|
790
942
|
renderItem: ({ item }) => {
|
|
791
943
|
const selected = selectedCountry?.id === item.id;
|
|
792
|
-
return /* @__PURE__ */ (0,
|
|
793
|
-
|
|
944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
945
|
+
import_react_native7.Pressable,
|
|
794
946
|
{
|
|
795
947
|
style: [rowStyles.row, selected && rowStyles.rowSelected],
|
|
796
948
|
onPress: () => {
|
|
@@ -798,10 +950,10 @@ function CountryPickerSheet({
|
|
|
798
950
|
onClose();
|
|
799
951
|
},
|
|
800
952
|
children: [
|
|
801
|
-
/* @__PURE__ */ (0,
|
|
802
|
-
/* @__PURE__ */ (0,
|
|
803
|
-
/* @__PURE__ */ (0,
|
|
804
|
-
|
|
953
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles.nameRow, children: [
|
|
954
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles.flag, children: item.flag }),
|
|
955
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
956
|
+
import_react_native7.Text,
|
|
805
957
|
{
|
|
806
958
|
style: [
|
|
807
959
|
rowStyles.label,
|
|
@@ -813,7 +965,7 @@ function CountryPickerSheet({
|
|
|
813
965
|
}
|
|
814
966
|
)
|
|
815
967
|
] }),
|
|
816
|
-
/* @__PURE__ */ (0,
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.Text, { style: styles.dial, children: [
|
|
817
969
|
"+",
|
|
818
970
|
item.dialCode
|
|
819
971
|
] })
|
|
@@ -821,7 +973,7 @@ function CountryPickerSheet({
|
|
|
821
973
|
}
|
|
822
974
|
);
|
|
823
975
|
},
|
|
824
|
-
ListEmptyComponent: /* @__PURE__ */ (0,
|
|
976
|
+
ListEmptyComponent: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles.empty, children: "No countries match" })
|
|
825
977
|
}
|
|
826
978
|
)
|
|
827
979
|
] })
|
|
@@ -833,9 +985,9 @@ function CountryPickerSheet({
|
|
|
833
985
|
}
|
|
834
986
|
|
|
835
987
|
// src/sheet/CurrencyPickerSheet.tsx
|
|
836
|
-
var
|
|
988
|
+
var import_react_native8 = require("react-native");
|
|
837
989
|
var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
|
|
838
|
-
var
|
|
990
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
839
991
|
function CurrencyPickerSheet({
|
|
840
992
|
visible,
|
|
841
993
|
currencies,
|
|
@@ -847,7 +999,7 @@ function CurrencyPickerSheet({
|
|
|
847
999
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
848
1000
|
const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
|
|
849
1001
|
const rowStyles = createSelectableRowStyles(theme);
|
|
850
|
-
const styles =
|
|
1002
|
+
const styles = import_react_native8.StyleSheet.create({
|
|
851
1003
|
backdrop: {
|
|
852
1004
|
flex: 1,
|
|
853
1005
|
backgroundColor: colors.overlay,
|
|
@@ -877,31 +1029,31 @@ function CurrencyPickerSheet({
|
|
|
877
1029
|
marginBottom: spacing2.md
|
|
878
1030
|
}
|
|
879
1031
|
});
|
|
880
|
-
return /* @__PURE__ */ (0,
|
|
881
|
-
|
|
1032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1033
|
+
import_react_native8.Modal,
|
|
882
1034
|
{
|
|
883
1035
|
visible,
|
|
884
1036
|
transparent: true,
|
|
885
1037
|
animationType: "fade",
|
|
886
1038
|
onRequestClose: onClose,
|
|
887
|
-
children: /* @__PURE__ */ (0,
|
|
888
|
-
/* @__PURE__ */ (0,
|
|
889
|
-
/* @__PURE__ */ (0,
|
|
890
|
-
/* @__PURE__ */ (0,
|
|
891
|
-
|
|
1039
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Pressable, { style: styles.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.Pressable, { style: styles.sheet, onPress: (e) => e.stopPropagation(), children: [
|
|
1040
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: styles.handle }),
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles.title, children: "Select currency" }),
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1043
|
+
import_react_native8.FlatList,
|
|
892
1044
|
{
|
|
893
1045
|
data: currencies,
|
|
894
1046
|
keyExtractor: (item) => item.code,
|
|
895
1047
|
keyboardShouldPersistTaps: "handled",
|
|
896
1048
|
renderItem: ({ item }) => {
|
|
897
1049
|
const selected = selectedCode === item.code;
|
|
898
|
-
return /* @__PURE__ */ (0,
|
|
899
|
-
|
|
1050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1051
|
+
import_react_native8.Pressable,
|
|
900
1052
|
{
|
|
901
1053
|
style: [rowStyles.row, selected && rowStyles.rowSelected],
|
|
902
1054
|
onPress: () => onSelect(item.code),
|
|
903
|
-
children: /* @__PURE__ */ (0,
|
|
904
|
-
|
|
1055
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1056
|
+
import_react_native8.Text,
|
|
905
1057
|
{
|
|
906
1058
|
style: [rowStyles.label, selected && rowStyles.labelSelected],
|
|
907
1059
|
children: item.code
|
|
@@ -918,7 +1070,7 @@ function CurrencyPickerSheet({
|
|
|
918
1070
|
}
|
|
919
1071
|
|
|
920
1072
|
// src/sheet/steps/PaymentStep.tsx
|
|
921
|
-
var
|
|
1073
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
922
1074
|
function PaymentStep() {
|
|
923
1075
|
const {
|
|
924
1076
|
theme,
|
|
@@ -939,9 +1091,9 @@ function PaymentStep() {
|
|
|
939
1091
|
submitDeposit
|
|
940
1092
|
} = useJaza();
|
|
941
1093
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
942
|
-
const [countryPickerOpen, setCountryPickerOpen] = (0,
|
|
943
|
-
const [currencyPickerOpen, setCurrencyPickerOpen] = (0,
|
|
944
|
-
const currencyOptions = (0,
|
|
1094
|
+
const [countryPickerOpen, setCountryPickerOpen] = (0, import_react5.useState)(false);
|
|
1095
|
+
const [currencyPickerOpen, setCurrencyPickerOpen] = (0, import_react5.useState)(false);
|
|
1096
|
+
const currencyOptions = (0, import_react5.useMemo)(() => {
|
|
945
1097
|
if (predict?.currencies?.length) {
|
|
946
1098
|
return predict.currencies;
|
|
947
1099
|
}
|
|
@@ -950,7 +1102,7 @@ function PaymentStep() {
|
|
|
950
1102
|
const showCurrencyPicker = currencyOptions.length > 1;
|
|
951
1103
|
const formattedQuote = quote ? formatCurrencyAmount(quote.totalLocal, quote.currencyCode) : null;
|
|
952
1104
|
const buyLabel = quote ? `Buy ${formattedQuote}` : quoteLoading ? "Loading\u2026" : selectedBundle ? `Buy ${formatUsd(selectedBundle.priceUsd)}` : "Buy";
|
|
953
|
-
const styles =
|
|
1105
|
+
const styles = import_react_native9.StyleSheet.create({
|
|
954
1106
|
header: {
|
|
955
1107
|
flexDirection: "row",
|
|
956
1108
|
alignItems: "center",
|
|
@@ -1063,78 +1215,78 @@ function PaymentStep() {
|
|
|
1063
1215
|
}
|
|
1064
1216
|
});
|
|
1065
1217
|
const canSubmit = !!predict && !!quote && !quoteLoading && !predictLoading && phoneNational.replace(/\D/g, "").length >= 6;
|
|
1066
|
-
return /* @__PURE__ */ (0,
|
|
1067
|
-
/* @__PURE__ */ (0,
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { children: [
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles.header, children: [
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles.headerLeft, children: [
|
|
1221
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Pressable, { style: styles.backBtn, onPress: goToOffer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "arrow-back", size: 22, color: colors.onSurfaceVariant }) }),
|
|
1222
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.headerTitle, numberOfLines: 1, children: selectedBundle?.label ?? "Top-up Balance" })
|
|
1071
1223
|
] }),
|
|
1072
|
-
balance !== null ? /* @__PURE__ */ (0,
|
|
1073
|
-
/* @__PURE__ */ (0,
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1224
|
+
balance !== null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles.balanceChip, children: [
|
|
1225
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "bolt", size: 16, color: colors.primary }),
|
|
1226
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.balanceChipText, children: balance.toLocaleString() })
|
|
1075
1227
|
] }) : null
|
|
1076
1228
|
] }),
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1078
1230
|
PhoneDigitInput,
|
|
1079
1231
|
{
|
|
1080
1232
|
theme,
|
|
1081
1233
|
value: phoneNational,
|
|
1082
1234
|
onChangeText: setPhoneNational,
|
|
1083
|
-
dialPressable: /* @__PURE__ */ (0,
|
|
1084
|
-
|
|
1235
|
+
dialPressable: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1236
|
+
import_react_native9.Pressable,
|
|
1085
1237
|
{
|
|
1086
1238
|
style: styles.dialBtn,
|
|
1087
1239
|
onPress: () => setCountryPickerOpen(true),
|
|
1088
1240
|
children: [
|
|
1089
|
-
/* @__PURE__ */ (0,
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.Text, { style: styles.dialText, children: [
|
|
1090
1242
|
"+",
|
|
1091
1243
|
selectedCountry?.dialCode ?? "\u2026"
|
|
1092
1244
|
] }),
|
|
1093
|
-
/* @__PURE__ */ (0,
|
|
1245
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "expand-more", size: 24, color: colors.primaryContainer })
|
|
1094
1246
|
]
|
|
1095
1247
|
}
|
|
1096
1248
|
),
|
|
1097
|
-
trailing: predict && !predictLoading ? /* @__PURE__ */ (0,
|
|
1249
|
+
trailing: predict && !predictLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check-circle", size: 24, color: colors.primary }) : predictLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.ActivityIndicator, { color: colors.primary, size: "small" }) : null
|
|
1098
1250
|
}
|
|
1099
1251
|
),
|
|
1100
|
-
predict ? /* @__PURE__ */ (0,
|
|
1101
|
-
/* @__PURE__ */ (0,
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
showCurrencyPicker ? /* @__PURE__ */ (0,
|
|
1104
|
-
|
|
1252
|
+
predict ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.providerText, children: predict.provider.displayName }) : predictError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.providerError, children: predictError }) : null,
|
|
1253
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles.payCard, children: [
|
|
1254
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles.payRow, children: [
|
|
1255
|
+
showCurrencyPicker ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1256
|
+
import_react_native9.Pressable,
|
|
1105
1257
|
{
|
|
1106
1258
|
style: styles.currencyBtn,
|
|
1107
1259
|
onPress: () => setCurrencyPickerOpen(true),
|
|
1108
1260
|
children: [
|
|
1109
|
-
/* @__PURE__ */ (0,
|
|
1110
|
-
/* @__PURE__ */ (0,
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.currencyCode, children: selectedCurrencyCode ?? "\u2014" }),
|
|
1262
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "expand-more", size: 20, color: colors.primaryContainer })
|
|
1111
1263
|
]
|
|
1112
1264
|
}
|
|
1113
|
-
) : /* @__PURE__ */ (0,
|
|
1114
|
-
/* @__PURE__ */ (0,
|
|
1265
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.currencyCode, children: selectedCurrencyCode ?? quote?.currencyCode ?? "USD" }),
|
|
1266
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.amountText, children: formattedQuote ?? (selectedBundle ? formatUsd(selectedBundle.priceUsd) : "\u2014") })
|
|
1115
1267
|
] }),
|
|
1116
|
-
quoteError ? /* @__PURE__ */ (0,
|
|
1117
|
-
/* @__PURE__ */ (0,
|
|
1118
|
-
|
|
1268
|
+
quoteError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.quoteError, children: quoteError }) : null,
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1270
|
+
import_react_native9.Pressable,
|
|
1119
1271
|
{
|
|
1120
1272
|
style: [styles.cta, !canSubmit && styles.ctaDisabled],
|
|
1121
1273
|
onPress: () => void submitDeposit(),
|
|
1122
1274
|
disabled: !canSubmit,
|
|
1123
1275
|
children: [
|
|
1124
|
-
/* @__PURE__ */ (0,
|
|
1125
|
-
/* @__PURE__ */ (0,
|
|
1276
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "lock", size: 18, color: colors.onPrimaryContainer }),
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles.ctaText, children: buyLabel })
|
|
1126
1278
|
]
|
|
1127
1279
|
}
|
|
1128
1280
|
)
|
|
1129
1281
|
] }),
|
|
1130
|
-
/* @__PURE__ */ (0,
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1131
1283
|
CountryPickerSheet,
|
|
1132
1284
|
{
|
|
1133
1285
|
visible: countryPickerOpen,
|
|
1134
1286
|
onClose: () => setCountryPickerOpen(false)
|
|
1135
1287
|
}
|
|
1136
1288
|
),
|
|
1137
|
-
/* @__PURE__ */ (0,
|
|
1289
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1138
1290
|
CurrencyPickerSheet,
|
|
1139
1291
|
{
|
|
1140
1292
|
visible: currencyPickerOpen,
|
|
@@ -1151,25 +1303,25 @@ function PaymentStep() {
|
|
|
1151
1303
|
}
|
|
1152
1304
|
|
|
1153
1305
|
// src/sheet/steps/ResultStep.tsx
|
|
1154
|
-
var
|
|
1155
|
-
var
|
|
1306
|
+
var import_react7 = require("react");
|
|
1307
|
+
var import_react_native11 = require("react-native");
|
|
1156
1308
|
|
|
1157
1309
|
// src/components/ProcessingSpinner.tsx
|
|
1158
|
-
var
|
|
1159
|
-
var
|
|
1160
|
-
var
|
|
1310
|
+
var import_react6 = require("react");
|
|
1311
|
+
var import_react_native10 = require("react-native");
|
|
1312
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1161
1313
|
function ProcessingSpinner({
|
|
1162
1314
|
theme,
|
|
1163
1315
|
size = 64
|
|
1164
1316
|
}) {
|
|
1165
1317
|
const { colors } = theme;
|
|
1166
|
-
const spin = (0,
|
|
1167
|
-
(0,
|
|
1168
|
-
const loop =
|
|
1169
|
-
|
|
1318
|
+
const spin = (0, import_react6.useRef)(new import_react_native10.Animated.Value(0)).current;
|
|
1319
|
+
(0, import_react6.useEffect)(() => {
|
|
1320
|
+
const loop = import_react_native10.Animated.loop(
|
|
1321
|
+
import_react_native10.Animated.timing(spin, {
|
|
1170
1322
|
toValue: 1,
|
|
1171
1323
|
duration: 900,
|
|
1172
|
-
easing:
|
|
1324
|
+
easing: import_react_native10.Easing.linear,
|
|
1173
1325
|
useNativeDriver: true
|
|
1174
1326
|
})
|
|
1175
1327
|
);
|
|
@@ -1182,7 +1334,7 @@ function ProcessingSpinner({
|
|
|
1182
1334
|
});
|
|
1183
1335
|
const ring = size;
|
|
1184
1336
|
const stroke = 4;
|
|
1185
|
-
const styles =
|
|
1337
|
+
const styles = import_react_native10.StyleSheet.create({
|
|
1186
1338
|
wrap: {
|
|
1187
1339
|
width: ring,
|
|
1188
1340
|
height: ring,
|
|
@@ -1204,14 +1356,14 @@ function ProcessingSpinner({
|
|
|
1204
1356
|
justifyContent: "center"
|
|
1205
1357
|
}
|
|
1206
1358
|
});
|
|
1207
|
-
return /* @__PURE__ */ (0,
|
|
1208
|
-
/* @__PURE__ */ (0,
|
|
1209
|
-
/* @__PURE__ */ (0,
|
|
1359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native10.View, { style: styles.wrap, children: [
|
|
1360
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Animated.View, { style: [styles.ring, { transform: [{ rotate }] }] }),
|
|
1361
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "lock", size: Math.round(size * 0.38), color: colors.primary }) })
|
|
1210
1362
|
] });
|
|
1211
1363
|
}
|
|
1212
1364
|
|
|
1213
1365
|
// src/sheet/steps/ResultStep.tsx
|
|
1214
|
-
var
|
|
1366
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1215
1367
|
function ResultStep() {
|
|
1216
1368
|
const {
|
|
1217
1369
|
theme,
|
|
@@ -1224,18 +1376,18 @@ function ResultStep() {
|
|
|
1224
1376
|
retryPayment
|
|
1225
1377
|
} = useJaza();
|
|
1226
1378
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
1227
|
-
const scale = (0,
|
|
1228
|
-
(0,
|
|
1379
|
+
const scale = (0, import_react7.useRef)(new import_react_native11.Animated.Value(0)).current;
|
|
1380
|
+
(0, import_react7.useEffect)(() => {
|
|
1229
1381
|
if (resultPhase === "success") {
|
|
1230
1382
|
scale.setValue(0);
|
|
1231
|
-
|
|
1383
|
+
import_react_native11.Animated.spring(scale, {
|
|
1232
1384
|
toValue: 1,
|
|
1233
1385
|
useNativeDriver: true,
|
|
1234
1386
|
friction: 6
|
|
1235
1387
|
}).start();
|
|
1236
1388
|
}
|
|
1237
1389
|
}, [resultPhase, scale]);
|
|
1238
|
-
const styles =
|
|
1390
|
+
const styles = import_react_native11.StyleSheet.create({
|
|
1239
1391
|
container: {
|
|
1240
1392
|
alignItems: "center",
|
|
1241
1393
|
paddingVertical: spacing2.xl
|
|
@@ -1303,43 +1455,43 @@ function ResultStep() {
|
|
|
1303
1455
|
}
|
|
1304
1456
|
});
|
|
1305
1457
|
if (resultPhase === "loading") {
|
|
1306
|
-
return /* @__PURE__ */ (0,
|
|
1307
|
-
/* @__PURE__ */ (0,
|
|
1308
|
-
/* @__PURE__ */ (0,
|
|
1309
|
-
/* @__PURE__ */ (0,
|
|
1458
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: styles.container, children: [
|
|
1459
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: styles.spinnerWrap, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ProcessingSpinner, { theme, size: 64 }) }),
|
|
1460
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: [styles.title, styles.titlePulse], children: "Processing payment..." }),
|
|
1461
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.subtitle, children: "Please authorize on your device" })
|
|
1310
1462
|
] });
|
|
1311
1463
|
}
|
|
1312
1464
|
if (resultPhase === "failure") {
|
|
1313
|
-
return /* @__PURE__ */ (0,
|
|
1314
|
-
/* @__PURE__ */ (0,
|
|
1315
|
-
/* @__PURE__ */ (0,
|
|
1316
|
-
/* @__PURE__ */ (0,
|
|
1317
|
-
/* @__PURE__ */ (0,
|
|
1318
|
-
/* @__PURE__ */ (0,
|
|
1465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: styles.container, children: [
|
|
1466
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: styles.failIcon, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "error-outline", size: 48, color: colors.error }) }),
|
|
1467
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.title, children: "Payment failed" }),
|
|
1468
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.subtitle, children: failureReason ?? depositError ?? "Something went wrong" }),
|
|
1469
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Pressable, { style: styles.retryBtn, onPress: retryPayment, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.retryText, children: "Try again" }) }),
|
|
1470
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Pressable, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.doneText, children: "Dismiss" }) })
|
|
1319
1471
|
] });
|
|
1320
1472
|
}
|
|
1321
1473
|
const credits = deposit?.credits ?? selectedBundle?.credits ?? 0;
|
|
1322
|
-
return /* @__PURE__ */ (0,
|
|
1323
|
-
/* @__PURE__ */ (0,
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1325
|
-
/* @__PURE__ */ (0,
|
|
1474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: styles.container, children: [
|
|
1475
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Animated.View, { style: [styles.successIcon, { transform: [{ scale }] }], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "check-circle", size: 48, color: colors.success }) }),
|
|
1476
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.title, children: "Top-up Successful" }),
|
|
1477
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.Text, { style: styles.subtitle, children: [
|
|
1326
1478
|
formatCredits(credits),
|
|
1327
1479
|
" credits have been added to your balance."
|
|
1328
1480
|
] }),
|
|
1329
|
-
/* @__PURE__ */ (0,
|
|
1481
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Pressable, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles.doneText, children: "Done" }) })
|
|
1330
1482
|
] });
|
|
1331
1483
|
}
|
|
1332
1484
|
|
|
1333
1485
|
// src/sheet/TopUpBottomSheet.tsx
|
|
1334
|
-
var
|
|
1486
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1335
1487
|
function TopUpBottomSheet() {
|
|
1336
1488
|
const { theme, sheetOpen, step, closeTopUp } = useJaza();
|
|
1337
1489
|
const { colors, spacing: spacing2 } = theme;
|
|
1338
1490
|
const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
|
|
1339
|
-
const ref = (0,
|
|
1340
|
-
const snapPoints = (0,
|
|
1341
|
-
const renderBackdrop = (0,
|
|
1342
|
-
(props) => /* @__PURE__ */ (0,
|
|
1491
|
+
const ref = (0, import_react8.useRef)(null);
|
|
1492
|
+
const snapPoints = (0, import_react8.useMemo)(() => ["92%"], []);
|
|
1493
|
+
const renderBackdrop = (0, import_react8.useCallback)(
|
|
1494
|
+
(props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1343
1495
|
import_bottom_sheet2.BottomSheetBackdrop,
|
|
1344
1496
|
{
|
|
1345
1497
|
...props,
|
|
@@ -1351,7 +1503,7 @@ function TopUpBottomSheet() {
|
|
|
1351
1503
|
),
|
|
1352
1504
|
[]
|
|
1353
1505
|
);
|
|
1354
|
-
const styles =
|
|
1506
|
+
const styles = import_react_native12.StyleSheet.create({
|
|
1355
1507
|
root: {
|
|
1356
1508
|
flex: 1
|
|
1357
1509
|
},
|
|
@@ -1369,15 +1521,15 @@ function TopUpBottomSheet() {
|
|
|
1369
1521
|
paddingBottom: insets.bottom + spacing2.xl
|
|
1370
1522
|
}
|
|
1371
1523
|
});
|
|
1372
|
-
return /* @__PURE__ */ (0,
|
|
1373
|
-
|
|
1524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1525
|
+
import_react_native12.Modal,
|
|
1374
1526
|
{
|
|
1375
1527
|
visible: sheetOpen,
|
|
1376
1528
|
transparent: true,
|
|
1377
1529
|
animationType: "fade",
|
|
1378
1530
|
statusBarTranslucent: true,
|
|
1379
1531
|
onRequestClose: closeTopUp,
|
|
1380
|
-
children: /* @__PURE__ */ (0,
|
|
1532
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1381
1533
|
import_bottom_sheet2.default,
|
|
1382
1534
|
{
|
|
1383
1535
|
ref,
|
|
@@ -1390,16 +1542,16 @@ function TopUpBottomSheet() {
|
|
|
1390
1542
|
keyboardBlurBehavior: "restore",
|
|
1391
1543
|
android_keyboardInputMode: "adjustResize",
|
|
1392
1544
|
backgroundStyle: { backgroundColor: colors.surface },
|
|
1393
|
-
handleComponent: () => /* @__PURE__ */ (0,
|
|
1394
|
-
children: /* @__PURE__ */ (0,
|
|
1545
|
+
handleComponent: () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.View, { style: styles.handle }),
|
|
1546
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1395
1547
|
import_bottom_sheet2.BottomSheetScrollView,
|
|
1396
1548
|
{
|
|
1397
1549
|
keyboardShouldPersistTaps: "handled",
|
|
1398
1550
|
contentContainerStyle: styles.content,
|
|
1399
1551
|
children: [
|
|
1400
|
-
step === "offer" ? /* @__PURE__ */ (0,
|
|
1401
|
-
step === "payment" ? /* @__PURE__ */ (0,
|
|
1402
|
-
step === "processing" ? /* @__PURE__ */ (0,
|
|
1552
|
+
step === "offer" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OfferStep, {}) : null,
|
|
1553
|
+
step === "payment" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaymentStep, {}) : null,
|
|
1554
|
+
step === "processing" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ResultStep, {}) : null
|
|
1403
1555
|
]
|
|
1404
1556
|
}
|
|
1405
1557
|
)
|
|
@@ -1410,7 +1562,7 @@ function TopUpBottomSheet() {
|
|
|
1410
1562
|
}
|
|
1411
1563
|
|
|
1412
1564
|
// src/provider/JazaProvider.tsx
|
|
1413
|
-
var
|
|
1565
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1414
1566
|
var PREDICT_DEBOUNCE_MS = 500;
|
|
1415
1567
|
var POLL_INTERVAL_MS = 2e3;
|
|
1416
1568
|
var POLL_TIMEOUT_MS = 12e4;
|
|
@@ -1422,30 +1574,30 @@ function JazaProvider({
|
|
|
1422
1574
|
theme: themePreference = "system",
|
|
1423
1575
|
children
|
|
1424
1576
|
}) {
|
|
1425
|
-
const client = (0,
|
|
1577
|
+
const client = (0, import_react9.useMemo)(
|
|
1426
1578
|
() => new PublicClient({ publishableKey, apiBaseUrl }),
|
|
1427
1579
|
[publishableKey, apiBaseUrl]
|
|
1428
1580
|
);
|
|
1429
|
-
const [systemScheme, setSystemScheme] = (0,
|
|
1581
|
+
const [systemScheme, setSystemScheme] = (0, import_react9.useState)(
|
|
1430
1582
|
() => {
|
|
1431
|
-
const scheme =
|
|
1583
|
+
const scheme = import_react_native13.Appearance.getColorScheme();
|
|
1432
1584
|
return scheme === "dark" ? "dark" : "light";
|
|
1433
1585
|
}
|
|
1434
1586
|
);
|
|
1435
|
-
(0,
|
|
1436
|
-
const sub =
|
|
1587
|
+
(0, import_react9.useEffect)(() => {
|
|
1588
|
+
const sub = import_react_native13.Appearance.addChangeListener(({ colorScheme }) => {
|
|
1437
1589
|
setSystemScheme(colorScheme === "dark" ? "dark" : "light");
|
|
1438
1590
|
});
|
|
1439
1591
|
return () => sub.remove();
|
|
1440
1592
|
}, []);
|
|
1441
|
-
const theme = (0,
|
|
1593
|
+
const theme = (0, import_react9.useMemo)(
|
|
1442
1594
|
() => resolveTheme(themePreference, systemScheme),
|
|
1443
1595
|
[themePreference, systemScheme]
|
|
1444
1596
|
);
|
|
1445
|
-
const [balance, setBalance] = (0,
|
|
1446
|
-
const [balanceLoading, setBalanceLoading] = (0,
|
|
1447
|
-
const [balanceError, setBalanceError] = (0,
|
|
1448
|
-
const refreshBalance = (0,
|
|
1597
|
+
const [balance, setBalance] = (0, import_react9.useState)(null);
|
|
1598
|
+
const [balanceLoading, setBalanceLoading] = (0, import_react9.useState)(false);
|
|
1599
|
+
const [balanceError, setBalanceError] = (0, import_react9.useState)(null);
|
|
1600
|
+
const refreshBalance = (0, import_react9.useCallback)(async () => {
|
|
1449
1601
|
setBalanceLoading(true);
|
|
1450
1602
|
setBalanceError(null);
|
|
1451
1603
|
try {
|
|
@@ -1459,43 +1611,43 @@ function JazaProvider({
|
|
|
1459
1611
|
setBalanceLoading(false);
|
|
1460
1612
|
}
|
|
1461
1613
|
}, [getBalance]);
|
|
1462
|
-
(0,
|
|
1614
|
+
(0, import_react9.useEffect)(() => {
|
|
1463
1615
|
void refreshBalance();
|
|
1464
1616
|
}, [refreshBalance]);
|
|
1465
|
-
const [sheetOpen, setSheetOpen] = (0,
|
|
1466
|
-
const [step, setStep] = (0,
|
|
1467
|
-
const [resultPhase, setResultPhase] = (0,
|
|
1468
|
-
const [topUpToken, setTopUpToken] = (0,
|
|
1469
|
-
const [bundles, setBundles] = (0,
|
|
1470
|
-
const [bundlesLoading, setBundlesLoading] = (0,
|
|
1471
|
-
const [bundlesError, setBundlesError] = (0,
|
|
1472
|
-
const [selectedBundle, setSelectedBundle] = (0,
|
|
1473
|
-
const [countries, setCountries] = (0,
|
|
1474
|
-
const [selectedCountry, setSelectedCountryState] = (0,
|
|
1475
|
-
const [selectedCurrencyCode, setSelectedCurrencyCode] = (0,
|
|
1476
|
-
const [phoneNational, setPhoneNational] = (0,
|
|
1477
|
-
const [predict, setPredict] = (0,
|
|
1617
|
+
const [sheetOpen, setSheetOpen] = (0, import_react9.useState)(false);
|
|
1618
|
+
const [step, setStep] = (0, import_react9.useState)("offer");
|
|
1619
|
+
const [resultPhase, setResultPhase] = (0, import_react9.useState)("loading");
|
|
1620
|
+
const [topUpToken, setTopUpToken] = (0, import_react9.useState)(null);
|
|
1621
|
+
const [bundles, setBundles] = (0, import_react9.useState)([]);
|
|
1622
|
+
const [bundlesLoading, setBundlesLoading] = (0, import_react9.useState)(false);
|
|
1623
|
+
const [bundlesError, setBundlesError] = (0, import_react9.useState)(null);
|
|
1624
|
+
const [selectedBundle, setSelectedBundle] = (0, import_react9.useState)(null);
|
|
1625
|
+
const [countries, setCountries] = (0, import_react9.useState)([]);
|
|
1626
|
+
const [selectedCountry, setSelectedCountryState] = (0, import_react9.useState)(null);
|
|
1627
|
+
const [selectedCurrencyCode, setSelectedCurrencyCode] = (0, import_react9.useState)(null);
|
|
1628
|
+
const [phoneNational, setPhoneNational] = (0, import_react9.useState)("");
|
|
1629
|
+
const [predict, setPredict] = (0, import_react9.useState)(
|
|
1478
1630
|
null
|
|
1479
1631
|
);
|
|
1480
|
-
const [predictLoading, setPredictLoading] = (0,
|
|
1481
|
-
const [predictError, setPredictError] = (0,
|
|
1482
|
-
const [quote, setQuote] = (0,
|
|
1483
|
-
const [quoteLoading, setQuoteLoading] = (0,
|
|
1484
|
-
const [quoteError, setQuoteError] = (0,
|
|
1485
|
-
const [deposit, setDeposit] = (0,
|
|
1486
|
-
const [depositError, setDepositError] = (0,
|
|
1487
|
-
const [failureReason, setFailureReason] = (0,
|
|
1488
|
-
const predictTimer = (0,
|
|
1489
|
-
const pollTimer = (0,
|
|
1490
|
-
const pollStarted = (0,
|
|
1491
|
-
const clearPoll = (0,
|
|
1632
|
+
const [predictLoading, setPredictLoading] = (0, import_react9.useState)(false);
|
|
1633
|
+
const [predictError, setPredictError] = (0, import_react9.useState)(null);
|
|
1634
|
+
const [quote, setQuote] = (0, import_react9.useState)(null);
|
|
1635
|
+
const [quoteLoading, setQuoteLoading] = (0, import_react9.useState)(false);
|
|
1636
|
+
const [quoteError, setQuoteError] = (0, import_react9.useState)(null);
|
|
1637
|
+
const [deposit, setDeposit] = (0, import_react9.useState)(null);
|
|
1638
|
+
const [depositError, setDepositError] = (0, import_react9.useState)(null);
|
|
1639
|
+
const [failureReason, setFailureReason] = (0, import_react9.useState)(null);
|
|
1640
|
+
const predictTimer = (0, import_react9.useRef)(null);
|
|
1641
|
+
const pollTimer = (0, import_react9.useRef)(null);
|
|
1642
|
+
const pollStarted = (0, import_react9.useRef)(null);
|
|
1643
|
+
const clearPoll = (0, import_react9.useCallback)(() => {
|
|
1492
1644
|
if (pollTimer.current) {
|
|
1493
1645
|
clearInterval(pollTimer.current);
|
|
1494
1646
|
pollTimer.current = null;
|
|
1495
1647
|
}
|
|
1496
1648
|
pollStarted.current = null;
|
|
1497
1649
|
}, []);
|
|
1498
|
-
const resetPaymentState = (0,
|
|
1650
|
+
const resetPaymentState = (0, import_react9.useCallback)(() => {
|
|
1499
1651
|
setPredict(null);
|
|
1500
1652
|
setPredictError(null);
|
|
1501
1653
|
setQuote(null);
|
|
@@ -1505,7 +1657,7 @@ function JazaProvider({
|
|
|
1505
1657
|
setFailureReason(null);
|
|
1506
1658
|
setResultPhase("loading");
|
|
1507
1659
|
}, []);
|
|
1508
|
-
const setSelectedCountry = (0,
|
|
1660
|
+
const setSelectedCountry = (0, import_react9.useCallback)((country) => {
|
|
1509
1661
|
setSelectedCountryState(country);
|
|
1510
1662
|
setPhoneNational("");
|
|
1511
1663
|
setPredict(null);
|
|
@@ -1517,7 +1669,7 @@ function JazaProvider({
|
|
|
1517
1669
|
setSelectedCurrencyCode(null);
|
|
1518
1670
|
}
|
|
1519
1671
|
}, []);
|
|
1520
|
-
const loadSessionData = (0,
|
|
1672
|
+
const loadSessionData = (0, import_react9.useCallback)(async () => {
|
|
1521
1673
|
setBundlesLoading(true);
|
|
1522
1674
|
setBundlesError(null);
|
|
1523
1675
|
try {
|
|
@@ -1556,7 +1708,7 @@ function JazaProvider({
|
|
|
1556
1708
|
setBundlesLoading(false);
|
|
1557
1709
|
}
|
|
1558
1710
|
}, [client]);
|
|
1559
|
-
const openTopUp = (0,
|
|
1711
|
+
const openTopUp = (0, import_react9.useCallback)(
|
|
1560
1712
|
async (token) => {
|
|
1561
1713
|
client.setTopUpToken(token);
|
|
1562
1714
|
setTopUpToken(token);
|
|
@@ -1572,7 +1724,7 @@ function JazaProvider({
|
|
|
1572
1724
|
},
|
|
1573
1725
|
[client, loadSessionData, refreshBalance, resetPaymentState]
|
|
1574
1726
|
);
|
|
1575
|
-
const closeTopUp = (0,
|
|
1727
|
+
const closeTopUp = (0, import_react9.useCallback)(() => {
|
|
1576
1728
|
clearPoll();
|
|
1577
1729
|
setSheetOpen(false);
|
|
1578
1730
|
client.setTopUpToken(null);
|
|
@@ -1580,16 +1732,16 @@ function JazaProvider({
|
|
|
1580
1732
|
setStep("offer");
|
|
1581
1733
|
resetPaymentState();
|
|
1582
1734
|
}, [clearPoll, client, resetPaymentState]);
|
|
1583
|
-
const goToOffer = (0,
|
|
1735
|
+
const goToOffer = (0, import_react9.useCallback)(() => {
|
|
1584
1736
|
clearPoll();
|
|
1585
1737
|
setStep("offer");
|
|
1586
1738
|
resetPaymentState();
|
|
1587
1739
|
}, [clearPoll, resetPaymentState]);
|
|
1588
|
-
const goToPayment = (0,
|
|
1740
|
+
const goToPayment = (0, import_react9.useCallback)(() => {
|
|
1589
1741
|
setStep("payment");
|
|
1590
1742
|
resetPaymentState();
|
|
1591
1743
|
}, [resetPaymentState]);
|
|
1592
|
-
const startPoll = (0,
|
|
1744
|
+
const startPoll = (0, import_react9.useCallback)(
|
|
1593
1745
|
(depositId, credits) => {
|
|
1594
1746
|
clearPoll();
|
|
1595
1747
|
pollStarted.current = Date.now();
|
|
@@ -1627,7 +1779,7 @@ function JazaProvider({
|
|
|
1627
1779
|
},
|
|
1628
1780
|
[clearPoll, client, onTopUpComplete, refreshBalance]
|
|
1629
1781
|
);
|
|
1630
|
-
const submitDeposit = (0,
|
|
1782
|
+
const submitDeposit = (0, import_react9.useCallback)(async () => {
|
|
1631
1783
|
if (!selectedBundle || !predict || !quote || !selectedCountry) return;
|
|
1632
1784
|
const e164 = buildE164(selectedCountry.dialCode, phoneNational);
|
|
1633
1785
|
setStep("processing");
|
|
@@ -1679,14 +1831,14 @@ function JazaProvider({
|
|
|
1679
1831
|
selectedCountry,
|
|
1680
1832
|
startPoll
|
|
1681
1833
|
]);
|
|
1682
|
-
const retryPayment = (0,
|
|
1834
|
+
const retryPayment = (0, import_react9.useCallback)(() => {
|
|
1683
1835
|
clearPoll();
|
|
1684
1836
|
setStep("payment");
|
|
1685
1837
|
setResultPhase("loading");
|
|
1686
1838
|
setDepositError(null);
|
|
1687
1839
|
setFailureReason(null);
|
|
1688
1840
|
}, [clearPoll]);
|
|
1689
|
-
(0,
|
|
1841
|
+
(0, import_react9.useEffect)(() => {
|
|
1690
1842
|
if (step !== "payment" || !selectedCountry) return;
|
|
1691
1843
|
const digits = phoneNational.replace(/\D/g, "");
|
|
1692
1844
|
if (digits.length < 6) {
|
|
@@ -1728,7 +1880,7 @@ function JazaProvider({
|
|
|
1728
1880
|
selectedCurrencyCode,
|
|
1729
1881
|
step
|
|
1730
1882
|
]);
|
|
1731
|
-
(0,
|
|
1883
|
+
(0, import_react9.useEffect)(() => {
|
|
1732
1884
|
if (step !== "payment" || !selectedBundle || !predict || !selectedCurrencyCode) {
|
|
1733
1885
|
setQuote(null);
|
|
1734
1886
|
return;
|
|
@@ -1753,8 +1905,8 @@ function JazaProvider({
|
|
|
1753
1905
|
}
|
|
1754
1906
|
})();
|
|
1755
1907
|
}, [client, predict, selectedBundle, selectedCurrencyCode, step]);
|
|
1756
|
-
(0,
|
|
1757
|
-
const value = (0,
|
|
1908
|
+
(0, import_react9.useEffect)(() => () => clearPoll(), [clearPoll]);
|
|
1909
|
+
const value = (0, import_react9.useMemo)(
|
|
1758
1910
|
() => ({
|
|
1759
1911
|
theme,
|
|
1760
1912
|
themePreference,
|
|
@@ -1837,23 +1989,23 @@ function JazaProvider({
|
|
|
1837
1989
|
onTopUpComplete
|
|
1838
1990
|
]
|
|
1839
1991
|
);
|
|
1840
|
-
return /* @__PURE__ */ (0,
|
|
1992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(JazaContext.Provider, { value, children: [
|
|
1841
1993
|
children,
|
|
1842
|
-
/* @__PURE__ */ (0,
|
|
1994
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TopUpBottomSheet, {})
|
|
1843
1995
|
] });
|
|
1844
1996
|
}
|
|
1845
1997
|
|
|
1846
1998
|
// src/widgets/JazaBalanceWidget.tsx
|
|
1847
|
-
var
|
|
1848
|
-
var
|
|
1849
|
-
var
|
|
1999
|
+
var import_react10 = require("react");
|
|
2000
|
+
var import_react_native14 = require("react-native");
|
|
2001
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1850
2002
|
function JazaBalanceWidget({ style }) {
|
|
1851
2003
|
const { theme, balance, balanceLoading, balanceError, refreshBalance } = useJaza();
|
|
1852
2004
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
1853
|
-
(0,
|
|
2005
|
+
(0, import_react10.useEffect)(() => {
|
|
1854
2006
|
void refreshBalance();
|
|
1855
2007
|
}, [refreshBalance]);
|
|
1856
|
-
const styles =
|
|
2008
|
+
const styles = import_react_native14.StyleSheet.create({
|
|
1857
2009
|
card: {
|
|
1858
2010
|
backgroundColor: colors.surfaceContainer,
|
|
1859
2011
|
borderRadius: radius2.xl,
|
|
@@ -1882,20 +2034,23 @@ function JazaBalanceWidget({ style }) {
|
|
|
1882
2034
|
marginTop: spacing2.xs
|
|
1883
2035
|
}
|
|
1884
2036
|
});
|
|
1885
|
-
|
|
1886
|
-
/* @__PURE__ */ (0,
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
2037
|
+
if (balanceLoading && balance === null) {
|
|
2038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BalanceCardSkeleton, { theme, style });
|
|
2039
|
+
}
|
|
2040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: styles.card, children: [
|
|
2041
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.Text, { style: styles.label, children: "Current Balance" }),
|
|
2042
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: styles.row, children: [
|
|
2043
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "bolt", size: 28, color: colors.primary }),
|
|
2044
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.Text, { style: styles.value, children: balance !== null ? formatCredits(balance) : "\u2014" })
|
|
1890
2045
|
] }),
|
|
1891
|
-
balanceError ? /* @__PURE__ */ (0,
|
|
2046
|
+
balanceError ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.Text, { style: styles.error, children: balanceError }) : null
|
|
1892
2047
|
] });
|
|
1893
2048
|
}
|
|
1894
2049
|
|
|
1895
2050
|
// src/widgets/JazaTopUpButton.tsx
|
|
1896
|
-
var
|
|
1897
|
-
var
|
|
1898
|
-
var
|
|
2051
|
+
var import_react11 = require("react");
|
|
2052
|
+
var import_react_native15 = require("react-native");
|
|
2053
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1899
2054
|
function JazaTopUpButton({
|
|
1900
2055
|
onRequestToken,
|
|
1901
2056
|
label = "Top up credits",
|
|
@@ -1903,9 +2058,9 @@ function JazaTopUpButton({
|
|
|
1903
2058
|
}) {
|
|
1904
2059
|
const { theme, openTopUp } = useJaza();
|
|
1905
2060
|
const { colors, spacing: spacing2, radius: radius2 } = theme;
|
|
1906
|
-
const [loading, setLoading] = (0,
|
|
1907
|
-
const [error, setError] = (0,
|
|
1908
|
-
const styles =
|
|
2061
|
+
const [loading, setLoading] = (0, import_react11.useState)(false);
|
|
2062
|
+
const [error, setError] = (0, import_react11.useState)(null);
|
|
2063
|
+
const styles = import_react_native15.StyleSheet.create({
|
|
1909
2064
|
button: {
|
|
1910
2065
|
backgroundColor: colors.primaryContainer,
|
|
1911
2066
|
borderRadius: radius2.full,
|
|
@@ -1945,20 +2100,20 @@ function JazaTopUpButton({
|
|
|
1945
2100
|
setLoading(false);
|
|
1946
2101
|
}
|
|
1947
2102
|
};
|
|
1948
|
-
return /* @__PURE__ */ (0,
|
|
1949
|
-
/* @__PURE__ */ (0,
|
|
1950
|
-
|
|
2103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
2104
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2105
|
+
import_react_native15.Pressable,
|
|
1951
2106
|
{
|
|
1952
2107
|
style: ({ pressed }) => [styles.button, pressed && styles.pressed],
|
|
1953
2108
|
onPress: () => void handlePress(),
|
|
1954
2109
|
disabled: loading,
|
|
1955
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
1956
|
-
/* @__PURE__ */ (0,
|
|
1957
|
-
/* @__PURE__ */ (0,
|
|
2110
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.ActivityIndicator, { color: colors.onPrimaryContainer }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
2111
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.Text, { style: styles.label, children: label }),
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
|
|
1958
2113
|
] })
|
|
1959
2114
|
}
|
|
1960
2115
|
),
|
|
1961
|
-
error ? /* @__PURE__ */ (0,
|
|
2116
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.Text, { style: styles.error, children: error }) : null
|
|
1962
2117
|
] });
|
|
1963
2118
|
}
|
|
1964
2119
|
// Annotate the CommonJS export names for ESM import in node:
|