pwc-sdk-wallet 0.8.0 → 0.8.1

package/README.md

@@ -1503,6 +1503,90 @@ npm install pwc-wallet-sdk react-native-webview
 
 **Note:** This is a peer dependency. Mobile developers need to install it to use the DApp Browser features.
 
+### React Native Polyfills (Required for TRON Support)
+
+The SDK uses `tronweb` for TRON blockchain support, which requires Node.js polyfills in React Native. You **must** set up polyfills before using the SDK in a React Native app.
+
+#### Option 1: Automatic Polyfills (Recommended)
+
+The SDK automatically applies polyfills when using TRON features, but you still need to install the required packages:
+
+```bash
+npm install buffer process react-native-get-random-values
+```
+
+Then, at the **very top** of your app's entry file (e.g., `index.js` or `App.js`), import the polyfills:
+
+```typescript
+// At the VERY TOP of index.js or App.js - before any other imports
+import 'react-native-get-random-values';
+import { Buffer } from 'buffer';
+import process from 'process';
+
+// Make them available globally
+global.Buffer = Buffer;
+global.process = process;
+```
+
+#### Option 2: Manual Setup
+
+If you prefer more control, you can manually set up polyfills:
+
+1. Install dependencies:
+```bash
+npm install buffer process react-native-get-random-values
+```
+
+2. Create a polyfill file (e.g., `polyfills.js`):
+```typescript
+import 'react-native-get-random-values';
+import { Buffer } from 'buffer';
+import process from 'process';
+
+global.Buffer = Buffer;
+global.process = process;
+```
+
+3. Import it at the top of your entry file:
+```typescript
+import './polyfills';
+// ... rest of your imports
+```
+
+#### Troubleshooting
+
+If you encounter errors like:
+- `RCTFatal` or `TronWebProto.Vote.serializeBinaryToWriter`
+- `Buffer is not defined`
+- `process is not defined`
+- `crypto.getRandomValues is not a function`
+
+Make sure:
+1. ✅ `react-native-get-random-values` is imported **first** (before any crypto operations)
+2. ✅ `buffer` and `process` are installed and set as globals
+3. ✅ Polyfills are imported **before** importing the SDK
+4. ✅ You've restarted your Metro bundler after installing dependencies
+
+#### Metro Config (Optional but Recommended)
+
+For better compatibility, you can configure Metro to handle Node.js modules. Create or update `metro.config.js`:
+
+```javascript
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  
+  return {
+    resolver: {
+      sourceExts: [...sourceExts, 'cjs'],
+    },
+  };
+})();
+```
+
 ## Quick Start
 
 ### 1. Basic Wallet Creation

package/dist/chain/TronChainService.js

