fix/re render problems #174
Conversation
…ve confetti display
…s in package.json, required for new dependency version
…imizations, replace deprecated critters with beasties
…ns and remove check-node-version script
…ns and add pnpm engine requirement
…licies with new CSP directives
…bal logging variables
…ion, retrieval, and updates
…and enhance verification key handling
…profile edit components
… import Coinbase's generateOnRampURL
…nd setup instructions
…t variable handling
…components with improved error handling
… and development logging improvements
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| // 3. Last resort: Default RPC from viem (but filter out problematic ones) | ||
| const defaultUrls = chain.rpcUrls.default.http.filter(url => { | ||
| // Skip the problematic sepolia.base.org endpoint | ||
| if (chain.id === baseSepolia.id && url.includes('sepolia.base.org')) { |
Check failure
Code scanning / CodeQL
Incomplete URL substring sanitization High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 5 months ago
To fix the problem, we should parse each URL and check the host component directly, rather than using a substring match. Specifically, for each URL, we should use the WHATWG URL constructor (available in modern JavaScript/TypeScript) to extract the hostname, and compare it to 'sepolia.base.org'. This ensures that only URLs whose host is exactly 'sepolia.base.org' are filtered out, and not those where the string appears elsewhere (e.g., in the path or as a subdomain). The change should be made in the filter function on line 64 of src/providers/configs/wagmi.config.ts. We do not need to add any new imports, as the global URL class is available in the runtime.
| @@ -63,3 +63,13 @@ | ||
| // Skip the problematic sepolia.base.org endpoint | ||
| if (chain.id === baseSepolia.id && url.includes('sepolia.base.org')) { | ||
| if ( | ||
| chain.id === baseSepolia.id && | ||
| (() => { | ||
| try { | ||
| return new URL(url).hostname === 'sepolia.base.org'; | ||
| } catch { | ||
| // If the URL is invalid, be conservative and do not filter it out | ||
| return false; | ||
| } | ||
| })() | ||
| ) { | ||
| return false |
| errorMessage.includes('POST https://sepolia.base.org/ 429') || | ||
| errorMessage.includes('POST https://mainnet.base.org/ 403') || | ||
| errorMessage.includes('POST https://mainnet.base.org/ 429') || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('sepolia.base.org')) || |
Check failure
Code scanning / CodeQL
Incomplete URL substring sanitization High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 5 months ago
To fix the problem, we should avoid using a simple substring check for 'sepolia.base.org' in error messages. Instead, we should attempt to extract URLs from the error message, parse them, and check if their host matches the intended domain(s) exactly. This can be done by using a regular expression to find URLs in the error message, then using the URL constructor to parse each URL and check its host property. If any of the URLs in the error message have a host that matches 'sepolia.base.org' or 'mainnet.base.org', we suppress the error; otherwise, we do not.
The changes should be made in src/providers/providers.tsx, specifically in the error suppression logic around lines 113–116. We will need to:
- Add a helper function to extract URLs from a string and check their hosts.
- Replace the substring checks on
'sepolia.base.org'and'mainnet.base.org'with calls to this helper function. - Add any necessary imports (none needed for the standard
URLclass).
| @@ -94,2 +94,21 @@ | ||
| const nativeError = console.error | ||
| // Helper to check if error message contains a URL with a specific host | ||
| function errorMessageHasHost(message: string, hosts: string[]): boolean { | ||
| // Simple regex to match URLs (http/https) | ||
| const urlRegex = /https?:\/\/[^\s'"]+/g; | ||
| const matches = message.match(urlRegex); | ||
| if (!matches) return false; | ||
| for (const urlStr of matches) { | ||
| try { | ||
| const url = new URL(urlStr); | ||
| if (hosts.includes(url.host)) { | ||
| return true; | ||
| } | ||
| } catch (e) { | ||
| // Ignore invalid URLs | ||
| } | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| console.error = (...args: unknown[]): void => { | ||
| @@ -112,4 +131,4 @@ | ||
| errorMessage.includes('POST https://base-sepolia.gateway.tenderly.co') || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('sepolia.base.org')) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('mainnet.base.org')) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessageHasHost(errorMessage, ['sepolia.base.org'])) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessageHasHost(errorMessage, ['mainnet.base.org'])) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('base-sepolia')) || |
…nsole removal in production
…isplay and refactor balance skeleton
…mproved debugging
…ta fetching logic
…ng and error handling
| errorMessage.includes('POST https://base-sepolia-rpc.publicnode.com') || | ||
| errorMessage.includes('POST https://base-sepolia.gateway.tenderly.co') || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('sepolia.base.org')) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('mainnet.base.org')) || |
Check failure
Code scanning / CodeQL
Incomplete URL substring sanitization High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 6 months ago
To fix the issue, we need to parse the URL from the error message and validate its host explicitly. Instead of using errorMessage.includes('mainnet.base.org'), we should extract the host from the URL and compare it against a whitelist of allowed hosts. This ensures that the check is precise and cannot be bypassed by embedding the substring in other parts of the URL.
Steps to implement the fix:
- Use a URL parsing library (e.g., the built-in
URLclass in JavaScript) to extract the host from the URL in the error message. - Compare the extracted host against a whitelist of allowed hosts (e.g.,
['mainnet.base.org']). - Replace all substring checks for URLs with this robust host validation.
| @@ -2,2 +2,13 @@ | ||
|
|
||
| function isAllowedHost(errorMessage: string, allowedHosts: string[]): boolean { | ||
| try { | ||
| const urlMatch = errorMessage.match(/https?:\/\/[^\s]+/); | ||
| if (!urlMatch) return false; | ||
| const url = new URL(urlMatch[0]); | ||
| return allowedHosts.includes(url.host); | ||
| } catch { | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| import { PrivyProvider } from '@privy-io/react-auth' | ||
| @@ -112,6 +123,6 @@ | ||
| errorMessage.includes('POST https://base-sepolia.gateway.tenderly.co') || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('sepolia.base.org')) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('mainnet.base.org')) || | ||
| (errorMessage.includes('Failed to fetch') && errorMessage.includes('base-sepolia')) || | ||
| (errorMessage.includes('Fetch failed loading') && errorMessage.includes('base-sepolia')) | ||
| (errorMessage.includes('Failed to fetch') && isAllowedHost(errorMessage, ['sepolia.base.org'])) || | ||
| (errorMessage.includes('Failed to fetch') && isAllowedHost(errorMessage, ['mainnet.base.org'])) || | ||
| (errorMessage.includes('Failed to fetch') && isAllowedHost(errorMessage, ['base-sepolia'])) || | ||
| (errorMessage.includes('Fetch failed loading') && isAllowedHost(errorMessage, ['base-sepolia'])) | ||
| ) { |
…dd API route for pool details
Refactored the MyPools component to use the new useUserPools hook, ensuring data is fetched correctly for both upcoming and past pools. - Updated useUserPools hook to accept status and initialData parameters for better reusability and to prevent UI flickers. - Replaced the deprecated useServerActionQuery and local fetch implementation in MyPools component with the centralized useUserPools hook. - This fixes the bug where user pools were not loading on the 'My Pools' page and completes the ongoing refactoring effort.
The UserPools component was calling the useUserPools hook without the required 'status' parameter, leading to a 400 Bad Request error from the API. This has been resolved by: - Explicitly passing 'upcoming' to the useUserPools hook within the UserPools component. - Committing all related files from the previous refactor to ensure the application is in a consistent and correct state.
Pre-fetches user pools on the server for authenticated users and passes them as initialData to the UserPools component. - Modified the PoolsPage to be a dynamic server component that fetches user-specific pool data. - Updated the UserPools component to accept initialData, improving initial load performance and preventing an empty state while waiting for client-side authentication. - This aligns the behavior of the home page with the 'My Pools' page, creating a more consistent user experience.
Ensures that the useUserPools hook fetches data on the client if the initial server-side fetch returns an empty array. - Updated the useUserPools hook to enable refetchOnMount and refetchOnWindowFocus for better data synchronization. - Modified PoolsPage to pass initialData as undefined if the server returns no pools, allowing the client-side query to trigger correctly. - This resolves the issue where user pools would not load on the client after an initial empty response from the server.
Use pools.id instead of contract_id when filtering by pool_ids collected from pool_participants, ensuring correct data retrieval.
✨ feat(database): implement automated database health checks and keepalive workflow
🔧 chore(dependencies): update package versions in pnpm-lock.yaml
🔧 chore(dependencies): update package versions in pnpm-lock.yaml
🧹chore: auto-sort imports
🔧 chore(next-user-pool): remove console log from render method
✨ feat(hooks): enhance useUserNextPool with caching and refetch options
✨ feat(pool): enhance PoolDetailsInfo with loading state for description parsing
✨ feat(pool): add registration badge to PoolListCard component
🔧 chore(hooks): reduce console logging in useAuth for development mode
✨ feat(pool): add pool name prop to PoolDetails component
✨ feat(hooks): add window resize handling to useConfetti for responsive confetti display
✨ feat(ui): add success variant to badge component
✨ feat(csp): add additional API endpoints for Web3Modal and WalletConnect
🔧 chore(types): update imports to use type-only imports for better clarity
🔧 chore(linting): defines not modified variables as const
🔧 chore(ui): standardize class names and improve layout consistency across components
🔧 chore(dependencies): update Node.js version and package dependencies in package.json, required for new dependency version
🔧 chore(config): enhance experimental settings and update package optimizations, replace deprecated critters with beasties
🔧 chore(dependencies): update package.json with new dependencies and version upgrades
🔧 chore(dependencies): update package.json with new dependency versions and remove check-node-version script
✨ feat(chains): add comprehensive chains data and update chains loading mechanism
🔧 chore(dependencies): update package.json with new dependency versions and add pnpm engine requirement
🔧 chore(config): update Next.js configuration and enhance security policies with new CSP directives
🔧 chore(types): refine CompositeTypes type definition and add new global logging variables
✨ feat(error): enhance error handling and improve user feedback
✨ feat(ui): refactor Page component for improved readability and structure
✨ feat(users): relocate use-cases files to keep consistency
✨ feat(pools): relocate use cases for pool management including creation, retrieval, and updates
✨ feat(auth): migrate Privy authentication logic to server directory and enhance verification key handling
✨ feat(ui): relocate shadcn ui components
✨ feat(pools): add scripts for pool synchronization, status investigation, and RPC endpoint testing
✨ feat(utils): remove unused utility files and relocate utility functions for address formatting, balance formatting, and date-time manipulation
✨ feat(stores): add various Zustand stores for app, pool creation, profile management, developer settings, encryption, and payout handling
✨ feat(auth): replace privileged procedure with authenticated and unauthenticated procedures
✨ feat(pools): implement new contract pool management functions and database interactions
✨ feat(hooks): relocate hooks for media queries, network validation, user data, and wallet connection status
✨ feat(providers): restructure providers by removing obsolete files and implementing new configurations
✨ feat(balance): refactor balance component with network validation, new structure, and enhanced loading state
✨ feat(forms): remove obsolete form control components and introduce new form controls for enhanced functionality
✨ feat(components): relocate higher-order components and animated page transitions with SVG icons
✨ feat(components): restructure main wrapper and implement error handling for navigation transitions
✨ feat(image-processing): relocate image processing utilities for resizing and base64 handling
✨ feat(blockchain): relocate blockchain functions for deposit, role checking, and winner details
✨ feat(consts): relocate const files, pool status enums and configurations for better status management
✨ feat(supabase): add Supabase client configuration functions for browser and server
🗑️ chore(encrypt): remove unused encryption store implementation
✨ feat(devtools): add route for Chrome DevTools integration with UUID generation
✨ feat(my-pools): refactor pool components and improve import structure
✨ feat(pool): refactor component imports and optimize query client usage
✨ feat(pay-other-player): refactor component imports for consistency and clarity
✨ feat(pool): refactor actions and form components for improved structure and error handling
✨ feat(pool): enhance pool components with improved imports, error handling, and loading states
✨ feat(bottombar): update component imports for consistency and clarity
✨ feat(modals): refactor component imports for improved consistency and clarity
✨ feat(pool): standardize component imports and enhance code clarity
✨ feat(users): refactor action imports for improved consistency and clarity
✨ feat(layout): refactor component imports for improved consistency and clarity
✨ feat(profile): add developer mode settings and chain selector components
✨ feat(profile): remove deprecated actions and layout files for cleaner codebase
✨ feat(api): add cross-chain data fetching endpoint with error handling
✨ feat(blockchain): refactor contract interaction imports and enhance error handling
✨ feat(middleware): update token verification logic and improve error handling
✨ feat(profile): add developer tools and settings components for enhanced development experience
✨ feat(profile): standardize component imports and optimize claimable pools logic
✨ feat(profile): standardize component imports and enhance balance section logic
✨ feat(profile): remove chains.json and refactor import paths for improved structure
✨ feat(profile): refactor import paths and improve error handling in profile edit components
🔧 chore(imports): refactor import paths for QR toggle and dynamically import Coinbase's generateOnRampURL
🔧 chore(postcss): update environment variable check for cssnano plugin
✨ feat(readme): enhance documentation with multichain optimizations and setup instructions
🔧 chore(dependencies): update package versions and improve environment variable handling
📚 docs(changelog): add comprehensive changelog for project updates and improvements
✨ feat(pools): implement enhanced upcoming pools and user next pools components with improved error handling
✨ feat(changelog): update changelog with user pools V2 implementation and development logging improvements