@clockpay/react-native 1.0.0

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

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import type { ResolvedTheme } from '../../internal/theme';
+
+interface VerifyViewProps {
+  theme: ResolvedTheme;
+  busy: boolean;
+  onSubmit: (trxHash: string) => void;
+}
+
+/** Step where the buyer pastes their transaction hash to confirm the transfer. */
+export function VerifyView({ theme, busy, onSubmit }: VerifyViewProps) {
+  const [hash, setHash] = useState('');
+  const trimmed = hash.trim();
+  const disabled = !trimmed || busy;
+
+  return (
+    <View>
+      <Text style={styles.title}>Verify transaction</Text>
+      <Text style={styles.subtitle}>
+        Enter your transaction hash to confirm the payment.
+      </Text>
+
+      <Text style={styles.label}>
+        Hash <Text style={styles.req}>*</Text>
+      </Text>
+      <TextInput
+        style={styles.input}
+        placeholder='Enter your transaction hash'
+        placeholderTextColor='#9ca3af'
+        value={hash}
+        onChangeText={setHash}
+        autoCapitalize='none'
+        autoCorrect={false}
+      />
+
+      <TouchableOpacity
+        style={[
+          styles.primaryBtn,
+          { backgroundColor: disabled ? '#dff0f7' : theme.accent, borderRadius: theme.radius },
+        ]}
+        disabled={disabled}
+        onPress={() => onSubmit(trimmed)}
+      >
+        <Text style={[styles.primaryBtnText, { color: disabled ? '#9ca3af' : '#fff' }]}>
+          {busy ? 'Verifying…' : 'Confirm transaction'}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: { fontSize: 16, fontWeight: '700', color: '#1e1e1e', textAlign: 'center' },
+  subtitle: { fontSize: 13, color: '#94a3b8', textAlign: 'center', marginTop: 4, marginBottom: 16 },
+  label: { fontSize: 14, fontWeight: '500', color: '#1e1e1e', marginBottom: 6 },
+  req: { color: '#fb7185' },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d9d9d9',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 14,
+    color: '#1e1e1e',
+    marginBottom: 20,
+  },
+  primaryBtn: { width: '100%', paddingVertical: 15, alignItems: 'center' },
+  primaryBtnText: { fontSize: 16, fontWeight: '600' },
+});

