Added types, calls and initial frontend components

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

@@ -232,6 +232,11 @@ export interface Routes {
     deletePrevConsClientVolumes?: boolean;
   }) => Promise<void>;
 
+  /**
+   * Return array of available clients to connect a wallet (i.e metmask)
+   */
+  ethClientsGet: () => Promise<EthClient[]>;
+
   /**
    * Return formated core update data
    */
@@ -701,6 +706,7 @@ export const routesData: { [P in keyof Routes]: RouteData } = {
   dockerEngineUpdateCheck: {},
   ethClientFallbackSet: { log: true },
   ethClientTargetSet: { log: true },
+  ethClientsGet: {},
   fetchCoreUpdateData: {},
   fetchDirectory: {},
   fetchRegistry: {},

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

@@ -0,0 +1,45 @@
+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";
+
+declare global {
+  interface Window {
+    ethereum: any;
+  }
+}
+
+export default function ConnectWallet() {
+  const ethClients = useApi.ethClientsGet();
+
+  async function connectWallet() {
+    await window.ethereum.enable();
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+  }
+
+  if (ethClients.error)
+    return <ErrorView error={ethClients.error} hideIcon red />;
+  if (ethClients.isValidating) return <Ok loading msg="Loading eth clients" />;
+  if (!ethClients.data) return <ErrorView error={"No data"} hideIcon red />;
+
+  return (
+    <div className="dashboard-cards">
+      <div className="connect-wallet">
+        {ethClients.data.length === 0 ? (
+          <Alert className="connect-wallet-card" variant="success">
+            No eth client detected, get one from the dappstore
+          </Alert>
+        ) : (
+          <CardList className="connect-wallet">
+            {ethClients.data.map(ethClient => (
+              <span></span>
+            ))}
+          </CardList>
+        )}
+      </div>
+    </div>
+  );
+}

packages/dappmanager/src/calls/ethClientsGet.ts

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

packages/dappmanager/src/calls/index.ts

@@ -13,6 +13,7 @@ export * from "./dockerUpdate";
 export { dappnodeWebNameSet } from "./dappnodeWebNameSet";
 export { ethClientTargetSet } from "./ethClientTargetSet";
 export { ethClientFallbackSet } from "./ethClientFallbackSet";
+export { ethClientsGet } from "./ethClientsGet";
 export { fetchCoreUpdateData } from "./fetchCoreUpdateData";
 export { fetchDirectory } from "./fetchDirectory";
 export { fetchDnpRequest } from "./fetchDnpRequest";