Send Transaction form

src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js

@@ -0,0 +1,94 @@
+import React, { useContext, useState } from 'react';
+import { FontVarTitle } from '../../../../../Shared/Title';
+import { Icon } from '../../../../../Shared/Icon';
+import { transactionsIcon } from '../../../../../../Resources/Icons';
+import { ThemeContext } from '../../../../../../Context/theme';
+import { ReplicaButton } from '../../../../../Shared/Buttons';
+
+const Form = () => {
+    const { theme } = useContext(ThemeContext);
+
+    const [formData, setFormData] = useState({
+        formKey: '',
+        value: ''
+    });
+
+    const handleChange = (e) => {
+        setFormData({
+            ...formData,
+            [e.target.name]: e.target.value
+        });
+    };
+
+    const submitGet = () => {
+        // ! CALL GET API HERE 
+        console.log('GET', formData.formKey);
+        setFormData({
+            formKey: '',
+            value: ''
+        });
+    };
+
+    const submitCommit = () => {
+        // ! CALL COMMIT API HERE 
+        console.log('COMMIT', formData);
+        setFormData({
+            formKey: '',
+            value: ''
+        });
+    };
+
+    return (
+        <div className='mt-2 rounded-md w-550p py-4 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col gap-y-6 bg-blue-10 dark:bg-blue-450'>
+            <div className="flex items-center justify-center gap-x-2">
+                <Icon
+                    fill={theme ? "rgb(209,213,219)" : "black"}
+                    height={'1em'}
+                    path={transactionsIcon}
+                    viewBox={'0 0 448 512'}
+                />
+                <FontVarTitle title={'Send Transaction'} />
+            </div>
+            <div className="flex flex-col gap-y-2">
+                <FontVarTitle title={'Key'} fontClass={'text-15p'} />
+                <div className='px-8'>
+                    <input
+                        type="text"
+                        id="formKey-input"
+                        className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                        value={formData.formKey}
+                        name='formKey'
+                        onChange={handleChange}
+                    />
+                </div>
+            </div>
+            <div className="flex flex-col gap-y-2">
+                <FontVarTitle title={'Value'} fontClass={'text-15p'} />
+                <div className='px-8'>
+                    <input
+                        type="text"
+                        id="value-input"
+                        className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                        value={formData.value}
+                        name='value'
+                        onChange={handleChange}
+                    />
+                </div>
+            </div>
+            <div className="flex items-center justify-center gap-x-8 my-1">
+                <ReplicaButton
+                    title={'Get'}
+                    onClick={submitGet}
+                    faulty={false}
+                />
+                <ReplicaButton
+                    title={'Commit'}
+                    onClick={submitCommit}
+                    faulty={false}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Form;

src/Components/Pages/Visualizer/Graphs/MVT/index.js

@@ -4,6 +4,7 @@ import { mvtGraphComputation } from "../../Ancilliary/Computation/MVT";
 import ResizableContainer from "../Components/GraphContainer";
 import MvtGraph from "./Components/Graph";
 import Manipulator from "./Components/Manipulator";
+import Form from "./Components/Form";
 
 const LABEL_TOGGLES = { "Replica 1": true, "Replica 2": true, "Replica 3": true, "Replica 4": true };
 const FAULT_TOGGLES = { "Replica 1": false, "Replica 2": false, "Replica 3": false, "Replica 4": false };
@@ -123,7 +124,8 @@ const Mvt = () => {
                     </div>
                 </ResizableContainer>
             </div>
-            <div className='mt-12 mb-4 flex items-center justify-center'>
+            <div className='mt-12 mb-4 flex items-center justify-center gap-x-16'>
+                <Form />
                 <Manipulator
                     toggleFaulty={toggleFaulty}
                     toggleLine={toggleLine}

src/Components/Pages/Visualizer/TransComps/Components/AnalyticsItem.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useContext } from 'react'
-import { transactionsIcon } from '../../../../../Resources/Icons';
+import { linearGraphIcon, transactionsIcon } from '../../../../../Resources/Icons';
 import { FontVarTitle } from '../../../../Shared/Title';
 import { ThemeContext } from '../../../../../Context/theme';
 import { VizDataHistoryContext } from '../../../../../Context/visualizer';
@@ -30,11 +30,11 @@ const Analytics = () => {
           <Icon
             fill={theme ? "rgb(209,213,219)" : "black"}
             height={'1em'}
-            path={transactionsIcon}
+            path={linearGraphIcon}
             viewBox={'0 0 448 512'}
           />
         </div>
-        <FontVarTitle title={' Analytics'} />
+        <FontVarTitle title={'Analytics'} />
       </div>
       <div className="grid grid-rows-2 h-full w-full">
         <div className="flex items-center justify-center w-full border-b-2p border-solid border-gray-700 dark:border-gray-50">

src/Context/visualizer.js

@@ -156,7 +156,7 @@ export const VizDataHistoryProvider = ({ children }) => {
         };
 
         updateStatus();
-        const interval = setInterval(updateStatus, 3000);
+        const interval = setInterval(updateStatus, 20000);
 
         return () => clearInterval(interval);
     }, []);