Skip to content

Commit e3b401b

Browse files
authored
Merge pull request #35 from terrancrypt/fix/rainbow-connect
Fix/rainbow connect
2 parents fd1c6bd + 1463780 commit e3b401b

File tree

7 files changed

+326
-69
lines changed

7 files changed

+326
-69
lines changed

docs/EVM_PROVIDER_README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ window.addEventListener('eip6963:announceProvider', (event) => {
6161
window.dispatchEvent(new CustomEvent('eip6963:requestProvider'));
6262

6363
// Find Purro Wallet
64-
const purroProvider = providers.find(p => p.info.rdns === 'com.purro.wallet');
64+
const purroProvider = providers.find(p => p.info.rdns === 'xyz.purro.app');
6565
if (purroProvider) {
6666
const provider = purroProvider.provider;
6767

@@ -75,7 +75,7 @@ if (purroProvider) {
7575

7676
```javascript
7777
// Check window.ethereum
78-
if (window.ethereum?.info?.rdns === 'com.purro.wallet') {
78+
if (window.ethereum?.info?.rdns === 'xyz.purro.app') {
7979
const provider = window.ethereum;
8080
// Use provider...
8181
}

docs/RAINBOW_CONNECTION_FIXES.md

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# 🌈 Rainbow Wallet Connection Fixes
2+
3+
## 🐛 Vấn đề được phát hiện
4+
5+
### 1. **Documentation RDNS không nhất quán (đã fix)**
6+
**Vấn đề**: RDNS identifier trong documentation không khớp với code
7+
- Code (đúng): `xyz.purro.app`
8+
- Documentation (cũ): `com.purro.wallet`
9+
10+
**Fix**: Đã cập nhật tất cả documentation để sử dụng RDNS đúng là `xyz.purro.app`
11+
12+
### 2. **Provider Injection Conflicts**
13+
**Vấn đề**: Purro luôn inject vào `window.ethereum`, gây conflict với Rainbow
14+
- Rainbow có thể load trước Purro
15+
- Purro overwrite Rainbow provider
16+
- Dẫn đến Rainbow không thể hoạt động
17+
18+
### 3. **EIP-6963 Announcement Timing**
19+
**Vấn đề**: Provider announcement không đủ linh hoạt cho Rainbow
20+
- Chỉ announce 2 lần (100ms, 1000ms)
21+
- Rainbow có thể setup listener muộn hơn
22+
- Thiếu logging để debug
23+
24+
## 🔧 Các Fix đã thực hiện
25+
26+
### Fix 1: Cập nhật Documentation RDNS
27+
```typescript
28+
// RDNS đúng trong code (không thay đổi)
29+
rdns: 'xyz.purro.app'
30+
31+
// Đã cập nhật documentation để match với code
32+
// Trước: docs sử dụng 'com.purro.wallet'
33+
// Sau: docs sử dụng 'xyz.purro.app'
34+
```
35+
36+
### Fix 2: Cải thiện Provider Injection Logic
37+
```typescript
38+
// Trước - Luôn overwrite
39+
(window as any).ethereum = evmProvider;
40+
41+
// Sau - Kiểm tra conflict
42+
if (!(window as any).ethereum) {
43+
(window as any).ethereum = evmProvider;
44+
console.log('🟣 Purro: Set as primary ethereum provider');
45+
} else {
46+
// Nếu đã có provider khác, thêm Purro như secondary
47+
if (!(window as any).ethereum.isPurro) {
48+
(window as any).ethereum.purro = evmProvider;
49+
console.log('🟣 Purro: Added as secondary provider to existing ethereum object');
50+
}
51+
}
52+
```
53+
54+
### Fix 3: Cải thiện EIP-6963 Timing
55+
```typescript
56+
// Trước - Chỉ 2 announcement
57+
setTimeout(() => this.announceProvider(), 100);
58+
setTimeout(() => this.announceProvider(), 1000);
59+
60+
// Sau - Nhiều announcement với delays khác nhau
61+
const delays = [50, 100, 300, 500, 1000, 2000];
62+
delays.forEach(delay => {
63+
setTimeout(() => {
64+
this.announceProvider();
65+
}, delay);
66+
});
67+
```
68+
69+
### Fix 4: Thêm Debug Logging
70+
```typescript
71+
// Log provider detection
72+
if ((window as any).ethereum) {
73+
console.log('🟣 Purro: Existing ethereum provider detected:', {
74+
isMetaMask: (window as any).ethereum.isMetaMask,
75+
isRainbow: (window as any).ethereum.isRainbow,
76+
rdns: (window as any).ethereum.info?.rdns
77+
});
78+
}
79+
80+
// Log EIP-6963 announcements
81+
console.log('🟣 Purro: Announced EIP-6963 provider', {
82+
rdns: this.providerInfo.rdns,
83+
name: this.providerInfo.name,
84+
uuid: this.providerInfo.uuid,
85+
timestamp: new Date().toISOString()
86+
});
87+
```
88+
89+
## 🧪 Test Case
90+
91+
Đã tạo `test-rainbow-connection.html` để test:
92+
- ✅ Provider detection (EIP-6963 và legacy)
93+
- ✅ Rainbow connection
94+
- ✅ Purro connection
95+
- ✅ Method testing
96+
- ✅ Debug logging
97+
98+
### Cách sử dụng test:
99+
1. Mở `test-rainbow-connection.html` trong browser
100+
2. Đảm bảo cả Rainbow và Purro extension đã install
101+
3. Click "Detect All Providers" để xem providers
102+
4. Test connection với từng wallet
103+
5. Xem debug logs để troubleshoot
104+
105+
## 📊 Kết quả mong đợi
106+
107+
### Với Rainbow Wallet:
108+
- ✅ Rainbow có thể detect và sử dụng được
109+
- ✅ Purro không conflict với Rainbow
110+
- ✅ Cả hai wallet có thể coexist
111+
112+
### Với EIP-6963:
113+
- ✅ Purro announce với đúng RDNS: `xyz.purro.app`
114+
- ✅ Multiple announcements catch late listeners
115+
- ✅ Rainbow và các wallet khác có thể detect Purro
116+
117+
### Provider Injection:
118+
- ✅ Không overwrite existing providers
119+
- ✅ Purro available qua `window.purro`
120+
- ✅ Nếu không có provider nào, Purro sẽ là `window.ethereum`
121+
122+
## 🔍 Debug Guide
123+
124+
### Kiểm tra Provider Detection:
125+
```javascript
126+
// Kiểm tra EIP-6963 providers
127+
const providers = [];
128+
window.addEventListener('eip6963:announceProvider', (event) => {
129+
providers.push(event.detail);
130+
console.log('Provider:', event.detail.info.name, event.detail.info.rdns);
131+
});
132+
window.dispatchEvent(new CustomEvent('eip6963:requestProvider'));
133+
134+
// Kiểm tra window providers
135+
console.log('window.ethereum:', window.ethereum);
136+
console.log('window.purro:', window.purro);
137+
```
138+
139+
### Kiểm tra Console Logs:
140+
Tìm các log messages:
141+
- `🟣 Purro: Initializing wallet providers...`
142+
- `🟣 Purro: Announced EIP-6963 provider`
143+
- `🌈 Rainbow provider detected!`
144+
145+
## 🚀 Triển khai
146+
147+
### Các file đã thay đổi:
148+
1. `src/background/providers/injected-provider-bundle.ts`
149+
- Cải thiện provider injection logic
150+
- Thêm debug logging
151+
- Cải thiện EIP-6963 timing
152+
2. `docs/EVM_PROVIDER_README.md` - Cập nhật RDNS examples
153+
3. `docs/README.md` - Cập nhật RDNS examples
154+
155+
### Các file mới:
156+
1. `test-rainbow-connection.html` - Test page
157+
2. `docs/RAINBOW_CONNECTION_FIXES.md` - Documentation
158+
159+
### Không breaking changes:
160+
- ✅ Backward compatible
161+
- ✅ Không ảnh hưởng existing functionality
162+
- ✅ Chỉ cải thiện compatibility
163+
164+
## 🔄 Next Steps
165+
166+
1. **Test với Rainbow wallet thực tế**
167+
- Cài đặt Rainbow extension
168+
- Test connection flow
169+
- Verify không có conflicts
170+
171+
2. **Test với các wallet khác**
172+
- MetaMask
173+
- Coinbase Wallet
174+
- WalletConnect
175+
176+
3. **Monitor production**
177+
- Thu thập feedback từ users
178+
- Monitor error logs
179+
- Cải thiện thêm nếu cần
180+
181+
## 📝 Ghi chú
182+
183+
- Tất cả changes đều maintain backward compatibility
184+
- Debug logging có thể disable trong production nếu cần
185+
- EIP-6963 standard được implement đúng spec
186+
- Provider conflicts được handle gracefully

docs/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ window.addEventListener('eip6963:announceProvider', (event) => {
246246
});
247247
window.dispatchEvent(new CustomEvent('eip6963:requestProvider'));
248248

249-
const purroProvider = providers.find(p => p.info.rdns === 'com.purro.wallet');
249+
const purroProvider = providers.find(p => p.info.rdns === 'xyz.purro.app');
250250
if (purroProvider) {
251251
const accounts = await purroProvider.provider.request({ method: 'eth_requestAccounts' });
252252
}
@@ -258,12 +258,12 @@ if (purroProvider) {
258258
function getProvider() {
259259
// Try EIP-6963 first
260260
const providers = getEIP6963Providers();
261-
const purro = providers.find(p => p.info.rdns === 'com.purro.wallet');
261+
const purro = providers.find(p => p.info.rdns === 'xyz.purro.app');
262262
if (purro) return purro.provider;
263263

264264
// Fallback to legacy
265265
if (window.purro) return window.purro;
266-
if (window.ethereum?.info?.rdns === 'com.purro.wallet') return window.ethereum;
266+
if (window.ethereum?.info?.rdns === 'xyz.purro.app') return window.ethereum;
267267

268268
throw new Error('Purro Wallet not found');
269269
}

src/background/providers/injected-provider-bundle.ts

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,31 @@ class EIP6963Provider {
4747
this.handleProviderRequest.bind(this) as EventListener
4848
);
4949

50+
// Announce immediately
5051
this.announceProvider();
5152

53+
// Announce after DOM is ready
5254
if (document.readyState === 'loading') {
5355
document.addEventListener('DOMContentLoaded', () => {
5456
this.announceProvider();
5557
});
56-
}
57-
58-
setTimeout(() => {
58+
} else {
59+
// DOM is already ready, announce again
5960
this.announceProvider();
60-
}, 100);
61+
}
6162

62-
setTimeout(() => {
63-
this.announceProvider();
64-
}, 1000);
63+
// Multiple announcements with different delays to catch late listeners
64+
// This is especially important for Rainbow wallet compatibility
65+
const delays = [50, 100, 300, 500, 1000, 2000];
66+
delays.forEach(delay => {
67+
setTimeout(() => {
68+
this.announceProvider();
69+
}, delay);
70+
});
6571
}
6672

6773
private handleProviderRequest(_event: EIP6963RequestProviderEvent) {
74+
console.log('🟣 Purro: Received EIP-6963 provider request, announcing provider');
6875
this.announceProvider();
6976
}
7077

@@ -77,6 +84,14 @@ class EIP6963Provider {
7784
}) as EIP6963AnnounceProviderEvent;
7885

7986
window.dispatchEvent(announceEvent);
87+
88+
// Debug logging for Rainbow wallet compatibility
89+
console.log('🟣 Purro: Announced EIP-6963 provider', {
90+
rdns: this.providerInfo.rdns,
91+
name: this.providerInfo.name,
92+
uuid: this.providerInfo.uuid,
93+
timestamp: new Date().toISOString()
94+
});
8095
}
8196

8297
private getIconDataUri(): string {
@@ -87,16 +102,39 @@ class EIP6963Provider {
87102
// Initialize providers
88103

89104
try {
90-
const providerManager = new PurroProviderManager();
105+
console.log('🟣 Purro: Initializing wallet providers...');
91106

107+
const providerManager = new PurroProviderManager();
92108
const evmProvider = new PurroEVMProvider(providerManager);
93109

110+
// Log existing providers for debugging
111+
if ((window as any).ethereum) {
112+
console.log('🟣 Purro: Existing ethereum provider detected:', {
113+
isMetaMask: (window as any).ethereum.isMetaMask,
114+
isRainbow: (window as any).ethereum.isRainbow,
115+
rdns: (window as any).ethereum.info?.rdns
116+
});
117+
}
118+
94119
// Expose providers to window object
95120
(window as any).purro = providerManager;
96-
(window as any).ethereum = evmProvider;
121+
122+
// Only inject to window.ethereum if no other provider exists
123+
// This prevents conflicts with other wallets like Rainbow
124+
if (!(window as any).ethereum) {
125+
(window as any).ethereum = evmProvider;
126+
console.log('🟣 Purro: Set as primary ethereum provider');
127+
} else {
128+
// If ethereum already exists, add Purro as a property
129+
if (!(window as any).ethereum.isPurro) {
130+
(window as any).ethereum.purro = evmProvider;
131+
console.log('🟣 Purro: Added as secondary provider to existing ethereum object');
132+
}
133+
}
97134

98135
// Initialize EIP-6963 provider with EVM provider
99136
new EIP6963Provider(evmProvider);
137+
console.log('🟣 Purro: EIP-6963 provider initialized');
100138

101139
// Dispatch ready events
102140
window.dispatchEvent(
@@ -110,6 +148,8 @@ try {
110148
detail: evmProvider,
111149
})
112150
);
151+
152+
console.log('🟣 Purro: All providers initialized successfully');
113153
} catch (error) {
114-
console.error('❌ Error initializing providers:', error);
154+
console.error('❌ Purro: Error initializing providers:', error);
115155
}

0 commit comments

Comments
 (0)