Feat/127 get push node config node details

.vscode/settings.json

@@ -9,5 +9,10 @@
     "**/.next": true,
     "**/out": true
   },
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "files.watcherExclude": {
+      "**/node_modules/**": true,
+      "**/dist/**": true,
+      "**/.git/**": true
+  }
 }

package.json

@@ -25,8 +25,8 @@
     "@libp2p/peer-id": "^4.1.4",
     "@libp2p/ping": "^1.1.1",
     "@libp2p/websockets": "^8.1.1",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
     "@mui/x-data-grid": "^8.14.1",
     "@multiformats/multiaddr": "^12",
     "@oceanprotocol/contracts": "2.5.0",
@@ -40,6 +40,7 @@
     "formik": "^2.4.9",
     "gsap": "3.13.0",
     "it-pipe": "^3.0.1",
+    "json-edit-react": "^1.29.0",
     "libp2p": "^1.8.0",
     "myetherwallet-blockies": "^0.1.1",
     "next": "^15.4.8",
@@ -65,7 +66,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^6.6.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.7.4",
     "prettier-plugin-organize-imports": "^4.3.0",
     "typescript": "^5"
   },

src/components/node-details/config-modal.tsx

@@ -0,0 +1,56 @@
+import Button from '@/components/button/button';
+import Modal from '@/components/modal/modal';
+import { JsonEditor } from 'json-edit-react';
+import { Dispatch, SetStateAction } from 'react';
+import styles from './node-info.module.css';
+
+type ConfigModalProps = {
+  isOpen: boolean;
+  fetchingConfig: boolean;
+  pushingConfig: boolean;
+  config: Record<string, any>;
+  editedConfig: Record<string, any>;
+  setEditedConfig: Dispatch<SetStateAction<Record<string, any>>>;
+  handlePushConfig: (config: Record<string, any>) => Promise<void>;
+  onClose: () => void;
+};
+
+const ConfigModal = ({
+  isOpen,
+  fetchingConfig,
+  pushingConfig,
+  config,
+  editedConfig,
+  setEditedConfig,
+  handlePushConfig,
+  onClose,
+}: ConfigModalProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Edit node config" width="xs">
+      <div className={styles.modalContent}>
+        {fetchingConfig && (!config || Object.keys(config).length === 0) ? (
+          <div className={styles.fetching}>Fetching config...</div>
+        ) : (
+          <div className="flex flex-col" style={{ gap: '24px' }}>
+            <JsonEditor
+              data={editedConfig}
+              onUpdate={({ newData }) => setEditedConfig(newData as Record<string, any>)}
+              collapse={({ value }) => typeof value === 'object' && value !== null && Object.keys(value).length === 0}
+            />
+            <Button
+              autoLoading
+              color="accent1"
+              loading={pushingConfig}
+              onClick={() => handlePushConfig(editedConfig)}
+              variant="filled"
+            >
+              Push config
+            </Button>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default ConfigModal;

src/components/node-details/environments.tsx

@@ -5,7 +5,7 @@ import { EnvNodeInfo } from '@/types/environments';
 import styles from './environments.module.css';
 
 type EnvironmentsProps = {
-    nodeInfo: EnvNodeInfo;
+  nodeInfo: EnvNodeInfo;
 };
 
 const Environments = ({ nodeInfo }: EnvironmentsProps) => {
@@ -15,8 +15,10 @@ const Environments = ({ nodeInfo }: EnvironmentsProps) => {
     <Card direction="column" padding="md" radius="lg" spacing="md" variant="glass-shaded">
       <h3>Environments</h3>
       <div className={styles.list}>
-        {!isReady ? <div>Fetching data...</div> : envs.map((env) =>
-          <EnvironmentCard key={env.id} environment={env} nodeInfo={nodeInfo} />
+        {!isReady ? (
+          <div>Fetching data...</div>
+        ) : (
+          envs.map((env) => <EnvironmentCard key={env.id} environment={env} nodeInfo={nodeInfo} />)
         )}
       </div>
     </Card>

src/components/node-details/node-info.module.css

@@ -34,6 +34,28 @@
         display: flex;
         gap: 8px;
       }
+
+      .modalContent {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        .modalActions {
+          display: flex;
+          justify-content: flex-end;
+          padding-top: 16px;
+          border-top: 1px solid var(--border-glass);
+        }
+      }
+
+      .fetching {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 40px;
+        color: var(--text-secondary);
+        font-style: italic;
+      }
     }
 
     .infoFooter {

src/components/node-details/node-info.tsx

@@ -2,19 +2,109 @@ import Button from '@/components/button/button';
 import Card from '@/components/card/card';
 import { Balance } from '@/components/node-details/balance';
 import Eligibility from '@/components/node-details/eligibility';
+import { useP2P } from '@/contexts/P2PContext';
+import { useOceanAccount } from '@/lib/use-ocean-account';
 import { Node, NodeEligibility } from '@/types/nodes';
+import { useAuthModal, useSignMessage, useSmartAccountClient } from '@account-kit/react';
 import DnsIcon from '@mui/icons-material/Dns';
-import DownloadIcon from '@mui/icons-material/Download';
 import LocationPinIcon from '@mui/icons-material/LocationPin';
 import PublicIcon from '@mui/icons-material/Public';
 import UploadIcon from '@mui/icons-material/Upload';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import ConfigModal from './config-modal';
 import styles from './node-info.module.css';
 
 type NodeInfoProps = {
   node: Node;
 };
 
 const NodeInfo = ({ node }: NodeInfoProps) => {
+  const { client } = useSmartAccountClient({ type: 'LightAccount' });
+  const { signMessageAsync } = useSignMessage({
+    client,
+  });
+  const { openAuthModal } = useAuthModal();
+  const { account, ocean } = useOceanAccount();
+  const { config, fetchConfig, pushConfig } = useP2P();
+
+  const [fetchingConfig, setFetchingConfig] = useState<boolean>(false);
+  const [pushingConfig, setPushingConfig] = useState<boolean>(false);
+  const [isEditConfigDialogOpen, setIsEditConfigDialogOpen] = useState<boolean>(false);
+  const [editedConfig, setEditedConfig] = useState<Record<string, any>>({});
+
+  useEffect(() => {
+    if (config) {
+      setEditedConfig(config);
+    }
+  }, [config]);
+
+  async function handleFetchConfig() {
+    if (!account.isConnected) {
+      openAuthModal();
+      return;
+    }
+    if (!ocean || !node?.id) {
+      return;
+    }
+    const timestamp = Date.now() + 5 * 60 * 1000; // 5 minutes expiry
+    const signedMessage = await signMessageAsync({
+      message: timestamp.toString(),
+    });
+
+    setFetchingConfig(true);
+    try {
+      await fetchConfig(node.id, signedMessage, timestamp, account.address as string);
+    } catch (error) {
+      console.error('Error fetching node config :', error);
+    } finally {
+      setFetchingConfig(false);
+    }
+  }
+
+  async function handlePushConfig(config: Record<string, any>) {
+    let success = false;
+    if (!account.isConnected) {
+      openAuthModal();
+      return;
+    }
+    if (!ocean || !node?.id) {
+      return;
+    }
+    const timestamp = Date.now() + 5 * 60 * 1000; // 5 minutes expiry
+    const signedMessage = await signMessageAsync({
+      message: timestamp.toString(),
+    });
+
+    setPushingConfig(true);
+    try {
+      await pushConfig(node.id, signedMessage, timestamp, config, account.address as string);
+      success = true;
+    } catch (error) {
+      console.error('Error pushing node config :', error);
+    } finally {
+      setPushingConfig(false);
+      if (success) {
+        toast.success('Successfully pushed new config!');
+        setIsEditConfigDialogOpen(false);
+      } else {
+        toast.error('Failed to push new config');
+      }
+    }
+  }
+
+  function handleOpenEditConfigModal() {
+    if (!config || Object.keys(config).length === 0) {
+      handleFetchConfig();
+    }
+
+    setIsEditConfigDialogOpen(true);
+  }
+
+  function handleCloseModal() {
+    setIsEditConfigDialogOpen(false);
+  }
+
   return (
     <Card className={styles.root} padding="md" radius="lg" variant="glass-shaded">
       <div className={styles.infoWrapper}>
@@ -39,10 +129,19 @@ const NodeInfo = ({ node }: NodeInfoProps) => {
             </div>
           </div>
           <div className={styles.buttons}>
-            <Button contentBefore={<DownloadIcon />} variant="outlined">
-              Get node config
+            <ConfigModal
+              isOpen={isEditConfigDialogOpen}
+              fetchingConfig={fetchingConfig}
+              pushingConfig={pushingConfig}
+              config={config}
+              editedConfig={editedConfig}
+              setEditedConfig={setEditedConfig}
+              handlePushConfig={handlePushConfig}
+              onClose={handleCloseModal}
+            />
+            <Button contentBefore={<UploadIcon />} onClick={handleOpenEditConfigModal} variant="outlined">
+              Edit node config
             </Button>
-            <Button contentBefore={<UploadIcon />}>Set node config</Button>
           </div>
         </div>
         <div className={styles.infoFooter}>

src/components/node-details/unban-requests.tsx

@@ -44,11 +44,12 @@ const UnbanRequests = ({ node }: UnbanRequestsProps) => {
     }
     setLoading(true);
     try {
-      const timestamp = Date.now();
+      const timestamp = Date.now() + 5 * 60 * 1000; // 5 minutes expiry
       const signedMessage = await signMessageAsync({
         message: timestamp.toString(),
       });
-      await requestNodeUnban(node.id, signedMessage, timestamp);
+
+      await requestNodeUnban(node.id, signedMessage as string, timestamp, account.address as string);
       await fetchUnbanRequests(node.id);
     } catch (error) {
       console.error('Error requesting unban:', error);

src/context/unban-requests-context.tsx

@@ -7,7 +7,7 @@ type UnbanRequestsContextType = {
   unbanRequests: UnbanRequest[];
 
   fetchUnbanRequests: (nodeId: string) => Promise<void>;
-  requestNodeUnban: (nodeId: string, signature: string, expiryTimestamp: number) => Promise<void>;
+  requestNodeUnban: (nodeId: string, signature: string, expiryTimestamp: number, address: string) => Promise<void>;
 };
 
 const UnbanRequestsContext = createContext<UnbanRequestsContextType | undefined>(undefined);
@@ -29,16 +29,20 @@ export const UnbanRequestsProvider = ({ children }: { children: ReactNode }) =>
     }
   }, []);
 
-  const requestNodeUnban = useCallback(async (nodeId: string, signature: string, expiryTimestamp: number) => {
-    try {
-      await axios.post(`${getApiRoute('nodeUnbanRequests')}/${nodeId}/unban`, {
-        signature,
-        expiryTimestamp,
-      });
-    } catch (error) {
-      console.error('Error requesting node unban: ', error);
-    }
-  }, []);
+  const requestNodeUnban = useCallback(
+    async (nodeId: string, signature: string, expiryTimestamp: number, address: string) => {
+      try {
+        await axios.post(`${getApiRoute('nodeUnbanRequests')}/${nodeId}/unban`, {
+          signature,
+          expiryTimestamp,
+          address,
+        });
+      } catch (error) {
+        console.error('Error requesting node unban: ', error);
+      }
+    },
+    []
+  );
 
   return (
     <UnbanRequestsContext.Provider