Merge pull request #8 from ArinNigam/reactflow-change

Changes made to UI
tanish35 · Oct 2, 2024 · 927e1ea · 927e1ea
2 parents 46a270a + 278c3bd
commit 927e1ea
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/backend/package.json b/backend/package.json
@@ -12,7 +12,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@prisma/client": "^5.18.0",
+    "@prisma/client": "^5.20.0",
     "@solana/web3.js": "^1.95.3",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
@@ -28,10 +28,10 @@
     "json2csv": "^6.0.0-alpha.2",
     "nodemailer": "^6.9.14",
     "nodemon": "^3.1.4",
-    "prisma": "^5.18.0",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
+    "prisma": "^5.20.0",
     "typescript": "^5.5.4"
   }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -8,6 +8,7 @@ import ReactFlow, {
   Edge,
   applyNodeChanges,
   applyEdgeChanges,
+  useReactFlow,
 } from "reactflow";
 import "reactflow/dist/style.css";
 import "./App.css";
@@ -22,8 +23,8 @@ function App() {
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [nodes, setNodes] = useState<Node[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
-
-  useEffect(() => {
+  
+ useEffect(() => {
     const fetchTransactions = async () => {
       try {
         const { data } = await axios.post<Transaction[]>(
@@ -37,27 +38,33 @@ function App() {
         const newNodes: Node[] = [];
         const newEdges: Edge[] = [];
 
+        const centerX = 500; // Center X position
+        const centerY = 400; // Center Y position
+        const radius = 350; // Radius of the circle
+        const angleStep = (2 * Math.PI) / 5  // Angle step for each node
+
         data.forEach((transaction, index) => {
+          const angle = index * angleStep;
+          const xPos = centerX + radius * Math.cos(angle);
+          const yPos = centerY + radius * Math.sin(angle);
+
           if (!nodesSet.has(transaction.wallet_id)) {
             nodesSet.add(transaction.wallet_id);
             newNodes.push({
               id: transaction.wallet_id,
-              data: { label: transaction.wallet_id },
-              position: {
-                x: Math.random() * window.innerWidth,
-                y: Math.random() * window.innerHeight,
-              },
+              data: { label: transaction.wallet_id.length > 10 ? `${transaction.wallet_id.slice(0, 10)}...` : transaction.wallet_id },
+              position: { x: xPos, y: yPos },
+              style: { backgroundColor: "#ed043a", color: "#000", width: 150, height: 60, fontSize: 16 }, // Increased node size
             });
           }
+
           if (!nodesSet.has(transaction.destination_id)) {
             nodesSet.add(transaction.destination_id);
             newNodes.push({
               id: transaction.destination_id,
-              data: { label: transaction.destination_id },
-              position: {
-                x: Math.random() * window.innerWidth,
-                y: Math.random() * window.innerHeight,
-              },
+              data: { label: transaction.destination_id.length > 10 ? `${transaction.destination_id.slice(0, 10)}...` : transaction.destination_id },
+              position: { x: xPos, y: yPos },
+              style: { backgroundColor: "#00af11", color: "#fff", width: 150, height: 60, fontSize: 16 },
             });
           }
           newEdges.push({
@@ -66,6 +73,8 @@ function App() {
             target: transaction.destination_id,
             label: `${transaction.amount} SOL`,
             animated: true,
+            style: { stroke: '#72c2f7' },
+            labelStyle: { fontSize: 16, fontWeight: 'bold' }, // Increase font size and make it bold
           });
         });
 
@@ -78,6 +87,8 @@ function App() {
     fetchTransactions();
   }, []);
 
+
+
   const handleNodeChange = (changes: any) => {
     setNodes((nodes) => applyNodeChanges(changes, nodes));
   };

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #1e1e1e;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -36,29 +36,30 @@ h1 {
 }
 
 button {
+  background-color: #282c34;
+  color: #61dafb;
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
-  border-color: #646cff;
-}
+    border-color: #21a1f1;
+  }
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
+      color: #213547;
+      background-color: #f7f7f7;
+    }
   a:hover {
     color: #747bff;
   }