feat: WalletLinkForm support ens domain #121
Conversation
WalkthroughThe changes introduce asynchronous validation and resolution of wallet addresses, allowing users to input either raw blockchain addresses or human-readable ENS/SNS domain names. New utilities for ENS and SNS resolution and validation are added, and relevant code paths are updated to support async workflows and store resolved domain names alongside addresses. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WalletLinkForm
participant DomainUtils
participant ChainUtils
User->>WalletLinkForm: Enter wallet (address or ENS/SNS)
WalletLinkForm->>DomainUtils: Validate format (ENS/SNS)
alt Domain name
WalletLinkForm->>DomainUtils: Resolve ENS/SNS to address
DomainUtils-->>WalletLinkForm: Return resolved address or error
else Raw address
WalletLinkForm->>ChainUtils: Validate address asynchronously
ChainUtils-->>WalletLinkForm: Return validation result
end
WalletLinkForm-->>User: Show validation result or error
Assessment against linked issues
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/profile/edit/hooks/useProfileWallets.tsOops! Something went wrong! :( ESLint: 9.29.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs src/app/profile/edit/components/WalletLinkForm.tsxOops! Something went wrong! :( ESLint: 9.29.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs src/lib/walletLinking/domain.tsOops! Something went wrong! :( ESLint: 9.29.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs
✨ 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 (
|
|
The code looks fine. It would be good to also do it for .sol name as well not just for .eth |
|
Just a quick addition regarding optimization and the vem package — I noticed the package is quite large considering it's only used for ENS fetching. It might be more efficient to simply perform a GET request to a public gateway like this: REQ RES |
|
I like the redundancy / risk mitigation measure of including the raw address also |
|
I've updated a commit for supporting SNS. Regarding viem package's impact on build size. Here is a screenshot of two builds, the left one without viem, the right one with viem. The page to inspect is /profile/edit. Currently, the changes for ENS support without viem are not yet committed, as I would like advice.
|
|
Linking the docs here for reference / research: https://docs.ens.domains/web/resolution |
Looks like viem is more robust for resolution atm even if it costs the build size. Sol code looks good too. |
|
Want to take a step back first and properly architect how we store and fetch walletAddresses to be chain agnostic and cleanly handle multichain (esp relevant for ETH L2s). See comment here on storing ensName / snsName in the user table and adding a separate walletAddresses table using CAIP-2 / CAIP-10 With ENS names, there's a lot more to it than just linking it to a single address, since a name can now store profile info and also addresses for different chains etc. Therefore I think ens/sns names should be stored at the user level and not alongside wallet addresses. That way we can derive many addresses (and other info) for a certain user from their ENS. |
|
True, global storage better for multiple usecases like this checkmark but if you have planned an upcoming airdrop it can be good to have a very primitive version first to onboard more people for this batch. |
|
Thank you for the feedback! For ENS/SNS names, the current relevant user flow is that: The above flow only uses them for resolving wallet addresses that would be linked client-side. |
Ah ok, I see what you're saying now, its needed to resolve names on client side to validate them before saving them to github. In that case, as long as we make sure that code splitting / dynamic module loading is setup properly so that it only loads viem once the user is logged in and on the update address page, then it shouldn't have negative impact on majority of users. |
|
A commit is made to dynamically import domain name resolution dependencies for ENS (viem) and SNS (@solana/web3.js, @bonfida/spl-name-service) The following are the build output before and after the commit (particularly for the page /profile/edit) Before: After: |
Dangoz
force-pushed
the
link-wallet-from-ens
branch
from
1b815dc to
5fbe057
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/lib/walletLinking/domain.ts (2)
14-30: Remove unnecessary continue statementThe continue is redundant as it's the last statement in the loop.
} catch (error) { console.warn(`Failed to connect to RPC endpoint ${endpoint}:`, error); - continue; // Try next endpoint }
87-101: Consider supporting broader character sets for ENSENS supports Unicode and underscores, but current regex is ASCII-only.
Would you like me to provide a more comprehensive ENS validation regex that supports Unicode characters?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (8)
package.json(2 hunks)src/app/profile/edit/components/WalletLinkForm.tsx(5 hunks)src/app/profile/edit/hooks/useProfileWallets.ts(1 hunks)src/lib/pipelines/ingest/fetchWalletAddresses.ts(1 hunks)src/lib/walletLinking/chainUtils.ts(3 hunks)src/lib/walletLinking/domain.ts(1 hunks)src/lib/walletLinking/fetchWalletDataFromGithub.ts(1 hunks)src/lib/walletLinking/readmeUtils.ts(4 hunks)
🧰 Additional context used
🧠 Learnings (1)
package.json (1)
Learnt from: CR
PR: elizaOS/elizaos.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-24T18:24:14.074Z
Learning: Import order in TypeScript/React files should be: React, external libraries, local components (using @/components), then utility functions, to improve readability and maintainability.
🧬 Code Graph Analysis (5)
src/lib/walletLinking/fetchWalletDataFromGithub.ts (1)
src/lib/walletLinking/readmeUtils.ts (1)
parseWalletLinkingDataFromReadme(32-83)
src/lib/pipelines/ingest/fetchWalletAddresses.ts (1)
src/lib/walletLinking/chainUtils.ts (1)
validateAddress(116-126)
src/app/profile/edit/hooks/useProfileWallets.ts (1)
src/lib/walletLinking/readmeUtils.ts (1)
parseWalletLinkingDataFromReadme(32-83)
src/app/profile/edit/components/WalletLinkForm.tsx (2)
src/lib/walletLinking/chainUtils.ts (1)
validateAddress(116-126)src/lib/walletLinking/domain.ts (4)
validateEnsFormat(91-93)validateSnsFormat(99-101)resolveEnsDomain(67-85)resolveSnsDomain(38-59)
src/lib/walletLinking/readmeUtils.ts (1)
src/lib/walletLinking/chainUtils.ts (2)
SUPPORTED_CHAINS_NAMES(73-73)validateAddress(116-126)
🪛 Biome (1.9.4)
src/lib/walletLinking/domain.ts
[error] 25-25: Unnecessary continue statement
Unsafe fix: Delete the unnecessary continue statement
(lint/correctness/noUnnecessaryContinue)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Build
🔇 Additional comments (12)
package.json (1)
25-25: Verify package versions for security and compatibility.The new dependencies support SNS domain resolution and Solana validation as intended. Ensure these versions are current and free from known vulnerabilities.
#!/bin/bash # Check for latest versions and security advisories for new dependencies echo "Checking @bonfida/spl-name-service..." npm view @bonfida/spl-name-service version npm audit --audit-level moderate --package-lock-only 2>/dev/null | grep -A5 -B5 "@bonfida/spl-name-service" || echo "No issues found" echo "Checking @solana/web3.js..." npm view @solana/web3.js version npm audit --audit-level moderate --package-lock-only 2>/dev/null | grep -A5 -B5 "@solana/web3.js" || echo "No issues found"Also applies to: 43-43
src/lib/walletLinking/fetchWalletDataFromGithub.ts (1)
40-42: Correct async update.The await addition properly handles the now-async
parseWalletLinkingDataFromReadmefunction. This ensures asynchronous wallet validation completes before processing results.src/lib/pipelines/ingest/fetchWalletAddresses.ts (1)
114-114: Correct async validation update.The await addition properly handles the now-async
validateAddressfunction, ensuring dynamic validation libraries are loaded and validation completes before proceeding.src/app/profile/edit/hooks/useProfileWallets.ts (1)
63-64: Correct async parsing update.The await addition properly handles the now-async
parseWalletLinkingDataFromReadmefunction. The multi-line formatting enhances readability.src/lib/walletLinking/readmeUtils.ts (4)
10-11: ENS/SNS domain name support added.The optional
ensNameandsnsNamefields properly extend the schema to support domain names while maintaining backward compatibility.
32-34: Function signature updated for async validation.The async conversion enables asynchronous wallet address validation, which is required for dynamic imports of validation libraries.
59-71: Async wallet validation implementation.The replacement of synchronous
filterwith an asyncforloop correctly handles asynchronous address validation. Each wallet is properly validated before inclusion.
153-154: Domain names included in wallet generation.The conditional inclusion of trimmed
ensNameandsnsNamefields ensures domain names are preserved in the generated wallet data when present.src/app/profile/edit/components/WalletLinkForm.tsx (1)
114-150: LGTM!Clean domain resolution implementation with proper error handling.
src/lib/walletLinking/domain.ts (1)
38-85: Well-implemented domain resolution with dynamic importsGood use of dynamic imports for bundle optimization and proper error handling.
src/lib/walletLinking/chainUtils.ts (2)
27-40: Good async validator implementation with cachingEfficient use of dynamic imports and module-level caching.
45-64: Solid async Solana validation with proper error handlingWell-structured with dynamic imports and caching.
| useEffect(() => { | ||
| if (ethAddress === "") { | ||
| setIsEthValid(true); | ||
| setEthAddressError(""); | ||
| } else { | ||
| const isValid = isAddress(ethAddress); | ||
| setIsEthValid(isValid); | ||
| setEthAddressError(isValid ? "" : "Invalid Ethereum address."); | ||
| return; | ||
| } | ||
|
|
||
| const validateEthAddress = async () => { | ||
| const isEVMValid = await validateAddress(ethAddress, "ethereum"); | ||
| const isENSValid = validateEnsFormat(ethAddress); | ||
| setIsEthValid(isEVMValid || isENSValid); | ||
| setEthAddressError( | ||
| isEVMValid || isENSValid ? "" : "Invalid Ethereum address or ENS name.", | ||
| ); | ||
| }; | ||
|
|
||
| validateEthAddress(); | ||
| }, [ethAddress]); |
There was a problem hiding this comment.
Add cleanup to prevent setState on unmounted component
Same issue as above - async validation needs cleanup.
useEffect(() => {
+ let mounted = true;
if (ethAddress === "") {
setIsEthValid(true);
setEthAddressError("");
return;
}
const validateEthAddress = async () => {
const isEVMValid = await validateAddress(ethAddress, "ethereum");
const isENSValid = validateEnsFormat(ethAddress);
+ if (!mounted) return;
setIsEthValid(isEVMValid || isENSValid);
setEthAddressError(
isEVMValid || isENSValid ? "" : "Invalid Ethereum address or ENS name.",
);
};
validateEthAddress();
+ return () => { mounted = false; };
}, [ethAddress]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (ethAddress === "") { | |
| setIsEthValid(true); | |
| setEthAddressError(""); | |
| } else { | |
| const isValid = isAddress(ethAddress); | |
| setIsEthValid(isValid); | |
| setEthAddressError(isValid ? "" : "Invalid Ethereum address."); | |
| return; | |
| } | |
| const validateEthAddress = async () => { | |
| const isEVMValid = await validateAddress(ethAddress, "ethereum"); | |
| const isENSValid = validateEnsFormat(ethAddress); | |
| setIsEthValid(isEVMValid || isENSValid); | |
| setEthAddressError( | |
| isEVMValid || isENSValid ? "" : "Invalid Ethereum address or ENS name.", | |
| ); | |
| }; | |
| validateEthAddress(); | |
| }, [ethAddress]); | |
| useEffect(() => { | |
| let mounted = true; | |
| if (ethAddress === "") { | |
| setIsEthValid(true); | |
| setEthAddressError(""); | |
| return; | |
| } | |
| const validateEthAddress = async () => { | |
| const isEVMValid = await validateAddress(ethAddress, "ethereum"); | |
| const isENSValid = validateEnsFormat(ethAddress); | |
| if (!mounted) return; | |
| setIsEthValid(isEVMValid || isENSValid); | |
| setEthAddressError( | |
| isEVMValid || isENSValid ? "" : "Invalid Ethereum address or ENS name.", | |
| ); | |
| }; | |
| validateEthAddress(); | |
| return () => { | |
| mounted = false; | |
| }; | |
| }, [ethAddress]); |
🤖 Prompt for AI Agents
In src/app/profile/edit/components/WalletLinkForm.tsx around lines 67 to 84, the
async validation function inside useEffect can call setState after the component
has unmounted, causing a memory leak or warning. Fix this by adding a cleanup
mechanism: create a flag (e.g., isMounted) set to true at the start of
useEffect, set it to false in the cleanup function, and only call setIsEthValid
and setEthAddressError if isMounted is still true.
| useEffect(() => { | ||
| if (solAddress === "") { | ||
| setIsSolValid(true); | ||
| setSolAddressError(""); | ||
| } else { | ||
| const isValid = SOL_ADDRESS_REGEX.test(solAddress); | ||
| setIsSolValid(isValid); | ||
| setSolAddressError(isValid ? "" : "Invalid Solana address format."); | ||
| return; | ||
| } | ||
|
|
||
| const validateSolAddress = async () => { | ||
| const isSOLValid = await validateAddress(solAddress, "solana"); | ||
| const isSNSValid = validateSnsFormat(solAddress); | ||
| setIsSolValid(isSNSValid || isSOLValid); | ||
| setSolAddressError( | ||
| isSNSValid || isSOLValid ? "" : "Invalid Solana address or SNS name.", | ||
| ); | ||
| }; | ||
|
|
||
| validateSolAddress(); | ||
| }, [solAddress]); |
There was a problem hiding this comment.
Add cleanup to prevent setState on unmounted component
Consistent with other validation hooks - needs cleanup.
useEffect(() => {
+ let mounted = true;
if (solAddress === "") {
setIsSolValid(true);
setSolAddressError("");
return;
}
const validateSolAddress = async () => {
const isSOLValid = await validateAddress(solAddress, "solana");
const isSNSValid = validateSnsFormat(solAddress);
+ if (!mounted) return;
setIsSolValid(isSNSValid || isSOLValid);
setSolAddressError(
isSNSValid || isSOLValid ? "" : "Invalid Solana address or SNS name.",
);
};
validateSolAddress();
+ return () => { mounted = false; };
}, [solAddress]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (solAddress === "") { | |
| setIsSolValid(true); | |
| setSolAddressError(""); | |
| } else { | |
| const isValid = SOL_ADDRESS_REGEX.test(solAddress); | |
| setIsSolValid(isValid); | |
| setSolAddressError(isValid ? "" : "Invalid Solana address format."); | |
| return; | |
| } | |
| const validateSolAddress = async () => { | |
| const isSOLValid = await validateAddress(solAddress, "solana"); | |
| const isSNSValid = validateSnsFormat(solAddress); | |
| setIsSolValid(isSNSValid || isSOLValid); | |
| setSolAddressError( | |
| isSNSValid || isSOLValid ? "" : "Invalid Solana address or SNS name.", | |
| ); | |
| }; | |
| validateSolAddress(); | |
| }, [solAddress]); | |
| useEffect(() => { | |
| let mounted = true; | |
| if (solAddress === "") { | |
| setIsSolValid(true); | |
| setSolAddressError(""); | |
| return; | |
| } | |
| const validateSolAddress = async () => { | |
| const isSOLValid = await validateAddress(solAddress, "solana"); | |
| const isSNSValid = validateSnsFormat(solAddress); | |
| if (!mounted) return; | |
| setIsSolValid(isSNSValid || isSOLValid); | |
| setSolAddressError( | |
| isSNSValid || isSOLValid ? "" : "Invalid Solana address or SNS name.", | |
| ); | |
| }; | |
| validateSolAddress(); | |
| return () => { mounted = false; }; | |
| }, [solAddress]); |
🤖 Prompt for AI Agents
In src/app/profile/edit/components/WalletLinkForm.tsx around lines 86 to 103,
the useEffect hook that validates the solAddress needs a cleanup function to
prevent calling setState on an unmounted component. Add a flag variable inside
the effect to track if the component is still mounted, set it to false in the
cleanup function, and check this flag before calling setIsSolValid and
setSolAddressError to avoid state updates after unmount.
| // Validate initial addresses asynchronously | ||
| const validateInitialAddresses = async () => { | ||
| if (ethWallet?.address) { | ||
| const isValid = await validateAddress(ethWallet.address, "ethereum"); | ||
| setIsEthValid(isValid); | ||
| if (!isValid) { | ||
| setEthAddressError("Invalid Ethereum address"); | ||
| } | ||
| } | ||
|
|
||
| if (solWallet?.address) { | ||
| const isValid = await validateAddress(solWallet.address, "solana"); | ||
| setIsSolValid(isValid); | ||
| if (!isValid) { | ||
| setSolAddressError("Invalid Solana address"); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| validateInitialAddresses(); | ||
| }, [wallets]); |
There was a problem hiding this comment.
Add cleanup to prevent setState on unmounted component
The async validation could complete after component unmount, causing memory leaks.
useEffect(() => {
+ let mounted = true;
const validateInitialAddresses = async () => {
if (ethWallet?.address) {
const isValid = await validateAddress(ethWallet.address, "ethereum");
+ if (!mounted) return;
setIsEthValid(isValid);
if (!isValid) {
setEthAddressError("Invalid Ethereum address");
}
}
if (solWallet?.address) {
const isValid = await validateAddress(solWallet.address, "solana");
+ if (!mounted) return;
setIsSolValid(isValid);
if (!isValid) {
setSolAddressError("Invalid Solana address");
}
}
};
validateInitialAddresses();
+ return () => { mounted = false; };
}, [wallets]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Validate initial addresses asynchronously | |
| const validateInitialAddresses = async () => { | |
| if (ethWallet?.address) { | |
| const isValid = await validateAddress(ethWallet.address, "ethereum"); | |
| setIsEthValid(isValid); | |
| if (!isValid) { | |
| setEthAddressError("Invalid Ethereum address"); | |
| } | |
| } | |
| if (solWallet?.address) { | |
| const isValid = await validateAddress(solWallet.address, "solana"); | |
| setIsSolValid(isValid); | |
| if (!isValid) { | |
| setSolAddressError("Invalid Solana address"); | |
| } | |
| } | |
| }; | |
| validateInitialAddresses(); | |
| }, [wallets]); | |
| useEffect(() => { | |
| let mounted = true; | |
| // Validate initial addresses asynchronously | |
| const validateInitialAddresses = async () => { | |
| if (ethWallet?.address) { | |
| const isValid = await validateAddress(ethWallet.address, "ethereum"); | |
| if (!mounted) return; | |
| setIsEthValid(isValid); | |
| if (!isValid) { | |
| setEthAddressError("Invalid Ethereum address"); | |
| } | |
| } | |
| if (solWallet?.address) { | |
| const isValid = await validateAddress(solWallet.address, "solana"); | |
| if (!mounted) return; | |
| setIsSolValid(isValid); | |
| if (!isValid) { | |
| setSolAddressError("Invalid Solana address"); | |
| } | |
| } | |
| }; | |
| validateInitialAddresses(); | |
| return () => { mounted = false; }; | |
| }, [wallets]); |
🤖 Prompt for AI Agents
In src/app/profile/edit/components/WalletLinkForm.tsx around lines 45 to 65, the
async function validateInitialAddresses may call setState after the component
has unmounted, causing memory leaks. To fix this, introduce a mounted flag that
is set to true at the start of the effect and false in a cleanup function.
Before calling any setState functions inside validateInitialAddresses, check if
the component is still mounted. This prevents state updates on unmounted
components.
| // Array of solana RPC endpoints to try in order | ||
| const RPC_ENDPOINTS = [ | ||
| "https://api.mainnet-beta.solana.com", // Public Solana RPC | ||
| "https://solana-mainnet.g.alchemy.com/v2/lqe31XHZcBd-8FsgmYnHJ", // Alchemy endpoint, domain restricted to https://elizaos.github.io | ||
| process.env.NEXT_PUBLIC_SOLANA_RPC_URL || "", // Local/custom endpoint from environment | ||
| ]; |
There was a problem hiding this comment.
Remove hardcoded API key from source code
Exposing API keys in public repositories is a security risk, even with domain restrictions.
const RPC_ENDPOINTS = [
"https://api.mainnet-beta.solana.com", // Public Solana RPC
- "https://solana-mainnet.g.alchemy.com/v2/lqe31XHZcBd-8FsgmYnHJ", // Alchemy endpoint, domain restricted to https://elizaos.github.io
+ process.env.NEXT_PUBLIC_ALCHEMY_SOLANA_URL || "", // Alchemy endpoint from environment
process.env.NEXT_PUBLIC_SOLANA_RPC_URL || "", // Local/custom endpoint from environment
];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Array of solana RPC endpoints to try in order | |
| const RPC_ENDPOINTS = [ | |
| "https://api.mainnet-beta.solana.com", // Public Solana RPC | |
| "https://solana-mainnet.g.alchemy.com/v2/lqe31XHZcBd-8FsgmYnHJ", // Alchemy endpoint, domain restricted to https://elizaos.github.io | |
| process.env.NEXT_PUBLIC_SOLANA_RPC_URL || "", // Local/custom endpoint from environment | |
| ]; | |
| // Array of solana RPC endpoints to try in order | |
| const RPC_ENDPOINTS = [ | |
| "https://api.mainnet-beta.solana.com", // Public Solana RPC | |
| process.env.NEXT_PUBLIC_ALCHEMY_SOLANA_URL || "", // Alchemy endpoint from environment | |
| process.env.NEXT_PUBLIC_SOLANA_RPC_URL || "", // Local/custom endpoint from environment | |
| ]; |
🤖 Prompt for AI Agents
In src/lib/walletLinking/domain.ts lines 1 to 6, the Alchemy API key is
hardcoded in the RPC_ENDPOINTS array, which exposes sensitive information.
Remove the hardcoded API key string and instead load it securely from an
environment variable. Update the code to reference process.env for the Alchemy
endpoint URL, ensuring the key is not directly visible in the source code.
| const isENSValid = validateEnsFormat(ethAddress); | ||
| const address = isENSValid | ||
| ? await resolveEnsDomain(ethAddress) | ||
| : ethAddress; | ||
|
|
||
| // If the address is not found, set the error and return | ||
| if (!address) { | ||
| setEthAddressError("Invalid Ethereum address or ENS name."); | ||
| return; | ||
| } | ||
|
|
||
| updatedWallets.push({ | ||
| chain: "ethereum", | ||
| address: ethAddress, | ||
| address, | ||
| ...(isENSValid && { ensName: ethAddress }), | ||
| }); | ||
| } | ||
|
|
||
| if (solAddress) { | ||
| const isSNSValid = validateSnsFormat(solAddress); | ||
| const address = isSNSValid | ||
| ? await resolveSnsDomain(solAddress) | ||
| : solAddress; | ||
|
|
||
| // If the address is not found, set the error and return | ||
| if (!address) { | ||
| setSolAddressError("Invalid Solana address or SNS name."); | ||
| return; | ||
| } | ||
|
|
||
| updatedWallets.push({ | ||
| chain: "solana", | ||
| address: solAddress, | ||
| address, | ||
| ...(isSNSValid && { snsName: solAddress }), |
There was a problem hiding this comment.
Let's move this logic into a custom hook. Components shouldn't have too much business logic inside them since its harder to test and maintain.
Also, a lot of this code could be simplified using Shadcn Form Component. Raw useState and useEffect like this has tricky edge cases and is often bug-prone. Especially if we add more fields / chains to this, it will become unweildy quickly.
| // Module-level caches for imported validators to optimize repeated calls | ||
| let viemValidator: ((address: string) => boolean) | null = null; | ||
| let solanaValidator: ((address: string) => boolean) | null = null; |
There was a problem hiding this comment.
Why do we need this? AFAIK the dynamic imports are cached automatically by the es module system. Was there some sort of measurable performance issue this resolved?
| validator: async (address: string) => { | ||
| // Use cached validator if available, otherwise import and cache | ||
| if (!viemValidator) { | ||
| const { isAddress } = await import("viem"); | ||
| viemValidator = isAddress; | ||
| } | ||
|
|
||
| try { | ||
| return viemValidator(address); | ||
| } catch (error) { | ||
| console.error(`Failed to validate Ethereum address ${address}:`, error); | ||
| return false; | ||
| } | ||
| }, |
There was a problem hiding this comment.
Dynamically importing viem in this function like this causes us to have to use await on every single validateAddress call, even when we dont need to worry about bundle size (like in pipelines).
Instead of dynamically importing these libraries, you can just dynamically import the chainUtils.ts or domain.ts files inside the frontend components. Or, you could even just dynamically load the whole WalletLinkForm component using Next/dynamic or React.lazy.
Would simplify a lot of the code in this PR that is doing dynamic loads in many functions. Put all the functions that depend on libraries you want to dynamically load into their own file(s), then just dynamically import that file wherever needed (or normal import and use as is in pipelines code)
| @@ -79,7 +113,10 @@ export function createAccountId(chainId: string, address: string): string { | |||
| * @param chain The blockchain name (e.g., "ethereum", "solana") | |||
| * @returns True if the address is valid for the chain, false otherwise | |||
| */ | |||
| export function validateAddress(address: string, chain: string): boolean { | |||
| export async function validateAddress( | |||
There was a problem hiding this comment.
should revert this back to being sync, see previous comment on dynamic loading
| // ENS name regex (name.eth format) | ||
| // Matches names that end with .eth and contain valid characters | ||
| const ENS_NAME_REGEX = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.eth$/; | ||
|
|
||
| export function validateEnsFormat(name: string): boolean { | ||
| return ENS_NAME_REGEX.test(name); | ||
| } | ||
|
|
||
| // SNS name regex (name.sol format) | ||
| // Matches names that end with .sol and contain valid characters | ||
| const SNS_NAME_REGEX = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.sol$/; | ||
|
|
||
| export function validateSnsFormat(name: string): boolean { | ||
| return SNS_NAME_REGEX.test(name); | ||
| } |
There was a problem hiding this comment.
e.g. things like this dont necesarily need to be dynamically loaded, so could be moved to a separate file if you think they would be used independently of the other functions in this file. Then you can dynamically load this file and just import from viem etc as usual at the top of the file.
| @@ -37,7 +37,9 @@ export async function batchFetchWalletDataFromGithub( | |||
| const result = fileContents[i]; | |||
|
|
|||
| if (result.content) { | |||
| const walletData = parseWalletLinkingDataFromReadme(result.content); | |||
| const walletData = await parseWalletLinkingDataFromReadme( | |||
There was a problem hiding this comment.
similarly this doesn't need to be async, since this code only runs in pipelines and not on clientside and therefore doesn't benefit from dynamic loading
Integrate Ethereum Name Service to WalletLinkForm.
On /profile/edit page, Instead of inputting user's full wallet address, user will also be able to reference one's wallet address by providing an ENS domain.
Considering the risk that an ENS domain gets expired or transferred and the user neglects to adjust one's README.md hidden comment, ENS is only used for initially getting the corresponding wallet address on WalletLinkForm, anything beyond resolves to the raw address.
If this flow makes sense, the same can perhaps be done for SNS (Solana Name Service)
Resolve #120
Summary by CodeRabbit
New Features
Bug Fixes
Chores