Merge pull request #136 from NillionNetwork/chore/network-config-070

chore: added new network configs

docs/network-configuration.md

@@ -7,11 +7,17 @@ import {PythonTestnetEnv, ReactTestnetEnv} from '@site/src/components/Networks/T
 
 ## Testnet
 
+:::info
+- If your SDK >= 0.7.0, you will be using `photon2`.
+- If your SDK =< 0.6.0, you will be using `photon1`. 
+:::
+
 Use the Testnet configuration to connect to the integrated Nillion Testnet. Check out [Testnet wallet and faucet guides here](/testnet-guides).
 
 <Tabs>
 
-<TabItem value="table" label="Network Table" default>
+
+<TabItem value="photon" label="Network" default>
 <NetworkTable/>
 </TabItem>
 

src/components/Networks/TestnetEnv.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CodeSnippet } from './CodeSnippet';
-import { NetworkConfig } from './network-info';
+import { NetworkConfig } from './network-info-photon2.js';
 
 const generateEnvSnippet = (networkConfig, prefix = '') => {
   const lines = [];
@@ -23,6 +23,7 @@ const pythonNetworkConfig = {
   },
 };
 // not needed for python
+delete pythonNetworkConfig.cluster_id;
 delete pythonNetworkConfig.websocket;
 delete pythonNetworkConfig.nilchain_json_rpc;
 delete pythonNetworkConfig.nilchain_rest_api;
@@ -39,6 +40,8 @@ const jsNetworkConfig = {
   },
 };
 // not needed for js
+delete jsNetworkConfig.cluster_id;
+delete jsNetworkConfig.websocket;
 delete jsNetworkConfig.bootnode;
 delete jsNetworkConfig.nilchain_grpc;
 

src/components/Networks/index.js

@@ -3,39 +3,69 @@ import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { NetworkConfig } from './network-info';
+import { NetworkConfig as NetworkConfig2 } from './network-info-photon2.js';
 import { CopyIcon } from './CopyIcon';
 
-const transformData = (data) => {
+const transformData = (data1, data2) => {
   const result = [];
-  for (const key in data) {
-    for (const config in data[key]) {
-      result.push(data[key][config]);
+  const processConfig = (config) => {
+    const configItems = [];
+    for (const key in config) {
+      for (const item in config[key]) {
+        configItems.push(config[key][item]);
+      }
     }
-  }
+    return configItems;
+  };
+
+  const config1Items = processConfig(data1);
+  const config2Items = processConfig(data2);
+
+  config1Items.forEach((item, index) => {
+    result.push({
+      name: item.name,
+      valuePhoton1: item.value,
+      valuePhoton2: config2Items[index]?.value || 'N/A'
+    });
+  });
+
   return result;
 };
 
-const configData = transformData(NetworkConfig);
+const CopyIconWrapper = (props) => {
+  if (props.value === 'N/A') {
+    return <span>{props.value}</span>;
+  }
+  return <CopyIcon {...props} />;
+};
 
 const columns = [
   {
     headerName: 'Config',
     field: 'name',
     flex: 1,
     cellRenderer: CopyIcon,
-    minWidth: 300,
+    minWidth: 250,
   },
   {
-    headerName: 'Value',
-    field: 'value',
+    headerName: 'Network (Photon1)',
+    field: 'valuePhoton1',
     flex: 2,
-    cellRenderer: CopyIcon,
+    cellRenderer: CopyIconWrapper,
   },
+  {
+    headerName: 'Network (Photon2)',
+    field: 'valuePhoton2',
+    flex: 2,
+    cellRenderer: CopyIconWrapper,
+  }
 ];
 
 const NetworkTable = () => {
+  const configData = transformData(NetworkConfig, NetworkConfig2);
+
   return (
-    <div
+    <div 
       className="ag-theme-alpine"
       style={{ height: '100%', width: '100%', fontSize: '12px' }}
     >

src/components/Networks/network-info-photon2.js

@@ -0,0 +1,34 @@
+export const NetworkConfig = {
+  testnet: {
+    cluster_id: {
+      name: 'NILLION_CLUSTER_ID',
+      value: 'N/A',
+    },
+    bootnode: {
+      name: 'NILLION_BOOTNODE_MULTIADDRESS',
+      value:
+        'https://node-1.photon2.nillion-network-nilogy.xyz:14311',
+    },
+    websocket: {
+      name: 'NILLION_BOOTNODE_WEBSOCKET',
+      value:
+        'N/A',
+    },
+    chain_id: {
+      name: 'NILLION_NILCHAIN_CHAIN_ID',
+      value: 'nillion-chain-testnet-1',
+    },
+    nilchain_json_rpc: {
+      name: 'NILLION_NILCHAIN_JSON_RPC',
+      value: 'http://rpc.testnet.nilchain-rpc-proxy.nilogy.xyz',
+    },
+    nilchain_rest_api: {
+      name: 'NILLION_NILCHAIN_REST_API',
+      value: 'http://api.testnet.nilchain-rpc-proxy.nilogy.xyz',
+    },
+    nilchain_grpc: {
+      name: 'NILLION_NILCHAIN_GRPC',
+      value: 'https://testnet-nillion-grpc.lavenderfive.com',
+    },
+  },
+};