package/src/hooks/use-countdown.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { formatTime } from '../internal/format';
+
+/** A simple seconds countdown that stops at zero. */
+export function useCountdown(seconds: number) {
+  const [timeLeft, setTimeLeft] = useState(seconds);
+
+  useEffect(() => {
+    if (timeLeft <= 0) return;
+    const id = setInterval(() => setTimeLeft((t) => t - 1), 1000);
+    return () => clearInterval(id);
+  }, [timeLeft]);
+
+  return {
+    timeLeft,
+    formatted: formatTime(timeLeft),
+    expired: timeLeft <= 0,
+    reset: () => setTimeLeft(seconds),
+  };
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { PaymentButton } from './components/payment-button';
+export type {
+  PaymentButtonProps,
+  ClockPayAppearance,
+  ClockPayEnvironment,
+  CheckoutData,
+  CheckoutResponse,
+  VerifyCryptoPayload,
+  VerifyCryptoResponse,
+} from './types';

package/src/internal/constants.ts

@@ -0,0 +1,34 @@
+/** API gateway for test keys (`cpay_test_pk_…`). */
+export const TEST_API_BASE_URL = 'https://api.dev.theclockchain.io/api/v1';
+
+/** API gateway for live keys (`cpay_live_pk_…`). */
+export const LIVE_API_BASE_URL = 'https://api.theclockchain.io/api/v1';
+
+/** ClockPay brand blue. */
+export const DEFAULT_ACCENT = '#27AAE1';
+
+/** How long the buyer has to complete a transfer, in seconds. */
+export const COUNTDOWN_SECONDS = 300;
+
+/**
+ * Picks the API gateway from the public key's environment prefix, unless an
+ * explicit `override` (the `apiBaseUrl` prop) is provided. Unknown prefixes fall
+ * back to the test gateway.
+ */
+export function resolveApiBaseUrl(publicKey: string, override?: string): string {
+  if (override) return override;
+  if (publicKey.startsWith('cpay_live_pk_')) return LIVE_API_BASE_URL;
+  return TEST_API_BASE_URL;
+}
+
+/**
+ * Maps a coin's settlement network to its on-chain id, used when verifying a
+ * crypto transaction. Falls back to the `networkCode` from the checkout payload.
+ */
+export const NETWORK_CODES: Record<string, string> = {
+  eth: '1',
+  optimism: '10',
+  bsc: '56',
+  polygon: '137',
+  tron: '10121',
+};

package/src/internal/format.ts

@@ -0,0 +1,21 @@
+import { NETWORK_CODES } from './constants';
+
+/** Formats a number of seconds as `MM:SS`. */
+export function formatTime(totalSeconds: number): string {
+  const safe = Math.max(0, totalSeconds);
+  const minutes = Math.floor(safe / 60);
+  const seconds = safe % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+/** Resolves the on-chain code used to verify a transaction for a given checkout. */
+export function resolveNetworkCode(network?: string, fallback?: string): string {
+  const key = network?.toLowerCase() ?? '';
+  return NETWORK_CODES[key] ?? fallback ?? '';
+}
+
+/** Truncates a long address for compact display: `0x1234…abcd`. */
+export function truncateMiddle(value: string, lead = 10, tail = 8): string {
+  if (value.length <= lead + tail + 1) return value;
+  return `${value.slice(0, lead)}…${value.slice(-tail)}`;
+}

package/src/internal/theme.ts

@@ -0,0 +1,28 @@
+import type { ClockPayAppearance } from '../types';
+import { DEFAULT_ACCENT } from './constants';
+
+/** Concrete colours/values resolved from an {@link ClockPayAppearance}. */
+export interface ResolvedTheme {
+  accent: string;
+  radius: number;
+  buttonBg: string;
+  buttonFg: string;
+  buttonBorder: string;
+  fontFamily?: string;
+}
+
+/** Resolves an appearance object into concrete style values for the RN UI. */
+export function resolveTheme(appearance?: ClockPayAppearance): ResolvedTheme {
+  const a = appearance ?? {};
+  const variant = a.variant ?? 'outline';
+  const accent = a.buttonColor ?? DEFAULT_ACCENT;
+
+  return {
+    accent: a.modalAccentColor ?? accent,
+    radius: a.borderRadius ?? 8,
+    buttonBg: variant === 'solid' ? accent : '#ffffff',
+    buttonFg: a.buttonTextColor ?? (variant === 'solid' ? '#ffffff' : accent),
+    buttonBorder: accent,
+    fontFamily: a.fontFamily,
+  };
+}

package/src/types.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Visual customization for the ClockPay button and bottom-sheet modal.
+ * Mirrors the web SDK's Stripe-style appearance API.
+ */
+export interface ClockPayAppearance {
+  /** Button fill strategy. Defaults to `'outline'`. */
+  variant?: 'solid' | 'outline';
+  /** Primary brand colour. Defaults to `#27AAE1`. */
+  buttonColor?: string;
+  /** Overrides the button label colour. */
+  buttonTextColor?: string;
+  /** Corner radius for the button and primary actions. Defaults to `8`. */
+  borderRadius?: number;
+  /** Font family applied to SDK surfaces. */
+  fontFamily?: string;
+  /** Accent colour used inside the sheet (QR border, links, timer). Defaults to `buttonColor`. */
+  modalAccentColor?: string;
+}
+
+/** The environment a public key belongs to. */
+export type ClockPayEnvironment = 'test' | 'live';
+
+/** Payload returned by the checkout endpoint and rendered inside the sheet. */
+export interface CheckoutData {
+  reference: string;
+  address: string;
+  network: string;
+  networkCode: string;
+  coin: string;
+  amount: number;
+  contractAddress: string;
+}
+
+export interface CheckoutResponse {
+  message: string;
+  data: CheckoutData;
+}
+
+export interface VerifyCryptoPayload {
+  reference: string;
+  trxHash: string;
+  code: string;
+}
+
+export interface VerifyCryptoResponse {
+  message: string;
+}
+
+/** Props for the public {@link PaymentButton} component. */
+export interface PaymentButtonProps {
+  /** Public key from the business developer dashboard (e.g. `cpay_test_pk_...`). Required. */
+  publicKey: string;
+  /** Client secret returned from your server-side checkout call. Required. */
+  clientSecret: string;
+  /** Visual customization for the button and sheet. */
+  appearance?: ClockPayAppearance;
+  /** Button label. Defaults to "Pay with Clockpay". */
+  label?: ReactNode;
+  /** Disables the button. */
+  disabled?: boolean;
+  /** Override the API base URL. Defaults to the gateway matching the key prefix. */
+  apiBaseUrl?: string;
+  /** URL to open (via Linking) after a successful payment. Optional. */
+  redirectUrl?: string;
+  /** Called once the payment is confirmed on-chain. */
+  onSuccess?: (data: VerifyCryptoResponse) => void;
+  /** Called when initiating or verifying the payment fails. */
+  onError?: (error: Error) => void;
+  /** Called whenever the sheet closes, regardless of outcome. */
+  onClose?: () => void;
+}