@clockpay/react-native 1.0.0

package/src/components/bottom-sheet.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Modal,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+interface BottomSheetProps {
+  visible: boolean;
+  /** Called when the user requests to close (backdrop, drag, hardware back). */
+  onClose: () => void;
+  /** Called after the exit animation completes — safe to unmount/reset here. */
+  onClosed?: () => void;
+  /** When false, tapping the dimmed backdrop will not dismiss the sheet. Defaults to true. */
+  closeOnBackdropPress?: boolean;
+  children: ReactNode;
+}
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+const DISMISS_THRESHOLD = 120;
+
+/**
+ * A Stripe-style bottom sheet: slides up from the bottom over a dimmed backdrop,
+ * with drag-to-dismiss on the handle. Built on RN primitives — no native deps.
+ */
+export function BottomSheet({
+  visible,
+  onClose,
+  onClosed,
+  closeOnBackdropPress = true,
+  children,
+}: BottomSheetProps) {
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+  const backdrop = useRef(new Animated.Value(0)).current;
+  const [mounted, setMounted] = useState(visible);
+
+  const animateIn = () => {
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 280,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdrop, {
+        toValue: 1,
+        duration: 280,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  const animateOut = () => {
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: SCREEN_HEIGHT,
+        duration: 220,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdrop, {
+        toValue: 0,
+        duration: 220,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setMounted(false);
+      onClosed?.();
+    });
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      // Defer so the sheet starts off-screen before animating in.
+      requestAnimationFrame(animateIn);
+    } else if (mounted) {
+      animateOut();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => g.dy > 6 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_, g) => {
+        if (g.dy > 0) translateY.setValue(g.dy);
+      },
+      onPanResponderRelease: (_, g) => {
+        if (g.dy > DISMISS_THRESHOLD) onClose();
+        else
+          Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            bounciness: 4,
+          }).start();
+      },
+    })
+  ).current;
+
+  return (
+    <Modal
+      visible={mounted}
+      transparent
+      animationType='none'
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <View style={styles.root}>
+        <Animated.View style={[styles.backdrop, { opacity: backdrop }]}>
+          {/* Absorbs taps; only dismisses when backdrop dismissal is enabled. */}
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            onPress={closeOnBackdropPress ? onClose : undefined}
+          />
+        </Animated.View>
+
+        <Animated.View style={[styles.sheet, { transform: [{ translateY }] }]}>
+          <View style={styles.handleArea} {...panResponder.panHandlers}>
+            <View style={styles.handle} />
+          </View>
+          {children}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, justifyContent: 'flex-end' },
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(15,23,42,0.45)' },
+  sheet: {
+    backgroundColor: '#ffffff',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingHorizontal: 20,
+    paddingBottom: 32,
+    maxHeight: '92%',
+  },
+  handleArea: { alignItems: 'center', paddingTop: 10, paddingBottom: 6 },
+  handle: { width: 40, height: 5, borderRadius: 3, backgroundColor: '#CBD5E1' },
+});

package/src/components/icons.tsx

