feat(wayfinder): use wayfinder for loading featured domains page #801
Conversation
No longer rely on static gateway list, and fetch them from wayfinder using the RandomRoutingStrategy
WalkthroughThe updates integrate the Wayfinder framework into the application by adding related dependencies, refactoring ARNSCard and FeaturedDomains components to utilize Wayfinder for asynchronous URL resolution and gateway management, and updating global state context to wrap children in a Wayfinder provider. Network configuration constants and connection calls are extended with a new legacy mode property. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FeaturedDomains
participant ARNSCard
participant Wayfinder (Provider/Hook)
participant GlobalStateProvider
User->>FeaturedDomains: View featured domains
FeaturedDomains->>ARNSCard: Render ARNSCard(domain)
ARNSCard->>Wayfinder: useWayfinderUrl().resolveUrl(domain)
Wayfinder-->>ARNSCard: Return resolved URL or error
ARNSCard->>User: Display domain card with resolved link or fallback
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/cards/ARNSCard/ARNSCard.tsx (1)
30-41: Simplify redundant conditional renderingThe conditional rendering checks
wayfinderUrltwice unnecessarily. Since line 21 already returns a<Loader />whenwayfinderUrlis null, this condition is redundant.- {wayfinderUrl ? ( - <img - className="arns-preview fade-in" - src={imageUrl} - key={imageUrl} - alt={`${domain}`} - width={'100%'} - height={'100%'} - /> - ) : ( - <Loader size={40} /> - )} + <img + className="arns-preview fade-in" + src={imageUrl} + key={imageUrl} + alt={`${domain}`} + width={'100%'} + height={'100%'} + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (5)
package.json(1 hunks)src/components/cards/ARNSCard/ARNSCard.tsx(2 hunks)src/components/layout/FeaturedDomains/FeaturedDomains.tsx(1 hunks)src/state/contexts/GlobalState.tsx(4 hunks)src/utils/constants.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/components/cards/ARNSCard/ARNSCard.tsx (2)
src/types.ts (1)
ARNSMapping(38-57)src/components/layout/index.ts (1)
Loader(12-12)
src/state/contexts/GlobalState.tsx (1)
src/utils/constants.ts (1)
APP_VERSION(23-23)
src/components/layout/FeaturedDomains/FeaturedDomains.tsx (2)
src/utils/constants.ts (1)
FEATURED_DOMAINS(173-184)src/components/cards/index.ts (1)
ARNSCard(4-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build_and_test / lint_test_build
- GitHub Check: lint_test_build
🔇 Additional comments (10)
src/utils/constants.ts (2)
134-134: LGTM: MODE configuration supports Wayfinder integrationThe addition of
MODE: 'legacy'to both ARIO and ANT network configurations is consistent with the usage insrc/state/contexts/GlobalState.tsxwhere this parameter is passed to theconnectcall.Also applies to: 142-142
174-174: Good planning: TODO comment for dynamic featured domainsThe TODO comment indicates future plans to pull featured domains from the ARIO contract, which aligns with the PR objective of moving away from static data sources.
package.json (2)
29-30: Alpha dependencies in production – proceed with cautionBoth
@ar.io/[email protected]and@ar.io/[email protected]are experimental alpha releases with no stable versions available (see GitHub[1] and docs[2]). Using them in production may introduce breaking changes and unexpected bugs. Please:
- Confirm these alpha packages meet your stability requirements or delay production deployment until stable releases are published.
- Pin the exact alpha versions (remove the
^prefix) to avoid inadvertent upgrades.- Ensure comprehensive testing around Wayfinder-powered features.
- Verify that updating
@permaweb/aoconnectto0.0.69remains compatible with your integration.Citations:
1: https://github.com/ar-io/wayfinder
2: https://docs.ar.io/wayfinder/react
32-32: Verify @permaweb/aoconnect v0.0.69 compatibilityI’ve searched all
.ts/.tsxfiles and confirmed thatconnectfrom@permaweb/aoconnectis imported in many places, for example:
- src/state/contexts/GlobalState.tsx
- src/state/actions/dispatchArNSUpdate.ts
- src/state/contexts/ArNSState.tsx
- src/services/turbo/TurboArNSClient.ts
- src/hooks/useTurboArNSClient.tsx
- src/components/pages/Settings/NetworkSettings.tsx
- …and several more
Given the widespread use of this package, please:
• Review the package’s CHANGELOG or release notes for v0.0.69 to spot any breaking changes.
• Run the relevant unit/integration tests (or smoke tests) that exerciseconnectto ensure nothing has regressed.src/components/layout/FeaturedDomains/FeaturedDomains.tsx (2)
36-49: LGTM: Simplified component aligns with Wayfinder integrationThe removal of gateway-related logic and props correctly implements the centralized gateway management approach via Wayfinder. The ARNSCard components now handle URL resolution internally using the
useWayfinderhook.
51-51: Minor styling improvementThe styling adjustment on the button container improves the layout consistency.
src/components/cards/ARNSCard/ARNSCard.tsx (1)
54-54: LGTM: Appropriate display format for ArNS domainsThe
ar://prefix correctly represents the ArNS domain format and provides better user understanding of the domain structure.src/state/contexts/GlobalState.tsx (3)
8-15: LGTM: Comprehensive Wayfinder importsThe imports include all necessary Wayfinder components for gateway management, routing strategy, and React integration.
45-45: Consistent MODE configurationThe
MODE: 'legacy'parameter is consistent with the network defaults defined insrc/utils/constants.ts.
129-148: Excellent Wayfinder provider configurationThe WayfinderProvider is well-configured with:
- Layered gateway providers (LocalStorage + Network)
- RandomRoutingStrategy for load balancing
- Telemetry enabled with proper client identification
This implementation correctly centralizes gateway management and provides the foundation for dynamic URL resolution throughout the app.
|
Visit the preview URL for this PR (updated for commit edeb28a): https://arns-portal--pr801-pe-8019-wayfinder-ro-b2mykd9b.web.app (expires Fri, 01 Aug 2025 16:30:33 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 1f59769442cb89cf2a92042a342e51fe94047b94 |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/cards/ARNSCard/ARNSCard.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/cards/ARNSCard/ARNSCard.tsx (2)
src/types.ts (1)
ARNSMapping(38-57)src/components/layout/index.ts (1)
Loader(12-12)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build_and_test / lint_test_build
- GitHub Check: lint_test_build
🔇 Additional comments (5)
src/components/cards/ARNSCard/ARNSCard.tsx (5)
1-2: LGTM! Clean import structure for Wayfinder integration.The imports correctly bring in the
useWayfinderUrlhook for dynamic URL resolution and theLoadercomponent for loading states.
11-18: Well-structured Wayfinder integration with appropriate fallback.The component signature correctly removes the gateway dependency, and the
useWayfinderUrlhook is properly configured with the domain name and a sensible fallback URL.
20-22: Error handling looks good as previously addressed.The error logging implementation is appropriate and aligns with the previous review feedback that was addressed.
27-27: Good use of optional chaining with fallback URL.The link destination properly handles the resolved URL with optional chaining and provides a sensible fallback.
55-55: Appropriate display format for Arweave domains.The change to
ar://${domain}format correctly reflects the Wayfinder integration and removes the gateway dependency.
This is not needed and will just rerender the div when the new url is available
It seems to constantly rerender, even with useMemo in the useWayfinderUrl hook
No longer rely on static gateway list, and fetch them from wayfinder using the RandomRoutingStrategy
After:
Summary by CodeRabbit
New Features
Refactor
Chores