chore: merge upstream develop changes (tooling, CI, config)

Author: fernandomg

src/wallet/components/WalletStatusVerifier.test.tsx

@@ -0,0 +1,205 @@
+import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createElement, type ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DeveloperError } from '@/src/core/utils/DeveloperError'
+import { useWeb3StatusConnected, WalletStatusVerifier } from './WalletStatusVerifier'
+
+const mockSwitchChain = vi.fn()
+
+vi.mock('@/src/wallet/hooks/useWalletStatus', () => ({
+  useWalletStatus: vi.fn(() => ({
+    isReady: false,
+    needsConnect: true,
+    needsChainSwitch: false,
+    targetChain: { id: 1, name: 'Ethereum' },
+    targetChainId: 1,
+    switchChain: mockSwitchChain,
+  })),
+}))
+
+vi.mock('@/src/wallet/hooks/useWeb3Status', () => ({
+  useWeb3Status: vi.fn(() => ({
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+    appChainId: 1,
+    balance: undefined,
+    connectingWallet: false,
+    disconnect: vi.fn(),
+    isWalletConnected: true,
+    isWalletSynced: true,
+    readOnlyClient: {},
+    switchChain: vi.fn(),
+    switchingChain: false,
+    walletChainId: 1,
+    walletClient: {},
+  })),
+}))
+
+vi.mock('@/src/wallet/providers', () => ({
+  ConnectWalletButton: () =>
+    createElement(
+      'button',
+      { type: 'button', 'data-testid': 'connect-wallet-button' },
+      'Connect Wallet',
+    ),
+}))
+
+const { useWalletStatus } = await import('@/src/wallet/hooks/useWalletStatus')
+const mockedUseWalletStatus = vi.mocked(useWalletStatus)
+
+const system = createSystem(defaultConfig)
+
+const renderWithChakra = (ui: ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>)
+
+describe('WalletStatusVerifier', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders default fallback (ConnectWalletButton) when wallet needs connect', () => {
+    mockedUseWalletStatus.mockReturnValue({
+      isReady: false,
+      needsConnect: true,
+      needsChainSwitch: false,
+      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
+      targetChainId: 1,
+      switchChain: mockSwitchChain,
+    })
+
+    renderWithChakra(
+      createElement(
+        WalletStatusVerifier,
+        null,
+        createElement('div', { 'data-testid': 'protected-content' }, 'Protected'),
+      ),
+    )
+
+    expect(screen.getByTestId('connect-wallet-button')).toBeInTheDocument()
+    expect(screen.queryByTestId('protected-content')).toBeNull()
+  })
+
+  it('renders custom fallback when provided and wallet needs connect', () => {
+    mockedUseWalletStatus.mockReturnValue({
+      isReady: false,
+      needsConnect: true,
+      needsChainSwitch: false,
+      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
+      targetChainId: 1,
+      switchChain: mockSwitchChain,
+    })
+
+    renderWithChakra(
+      createElement(
+        WalletStatusVerifier,
+        { fallback: createElement('div', { 'data-testid': 'custom-fallback' }, 'Custom') },
+        createElement('div', { 'data-testid': 'protected-content' }, 'Protected'),
+      ),
+    )
+
+    expect(screen.getByTestId('custom-fallback')).toBeInTheDocument()
+    expect(screen.queryByTestId('protected-content')).toBeNull()
+  })
+
+  it('renders switch chain button when wallet needs chain switch', () => {
+    mockedUseWalletStatus.mockReturnValue({
+      isReady: false,
+      needsConnect: false,
+      needsChainSwitch: true,
+      targetChain: { id: 10, name: 'OP Mainnet' } as ReturnType<
+        typeof useWalletStatus
+      >['targetChain'],
+      targetChainId: 10,
+      switchChain: mockSwitchChain,
+    })
+
+    renderWithChakra(
+      createElement(
+        WalletStatusVerifier,
+        null,
+        createElement('div', { 'data-testid': 'protected-content' }, 'Protected'),
+      ),
+    )
+
+    expect(screen.getByText(/Switch to/)).toBeInTheDocument()
+    expect(screen.getByText(/OP Mainnet/)).toBeInTheDocument()
+    expect(screen.queryByTestId('protected-content')).toBeNull()
+  })
+
+  it('renders children when wallet is ready', () => {
+    mockedUseWalletStatus.mockReturnValue({
+      isReady: true,
+      needsConnect: false,
+      needsChainSwitch: false,
+      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
+      targetChainId: 1,
+      switchChain: mockSwitchChain,
+    })
+
+    renderWithChakra(
+      createElement(
+        WalletStatusVerifier,
+        null,
+        createElement('div', { 'data-testid': 'protected-content' }, 'Protected'),
+      ),
+    )
+
+    expect(screen.getByTestId('protected-content')).toBeInTheDocument()
+  })
+
+  it('calls switchChain when switch button is clicked', async () => {
+    const user = userEvent.setup()
+
+    mockedUseWalletStatus.mockReturnValue({
+      isReady: false,
+      needsConnect: false,
+      needsChainSwitch: true,
+      targetChain: { id: 10, name: 'OP Mainnet' } as ReturnType<
+        typeof useWalletStatus
+      >['targetChain'],
+      targetChainId: 10,
+      switchChain: mockSwitchChain,
+    })
+
+    renderWithChakra(
+      createElement(WalletStatusVerifier, null, createElement('div', null, 'Protected')),
+    )
+
+    const switchButton = screen.getByText(/Switch to/)
+    await user.click(switchButton)
+
+    expect(mockSwitchChain).toHaveBeenCalledWith(10)
+  })
+
+  it('provides web3 status via context when wallet is ready', () => {
+    mockedUseWalletStatus.mockReturnValue({
+      isReady: true,
+      needsConnect: false,
+      needsChainSwitch: false,
+      targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
+      targetChainId: 1,
+      switchChain: mockSwitchChain,
+    })
+
+    const Consumer = () => {
+      const { address } = useWeb3StatusConnected()
+      return createElement('div', { 'data-testid': 'address' }, address)
+    }
+
+    renderWithChakra(createElement(WalletStatusVerifier, null, createElement(Consumer)))
+
+    expect(screen.getByTestId('address')).toHaveTextContent(
+      '0x1234567890abcdef1234567890abcdef12345678',
+    )
+  })
+
+  it('throws DeveloperError when useWeb3StatusConnected is used outside WalletStatusVerifier', () => {
+    const Consumer = () => {
+      const { address } = useWeb3StatusConnected()
+      return createElement('div', null, address)
+    }
+
+    expect(() => renderWithChakra(createElement(Consumer))).toThrow(DeveloperError)
+  })
+})

