Skip to content

Commit fdc81b6

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Implement Swig wallet refactor sprint improvements (A1-E1)
Co-authored-by: 0xrinegade <[email protected]>
1 parent 52dd7cb commit fdc81b6

File tree

8 files changed

+830
-30
lines changed

8 files changed

+830
-30
lines changed

‎SWIG_WALLET_MIGRATION.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# Swig Wallet Migration Guide
2+
3+
## Migration Timeline
4+
5+
### Phase 1: Deprecation Warnings (Current)
6+
- `useSafeWallet` hook displays deprecation warnings in console
7+
- `WalletMultiButton` component shows deprecation warning
8+
- All functionality remains intact
9+
- **Timeline**: Current release
10+
11+
### Phase 2: Migration Support (v1.5.0)
12+
- Add migration tool to scan codebase for deprecated usage
13+
- Provide automated migration scripts
14+
- Enhanced documentation and examples
15+
- **Timeline**: Next minor release
16+
17+
### Phase 3: Removal (v2.0.0)
18+
- Remove deprecated aliases completely
19+
- Clean up legacy code paths
20+
- **Timeline**: Next major release
21+
22+
## Migration Steps
23+
24+
### 1. Update Hook Usage
25+
26+
**Before (Deprecated):**
27+
```javascript
28+
import { useSafeWallet } from './contexts/SwigWalletProvider';
29+
30+
const MyComponent = () => {
31+
const wallet = useSafeWallet();
32+
// ...
33+
};
34+
```
35+
36+
**After (Recommended):**
37+
```javascript
38+
import { useSwigWallet } from './contexts/SwigWalletProvider';
39+
40+
const MyComponent = () => {
41+
const wallet = useSwigWallet();
42+
// ...
43+
};
44+
```
45+
46+
### 2. Update Component Usage
47+
48+
**Before (Deprecated):**
49+
```javascript
50+
import { WalletMultiButton } from './components/SwigWalletButton';
51+
52+
const MyComponent = () => (
53+
<WalletMultiButton />
54+
);
55+
```
56+
57+
**After (Recommended):**
58+
```javascript
59+
import { SwigWalletButton } from './components/SwigWalletButton';
60+
61+
const MyComponent = () => (
62+
<SwigWalletButton />
63+
);
64+
```
65+
66+
### 3. Update Provider Usage
67+
68+
**Before (Legacy):**
69+
```javascript
70+
import { SafeWalletProvider } from './contexts/SwigWalletProvider';
71+
```
72+
73+
**After (Current):**
74+
```javascript
75+
import { SwigWalletProvider } from './contexts/SwigWalletProvider';
76+
```
77+
78+
## Breaking Changes in v2.0.0
79+
80+
1. **Removed Exports:**
81+
- `useSafeWallet` hook
82+
- `WalletMultiButton` component alias
83+
- `SafeWalletProvider` component alias
84+
85+
2. **Updated Interface:**
86+
- All wallet context properties now use consistent naming
87+
- Error handling moved to toast notifications by default
88+
89+
## Migration Tool Usage
90+
91+
Run the migration tool to automatically update your codebase:
92+
93+
```bash
94+
npm run migrate-wallet-hooks
95+
```
96+
97+
This will:
98+
- Scan your codebase for deprecated usage
99+
- Automatically replace deprecated hooks and components
100+
- Generate a migration report
101+
- Backup original files
102+
103+
## Need Help?
104+
105+
- Check the updated documentation in `SWIG_WALLET_INTEGRATION.md`
106+
- Review the example implementations in the `/examples` folder
107+
- Create an issue if you encounter migration problems
108+
109+
## Compatibility Promise
110+
111+
We guarantee backward compatibility through v1.x releases. All deprecated features will continue to work with warnings until v2.0.0.

