@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/icon/FAIRWalletIcon.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface FAIRWalletIconProps {
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare const FAIRWalletIcon: React.FC<FAIRWalletIconProps>;
+export default FAIRWalletIcon;

package/src/ui/components/icon/FAIRWalletIcon.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const FAIRWalletIcon = ({ size = 28, style }) => {
+    const containerSize = size + 18;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.circle,
+            { width: containerSize, height: containerSize, borderRadius: containerSize / 2 },
+            style,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.default, { viewBox: "0 0 157.26 85.66", width: containerSize * 0.8, height: containerSize * 0.8, preserveAspectRatio: "xMidYMid meet", children: (0, jsx_runtime_1.jsx)(react_native_svg_1.G, { "data-name": "Layer 2", children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.G, { "data-name": "Layer 1", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M10.25,20.81a20.49,20.49,0,0,1,28,7.5L53.6,54.92a20.49,20.49,0,0,1-7.5,28h0a20.49,20.49,0,0,1-28-7.5L2.75,48.8a20.49,20.49,0,0,1,7.5-28Z", fill: "rgb(159, 251, 80)" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M74.38,2.75a20.49,20.49,0,0,0-28,7.5L20.6,54.92a20.5,20.5,0,0,0,7.5,28h0a20.5,20.5,0,0,0,28-7.5L81.88,30.74a20.48,20.48,0,0,0-7.5-28Z", fill: "rgb(159, 251, 80)" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M127.87,2.75a20.49,20.49,0,0,0-28,7.5L74.09,54.92a20.49,20.49,0,0,0,7.5,28h0a20.49,20.49,0,0,0,28-7.5l25.79-44.67a20.49,20.49,0,0,0-7.5-28Z", fill: "rgb(255, 255, 255)" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M121.84,67.51a17.71,17.71,0,1,1,17.71,17.71,17.71,17.71,0,0,1-17.71-17.71Z", fill: "rgb(255, 255, 255)" })] }) }) }) }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    circle: {
+        backgroundColor: '#1b1f0a',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+exports.default = FAIRWalletIcon;

package/src/ui/components/icon/OxyIcon.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+export interface IconProps {
+    name: string;
+    size?: number;
+    color?: string;
+    style?: Record<string, unknown>;
+}
+declare const OxyIcon: React.FC<IconProps>;
+export default OxyIcon;

package/src/ui/components/icon/OxyIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const OxyIcon = ({ name, size = 24, color = '#000', style }) => {
+    // Icon name is already properly typed as IoniconsGlyphs
+    return ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: name, size: size, color: color, style: style }));
+};
+exports.default = OxyIcon;

package/src/ui/components/icon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OxyIcon } from './OxyIcon';
+export { default as FAIRWalletIcon } from './FAIRWalletIcon';
+export type { IconProps } from './OxyIcon';

package/src/ui/components/icon/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FAIRWalletIcon = exports.OxyIcon = void 0;
+var OxyIcon_1 = require("./OxyIcon");
+Object.defineProperty(exports, "OxyIcon", { enumerable: true, get: function () { return __importDefault(OxyIcon_1).default; } });
+var FAIRWalletIcon_1 = require("./FAIRWalletIcon");
+Object.defineProperty(exports, "FAIRWalletIcon", { enumerable: true, get: function () { return __importDefault(FAIRWalletIcon_1).default; } });

package/src/ui/components/index.d.ts

@@ -0,0 +1,16 @@
+export { default as ProfileCard } from './ProfileCard';
+export { default as Section } from './Section';
+export { default as SectionTitle } from './SectionTitle';
+export { default as GroupedItem } from './GroupedItem';
+export { default as GroupedSection } from './GroupedSection';
+export { default as QuickActions } from './QuickActions';
+export { default as Header, getHeaderHeight } from './Header';
+export { default as LoadingState } from './LoadingState';
+export { default as EmptyState } from './EmptyState';
+export { default as SettingRow } from './SettingRow';
+export { default as Avatar } from './Avatar';
+export { default as FollowButton } from './FollowButton';
+export { FontLoader, setupFonts } from './FontLoader';
+export { default as OxyLogo } from './OxyLogo';
+export { default as OxySignInButton } from './OxySignInButton';
+export { default as OxyPayButton } from './OxyPayButton';

