Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials

docs/WALLET_INTEGRATION.md

@@ -0,0 +1,175 @@
+# Wallet Integration with Reown AppKit
+
+## Overview
+
+This document describes the wallet integration implementation using Reown AppKit, replacing the legacy Web3 React hooks.
+
+## Architecture
+
+### Core Components
+
+1. **useConnectionInfo Hook**: Centralized hook that provides wallet connection state
+2. **WalletErrorBoundary**: Error boundary for wallet-related errors
+3. **Wallet Configuration**: Centralized configuration for supported chains and wallets
+
+### Supported Wallets
+
+#### WalletConnect
+- **GoodWallet**: Primary wallet for GoodDollar ecosystem
+- **Valora**: Celo ecosystem wallet
+
+#### Social Login
+- **Google**: Social authentication
+
+#### Injected Wallets
+- **MetaMask**: Browser extension wallet
+- **MiniPay**: Opera browser wallet
+
+### Supported Networks
+
+- **Celo (42220)**: Primary network (default)
+- **Fuse (122)**: Secondary network
+- **Ethereum (1)**: Mainnet support
+
+## Implementation Details
+
+### useConnectionInfo Hook
+
+```typescript
+interface ConnectionInfo {
+    address?: string
+    chainId: number
+    walletInfo?: WalletInfo
+    isConnected: boolean
+    isSupportedChain: boolean
+    connectionStatus: 'disconnected' | 'connecting' | 'connected' | 'error'
+}
+```
+
+### Error Handling
+
+The `WalletErrorBoundary` component catches and handles wallet-related errors gracefully, providing user-friendly error messages and recovery options.
+
+### Security Features
+
+1. **Chain Validation**: Only supported chains are allowed
+2. **Connection Timeout**: 30-second timeout for wallet connections
+3. **Error Logging**: Comprehensive error logging for debugging
+
+## Testing
+
+### Manual Testing Checklist
+
+#### MiniPay
+- [ ] Connect wallet
+- [ ] Sign transactions
+- [ ] Switch networks
+- [ ] Disconnect wallet
+
+#### GoodWallet (WalletConnect)
+- [ ] Deep link from mobile
+- [ ] QR code on desktop
+- [ ] Transaction signing
+- [ ] Network switching
+
+#### Valora
+- [ ] Connect via WalletConnect
+- [ ] Transaction signing
+- [ ] Network switching
+
+#### MetaMask
+- [ ] Connect via injected provider
+- [ ] Switch to Celo network
+- [ ] Transaction signing
+- [ ] Explorer link navigation
+
+### Automated Testing
+
+Run the test suite:
+
+```bash
+yarn test useConnectionInfo
+```
+
+## Migration Guide
+
+### Replacing Legacy Hooks
+
+**Before:**
+```typescript
+import { useActiveWeb3React } from '@web3-react/core'
+import { useActiveOnboard } from '@web3-onboard/react'
+
+const { account, chainId } = useActiveWeb3React()
+const { wallet } = useActiveOnboard()
+```
+
+**After:**
+```typescript
+import { useConnectionInfo } from 'hooks/useConnectionInfo'
+
+const { address, chainId, walletInfo, isConnected } = useConnectionInfo()
+```
+
+### Error Handling
+
+**Before:**
+```typescript
+// Manual error handling
+if (!account) {
+    // Handle disconnected state
+}
+```
+
+**After:**
+```typescript
+// Automatic error handling with status
+if (connectionStatus === 'error') {
+    // Error boundary handles this
+}
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **WalletConnect not loading on localhost**
+   - Ensure `projectId` is set in environment variables
+   - Add localhost to allowed origins in WalletConnect project settings
+
+2. **Unsupported chain errors**
+   - Check if chain ID is in `SUPPORTED_CHAINS` array
+   - Verify network configuration
+
+3. **Connection timeout**
+   - Check network connectivity
+   - Verify wallet is properly installed
+   - Check for browser popup blockers
+
+### Debug Mode
+
+Enable debug logging by setting:
+```typescript
+localStorage.setItem('wallet-debug', 'true')
+```
+
+## Performance Considerations
+
+1. **Memoization**: `useConnectionInfo` uses `useMemo` to prevent unnecessary re-renders
+2. **Error Boundaries**: Isolate wallet errors to prevent app crashes
+3. **Connection Pooling**: Reuse connections where possible
+
+## Security Best Practices
+
+1. **Always validate chain IDs** before processing transactions
+2. **Use error boundaries** to handle connection failures gracefully
+3. **Log errors** for debugging without exposing sensitive information
+4. **Implement connection timeouts** to prevent hanging connections
+5. **Validate wallet authenticity** before processing sensitive operations
+
+## Future Enhancements
+
+1. **Multi-wallet support**: Allow users to connect multiple wallets
+2. **Wallet analytics**: Track wallet usage patterns
+3. **Enhanced error recovery**: Automatic retry mechanisms
+4. **Connection persistence**: Remember wallet preferences across sessions

src/components/AccountDetails/Transaction.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { CheckCircle, Triangle } from 'react-feather'
 import styled from 'styled-components'
-import { useActiveWeb3React } from '../../hooks/useActiveWeb3React'
 import { useAllTransactions } from '../../state/transactions/hooks'
 import { ExternalLink } from '../../theme'
 import { getExplorerLink } from '../../utils'
+import { getSafeChainId } from 'utils/chain'
 import Loader from '../Loader'
 import { RowFixed } from '../Row'
+import { useAppKitNetwork } from '@reown/appkit/react'
 
 const TransactionWrapper = styled.div`
     a {
@@ -69,7 +70,7 @@ const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>`
 `
 
 export default function Transaction({ hash }: { hash: string }): any {
-    const { chainId } = useActiveWeb3React()
+    const { chainId } = useAppKitNetwork()
     const allTransactions = useAllTransactions()
 
     const tx = allTransactions?.[hash]
@@ -81,7 +82,10 @@ export default function Transaction({ hash }: { hash: string }): any {
 
     return (
         <TransactionWrapper>
-            <TransactionState url={getExplorerLink(chainId, hash, 'transaction')} dataAttr="external_explorer">
+            <TransactionState
+                url={getExplorerLink(getSafeChainId(chainId), hash, 'transaction')}
+                dataAttr="external_explorer"
+            >
                 <RowFixed className="transition">
                     <TransactionStatusText>{summary} ↗</TransactionStatusText>
                 </RowFixed>

src/components/AccountDetails/index.tsx

@@ -3,16 +3,17 @@ import { useLingui } from '@lingui/react'
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 import styled from 'styled-components'
-import { useConnectWallet } from '@web3-onboard/react'
+import { useAppKit } from '@reown/appkit/react'
 import { useRedirectNotice } from '@gooddollar/good-design'
+import { isMiniPay } from 'utils/minipay'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { WalletLabels } from '../../hooks/useActiveOnboard'
-import { useActiveWeb3React } from '../../hooks/useActiveWeb3React'
 import { AppDispatch } from '../../state'
 import { clearAllTransactions } from '../../state/transactions/actions'
 import { ExternalLink } from 'theme'
 import { getExplorerLink, shortenAddress } from '../../utils'
+import { getSafeChainId } from 'utils/chain'
+import { useConnectionInfo } from 'hooks/useConnectionInfo'
 import { ButtonOutlined } from '../gd/Button'
 import Title from '../gd/Title'
 import { AutoRow } from '../Row'
@@ -21,6 +22,7 @@ import Transaction from './Transaction'
 import useSendAnalyticsData from '../../hooks/useSendAnalyticsData'
 
 import { getEnv } from 'utils/env'
+import { useDisconnect } from 'wagmi'
 
 const UpperSection = styled.div`
     position: relative;
@@ -209,34 +211,40 @@ export default function AccountDetails({
     ENSName,
 }: AccountDetailsProps): any {
     const { i18n } = useLingui()
-    const { chainId, account } = useActiveWeb3React()
     const dispatch = useDispatch<AppDispatch>()
     const network = getEnv()
-    //eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
+
+    const { address, chainId, walletInfo } = useConnectionInfo()
+
+    const { open } = useAppKit()
+    const { disconnect } = useDisconnect()
+
+    // Connection management handled by AppKit modal and wagmi disconnect
     const sendData = useSendAnalyticsData()
     const { goToExternal } = useRedirectNotice()
 
+    // walletInfo provided by useConnectionInfo
+
+    const miniPay = isMiniPay()
+
     function formatConnectorName() {
-        return `${i18n._(t`Connected with`)} ${wallet?.label}`
+        const name = miniPay ? 'MiniPay' : walletInfo?.name ?? ''
+        return `${i18n._(t`Connected with`)} ${name}`
     }
 
     const changeWallet = useCallback(async () => {
         toggleWalletModal()
-        await connect()
-    }, [toggleWalletModal, connect])
-
-    const disconnectWallet = useCallback(async () => {
-        if (wallet) {
-            toggleWalletModal()
-            sendData({ event: 'account', action: 'address_disconnect_success', network: network })
-            await disconnect({ label: wallet.label })
-            await connect()
-        }
-    }, [toggleWalletModal, connect, disconnect, wallet])
+        await open({ view: 'Connect' })
+    }, [toggleWalletModal, open])
+
+    const disconnectWallet = useCallback(() => {
+        toggleWalletModal()
+        sendData({ event: 'account', action: 'address_disconnect_success', network: network })
+        disconnect()
+    }, [toggleWalletModal, disconnect, network, sendData])
 
     const clearAllTransactionsCallback = useCallback(() => {
-        if (chainId) dispatch(clearAllTransactions({ chainId }))
+        if (chainId) dispatch(clearAllTransactions({ chainId: getSafeChainId(chainId) }))
     }, [dispatch, chainId])
 
     const goToExplorer = (e: any, url: string) => {
@@ -250,14 +258,15 @@ export default function AccountDetails({
                 <CloseIcon onClick={toggleWalletModal}>
                     <CloseColor />
                 </CloseIcon>
+
                 <Title className="mb-8 text-center">{i18n._(t`Account`)}</Title>
                 <AccountSection>
                     <YourAccount>
                         <InfoCard>
                             <AccountGroupingRow>
                                 {formatConnectorName()}
                                 <div className="mt-3.5 mb-3.5">
-                                    {wallet?.label && WalletLabels.includes(wallet.label) && (
+                                    {address && (
                                         <WalletAction
                                             width={'85px'}
                                             size="sm"
@@ -271,7 +280,7 @@ export default function AccountDetails({
                                         width={'75px'}
                                         size="sm"
                                         style={{ marginRight: '-5px' }}
-                                        onClick={wallet?.label === 'MetaMask' ? disconnectWallet : changeWallet}
+                                        onClick={walletInfo?.label === 'MetaMask' ? disconnectWallet : changeWallet}
                                     >
                                         {i18n._(t`Change`)}
                                     </WalletAction>
@@ -280,21 +289,21 @@ export default function AccountDetails({
                             <AccountGroupingRow id="web3-account-identifier-row">
                                 <AccountControl>
                                     <div className="justify-center text-center">
-                                        <p> {ENSName ?? shortenAddress(account ?? '')}</p>
+                                        <p> {ENSName ?? shortenAddress(address ?? '')}</p>
                                     </div>
                                 </AccountControl>
                             </AccountGroupingRow>
                             <AccountGroupingRow className="mt-4">
                                 <AccountControl>
                                     <div>
-                                        {account && (
-                                            <Copy toCopy={account}>
+                                        {address && (
+                                            <Copy toCopy={address}>
                                                 <span style={{ marginLeft: '4px' }}>{i18n._(t`Copy address`)}</span>
                                             </Copy>
                                         )}
-                                        {chainId && account && (
+                                        {chainId && address && (
                                             <ExternalLink
-                                                url={getExplorerLink(chainId, account, 'address')}
+                                                url={getExplorerLink(getSafeChainId(chainId), address, 'address')}
                                                 label={i18n._(t`View on explorer`)}
                                                 dataAttr="external_explorer"
                                                 onPress={goToExplorer}