‎src/components/ReconnectionModal.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/**
2+
* Reconnection Modal Component
3+
*
4+
* Displays reconnection progress to users with cancellation option
5+
*/
6+
7+
import React from 'react';
8+
9+
/**
10+
* Reconnection progress modal
11+
* @param {Object} props - Component props
12+
* @param {boolean} props.isVisible - Whether modal is visible
13+
* @param {Object} props.progress - Reconnection progress state
14+
* @param {Function} props.onCancel - Cancel callback
15+
*/
16+
export const ReconnectionModal = ({ isVisible, progress, onCancel }) => {
17+
if (!isVisible) return null;
18+
19+
const { attempt, maxAttempts, nextRetryIn, canCancel } = progress;
20+
21+
// Calculate progress percentage for visual indicator
22+
const progressPercentage = Math.max(0, Math.min(100, (attempt / maxAttempts) * 100));
23+
24+
// Calculate circle stroke for progress ring
25+
const radius = 36;
26+
const circumference = 2 * Math.PI * radius;
27+
const strokeDashoffset = circumference - (progressPercentage / 100) * circumference;
28+
29+
return (
30+
<div className="reconnection-modal">
31+
<div className="modal-content">
32+
{nextRetryIn > 0 ? (
33+
<>
34+
{/* Countdown display */}
35+
<div className="progress-ring">
36+
<svg width="80" height="80" className="transform -rotate-90">
37+
<circle
38+
cx="40"
39+
cy="40"
40+
r={radius}
41+
className="progress-circle"
42+
/>
43+
<circle
44+
cx="40"
45+
cy="40"
46+
r={radius}
47+
className="progress-circle active"
48+
strokeDasharray={circumference}
49+
strokeDashoffset={strokeDashoffset}
50+
/>
51+
</svg>
52+
<div className="absolute inset-0 flex items-center justify-center">
53+
<span className="text-2xl font-bold text-gray-700">{nextRetryIn}</span>
54+
</div>
55+
</div>
56+
57+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
58+
Connection Lost
59+
</h3>
60+
<p className="text-gray-600 mb-4">
61+
Attempting to reconnect in {nextRetryIn} second{nextRetryIn !== 1 ? 's' : ''}...
62+
</p>
63+
<p className="text-sm text-gray-500 mb-6">
64+
Attempt {attempt} of {maxAttempts}
65+
</p>
66+
</>
67+
) : (
68+
<>
69+
{/* Connecting display */}
70+
<div className="spinner"></div>
71+
72+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
73+
Reconnecting...
74+
</h3>
75+
<p className="text-gray-600 mb-4">
76+
Attempting to restore connection
77+
</p>
78+
<p className="text-sm text-gray-500 mb-6">
79+
Attempt {attempt} of {maxAttempts}
80+
</p>
81+
</>
82+
)}
83+
84+
{canCancel && (
85+
<div className="flex gap-3 justify-center">
86+
<button
87+
onClick={onCancel}
88+
className="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium"
89+
>
90+
Cancel
91+
</button>
92+
<button
93+
onClick={() => window.location.reload()}
94+
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-medium"
95+
>
96+
Refresh Page
97+
</button>
98+
</div>
99+
)}
100+
101+
{!canCancel && attempt >= maxAttempts && (
102+
<div className="flex gap-3 justify-center">
103+
<button
104+
onClick={() => window.location.reload()}
105+
className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 font-medium"
106+
>
107+
Refresh Page
108+
</button>
109+
</div>
110+
)}
111+
</div>
112+
</div>
113+
);
114+
};
115+
116+
export default ReconnectionModal;

‎src/components/SwigWalletButton.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,13 @@ export const SwigWalletButton = ({ className = '' }) => {
118118
};
119119

120120
// For compatibility with existing code
121-
export const WalletMultiButton = SwigWalletButton;
121+
// DEPRECATED: WalletMultiButton is deprecated. Use SwigWalletButton instead.
122+
export const WalletMultiButton = (props) => {
123+
console.warn(
124+
'[DEPRECATION WARNING] WalletMultiButton is deprecated and will be removed in v2.0.0. ' +
125+
'Please migrate to SwigWalletButton for the same functionality.'
126+
);
127+
return <SwigWalletButton {...props} />;
128+
};
122129

123130
export default SwigWalletButton;

0 commit comments

Comments
 (0)