work paused until unblock

packages/admin-ui/src/__mock-backend__/index.ts

@@ -224,7 +224,39 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
   runHostSecurityUpdates: async () =>
     "Security updates have been executed successfully, no reboot needed",
   natRenewalEnable: async () => {},
-  natRenewalIsEnabled: async () => true
+  natRenewalIsEnabled: async () => true,
+  ethClientsGet: async () => [
+    {
+      ok: true,
+      url: "http://geth.dappnode:8545",
+      dnpName: "geth.dnp.dappnode.eth",
+      chainId: "0x1"
+    },
+    {
+      ok: true,
+      url: "http://goerli-geth.dappnode:8545",
+      dnpName: "goerli-geth.dnp.dappnode.eth",
+      chainId: "0x5"
+    },
+    {
+      ok: true,
+      url: "http://nethermind-xdai.dappnode:8545",
+      dnpName: "nethermind-xdai.dnp.dappnode.eth",
+      chainId: "0x64"
+    },
+    {
+      ok: true,
+      url: "http://ropsten.dappnode:8545",
+      dnpName: "ropsten.dnp.dappnode.eth",
+      chainId: "0x3"
+    },
+    {
+      ok: true,
+      url: "http://rinkeby.dappnode:8545",
+      dnpName: "rinkeby.dnp.dappnode.eth",
+      chainId: "0x4"
+    }
+  ]
 };
 
 export const calls: Routes = {

packages/admin-ui/src/common/routes.ts

@@ -38,7 +38,7 @@ import {
   WifiReport,
   CurrentWifiCredentials,
   LocalProxyingStatus,
-  EthClient
+  EthClientWallet
 } from "./types";
 
 export interface Routes {
@@ -213,7 +213,7 @@ export interface Routes {
   /**
    * Return array of available clients to connect a wallet (i.e metmask)
    */
-  ethClientsGet: () => Promise<EthClient[]>;
+  ethClientsGet: () => Promise<EthClientWallet[]>;
 
   /**
    * Return formated core update data

packages/admin-ui/src/common/types.ts

@@ -1189,13 +1189,6 @@ export interface VolumeData extends VolumeOwnershipData {
   fileSystem?: MountpointData;
 }
 
-export type EthClients = "geth" | "erigon" | "nethermind" | "turbogeth";
-export interface EthClient {
-  ethclient: Partial<EthClients>;
-  status: EthClientStatus;
-  rpcEndpoint: string;
-}
-
 /**
  * Eth provider / client types
  * Manage the Ethereum multi-client setup
@@ -1221,10 +1214,14 @@ export type EthClientFallback = "on" | "off";
 
 export type EthClientStatus = EthClientStatusOk | EthClientStatusError;
 
+export type EthClientWallet = EthClientWalletOk | EthClientStatusError;
+
 export type EthClientStatusOk =
   // All okay, client is functional
   { ok: true; url: string; dnpName: string };
 
+export type EthClientWalletOk = EthClientStatusOk & { chainId: string };
+
 export type EthClientStatusError =
   // Unexpected error
   | { ok: false; code: "UNKNOWN_ERROR"; error: ErrorSerialized }

packages/admin-ui/src/pages/dashboard/components/ConnectWallet.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { ethers } from "ethers";
 import CardList from "components/CardList";
 import { useApi } from "api";
 import ErrorView from "components/ErrorView";
 import Ok from "components/Ok";
 import Alert from "react-bootstrap/esm/Alert";
-
+import { EthClientWalletOk } from "common";
+import Button from "components/Button";
+import { prettyDnpName } from "utils/format";
 declare global {
   interface Window {
     ethereum: any;
@@ -15,9 +16,35 @@ declare global {
 export default function ConnectWallet() {
   const ethClients = useApi.ethClientsGet();
 
-  async function connectWallet() {
-    await window.ethereum.enable();
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
+  async function walletConnect(ethClient: EthClientWalletOk) {
+    // TODO: add testnets ethclients. Chain ID will change: https://chainlist.org/
+    if (ethClient.ok) {
+      try {
+        // https://eips.ethereum.org/EIPS/eip-3326
+        await window.ethereum.request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId: "0xf00" }]
+        });
+      } catch (switchError) {
+        // This error code indicates that the chain has not been added to MetaMask.
+        if (switchError.code === 4902) {
+          try {
+            // https://eips.ethereum.org/EIPS/eip-3085
+            await window.ethereum.request({
+              method: "wallet_addEthereumChain",
+              // IMPORTANT! RPC without HTTPs is not allowed
+              // IMPORTANT! Add new chains with a default chain ID in metamask is not allowed
+              params: [{ chainId: ethClient.chainId, rpcUrls: [ethClient.url] }]
+            });
+          } catch (addError) {
+            // handle "add" error
+            throw addError;
+          }
+        }
+        // handle other "switch" errors
+        throw switchError;
+      }
+    }
   }
 
   if (ethClients.error)
@@ -34,9 +61,20 @@ export default function ConnectWallet() {
           </Alert>
         ) : (
           <CardList className="connect-wallet">
-            {ethClients.data.map(ethClient => (
-              <span></span>
-            ))}
+            {ethClients.data.map(
+              ethClient =>
+                ethClient.ok && (
+                  <div className="connect-wallet-item">
+                    <span>{prettyDnpName(ethClient.dnpName)}</span>
+                    <Button
+                      variant="dappnode"
+                      onClick={() => walletConnect(ethClient)}
+                    >
+                      Connect
+                    </Button>
+                  </div>
+                )
+            )}
           </CardList>
         )}
       </div>

packages/admin-ui/src/pages/dashboard/components/Dashboard.tsx

@@ -9,6 +9,7 @@ import SubTitle from "components/SubTitle";
 import Title from "components/Title";
 
 import "./dashboard.scss";
+import ConnectWallet from "./ConnectWallet";
 
 export default function Dashboard() {
   return (
@@ -19,6 +20,9 @@ export default function Dashboard() {
         <div className="dashboard-right">
           <SubTitle>Package updates</SubTitle>
           <PackageUpdates />
+
+          <SubTitle>Connect wallet</SubTitle>
+          <ConnectWallet />
         </div>
 
         <div className="dashboard-left">

packages/admin-ui/src/pages/dashboard/components/dashboard.scss

@@ -27,7 +27,8 @@
     grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
   }
 
-  .package-updates {
+  .package-updates,
+  .connect-wallet {
     // Give the single card a max width that matches the other cards
     grid-column: 1 / 4;
   }
@@ -76,7 +77,8 @@
 
 // Package updates card
 
-.package-update-item {
+.package-update-item,
+.connect-wallet-item {
   display: flex;
   justify-content: space-between;
   align-items: center;

packages/dappmanager/src/calls/ethClientsGet.ts

@@ -1,3 +1,5 @@
-import { EthClient } from "../types";
+import { EthClientWallet } from "../types";
 
-export async function ethClientsGet(): Promise<EthClient[]> {}
+export async function ethClientsGet(): Promise<EthClientWallet[]> {
+  return [];
+}