SHARD-2146: refactor onboarding so components can be excluded based on chain

[urnotsam]

PR Type

enhancement

---

Description

• Refactor onboarding steps into separate components.

• Introduce dynamic onboarding step configuration.

• Add chain-based exclusion for onboarding steps.

• Simplify onboarding UI with component mapping.

---

Changes walkthrough 📝

Relevant files

Enhancement

ClaimTokensStep.tsx Add ClaimTokensStep component for token claiming                  components/onboarding/ClaimTokensStep.tsx Implement ClaimTokensStep component for token claiming. Manage token claim phases and UI states. Use local storage to track claimed tokens. +116/-0  StakeStep.tsx Add StakeStep component for SHM staking                                    components/onboarding/StakeStep.tsx Implement StakeStep component for staking SHM. Manage staking process and UI states. Calculate minimum stake requirement dynamically. +138/-0  StartNodeStep.tsx Add StartNodeStep component for node initiation                    components/onboarding/StartNodeStep.tsx Implement StartNodeStep component for node initiation. Manage node start process and UI states. Check node status to determine start state. +77/-0    WalletConnectStep.tsx Add WalletConnectStep component for wallet connection        components/onboarding/WalletConnectStep.tsx Implement WalletConnectStep component for wallet connection. Manage wallet connection and network switching. Display connection status and handle disconnection. +88/-0    index.tsx Refactor onboarding page to use modular components              pages/onboarding/index.tsx Refactor onboarding to use new step components. Introduce dynamic step filtering based on chain ID. Remove inline step logic and replace with component mapping. +77/-376

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🏅 Score: 85

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Local Storage Usage The code uses local storage to store the address of the user who has claimed tokens. Ensure that this approach is secure and does not expose sensitive information. const claimantAddress = localStorage.getItem('tokensClaimedBy') setTokenClaimPhase(claimantAddress === address ? 2 : 0) Minimum Stake Requirement Calculation The calculation for the minimum stake requirement uses parseFloat which might lead to precision issues with large numbers. Consider using a library for handling large numbers if necessary. const minimumStakeRequirement = useMemo(() => { return Math.max(parseFloat(nodeStatus?.stakeRequirement || '10') - parseFloat(nodeStatus?.lockedStake || '0'), 0) }, [nodeStatus?.stakeRequirement, nodeStatus?.lockedStake])

[github-actions]

Suggestion: Ensure that the setTokenClaimPhase(2) is only called after the window has successfully opened the URL to prevent premature state changes if the window fails to open. [possible issue, importance: 7]

Suggested change

	onClick={() => {
	if (window) {
	window.open(FAUCET_CLAIM_DOCS_URL, '_blank')
	}
	setTokenClaimPhase(2)
	onClick={() => {
	if (window) {
	const newWindow = window.open(FAUCET_CLAIM_DOCS_URL, '_blank');
	if (newWindow) {
	setTokenClaimPhase(2);
	}
	}
	}}

[github-actions]

Suggestion: Add error handling for the sendTransaction function to manage potential transaction failures and provide user feedback. [possible issue, importance: 8]

Suggested change

	onClick={async () => {
	await sendTransaction()
	}}
	onClick={async () => {
	try {
	await sendTransaction();
	} catch (error) {
	console.error("Transaction failed", error);
	// Add user feedback mechanism here
	}
	}}

[github-actions]

Suggestion: Implement error handling for the startNode function to handle potential errors and avoid setting isNodeStarted to true if the node fails to start. [possible issue, importance: 8]

Suggested change

	onClick={async () => {
	await startNode()
	setIsNodeStarted(true)
	}}
	onClick={async () => {
	try {
	await startNode();
	setIsNodeStarted(true);
	} catch (error) {
	console.error("Failed to start node", error);
	// Add user feedback mechanism here
	}
	}}

[github-actions]

Suggestion: Check if switchNetwork is defined before calling it to prevent runtime errors in environments where it might be undefined. [possible issue, importance: 7]

Suggested change

	onClick={() => switchNetwork?.(CHAIN_ID)}
	onClick={() => {
	if (switchNetwork) {
	switchNetwork(CHAIN_ID);
	}
	}}