work paused until unblock

dappnode · Nov 29, 2022 · bade728 · bade728
1 parent c7ec0cf
commit bade728
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 13 deletions.
diff --git a/packages/admin-ui/src/common/routes.ts b/packages/admin-ui/src/common/routes.ts
@@ -235,7 +235,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

diff --git a/packages/admin-ui/src/common/types.ts b/packages/admin-ui/src/common/types.ts
@@ -1022,10 +1022,14 @@ export enum EthClientRemote {
 
 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 }

diff --git a/packages/admin-ui/src/pages/dashboard/components/ConnectWallet.tsx b/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>

diff --git a/packages/admin-ui/src/pages/dashboard/components/Dashboard.tsx b/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">

diff --git a/packages/admin-ui/src/pages/dashboard/components/dashboard.scss b/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;

diff --git a/packages/dappmanager/src/calls/ethClientsGet.ts b/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 [];
+}