Reactflow Graph - AutoScaling when loaded

[ArinNigam]

Description:

We need to enhance the existing React Flow graph visualization to better track and display user transactions on the Solana blockchain. The goal is to provide a clear and intuitive way to represent payments sent and received between users, offering insights into the flow of funds between different wallets/contracts.

Auto-Scaling and Positioning:

• Ensure the graph auto-scales and centers when loaded, displaying all users and transactions clearly, regardless of the number of users or transactions.

Some changes that can be made

1. Introduce a Balanced or Hybrid Node Color:
   Create a third color (e.g., yellow or blue) to represent users who both send and receive payments.

• Red: Primarily a sender (sends more than they receive).
• Green: Primarily a receiver (receives more than they send).
• Yellow/Blue: Balanced or hybrid, where the user both sends and receives a similar amount of transactions.

2. Transaction Volume-Based Coloration:
   Instead of a binary classification (either red or green), calculate the transaction volume ratio of sent to received payments and adjust the color of the node accordingly:
   Example:

• If the user sends more than 70% of their total transactions, they remain red.
• If they receive more than 70%, they are green.
• If the sent/received ratio is roughly balanced (within a 30-70% range), the node can be marked yellow.