"Add Custom Network" button for ShimmerEVM

[huhn511]

Describe the solution you'd like
Add a "Add Custom Network" button or link to add the ShimmerEVM with a single click to MetaMask.

This can be added for example as link in the footer or as a button to all tutorials, which uses the ShimmerEVM.

Example Code:

Here is a code snippet for a button that, when clicked, adds a custom network to MetaMask:
View:

  <button onclick="addNetwork()">Add Custom Network to MetaMask</button>

Controller:

async function addNetwork() {
      if (typeof window.ethereum !== 'undefined') {
        try {
          await window.ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [
              {
                chainId: '0x89', // Replace with the chain ID of the network you want to add
                chainName: 'Custom Network', // Replace with the name of the network
                nativeCurrency: {
                  name: 'Custom Token', // Replace with the name of the native currency
                  symbol: 'CTK', // Replace with the symbol of the native currency
                  decimals: 18, // Replace with the number of decimals of the native currency
                },
                rpcUrls: ['https://custom-rpc-url'], // Replace with the RPC URL(s) of the network
                blockExplorerUrls: ['https://custom-blockexplorer-url'], // Replace with the block explorer URL(s) of the network (optional)
              },
            ],
          });
        } catch (error) {
          console.error(error);
          alert('Error adding network: ' + error.message);
        }
      } else {
        alert('MetaMask is not installed. Please install MetaMask and try again.');
      }
    }

Replace the placeholder values in the params object with the details of the network you want to add to MetaMask. When a user clicks the "Add Custom Network to MetaMask" button, this code snippet will attempt to add the specified network to the user's MetaMask extension. If MetaMask is not installed, it will display an alert prompting the user to install MetaMask.

[Dr-Electron]

Possible duplicate of #882 or at least related to it

[annie101101046]

Status: work in the wiki content but the workflow broke

[Dr-Electron]

For this to work we need to add it to https://github.com/iota-wiki/shared-components so everyone (wiki and external repos) can use it.
But maybe we should also discuss to add shared components to the wiki. I like the monorepo wiki we have now 🤔 . And maybe at some point we want to "deliver" those components together with the wiki (because we only need the components temporarily in the external repos anyway) and maybe that would be easier if everything is part of the same wiki.
On the other hand we might produce some nice components over time that might be nice to share with the react/Docusaurus community.

So maybe for the time being just add it to the shared-components repo.

Just a silent ping to @jlvandenhout and @lucas-tortora to share my thoughts with you. But nothing we need to discuss or decide now

[annie101101046]

If we expect this decision to take some time, it would be best to label this backlog item as "blocked" until we have added the shared-components repository. @huhn511 as this is your backlog item, could you please take ownership and track the progress and status of this issue?

[Dr-Electron]

This isn't blocked anymore. 6e09f37 solved this.
Can you try adding your component again @huhn511 ?

[jlvandenhout]

Fixed in 18f4dc2.