package/src/ui/components/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OxyPayButton = exports.OxySignInButton = exports.OxyLogo = exports.setupFonts = exports.FontLoader = exports.FollowButton = exports.Avatar = exports.SettingRow = exports.EmptyState = exports.LoadingState = exports.getHeaderHeight = exports.Header = exports.QuickActions = exports.GroupedSection = exports.GroupedItem = exports.SectionTitle = exports.Section = exports.ProfileCard = void 0;
+// Re-export all reusable UI components
+var ProfileCard_1 = require("./ProfileCard");
+Object.defineProperty(exports, "ProfileCard", { enumerable: true, get: function () { return __importDefault(ProfileCard_1).default; } });
+var Section_1 = require("./Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
+var SectionTitle_1 = require("./SectionTitle");
+Object.defineProperty(exports, "SectionTitle", { enumerable: true, get: function () { return __importDefault(SectionTitle_1).default; } });
+var GroupedItem_1 = require("./GroupedItem");
+Object.defineProperty(exports, "GroupedItem", { enumerable: true, get: function () { return __importDefault(GroupedItem_1).default; } });
+var GroupedSection_1 = require("./GroupedSection");
+Object.defineProperty(exports, "GroupedSection", { enumerable: true, get: function () { return __importDefault(GroupedSection_1).default; } });
+var QuickActions_1 = require("./QuickActions");
+Object.defineProperty(exports, "QuickActions", { enumerable: true, get: function () { return __importDefault(QuickActions_1).default; } });
+var Header_1 = require("./Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+Object.defineProperty(exports, "getHeaderHeight", { enumerable: true, get: function () { return Header_1.getHeaderHeight; } });
+var LoadingState_1 = require("./LoadingState");
+Object.defineProperty(exports, "LoadingState", { enumerable: true, get: function () { return __importDefault(LoadingState_1).default; } });
+var EmptyState_1 = require("./EmptyState");
+Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return __importDefault(EmptyState_1).default; } });
+var SettingRow_1 = require("./SettingRow");
+Object.defineProperty(exports, "SettingRow", { enumerable: true, get: function () { return __importDefault(SettingRow_1).default; } });
+// Re-export existing components
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(Avatar_1).default; } });
+var FollowButton_1 = require("./FollowButton");
+Object.defineProperty(exports, "FollowButton", { enumerable: true, get: function () { return __importDefault(FollowButton_1).default; } });
+var FontLoader_1 = require("./FontLoader");
+Object.defineProperty(exports, "FontLoader", { enumerable: true, get: function () { return FontLoader_1.FontLoader; } });
+Object.defineProperty(exports, "setupFonts", { enumerable: true, get: function () { return FontLoader_1.setupFonts; } });
+var OxyLogo_1 = require("./OxyLogo");
+Object.defineProperty(exports, "OxyLogo", { enumerable: true, get: function () { return __importDefault(OxyLogo_1).default; } });
+var OxySignInButton_1 = require("./OxySignInButton");
+Object.defineProperty(exports, "OxySignInButton", { enumerable: true, get: function () { return __importDefault(OxySignInButton_1).default; } });
+var OxyPayButton_1 = require("./OxyPayButton");
+Object.defineProperty(exports, "OxyPayButton", { enumerable: true, get: function () { return __importDefault(OxyPayButton_1).default; } });

package/src/ui/components/internal/GroupedPillButtons.d.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+interface ButtonConfig {
+    text: string;
+    onPress: () => void;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'transparent';
+    disabled?: boolean;
+    loading?: boolean;
+    testID?: string;
+}
+interface GroupedPillButtonColors {
+    primary: string;
+    secondary?: string;
+    border: string;
+    text: string;
+}
+interface GroupedPillButtonsProps {
+    buttons: ButtonConfig[];
+    colors: GroupedPillButtonColors;
+    gap?: number;
+}
+declare const GroupedPillButtons: React.FC<GroupedPillButtonsProps>;
+export default GroupedPillButtons;

