@column-org/wallet-sdk 1.1.0 → 1.1.2

package/package.json

@@ -1,12 +1,14 @@
 {
     "name": "@column-org/wallet-sdk",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "description": "Column Wallet Mobile Deep-Link SDK for Movement/Aptos ecosystem",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
+    "react-native": "src/index.native.ts",
     "types": "dist/index.d.ts",
     "files": [
-        "dist"
+        "dist",
+        "src"
     ],
     "publishConfig": {
         "access": "public"
@@ -16,6 +18,10 @@
         "lint": "eslint src/**/*.ts",
         "prepublishOnly": "npm run build"
     },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-native": ">=0.60.0"
+    },
     "keywords": [
         "column",
         "wallet",
@@ -30,9 +36,12 @@
     "dependencies": {
         "bs58": "^6.0.0",
         "buffer": "^6.0.3",
+        "react-native-get-random-values": "^1.11.0",
         "tweetnacl": "^1.0.3"
     },
     "devDependencies": {
+        "react": "^18.2.0",
+        "react-native": "^0.73.0",
         "tsup": "^8.0.2",
         "typescript": "^5.3.3"
     }

package/src/ColumnShared.ts

@@ -0,0 +1,69 @@
+import * as nacl from 'tweetnacl'
+import bs58 from 'bs58'
+import { Buffer } from 'buffer'
+
+export interface ColumnSDKConfig {
+    appUrl?: string
+    appName?: string
+    redirectLink?: string
+    appIcon?: string
+    appDescription?: string
+    walletScheme?: string
+    network?: string
+    sessionSecretKey?: string
+}
+
+export class ColumnCrypto {
+    static generateKeyPair(): nacl.BoxKeyPair {
+        return nacl.box.keyPair()
+    }
+
+    static encryptPayload(
+        payload: any,
+        targetPublicKeyB58: string,
+        mySecretKey: Uint8Array
+    ): { data: string; nonce: string } {
+        const sharedSecret = nacl.box.before(
+            bs58.decode(targetPublicKeyB58),
+            mySecretKey
+        )
+
+        const nonce = nacl.randomBytes(nacl.box.nonceLength)
+        const message = Buffer.from(JSON.stringify(payload), 'utf8')
+
+        const encrypted = nacl.box.after(message, nonce, sharedSecret)
+
+        return {
+            data: bs58.encode(encrypted),
+            nonce: bs58.encode(nonce)
+        }
+    }
+
+    static decryptPayload(
+        encryptedDataB58: string,
+        nonceB58: string,
+        sourcePublicKeyB58: string,
+        mySecretKey: Uint8Array
+    ): any {
+        const sharedSecret = nacl.box.before(
+            bs58.decode(sourcePublicKeyB58),
+            mySecretKey
+        )
+
+        const decrypted = nacl.box.open.after(
+            bs58.decode(encryptedDataB58),
+            bs58.decode(nonceB58),
+            sharedSecret
+        )
+
+        if (!decrypted) return null
+
+        try {
+            const jsonString = Buffer.from(decrypted).toString('utf8')
+            return JSON.parse(jsonString)
+        } catch (e) {
+            console.error('ColumnCrypto: Failed to parse decrypted payload', e)
+            return null
+        }
+    }
+}

package/src/ColumnWalletSDK.ts

@@ -0,0 +1,236 @@
+import bs58 from 'bs58'
+import { ColumnCrypto, ColumnSDKConfig } from './ColumnShared'
+import * as nacl from 'tweetnacl'
+import { ColumnConnectModal } from './ui/ColumnConnectModal'
+
+export class ColumnWalletSDK {
+    private config: ColumnSDKConfig
+    private sessionKeyPair: nacl.BoxKeyPair
+    private walletEncryptionPublicKey: string | null = null
+
+    constructor(config: ColumnSDKConfig) {
+        this.config = config
+
+        if (config.sessionSecretKey) {
+            try {
+                const secretKey = bs58.decode(config.sessionSecretKey)
+                this.sessionKeyPair = nacl.box.keyPair.fromSecretKey(secretKey)
+            } catch (e) {
+                console.warn('ColumnWalletSDK: Invalid sessionSecretKey provided, generating new one.')
+                this.sessionKeyPair = ColumnCrypto.generateKeyPair()
+            }
+        } else {
+            this.sessionKeyPair = ColumnCrypto.generateKeyPair()
+        }
+    }
+
+    /**
+     * Returns the current session's secret key (bs58) so it can be persisted
+     */
+    public getSessionSecretKey(): string {
+        return bs58.encode(this.sessionKeyPair.secretKey)
+    }
+
+    /**
+     * Internal: Used by Web/Native adapters to get the config
+     */
+    public getConfig(): ColumnSDKConfig {
+        return this.config
+    }
+
+    public setWalletEncryptionPublicKey(key: string) {
+        this.walletEncryptionPublicKey = key
+    }
+
+    /**
+     * Alias for setWalletEncryptionPublicKey to match docs
+     */
+    public importWalletKey(key: string) {
+        this.setWalletEncryptionPublicKey(key)
+    }
+
+    /**
+     * Step 1: Connect to the wallet
+     */
+    public connect(): string {
+        const params = new URLSearchParams({
+            request: 'connect',
+            app_url: this.config.appUrl || '',
+            app_name: this.config.appName || '',
+            dapp_encryption_public_key: bs58.encode(this.sessionKeyPair.publicKey),
+            redirect_link: this.config.redirectLink || ''
+        } as Record<string, string>)
+
+        if (this.config.appIcon) {
+            params.append('app_icon', this.config.appIcon)
+        }
+
+        if (this.config.network) {
+            params.append('network', this.config.network)
+        }
+
+        if (this.config.appDescription) {
+            params.append('app_description', this.config.appDescription)
+        }
+
+        const scheme = this.config.walletScheme || 'column'
+        const base = scheme.includes('://') ? scheme : `${scheme}://`
+        return `${base}${base.endsWith('/') ? '' : '/'}?${params.toString()}`
+    }
+
+    /**
+     * Step 2: Sign and Submit a transaction
+     */
+    public signAndSubmitTransaction(transaction: any): string {
+        if (!this.walletEncryptionPublicKey) {
+            throw new Error('Wallet not connected. Call connect() first and store the wallet_encryption_public_key.')
+        }
+
+        const payload = {
+            transaction: transaction,
+        }
+
+        const encrypted = ColumnCrypto.encryptPayload(
+            payload,
+            this.walletEncryptionPublicKey,
+            this.sessionKeyPair.secretKey
+        )
+
+        const params = new URLSearchParams({
+            request: 'signAndSubmitTransaction',
+            app_url: this.config.appUrl || '',
+            app_name: this.config.appName || '',
+            dapp_encryption_public_key: bs58.encode(this.sessionKeyPair.publicKey),
+            data: encrypted.data,
+            nonce: encrypted.nonce,
+            redirect_link: this.config.redirectLink || ''
+        } as Record<string, string>)
+
+        if (this.config.appIcon) {
+            params.append('app_icon', this.config.appIcon)
+        }
+        if (this.config.network) {
+            params.append('network', this.config.network)
+        }
+        if (this.config.appDescription) {
+            params.append('app_description', this.config.appDescription)
+        }
+
+        const scheme = this.config.walletScheme || 'column'
+        const base = scheme.includes('://') ? scheme : `${scheme}://`
+        return `${base}${base.endsWith('/') ? '' : '/'}?${params.toString()}`
+    }
+
+    /**
+     * Step 3: Sign a simple message
+     */
+    public signMessage(message: string): string {
+        if (!this.walletEncryptionPublicKey) {
+            throw new Error('Wallet not connected.')
+        }
+
+        const payload = {
+            message: message,
+        }
+
+        const encrypted = ColumnCrypto.encryptPayload(
+            payload,
+            this.walletEncryptionPublicKey,
+            this.sessionKeyPair.secretKey
+        )
+
+        const params = new URLSearchParams({
+            request: 'signMessage',
+            app_url: this.config.appUrl || '',
+            app_name: this.config.appName || '',
+            dapp_encryption_public_key: bs58.encode(this.sessionKeyPair.publicKey),
+            data: encrypted.data,
+            nonce: encrypted.nonce,
+            redirect_link: this.config.redirectLink || ''
+        } as Record<string, string>)
+
+        if (this.config.appIcon) {
+            params.append('app_icon', this.config.appIcon)
+        }
+        if (this.config.network) {
+            params.append('network', this.config.network)
+        }
+        if (this.config.appDescription) {
+            params.append('app_description', this.config.appDescription)
+        }
+
+        const scheme = this.config.walletScheme || 'column'
+        const base = scheme.includes('://') ? scheme : `${scheme}://`
+        return `${base}${base.endsWith('/') ? '' : '/'}?${params.toString()}`
+    }
+
+    /**
+     * Utility: Parse the response from Column
+     */
+    public handleResponse(url: string): any {
+        let params: URLSearchParams;
+
+        try {
+            const urlObj = new URL(url.includes('://') ? url : `http://localhost/${url}`);
+            // Prioritize Hash params if they exist (used for tab burial redirection)
+            const hashStr = urlObj.hash.substring(1);
+            const searchStr = urlObj.search.substring(1);
+
+            if (hashStr) {
+                params = new URLSearchParams(hashStr);
+            } else {
+                params = new URLSearchParams(searchStr);
+            }
+        } catch (e) {
+            // Fallback for native schemes or malformed URLs
+            const hashMatch = url.match(/#(.*)$/);
+            const queryMatch = url.match(/\?(.*)$/);
+            params = new URLSearchParams(hashMatch ? hashMatch[1] : (queryMatch ? queryMatch[1] : url));
+        }
+
+        const data = params.get('data')
+        const nonce = params.get('nonce')
+        const error = params.get('error')
+
+        if (error) {
+            throw new Error(`Column Wallet Error: ${error}`)
+        }
+
+        if (data && nonce && this.walletEncryptionPublicKey) {
+            const decrypted = ColumnCrypto.decryptPayload(
+                data,
+                nonce,
+                this.walletEncryptionPublicKey,
+                this.sessionKeyPair.secretKey
+            )
+
+            if (!decrypted) {
+                throw new Error("Column Wallet Error: Decryption failed. The response may have been tampered with or keys do not match.")
+            }
+
+            return {
+                ...decrypted,
+                network: params.get('network') // Always include network from URL
+            }
+        }
+
+        // Plaintext fallback for initial connect
+        const response: Record<string, string> = {}
+        params.forEach((value, key) => {
+            response[key] = value
+        })
+
+        if (response.column_encryption_public_key) {
+            this.walletEncryptionPublicKey = response.column_encryption_public_key
+        }
+
+        return response
+    }
+
+    /**
+     * Sets the wallet's public key if known from a previous session
+     */
+    public setWalletPublicKey(publicKeyB58: string) {
+        this.walletEncryptionPublicKey = publicKeyB58
+    }
+}

package/src/index.native.ts

@@ -0,0 +1,11 @@
+import 'react-native-get-random-values';
+import { Buffer } from 'buffer';
+
+// Polyfill Buffer for the native environment
+if (typeof global.Buffer === 'undefined') {
+    global.Buffer = Buffer;
+}
+
+export * from './ColumnWalletSDK';
+export * from './ColumnShared';
+export * from './ui/native/ColumnWalletModal';

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './ColumnWalletSDK'
+export * from './ColumnShared'
+export * from './ui/ColumnWalletWeb'

package/src/ui/ColumnConnectModal.ts

@@ -0,0 +1,199 @@
+export const ColumnModalStyles = `
+    .column-modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.75);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 999999;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    }
+
+    .column-modal-overlay.active {
+        opacity: 1;
+    }
+
+    .column-modal-card {
+        background: #1C1F2E;
+        width: 100%;
+        max-width: 420px;
+        border-radius: 20px;
+        padding: 28px;
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        transform: scale(0.95);
+        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        position: relative;
+    }
+
+    .column-modal-overlay.active .column-modal-card {
+        transform: scale(1);
+    }
+
+    .column-modal-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        background: transparent;
+        border: none;
+        color: #8B98A5;
+        cursor: pointer;
+        font-size: 28px;
+        padding: 4px;
+        line-height: 1;
+        transition: color 0.2s ease;
+    }
+
+    .column-modal-close:hover {
+        color: #fff;
+    }
+
+    .column-modal-title {
+        color: #fff;
+        font-size: 20px;
+        font-weight: 600;
+        margin: 0 0 24px;
+        text-align: center;
+        line-height: 1.4;
+    }
+
+    .column-modal-wallet-option {
+        background: #252938;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 14px;
+        padding: 16px 20px;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .column-modal-wallet-option:hover {
+        background: #2D3142;
+        border-color: rgba(255, 218, 52, 0.3);
+        transform: translateY(-2px);
+    }
+
+    .column-modal-wallet-left {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+    }
+
+    .column-modal-wallet-icon {
+        width: 40px;
+        height: 40px;
+        background: rgba(255, 218, 52, 0.12);
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .column-modal-wallet-name {
+        color: #fff;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .column-modal-wallet-badge {
+        background: rgba(76, 175, 80, 0.15);
+        color: #4CAF50;
+        font-size: 13px;
+        font-weight: 600;
+        padding: 6px 12px;
+        border-radius: 8px;
+    }
+`;
+
+export class ColumnConnectModal {
+    private overlay: HTMLDivElement | null = null;
+    private onConnect: () => void;
+
+    constructor(onConnect: () => void) {
+        this.onConnect = onConnect;
+        this.injectStyles();
+    }
+
+    private injectStyles() {
+        if (typeof document === 'undefined') return;
+        if (document.getElementById('column-modal-styles')) return;
+
+        const styleTag = document.createElement('style');
+        styleTag.id = 'column-modal-styles';
+        styleTag.innerHTML = ColumnModalStyles;
+        document.head.appendChild(styleTag);
+    }
+
+    public open() {
+        if (typeof document === 'undefined' || this.overlay) return;
+
+        // Create overlay
+        this.overlay = document.createElement('div');
+        this.overlay.className = 'column-modal-overlay';
+
+        // Create card with new design
+        this.overlay.innerHTML = `
+            <div class="column-modal-card">
+                <button class="column-modal-close" id="column-modal-close">&times;</button>
+                <h2 class="column-modal-title">Connect a wallet on<br>Movement to continue</h2>
+                
+                <button class="column-modal-wallet-option" id="column-modal-connect-btn">
+                    <div class="column-modal-wallet-left">
+                        <div class="column-modal-wallet-icon">
+                            <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 4L28 28H4L16 4Z" stroke="#ffda34" stroke-width="2.5" stroke-linejoin="round"/>
+                                <circle cx="16" cy="18" r="4" fill="#ffda34"/>
+                            </svg>
+                        </div>
+                        <span class="column-modal-wallet-name">Column Wallet</span>
+                    </div>
+                    <span class="column-modal-wallet-badge">Mobile</span>
+                </button>
+            </div>
+        `;
+
+        document.body.appendChild(this.overlay);
+
+        // Animate in
+        setTimeout(() => {
+            this.overlay?.classList.add('active');
+        }, 10);
+
+        // Bind events
+        document.getElementById('column-modal-close')?.addEventListener('click', () => this.close());
+
+        document.getElementById('column-modal-connect-btn')?.addEventListener('click', () => {
+            this.onConnect();
+            this.close();
+        });
+
+        // Close on click outside
+        this.overlay.addEventListener('click', (e) => {
+            if (e.target === this.overlay) this.close();
+        });
+    }
+
+    public close() {
+        if (!this.overlay) return;
+
+        this.overlay.classList.remove('active');
+        setTimeout(() => {
+            if (this.overlay && this.overlay.parentNode) {
+                this.overlay.parentNode.removeChild(this.overlay);
+            }
+            this.overlay = null;
+        }, 300);
+    }
+}

package/src/ui/ColumnWalletWeb.ts

@@ -0,0 +1,34 @@
+import { ColumnWalletSDK } from '../ColumnWalletSDK';
+import { ColumnConnectModal } from './ColumnConnectModal';
+import { ColumnSDKConfig } from '../ColumnShared';
+
+/**
+ * Enhanced SDK Class specifically for Web environments
+ */
+export class ColumnWalletWeb extends ColumnWalletSDK {
+    private modal: ColumnConnectModal;
+
+    constructor(config: ColumnSDKConfig) {
+        const detectedConfig = ColumnWalletWeb.autoDetectMetadata(config);
+        super(detectedConfig);
+
+        this.modal = new ColumnConnectModal(() => {
+            window.location.href = this.connect();
+        });
+    }
+
+    private static autoDetectMetadata(config: ColumnSDKConfig): ColumnSDKConfig {
+        if (typeof document === 'undefined') return config;
+        const detectedConfig = { ...config };
+
+        if (!detectedConfig.appUrl) detectedConfig.appUrl = window.location.origin;
+        if (!detectedConfig.appName) detectedConfig.appName = document.title || 'Unknown dApp';
+        if (!detectedConfig.redirectLink) detectedConfig.redirectLink = window.location.href.split('?')[0];
+
+        return detectedConfig;
+    }
+
+    public openConnectModal() {
+        this.modal.open();
+    }
+}

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,
+    },
+});