@column-org/wallet-sdk 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@column-org/wallet-sdk",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "Column Wallet Mobile Deep-Link SDK for Movement/Aptos ecosystem",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -18,6 +18,10 @@
         "lint": "eslint src/**/*.ts",
         "prepublishOnly": "npm run build"
     },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-native": ">=0.60.0"
+    },
     "keywords": [
         "column",
         "wallet",
@@ -36,6 +40,8 @@
         "tweetnacl": "^1.0.3"
     },
     "devDependencies": {
+        "react": "^18.2.0",
+        "react-native": "^0.73.0",
         "tsup": "^8.0.2",
         "typescript": "^5.3.3"
     }

package/src/index.native.ts

@@ -8,3 +8,4 @@ if (typeof global.Buffer === 'undefined') {
 
 export * from './ColumnWalletSDK';
 export * from './ColumnShared';
+export * from './ui/native/ColumnWalletModal';

package/src/ui/native/ColumnWalletModal.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { View, Text, Modal, StyleSheet, TouchableOpacity, Linking, Image } from 'react-native';
+import { ColumnWalletSDK } from '../../ColumnWalletSDK';
+
+interface Props {
+    visible: boolean;
+    onClose: () => void;
+    onConnect: () => void;
+    sdk: ColumnWalletSDK; // Pass the initialized SDK instance
+}
+
+export function ColumnWalletModal({ visible, onClose, onConnect, sdk }: Props) {
+    const handleConnect = async () => {
+        try {
+            const url = sdk.connect();
+
+            // Attempt to open the deep link
+            // Use relaxed check for Expo Go / Android 11+ visibility rules
+            try {
+                const supported = await Linking.canOpenURL(url);
+                if (supported) {
+                    await Linking.openURL(url);
+                    onConnect();
+                    onClose();
+                    return;
+                }
+            } catch (e) {
+                // Ignore check errors
+            }
+
+            // Fallback: Try to open anyway
+            await Linking.openURL(url).catch(() => {
+                // If failed, show alert or similar (handling logic can be refined)
+            });
+
+            onConnect();
+            onClose();
+        } catch (error) {
+            console.error("Deep link error:", error);
+        }
+    };
+
+    return (
+        <Modal
+            animationType="slide"
+            transparent={true}
+            visible={visible}
+            onRequestClose={onClose}
+        >
+            <View style={styles.centeredView}>
+                {/* Transparent overlay as requested */}
+                <TouchableOpacity style={styles.overlay} onPress={onClose} activeOpacity={1} />
+
+                <View style={styles.modalView}>
+                    <Text style={styles.modalTitle}>Connect Wallet</Text>
+
+                    <TouchableOpacity style={styles.walletOption} onPress={handleConnect}>
+                        <View style={styles.walletIconContainer}>
+                            {/* Embed default SVG or icon here if possible, for now using simple view */}
+                            <View style={styles.walletIcon} />
+                        </View>
+                        <View style={styles.walletInfo}>
+                            <Text style={styles.walletName}>Column Wallet</Text>
+                            <Text style={styles.walletTag}>Recommended</Text>
+                        </View>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                        <Text style={styles.closeButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    centeredView: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        // Setting background to transparent as requested
+        backgroundColor: 'transparent',
+    },
+    modalView: {
+        width: '100%',
+        backgroundColor: '#1C1F2E',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        padding: 24,
+        paddingBottom: 40,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: -2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5,
+    },
+    modalTitle: {
+        fontSize: 20,
+        fontWeight: '600',
+        color: 'white',
+        marginBottom: 20,
+        textAlign: 'center',
+    },
+    walletOption: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#252938',
+        padding: 16,
+        borderRadius: 16,
+        marginBottom: 16,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    walletIconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 10,
+        backgroundColor: '#ffda34',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 16,
+    },
+    walletIcon: {
+        width: 20,
+        height: 20,
+        backgroundColor: '#000',
+        borderRadius: 10,
+    },
+    walletInfo: {
+        flex: 1,
+    },
+    walletName: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    walletTag: {
+        color: '#8B98A5',
+        fontSize: 12,
+    },
+    closeButton: {
+        marginTop: 8,
+        alignItems: 'center',
+        padding: 12,
+    },
+    closeButtonText: {
+        color: '#8B98A5',
+        fontSize: 16,
+    },
+});