package/src/ui/components/internal/GroupedPillButtons.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const GroupedPillButtons = ({ buttons, colors, gap = 8, }) => {
+    const getButtonStyle = (button, index, totalButtons) => {
+        const baseStyle = {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 6,
+            paddingHorizontal: 12,
+            gap: 6,
+            minWidth: 70,
+            borderWidth: 1,
+            flexShrink: 0,
+        };
+        // Determine border radius based on position
+        let borderRadius = {
+            borderTopLeftRadius: 35,
+            borderBottomLeftRadius: 35,
+            borderTopRightRadius: 35,
+            borderBottomRightRadius: 35,
+        };
+        if (totalButtons > 1) {
+            if (index === 0) {
+                // First button
+                borderRadius = {
+                    borderTopLeftRadius: 35,
+                    borderBottomLeftRadius: 35,
+                    borderTopRightRadius: 12,
+                    borderBottomRightRadius: 12,
+                };
+            }
+            else if (index === totalButtons - 1) {
+                // Last button
+                borderRadius = {
+                    borderTopLeftRadius: 12,
+                    borderBottomLeftRadius: 12,
+                    borderTopRightRadius: 35,
+                    borderBottomRightRadius: 35,
+                };
+            }
+            else {
+                // Middle button (if 3 buttons)
+                borderRadius = {
+                    borderTopLeftRadius: 12,
+                    borderBottomLeftRadius: 12,
+                    borderTopRightRadius: 12,
+                    borderBottomRightRadius: 12,
+                };
+            }
+        }
+        // Determine colors based on variant
+        let backgroundColor = 'transparent';
+        let borderColor = colors.border;
+        const isDisabled = button.disabled || button.loading;
+        switch (button.variant) {
+            case 'primary':
+                backgroundColor = isDisabled ? '#CCCCCC' : colors.primary;
+                borderColor = isDisabled ? '#CCCCCC' : colors.primary;
+                break;
+            case 'secondary':
+                backgroundColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
+                borderColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
+                break;
+            default:
+                backgroundColor = 'transparent';
+                borderColor = isDisabled ? '#CCCCCC' : colors.border;
+                break;
+        }
+        return {
+            ...baseStyle,
+            ...borderRadius,
+            backgroundColor,
+            borderColor,
+            opacity: isDisabled ? 0.6 : 1,
+        };
+    };
+    const getTextStyle = (button, colors) => {
+        const baseTextStyle = {
+            fontSize: 15,
+            fontWeight: '600',
+            // Avoid stretching that can cause wraps on native
+            flexShrink: 1,
+        };
+        const isDisabled = button.disabled || button.loading;
+        let textColor = colors.text;
+        switch (button.variant) {
+            case 'primary':
+            case 'secondary':
+                textColor = isDisabled ? '#999999' : '#FFFFFF';
+                break;
+            default:
+                textColor = isDisabled ? '#999999' : colors.text;
+                break;
+        }
+        return {
+            ...baseTextStyle,
+            color: textColor,
+            ...(react_native_1.Platform.OS === 'web' ? { whiteSpace: 'nowrap' } : null),
+        };
+    };
+    const getIconColor = (button, colors) => {
+        const isDisabled = button.disabled || button.loading;
+        switch (button.variant) {
+            case 'primary':
+            case 'secondary':
+                return isDisabled ? '#999999' : '#FFFFFF';
+            default:
+                return isDisabled ? '#999999' : colors.text;
+        }
+    };
+    const isBackButton = (button) => {
+        const text = typeof button.text === 'string' ? button.text.toLowerCase() : '';
+        return text.includes('back') ||
+            button.icon === 'arrow-back' ||
+            button.icon === 'chevron-back';
+    };
+    const renderButtonContent = (button, colors, index) => {
+        const iconColor = getIconColor(button, colors);
+        const isBack = isBackButton(button);
+        const isFirstButton = index === 0;
+        const isSingleButton = buttons.length === 1;
+        if (button.loading) {
+            return ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: iconColor, size: "small" }));
+        }
+        // Auto-detect icon placement based on button order and type
+        if (isSingleButton) {
+            // Single button: icon on right
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: getTextStyle(button, colors), numberOfLines: 1, ellipsizeMode: "tail", children: button.text }), button.icon && ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: button.icon, size: 16, color: iconColor }))] }));
+        }
+        if (isFirstButton || isBack) {
+            // First button or back button: icon on left, text on right
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [button.icon && ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: button.icon, size: 16, color: iconColor })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: getTextStyle(button, colors), numberOfLines: 1, ellipsizeMode: "tail", children: button.text })] }));
+        }
+        // Second button or forward/action button: text on left, icon on right
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: getTextStyle(button, colors), numberOfLines: 1, ellipsizeMode: "tail", children: button.text }), button.icon && ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: button.icon, size: 16, color: iconColor }))] }));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { gap }], children: buttons.map((button, index) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: getButtonStyle(button, index, buttons.length), onPress: button.onPress, disabled: button.disabled || button.loading, testID: button.testID, children: renderButtonContent(button, colors, index) }, index))) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        width: '100%',
+    },
+});
+exports.default = GroupedPillButtons;

