|
| 1 | +# ActionButtonBody Wallet Connection Refactor Plan |
| 2 | + |
| 3 | +## Problem Statement |
| 4 | + |
| 5 | +The `ActionButtonBody` component is currently tightly coupled to Sequence Connect's `useOpenConnectModal` hook, making it incompatible with other wallet providers like Privy. This causes the error "useGenericContext must be used within a Provider" when used in the Privy playground environment. |
| 6 | + |
| 7 | +## Current Architecture |
| 8 | + |
| 9 | +### ActionButtonBody Dependencies |
| 10 | +- **Location**: `sdk/src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx` |
| 11 | +- **Hard Dependency**: `useOpenConnectModal` from `@0xsequence/connect` |
| 12 | +- **Usage Pattern**: |
| 13 | + 1. Check if wallet connected via `useWallet()` |
| 14 | + 2. If not connected, set pending action and call `setOpenConnectModal(true)` |
| 15 | + 3. If connected, execute action directly |
| 16 | + |
| 17 | +### Wallet Provider Environments |
| 18 | +1. **Sequence Connect**: Uses `SequenceConnectProvider` + `useOpenConnectModal` |
| 19 | +2. **Privy**: Uses `PrivyProvider` + `useLogin()` from `@privy-io/react-auth` |
| 20 | +3. **Future**: Potentially other wallet providers |
| 21 | + |
| 22 | +## Proposed Solution: Wallet Connection Abstraction |
| 23 | + |
| 24 | +### Phase 1: Create Wallet Connection Context |
| 25 | + |
| 26 | +#### 1.1 Define Wallet Connection Interface |
| 27 | +```typescript |
| 28 | +// sdk/src/react/_internal/wallet/types.ts |
| 29 | +interface WalletConnectionHandler { |
| 30 | + openConnectModal: () => void; |
| 31 | + isConnected: boolean; |
| 32 | + address?: string; |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +#### 1.2 Create Wallet Connection Context |
| 37 | +```typescript |
| 38 | +// sdk/src/react/_internal/wallet/WalletConnectionContext.tsx |
| 39 | +const WalletConnectionContext = createContext<WalletConnectionHandler | null>(null); |
| 40 | + |
| 41 | +export const useWalletConnection = () => { |
| 42 | + const context = useContext(WalletConnectionContext); |
| 43 | + if (!context) { |
| 44 | + throw new Error('useWalletConnection must be used within a WalletConnectionProvider'); |
| 45 | + } |
| 46 | + return context; |
| 47 | +}; |
| 48 | +``` |
| 49 | + |
| 50 | +#### 1.3 Create Provider Implementations |
| 51 | + |
| 52 | +**Sequence Connect Provider**: |
| 53 | +```typescript |
| 54 | +// sdk/src/react/_internal/wallet/providers/SequenceWalletConnectionProvider.tsx |
| 55 | +export const SequenceWalletConnectionProvider = ({ children }) => { |
| 56 | + const { setOpenConnectModal } = useOpenConnectModal(); |
| 57 | + const { address } = useWallet(); |
| 58 | + |
| 59 | + const handler: WalletConnectionHandler = { |
| 60 | + openConnectModal: () => setOpenConnectModal(true), |
| 61 | + isConnected: !!address, |
| 62 | + address |
| 63 | + }; |
| 64 | + |
| 65 | + return ( |
| 66 | + <WalletConnectionContext.Provider value={handler}> |
| 67 | + {children} |
| 68 | + </WalletConnectionContext.Provider> |
| 69 | + ); |
| 70 | +}; |
| 71 | +``` |
| 72 | + |
| 73 | +**Privy Provider**: |
| 74 | +```typescript |
| 75 | +// sdk/src/react/_internal/wallet/providers/PrivyWalletConnectionProvider.tsx |
| 76 | +export const PrivyWalletConnectionProvider = ({ children }) => { |
| 77 | + const { login, authenticated } = usePrivy(); |
| 78 | + const { address } = useAccount(); |
| 79 | + |
| 80 | + const handler: WalletConnectionHandler = { |
| 81 | + openConnectModal: () => login(), |
| 82 | + isConnected: authenticated && !!address, |
| 83 | + address |
| 84 | + }; |
| 85 | + |
| 86 | + return ( |
| 87 | + <WalletConnectionContext.Provider value={handler}> |
| 88 | + {children} |
| 89 | + </WalletConnectionContext.Provider> |
| 90 | + ); |
| 91 | +}; |
| 92 | +``` |
| 93 | + |
| 94 | +### Phase 2: Auto-Detection Provider |
| 95 | + |
| 96 | +#### 2.1 Create Smart Provider |
| 97 | +```typescript |
| 98 | +// sdk/src/react/_internal/wallet/SmartWalletConnectionProvider.tsx |
| 99 | +export const SmartWalletConnectionProvider = ({ children }) => { |
| 100 | + // Detect which wallet provider is available in the React tree |
| 101 | + const hasSequenceConnect = useContext(SequenceConnectContext) !== null; |
| 102 | + const hasPrivy = useContext(PrivyContext) !== null; |
| 103 | + |
| 104 | + if (hasSequenceConnect) { |
| 105 | + return <SequenceWalletConnectionProvider>{children}</SequenceWalletConnectionProvider>; |
| 106 | + } |
| 107 | + |
| 108 | + if (hasPrivy) { |
| 109 | + return <PrivyWalletConnectionProvider>{children}</PrivyWalletConnectionProvider>; |
| 110 | + } |
| 111 | + |
| 112 | + throw new Error('No supported wallet provider found'); |
| 113 | +}; |
| 114 | +``` |
| 115 | + |
| 116 | +### Phase 3: Update ActionButtonBody |
| 117 | + |
| 118 | +#### 3.1 Refactor ActionButtonBody |
| 119 | +```typescript |
| 120 | +// sdk/src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx |
| 121 | +export const ActionButtonBody = ({ action, onClick, tokenId, children }) => { |
| 122 | + const { openConnectModal, isConnected } = useWalletConnection(); |
| 123 | + const { setPendingAction } = useMarketplaceStore(); |
| 124 | + |
| 125 | + const handleClick = () => { |
| 126 | + if (!isConnected && action) { |
| 127 | + setPendingAction(action, onClick, tokenId); |
| 128 | + openConnectModal(); |
| 129 | + } else { |
| 130 | + onClick?.(); |
| 131 | + } |
| 132 | + }; |
| 133 | + |
| 134 | + return ( |
| 135 | + <Button onClick={handleClick}> |
| 136 | + {children} |
| 137 | + </Button> |
| 138 | + ); |
| 139 | +}; |
| 140 | +``` |
| 141 | + |
| 142 | +### Phase 4: Integration Points |
| 143 | + |
| 144 | +#### 4.1 Update MarketplaceProvider |
| 145 | +```typescript |
| 146 | +// sdk/src/react/ui/components/MarketplaceProvider.tsx |
| 147 | +export const MarketplaceProvider = ({ children, config }) => { |
| 148 | + return ( |
| 149 | + <MarketplaceConfigProvider config={config}> |
| 150 | + <SmartWalletConnectionProvider> |
| 151 | + <MarketplaceStoreProvider> |
| 152 | + {children} |
| 153 | + </MarketplaceStoreProvider> |
| 154 | + </SmartWalletConnectionProvider> |
| 155 | + </MarketplaceConfigProvider> |
| 156 | + ); |
| 157 | +}; |
| 158 | +``` |
| 159 | + |
| 160 | +#### 4.2 Update Playground Providers |
| 161 | +No changes needed - the auto-detection will handle provider selection. |
| 162 | + |
| 163 | +## Implementation Steps |
| 164 | + |
| 165 | +### Step 1: Foundation (1-2 hours) |
| 166 | +- [ ] Create wallet connection types and interfaces |
| 167 | +- [ ] Create base WalletConnectionContext |
| 168 | +- [ ] Create useWalletConnection hook |
| 169 | + |
| 170 | +### Step 2: Provider Implementations (2-3 hours) |
| 171 | +- [ ] Implement SequenceWalletConnectionProvider |
| 172 | +- [ ] Implement PrivyWalletConnectionProvider |
| 173 | +- [ ] Test both providers in isolation |
| 174 | + |
| 175 | +### Step 3: Auto-Detection (1-2 hours) |
| 176 | +- [ ] Implement SmartWalletConnectionProvider |
| 177 | +- [ ] Add provider detection logic |
| 178 | +- [ ] Handle edge cases and error states |
| 179 | + |
| 180 | +### Step 4: ActionButtonBody Refactor (1 hour) |
| 181 | +- [ ] Remove useOpenConnectModal dependency |
| 182 | +- [ ] Update to use useWalletConnection |
| 183 | +- [ ] Maintain existing functionality |
| 184 | + |
| 185 | +### Step 5: Integration (1 hour) |
| 186 | +- [ ] Update MarketplaceProvider |
| 187 | +- [ ] Test in both playground environments |
| 188 | +- [ ] Verify all collectible actions work |
| 189 | + |
| 190 | +### Step 6: Testing & Validation (2-3 hours) |
| 191 | +- [ ] Test all collectible card actions (Buy, Sell, Transfer, etc.) |
| 192 | +- [ ] Test wallet connection flows in both environments |
| 193 | +- [ ] Test error handling and edge cases |
| 194 | +- [ ] Update any related tests |
| 195 | + |
| 196 | +## Benefits |
| 197 | + |
| 198 | +1. **Wallet Provider Agnostic**: ActionButtonBody works with any wallet provider |
| 199 | +2. **Zero Breaking Changes**: Existing implementations continue to work |
| 200 | +3. **Future Proof**: Easy to add new wallet providers |
| 201 | +4. **Clean Architecture**: Clear separation of concerns |
| 202 | +5. **Auto-Detection**: No manual configuration required |
| 203 | + |
| 204 | +## Risks & Mitigation |
| 205 | + |
| 206 | +### Risk: Provider Detection Failures |
| 207 | +**Mitigation**: Add comprehensive error handling and fallback mechanisms |
| 208 | + |
| 209 | +### Risk: Breaking Changes |
| 210 | +**Mitigation**: Maintain backward compatibility through gradual migration |
| 211 | + |
| 212 | +### Risk: Performance Impact |
| 213 | +**Mitigation**: Use React context efficiently, avoid unnecessary re-renders |
| 214 | + |
| 215 | +## Alternative Approaches Considered |
| 216 | + |
| 217 | +### Option A: Configuration-Based |
| 218 | +Add wallet connection config to SDK config. **Rejected**: Requires manual configuration. |
| 219 | + |
| 220 | +### Option B: Hook-Based Only |
| 221 | +Create useWalletConnection without context. **Rejected**: Harder to manage state across components. |
| 222 | + |
| 223 | +### Option C: Component Props |
| 224 | +Pass connection handler as props. **Rejected**: Requires changes to all parent components. |
| 225 | + |
| 226 | +## Success Criteria |
| 227 | + |
| 228 | +- [ ] Privy playground collectibles page loads without errors |
| 229 | +- [ ] All collectible actions work in both Sequence and Privy environments |
| 230 | +- [ ] No breaking changes to existing implementations |
| 231 | +- [ ] Clean, maintainable code architecture |
| 232 | +- [ ] Comprehensive test coverage |
| 233 | + |
| 234 | +## Timeline |
| 235 | + |
| 236 | +**Total Estimated Time**: 8-12 hours |
| 237 | +**Target Completion**: 1-2 days |
| 238 | + |
| 239 | +This refactor will make the ActionButtonBody component truly wallet-agnostic while maintaining full backward compatibility and enabling future wallet provider integrations. |
0 commit comments