dop-wallet-v6 1.2.15 → 1.2.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -3
- package/ASYNCSTORAGE_FIX_SUMMARY.md +0 -79
- package/BUILD_SUCCESS_SUMMARY.md +0 -103
- package/DOP_WALLET_V6_REACT_NATIVE_INTEGRATION_GUIDE.md +0 -2174
- package/DOP_WALLET_V6_WALLET_CREATION_GUIDE.md +0 -305
- package/REACT_NATIVE_FIXES_COMPLETE.md +0 -162
- package/REACT_NATIVE_INTEGRATION_FIXES.md +0 -167
- package/REACT_NATIVE_SETUP_QUICK_FIX.md +0 -189
- package/REACT_NATIVE_WALLET_HANGING_FIX.md +0 -270
- package/SELECTIVE_TRANSPARENCY.md +0 -207
- package/VERIFICATION_COMPLETE.md +0 -138
- package/WALLET_CREATION_MIGRATION_COMPLETE.md +0 -80
- package/issuev3.md +0 -93
- package/problem.md +0 -41
|
@@ -1,189 +0,0 @@
|
|
|
1
|
-
# React Native Setup Guide for dop-wallet-v6
|
|
2
|
-
|
|
3
|
-
This guide addresses the specific integration issues identified in React Native 0.81+ (new architecture) environments.
|
|
4
|
-
|
|
5
|
-
## Quick Fix for Existing Issues
|
|
6
|
-
|
|
7
|
-
If you're experiencing Metro bundling failures with errors like:
|
|
8
|
-
- `Error: Unable to resolve module os from node_modules/ffjavascript/build/main.cjs`
|
|
9
|
-
- `Invalid call at line 201: import(mod)` from web-worker
|
|
10
|
-
- App hanging during wallet creation
|
|
11
|
-
|
|
12
|
-
Follow these steps:
|
|
13
|
-
|
|
14
|
-
### 1. Install Required Dependencies
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
npm install \
|
|
18
|
-
@react-native-async-storage/async-storage \
|
|
19
|
-
react-native-get-random-values \
|
|
20
|
-
crypto-browserify \
|
|
21
|
-
stream-browserify \
|
|
22
|
-
buffer \
|
|
23
|
-
events \
|
|
24
|
-
util \
|
|
25
|
-
assert \
|
|
26
|
-
process \
|
|
27
|
-
path-browserify \
|
|
28
|
-
url \
|
|
29
|
-
querystring-es3 \
|
|
30
|
-
stream-http \
|
|
31
|
-
https-browserify \
|
|
32
|
-
browserify-zlib
|
|
33
|
-
|
|
34
|
-
# or with yarn
|
|
35
|
-
yarn add \
|
|
36
|
-
@react-native-async-storage/async-storage \
|
|
37
|
-
react-native-get-random-values \
|
|
38
|
-
crypto-browserify \
|
|
39
|
-
stream-browserify \
|
|
40
|
-
buffer \
|
|
41
|
-
events \
|
|
42
|
-
util \
|
|
43
|
-
assert \
|
|
44
|
-
process \
|
|
45
|
-
path-browserify \
|
|
46
|
-
url \
|
|
47
|
-
querystring-es3 \
|
|
48
|
-
stream-http \
|
|
49
|
-
https-browserify \
|
|
50
|
-
browserify-zlib
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### 2. Copy Node.js Polyfills
|
|
54
|
-
|
|
55
|
-
Copy the `node-polyfills/` directory from this package to your React Native project root:
|
|
56
|
-
|
|
57
|
-
```
|
|
58
|
-
your-react-native-project/
|
|
59
|
-
├── node-polyfills/
|
|
60
|
-
│ ├── os-polyfill.js
|
|
61
|
-
│ ├── web-worker-polyfill.js
|
|
62
|
-
│ └── wasm-fallback.js
|
|
63
|
-
├── metro.config.js
|
|
64
|
-
└── ...
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
### 3. Update Metro Configuration
|
|
68
|
-
|
|
69
|
-
Copy the `metro.config.react-native.example.js` as your `metro.config.js`:
|
|
70
|
-
|
|
71
|
-
```javascript
|
|
72
|
-
// metro.config.js - Copy from metro.config.react-native.example.js
|
|
73
|
-
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
|
|
74
|
-
|
|
75
|
-
const defaultConfig = getDefaultConfig(__dirname);
|
|
76
|
-
|
|
77
|
-
const config = {
|
|
78
|
-
resolver: {
|
|
79
|
-
alias: {
|
|
80
|
-
'os': require.resolve('./node-polyfills/os-polyfill.js'),
|
|
81
|
-
'crypto': require.resolve('crypto-browserify'),
|
|
82
|
-
'stream': require.resolve('stream-browserify'),
|
|
83
|
-
'web-worker': require.resolve('./node-polyfills/web-worker-polyfill.js'),
|
|
84
|
-
// ... other aliases (see full example)
|
|
85
|
-
},
|
|
86
|
-
// ... other configuration
|
|
87
|
-
},
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
module.exports = mergeConfig(defaultConfig, config);
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### 4. Initialize the SDK Properly
|
|
94
|
-
|
|
95
|
-
In your app's entry point (typically `App.js` or `index.js`):
|
|
96
|
-
|
|
97
|
-
```javascript
|
|
98
|
-
// CRITICAL: Import shims FIRST, before any other dop-wallet-v6 imports
|
|
99
|
-
import 'dop-wallet-v6/react-native-shims';
|
|
100
|
-
|
|
101
|
-
// Then import the SDK
|
|
102
|
-
import {
|
|
103
|
-
startDopEngineReactNative,
|
|
104
|
-
createDopWalletSafe,
|
|
105
|
-
testCircomlibjs
|
|
106
|
-
} from 'dop-wallet-v6';
|
|
107
|
-
|
|
108
|
-
// Your app code...
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### 5. Test the Integration
|
|
112
|
-
|
|
113
|
-
Add this test to verify everything is working:
|
|
114
|
-
|
|
115
|
-
```javascript
|
|
116
|
-
import { testCircomlibjs } from 'dop-wallet-v6';
|
|
117
|
-
|
|
118
|
-
const testDopWalletIntegration = async () => {
|
|
119
|
-
try {
|
|
120
|
-
console.log('Testing dop-wallet-v6 integration...');
|
|
121
|
-
|
|
122
|
-
// This will throw an error if the integration has issues
|
|
123
|
-
await testCircomlibjs();
|
|
124
|
-
|
|
125
|
-
console.log('✅ dop-wallet-v6 integration successful!');
|
|
126
|
-
return true;
|
|
127
|
-
} catch (error) {
|
|
128
|
-
console.error('❌ dop-wallet-v6 integration failed:', error);
|
|
129
|
-
return false;
|
|
130
|
-
}
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
// Call this in your app's startup
|
|
134
|
-
testDopWalletIntegration();
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
## Common Error Solutions
|
|
138
|
-
|
|
139
|
-
### Error: "Unable to resolve module os"
|
|
140
|
-
- **Solution**: Ensure the Metro config includes the os-polyfill.js alias
|
|
141
|
-
- **Root cause**: ffjavascript requires Node.js 'os' module
|
|
142
|
-
|
|
143
|
-
### Error: "Invalid call import(mod)"
|
|
144
|
-
- **Solution**: Ensure web-worker is aliased to web-worker-polyfill.js
|
|
145
|
-
- **Root cause**: web-worker package uses dynamic imports incompatible with Metro
|
|
146
|
-
|
|
147
|
-
### App hangs during wallet creation
|
|
148
|
-
- **Solution**: Ensure react-native-shims.js is imported FIRST
|
|
149
|
-
- **Root cause**: circomlibjs trying to use Web Workers in React Native
|
|
150
|
-
|
|
151
|
-
### Error: "Cannot read property 'call' of undefined"
|
|
152
|
-
- **Solution**: Install all browserify polyfills (crypto, stream, buffer, etc.)
|
|
153
|
-
- **Root cause**: Missing Node.js core module polyfills
|
|
154
|
-
|
|
155
|
-
## Architecture Notes
|
|
156
|
-
|
|
157
|
-
The integration works by:
|
|
158
|
-
|
|
159
|
-
1. **Polyfill Layer**: Node.js polyfills provide React Native-compatible implementations
|
|
160
|
-
2. **Metro Aliases**: Redirect problematic modules to safe alternatives
|
|
161
|
-
3. **React Native Shims**: Force circomlibjs into synchronous mode
|
|
162
|
-
4. **Database Layer**: Use memdown + AsyncStorage for persistence
|
|
163
|
-
|
|
164
|
-
This approach maintains full SDK functionality while being compatible with React Native's JavaScript runtime constraints.
|
|
165
|
-
|
|
166
|
-
## Performance Considerations
|
|
167
|
-
|
|
168
|
-
- **Synchronous Mode**: Crypto operations run synchronously, which may block the UI for complex operations
|
|
169
|
-
- **No Web Workers**: All operations run on the main thread
|
|
170
|
-
- **JavaScript Fallbacks**: Pure JS implementations instead of optimized WASM
|
|
171
|
-
|
|
172
|
-
For better UX, consider showing loading indicators during wallet operations.
|
|
173
|
-
|
|
174
|
-
## Troubleshooting
|
|
175
|
-
|
|
176
|
-
If issues persist:
|
|
177
|
-
|
|
178
|
-
1. Clear Metro cache: `npx react-native start --reset-cache`
|
|
179
|
-
2. Clear node_modules: `rm -rf node_modules && npm install`
|
|
180
|
-
3. Check that shims are imported first
|
|
181
|
-
4. Verify all polyfill dependencies are installed
|
|
182
|
-
5. Test with the `testCircomlibjs()` function
|
|
183
|
-
|
|
184
|
-
## Support
|
|
185
|
-
|
|
186
|
-
For additional issues, check the integration guide in the SDK documentation or file an issue with:
|
|
187
|
-
- React Native version
|
|
188
|
-
- Metro bundler output
|
|
189
|
-
- Device/simulator information
|
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
# 🚨 CRITICAL FIX: React Native Wallet Creation Hanging
|
|
2
|
-
|
|
3
|
-
## Problem Summary
|
|
4
|
-
|
|
5
|
-
**Issue**: `createDopWallet()` hangs indefinitely in React Native without any error messages.
|
|
6
|
-
|
|
7
|
-
**Root Cause**: The `circomlibjs` cryptographic library attempts to use Web Workers and WebAssembly, which are not available in React Native, causing the key derivation process to hang during wallet creation.
|
|
8
|
-
|
|
9
|
-
## ✅ IMMEDIATE SOLUTION
|
|
10
|
-
|
|
11
|
-
### 1. Update Your App.js (Entry Point)
|
|
12
|
-
|
|
13
|
-
Add these lines **at the very top** of your App.js, before any other imports:
|
|
14
|
-
|
|
15
|
-
```javascript
|
|
16
|
-
// CRITICAL: Add this FIRST, before any other imports
|
|
17
|
-
import 'react-native-get-random-values';
|
|
18
|
-
import 'react-native-url-polyfill/auto';
|
|
19
|
-
import { Buffer } from 'buffer';
|
|
20
|
-
|
|
21
|
-
// Make Buffer available globally
|
|
22
|
-
global.Buffer = global.Buffer || Buffer;
|
|
23
|
-
|
|
24
|
-
// CRITICAL FIX: Disable Web Workers and WebAssembly for circomlibjs
|
|
25
|
-
global.Worker = undefined;
|
|
26
|
-
global.WebAssembly = undefined;
|
|
27
|
-
global.navigator = global.navigator || {};
|
|
28
|
-
global.navigator.serviceWorker = undefined;
|
|
29
|
-
|
|
30
|
-
// Import DOP Wallet shims (this includes additional circomlibjs fixes)
|
|
31
|
-
import 'dop-wallet-v6/react-native-shims';
|
|
32
|
-
|
|
33
|
-
// NOW safe to import your React components
|
|
34
|
-
import React from 'react';
|
|
35
|
-
import { AppRegistry } from 'react-native';
|
|
36
|
-
import YourMainComponent from './YourMainComponent';
|
|
37
|
-
|
|
38
|
-
const App = () => <YourMainComponent />;
|
|
39
|
-
AppRegistry.registerComponent('YourAppName', () => App);
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
### 2. Use Safe Wallet Creation
|
|
43
|
-
|
|
44
|
-
Replace your current wallet creation code with the new safe method:
|
|
45
|
-
|
|
46
|
-
```typescript
|
|
47
|
-
import { testCircomlibjs, createDopWalletSafe } from 'dop-wallet-v6';
|
|
48
|
-
|
|
49
|
-
export const createWalletSafely = async () => {
|
|
50
|
-
try {
|
|
51
|
-
// Test circomlibjs first
|
|
52
|
-
console.log('Testing circomlibjs...');
|
|
53
|
-
await testCircomlibjs();
|
|
54
|
-
console.log('✅ CircomLibJS working correctly');
|
|
55
|
-
|
|
56
|
-
// Create wallet with timeout protection
|
|
57
|
-
const encryptionKey = Buffer.from('your-32-byte-hex-key', 'hex');
|
|
58
|
-
const mnemonic = 'your twelve word mnemonic phrase here or leave undefined';
|
|
59
|
-
|
|
60
|
-
const wallet = await createDopWalletSafe(
|
|
61
|
-
encryptionKey,
|
|
62
|
-
mnemonic,
|
|
63
|
-
undefined, // creationBlockNumbers
|
|
64
|
-
0, // derivationIndex
|
|
65
|
-
60000 // 60 second timeout
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
console.log('✅ Wallet created successfully:', wallet.id);
|
|
69
|
-
return wallet;
|
|
70
|
-
|
|
71
|
-
} catch (error) {
|
|
72
|
-
console.error('❌ Wallet creation failed:', error);
|
|
73
|
-
|
|
74
|
-
if (error.message.includes('timed out')) {
|
|
75
|
-
Alert.alert(
|
|
76
|
-
'Wallet Creation Timeout',
|
|
77
|
-
'The wallet creation process timed out. This usually indicates compatibility issues. Please restart the app and try again.'
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
throw error;
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### 3. Debug if Still Having Issues
|
|
87
|
-
|
|
88
|
-
If the wallet creation still hangs, use this debug function to isolate the problem:
|
|
89
|
-
|
|
90
|
-
```typescript
|
|
91
|
-
import { testCircomlibjs } from 'dop-wallet-v6';
|
|
92
|
-
|
|
93
|
-
export const debugCircomLibJS = async () => {
|
|
94
|
-
console.log('🔍 Starting CircomLibJS debug test...');
|
|
95
|
-
|
|
96
|
-
try {
|
|
97
|
-
// Test with 30 second timeout
|
|
98
|
-
const timeoutPromise = new Promise((_, reject) =>
|
|
99
|
-
setTimeout(() => reject(new Error('CircomLibJS test timed out after 30 seconds')), 30000)
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
const testPromise = testCircomlibjs();
|
|
103
|
-
|
|
104
|
-
await Promise.race([testPromise, timeoutPromise]);
|
|
105
|
-
|
|
106
|
-
console.log('✅ CircomLibJS debug test PASSED');
|
|
107
|
-
return true;
|
|
108
|
-
|
|
109
|
-
} catch (error) {
|
|
110
|
-
console.error('❌ CircomLibJS debug test FAILED:', error);
|
|
111
|
-
|
|
112
|
-
if (error.message.includes('timed out')) {
|
|
113
|
-
console.error(`
|
|
114
|
-
⚠️ CIRCOMLIBJS IS HANGING!
|
|
115
|
-
|
|
116
|
-
SOLUTIONS:
|
|
117
|
-
1. Restart your React Native app completely
|
|
118
|
-
2. Ensure you added the Worker/WebAssembly disabling code to App.js
|
|
119
|
-
3. Clear Metro cache: npx react-native start --reset-cache
|
|
120
|
-
4. Check that react-native-shims.js is being imported correctly
|
|
121
|
-
`);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
return false;
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
## 🛠️ Additional Fixes
|
|
130
|
-
|
|
131
|
-
### Metro Configuration
|
|
132
|
-
|
|
133
|
-
Ensure your `metro.config.js` includes proper Node.js polyfills:
|
|
134
|
-
|
|
135
|
-
```javascript
|
|
136
|
-
const { getDefaultConfig } = require('expo/metro-config');
|
|
137
|
-
|
|
138
|
-
const config = getDefaultConfig(__dirname);
|
|
139
|
-
|
|
140
|
-
config.resolver.alias = {
|
|
141
|
-
'crypto': require.resolve('crypto-browserify'),
|
|
142
|
-
'stream': require.resolve('stream-browserify'),
|
|
143
|
-
'util': require.resolve('util'),
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
// Critical: Ensure circomlibjs uses browser fallbacks
|
|
147
|
-
config.transformer.minifierConfig = {
|
|
148
|
-
mangle: {
|
|
149
|
-
keep_fnames: true, // Keep function names for circomlibjs
|
|
150
|
-
},
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
module.exports = config;
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Package.json Dependencies
|
|
157
|
-
|
|
158
|
-
Ensure you have all required dependencies:
|
|
159
|
-
|
|
160
|
-
```json
|
|
161
|
-
{
|
|
162
|
-
"dependencies": {
|
|
163
|
-
"dop-wallet-v6": "^1.2.10",
|
|
164
|
-
"react-native-get-random-values": "^1.9.0",
|
|
165
|
-
"react-native-url-polyfill": "^2.0.0",
|
|
166
|
-
"buffer": "^6.0.3",
|
|
167
|
-
"crypto-browserify": "^3.12.0",
|
|
168
|
-
"stream-browserify": "^3.0.0",
|
|
169
|
-
"util": "^0.12.5"
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
## 🧪 Testing Your Fix
|
|
175
|
-
|
|
176
|
-
Use this simple test to verify everything is working:
|
|
177
|
-
|
|
178
|
-
```typescript
|
|
179
|
-
import { Alert } from 'react-native';
|
|
180
|
-
import { testCircomlibjs, createDopWalletSafe } from 'dop-wallet-v6';
|
|
181
|
-
|
|
182
|
-
export const testWalletIntegration = async () => {
|
|
183
|
-
try {
|
|
184
|
-
console.log('🧪 Starting wallet integration test...');
|
|
185
|
-
|
|
186
|
-
// Step 1: Test circomlibjs
|
|
187
|
-
console.log('Step 1: Testing circomlibjs...');
|
|
188
|
-
await testCircomlibjs();
|
|
189
|
-
console.log('✅ Step 1 passed');
|
|
190
|
-
|
|
191
|
-
// Step 2: Test engine initialization
|
|
192
|
-
console.log('Step 2: Testing engine initialization...');
|
|
193
|
-
await initializeDopEngine();
|
|
194
|
-
console.log('✅ Step 2 passed');
|
|
195
|
-
|
|
196
|
-
// Step 3: Test wallet creation
|
|
197
|
-
console.log('Step 3: Testing wallet creation...');
|
|
198
|
-
const encryptionKey = Buffer.from('4b22bfaa2cd4826c04efa1beb5c3debf8a534223200ce50ce3ca979af93911c1', 'hex');
|
|
199
|
-
const testWallet = await createDopWalletSafe(
|
|
200
|
-
encryptionKey,
|
|
201
|
-
'abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about',
|
|
202
|
-
undefined,
|
|
203
|
-
0,
|
|
204
|
-
30000 // 30 second timeout for testing
|
|
205
|
-
);
|
|
206
|
-
console.log('✅ Step 3 passed - Wallet ID:', testWallet.id);
|
|
207
|
-
|
|
208
|
-
Alert.alert('✅ Success', 'All wallet integration tests passed!');
|
|
209
|
-
return true;
|
|
210
|
-
|
|
211
|
-
} catch (error) {
|
|
212
|
-
console.error('❌ Wallet integration test failed:', error);
|
|
213
|
-
Alert.alert('❌ Test Failed', `Error: ${error.message}`);
|
|
214
|
-
return false;
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
## 📞 When to Contact Support
|
|
220
|
-
|
|
221
|
-
Contact the DOP team if:
|
|
222
|
-
|
|
223
|
-
1. ✅ You've implemented all the fixes above
|
|
224
|
-
2. ✅ The `testCircomlibjs()` function passes
|
|
225
|
-
3. ❌ But `createDopWalletSafe()` still hangs
|
|
226
|
-
|
|
227
|
-
Include this debug information:
|
|
228
|
-
|
|
229
|
-
```typescript
|
|
230
|
-
// Run this and include the output when contacting support
|
|
231
|
-
export const collectDebugInfo = async () => {
|
|
232
|
-
const debugInfo = {
|
|
233
|
-
platform: Platform.OS,
|
|
234
|
-
reactNativeVersion: require('react-native/package.json').version,
|
|
235
|
-
timestamp: new Date().toISOString(),
|
|
236
|
-
|
|
237
|
-
// Test basic environment
|
|
238
|
-
hasBuffer: typeof Buffer !== 'undefined',
|
|
239
|
-
hasCrypto: typeof global.crypto !== 'undefined',
|
|
240
|
-
hasWorker: typeof global.Worker !== 'undefined',
|
|
241
|
-
hasWebAssembly: typeof global.WebAssembly !== 'undefined',
|
|
242
|
-
|
|
243
|
-
// Test circomlibjs
|
|
244
|
-
circomlibsTest: null,
|
|
245
|
-
};
|
|
246
|
-
|
|
247
|
-
try {
|
|
248
|
-
await testCircomlibjs();
|
|
249
|
-
debugInfo.circomlibsTest = 'PASSED';
|
|
250
|
-
} catch (error) {
|
|
251
|
-
debugInfo.circomlibsTest = `FAILED: ${error.message}`;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
console.log('Debug Info for Support:', JSON.stringify(debugInfo, null, 2));
|
|
255
|
-
return debugInfo;
|
|
256
|
-
};
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
## Summary for React Native Developers
|
|
260
|
-
|
|
261
|
-
**The main issue**: DOP Wallet uses advanced cryptography (`circomlibjs`) that doesn't work out-of-the-box in React Native.
|
|
262
|
-
|
|
263
|
-
**The solution**:
|
|
264
|
-
1. Disable Web Workers/WebAssembly **before** importing DOP Wallet
|
|
265
|
-
2. Use the new `createDopWalletSafe()` function with timeout protection
|
|
266
|
-
3. Test with `testCircomlibjs()` to verify everything works
|
|
267
|
-
|
|
268
|
-
**Most important**: Add the Worker/WebAssembly disabling code at the very top of your App.js file, before any other imports.
|
|
269
|
-
|
|
270
|
-
This fix resolves the hanging wallet creation issue that was blocking React Native integration.
|
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
# Selective Transparency Feature
|
|
2
|
-
|
|
3
|
-
The Selective Transparency feature allows DOP Wallet users to control the visibility of their assets, balances, NFTs, and profile information. Users can define privacy settings, manage whitelists, and generate cryptographic proofs for asset exposure.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
### 1. User Profile Management
|
|
8
|
-
- Create and manage user profiles with username, bio, profile picture, and social links
|
|
9
|
-
- Profile customization with theme preferences and privacy alerts
|
|
10
|
-
- Profile validation and search functionality
|
|
11
|
-
|
|
12
|
-
### 2. Asset Visibility Control
|
|
13
|
-
- Control visibility of token balances, NFTs, and transaction history
|
|
14
|
-
- Granular control per token/NFT contract address
|
|
15
|
-
- Global visibility settings with per-asset overrides
|
|
16
|
-
|
|
17
|
-
### 3. Whitelist Management
|
|
18
|
-
- Manage a list of trusted addresses that can view private information
|
|
19
|
-
- Granular permissions for each whitelisted address
|
|
20
|
-
- Support for viewing balances, NFTs, transactions, and profile data
|
|
21
|
-
|
|
22
|
-
### 4. Viewing Requests & Proofs
|
|
23
|
-
- Create and manage viewing requests from other users
|
|
24
|
-
- Generate cryptographic proofs for authorized visibility
|
|
25
|
-
- Proof verification and expiration management
|
|
26
|
-
|
|
27
|
-
## Usage Examples
|
|
28
|
-
|
|
29
|
-
### Profile Management
|
|
30
|
-
|
|
31
|
-
```typescript
|
|
32
|
-
import { ProfileManager } from 'dop-wallet-v3';
|
|
33
|
-
|
|
34
|
-
const profileManager = new ProfileManager();
|
|
35
|
-
|
|
36
|
-
// Create a user profile
|
|
37
|
-
const profile = await profileManager.createProfile('wallet-id', {
|
|
38
|
-
username: 'alice',
|
|
39
|
-
bio: 'DeFi enthusiast',
|
|
40
|
-
profilePicture: 'https://example.com/avatar.jpg',
|
|
41
|
-
socialLinks: {
|
|
42
|
-
twitter: 'https://twitter.com/alice',
|
|
43
|
-
github: 'https://github.com/alice'
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
// Update profile
|
|
48
|
-
await profileManager.updateProfile('wallet-id', {
|
|
49
|
-
bio: 'Privacy-focused DeFi user'
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
// Set profile customization
|
|
53
|
-
await profileManager.setCustomization('wallet-id', {
|
|
54
|
-
theme: 'dark',
|
|
55
|
-
displayPreferences: {
|
|
56
|
-
currencyFormat: 'USD',
|
|
57
|
-
numberFormat: 'abbreviated',
|
|
58
|
-
dateFormat: 'MM/DD/YYYY',
|
|
59
|
-
timeFormat: '24h'
|
|
60
|
-
},
|
|
61
|
-
privacyAlerts: {
|
|
62
|
-
newViewingRequest: true,
|
|
63
|
-
profileUpdate: false,
|
|
64
|
-
assetVisibilityChange: true
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
### Selective Transparency Settings
|
|
70
|
-
|
|
71
|
-
```typescript
|
|
72
|
-
import { SelectiveTransparencyManager } from 'dop-wallet-v3';
|
|
73
|
-
|
|
74
|
-
const transparencyManager = new SelectiveTransparencyManager();
|
|
75
|
-
|
|
76
|
-
// Create default privacy settings
|
|
77
|
-
const settings = await transparencyManager.createDefaultSettings('wallet-id');
|
|
78
|
-
|
|
79
|
-
// Update global visibility settings
|
|
80
|
-
await transparencyManager.updateSettings('wallet-id', {
|
|
81
|
-
assetVisibility: {
|
|
82
|
-
showTokenBalances: false, // Hide token balances by default
|
|
83
|
-
showNFTs: true, // Show NFTs
|
|
84
|
-
showTransactionHistory: false, // Hide transaction history
|
|
85
|
-
showAddresses: false // Hide addresses
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
// Set specific token visibility
|
|
90
|
-
await transparencyManager.setTokenVisibility('wallet-id', '0x...tokenAddress', {
|
|
91
|
-
isVisible: true,
|
|
92
|
-
showBalance: true,
|
|
93
|
-
showTransactions: false
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
// Set NFT collection visibility
|
|
97
|
-
await transparencyManager.setNFTVisibility('wallet-id', '0x...nftAddress', {
|
|
98
|
-
isVisible: true,
|
|
99
|
-
showCollection: true,
|
|
100
|
-
showTransactions: false
|
|
101
|
-
});
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
### Whitelist Management
|
|
105
|
-
|
|
106
|
-
```typescript
|
|
107
|
-
// Add address to whitelist with specific permissions
|
|
108
|
-
await transparencyManager.addToWhitelist('wallet-id', '0x...trustedAddress', {
|
|
109
|
-
viewBalances: true,
|
|
110
|
-
viewNFTs: true,
|
|
111
|
-
viewTransactions: false,
|
|
112
|
-
viewProfile: true
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
// Check if address has permission
|
|
116
|
-
const canViewBalances = await transparencyManager.checkWhitelistPermission(
|
|
117
|
-
'wallet-id',
|
|
118
|
-
'0x...address',
|
|
119
|
-
'viewBalances'
|
|
120
|
-
);
|
|
121
|
-
|
|
122
|
-
// Remove from whitelist
|
|
123
|
-
await transparencyManager.removeFromWhitelist('wallet-id', '0x...address');
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Viewing Requests & Proofs
|
|
127
|
-
|
|
128
|
-
```typescript
|
|
129
|
-
// Create a viewing request
|
|
130
|
-
const request = await transparencyManager.createViewingRequest(
|
|
131
|
-
'requester-id',
|
|
132
|
-
'wallet-id',
|
|
133
|
-
'balance',
|
|
134
|
-
'0x...tokenAddress',
|
|
135
|
-
'Can I see your USDC balance?'
|
|
136
|
-
);
|
|
137
|
-
|
|
138
|
-
// Respond to viewing request
|
|
139
|
-
await transparencyManager.respondToViewingRequest(request.id, 'approved');
|
|
140
|
-
|
|
141
|
-
// Generate visibility proof (requires whitelist permission)
|
|
142
|
-
const proof = await transparencyManager.generateVisibilityProof(
|
|
143
|
-
'wallet-id',
|
|
144
|
-
'requester-id',
|
|
145
|
-
'balance',
|
|
146
|
-
'0x...tokenAddress'
|
|
147
|
-
);
|
|
148
|
-
|
|
149
|
-
// Verify proof
|
|
150
|
-
const isValid = await transparencyManager.verifyVisibilityProof(proof.id);
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### Event Handling
|
|
154
|
-
|
|
155
|
-
```typescript
|
|
156
|
-
import { setSelectiveTransparencyCallback } from 'dop-wallet-v3';
|
|
157
|
-
|
|
158
|
-
// Set up event listener
|
|
159
|
-
setSelectiveTransparencyCallback((event) => {
|
|
160
|
-
switch (event.type) {
|
|
161
|
-
case 'profile_updated':
|
|
162
|
-
console.log('Profile updated for wallet:', event.data.walletId);
|
|
163
|
-
break;
|
|
164
|
-
case 'settings_changed':
|
|
165
|
-
console.log('Privacy settings changed for wallet:', event.data.walletId);
|
|
166
|
-
break;
|
|
167
|
-
case 'viewing_request':
|
|
168
|
-
console.log('New viewing request:', event.data);
|
|
169
|
-
break;
|
|
170
|
-
case 'proof_generated':
|
|
171
|
-
console.log('Visibility proof generated:', event.data);
|
|
172
|
-
break;
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
## Security Features
|
|
178
|
-
|
|
179
|
-
1. **Cryptographic Proofs**: All visibility proofs are cryptographically generated and time-limited
|
|
180
|
-
2. **Whitelist-Only Proof Generation**: Only explicitly whitelisted addresses can generate visibility proofs
|
|
181
|
-
3. **Granular Permissions**: Fine-grained control over what information each address can view
|
|
182
|
-
4. **Expiration Management**: Viewing requests and proofs automatically expire
|
|
183
|
-
5. **Validation**: All profile data and settings are validated before storage
|
|
184
|
-
|
|
185
|
-
## Integration Notes
|
|
186
|
-
|
|
187
|
-
- The feature is fully integrated into the main DOP Wallet SDK exports
|
|
188
|
-
- All operations are asynchronous and return Promises
|
|
189
|
-
- Profile and transparency managers maintain in-memory state (consider persisting to storage in production)
|
|
190
|
-
- Event callbacks allow for real-time UI updates
|
|
191
|
-
- All methods include proper error handling and sanitization
|
|
192
|
-
|
|
193
|
-
## Testing
|
|
194
|
-
|
|
195
|
-
The feature includes comprehensive unit tests covering:
|
|
196
|
-
- Profile creation, updates, and validation
|
|
197
|
-
- Privacy settings management
|
|
198
|
-
- Token and NFT visibility controls
|
|
199
|
-
- Whitelist management
|
|
200
|
-
- Viewing request workflows
|
|
201
|
-
- Visibility proof generation and verification
|
|
202
|
-
- Error handling and edge cases
|
|
203
|
-
|
|
204
|
-
Run tests with:
|
|
205
|
-
```bash
|
|
206
|
-
npm test -- --grep "ProfileManager|SelectiveTransparencyManager"
|
|
207
|
-
```
|