Merge remote-tracking branch 'origin/feat/monitor-tab-improvements'

FLock-io · Aug 29, 2023 · 02c3411 · 02c3411
2 parents 73d2af1 + b376834
commit 02c3411
Show file tree

Hide file tree

Showing 9 changed files with 549 additions and 99 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
   },
   "dependencies": {
     "@patternfly/react-log-viewer": "^4.87.100",
+    "@pinata/sdk": "^2.1.0",
     "@rehooks/local-storage": "^2.4.4",
     "@web3auth/modal": "^6.1.4",
     "@web3auth/openlogin-adapter": "^6.1.4",
@@ -107,8 +108,8 @@
     "electron-log": "^4.4.8",
     "electron-root-path": "^1.1.0",
     "electron-updater": "^5.3.0",
-    "genson-js": "^0.0.8",
     "ethers": "^6.6.7",
+    "genson-js": "^0.0.8",
     "grommet": "^2.32.2",
     "grommet-icons": "^4.11.0",
     "ipfs-http-client": "^60.0.1",

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -14,10 +14,17 @@ import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import { ChildProcessWithoutNullStreams, spawn } from 'child_process';
 import kill from 'tree-kill';
+import Pinata from '@pinata/sdk';
+import fs from 'fs';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
 import { execPath } from './binaries';
 
+const pinata = new Pinata(
+  '9db9fffc88c7e281b5b2',
+  '5c761fe42f8267832f70a1f00430d9f3d9006fc9624e5bce43a44b7edd79f624'
+);
+
 class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
@@ -29,57 +36,86 @@ class AppUpdater {
 let mainWindow: BrowserWindow | null = null;
 let main: ChildProcessWithoutNullStreams;
 
-ipcMain.on('ipc', async (event, arg) => {
-  console.log(`arg: ${arg}`);
-  if (arg[0] === 'join') {
-    main = spawn(
-      execPath,
-      [
-        '--flock-token-address',
-        '0x95c5746A0E7c73b6Af16048d4e79dA294b8b7116',
-        '--task-address',
-        arg[1],
-        '--ipfs',
-        '/dns/ipfs.flock.io/tcp/80/http',
-        '--rpc',
-        'https://polygon-mumbai.g.alchemy.com/v2/2CfDEXaIoLouWbPS1Tw4v9tX5bkKruSa',
-        '--port',
-        '6222',
-        '--private-key',
-        arg[2],
-        '--dataset',
-        arg[3],
-      ],
-      {}
+ipcMain.handle('ipc', async (event, arg) => {
+  if (arg[0] === 'uploadToIPFS') {
+    const { IpfsHash: schemaHash } = await pinata.pinJSONToIPFS(
+      JSON.parse(arg[1])
     );
 
-    main.stdout.on('data', (data) => {
-      console.log(`stdout: ${data}`);
-      event.reply('ipc', [arg[1], data.toString()]);
-    });
+    const fileName = arg[2].split('\\').pop();
+    const fileStream = fs.createReadStream(arg[2]);
+
+    const options = {
+      pinataMetadata: {
+        // @ts-ignore
+        name: fileName,
+      },
+    };
+    const { IpfsHash: fileHash } = await pinata.pinFileToIPFS(
+      fileStream,
+      options
+    );
+    return [schemaHash, fileHash];
+  }
+  return [];
+});
 
-    main.stderr.on('data', (data) => {
-      console.error(`stderr: ${data}`);
-      if (
-        data.toString().includes('insufficient funds for gas * price + value')
-      ) {
+ipcMain.on('ipc', async (event, arg) => {
+  console.log(`arg: ${arg}`);
+  switch (arg[0]) {
+    case 'join':
+      main = spawn(
+        execPath,
+        [
+          '--flock-token-address',
+          '0x95c5746A0E7c73b6Af16048d4e79dA294b8b7116',
+          '--task-address',
+          arg[1],
+          '--ipfs',
+          '/dns/ipfs.flock.io/tcp/80/http',
+          '--rpc',
+          'https://polygon-mumbai.g.alchemy.com/v2/2CfDEXaIoLouWbPS1Tw4v9tX5bkKruSa',
+          '--port',
+          '6222',
+          '--private-key',
+          arg[2],
+          '--dataset',
+          arg[3],
+        ],
+        {}
+      );
+
+      main.stdout.on('data', (data) => {
+        console.log(`stdout: ${data}`);
+        event.reply('ipc', [arg[1], data.toString()]);
+      });
+
+      main.stderr.on('data', (data) => {
+        console.error(`stderr: ${data}`);
+        if (
+          data.toString().includes('insufficient funds for gas * price + value')
+        ) {
+          event.reply('ipc', [
+            arg[1],
+            'insufficient funds for gas * price + value',
+          ]);
+        }
+      });
+
+      main.on('close', (code) => {
+        console.log(`child process exited with code ${code}`);
         event.reply('ipc', [
           arg[1],
-          'insufficient funds for gas * price + value',
+          `client exited with code ${code} (0 is success)`,
         ]);
-      }
-    });
-
-    main.on('close', (code) => {
-      console.log(`child process exited with code ${code}`);
-      event.reply('ipc', [
-        arg[1],
-        `client exited with code ${code} (0 is success)`,
-      ]);
-    });
-  } else if (arg[0] === 'leave') {
-    // @ts-ignore
-    kill(main.pid);
+      });
+      break;
+    case 'leave':
+      // @ts-ignore
+      kill(main.pid);
+      break;
+    default:
+      break;
   }
 });
 

diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -21,6 +21,9 @@ const electronHandler = {
     once(channel: Channels, func: (...args: unknown[]) => void) {
       ipcRenderer.once(channel, (_event, ...args) => func(...args));
     },
+    uploadToIPFS(channel: Channels, ...args: unknown[]): Promise<string[]> {
+      return ipcRenderer.invoke(channel, ...args);
+    },
   },
 };
 

diff --git a/src/renderer/components/CreateTask.tsx b/src/renderer/components/CreateTask.tsx
@@ -58,7 +58,7 @@ function DataDefinitionForm({
   setErrors(value: any): void;
 }) {
   const handleChange = async (nextValue: any) => {
-    if (nextValue.sampleData) {
+    if (nextValue.sampleData[0]) {
       const fileReader = new FileReader();
       fileReader.readAsText(nextValue.sampleData[0], 'UTF-8');
       fileReader.onload = (e) => {
@@ -91,7 +91,38 @@ function DataDefinitionForm({
         validateOn="blur"
       >
         <Box height="medium">
-          <TextArea id="schema" name="schema" fill />
+          <TextArea
+            id="schema"
+            name="schema"
+            fill
+            resize={false}
+            placeholder='{
+  "type": "array",
+  "items": {
+    "type": "object",
+    "properties": {
+      "instruction": {
+        "type": "string"
+      },
+      "context": {
+        "type": "string"
+      },
+      "response": {
+        "type": "string"
+      },
+      "category": {
+        "type": "string"
+      }
+    },
+    "required": [
+      "instruction",
+      "context",
+      "response",
+      "category"
+    ]
+  }
+}'
+          />
         </Box>
       </FormField>
       <FormField
@@ -401,21 +432,32 @@ export function CreateTask({
 
   const handleCreate = async () => {
     setIsProcessing(true);
-    const { path: schemaPath } = await ipfsClient.add(
-      JSON.stringify(value.schema, null, 4)
-    );
-
-    const { path: sampleDataPath } = await ipfsClient.add(value.sampleData[0]);
+    const res = await window.electron.ipcRenderer
+      .uploadToIPFS('ipc', [
+        'uploadToIPFS',
+        value.schema,
+        value.sampleData[0].path.toString(),
+      ])
+      .then((result: string[]) => {
+        return result;
+      })
+      .catch((e: any) => {
+        console.error(e);
+      });
 
-    value.sampleData = sampleDataPath;
-    value.schema = schemaPath;
+    value.schema = res ? res[0] : '';
+    value.sampleData = res ? res[1] : '';
 
-    await writeAsyncApprove?.({
-      args: [
-        FLOCK_TASK_MANAGER_ADDRESS as `0x${string}`,
-        value.rewardPool * 10 ** 18,
-      ],
-    });
+    if (res) {
+      await writeAsyncApprove?.({
+        args: [
+          FLOCK_TASK_MANAGER_ADDRESS as `0x${string}`,
+          value.rewardPool * 10 ** 18,
+        ],
+      });
+    } else {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {

diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
@@ -1,10 +1,12 @@
-import { Box, Button, Sidebar as GrommetSidebar, Image, Nav } from 'grommet';
+import { Box, Button, Sidebar as GrommetSidebar, Image, Nav, Text } from 'grommet';
 import { Home, Money, Tools } from 'grommet-icons';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import logo from './logo.png';
 
 function Sidebar() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const { pathname } = location;
 
   return (
     <GrommetSidebar
@@ -23,24 +25,36 @@ function Sidebar() {
       <Nav gap="medium" align="start">
         <Button
           onClick={() => navigate('/')}
-          plain
+          primary={pathname === '/'}
           label="Dashboard"
           icon={<Home size="medium" />}
-          hoverIndicator="#F2F6FF"
+          hoverIndicator={pathname === '/' ? '' : '#F2F6FF'}
+          pad={{ vertical: 'small', horizontal: 'medium' }}
+          color={pathname === '/' ? 'brand' : 'white'}
+          fill="horizontal"
+          justify="start"
         />
         <Button
           onClick={() => navigate('/train')}
-          plain
+          primary={pathname === '/train'}
           label="Train"
           icon={<Tools size="medium" />}
-          hoverIndicator="#F2F6FF"
+          hoverIndicator={pathname === '/train' ? '' : '#F2F6FF'}
+          pad={{ vertical: 'small', horizontal: 'medium' }}
+          color={pathname === '/train' ? 'brand' : 'white'}
+          fill="horizontal"
+          justify="start"
         />
         <Button
           onClick={() => navigate('/faucet')}
-          plain
+          primary={pathname === '/faucet'}
           label="Faucet"
           icon={<Money size="medium" />}
-          hoverIndicator="#F2F6FF"
+          hoverIndicator={pathname === '/faucet' ? '' : '#F2F6FF'}
+          pad={{ vertical: 'small', horizontal: 'medium' }}
+          color={pathname === '/faucet' ? 'brand' : 'white'}
+          fill="horizontal"
+          justify="start"
         />
       </Nav>
     </GrommetSidebar>