src/wallet/components/WalletStatusVerifier.tsx

@@ -0,0 +1,73 @@
+import type { FC, ReactElement } from 'react'
+import { createContext, useContext } from 'react'
+import type { ChainsIds, RequiredNonNull } from '@/src/core/types'
+import { DeveloperError } from '@/src/core/utils/DeveloperError'
+import { useWalletStatus } from '../hooks/useWalletStatus'
+import { useWeb3Status, type Web3Status } from '../hooks/useWeb3Status'
+import { ConnectWalletButton } from '../providers'
+import SwitchChainButton from './SwitchChainButton'
+
+type ConnectedWeb3Status = RequiredNonNull<Web3Status>
+
+const WalletStatusVerifierContext = createContext<ConnectedWeb3Status | null>(null)
+
+interface WalletStatusVerifierProps {
+  chainId?: ChainsIds
+  children?: ReactElement
+  fallback?: ReactElement
+  switchChainLabel?: string
+}
+
+/**
+ * Wrapper component that gates content on wallet connection and chain status.
+ *
+ * This is the primary API for protecting UI that requires a connected wallet.
+ *
+ * @deprecated Use {@link WalletGuard} from `@/src/sdk/react` instead.
+ *
+ * @example
+ * ```tsx
+ * <WalletStatusVerifier>
+ *   <MyProtectedComponent />
+ * </WalletStatusVerifier>
+ * ```
+ */
+const WalletStatusVerifier: FC<WalletStatusVerifierProps> = ({
+  chainId,
+  children,
+  fallback = <ConnectWalletButton />,
+  switchChainLabel = 'Switch to',
+}: WalletStatusVerifierProps) => {
+  const web3Status = useWeb3Status()
+  const { needsConnect, needsChainSwitch, targetChain, targetChainId, switchChain } =
+    useWalletStatus({ chainId })
+
+  if (needsConnect) {
+    return fallback
+  }
+
+  if (needsChainSwitch) {
+    return (
+      <SwitchChainButton onClick={() => switchChain(targetChainId)}>
+        {switchChainLabel} {targetChain.name}
+      </SwitchChainButton>
+    )
+  }
+
+  return (
+    <WalletStatusVerifierContext.Provider value={web3Status as ConnectedWeb3Status}>
+      {children}
+    </WalletStatusVerifierContext.Provider>
+  )
+}
+
+/** Reads the connected Web3 status from WalletStatusVerifier context. */
+const useWeb3StatusConnected = (): ConnectedWeb3Status => {
+  const context = useContext(WalletStatusVerifierContext)
+  if (context === null) {
+    throw new DeveloperError('useWeb3StatusConnected must be used inside <WalletStatusVerifier>')
+  }
+  return context
+}
+
+export { useWeb3StatusConnected, WalletStatusVerifier }