@@ -0,0 +1,90 @@
+import Svg, { Path, Circle } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+/** ClockPay brandmark. */
+export function LogoIcon({ size = 16 }: IconProps) {
+  const height = size;
+  const width = (23 / 28) * size;
+  return (
+    <Svg width={width} height={height} viewBox='0 0 23 28' fill='none'>
+      <Path d='M22.7193 20.6621H6.78613V27.548H22.7193V20.6621Z' fill='#26A9E1' />
+      <Path
+        d='M11.3619 15.9327C12.5385 15.9327 13.4923 14.9649 13.4923 13.7711C13.4923 12.5772 12.5385 11.6094 11.3619 11.6094C10.1854 11.6094 9.23157 12.5772 9.23157 13.7711C9.23157 14.9649 10.1854 15.9327 11.3619 15.9327Z'
+        fill='#26A9E1'
+      />
+      <Path d='M22.7193 0V6.88589H6.79088V20.6577H0V0H22.7193Z' fill='#26A9E1' />
+    </Svg>
+  );
+}
+
+export function CloseIcon({ size = 24, color = '#1E1E1E' }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 32 32' fill='none'>
+      <Path
+        d='M20 12L12 19.9995M20 20L12 12.0005'
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <Path
+        d='M3.33325 15.9999C3.33325 10.0288 3.33325 7.04324 5.18824 5.18824C7.04324 3.33325 10.0288 3.33325 15.9999 3.33325C21.971 3.33325 24.9566 3.33325 26.8117 5.18824C28.6666 7.04324 28.6666 10.0288 28.6666 15.9999C28.6666 21.971 28.6666 24.9566 26.8117 26.8117C24.9566 28.6666 21.971 28.6666 15.9999 28.6666C10.0288 28.6666 7.04324 28.6666 5.18824 26.8117C3.33325 24.9566 3.33325 21.971 3.33325 15.9999Z'
+        stroke={color}
+        strokeWidth={2}
+      />
+    </Svg>
+  );
+}
+
+export function CopyIcon({ size = 18, color = '#27AAE1' }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 20 21' fill='none'>
+      <Path
+        d='M7.5 13C7.5 10.643 7.5 9.4645 8.23223 8.73223C8.9645 8 10.143 8 12.5 8H13.3333C15.6903 8 16.8688 8 17.6011 8.73223C18.3333 9.4645 18.3333 10.643 18.3333 13V13.8333C18.3333 16.1903 18.3333 17.3688 17.6011 18.1011C16.8688 18.8333 15.6903 18.8333 13.3333 18.8333H12.5C10.143 18.8333 8.9645 18.8333 8.23223 18.1011C7.5 17.3688 7.5 16.1903 7.5 13.8333V13Z'
+        stroke={color}
+        strokeWidth={1.25}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <Path
+        d='M14.1664 8.00033C14.1644 5.53608 14.1272 4.25967 13.4098 3.38568C13.2713 3.2169 13.1166 3.06214 12.9478 2.92363C12.0258 2.16699 10.6561 2.16699 7.9165 2.16699C5.17694 2.16699 3.80715 2.16699 2.8852 2.92363C2.71641 3.06213 2.56165 3.2169 2.42314 3.38568C1.6665 4.30764 1.6665 5.67743 1.6665 8.41699C1.6665 11.1566 1.6665 12.5263 2.42314 13.4483C2.56165 13.6171 2.71641 13.7718 2.8852 13.9103C3.75918 14.6277 5.0356 14.6649 7.49984 14.6669'
+        stroke={color}
+        strokeWidth={1.25}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+}
+
+export function InfoIcon({ size = 16 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 12 12' fill='none'>
+      <Path
+        d='M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z'
+        fill='#9DAAD2'
+      />
+      <Path d='M6 8V6' stroke='#FAFBFF' strokeLinecap='round' strokeLinejoin='round' />
+      <Path d='M6 4H6.005' stroke='#FAFBFF' strokeLinecap='round' strokeLinejoin='round' />
+    </Svg>
+  );
+}
+
+export function CheckIcon({ size = 48 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
+      <Circle cx={12} cy={12} r={10} fill='#22c55e' />
+      <Path
+        d='M8 12.5L11 15.5L16 9.5'
+        stroke='#fff'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  );
+}