package/src/ui/components/internal/PinInput.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface PinInputColors {
+    primary: string;
+    secondary?: string;
+    background: string;
+    inputBackground: string;
+    text: string;
+    border: string;
+}
+export interface PinInputProps {
+    value: string;
+    onChange: (val: string) => void;
+    length?: number;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    colors: PinInputColors;
+}
+export interface PinInputHandle {
+    focus: () => void;
+}
+declare const PinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<PinInputHandle>>;
+export default PinInput;

package/src/ui/components/internal/PinInput.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const PinInput = (0, react_1.forwardRef)(({ value, onChange, length = 6, disabled, autoFocus, colors }, ref) => {
+    const inputs = (0, react_1.useRef)([]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus: () => {
+            inputs.current[0]?.focus();
+        }
+    }), []);
+    const handleChange = (text, idx) => {
+        if (!/^[0-9]*$/.test(text))
+            return;
+        let newValue = value.split('');
+        if (text.length > 1) {
+            // Paste or autofill
+            newValue = text.split('').slice(0, length);
+            onChange(newValue.join(''));
+            if (newValue.length < length) {
+                inputs.current[newValue.length]?.focus();
+            }
+            return;
+        }
+        newValue[idx] = text;
+        const joined = newValue.join('').slice(0, length);
+        onChange(joined);
+        if (text && idx < length - 1) {
+            inputs.current[idx + 1]?.focus();
+        }
+    };
+    const handleKeyPress = (e, idx) => {
+        if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
+            inputs.current[idx - 1]?.focus();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.pinContainer, children: Array.from({ length }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: (ref) => { inputs.current[idx] = ref; }, style: [
+                styles.pinInput,
+                { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground },
+                value[idx] ? { borderWidth: 2 } : { borderWidth: 1 },
+            ], value: value[idx] || '', onChangeText: text => handleChange(text, idx), onKeyPress: e => handleKeyPress(e, idx), keyboardType: react_native_1.Platform.OS === 'ios' ? 'number-pad' : 'numeric', maxLength: 1, editable: !disabled, autoFocus: autoFocus && idx === 0, textAlign: "center", selectionColor: colors.primary, returnKeyType: "done" }, `pin-input-${idx}`))) }));
+});
+const styles = react_native_1.StyleSheet.create({
+    pinContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 12,
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    pinInput: {
+        width: 44,
+        height: 54,
+        borderRadius: 12,
+        borderWidth: 1,
+        fontSize: 28,
+        fontWeight: '600',
+        backgroundColor: '#F5F5F5',
+        textAlign: 'center',
+        marginHorizontal: 2,
+        ...react_native_1.Platform.select({
+            web: {
+                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
+            },
+            default: {
+                shadowColor: '#000',
+                shadowOpacity: 0.04,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 4,
+                elevation: 1,
+            }
+        }),
+    },
+});
+exports.default = PinInput;

package/src/ui/components/modals/DeleteAccountModal.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+interface DeleteAccountModalProps {
+    visible: boolean;
+    username: string;
+    onClose: () => void;
+    onDelete: (password: string) => Promise<void>;
+    colors: {
+        background: string;
+        text: string;
+        secondaryText: string;
+        border: string;
+        danger: string;
+        inputBackground: string;
+    };
+    t: (key: string, params?: Record<string, string>) => string | undefined;
+}
+declare const DeleteAccountModal: React.FC<DeleteAccountModalProps>;
+export default DeleteAccountModal;

package/src/ui/components/modals/DeleteAccountModal.js