@@ -4,6 +4,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TronChainService = void 0;
+const isReactNative = (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') ||
+    (typeof window !== 'undefined' && window?.ReactNativeWebView !== undefined) ||
+    (typeof global !== 'undefined' && global.__DEV__ !== undefined && typeof navigator !== 'undefined');
+if (isReactNative || (typeof window === 'undefined' && typeof global !== 'undefined')) {
+    // Polyfill Buffer
+    if (typeof global.Buffer === 'undefined') {
+        try {
+            global.Buffer = require('buffer').Buffer;
+        }
+        catch (e) {
+            console.warn('[PWC SDK] Failed to load buffer polyfill:', e);
+        }
+    }
+    // Polyfill process
+    if (typeof global.process === 'undefined') {
+        try {
+            global.process = require('process');
+        }
+        catch (e) {
+            // Fallback minimal process object
+            global.process = {
+                env: {},
+                version: '',
+                versions: {},
+                platform: 'react-native',
+                nextTick: (fn) => setTimeout(() => fn(), 0),
+                browser: true,
+            };
+        }
+    }
+    // Ensure process.env exists
+    if (!global.process.env) {
+        global.process.env = {};
+    }
+    // Ensure crypto.getRandomValues is available
+    if (typeof global.crypto === 'undefined' || !global.crypto.getRandomValues) {
+        try {
+            require('react-native-get-random-values');
+        }
+        catch (e) {
+            // Fallback if react-native-get-random-values is not installed
+            if (typeof global.crypto === 'undefined') {
+                global.crypto = {};
+            }
+            if (!global.crypto.getRandomValues) {
+                global.crypto.getRandomValues = function (arr) {
+                    if (arr) {
+                        const view = new Uint8Array(arr.buffer, arr.byteOffset, arr.byteLength);
+                        for (let i = 0; i < view.length; i++) {
+                            view[i] = Math.floor(Math.random() * 256);
+                        }
+                    }
+                    return arr;
+                };
+            }
+        }
+    }
+}
 const tronweb_1 = __importDefault(require("tronweb"));
 /**
  * Service for interacting with TRON blockchain.

package/dist/keyrings/HDKeyring.js

@@ -156,5 +156,5 @@ class HDKeyring {
     }
 }
 exports.HDKeyring = HDKeyring;
-// Cache để tránh tạo lại seed
+// Cache to avoid recreating seed
 HDKeyring.seedCache = new Map();

package/dist/keyrings/SolanaKeyring.js

@@ -137,7 +137,7 @@ class SolanaKeyring {
         if (data.type !== 'Solana' || !data.mnemonic) {
             throw new Error('Invalid data for SolanaKeyring deserialization.');
         }
-        // Chỉ khôi phục mnemonic, không khôi phục lại accounts
+        // Only restore mnemonic, do not restore accounts
         return new SolanaKeyring(data.mnemonic);
     }
     /**

package/dist/keyrings/TronKeyring.js

@@ -41,6 +41,64 @@ const bip32_1 = require("bip32");
 const ecc = __importStar(require("@bitcoinerlab/secp256k1"));
 const bip39 = __importStar(require("bip39"));
 const chains_1 = require("../config/chains");
+const isReactNative = (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') ||
+    (typeof window !== 'undefined' && window?.ReactNativeWebView !== undefined) ||
+    (typeof global !== 'undefined' && global.__DEV__ !== undefined && typeof navigator !== 'undefined');
+if (isReactNative || (typeof window === 'undefined' && typeof global !== 'undefined')) {
+    // Polyfill Buffer
+    if (typeof global.Buffer === 'undefined') {
+        try {
+            global.Buffer = require('buffer').Buffer;
+        }
+        catch (e) {
+            console.warn('[PWC SDK] Failed to load buffer polyfill:', e);
+        }
+    }
+    // Polyfill process
+    if (typeof global.process === 'undefined') {
+        try {
+            global.process = require('process');
+        }
+        catch (e) {
+            // Fallback minimal process object
+            global.process = {
+                env: {},
+                version: '',
+                versions: {},
+                platform: 'react-native',
+                nextTick: (fn) => setTimeout(() => fn(), 0),
+                browser: true,
+            };
+        }
+    }
+    // Ensure process.env exists
+    if (!global.process.env) {
+        global.process.env = {};
+    }
+    // Ensure crypto.getRandomValues is available
+    if (typeof global.crypto === 'undefined' || !global.crypto.getRandomValues) {
+        try {
+            require('react-native-get-random-values');
+        }
+        catch (e) {
+            // Fallback if react-native-get-random-values is not installed
+            if (typeof global.crypto === 'undefined') {
+                global.crypto = {};
+            }
+            if (!global.crypto.getRandomValues) {
+                global.crypto.getRandomValues = function (arr) {
+                    if (arr) {
+                        const view = new Uint8Array(arr.buffer, arr.byteOffset, arr.byteLength);
+                        for (let i = 0; i < view.length; i++) {
+                            view[i] = Math.floor(Math.random() * 256);
+                        }
+                    }
+                    return arr;
+                };
+            }
+        }
+    }
+}
 const tronweb_1 = __importDefault(require("tronweb"));
 /**
  * TRON keyring for managing multiple TRON accounts
@@ -166,7 +224,7 @@ class TronKeyring {
         if (data.type !== 'Tron' || !data.mnemonic) {
             throw new Error('Invalid data for TronKeyring deserialization.');
         }
-        // Chỉ khôi phục mnemonic, không khôi phục lại accounts
+        // Only restore mnemonic, do not restore accounts
         return new TronKeyring(data.mnemonic);
     }
     /**

package/dist/polyfills/react-native.d.ts

@@ -0,0 +1,34 @@
+/**
+ * React Native Polyfills
+ *
+ * This file provides necessary polyfills for Node.js APIs that are required
+ * by dependencies like tronweb (which uses Protocol Buffers).
+ *
+ * IMPORTANT: This file must be imported at the very beginning of your app entry point
+ * (e.g., index.js or App.js) BEFORE any other imports that use these polyfills.
+ *
+ * Usage in React Native app:
+ * ```typescript
+ * // At the very top of index.js or App.js
+ * import 'pwc-sdk-wallet/dist/polyfills/react-native';
+ *
+ * // Then import other modules
+ * import { Vault } from 'pwc-sdk-wallet';
+ * ```
+ *
+ * Alternatively, you can install the required polyfills in your app:
+ * ```bash
+ * npm install buffer process react-native-get-random-values
+ * ```
+ *
+ * And import them at the top of your entry file:
+ * ```typescript
+ * import 'react-native-get-random-values';
+ * import { Buffer } from 'buffer';
+ * import process from 'process';
+ *
+ * global.Buffer = Buffer;
+ * global.process = process;
+ * ```
+ */
+export {};

package/dist/polyfills/react-native.js

@@ -0,0 +1,118 @@
+"use strict";
+/**
+ * React Native Polyfills
+ *
+ * This file provides necessary polyfills for Node.js APIs that are required
+ * by dependencies like tronweb (which uses Protocol Buffers).
+ *
+ * IMPORTANT: This file must be imported at the very beginning of your app entry point
+ * (e.g., index.js or App.js) BEFORE any other imports that use these polyfills.
+ *
+ * Usage in React Native app:
+ * ```typescript
+ * // At the very top of index.js or App.js
+ * import 'pwc-sdk-wallet/dist/polyfills/react-native';
+ *
+ * // Then import other modules
+ * import { Vault } from 'pwc-sdk-wallet';
+ * ```
+ *
+ * Alternatively, you can install the required polyfills in your app:
+ * ```bash
+ * npm install buffer process react-native-get-random-values
+ * ```
+ *
+ * And import them at the top of your entry file:
+ * ```typescript
+ * import 'react-native-get-random-values';
+ * import { Buffer } from 'buffer';
+ * import process from 'process';
+ *
+ * global.Buffer = Buffer;
+ * global.process = process;
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative' ||
+    (typeof window !== 'undefined' && window?.ReactNativeWebView !== undefined);
+// Only apply polyfills in React Native environment
+if (isReactNative || typeof window === 'undefined') {
+    // Polyfill Buffer
+    if (typeof global.Buffer === 'undefined') {
+        try {
+            global.Buffer = require('buffer').Buffer;
+        }
+        catch (e) {
+            console.warn('Failed to load buffer polyfill:', e);
+        }
+    }
+    // Polyfill process
+    if (typeof global.process === 'undefined') {
+        try {
+            global.process = require('process');
+        }
+        catch (e) {
+            // Fallback minimal process object
+            global.process = {
+                env: {},
+                version: '',
+                versions: {},
+                platform: 'react-native',
+                nextTick: (fn) => setTimeout(() => fn(), 0),
+                browser: true,
+            };
+        }
+    }
+    // Ensure process.env exists
+    if (!global.process.env) {
+        global.process.env = {};
+    }
+    // Polyfill crypto.getRandomValues (required by react-native-get-random-values)
+    // This should be imported by the app, but we ensure it's available
+    if (typeof global.crypto === 'undefined' || !global.crypto.getRandomValues) {
+        try {
+            // Try to use react-native-get-random-values if available
+            require('react-native-get-random-values');
+        }
+        catch (e) {
+            // Fallback implementation
+            if (typeof global.crypto === 'undefined') {
+                global.crypto = {};
+            }
+            if (!global.crypto.getRandomValues) {
+                global.crypto.getRandomValues = function (arr) {
+                    if (arr) {
+                        const view = new Uint8Array(arr.buffer, arr.byteOffset, arr.byteLength);
+                        for (let i = 0; i < view.length; i++) {
+                            view[i] = Math.floor(Math.random() * 256);
+                        }
+                    }
+                    return arr;
+                };
+            }
+        }
+    }
+    // Polyfill TextEncoder/TextDecoder if not available
+    if (typeof global.TextEncoder === 'undefined') {
+        try {
+            const { TextEncoder, TextDecoder } = require('util');
+            global.TextEncoder = TextEncoder;
+            global.TextDecoder = TextDecoder;
+        }
+        catch (e) {
+            // Use polyfill if util is not available
+            try {
+                const { TextEncoder: TE, TextDecoder: TD } = require('text-encoding');
+                global.TextEncoder = TE;
+                global.TextDecoder = TD;
+            }
+            catch (e2) {
+                console.warn('TextEncoder/TextDecoder polyfills not available');
+            }
+        }
+    }
+    // Ensure global is available
+    if (typeof global === 'undefined' && typeof window !== 'undefined') {
+        window.global = window;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pwc-sdk-wallet",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A comprehensive wallet SDK for React Native (pwc), supporting multi-chain and multi-account features.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,6 +44,7 @@
     "bs58": "^6.0.0",
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
+    "process": "^0.11.10",
     "ed25519-hd-key": "^1.3.0",
     "react-native-camera": "^4.2.1",
     "react-native-permissions": "^5.4.1",