[TASK] Add network selection component and implement network-based page access in Tangle dApp

[devpavan04]

Overview

Currently, the tangle-dapp connects to the Tangle Testnet by default. However, we should enable users to connect to various networks, including:

• Tangle Mainnet
• Tangle Testnet
• Custom Endpoint

To implement this, consider using the network selection component from the stats-dapp as a reference. This component allows users to input custom endpoints and connect to either the Tangle Mainnet or Testnet.

Additionally, we should implement network-based access restrictions for certain pages on the tangle-dapp, depending on the user's selected network. For example, the Restaking feature should be available on the Testnet but not on the Mainnet for now. This restriction can be enforced by displaying a Not Supported modal.

[monaiuu]

Checklist

• [x] Add Network Switch Component: using the network selection component from the stats-dapp to allow users to input custom endpoints and connect to either the Tangle Mainnet or Testnet.
• [x] Be able to globally switch between networks for all running processes
• [x] Can connect to a custom URL
• [x] Custom URL or selection is saved and preserved after reloads (using local storage)
• [ ] Gate Service Overview & Restake: Remove Service Overview Page & Restake Page from side navigation. Only if user is in development would this be accessible.

[drewstone]

The UI here in the issue should be updated CC @monaiuu

[monaiuu]

Updated Handoff

Update network switching feature, allowing users to seamlessly toggle between mainnet, testnet, and a custom RPC endpoint.

Reference: For an example of a similar implementation, see the network switch component at app.webb.tools.

Figma Link

Custom Endpoint Flow

• Step 1: The user interacts with the network switch component, which displays three options: Mainnet, Testnet, and Development. Upon selecting "Development," a dropdow input field is triggered for the user to input their RPC URL.

• Step 2: The user enters the RPC endpoint URL into the input field and submits it for validation.

• Step 3: Feedback and Error Handling

  • If Valid: Update UI to reflect the switch to Development and proceed to switch the network connection to use the provided custom RPC endpoint.
  • If Invalid or Unresponsive: Provide the user with an error message indicating the failure to connect or validate the RPC endpoint. UI does not update (remain on testnet or mainnet)

[monaiuu]

@yurixander I also updated the above comment to completely hide Service Overview and Restake pages from the side navigation so it is not accessible for public at launch. Only if connected to development would these pages be accessible.

[yurixander]

Gate Service Overview & Restake: Remove Service Overview Page & Restake Page from side navigation. Only if user is in development would this be accessible.

Will be handling this part on a separate issue.