feat: Add Hello frontend tutorial #276
Conversation
📝 WalkthroughWalkthroughThis change introduces a complete, production-ready React + TypeScript + Vite frontend example for a cross-chain messaging application. It establishes a modular architecture with robust wallet connection management (EIP-6963), theming, reusable UI components, and comprehensive styling. The update includes context providers, custom hooks, utility functions, type declarations, and extensive CSS for consistent theming and responsive design. Supporting configuration files for TypeScript, ESLint, Prettier, and Vite are also added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant WalletProvider
participant ThemeProvider
participant EIP6963Provider
participant Modal
User->>App: Loads index.html
App->>ThemeProvider: Wrap children
App->>WalletProvider: Wrap children
App->>AppContent: Render main UI
User->>Header: Clicks Connect Wallet
Header->>ConnectWallet: Render connect button
ConnectWallet->>WalletProvider: Discover providers
ConnectWallet->>Modal: Show wallet selection
User->>Modal: Selects wallet
Modal->>ConnectWallet: Provider selected
ConnectWallet->>WalletProvider: connectWallet(provider)
WalletProvider->>EIP6963Provider: Request accounts
EIP6963Provider-->>WalletProvider: Return account
WalletProvider-->>ConnectWallet: Update context
User->>AppContent: Interacts (send message)
AppContent->>ConnectedContent: Show message form
ConnectedContent->>MessageFlowCard: Enter message, send
MessageFlowCard->>EIP6963Provider: Sign and send transaction
EIP6963Provider-->>MessageFlowCard: Return tx hash
MessageFlowCard->>ConfirmedContent: Show tx status
ConfirmedContent->>API: Poll for cross-chain confirmation
API-->>ConfirmedContent: Return status
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Complexity rationale: Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 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). (12)
✨ Finishing Touches
🧪 Generate unit tests
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 (
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Bug: Unvalidated Array Access Causes Runtime Error
The application accesses data.CrossChainTxs[0] and data.CrossChainTxs[0].outbound_params[0] without validating array lengths when processing the CCTX polling response. If CrossChainTxs or outbound_params are empty, attempting to access index [0] results in undefined, causing a TypeError when subsequent properties (.hash, .status) are accessed. This leads to a runtime error and crashes the application.
examples/hello/frontend/src/ConfirmedContent.tsx#L63-L71
example-contracts/examples/hello/frontend/src/ConfirmedContent.tsx
Lines 63 to 71 in 36e6310
Bug: Unsafe Type Assertion Causes Runtime Error
The type assertion decimalChainId as number is unsafe. The if block is entered if !supportedChain is true, which occurs when decimalChainId is null or undefined. This causes null or undefined to be passed as a number to UnsupportedNetworkContent, leading to a runtime error. The comment claiming the assertion is safe is incorrect.
examples/hello/frontend/src/AppContent.tsx#L29-L34
example-contracts/examples/hello/frontend/src/AppContent.tsx
Lines 29 to 34 in 36e6310
Comment bugbot run to trigger another review on this PR
Was this report helpful? Give feedback by reacting with 👍 or 👎
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 21
🧹 Nitpick comments (28)
examples/hello/frontend/src/utils/truncate.ts (1)
1-3: Add input validation for robustness.The function correctly implements address truncation but lacks defensive programming practices. Consider adding validation to handle edge cases gracefully.
export const truncateAddress = (address: string) => { + if (!address || address.length < 10) { + return address; + } return `${address.slice(0, 6)}...${address.slice(-4)}`; };examples/hello/frontend/index.html (1)
7-12: Consider font loading implications.The HTML template is well-structured with proper performance optimizations through font preconnection. However, loading external fonts may have privacy implications and affect performance in production environments.
For production deployment, consider:
- Using font-display: swap for better loading experience
- Self-hosting fonts to avoid third-party dependencies
- Evaluating if custom fonts are necessary for the core functionality
examples/hello/frontend/vite.config.ts (1)
14-17: Harden theethersalias for monorepo / hoisting setupsHard-coding the absolute path with
resolve(__dirname, 'node_modules/ethers')breaks as soon as the package is hoisted (pnpm / yarn-berry workspaces) or symlinked.
Prefer resolving via Node’s resolver so the closest installation is always used:- ethers: resolve(__dirname, 'node_modules/ethers'), + // Always point to the peer that Node would resolve for this file + ethers: require.resolve('ethers', { paths: [__dirname] }),This remains single-instance and survives workspace layouts.
examples/hello/frontend/src/components/IconExternalLink.tsx (2)
8-12: Remove redundantclassNameredeclaration
classNamealready exists onSVGProps<SVGSVGElement>; redeclaring it adds no value and may confuse IntelliSense / tooling.-}: SVGProps<SVGSVGElement> & { - color?: string; - size?: number; - className?: string; -}) => { +}: SVGProps<SVGSVGElement> & { + color?: string; + size?: number; +}) => {
24-25: Minor: conditional is redundant
coloralways has a value (default'#00a87d'), so the fallback to'currentColor'is unreachable.- stroke={color || 'currentColor'} + stroke={color}examples/hello/frontend/src/context/WalletProvider.tsx (1)
1-1: Remove unnecessary 'use client' directive.The 'use client' directive is specific to Next.js App Router and indicates client-side rendering. Since this appears to be a Vite-based React application (not Next.js), this directive is unnecessary and could cause confusion.
-'use client'; - import type { ReactNode } from 'react';examples/hello/frontend/src/components/Header.tsx (1)
31-46: Consider adding fallback values for provider info and improving UX.While the optional chaining prevents errors, consider adding fallback values for better user experience:
<img - src={selectedProvider?.info.icon} - alt={selectedProvider?.info.name} + src={selectedProvider?.info.icon || '/logos/wallet-placeholder.svg'} + alt={selectedProvider?.info.name || 'Wallet Provider'} className="header-provider-icon" />Additionally, consider using a more descriptive disconnect button text:
- <span>X</span> + <span>Disconnect</span>examples/hello/frontend/src/utils/walletStorage.ts (1)
11-21: Function implementation is correct with minor formatting issue.The
getEmptyWalletDatafunction correctly returns an object matching the interface. Remove the trailing whitespace:}; - }; + };examples/hello/frontend/src/hooks/useWalletProviders.ts (1)
54-55: Return statement is correct with minor formatting issue.Remove the trailing whitespace:
return { providers }; - }; + };examples/hello/frontend/src/components/Modal.css (1)
34-68: Button styling is comprehensive with good interactive feedback.The button styles include proper hover states and smooth transitions. Consider adding focus styles for keyboard accessibility:
.item-button:hover { opacity: 0.8; } +.item-button:focus { + outline: 2px solid var(--primary-light); + outline-offset: 2px; +} .close-button:hover { opacity: 0.8; } +.close-button:focus { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +}examples/hello/frontend/src/components/ChainSelectionModal.tsx (1)
10-31: Component implementation is correct with opportunity for accessibility enhancement.The logic and rendering are properly implemented. Consider adding keyboard navigation support:
{SUPPORTED_CHAINS.map((chain) => ( <button key={chain.chainId} className="item-button" onClick={() => onSwitchChain(chain)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onSwitchChain(chain); + } + }} >This ensures consistent behavior across different input methods while maintaining the existing functionality.
examples/hello/frontend/src/components/IconZetaChainLogo.tsx (2)
8-12: Improve TypeScript interface definition and prop handling.The type intersection and prop destructuring can be made more explicit and maintainable.
-}: SVGProps<SVGSVGElement> & { - color?: string; - size?: number; - className?: string; -}) => { +}: SVGProps<SVGSVGElement> & { + color?: string; + size?: number; +}) => {The
classNameprop is already included inSVGProps<SVGSVGElement>, so it's redundant to redefine it.
13-14: Replace magic number with a named constant for maintainability.The height calculation uses a hardcoded ratio without context.
+const LOGO_ASPECT_RATIO = 0.186; // 89/478 from viewBox dimensions + const IconZetaChainLogo = ({ // ... props }) => { const width = size || 478; - const height = width * 0.1; + const height = width * LOGO_ASPECT_RATIO;The actual aspect ratio from the viewBox (89/478 ≈ 0.186) should be used instead of the arbitrary 0.1 value.
examples/hello/frontend/src/ConnectedContent.css (2)
15-15: Remove commented code for production readiness.The commented
justify-content: space-between;property should be removed to maintain clean, production-ready code..input-container-inner { align-items: center; background-color: var(--primary-light); display: flex; flex-direction: column; - /* justify-content: space-between; */ width: 100%; }
20-20: Consider using semantic color naming for better maintainability.The
rgba(var(--primary-color-rgb), 0.8)pattern assumes a specific CSS variable structure. Consider using a dedicated semantic variable for input backgrounds to improve maintainability..call-input { - background-color: rgba(var(--primary-color-rgb), 0.8); + background-color: var(--input-background-color); font-size: 1.25rem; height: 100%; padding: 0.785rem; width: 100%; }examples/hello/frontend/src/types/cctx.ts (1)
30-52: Consider using more specific types for array elements.The
outbound_paramsarray could benefit from extracting the anonymous type into a named interface for better reusability and documentation.+export interface OutboundParam { + amount: string; + ballot_index: string; + call_options: { + gas_limit: string; + is_arbitrary_call: boolean; + }; + // ... rest of properties +} export interface CrossChainTx { // ... other properties - outbound_params: Array<{ - amount: string; - // ... all properties - }>; + outbound_params: OutboundParam[]; // ... rest of interface }examples/hello/frontend/eslint.config.mjs (1)
52-57: Consider adding additional production-focused rules.For production environments, consider adding rules for console statements and debugger usage to prevent accidental deployment of debug code.
'@typescript-eslint/no-this-alias': 'error', '@typescript-eslint/no-unused-expressions': 'error', + 'no-console': 'warn', + 'no-debugger': 'error', + 'no-alert': 'error', },examples/hello/frontend/src/components/Header.css (1)
55-65: Enhance button accessibility and interaction feedback.The disconnect button styling is well-implemented with hover effects and proper color contrast. Consider adding focus states for keyboard accessibility.
.header-disconnect-button { background-color: var(--danger-color); color: var(--primary-light); font-size: 1rem; padding: 0.5rem 1rem; transition: opacity 0.2s; &:hover { opacity: 0.8; } + + &:focus-visible { + opacity: 0.8; + outline: 2px solid var(--primary-color); + outline-offset: 2px; + } }examples/hello/frontend/src/ConfirmedContent.tsx (1)
21-27: Props interface could benefit from better organization.The
selectedProviderprop is defined but never used in the component implementation, indicating potential cleanup opportunity.interface ConfirmedContentProps { - selectedProvider: EIP6963ProviderDetail; supportedChain: SupportedChain; connectedChainTxHash: string; connectedChainTxResult: number | null; handleSendAnotherMessage: () => void; }examples/hello/frontend/src/hooks/useWalletConnection.ts (3)
61-77: Enhance error handling specificity.The error message matching uses broad string includes which may not be reliable across different wallet implementations and locales. Consider using error codes or more specific error detection.
- if ( - errorMsg.includes('429') || - errorMsg.includes('too many requests') - ) { + if ( + err?.code === 4001 || // User rejection (EIP-1193) + errorMsg.includes('429') || + errorMsg.includes('too many requests') + ) {Additionally, consider checking
err.codefor standardized EIP-1193 error codes before falling back to message parsing.
172-179: Optimize reconnection timing strategy.The fixed 500ms delay may not be optimal for all scenarios. Consider implementing exponential backoff or making the delay configurable.
- const timeout = setTimeout(() => { - reconnectWallet(); - }, 500); + const timeout = setTimeout(() => { + reconnectWallet(); + }, Math.min(500, providers.length * 100)); // Adaptive delay based on provider count
163-165: Improve error logging for debugging.Consider adding more context to the reconnection error logging to aid in debugging wallet connection issues.
- console.error('Error reconnecting wallet:', error); + console.error('Error reconnecting wallet:', { + error, + savedAccount: savedWalletData?.account, + providerCount: providers.length + });examples/hello/frontend/src/ConnectedContent.tsx (1)
44-51: Validate revert options configuration.The hardcoded revert options may not be appropriate for all transaction scenarios. Consider making these configurable or documenting their purpose.
Add JSDoc comments to explain the revert options:
+ // Revert options for cross-chain transaction handling + // callOnRevert: false - Don't execute fallback on revert + // onRevertGasLimit: Gas limit for revert handling const evmCallParams = { receiver: helloUniversalContractAddress, types: ['string'], values: [stringValue], revertOptions: {examples/hello/frontend/src/index.css (3)
15-15: Address potential layout issue with fixed viewport width.The
width: 100vwon:rootmay cause horizontal scrollbars on some devices due to scrollbar width calculations.- width: 100vw; + width: 100%;This prevents potential horizontal overflow issues while maintaining full-width layout.
29-29: Consider accessibility impact of forced center alignment.The universal
text-align: centermay negatively impact readability for longer text content and accessibility for users with dyslexia.Consider applying center alignment selectively:
- text-align: center;Then add center alignment to specific components that need it, allowing paragraph text to use left alignment for better readability.
64-67: Enhance input placeholder accessibility.The low opacity (0.5) on placeholders may not meet WCAG contrast requirements.
- opacity: 0.5; + opacity: 0.7;Consider testing contrast ratios to ensure accessibility compliance.
examples/hello/frontend/src/utils/eip6963.ts (2)
64-67: Remove unnecessary continue statement.The
continuestatement is unnecessary in a for-loop when it's the last statement in the catch block.} catch { // Skip this provider if it throws an error - continue; }The loop will naturally continue to the next iteration without the explicit
continue.
53-55: Add type assertion safety check.The type assertion assumes the response will always be a string array, but this should be validated.
const accounts = (await provider.provider.request({ method: 'eth_accounts', })) as string[]; + if (!Array.isArray(accounts)) { + continue; + }This adds a runtime check to ensure the response matches the expected type before processing.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
examples/hello/frontend/public/favicon.icois excluded by!**/*.icoexamples/hello/frontend/public/logos/arbitrum-logo.svgis excluded by!**/*.svgexamples/hello/frontend/public/logos/avalanche-logo.svgis excluded by!**/*.svgexamples/hello/frontend/public/logos/base-logo.svgis excluded by!**/*.svgexamples/hello/frontend/public/logos/bsc-logo.svgis excluded by!**/*.svgexamples/hello/frontend/public/logos/ethereum-logo.svgis excluded by!**/*.svgexamples/hello/frontend/public/logos/network-placeholder-logo.svgis excluded by!**/*.svgexamples/hello/frontend/public/logos/polygon-logo.svgis excluded by!**/*.svgexamples/hello/frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (44)
.gitignore(1 hunks)examples/hello/frontend/.prettierrc.json(1 hunks)examples/hello/frontend/README.md(1 hunks)examples/hello/frontend/eslint.config.mjs(1 hunks)examples/hello/frontend/index.html(1 hunks)examples/hello/frontend/package.json(1 hunks)examples/hello/frontend/src/App.tsx(1 hunks)examples/hello/frontend/src/AppContent.tsx(1 hunks)examples/hello/frontend/src/ConfirmedContent.css(1 hunks)examples/hello/frontend/src/ConfirmedContent.tsx(1 hunks)examples/hello/frontend/src/ConnectedContent.css(1 hunks)examples/hello/frontend/src/ConnectedContent.tsx(1 hunks)examples/hello/frontend/src/DisconnectedContent.tsx(1 hunks)examples/hello/frontend/src/UnsupportedNetworkContent.tsx(1 hunks)examples/hello/frontend/src/components/ChainSelectionModal.tsx(1 hunks)examples/hello/frontend/src/components/Header.css(1 hunks)examples/hello/frontend/src/components/Header.tsx(1 hunks)examples/hello/frontend/src/components/IconExternalLink.tsx(1 hunks)examples/hello/frontend/src/components/IconZetaChainLogo.tsx(1 hunks)examples/hello/frontend/src/components/Modal.css(1 hunks)examples/hello/frontend/src/components/Modal.tsx(1 hunks)examples/hello/frontend/src/components/WalletSelectionModal.tsx(1 hunks)examples/hello/frontend/src/constants/chains.ts(1 hunks)examples/hello/frontend/src/context/WalletContext.ts(1 hunks)examples/hello/frontend/src/context/WalletProvider.tsx(1 hunks)examples/hello/frontend/src/hooks/useSwitchChain.ts(1 hunks)examples/hello/frontend/src/hooks/useWallet.ts(1 hunks)examples/hello/frontend/src/hooks/useWalletConnection.ts(1 hunks)examples/hello/frontend/src/hooks/useWalletEvents.ts(1 hunks)examples/hello/frontend/src/hooks/useWalletProviders.ts(1 hunks)examples/hello/frontend/src/hooks/useWalletState.ts(1 hunks)examples/hello/frontend/src/index.css(1 hunks)examples/hello/frontend/src/main.tsx(1 hunks)examples/hello/frontend/src/types/cctx.ts(1 hunks)examples/hello/frontend/src/types/eip6963.d.ts(1 hunks)examples/hello/frontend/src/types/wallet.ts(1 hunks)examples/hello/frontend/src/utils/eip6963.ts(1 hunks)examples/hello/frontend/src/utils/truncate.ts(1 hunks)examples/hello/frontend/src/utils/walletStorage.ts(1 hunks)examples/hello/frontend/src/vite-env.d.ts(1 hunks)examples/hello/frontend/tsconfig.app.json(1 hunks)examples/hello/frontend/tsconfig.json(1 hunks)examples/hello/frontend/tsconfig.node.json(1 hunks)examples/hello/frontend/vite.config.ts(1 hunks)
🧬 Code Graph Analysis (19)
examples/hello/frontend/src/hooks/useWallet.ts (1)
examples/hello/frontend/src/context/WalletContext.ts (1)
WalletContext(22-34)
examples/hello/frontend/src/App.tsx (2)
examples/hello/frontend/src/components/Header.tsx (1)
Header(8-51)examples/hello/frontend/src/AppContent.tsx (1)
AppContent(9-43)
examples/hello/frontend/src/components/Header.tsx (4)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/constants/chains.ts (1)
SUPPORTED_CHAINS(8-45)examples/hello/frontend/src/components/IconZetaChainLogo.tsx (1)
IconZetaChainLogo(74-74)examples/hello/frontend/src/utils/truncate.ts (1)
truncateAddress(1-3)
examples/hello/frontend/src/types/eip6963.d.ts (1)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963AnnounceProviderEvent(23-25)
examples/hello/frontend/src/hooks/useWalletState.ts (3)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/constants/chains.ts (1)
SUPPORTED_CHAIN_IDS(47-49)examples/hello/frontend/src/hooks/useWalletEvents.ts (1)
useWalletEvents(9-35)
examples/hello/frontend/src/AppContent.tsx (5)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/constants/chains.ts (1)
SUPPORTED_CHAINS(8-45)examples/hello/frontend/src/DisconnectedContent.tsx (1)
DisconnectedContent(7-45)examples/hello/frontend/src/UnsupportedNetworkContent.tsx (1)
UnsupportedNetworkContent(11-46)examples/hello/frontend/src/ConnectedContent.tsx (1)
ConnectedContent(16-148)
examples/hello/frontend/src/main.tsx (1)
examples/hello/frontend/src/context/WalletProvider.tsx (1)
WalletProvider(9-41)
examples/hello/frontend/src/hooks/useWalletConnection.ts (3)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/utils/walletStorage.ts (2)
StoredWalletData(4-9)getEmptyWalletData(14-21)examples/hello/frontend/src/utils/eip6963.ts (4)
findProviderByUuid(16-21)findProviderByRdns(26-31)findProviderByName(36-41)findProviderByAccount(47-70)
examples/hello/frontend/src/DisconnectedContent.tsx (3)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/components/WalletSelectionModal.tsx (1)
WalletSelectionModal(11-37)
examples/hello/frontend/src/utils/eip6963.ts (1)
examples/hello/frontend/src/types/wallet.ts (2)
EIP6963ProviderDetail(18-21)EIP6963AnnounceProviderEvent(23-25)
examples/hello/frontend/src/UnsupportedNetworkContent.tsx (3)
examples/hello/frontend/src/hooks/useSwitchChain.ts (1)
useSwitchChain(5-28)examples/hello/frontend/src/constants/chains.ts (1)
SupportedChain(1-6)examples/hello/frontend/src/components/ChainSelectionModal.tsx (1)
ChainSelectionModal(10-31)
examples/hello/frontend/src/hooks/useSwitchChain.ts (1)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)
examples/hello/frontend/src/components/ChainSelectionModal.tsx (2)
examples/hello/frontend/src/constants/chains.ts (2)
SupportedChain(1-6)SUPPORTED_CHAINS(8-45)examples/hello/frontend/src/components/Modal.tsx (1)
Modal(12-26)
examples/hello/frontend/src/context/WalletProvider.tsx (4)
examples/hello/frontend/src/hooks/useWalletProviders.ts (1)
useWalletProviders(12-55)examples/hello/frontend/src/hooks/useWalletConnection.ts (1)
useWalletConnection(17-191)examples/hello/frontend/src/hooks/useWalletState.ts (1)
useWalletState(7-74)examples/hello/frontend/src/context/WalletContext.ts (1)
WalletContext(22-34)
examples/hello/frontend/src/ConnectedContent.tsx (3)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/constants/chains.ts (1)
SupportedChain(1-6)examples/hello/frontend/src/ConfirmedContent.tsx (1)
ConfirmedContent(29-143)
examples/hello/frontend/src/components/WalletSelectionModal.tsx (2)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/components/Modal.tsx (1)
Modal(12-26)
examples/hello/frontend/src/context/WalletContext.ts (1)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)
examples/hello/frontend/src/hooks/useWalletEvents.ts (1)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)
examples/hello/frontend/src/hooks/useWalletProviders.ts (2)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/utils/eip6963.ts (2)
createProviderAnnounceHandler(75-82)requestEIP6963Providers(9-11)
🪛 Biome (1.9.4)
examples/hello/frontend/tsconfig.node.json
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
examples/hello/frontend/src/utils/eip6963.ts
[error] 66-66: Unnecessary continue statement
Unsafe fix: Delete the unnecessary continue statement
(lint/correctness/noUnnecessaryContinue)
examples/hello/frontend/tsconfig.app.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-27: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🧰 Additional context used
🧬 Code Graph Analysis (19)
examples/hello/frontend/src/hooks/useWallet.ts (1)
examples/hello/frontend/src/context/WalletContext.ts (1)
WalletContext(22-34)
examples/hello/frontend/src/App.tsx (2)
examples/hello/frontend/src/components/Header.tsx (1)
Header(8-51)examples/hello/frontend/src/AppContent.tsx (1)
AppContent(9-43)
examples/hello/frontend/src/components/Header.tsx (4)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/constants/chains.ts (1)
SUPPORTED_CHAINS(8-45)examples/hello/frontend/src/components/IconZetaChainLogo.tsx (1)
IconZetaChainLogo(74-74)examples/hello/frontend/src/utils/truncate.ts (1)
truncateAddress(1-3)
examples/hello/frontend/src/types/eip6963.d.ts (1)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963AnnounceProviderEvent(23-25)
examples/hello/frontend/src/hooks/useWalletState.ts (3)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/constants/chains.ts (1)
SUPPORTED_CHAIN_IDS(47-49)examples/hello/frontend/src/hooks/useWalletEvents.ts (1)
useWalletEvents(9-35)
examples/hello/frontend/src/AppContent.tsx (5)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/constants/chains.ts (1)
SUPPORTED_CHAINS(8-45)examples/hello/frontend/src/DisconnectedContent.tsx (1)
DisconnectedContent(7-45)examples/hello/frontend/src/UnsupportedNetworkContent.tsx (1)
UnsupportedNetworkContent(11-46)examples/hello/frontend/src/ConnectedContent.tsx (1)
ConnectedContent(16-148)
examples/hello/frontend/src/main.tsx (1)
examples/hello/frontend/src/context/WalletProvider.tsx (1)
WalletProvider(9-41)
examples/hello/frontend/src/hooks/useWalletConnection.ts (3)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/utils/walletStorage.ts (2)
StoredWalletData(4-9)getEmptyWalletData(14-21)examples/hello/frontend/src/utils/eip6963.ts (4)
findProviderByUuid(16-21)findProviderByRdns(26-31)findProviderByName(36-41)findProviderByAccount(47-70)
examples/hello/frontend/src/DisconnectedContent.tsx (3)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/components/WalletSelectionModal.tsx (1)
WalletSelectionModal(11-37)
examples/hello/frontend/src/utils/eip6963.ts (1)
examples/hello/frontend/src/types/wallet.ts (2)
EIP6963ProviderDetail(18-21)EIP6963AnnounceProviderEvent(23-25)
examples/hello/frontend/src/UnsupportedNetworkContent.tsx (3)
examples/hello/frontend/src/hooks/useSwitchChain.ts (1)
useSwitchChain(5-28)examples/hello/frontend/src/constants/chains.ts (1)
SupportedChain(1-6)examples/hello/frontend/src/components/ChainSelectionModal.tsx (1)
ChainSelectionModal(10-31)
examples/hello/frontend/src/hooks/useSwitchChain.ts (1)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)
examples/hello/frontend/src/components/ChainSelectionModal.tsx (2)
examples/hello/frontend/src/constants/chains.ts (2)
SupportedChain(1-6)SUPPORTED_CHAINS(8-45)examples/hello/frontend/src/components/Modal.tsx (1)
Modal(12-26)
examples/hello/frontend/src/context/WalletProvider.tsx (4)
examples/hello/frontend/src/hooks/useWalletProviders.ts (1)
useWalletProviders(12-55)examples/hello/frontend/src/hooks/useWalletConnection.ts (1)
useWalletConnection(17-191)examples/hello/frontend/src/hooks/useWalletState.ts (1)
useWalletState(7-74)examples/hello/frontend/src/context/WalletContext.ts (1)
WalletContext(22-34)
examples/hello/frontend/src/ConnectedContent.tsx (3)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/constants/chains.ts (1)
SupportedChain(1-6)examples/hello/frontend/src/ConfirmedContent.tsx (1)
ConfirmedContent(29-143)
examples/hello/frontend/src/components/WalletSelectionModal.tsx (2)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/components/Modal.tsx (1)
Modal(12-26)
examples/hello/frontend/src/context/WalletContext.ts (1)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)
examples/hello/frontend/src/hooks/useWalletEvents.ts (1)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)
examples/hello/frontend/src/hooks/useWalletProviders.ts (2)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/utils/eip6963.ts (2)
createProviderAnnounceHandler(75-82)requestEIP6963Providers(9-11)
🪛 Biome (1.9.4)
examples/hello/frontend/tsconfig.node.json
[error] 9-9: JSON standard does not allow comments.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: JSON standard does not allow comments.
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
examples/hello/frontend/src/utils/eip6963.ts
[error] 66-66: Unnecessary continue statement
Unsafe fix: Delete the unnecessary continue statement
(lint/correctness/noUnnecessaryContinue)
examples/hello/frontend/tsconfig.app.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 12-12: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 13-13: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 14-14: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 18-18: JSON standard does not allow comments.
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 20-20: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 25-25: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-26: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 26-27: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🔇 Additional comments (52)
.gitignore (1)
8-8: LGTM: Standard build artifact exclusion.The addition of the
distdirectory to.gitignoreis appropriate for a Vite-based React project, ensuring build artifacts are excluded from version control.examples/hello/frontend/src/App.tsx (1)
1-13: LGTM: Clean root component structure.The App component follows React best practices with clear separation of concerns, appropriate use of React fragments, and clean import structure. The composition pattern effectively separates header functionality from main content.
examples/hello/frontend/src/vite-env.d.ts (1)
1-1: LGTM: Standard Vite TypeScript integration.The triple-slash directive properly enables TypeScript support for Vite's client-side APIs and environment variables, following standard Vite + TypeScript project conventions.
examples/hello/frontend/tsconfig.json (1)
1-18: Confirm TS path mapping aligns with Vite aliasThe explicit
"ethers"path in examples/hello/frontend/tsconfig.json mirrors theresolve.aliasanddedupe: ['ethers']settings in examples/hello/frontend/vite.config.ts, ensuring a single, correct instance of ethers. No duplicate versions were detected and the mapping is justified.No further changes required.
examples/hello/frontend/src/hooks/useWallet.ts (1)
1-4: LGTM: Standard context consumer hook pattern.The
useWallethook follows React best practices by encapsulating context consumption in a custom hook, providing a clean API for components while allowing for future enhancements without breaking consumer code.examples/hello/frontend/.prettierrc.json (1)
1-7: Well-configured Prettier setup.The configuration follows industry standards with appropriate settings for a TypeScript React project. The 80-character line width and ES5 trailing comma settings ensure good readability and broad compatibility.
examples/hello/frontend/src/types/eip6963.d.ts (1)
1-8: Excellent type safety implementation for EIP-6963.The global module augmentation correctly extends WindowEventMap with EIP-6963 events, ensuring type safety throughout the wallet provider discovery system. The implementation follows TypeScript declaration best practices.
examples/hello/frontend/index.html (1)
16-17: Clean React mounting setup.The root div and module script setup correctly supports the React 18 application with Vite bundling. The structure aligns perfectly with the main.tsx entry point.
examples/hello/frontend/src/ConfirmedContent.css (1)
1-41: LGTM – style block is self-contained and responsive.
No functional or maintainability issues spotted.examples/hello/frontend/src/hooks/useWalletEvents.ts (1)
24-33: Excellent event listener management.The implementation correctly sets up event listeners on the provider and ensures proper cleanup in the effect's return function. This prevents memory leaks and multiple event bindings.
examples/hello/frontend/src/components/WalletSelectionModal.tsx (1)
4-9: Well-defined component interface.The props interface clearly defines all required properties with appropriate types, ensuring type safety and clear component contracts.
examples/hello/frontend/README.md (1)
1-70: Comprehensive and well-structured documentation.The README provides clear guidance for React + TypeScript + Vite setup with appropriate ESLint configuration examples. The documentation covers both basic setup and advanced type-aware linting configurations with practical code examples.
examples/hello/frontend/src/components/Header.tsx (3)
1-6: Import structure is well-organized and follows best practices.The imports are logically grouped and use appropriate relative paths for the project structure.
8-14: Component logic and chain lookup implementation are correct.The destructuring of wallet state and chain matching logic using
Array.find()properly handles both supported and unsupported networks.
16-30: Conditional rendering and fallback handling are implemented correctly.The use of optional chaining and fallback values for unsupported networks ensures robust handling of edge cases while maintaining accessibility standards.
examples/hello/frontend/src/utils/walletStorage.ts (1)
1-9: Interface definition is well-structured and appropriately typed.The
StoredWalletDatainterface correctly uses nullable string types, which aligns with localStorage's string-based nature and handles cases where data may not be present.examples/hello/frontend/src/hooks/useWalletProviders.ts (3)
1-13: Hook initialization and imports are properly structured.The imports are well-organized, and the state initialization with proper TypeScript typing follows React best practices.
15-27: Provider deduplication logic is correctly implemented.The use of
useCallbackwith functional state updates and UUID-based deduplication properly prevents duplicate providers while avoiding stale closure issues.
29-52: Effect implementation follows React best practices with proper cleanup.The event listener setup, provider discovery initiation, and cleanup logic are correctly implemented. The type casting to
EventListeneris appropriate for the custom EIP-6963 event handling.examples/hello/frontend/src/components/Modal.css (3)
1-12: Modal overlay implementation follows established best practices.The fixed positioning, semi-transparent background, flexbox centering, and appropriate z-index create a proper modal overlay foundation.
14-20: Modal content styling is well-designed for responsive use.The combination of responsive width, max-width constraint, and appropriate padding creates a flexible modal content area suitable for various screen sizes.
22-32: Title and item list styling uses modern CSS practices.The margin management and flexbox layout with gap property provide clean, consistent spacing throughout the modal content.
examples/hello/frontend/src/components/ChainSelectionModal.tsx (1)
1-8: Imports and interface definition follow TypeScript best practices.The use of type-only imports and well-defined props interface with appropriate callback typing demonstrates good TypeScript usage.
examples/hello/frontend/src/DisconnectedContent.tsx (1)
7-45: Component implementation follows React best practices.The component correctly uses hooks, manages local state, and integrates well with the wallet context system. The conditional rendering and prop passing to child components are handled appropriately.
examples/hello/frontend/src/AppContent.tsx (1)
22-24: useMemo optimization is appropriate for complex boolean logic.The memoization prevents unnecessary re-renders when the wallet connection state changes, which is a good performance optimization.
examples/hello/frontend/package.json (1)
12-20: Dependencies are well-chosen for a modern React blockchain application.The dependency selection demonstrates good architectural decisions:
- React 19.1.0 for latest features
- Modern blockchain libraries (ethers v6, viem)
- React Query for data fetching
- React-use for additional hooks
examples/hello/frontend/src/types/cctx.ts (1)
69-76: Excellent use of const assertion pattern.The status enumeration using const assertion provides type safety while maintaining runtime value access. This is a production-grade TypeScript pattern.
examples/hello/frontend/eslint.config.mjs (2)
9-23: Comprehensive ignore patterns for build artifacts.The ignore configuration appropriately excludes common build directories and artifacts, which is essential for performance and avoiding false positives.
44-51: Excellent TypeScript unused variable configuration.The configuration to ignore variables prefixed with underscore is a professional pattern that allows for intentional unused parameters while catching genuine oversights.
examples/hello/frontend/src/constants/chains.ts (3)
47-49: Clean derivation of chain IDs array.The extraction of chain IDs into a separate array provides a clean, maintainable way to access just the IDs when needed, following DRY principles.
13-13: All static asset paths verified
All referenced icon files were found inexamples/hello/frontend/public/logos/. No further action required.
8-45: All chain IDs and explorer URLs verified successfullyAll specified testnet chain IDs match current configurations, and each explorer URL responds with HTTP 200. No changes required.
examples/hello/frontend/src/components/Header.css (1)
67-88: Well-structured responsive design implementation.The media query implementation properly scales the header components for desktop viewports, maintaining proportional relationships and improving usability on larger screens.
examples/hello/frontend/src/UnsupportedNetworkContent.tsx (3)
7-9: Well-defined interface with clear naming.The props interface is appropriately minimal and uses descriptive naming that clearly indicates the expected data type.
11-22: Proper state management and event handling implementation.The component correctly manages modal state and implements chain switching logic. The
handleSwitchChainfunction appropriately calls the switch operation and closes the modal in sequence.
24-46: Clean UI implementation with appropriate user guidance.The component provides clear messaging about the unsupported network status and offers an actionable solution. The modal integration is properly configured with all necessary props.
examples/hello/frontend/src/types/wallet.ts (3)
11-21: EIP-6963 interfaces are correctly implemented.The provider info and provider detail interfaces accurately reflect the EIP-6963 specification requirements.
23-25: Custom event interface properly extends CustomEvent.The announcement event interface correctly extends
CustomEventand includes the requireddetailproperty with the appropriate type.
2-9: EIP-1193 interface lacks essential methods.The current interface is missing critical methods required by the EIP-1193 specification, such as
eth_accounts,eth_chainId, and proper event handling methods.interface EIP1193Provider { request: (request: { method: string; params?: unknown[]; }) => Promise<unknown>; - on: (event: string, listener: (data: unknown) => void) => void; - removeListener: (event: string, listener: (data: unknown) => void) => void; + on: (event: string, listener: (...args: any[]) => void) => void; + removeListener: (event: string, listener: (...args: any[]) => void) => void; + isConnected?: () => boolean; }Likely an incorrect or invalid review comment.
examples/hello/frontend/src/hooks/useWalletState.ts (5)
7-14: Appropriate state initialization and memoization.The hook properly initializes state variables and uses
useMemofor the decimal chain ID conversion, ensuring efficient re-computation only when the chain ID changes.
16-19: Efficient chain support validation.The memoized chain support check prevents unnecessary re-computations and provides clear boolean validation against supported chain IDs.
21-36: Well-structured event handlers with proper memoization.The callback functions are appropriately memoized and handle wallet events correctly. The accounts handler properly manages the empty array case.
38-66: Robust wallet state initialization with error handling.The initialization logic properly handles provider changes, clears state when no provider is available, and includes appropriate error handling for async operations.
68-74: Complete state exposure for consuming components.The return object provides all necessary state values that consuming components would require for wallet integration.
examples/hello/frontend/src/ConfirmedContent.tsx (2)
40-50: Efficient status icon mapping with proper memoization.The status icon mapping is well-implemented using
useMemoand covers all relevant transaction states with appropriate visual indicators.
86-143: Well-structured UI with proper accessibility attributes.The component renders clear transaction status information with appropriate external links and proper
relattributes for security. The reset functionality properly clears both state variables.examples/hello/frontend/src/context/WalletContext.ts (2)
4-20: Comprehensive wallet context interface with proper typing.The interface covers all essential wallet management aspects including provider selection, connection states, error handling, and async operations. The function signatures are well-defined with appropriate return types.
22-34: Appropriate default values for disconnected state.The context initialization provides sensible defaults representing a disconnected wallet state, with no-op functions that maintain type safety and prevent runtime errors.
examples/hello/frontend/src/hooks/useWalletConnection.ts (1)
17-32: State management implementation is well-structured.The hook properly manages connection states and leverages localStorage persistence. The use of
react-use'suseLocalStorageprovides a clean API for data persistence.examples/hello/frontend/src/ConnectedContent.tsx (1)
93-94: Confirm ConfirmedContent prop usage
I was unable to locate theConfirmedContentimplementation to verify whether theselectedProviderprop is ever consumed. Please review the component definition inexamples/hello/frontend/src/ConfirmedContent.tsxand confirm ifselectedProvideris needed.• Location needing verification:
–examples/hello/frontend/src/ConnectedContent.tsx, lines 93–94
tsx <ConfirmedContent selectedProvider={selectedProvider} supportedChain={supportedChain} />examples/hello/frontend/src/index.css (1)
125-157: Well-implemented responsive design pattern.The mobile-first approach with progressive enhancement using
min-width: 768pxfollows best practices for responsive design.examples/hello/frontend/src/utils/eip6963.ts (1)
75-82: Event handler implementation is clean and follows EIP-6963 spec.The factory pattern for creating event handlers provides good flexibility while maintaining type safety with the EIP-6963 provider announcement events.
There was a problem hiding this comment.
Actionable comments posted: 8
♻️ Duplicate comments (1)
examples/hello/frontend/src/ConnectedContent.css (1)
60-65: LGTM - Disabled button styling properly implemented.The disabled button styling correctly includes
cursor: not-allowedand appropriate visual feedback, addressing accessibility concerns.
🧹 Nitpick comments (9)
examples/hello/frontend/src/components/icons/IconSendTitle.tsx (1)
3-7: Redundant className type declaration.The
classNameproperty is already included inSVGProps<SVGSVGElement>, making the explicit declaration unnecessary.Apply this diff to simplify the type definition:
-const IconSendTitle = ({ - ...otherProps -}: SVGProps<SVGSVGElement> & { - className?: string; -}) => { +const IconSendTitle = (props: SVGProps<SVGSVGElement>) => {Then update the SVG element to use the simplified props:
- {...otherProps} + {...props}examples/hello/frontend/src/components/icons/IconEnvelope.tsx (1)
11-17: Consider viewBox alignment with default size.The component uses a fixed viewBox of "0 0 25 25" but defaults to size 24, which may cause minor scaling artifacts. Consider aligning the default size to 25 or updating the viewBox to match the intended default dimensions.
- size = 24, + size = 25,examples/hello/frontend/src/components/WalletControls.tsx (1)
15-16: Remove unused wallet icon container.The empty div with
wallet-controls-iconclass serves no apparent purpose and should be removed to avoid unnecessary DOM elements.- <div className="wallet-controls-container"> - <div className="wallet-controls-icon" /> + <div className="wallet-controls-container">examples/hello/frontend/src/utils/formatNumber.ts (1)
6-8: Consider refactoring to reduce code duplication.The
formatNumberfunction could utilizeformatNumberWithLocaleinternally to eliminate redundancy while maintaining the same API.-export const formatNumber = (num: number): string => { - return num.toLocaleString('en-US'); -}; +export const formatNumber = (num: number): string => { + return formatNumberWithLocale(num); +};examples/hello/frontend/src/components/ConnectWallet.tsx (1)
15-21: Consider replacing alert with more elegant user feedback.While the logic is correct, using
alert()provides a poor user experience. Consider implementing a toast notification or inline message component for better UX.- alert('No wallet providers found. Please install a wallet extension.'); + // Consider using a toast notification or inline message instead + console.warn('No wallet providers found. Please install a wallet extension.');examples/hello/frontend/src/components/icons/IconSpinner.tsx (1)
27-31: Consider using CSS custom properties for theme consistency.The hardcoded color values (
#848484) should use CSS custom properties to align with the application's theming system, enabling proper light/dark mode support.Replace hardcoded colors with CSS variables:
- <stop offset="0" stopColor="#848484"></stop> - <stop offset=".3" stopColor="#848484" stopOpacity=".9"></stop> - <stop offset=".6" stopColor="#848484" stopOpacity=".6"></stop> - <stop offset=".8" stopColor="#848484" stopOpacity=".3"></stop> - <stop offset="1" stopColor="#848484" stopOpacity="0"></stop> + <stop offset="0" stopColor="var(--spinner-color, #848484)"></stop> + <stop offset=".3" stopColor="var(--spinner-color, #848484)" stopOpacity=".9"></stop> + <stop offset=".6" stopColor="var(--spinner-color, #848484)" stopOpacity=".6"></stop> + <stop offset=".8" stopColor="var(--spinner-color, #848484)" stopOpacity=".3"></stop> + <stop offset="1" stopColor="var(--spinner-color, #848484)" stopOpacity="0"></stop>- stroke="#848484" + stroke="var(--spinner-color, #848484)"Also applies to: 62-62
examples/hello/frontend/src/MessageFlowCard.tsx (2)
54-54: Consider making gas limits configurable.The hardcoded gas limits (
1000000) may be insufficient for some transactions or wasteful for others, and should be configurable based on network conditions.Create configurable gas limit constants:
+const GAS_LIMITS = { + EVM_CALL: 1000000, + ON_REVERT: 1000000, +} as const; const evmCallParams = { receiver: helloUniversalContractAddress, types: ['string'], values: [stringValue], revertOptions: { callOnRevert: false, revertAddress: ZeroAddress, revertMessage: '', abortAddress: ZeroAddress, - onRevertGasLimit: 1000000, + onRevertGasLimit: GAS_LIMITS.ON_REVERT, }, }; const evmCallOptions = { signer, txOptions: { - gasLimit: 1000000, + gasLimit: GAS_LIMITS.EVM_CALL, }, };Also applies to: 61-61
30-32: Optimize byte length calculation.Creating a new
TextEncoderinstance for each calculation is inefficient. Consider memoizing or creating a single instance.+const textEncoder = new TextEncoder(); + const MessageFlowCard = ({ selectedProvider, supportedChain, }: MessageFlowCardProps) => { const MAX_STRING_LENGTH = 2000; // ... other state ... const getStringByteLength = (string: string) => { - return new TextEncoder().encode(string).length; + return textEncoder.encode(string).length; };examples/hello/frontend/src/ConnectedContent.css (1)
1-125: Consider using consistent units and custom properties for spacing.The CSS uses a mix of px and rem units, and has some magic numbers that could benefit from standardization through CSS custom properties.
Consider defining spacing and typography scales:
:root { --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 2rem; /* 32px */ --spacing-xl: 4rem; /* 64px */ --spacing-2xl: 8rem; /* 128px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 2.625rem; /* 42px */ --font-size-3xl: 4.75rem; /* 76px */ }Then replace hardcoded values:
.content-container { align-items: center; display: flex; flex-direction: column; - gap: 64px; + gap: var(--spacing-xl); } .content-container-inner { display: flex; flex-direction: column; - gap: 24px; - margin-top: 128px; + gap: var(--spacing-md); + margin-top: var(--spacing-2xl); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
examples/hello/frontend/public/fonts/inter/inter-black.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-bold.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-extra-bold.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-extra-light.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-light.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-medium.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-regular.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-semi-bold.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-thin.ttfis excluded by!**/*.ttfexamples/hello/frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (59)
examples/hello/frontend/index.html(1 hunks)examples/hello/frontend/package.json(1 hunks)examples/hello/frontend/public/fonts/inter/OFL.txt(1 hunks)examples/hello/frontend/src/App.tsx(1 hunks)examples/hello/frontend/src/AppContent.tsx(1 hunks)examples/hello/frontend/src/ConfirmedContent.css(1 hunks)examples/hello/frontend/src/ConfirmedContent.tsx(1 hunks)examples/hello/frontend/src/ConnectedContent.css(1 hunks)examples/hello/frontend/src/ConnectedContent.tsx(1 hunks)examples/hello/frontend/src/DisconnectedContent.css(1 hunks)examples/hello/frontend/src/DisconnectedContent.tsx(1 hunks)examples/hello/frontend/src/Footer.css(1 hunks)examples/hello/frontend/src/Footer.tsx(1 hunks)examples/hello/frontend/src/MessageFlowCard.css(1 hunks)examples/hello/frontend/src/MessageFlowCard.tsx(1 hunks)examples/hello/frontend/src/components/Button.css(1 hunks)examples/hello/frontend/src/components/Button.tsx(1 hunks)examples/hello/frontend/src/components/ConnectWallet.css(1 hunks)examples/hello/frontend/src/components/ConnectWallet.tsx(1 hunks)examples/hello/frontend/src/components/Dropdown.css(1 hunks)examples/hello/frontend/src/components/Dropdown.tsx(1 hunks)examples/hello/frontend/src/components/Header.css(1 hunks)examples/hello/frontend/src/components/Header.tsx(1 hunks)examples/hello/frontend/src/components/Modal.css(1 hunks)examples/hello/frontend/src/components/Modal.tsx(1 hunks)examples/hello/frontend/src/components/NetworkSelector.tsx(1 hunks)examples/hello/frontend/src/components/ThemeToggle.css(1 hunks)examples/hello/frontend/src/components/ThemeToggle.tsx(1 hunks)examples/hello/frontend/src/components/WalletControls.css(1 hunks)examples/hello/frontend/src/components/WalletControls.tsx(1 hunks)examples/hello/frontend/src/components/WalletSelectionModal.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconAnimation.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconApprove.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconArrowRotated.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconCloseModal.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconDisconnect.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconDiscuss.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconDocs.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconEnvelope.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconExternalLink.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconReceived.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconSendTitle.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconSpinner.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconThemeMoon.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconThemeSun.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconTutorials.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconWallet.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconZetaChainLogo.tsx(1 hunks)examples/hello/frontend/src/components/icons/index.ts(1 hunks)examples/hello/frontend/src/constants/chains.ts(1 hunks)examples/hello/frontend/src/context/ThemeContext.ts(1 hunks)examples/hello/frontend/src/context/ThemeProvider.tsx(1 hunks)examples/hello/frontend/src/context/WalletContext.ts(1 hunks)examples/hello/frontend/src/fonts.css(1 hunks)examples/hello/frontend/src/hooks/useTheme.ts(1 hunks)examples/hello/frontend/src/index.css(1 hunks)examples/hello/frontend/src/main.tsx(1 hunks)examples/hello/frontend/src/utils/formatNumber.ts(1 hunks)examples/hello/frontend/src/utils/truncate.ts(1 hunks)
✅ Files skipped from review due to trivial changes (29)
- examples/hello/frontend/src/ConfirmedContent.css
- examples/hello/frontend/src/components/ConnectWallet.css
- examples/hello/frontend/src/components/ThemeToggle.css
- examples/hello/frontend/src/DisconnectedContent.tsx
- examples/hello/frontend/public/fonts/inter/OFL.txt
- examples/hello/frontend/src/components/icons/IconTutorials.tsx
- examples/hello/frontend/src/components/icons/IconThemeMoon.tsx
- examples/hello/frontend/src/components/icons/IconReceived.tsx
- examples/hello/frontend/src/components/icons/IconDocs.tsx
- examples/hello/frontend/src/DisconnectedContent.css
- examples/hello/frontend/src/components/icons/IconApprove.tsx
- examples/hello/frontend/src/components/icons/IconCloseModal.tsx
- examples/hello/frontend/src/components/WalletControls.css
- examples/hello/frontend/src/components/Button.css
- examples/hello/frontend/src/components/icons/IconDisconnect.tsx
- examples/hello/frontend/src/components/icons/IconThemeSun.tsx
- examples/hello/frontend/src/fonts.css
- examples/hello/frontend/src/components/icons/IconExternalLink.tsx
- examples/hello/frontend/src/components/icons/IconAnimation.tsx
- examples/hello/frontend/src/components/icons/IconArrowRotated.tsx
- examples/hello/frontend/src/Footer.css
- examples/hello/frontend/src/components/icons/IconWallet.tsx
- examples/hello/frontend/src/components/Modal.css
- examples/hello/frontend/src/ConnectedContent.tsx
- examples/hello/frontend/src/components/icons/index.ts
- examples/hello/frontend/src/MessageFlowCard.css
- examples/hello/frontend/package.json
- examples/hello/frontend/src/index.css
- examples/hello/frontend/src/components/Dropdown.css
🚧 Files skipped from review as they are similar to previous changes (10)
- examples/hello/frontend/src/utils/truncate.ts
- examples/hello/frontend/index.html
- examples/hello/frontend/src/main.tsx
- examples/hello/frontend/src/components/Header.tsx
- examples/hello/frontend/src/components/WalletSelectionModal.tsx
- examples/hello/frontend/src/ConfirmedContent.tsx
- examples/hello/frontend/src/components/Header.css
- examples/hello/frontend/src/components/Modal.tsx
- examples/hello/frontend/src/constants/chains.ts
- examples/hello/frontend/src/context/WalletContext.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: hernan-clich
PR: zeta-chain/example-contracts#276
File: examples/hello/frontend/src/ConnectedContent.tsx:111-115
Timestamp: 2025-07-28T19:12:26.227Z
Learning: The user hernan-clich prefers to address redundant conditional rendering improvements in follow-up PRs rather than the current PR to maintain focused scope.
Learnt from: hernan-clich
PR: zeta-chain/example-contracts#276
File: examples/hello/frontend/tsconfig.node.json:16-22
Timestamp: 2025-07-28T19:20:39.900Z
Learning: The user hernan-clich prefers to reference previous discussions when the same issue appears in multiple files, indicating a preference for consistent resolution approaches across similar configuration files.
examples/hello/frontend/src/AppContent.tsx (4)
Learnt from: hernan-clich
PR: #276
File: examples/hello/frontend/src/ConnectedContent.tsx:111-115
Timestamp: 2025-07-28T19:12:26.227Z
Learning: The user hernan-clich prefers to address redundant conditional rendering improvements in follow-up PRs rather than the current PR to maintain focused scope.
Learnt from: hernan-clich
PR: #276
File: examples/hello/frontend/tsconfig.node.json:16-22
Timestamp: 2025-07-28T19:25:10.221Z
Learning: The user hernan-clich confirmed that the experimental TypeScript compiler options erasableSyntaxOnly and noUncheckedSideEffectImports in tsconfig.node.json work correctly with tsc and prefers to keep working configurations unchanged, even when they contain experimental features.
Learnt from: hernan-clich
PR: #276
File: examples/hello/frontend/src/main.tsx:9-15
Timestamp: 2025-07-28T19:16:31.473Z
Learning: The user hernan-clich prefers to trust established framework team decisions (like Vite) over adding additional error handling, especially for common patterns like root element access in React entry points.
Learnt from: hernan-clich
PR: #276
File: examples/hello/frontend/tsconfig.node.json:16-22
Timestamp: 2025-07-28T19:20:39.900Z
Learning: The user hernan-clich prefers to reference previous discussions when the same issue appears in multiple files, indicating a preference for consistent resolution approaches across similar configuration files.
🧬 Code Graph Analysis (7)
examples/hello/frontend/src/App.tsx (3)
examples/hello/frontend/src/context/ThemeProvider.tsx (1)
ThemeProvider(10-40)examples/hello/frontend/src/components/Header.tsx (1)
Header(8-25)examples/hello/frontend/src/AppContent.tsx (1)
AppContent(6-23)
examples/hello/frontend/src/hooks/useTheme.ts (1)
examples/hello/frontend/src/context/ThemeContext.ts (1)
ThemeContext(10-12)
examples/hello/frontend/src/components/icons/IconZetaChainLogo.tsx (1)
examples/hello/frontend/src/hooks/useTheme.ts (1)
useTheme(5-11)
examples/hello/frontend/src/components/ConnectWallet.tsx (4)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/components/Button.tsx (1)
Button(13-40)examples/hello/frontend/src/components/WalletSelectionModal.tsx (1)
WalletSelectionModal(11-39)
examples/hello/frontend/src/components/WalletControls.tsx (3)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/utils/truncate.ts (1)
truncateAddress(1-3)examples/hello/frontend/src/components/icons/IconDisconnect.tsx (1)
IconDisconnect(33-33)
examples/hello/frontend/src/components/ThemeToggle.tsx (2)
examples/hello/frontend/src/hooks/useTheme.ts (1)
useTheme(5-11)examples/hello/frontend/src/components/icons/IconThemeSun.tsx (1)
IconThemeSun(33-33)
examples/hello/frontend/src/context/ThemeProvider.tsx (1)
examples/hello/frontend/src/context/ThemeContext.ts (2)
Theme(3-3)ThemeContext(10-12)
🔇 Additional comments (30)
examples/hello/frontend/src/components/icons/IconSendTitle.tsx (2)
1-2: LGTM!The import statement correctly imports the necessary React types for SVG components.
44-44: LGTM!The named export follows consistent patterns and is properly structured.
examples/hello/frontend/src/App.tsx (1)
1-14: Well-structured root component with proper context integration.The App component follows React best practices with clean separation of concerns. The ThemeProvider wrapper ensures theme context is available throughout the component tree, and the component hierarchy is logical and maintainable.
examples/hello/frontend/src/hooks/useTheme.ts (1)
5-11: Excellent custom hook implementation with proper error handling.The hook correctly validates that it's used within a ThemeProvider and provides a clear error message for misuse. This follows React best practices for context consumption hooks.
examples/hello/frontend/src/Footer.tsx (3)
13-25: Secure external link implementation with proper attributes.The footer links correctly use
target="_blank"withrel="noopener noreferrer"for security. The component structure is clean and follows a consistent pattern across all footer cards.
26-38: Consistent card pattern implementation.The documentation link follows the same secure pattern and structure as the tutorials card, maintaining consistency in the UI.
39-51: Discord link follows established security patterns.The Discord link maintains the same secure implementation pattern with proper external link attributes and consistent card structure.
examples/hello/frontend/src/components/icons/IconDiscuss.tsx (1)
3-26: Well-implemented SVG icon component with proper TypeScript integration.The component correctly extends SVGProps and provides a configurable size prop with a sensible default. The spread operator allows for additional SVG customization while maintaining type safety.
examples/hello/frontend/src/AppContent.tsx (1)
6-23: Clean conditional rendering logic with proper wallet state management.The component effectively switches between disconnected and connected states based on wallet connection status. The supported chain lookup and conditional rendering patterns are appropriate for the application flow.
examples/hello/frontend/src/components/ThemeToggle.tsx (1)
8-27: LGTM: Well-implemented theme toggle with excellent accessibility.The component demonstrates solid React patterns with proper hook usage, comprehensive accessibility attributes, and intuitive icon logic that shows the target theme state rather than the current one.
examples/hello/frontend/src/components/WalletControls.tsx (1)
7-31: LGTM: Clean wallet controls implementation.The component properly handles wallet state management, address formatting, and user interactions with appropriate accessibility attributes.
examples/hello/frontend/src/utils/formatNumber.ts (1)
16-21: LGTM: Well-documented locale-aware formatting utility.The function provides flexible number formatting with sensible defaults and comprehensive documentation.
examples/hello/frontend/src/components/icons/IconZetaChainLogo.tsx (1)
5-34: LGTM: Excellent theme-aware logo implementation.The component demonstrates sophisticated theme integration with dynamic coloring, proper aspect ratio calculations, and clean SVG optimization. The conditional fill colors provide appropriate brand contrast for both light and dark themes.
examples/hello/frontend/src/context/ThemeContext.ts (3)
3-3: Well-defined theme type.The union type provides excellent type safety by restricting theme values to valid options.
5-8: Clean and comprehensive context interface.The interface properly encapsulates both state and actions needed for theme management.
10-12: Excellent context initialization pattern.Initializing with
undefinedenforces proper provider usage and prevents accidental context consumption outside the provider tree.examples/hello/frontend/src/components/ConnectWallet.tsx (3)
1-14: Well-structured imports and component initialization.The import organization follows conventions and the component properly integrates with the wallet context.
23-26: Clean provider selection handler.The function properly manages the connection flow and modal state.
27-45: Well-structured component rendering with proper state handling.The JSX properly handles loading states, accessibility, and modal integration.
examples/hello/frontend/src/context/ThemeProvider.tsx (4)
1-9: Clean imports and well-defined provider props.The import structure and interface definition follow React best practices.
10-23: Excellent theme initialization with proper preference hierarchy.The lazy initialization correctly prioritizes user preferences: saved → system → default, with proper media query usage for system detection.
25-29: Proper theme application and persistence.The effect correctly applies theme changes to the DOM and persists user preferences.
31-40: Clean toggle implementation and proper context provision.The functional state update prevents closure issues, and the provider correctly supplies both state and actions.
examples/hello/frontend/src/components/NetworkSelector.tsx (4)
1-12: Well-structured imports and comprehensive props interface.The component interface provides good flexibility with optional properties and sensible defaults.
14-32: Effective memoization with proper data transformation.The options memoization correctly assumes
SUPPORTED_CHAINSis static. The mapping logic cleanly transforms chain metadata to dropdown options.
34-43: Correct selectedOption memoization with proper dependencies.The find logic correctly matches by
chainIdand the dependency array properly includes bothselectedChainandoptions.
45-59: Clean selection handling and proper component composition.The handler correctly extracts the chain value and the Dropdown integration is well-implemented with proper prop passing.
examples/hello/frontend/src/components/Button.tsx (3)
1-11: Excellent component interface extending standard button attributes.The interface provides full HTML button compatibility while adding custom features for icons and variants.
13-32: Robust component implementation with proper prop handling.The destructuring, default values, and clsx usage create a flexible and maintainable button component.
34-40: Well-structured button content with conditional icon rendering.The content wrapper and conditional icon rendering provide excellent flexibility for styling and layout.
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (8)
examples/hello/frontend/src/Footer.tsx (1)
10-54: Consider refactoring repetitive footer card structure.The Footer component is well-implemented with proper security attributes and semantic structure. However, the three footer cards follow an identical pattern that could be refactored for better maintainability.
Consider extracting the footer card data into a configuration array:
+const footerCards = [ + { + href: "https://www.zetachain.com/docs/developers/tutorials/intro/", + icon: IconTutorials, + title: "Build Your Own", + subtitle: "Tutorials" + }, + { + href: "https://zetachain.com/docs/", + icon: IconDocs, + title: "Documentation", + subtitle: "Dig in to the docs" + }, + { + href: "https://discord.gg/zetachain", + icon: IconDiscuss, + title: "Ask Questions", + subtitle: "Discuss on Discord" + } +]; + export function Footer() { return ( <div className="footer-container"> - <a - className="footer-card" - href="https://www.zetachain.com/docs/developers/tutorials/intro/" - target="_blank" - rel="noopener noreferrer" - > - <IconTutorials /> - <div className="footer-card-text"> - <span className="footer-card-text-title">Build Your Own</span> - <span className="footer-card-text-subtitle">Tutorials</span> - </div> - <IconArrowRotated /> - </a> - <a - className="footer-card" - href="https://zetachain.com/docs/" - target="_blank" - rel="noopener noreferrer" - > - <IconDocs /> - <div className="footer-card-text"> - <span className="footer-card-text-title">Documentation</span> - <span className="footer-card-text-subtitle">Dig in to the docs</span> - </div> - <IconArrowRotated /> - </a> - <a - className="footer-card" - href="https://discord.gg/zetachain" - target="_blank" - rel="noopener noreferrer" - > - <IconDiscuss /> - <div className="footer-card-text"> - <span className="footer-card-text-title">Ask Questions</span> - <span className="footer-card-text-subtitle">Discuss on Discord</span> - </div> - <IconArrowRotated /> - </a> + {footerCards.map((card, index) => { + const IconComponent = card.icon; + return ( + <a + key={index} + className="footer-card" + href={card.href} + target="_blank" + rel="noopener noreferrer" + > + <IconComponent /> + <div className="footer-card-text"> + <span className="footer-card-text-title">{card.title}</span> + <span className="footer-card-text-subtitle">{card.subtitle}</span> + </div> + <IconArrowRotated /> + </a> + ); + })} </div> ); }examples/hello/frontend/src/utils/formatNumber.ts (1)
6-8: Consider consolidating redundant formatting functions.The
formatNumberfunction hardcodes the locale to 'en-US', which creates unnecessary duplication withformatNumberWithLocale. Consider either removing this function in favor of the more flexible alternative, or making it truly locale-agnostic by detecting the user's system locale.-export const formatNumber = (num: number): string => { - return num.toLocaleString('en-US'); -}; +export const formatNumber = (num: number): string => { + return num.toLocaleString(); +};This change would use the user's system locale by default, providing better internationalization support.
examples/hello/frontend/src/components/WalletControls.tsx (1)
16-16: Consider removing unused icon placeholder.The empty div with
wallet-controls-iconclass appears to be a placeholder that serves no functional purpose. Consider removing it unless it's intentionally reserved for future icon implementation.- <div className="wallet-controls-icon" />examples/hello/frontend/src/components/NetworkSelector.tsx (1)
28-28: Icon implementation could be more robust.The inline
<img>element for chain icons lacks error handling and accessibility attributes.- icon: <img src={chain.icon} alt={chain.name} />, + icon: <img src={chain.icon} alt={`${chain.name} logo`} onError={(e) => e.currentTarget.style.display = 'none'} />,examples/hello/frontend/src/MessageFlowCard.tsx (1)
54-55: Extract magic numbers to named constants.Gas limits and other numeric values should be extracted as named constants for better maintainability and clarity.
+const DEFAULT_GAS_LIMIT = 1000000; +const REVERT_GAS_LIMIT = 1000000; onRevertGasLimit: 1000000, + onRevertGasLimit: REVERT_GAS_LIMIT, }, }; const evmCallOptions = { signer, txOptions: { - gasLimit: 1000000, + gasLimit: DEFAULT_GAS_LIMIT, }, };Also applies to: 61-62
examples/hello/frontend/src/components/Dropdown.tsx (3)
72-79: Optimize event listener management.Event listeners are added/removed on every render when
isOpenchanges. Consider using a single effect with proper dependencies to minimize overhead.// Close dropdown when clicking outside or on escape key useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && !dropdownRef.current.contains(event.target as Node) ) { setIsOpen(false); } }; + const handleEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setIsOpen(false); + } + }; if (isOpen) { document.addEventListener('mousedown', handleClickOutside); + document.addEventListener('keydown', handleEscape); } return () => { document.removeEventListener('mousedown', handleClickOutside); + document.removeEventListener('keydown', handleEscape); }; }, [isOpen]); - // Close dropdown on escape key - useEffect(() => { - const handleEscape = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - setIsOpen(false); - } - }; - - if (isOpen) { - document.addEventListener('keydown', handleEscape); - } - - return () => { - document.removeEventListener('keydown', handleEscape); - }; - }, [isOpen]);Also applies to: 89-96
165-178: Consider enhancing keyboard navigation.The dropdown currently only supports Escape key. Consider adding arrow key navigation for improved accessibility.
Add support for ArrowDown, ArrowUp, Enter, and Space keys to navigate through options and make selections, following standard dropdown accessibility patterns.
113-125: Extract hardcoded SVG as reusable component.The arrow SVG should be extracted as a reusable icon component for consistency with the existing icon pattern.
+import { IconChevronDown } from './icons'; - <div className={`dropdown-arrow ${isOpen ? 'rotated' : ''}`}> - <svg - className="dropdown-arrow-icon" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 30 30" - fill="none" - > - <path - fillRule="evenodd" - clipRule="evenodd" - d="M6.25063 9.92407L15.0006 18.6741L23.7506 9.92407L25.0765 11.2499L15.6635 20.6628C15.2974 21.0289 14.7038 21.0289 14.3377 20.6628L4.9248 11.2499L6.25063 9.92407Z" - fill="#696E75" - /> - </svg> - </div> + <div className={`dropdown-arrow ${isOpen ? 'rotated' : ''}`}> + <IconChevronDown /> + </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
examples/hello/frontend/public/fonts/inter/inter-black.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-bold.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-extra-bold.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-extra-light.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-light.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-medium.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-regular.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-semi-bold.ttfis excluded by!**/*.ttfexamples/hello/frontend/public/fonts/inter/inter-thin.ttfis excluded by!**/*.ttfexamples/hello/frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (59)
examples/hello/frontend/index.html(1 hunks)examples/hello/frontend/package.json(1 hunks)examples/hello/frontend/public/fonts/inter/OFL.txt(1 hunks)examples/hello/frontend/src/App.tsx(1 hunks)examples/hello/frontend/src/AppContent.tsx(1 hunks)examples/hello/frontend/src/ConfirmedContent.css(1 hunks)examples/hello/frontend/src/ConfirmedContent.tsx(1 hunks)examples/hello/frontend/src/ConnectedContent.css(1 hunks)examples/hello/frontend/src/ConnectedContent.tsx(1 hunks)examples/hello/frontend/src/DisconnectedContent.css(1 hunks)examples/hello/frontend/src/DisconnectedContent.tsx(1 hunks)examples/hello/frontend/src/Footer.css(1 hunks)examples/hello/frontend/src/Footer.tsx(1 hunks)examples/hello/frontend/src/MessageFlowCard.css(1 hunks)examples/hello/frontend/src/MessageFlowCard.tsx(1 hunks)examples/hello/frontend/src/components/Button.css(1 hunks)examples/hello/frontend/src/components/Button.tsx(1 hunks)examples/hello/frontend/src/components/ConnectWallet.css(1 hunks)examples/hello/frontend/src/components/ConnectWallet.tsx(1 hunks)examples/hello/frontend/src/components/Dropdown.css(1 hunks)examples/hello/frontend/src/components/Dropdown.tsx(1 hunks)examples/hello/frontend/src/components/Header.css(1 hunks)examples/hello/frontend/src/components/Header.tsx(1 hunks)examples/hello/frontend/src/components/Modal.css(1 hunks)examples/hello/frontend/src/components/Modal.tsx(1 hunks)examples/hello/frontend/src/components/NetworkSelector.tsx(1 hunks)examples/hello/frontend/src/components/ThemeToggle.css(1 hunks)examples/hello/frontend/src/components/ThemeToggle.tsx(1 hunks)examples/hello/frontend/src/components/WalletControls.css(1 hunks)examples/hello/frontend/src/components/WalletControls.tsx(1 hunks)examples/hello/frontend/src/components/WalletSelectionModal.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconAnimation.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconApprove.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconArrowRotated.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconCloseModal.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconDisconnect.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconDiscuss.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconDocs.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconEnvelope.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconExternalLink.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconReceived.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconSendTitle.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconSpinner.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconThemeMoon.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconThemeSun.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconTutorials.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconWallet.tsx(1 hunks)examples/hello/frontend/src/components/icons/IconZetaChainLogo.tsx(1 hunks)examples/hello/frontend/src/components/icons/index.ts(1 hunks)examples/hello/frontend/src/constants/chains.ts(1 hunks)examples/hello/frontend/src/context/ThemeContext.ts(1 hunks)examples/hello/frontend/src/context/ThemeProvider.tsx(1 hunks)examples/hello/frontend/src/context/WalletContext.ts(1 hunks)examples/hello/frontend/src/fonts.css(1 hunks)examples/hello/frontend/src/hooks/useTheme.ts(1 hunks)examples/hello/frontend/src/index.css(1 hunks)examples/hello/frontend/src/main.tsx(1 hunks)examples/hello/frontend/src/utils/formatNumber.ts(1 hunks)examples/hello/frontend/src/utils/truncate.ts(1 hunks)
✅ Files skipped from review due to trivial changes (35)
- examples/hello/frontend/src/Footer.css
- examples/hello/frontend/src/components/WalletControls.css
- examples/hello/frontend/src/components/icons/IconThemeMoon.tsx
- examples/hello/frontend/src/components/ConnectWallet.css
- examples/hello/frontend/src/ConfirmedContent.css
- examples/hello/frontend/src/components/icons/IconWallet.tsx
- examples/hello/frontend/src/components/Button.css
- examples/hello/frontend/src/ConnectedContent.tsx
- examples/hello/frontend/src/components/ThemeToggle.tsx
- examples/hello/frontend/src/MessageFlowCard.css
- examples/hello/frontend/src/components/Header.css
- examples/hello/frontend/src/DisconnectedContent.css
- examples/hello/frontend/src/DisconnectedContent.tsx
- examples/hello/frontend/src/components/icons/IconReceived.tsx
- examples/hello/frontend/src/components/ThemeToggle.css
- examples/hello/frontend/src/components/icons/IconAnimation.tsx
- examples/hello/frontend/src/components/icons/IconDiscuss.tsx
- examples/hello/frontend/src/components/icons/IconEnvelope.tsx
- examples/hello/frontend/src/components/icons/IconDocs.tsx
- examples/hello/frontend/src/components/icons/IconTutorials.tsx
- examples/hello/frontend/src/fonts.css
- examples/hello/frontend/src/components/icons/IconDisconnect.tsx
- examples/hello/frontend/src/components/icons/IconApprove.tsx
- examples/hello/frontend/src/components/Dropdown.css
- examples/hello/frontend/src/components/icons/IconThemeSun.tsx
- examples/hello/frontend/src/components/icons/IconSpinner.tsx
- examples/hello/frontend/src/components/icons/IconSendTitle.tsx
- examples/hello/frontend/src/components/icons/IconExternalLink.tsx
- examples/hello/frontend/package.json
- examples/hello/frontend/src/components/icons/IconCloseModal.tsx
- examples/hello/frontend/src/components/icons/IconZetaChainLogo.tsx
- examples/hello/frontend/public/fonts/inter/OFL.txt
- examples/hello/frontend/src/components/Modal.css
- examples/hello/frontend/src/components/icons/index.ts
- examples/hello/frontend/src/index.css
🚧 Files skipped from review as they are similar to previous changes (10)
- examples/hello/frontend/index.html
- examples/hello/frontend/src/AppContent.tsx
- examples/hello/frontend/src/main.tsx
- examples/hello/frontend/src/components/Header.tsx
- examples/hello/frontend/src/utils/truncate.ts
- examples/hello/frontend/src/ConfirmedContent.tsx
- examples/hello/frontend/src/components/WalletSelectionModal.tsx
- examples/hello/frontend/src/constants/chains.ts
- examples/hello/frontend/src/context/WalletContext.ts
- examples/hello/frontend/src/components/Modal.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: hernan-clich
PR: zeta-chain/example-contracts#276
File: examples/hello/frontend/src/ConnectedContent.tsx:111-115
Timestamp: 2025-07-28T19:12:26.227Z
Learning: The user hernan-clich prefers to address redundant conditional rendering improvements in follow-up PRs rather than the current PR to maintain focused scope.
Learnt from: hernan-clich
PR: zeta-chain/example-contracts#276
File: examples/hello/frontend/tsconfig.node.json:16-22
Timestamp: 2025-07-28T19:20:39.900Z
Learning: The user hernan-clich prefers to reference previous discussions when the same issue appears in multiple files, indicating a preference for consistent resolution approaches across similar configuration files.
🧬 Code Graph Analysis (7)
examples/hello/frontend/src/MessageFlowCard.tsx (5)
examples/hello/frontend/src/types/wallet.ts (1)
EIP6963ProviderDetail(18-21)examples/hello/frontend/src/constants/chains.ts (1)
SupportedChain(1-7)examples/hello/frontend/src/ConfirmedContent.tsx (1)
ConfirmedContent(28-126)examples/hello/frontend/src/utils/formatNumber.ts (1)
formatNumberWithLocale(16-21)examples/hello/frontend/src/components/Button.tsx (1)
Button(13-40)
examples/hello/frontend/src/components/icons/IconArrowRotated.tsx (1)
examples/hello/frontend/src/hooks/useTheme.ts (1)
useTheme(5-11)
examples/hello/frontend/src/App.tsx (3)
examples/hello/frontend/src/context/ThemeProvider.tsx (1)
ThemeProvider(10-40)examples/hello/frontend/src/components/Header.tsx (1)
Header(8-25)examples/hello/frontend/src/AppContent.tsx (1)
AppContent(6-23)
examples/hello/frontend/src/hooks/useTheme.ts (1)
examples/hello/frontend/src/context/ThemeContext.ts (1)
ThemeContext(10-12)
examples/hello/frontend/src/context/ThemeProvider.tsx (1)
examples/hello/frontend/src/context/ThemeContext.ts (2)
Theme(3-3)ThemeContext(10-12)
examples/hello/frontend/src/components/NetworkSelector.tsx (2)
examples/hello/frontend/src/constants/chains.ts (2)
SupportedChain(1-7)SUPPORTED_CHAINS(9-52)examples/hello/frontend/src/components/Dropdown.tsx (2)
DropdownOption(5-12)Dropdown(32-214)
examples/hello/frontend/src/components/WalletControls.tsx (3)
examples/hello/frontend/src/hooks/useWallet.ts (1)
useWallet(4-4)examples/hello/frontend/src/utils/truncate.ts (1)
truncateAddress(1-3)examples/hello/frontend/src/components/icons/IconDisconnect.tsx (1)
IconDisconnect(33-33)
🔇 Additional comments (18)
examples/hello/frontend/src/Footer.tsx (2)
1-8: LGTM: Clean import organization.The import structure follows React best practices with CSS imports first, followed by well-organized component imports using consistent relative paths.
13-17: Excellent security practices for external links.All external links properly implement
target="_blank"withrel="noopener noreferrer"attributes, preventing potential security vulnerabilities and maintaining good user experience.Also applies to: 26-30, 39-43
examples/hello/frontend/src/utils/formatNumber.ts (1)
16-21: Well-implemented utility function.The function properly handles locale customization with appropriate defaults and type safety. The implementation follows TypeScript best practices.
examples/hello/frontend/src/App.tsx (1)
5-12: Clean and well-structured root component.The App component follows React best practices with proper component composition and context provider wrapping. The structure logically separates concerns between theming, header controls, and main content.
examples/hello/frontend/src/hooks/useTheme.ts (1)
5-11: Excellent implementation of context hook with proper error handling.The hook follows React best practices with comprehensive error handling that prevents misuse outside of the ThemeProvider. The error message provides clear guidance for developers.
examples/hello/frontend/src/components/WalletControls.tsx (1)
7-31: Well-structured component following React best practices.The component properly implements early returns, destructuring, and accessibility considerations. The integration with wallet context and utility functions is clean and appropriate.
examples/hello/frontend/src/components/icons/IconArrowRotated.tsx (1)
5-31: Excellent implementation of themed SVG icon component.The component demonstrates proper TypeScript usage, theme integration, and React best practices. The conditional theming provides appropriate visual contrast, and the props spreading ensures extensibility for various use cases.
examples/hello/frontend/src/context/ThemeProvider.tsx (2)
16-22: System preference detection logic is well-implemented.The fallback chain from localStorage → system preference → default dark theme follows best practices for theme initialization.
25-29: Direct DOM manipulation in useEffect is appropriate.The approach of setting
data-themeattribute on document root and persisting to localStorage is a standard pattern for theme management.examples/hello/frontend/src/context/ThemeContext.ts (1)
1-12: Well-structured context definition following React best practices.The theme types are appropriately constrained, the interface is minimal yet complete, and initializing the context with
undefinedproperly enforces usage within a provider.examples/hello/frontend/src/components/ConnectWallet.tsx (2)
23-26: Clean provider selection and modal management.The handler properly manages the connection flow and modal state, providing good separation of concerns.
29-36: Button implementation with proper loading states.The button correctly shows loading state during connection and uses appropriate accessibility props through the Button component.
examples/hello/frontend/src/components/NetworkSelector.tsx (2)
22-32: Efficient options mapping with proper memoization.The use of
useMemowith an empty dependency array is appropriate sinceSUPPORTED_CHAINSis a static constant. The mapping correctly transforms chain data into dropdown options.
35-43: Proper selected option calculation with correct dependencies.The memoization correctly depends on both
selectedChainandoptions, ensuring the selected option updates appropriately when either changes.examples/hello/frontend/src/components/Button.tsx (3)
6-11: Well-designed component interface extending HTML attributes.The interface properly extends
ButtonHTMLAttributeswhile adding custom props, providing excellent TypeScript integration and maintaining HTML button semantics.
24-31: Excellent use of clsx for conditional class management.The conditional class application is clean and maintainable, properly handling variant-specific styling while allowing additional classes.
34-37: Proper component composition with accessible structure.The button content structure with separate icon and children elements provides good flexibility for styling and maintains semantic clarity.
examples/hello/frontend/src/ConnectedContent.css (1)
1-125: Well-structured responsive CSS with proper theme support.The stylesheet demonstrates excellent responsive design patterns and theme-aware styling. The disabled button styling issue from previous reviews has been properly addressed with the
cursor: not-allowedproperty.
Description
Adds a complete React frontend application to the hello example with wallet connection, chain switching, and cross-chain transaction functionality. Includes TypeScript, Vite setup, and comprehensive UI components for interacting with the hello contract across multiple chains.
Walkthrough
rec-hello-fe-example.mp4
Summary by CodeRabbit
New Features
Documentation
Chores
.gitignoreupdates.