package/src/components/payment-button.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { CheckoutData, PaymentButtonProps } from '../types';
+import { ClockPayClient } from '../api/client';
+import { resolveTheme } from '../internal/theme';
+import { PaymentSheet } from './payment-sheet';
+import { LogoIcon } from './icons';
+
+/**
+ * Drop-in payment button for React Native. Renders a "Pay with Clockpay" trigger
+ * that initiates a checkout and opens a Stripe-style bottom-sheet payment modal.
+ */
+export function PaymentButton({
+  publicKey,
+  clientSecret,
+  appearance,
+  label = 'Pay with Clockpay',
+  disabled,
+  apiBaseUrl,
+  redirectUrl,
+  onSuccess,
+  onError,
+  onClose,
+}: PaymentButtonProps) {
+  const [checkout, setCheckout] = useState<CheckoutData | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const theme = useMemo(() => resolveTheme(appearance), [appearance]);
+
+  const initiate = async () => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const client = new ClockPayClient(publicKey, apiBaseUrl);
+      const response = await client.initiatePayment(clientSecret);
+      setCheckout(response.data);
+      setVisible(true);
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error('Payment initialization failed.'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClosed = () => {
+    setCheckout(null);
+    onClose?.();
+  };
+
+  return (
+    <View>
+      <TouchableOpacity
+        activeOpacity={0.8}
+        disabled={disabled || loading}
+        onPress={initiate}
+        style={[
+          styles.button,
+          {
+            backgroundColor: theme.buttonBg,
+            borderColor: theme.buttonBorder,
+            borderRadius: theme.radius,
+            opacity: disabled || loading ? 0.6 : 1,
+          },
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator size='small' color={theme.buttonFg} />
+        ) : (
+          <>
+            <LogoIcon size={16} />
+            {typeof label === 'string' ? (
+              <Text style={[styles.label, { color: theme.buttonFg, fontFamily: theme.fontFamily }]}>
+                {label}
+              </Text>
+            ) : (
+              label
+            )}
+          </>
+        )}
+      </TouchableOpacity>
+
+      {checkout && (
+        <PaymentSheet
+          visible={visible}
+          checkout={checkout}
+          publicKey={publicKey}
+          apiBaseUrl={apiBaseUrl}
+          theme={theme}
+          redirectUrl={redirectUrl}
+          onRequestClose={() => setVisible(false)}
+          onClosed={handleClosed}
+          onSuccess={onSuccess}
+          onError={onError}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    borderWidth: 2,
+  },
+  label: { fontSize: 15, fontWeight: '600' },
+});

package/src/components/payment-sheet.tsx

@@ -0,0 +1,149 @@
+import { useMemo, useState } from 'react';
+import { Linking, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import type { CheckoutData, VerifyCryptoResponse } from '../types';
+import type { ResolvedTheme } from '../internal/theme';
+import { COUNTDOWN_SECONDS } from '../internal/constants';
+import { resolveNetworkCode } from '../internal/format';
+import { ClockPayClient } from '../api/client';
+import { useCountdown } from '../hooks/use-countdown';
+import { BottomSheet } from './bottom-sheet';
+import { CloseIcon, LogoIcon } from './icons';
+import { TransferView } from './views/transfer-view';
+import { VerifyView } from './views/verify-view';
+import { StatusView } from './views/status-view';
+
+type Step = 'pay' | 'verify' | 'status';
+
+interface PaymentSheetProps {
+  visible: boolean;
+  checkout: CheckoutData;
+  publicKey: string;
+  apiBaseUrl?: string;
+  theme: ResolvedTheme;
+  redirectUrl?: string;
+  onRequestClose: () => void;
+  onClosed: () => void;
+  onSuccess?: (data: VerifyCryptoResponse) => void;
+  onError?: (error: Error) => void;
+}
+
+export function PaymentSheet({
+  visible,
+  checkout,
+  publicKey,
+  apiBaseUrl,
+  theme,
+  redirectUrl,
+  onRequestClose,
+  onClosed,
+  onSuccess,
+  onError,
+}: PaymentSheetProps) {
+  const [step, setStep] = useState<Step>('pay');
+  const [busy, setBusy] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { formatted, expired } = useCountdown(COUNTDOWN_SECONDS);
+
+  const client = useMemo(
+    () => new ClockPayClient(publicKey, apiBaseUrl),
+    [publicKey, apiBaseUrl]
+  );
+
+  const startVerification = async (trxHash: string) => {
+    setStep('status');
+    setBusy(true);
+    setError(null);
+    try {
+      const data = await client.verifyCrypto({
+        reference: checkout.reference,
+        trxHash,
+        code: resolveNetworkCode(checkout.network, checkout.networkCode),
+      });
+      setSuccess(true);
+      onSuccess?.(data);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Verification failed.');
+      setError(e.message);
+      onError?.(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleClosed = () => {
+    onClosed();
+    if (success && redirectUrl) Linking.openURL(redirectUrl).catch(() => {});
+  };
+
+  return (
+    <BottomSheet
+      visible={visible}
+      onClose={onRequestClose}
+      onClosed={handleClosed}
+      closeOnBackdropPress={false}
+    >
+      <View style={styles.header}>
+        <LogoIcon size={18} />
+        <Text style={[styles.title, { color: theme.accent }]}>Pay with Clockpay</Text>
+        <Pressable
+          onPress={onRequestClose}
+          style={styles.cancel}
+          hitSlop={8}
+          accessibilityRole='button'
+          accessibilityLabel='Cancel'
+        >
+          <CloseIcon size={22} />
+        </Pressable>
+      </View>
+
+      <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
+        {step === 'pay' && (
+          <View style={styles.card}>
+            <Text style={styles.muted}>Total amount to be paid</Text>
+            <Text style={styles.amount}>
+              {checkout.amount}
+              {checkout.coin?.toUpperCase()}
+            </Text>
+            <TransferView
+              checkout={checkout}
+              theme={theme}
+              formattedTime={formatted}
+              expired={expired}
+              onNext={() => setStep('verify')}
+            />
+          </View>
+        )}
+
+        {step === 'verify' && (
+          <VerifyView theme={theme} busy={busy} onSubmit={startVerification} />
+        )}
+
+        {step === 'status' && (
+          <StatusView
+            theme={theme}
+            busy={busy}
+            success={success}
+            error={error}
+            onClose={onRequestClose}
+          />
+        )}
+      </ScrollView>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, paddingBottom: 16 },
+  title: { fontSize: 16, fontWeight: '700' },
+  cancel: { position: 'absolute', right: 0, top: -2, padding: 4 },
+  card: {
+    borderWidth: 1,
+    borderColor: '#edf1f6',
+    borderRadius: 16,
+    padding: 20,
+    alignItems: 'center',
+  },
+  muted: { fontSize: 13, color: '#94a3b8' },
+  amount: { fontSize: 24, fontWeight: '700', color: '#000', marginTop: 4 },
+});

package/src/components/views/status-view.tsx

@@ -0,0 +1,61 @@
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { ResolvedTheme } from '../../internal/theme';
+import { CheckIcon } from '../icons';
+
+interface StatusViewProps {
+  theme: ResolvedTheme;
+  busy: boolean;
+  success: boolean;
+  error: string | null;
+  onClose: () => void;
+}
+
+/** Terminal step: processing spinner, success confirmation, or an error. */
+export function StatusView({ theme, busy, success, error, onClose }: StatusViewProps) {
+  if (busy) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size='large' color={theme.accent} />
+        <Text style={styles.muted}>Please wait while we verify your transaction…</Text>
+      </View>
+    );
+  }
+
+  if (success) {
+    return (
+      <View style={styles.center}>
+        <CheckIcon size={48} />
+        <Text style={styles.title}>Payment received!</Text>
+        <Text style={styles.muted}>You can safely close this window.</Text>
+        <TouchableOpacity
+          style={[styles.primaryBtn, { backgroundColor: theme.accent, borderRadius: theme.radius }]}
+          onPress={onClose}
+        >
+          <Text style={styles.primaryBtnText}>Close</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.center}>
+      <Text style={styles.title}>Verification failed</Text>
+      <Text style={styles.error}>{error ?? 'We could not verify your transaction.'}</Text>
+      <TouchableOpacity
+        style={[styles.primaryBtn, { backgroundColor: theme.accent, borderRadius: theme.radius }]}
+        onPress={onClose}
+      >
+        <Text style={styles.primaryBtnText}>Close</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { alignItems: 'center', paddingVertical: 24, gap: 8 },
+  title: { fontSize: 18, fontWeight: '700', color: '#000', marginTop: 8 },
+  muted: { fontSize: 13, color: '#94a3b8', textAlign: 'center' },
+  error: { fontSize: 13, color: '#ef4444', textAlign: 'center' },
+  primaryBtn: { width: '100%', paddingVertical: 15, alignItems: 'center', marginTop: 16 },
+  primaryBtnText: { fontSize: 16, fontWeight: '600', color: '#fff' },
+});

package/src/components/views/transfer-view.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import Clipboard from '@react-native-clipboard/clipboard';
+import type { CheckoutData } from '../../types';
+import type { ResolvedTheme } from '../../internal/theme';
+import { CopyIcon, InfoIcon } from '../icons';
+
+interface TransferViewProps {
+  checkout: CheckoutData;
+  theme: ResolvedTheme;
+  formattedTime: string;
+  expired: boolean;
+  onNext: () => void;
+}
+
+/** Manual-transfer flow: QR + deposit address + notes + countdown. */
+export function TransferView({
+  checkout,
+  theme,
+  formattedTime,
+  expired,
+  onNext,
+}: TransferViewProps) {
+  const [copied, setCopied] = useState(false);
+  const coin = checkout.coin?.toUpperCase() ?? '';
+
+  const copyAddress = () => {
+    Clipboard.setString(checkout.address);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.qr, { borderColor: theme.accent }]}>
+        <QRCode value={checkout.address} size={108} />
+      </View>
+
+      <Text style={styles.addressLabel}>Address:</Text>
+      <Text style={styles.address}>{checkout.address}</Text>
+
+      <TouchableOpacity style={styles.copyRow} onPress={copyAddress}>
+        <Text style={[styles.copyText, { color: theme.accent }]}>
+          {copied ? 'Copied!' : 'Copy'}
+        </Text>
+        <CopyIcon size={18} color={theme.accent} />
+      </TouchableOpacity>
+
+      <View style={styles.note}>
+        <View style={styles.noteRow}>
+          <InfoIcon size={16} />
+          <Text style={styles.noteText}>
+            Only send {coin} ({checkout.networkCode}) assets to this address. Other
+            assets will be lost forever.
+          </Text>
+        </View>
+        <View style={styles.noteRow}>
+          <InfoIcon size={16} />
+          <Text style={styles.noteText}>
+            When you make a transfer, you'll paste the transaction hash on the next
+            screen.
+          </Text>
+        </View>
+      </View>
+
+      <Text style={styles.timer}>{formattedTime}</Text>
+
+      <TouchableOpacity
+        style={[
+          styles.primaryBtn,
+          { backgroundColor: expired ? '#dff0f7' : theme.accent, borderRadius: theme.radius },
+        ]}
+        disabled={expired}
+        onPress={onNext}
+      >
+        <Text style={[styles.primaryBtnText, { color: expired ? '#9ca3af' : '#fff' }]}>
+          Next
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'center' },
+  qr: { borderWidth: 1, borderStyle: 'dashed', borderRadius: 8, padding: 10, marginVertical: 12 },
+  addressLabel: { fontSize: 13, fontWeight: '700', color: '#64748b' },
+  address: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#64748b',
+    textAlign: 'center',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  copyRow: { flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 16 },
+  copyText: { fontSize: 13, fontWeight: '700' },
+  note: {
+    width: '100%',
+    backgroundColor: '#eefaff',
+    borderRadius: 8,
+    padding: 16,
+    gap: 8,
+    marginBottom: 16,
+  },
+  noteRow: { flexDirection: 'row', gap: 8 },
+  noteText: { flex: 1, color: '#7785b0', fontSize: 12, lineHeight: 18 },
+  timer: { color: '#3bc5ff', fontSize: 14, marginBottom: 12 },
+  primaryBtn: { width: '100%', paddingVertical: 15, alignItems: 'center' },
+  primaryBtnText: { fontSize: 16, fontWeight: '600' },
+});