@@ -0,0 +1,154 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const OxyIcon_1 = __importDefault(require("../icon/OxyIcon"));
+const DeleteAccountModal = ({ visible, username, onClose, onDelete, colors, t, }) => {
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [confirmUsername, setConfirmUsername] = (0, react_1.useState)('');
+    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const isValid = password.length > 0 && confirmUsername === username;
+    const handleDelete = (0, react_1.useCallback)(async () => {
+        if (!isValid)
+            return;
+        setError(null);
+        setIsDeleting(true);
+        try {
+            await onDelete(password);
+            // Modal will be closed by parent on success
+        }
+        catch (err) {
+            setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    }, [isValid, password, onDelete, t]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        if (isDeleting)
+            return;
+        setPassword('');
+        setConfirmUsername('');
+        setError(null);
+        onClose();
+    }, [isDeleting, onClose]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: handleClose, children: (0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', style: styles.overlay, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.backdrop, activeOpacity: 1, onPress: handleClose }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.modal, { backgroundColor: colors.background }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "alert", size: 32, color: colors.danger }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: colors.danger }], children: t('deleteAccount.title') || 'Delete Account' })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.warning, { color: colors.text }], children: t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.' }), error && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.errorContainer, { backgroundColor: `${colors.danger}20` }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, { color: colors.danger }], children: error }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: colors.secondaryText }], children: t('deleteAccount.passwordLabel') || 'Enter your password' }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.inputContainer, { borderColor: colors.border, backgroundColor: colors.inputBackground }], children: [(0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, { color: colors.text }], value: password, onChangeText: setPassword, placeholder: t('deleteAccount.passwordPlaceholder') || 'Password', placeholderTextColor: colors.secondaryText, secureTextEntry: !showPassword, autoCapitalize: "none", editable: !isDeleting }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles.eyeButton, children: (0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: showPassword ? 'eye-off' : 'eye', size: 20, color: colors.secondaryText }) })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: colors.secondaryText }], children: t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm` }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+                                        styles.input,
+                                        styles.confirmInput,
+                                        {
+                                            borderColor: confirmUsername === username ? '#34C759' : colors.border,
+                                            backgroundColor: colors.inputBackground,
+                                            color: colors.text,
+                                        },
+                                    ], value: confirmUsername, onChangeText: setConfirmUsername, placeholder: username, placeholderTextColor: colors.secondaryText, autoCapitalize: "none", autoCorrect: false, editable: !isDeleting })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.buttons, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.button, styles.cancelButton, { borderColor: colors.border }], onPress: handleClose, disabled: isDeleting, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.buttonText, { color: colors.text }], children: t('common.cancel') || 'Cancel' }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                        styles.button,
+                                        styles.deleteButton,
+                                        { backgroundColor: isValid ? colors.danger : `${colors.danger}50` },
+                                    ], onPress: handleDelete, disabled: !isValid || isDeleting, children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#fff", size: "small" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.deleteButtonText, children: t('deleteAccount.confirm') || 'Delete Forever' })) })] })] })] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    backdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    modal: {
+        width: '90%',
+        maxWidth: 400,
+        borderRadius: 16,
+        padding: 24,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+        gap: 12,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+    },
+    warning: {
+        fontSize: 14,
+        lineHeight: 20,
+        marginBottom: 20,
+    },
+    errorContainer: {
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+    },
+    errorText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    inputGroup: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 13,
+        marginBottom: 8,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderRadius: 8,
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+    confirmInput: {
+        borderWidth: 1,
+        borderRadius: 8,
+    },
+    eyeButton: {
+        padding: 12,
+    },
+    buttons: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 8,
+    },
+    button: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    cancelButton: {
+        borderWidth: 1,
+    },
+    deleteButton: {
+        minHeight: 48,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    deleteButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#fff',
+    },
+});
+exports.default = DeleteAccountModal;

package/src/ui/components/modals/index.d.ts

@@ -0,0 +1 @@
+export { default as DeleteAccountModal } from './DeleteAccountModal';

package/src/ui/components/modals/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteAccountModal = void 0;
+var DeleteAccountModal_1 = require("./DeleteAccountModal");
+Object.defineProperty(exports, "DeleteAccountModal", { enumerable: true, get: function () { return __importDefault(DeleteAccountModal_1).default; } });

package/src/ui/components/payment/PaymentDetailsStep.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
+interface PaymentDetailsStepProps {
+    paymentMethod: string;
+    cardDetails: CardDetails;
+    onCardDetailsChange: (details: CardDetails) => void;
+    colors: PaymentColors;
+    animations: PaymentStepAnimations;
+    faircoinAddress: string;
+    isMobile: boolean;
+    qrSize: number;
+    onBack: () => void;
+    onNext: () => void;
+    QRCodeComponent?: React.ComponentType<{
+        value?: string;
+        size?: number;
+    }>;
+}
+declare const PaymentDetailsStep: React.FC<PaymentDetailsStepProps>;
+export default PaymentDetailsStep;