Merge pull request #1657 from oasisprotocol/matevz/feature/more-add-metamask-buttons

manage-tokens: Show "Add to MetaMask" button directly in the section

Author: matevz

docs/general/manage-tokens/README.mdx

@@ -2,6 +2,8 @@
 description: Transfer, deposit, withdraw and delegate your ROSE
 ---
 
+import {AddSapphireToMetaMask as S, AddSapphireTestnetToMetaMask as ST} from '@site/src/AddToMetaMask';
+
 # Manage your Tokens
 
 The **native token** on Oasis Mainnet is called **ROSE**. Native tokens are used
@@ -181,18 +183,24 @@ as a laptop or a mobile phone, and **you are responsible to keep it safe**:
 
 ### MetaMask
 
-[MetaMask] is probably the best-known crypto wallet. However, it is an
-**EVM-compatible** wallet. This means **you can only use it to check the account
-balances and sign transactions on Sapphire and Emerald chains**. You cannot use
-it, for example, to sign **consensus layer transactions** or perform
-**deposits** and **withdrawals** to and from ParaTimes.
+[MetaMask] is probably the best-known crypto wallet. Use the buttons below
+to add Oasis-managed endpoints for the **Sapphire chain** to your Metamask:
 
-You can add the Sapphire RPC endpoint by clicking on the "Add to MetaMask"
-button next to your preferred Mainnet endpoint provider in the [Sapphire]
-chapter.
+| Mainnet | Testnet |
+|---------|---------|
+| <S rpcs={['https://sapphire.oasis.io','wss://sapphire.oasis.io/ws']} hideRpcs={true} /> | <ST rpcs={['https://testnet.sapphire.oasis.io','wss://testnet.sapphire.oasis.io/ws']} hideRpcs={true} /> |
 
 ![Metamask - Adding Sapphire Mainnet Network Configuration](../images/wallet/metamask/settings.png)
 
+To learn more about Sapphire and explore other RPC endpoints check out the
+[Sapphire] chapter.
+
+Keep in mind that Metamask is an EVM-compatible wallet. This means **you
+can only use it to check the account balances and sign transactions on
+Sapphire and Emerald chains**. You cannot use it, for example, to sign
+**consensus layer transactions** or perform **deposits** and **withdrawals**
+to and from ParaTimes.
+
 [MetaMask]: https://metamask.io/download/
 [Sapphire]: ../../build/sapphire/network.mdx#rpc-endpoints
 

src/AddToMetaMask.tsx

@@ -5,15 +5,16 @@ const AddToMetaMask = (props: {
   chainId: string,
   token: string,
   rpcs: string[],
+  hideRpcs: boolean,
   be: string[],
 }) => {
   return (
     <span>
-      {props.rpcs.map(item => (
+      {!props.hideRpcs && props.rpcs.map(item => (
         <code key={item}>{item}<br/></code>
       ))}
       <button
-        className="button button--primary margin-top--md"
+        className={"button button--primary"+(props.hideRpcs ? "" : " margin-top--md")}
         onClick={() => {
           if (!window.ethereum?.request) {
             return alert('Have you installed MetaMask yet? If not, please do so.\n\nComputer: Once it is installed, you will be able to add the ParaTime to your MetaMask.\n\nPhone: Open the website through your MetaMask Browser to add the ParaTime.')
@@ -49,48 +50,56 @@ const AddToMetaMask = (props: {
 
 export const AddSapphireToMetaMask = (props: {
   rpcs: string[],
+  hideRpcs: boolean,
 }) => {
   return AddToMetaMask({
     name: 'Oasis Sapphire',
     chainId: '0x5afe',
     token: 'ROSE',
     rpcs: props.rpcs,
+    hideRpcs: props.hideRpcs,
     be: ['https://explorer.oasis.io/mainnet/sapphire'],
   });
 };
 
 export const AddSapphireTestnetToMetaMask = (props: {
   rpcs: string[],
+  hideRpcs: boolean,
 }) => {
   return AddToMetaMask({
     name: 'Oasis Sapphire Testnet',
     chainId: '0x5aff',
     token: 'TEST',
     rpcs: props.rpcs,
+    hideRpcs: props.hideRpcs,
     be: ['https://explorer.oasis.io/testnet/sapphire'],
   });
 };
 
 export const AddEmeraldToMetaMask = (props: {
   rpcs: string[],
+  hideRpcs: boolean,
 }) => {
   return AddToMetaMask({
     name: 'Oasis Emerald',
     chainId: '0xa516',
     token: 'ROSE',
     rpcs: props.rpcs,
+    hideRpcs: props.hideRpcs,
     be: ['https://explorer.oasis.io/mainnet/emerald'],
   });
 };
 
 export const AddEmeraldTestnetToMetaMask = (props: {
   rpcs: string[],
+  hideRpcs: boolean,
 }) => {
   return AddToMetaMask({
     name: 'Oasis Emerald Testnet',
     chainId: '0xa515',
     token: 'TEST',
     rpcs: props.rpcs,
+    hideRpcs: props.hideRpcs,
     be: ['https://explorer.oasis.io/testnet/emerald'],
   });
 };