feat: use genlayerjs connect method in the studio #1286
Conversation
WalkthroughAdds VITE_NETWORK to Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant UI as UI
participant Store as AccountsStore
participant Hook as useGenlayer()
participant Client as GenlayerClient
participant Wallet as MetaMask/Provider
User->>UI: Select MetaMask account
UI->>Store: setCurrentAccount('metamask')
Store->>Hook: useGenlayer()
Store->>Client: connect(import.meta.env.VITE_NETWORK)
Note right of Client: Automatic connect on MetaMask selection
Client->>Wallet: Establish provider connection
Wallet-->>Client: Connected / Failed
Store->>Store: Update selectedAccount
Store-->>UI: State updated
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 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). (1)
✨ 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. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
.env.example (1)
105-105: Fix dotenv spacing to satisfy linterdotenv-linter flags spaces around '='. Align with the rest of the tooling by removing spaces.
-VITE_NETWORK = 'localnet' +VITE_NETWORK='localnet'Please confirm accepted values for VITE_NETWORK (e.g., 'localnet', 'studionet') and consider adding a one-line comment right above this line documenting them for users.
frontend/src/stores/accounts.ts (2)
165-171: Harden connect call: default network + user-facing error handlingIf VITE_NETWORK is missing or connect throws (user rejects, pending request, unknown chain), the current code silently fails. Add a safe default and notify on error.
- if (account?.type === 'metamask') { - const genlayer = useGenlayer(); - genlayer.client?.value?.connect(import.meta.env.VITE_NETWORK); - } + if (account?.type === 'metamask') { + const genlayer = useGenlayer(); + const targetNetwork = + (import.meta.env.VITE_NETWORK as string) || 'localnet'; + // Fire-and-forget but surface failures to the user + genlayer.client?.value + ?.connect(targetNetwork) + .catch((err: unknown) => + notify({ + title: 'Failed to connect Genlayer network', + text: + (err as any)?.message ?? + 'Please try again or check your MetaMask network configuration.', + type: 'error', + }), + ); + }
165-171: Potential chain/config mismatch between client and requested networkuseGenlayer initializes the client with
chain: localnetregardless of VITE_NETWORK. If VITE_NETWORK='studionet', you’ll connect MetaMask to studionet but keep a client configured for localnet (and possibly a local RPC URL). This can cause confusing behavior.Consider making useGenlayer select chain and endpoint from VITE_NETWORK (and corresponding URLs), e.g.:
// In frontend/src/hooks/useGenlayer.ts (illustrative) const NETWORK = (import.meta.env.VITE_NETWORK as 'localnet' | 'studionet') || 'localnet'; const CHAIN = NETWORK === 'studionet' ? studionet : localnet; const ENDPOINT = NETWORK === 'studionet' ? import.meta.env.VITE_JSON_RPC_SERVER_URL_STUDIONET : import.meta.env.VITE_JSON_RPC_SERVER_URL; client.value = createClient({ chain: CHAIN, endpoint: ENDPOINT, account: clientAccount, });Also document the extra endpoint variable(s) in .env.example if you adopt this.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
.env.example(1 hunks)frontend/src/stores/accounts.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/src/stores/accounts.ts (1)
frontend/src/hooks/useGenlayer.ts (1)
useGenlayer(12-41)
🪛 GitHub Actions: pre-commit
frontend/src/stores/accounts.ts
[error] 1-1: Prettier formatting failed for file 'frontend/src/stores/accounts.ts'. Run 'prettier --write' to fix code style issues.
🪛 dotenv-linter (3.3.0)
.env.example
[warning] 105-105: [SpaceCharacter] The line has spaces around equal sign
(SpaceCharacter)
⏰ 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). (3)
- GitHub Check: Load Tests / load-test
- GitHub Check: test
- GitHub Check: backend-unit-tests
|
What
setCurrentAccountto cover the “deleted network” edge case..env.exampleto document network-related configuration.Why
Testing done
Decisions made
setCurrentAccountinstead of relying solely on the UI button, because the button only shows when no MetaMask account was previously connected; connecting on selection covers the edge case after a user removes the network.genlayer-jscannot distinguish them when using a MetaMask account. This will be addressed separately when studionet and localnet have distinct chainIds.Reviewing tips
setCurrentAccountand its inline comment rationale..env.examplealigns with current env usage (e.g., network configuration).User facing release notes
Summary by CodeRabbit
New Features
Bug Fixes
Documentation