WIP: Kh.20240115 tutorials metamask (#25)

config.ts

@@ -88,7 +88,7 @@ const config: Config = {
       label: 'Next steps',
       content: [
         {
-          label: 'Chapter overview: Next steps',
+          label: 'Chapter Overview: Next steps',
           path: '/content/module-3',
         },
         {
@@ -97,6 +97,36 @@ const config: Config = {
         },
       ],
     },
+    {
+      label: 'Guides and How Tos',
+      content: [
+        {
+          label: 'Add Topos and Incal to Metamask',
+          path: '/content/how-to/add-topos-and-incal-to-metamask.html'
+        },
+        {
+          label: 'Use the Faucet to Get Testnet Tokens',
+          path: '/content/how-to/use-the-faucet.html'
+        },
+      ]
+    },
+    {
+      label: 'Topos Reference',
+      content: [
+        {
+          label: 'FAQ',
+          path: '/content/topos-reference/faq.html',
+        },
+        {
+          label: 'Weak Causal Probabilistic Reliable Broadcast',
+          path: '/content/topos-reference/wcprb.html',
+        },
+        {
+          label: 'Glossary',
+          path: '/content/glossary.html',
+        },
+      ],
+    },
     {
       label: 'Network',
       content: [
@@ -122,23 +152,6 @@ const config: Config = {
         },
       ],
     },
-    {
-      label: 'Topos Reference',
-      content: [
-        {
-          label: 'FAQ',
-          path: '/content/topos-reference/faq.html',
-        },
-        {
-          label: 'Weak Causal Probabilistic Reliable Broadcast',
-          path: '/content/topos-reference/wcprb.html',
-        },
-        {
-          label: 'Glossary',
-          path: '/content/glossary.html',
-        },
-      ],
-    },
     {
       label: 'Legal',
       content: [

content/how-to/add-topos-and-incal-to-metamask.md

@@ -0,0 +1,129 @@
+---
+title: Add Topos and Incal to Metamask
+description: Before working with the Topos Testnet, you need to tell your Metamask Wallet about the subnets
+---
+
+# Add Topos and Incal to Metamask
+
+In order to work with the Topos Testnet, you need to tell your wallet about the subnets. We currently recommend [MetaMask](https://metamask.io/download/) as the wallet of choice for the Topos Testnet. If you do not already have it installed, please [download](https://metamask.io/download/) and install it.
+
+This document will walk you through two different approaches for completing this. The most educational approach is to manually add the subnets to your MetaMask wallet. However, if you prefer, you can follow the procedure to [automatically add the subnets to your wallet](#alternative-method-leverage-the-erc20-messaging-app) using the ERC20 Messaging App.
+
+## Add Topos and Incal to MetaMask Manually
+
+Adding the networks to your MetaMask wallet manually is a useful exercise if you are new to MetaMask and web3 development, as it allows you to better understand the data that underlies the process.
+
+### Add Topos to Metamask
+
+<Steps>
+<StepItem>
+Once you have installed MetaMask, you will need to add the Topos subnet to it. To do this, open the MetaMask extension and click on the Networks dropdown.
+
+<ZoomImage small>
+![MetaMask Networks Dropdown](/images/metamask-networks-dropdown.png)
+</ZoomImage>
+
+Then click on the "Add Network" button.
+</StepItem>
+
+<StepItem>
+<ZoomImage small>
+![MetaMask Add Network](/images/metamask-add-network.png)
+</ZoomImage>
+
+Your browser will open an a MetaMask interface to add a new network. From that page, select the "Add a network manually" button.
+</StepItem>
+
+<StepItem>
+<ZoomImage small>
+![MetaMask Add Topos](/images/metamask-add-topos.png)
+</ZoomImage>
+
+Then enter the following information and press the "Save" button:
+
+- *Network Name*: **Topos**
+- *New RPC URL*: **https://rpc.topos-subnet.testnet-1.topos.technology**
+- *Chain ID*: **2359**
+- *Currency Symbol*: **TOPOS**
+- *Block Explorer URL*: **https://explorer.testnet-1.topos.technology**
+
+<ZoomImage small>
+![Topos Added Successfully](/images/metamask-topos-added.png)
+</ZoomImage>
+
+</StepItem>
+</Steps>
+
+### Add Incal to Metamask
+
+To add Incal to Metamask, you will need to repeat the process above, but with the following information:
+
+<ZoomImage small>
+![MetaMask Add Incal](/images/metamask-add-incal.png)
+</ZoomImage>
+
+- *Network Name*: **Incal**
+- *New RPC URL*: **https://rpc.incal.testnet-1.topos.technology**
+- *Chain ID*: **2360**
+- *Currency Symbol*: **INCA**
+- *Block Explorer URL*: **https://explorer.testnet-1.topos.technology**
+
+## Alternative Method -- Leverage the ERC20 Messaging App
+
+As an alternative approach, you can use the [ERC20 Messaging App](https://dapp-frontend-erc20.testnet-1.topos.technology/) to add the Topos and Incal subnets to your MetaMask wallet.
+
+<Steps>
+
+<StepItem>
+To do this, first [navigate to the application](https://dapp-frontend-erc20.testnet-1.topos.technology/). You should see a screen like this:
+
+<ZoomImage small>
+![ERC20 Messaging App](/images/erc20-messaging-connect-wallet.png)
+</ZoomImage>
+</StepItem>
+
+<StepItem>
+Press the `Connect to MetaMask` button. You should see a MetaMask popup like this:
+
+<ZoomImage small>
+![MetaMask Connect](/images/metamask-connect.png)
+</ZoomImage>
+</StepItem>
+
+<StepItem>
+Click `Next` and then `Connect` to the confirmation popup.
+
+<ZoomImage small>
+![MetaMask Connect Confirm](/images/metamask-connect-confirm.png)
+</ZoomImage>
+</StepItem>
+
+<StepItem>
+You should see the ERC20 Messaging app page change to reflect your wallet address in the upper right of the page:
+
+<ZoomImage small>
+![ERC20 Messaging App Connected](/images/erc20-messaging-connected.png)
+</ZoomImage>
+</StepItem>
+
+<StepItem>
+At this point, selecting a subnet from the `Sending subnet` dropdown will automatically trigger adding that subnet to your MetaMask wallet:
+
+<ZoomImage small>
+![ERC20 Messaging App Connected](/images/erc20-metamask-add-topos.png)
+</ZoomImage>
+</StepItem>
+
+<StepItem>
+Scroll down in the popup and click 'Approve'. The network will now be added to your MetaMask wallet. You should do this for both Topos and Incal. Once you have done this for both, opening the MetaMask extension, and clicking on the Networks dropdown should show both subnets:
+
+<ZoomImage small>
+![MetaMask Networks Dropdown](/images/erc20-metamask-networks-populated.png)
+</ZoomImage>
+</StepItem>
+
+</Steps>
+
+# Wrapping Up
+
+At this point, you should have both the Topos and the Incal subnets added to your MetaMask wallet. You will probably need to request tokens from the [Topos Faucet](https://faucet.testnet-1.topos.technology) in order to continue learning and experimenting. You can follow the instructions in our [How to use the Faucet to get Testnet Tokens](/content/how-to/use-the-faucet.html) guide to do this.

content/how-to/use-the-faucet.md

@@ -0,0 +1,40 @@
+---
+title: Use the Faucet to Get Testnet Tokens
+description: In order to interact with the Topos and Incal subnets, tokens are requires in order to pay the minimal gas fees on these testnets. This guide will illustrate how to use the Faucet to get these tokens.
+---
+
+# Use the Faucet to Get Testnet Tokens
+
+In order to interact with the Topos and Incal subnets, tokens are required to pay the minimal gas fees on these testnets. A [faucet](https://faucet.testnet-1.topos.technology/) exists to allow developers to access tokens for development purposes.
+
+## Prerequisites
+
+To use the Faucet, you must have an address to send the tokens to. We recommend using MetaMask as your wallet, and suggest that you first follow the guide on how to [add the Topos and Incal subnets to MetaMask](/how-to/add-topos-and-incal-to-metamask.html).
+
+## Use the Faucet
+
+The faucet is a simple web application that allows you to request tokens for a given address. It is located at [https://faucet.testnet-1.topos.technology/](https://faucet.testnet-1.topos.technology/).
+
+<ZoomImage small>
+![Topos Faucet](/images/topos-faucet.png)
+</ZoomImage>
+
+Enter the address to receive the funds in the `Address` field, and select the subnets to receive funds on.
+
+The faucet limits funding to once per 24 hours, based on the IP address of the requester, so we recommend ensuring that both **Topos** and **Incal** are selected before clicking the `Submit` button. This is less limiting than it may seem, however, as the fees on the testnet are so low that you should have plenty of funds to experiment with from just one request.
+
+If it has been less than 24 hours since the address has requested funds, you will see an error message:
+
+<ZoomImage small>
+![Faucet Error](/images/faucet-too-soon-error.png)
+</ZoomImage>
+
+If the token allocation is successful, the application will report that:
+
+<ZoomImage small>
+![Faucet Success](/images/faucet-success.png)
+</ZoomImage>
+
+# Wrapping Up
+
+With tokens for Topos and Incal in your wallet, you are ready to start interacting with the Topos testnet and learning more about the Topos platform. Remember that if you do need more tokens, you can request additional tokens once every 24 hours.

content/module-2/1-ERC20-Messaging.md

@@ -17,59 +17,40 @@ Please make sure you have installed [MetaMask](https://metamask.io/download/) be
 
 With MetaMask installed, you can navigate to [ERC20 Messaging](https://dapp-frontend-erc20.testnet-1.topos.technology/):
 
-![dApp first page](./images/erc20index.png)
-
 You are now going to complete a cross-subnet, fungible token transfer from the Topos Subnet to the Incal subnet.
 
 <Steps>
 <StepItem>
 
 First, you must connect MetaMask with the **[Topos ERC20 Messaging dApp](https://dapp-frontend-erc20.testnet-1.topos.technology/)**:
 
-<ZoomImage small>
-![dApp connect with MetaMask 1](./images/erc20connect.png)
-</ZoomImage>
-
-<ZoomImage small>
-![dApp connect with MetaMask 2](./images/erc20connect2.png)
-</ZoomImage>
-
-The ERC20 Messaging dApp will display your address in the right top corner after the ERC20 dApp is connected to your wallet:
-
-<ZoomImage small>
-![dApp connect with MetaMask 2](./images/erc20indexconnected.png)
-</ZoomImage>
-
-Each time you pick up a sending subnet it will be automatically added to MetaMask, if it is the first time you attempt to do so.
-
-Add Topos to your networks:
-
-<ZoomImage small>
-![dApp adds network Topos](./images/erc20toposnetwork.png)
-</ZoomImage>
+If you have not already done so, you will have to connect the ERC20 Messaging dApp to MetaMask and add the Topos and Incal subnets to your MetaMask wallet. To do this, follow the steps in our [How to add Topos and Incal to MetaMask](/content/how-to/add-topos-and-incal-to-metamask.html#alternative-method-leverage-the-erc20-messaging-app) guide.
 
-Add Incal too:
+If you had previously following that guide, but you had performed the manual procedure, then you will still need to connect the dApp to MetaMask. If the upper right corner of the ERC20 Messaging dApp page looks like this, with a 'Connect to MetaMask' button:
 
 <ZoomImage small>
-![dApp adds network Incal](./images/erc20incalnetwork.png)
+![dApp first page](./images/erc20index.png)
 </ZoomImage>
 
-If the network is already added to MetaMask, it will just ask for permission to switch the network. For example, for Topos:
+Then click the 'Connect to MetaMask' button and follow the instructions to connect the dApp to MetaMask.
 
 <ZoomImage small>
-![Switch network to Topos](./images/erc20switchnetworktopos.png)
+![dApp connect with MetaMask 1](./images/erc20connect.png)
 </ZoomImage>
 
-Or for Incal:
-
 <ZoomImage small>
-![Switch network to Incal](./images/erc20switchnetworktoposincal.png)
+![dApp connect with MetaMask 2](./images/erc20connect2.png)
 </ZoomImage>
 
+Once the ERC20 Messaging dApp is displaying your address in the right top corner, the ERC20 dApp is connected to your wallet.
 </StepItem>
+
 <StepItem>
+Additionally, you will want to have requested tokens from the [Topos Faucet](https://faucet.testnet-1.topos.technology). If you have not done this yet, please follow the instructions in our [How to use the Faucet to get Testnet Tokens](/content/how-to/use-the-faucet.html) guide to do this.
+</StepItem>
 
-In either case, select the **Incal subnet** in the dApp:
+<StepItem>
+Your wallet is connected to the app, and you have some tokens to play with, so now you are ready to transfer some assets from one subnet to the other. To do this, first select the **Incal Subnet** in the dApp:
 
 <ZoomImage small>
 ![Incal page](./images/sendingincal.png)
@@ -84,26 +65,12 @@ Register a token, here named `testToken`:
 ![Register token](./images/testtokenreg.png)
 </ZoomImage>
 
-<HighlightBox type="warning" title="Faucet">
-
-In order to register tokens on the subnets, you will need to pay fees on both subnets. Use the [Topos Faucet](https://faucet.testnet-1.topos.technology) to get some:
-
-<ZoomImage small>
-![Get some TOPOS and INCAL](./images/faucetindex.png)
-</ZoomImage>
-
-Make sure that the tokens are sent:
-
-![Tokens sent](./images/faucetsuc.png)
-
-Now you can pay the necessary fee for a token registration (e.g. for the Incal subnet):
+In order to register tokens on the subnets, you will need to pay fees on both subnets for the token registration (e.g. for the Incal subnet):
 
 <ZoomImage small>
 ![Pay INCA fee](./images/incafee.png)
 </ZoomImage>
 
-</HighlightBox>
-
 </StepItem>
 <StepItem>
 
@@ -115,7 +82,9 @@ Repeat these steps for the **Topos Subnet**.
 
 With both token setups done, you can try your first cross-subnet token transfer:
 
+<ZoomImage small>
 ![Incal page](./images/incaltopos.png)
+</ZoomImage>
 
 </StepItem>
 <StepItem>

src/components/mdx/MdLink.tsx

@@ -8,7 +8,8 @@ interface LinkProps extends React.HTMLAttributes<HTMLLinkElement> {
 export const MdLink: React.FC<LinkProps> = ({ href, children }) => {
   if (!href) return null;
   const isExternal =
-    (!href.startsWith('/') &&
+    (!href.startsWith('#') &&
+      !href.startsWith('/') &&
       !href.startsWith('./') &&
       !href.startsWith('../') &&
       !new URL(href).origin.startsWith(config.rootUrl)) ||