From c7ec0cf899dae5faf58d83f23db90be2864a7eab Mon Sep 17 00:00:00 2001
From: pablo <mendez4a@gmail.com>
Date: Fri, 13 Aug 2021 17:33:29 +0200
Subject: [PATCH] Added types, calls and initial frontend components

---
 packages/admin-ui/src/common/routes.ts        |  6 +++
 .../dashboard/components/ConnectWallet.tsx    | 45 +++++++++++++++++++
 .../dappmanager/src/calls/ethClientsGet.ts    |  3 ++
 packages/dappmanager/src/calls/index.ts       |  1 +
 4 files changed, 55 insertions(+)
 create mode 100644 packages/admin-ui/src/pages/dashboard/components/ConnectWallet.tsx
 create mode 100644 packages/dappmanager/src/calls/ethClientsGet.ts

diff --git a/packages/admin-ui/src/common/routes.ts b/packages/admin-ui/src/common/routes.ts
index 6e1e05edd..106849294 100644
--- a/packages/admin-ui/src/common/routes.ts
+++ b/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: {},
diff --git a/packages/admin-ui/src/pages/dashboard/components/ConnectWallet.tsx b/packages/admin-ui/src/pages/dashboard/components/ConnectWallet.tsx
new file mode 100644
index 000000000..a5203d086
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/dappmanager/src/calls/ethClientsGet.ts b/packages/dappmanager/src/calls/ethClientsGet.ts
new file mode 100644
index 000000000..34bd101ff
--- /dev/null
+++ b/packages/dappmanager/src/calls/ethClientsGet.ts
@@ -0,0 +1,3 @@
+import { EthClient } from "../types";
+
+export async function ethClientsGet(): Promise<EthClient[]> {}
diff --git a/packages/dappmanager/src/calls/index.ts b/packages/dappmanager/src/calls/index.ts
index ce13c9f6f..e69b53864 100644
--- a/packages/dappmanager/src/calls/index.ts
+++ b/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";