Auth (#41)

* Using files to store pid and refactor processes termination (#2) * Using files to store pid and refactor processes termination * Refactor process termination * Update logging message during IPFS daemon termination * Refactor process termination and returned getPid async * Deleting a file before processes are terminated * Fix review comments * Add to fs.readFile to catch errors handler * Add authentication flow - first commit * Add authentication flow - first commit * Fix signMessage * Add if condition for signedMessage * Add token management and UI signing feedback * Add application mutation hooks and AccessControl component * Remove unused icon URL and adjust footer alignment * Add FormControl for input validation * Add localhost API URL and success callbacks * Refactor fetch logic to a reusable function * Remove unused approval/rejection logic * Refactor headers * Remove boxShadow * Add environment variable support with dotenv * Add React Router for navigation * Add RPC URL * Add NetworkMismatch component * Remove unused URL and adjust main window height * Apply suggestions from code review --------- Co-authored-by: Noisekit <[email protected]>
Synthetixio · Nov 14, 2024 · a72c24b · a72c24b
1 parent 84bc9ec
commit a72c24b
Show file tree

Hide file tree

Showing 16 changed files with 2,548 additions and 47 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+API_URL=http://localhost:3005/
+PROJECTID=
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,13 @@ out/
 
 .webpack
 
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
 # yarn v2
 .yarn/cache
 .yarn/unplugged

diff --git a/package.json b/package.json
@@ -23,15 +23,19 @@
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@reown/appkit": "^1.3.0",
     "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "^5.25.0",
+    "@vderunov/whitelist-contract": "^2.0.0",
     "adm-zip": "^0.5.10",
+    "dotenv": "^16.4.5",
     "electron-log": "^5.1.2",
     "electron-squirrel-startup": "^1.0.0",
-    "ethers": "^6.11.1",
+    "ethers": "^6.13.4",
     "framer-motion": "^11.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.28.0",
     "tar": "^6.2.0",
     "zod": "^3.22.4"
   },

diff --git a/src/main.js b/src/main.js
@@ -3,6 +3,7 @@ const http = require('node:http');
 const path = require('node:path');
 const { BrowserWindow, Menu, Tray, app, ipcMain, session, shell } = require('electron');
 const logger = require('electron-log');
+require('dotenv').config();
 const { SYNTHETIX_NODE_APP_CONFIG } = require('./const');
 const { DAPPS, resolveDapp } = require('./main/dapps');
 const {
@@ -83,7 +84,7 @@ function createWindow() {
     fullscreen: false,
     fullscreenable: false,
     width: 600,
-    height: 470,
+    height: 540,
     // frame: false,
     icon: isDebug ? path.join(app.getAppPath(), 'assets/icon.ico') : undefined,
     webPreferences: {
@@ -210,7 +211,9 @@ app.once('ready', async () => {
     callback({
       responseHeaders: {
         ...details.responseHeaders,
-        'Content-Security-Policy': "connect-src 'self'",
+        'Content-Security-Policy': [
+          "connect-src 'self' http://45.146.7.38:3005 http://localhost:3005 wss://relay.walletconnect.org https://pulse.walletconnect.org https://api.web3modal.org https://rpc.walletconnect.org https://sepolia.optimism.io",
+        ],
       },
     });
   });
@@ -342,6 +345,7 @@ async function updateConfig() {
 }
 
 let dappsUpdaterTimer = null;
+
 async function debouncedDappsUpdater() {
   if (dappsUpdaterTimer) {
     clearTimeout(dappsUpdaterTimer);
@@ -355,6 +359,7 @@ async function debouncedDappsUpdater() {
   // On initial load keep updater interval short and extend to 10m when dapps are already resolved
   dappsUpdaterTimer = setTimeout(debouncedDappsUpdater, DAPPS.length > 0 ? 600_000 : 10_000);
 }
+
 waitForIpfs().then(debouncedDappsUpdater).catch(logger.error);
 
 ipcMain.handle('peers', async () => fetchPeers());

diff --git a/src/preload.js b/src/preload.js
@@ -1,5 +1,11 @@
 const { contextBridge, ipcRenderer } = require('electron');
 
+contextBridge.exposeInMainWorld('env', {
+  API_URL: process.env.API_URL,
+  PROJECTID: process.env.PROJECTID,
+  OPTIMISM_SEPOLIA_RPC_URL: process.env.OPTIMISM_SEPOLIA_RPC_URL,
+});
+
 const electronHandler = {
   ipcRenderer: {
     invoke: (func, ...args) => ipcRenderer.invoke(func, ...args),

diff --git a/src/renderer/App.js b/src/renderer/App.js
@@ -1,19 +1,55 @@
-const { Box, Text } = require('@chakra-ui/react');
+const { Flex, Box, Text, Button } = require('@chakra-ui/react');
 const React = require('react');
 const { Dapps } = require('./DApps');
 const { Ipfs } = require('./Ipfs');
+const { AuthConnect } = require('./AuthConnect');
+const { createAppKit } = require('@reown/appkit/react');
+const { optimismSepolia } = require('@reown/appkit/networks');
+const { Routes, Route, useNavigate } = require('react-router-dom');
+
+createAppKit({
+  networks: [optimismSepolia],
+  metadata: {
+    name: 'Synthetix Node',
+    description: 'Synthetix Node',
+  },
+  projectId: process.env.PROJECTID || window.env.PROJECTID,
+  features: {
+    analytics: true,
+  },
+});
 
 function App() {
+  const navigate = useNavigate();
+
   return (
     <Box display="flex" flexDirection="column" minHeight="100vh">
-      <Box px="5" flex="1" overflowY="auto">
-        <Ipfs />
-      </Box>
-      <Box p="1">
-        <Dapps />
-      </Box>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <>
+              <Box as="header" width="100%" borderBottomWidth="1px" p={3}>
+                <Flex maxW="1200px" mx="auto" align="center" justify="space-between">
+                  <Box>Synthetix Node</Box>
+                  <Button colorScheme="teal" variant="outline" onClick={() => navigate('/auth')}>
+                    Sign In
+                  </Button>
+                </Flex>
+              </Box>
+              <Box px="5" flex="1" overflowY="auto">
+                <Ipfs />
+              </Box>
+              <Box p="1">
+                <Dapps />
+              </Box>
+            </>
+          }
+        />
+        <Route path="/auth" element={<AuthConnect />} />
+      </Routes>
 
-      <Box background="whiteAlpha.100" p="1">
+      <Box background="whiteAlpha.100" p="1" mt="auto">
         <Text align="center" opacity="0.5" fontSize="xs">
           alpha version
         </Text>

diff --git a/src/renderer/AuthConnect/AccessControl.js b/src/renderer/AuthConnect/AccessControl.js
@@ -0,0 +1,66 @@
+const React = require('react');
+const { usePermissions } = require('./usePermissions');
+const { useSubmitApplicationMutation } = require('./useSubmitApplicationMutation');
+const { useWithdrawApplicationMutation } = require('./useWithdrawApplicationMutation');
+const { Skeleton, Button, Box, Stack, Heading, VStack } = require('@chakra-ui/react');
+
+function AccessControl() {
+  const permissions = usePermissions();
+  const submitApplicationMutation = useSubmitApplicationMutation();
+  const withdrawApplicationMutation = useWithdrawApplicationMutation();
+
+  const isLoading =
+    permissions.isFetching ||
+    submitApplicationMutation.isPending ||
+    withdrawApplicationMutation.isPending;
+
+  let content;
+  switch (true) {
+    case isLoading:
+      content = (
+        <Skeleton
+          height="20px"
+          width="100%"
+          bg="gray.600"
+          startColor="gray.500"
+          endColor="gray.700"
+        />
+      );
+      break;
+    case permissions.data.isPending:
+      content = (
+        <VStack spacing={4} align="start">
+          <Heading size="md">Please wait for approval</Heading>
+          <Button
+            colorScheme="teal"
+            variant="outline"
+            onClick={() => withdrawApplicationMutation.mutate()}
+          >
+            Renounce assigned role
+          </Button>
+        </VStack>
+      );
+      break;
+    default:
+      content = (
+        <VStack spacing={4} align="start">
+          <Heading size="md">Access Control</Heading>
+          <Button
+            colorScheme="teal"
+            variant="outline"
+            onClick={() => submitApplicationMutation.mutate()}
+          >
+            Apply for whitelist
+          </Button>
+        </VStack>
+      );
+  }
+
+  return (
+    <Stack spacing={6} padding={5} borderRadius="md">
+      <Box>{content}</Box>
+    </Stack>
+  );
+}
+
+module.exports = { AccessControl };