Flowchart

Web Application Flowchart

This is the flowchart of the web application, excluding the Google token/OAuth functionality. It focuses on the blockchain payment monitoring, transaction matching, and real-time updates.

flowchart TD
    %% Application Initialization
    A[Index.html Loaded] --> B[Load Config, Assets, & Language Files]
    B --> C[Initialize JS Libraries & Crypto Utils]
    C --> D[Initialize Core Modules]
    
    %% Core Modules Setup
    D --> E[Payment Processing Module]
    D --> F[Blockchain Payment Monitoring Module]
    D --> G[Socket & Polling Module]

    %% Payment Request Flow
    E --> H[User Submits/Initiates Payment Request]
    H --> I[Scan for Payment Requests]
    I --> J[Retrieve Next Open Request]

    %% Fetching Transaction Data
    J --> M[Fetch Transaction Data via API/RPC]

    %% Processing Transaction Data
    M --> N[Display Transaction Info]
    N --> O[Match Transaction with Request]
    O --> P[Compare Amounts]

    %% Decision & Outcome
    P -- Match --> Q[Mark Transaction as Complete]
    P -- No Match --> R[Continue Scanning / Wait]
    Q --> S[Update UI with Transaction Status]
    R --> I

    %% End or Repeat
    S --> T[Check for Additional Requests]
    T -- Yes --> I
    T -- No --> U[Idle / Await New Request]

Loading

---

Explanation:

1. Initialization:

   • The app begins by loading the index.html file, followed by configuration, assets, and language files.
   • It then initializes the necessary JS libraries and crypto utilities.

2. Core Modules:

   • The core modules for payment processing, blockchain monitoring, and socket/polling are initialized.

3. Payment Request Flow:

   • The user submits a payment request, triggering the system to scan for open requests and retrieve the next available one.

4. Transaction Data Retrieval:

   • Transaction data is fetched via an API or RPC to process the request.

5. Processing Transaction:

   • The app displays transaction information, matches it with the request, and compares amounts.

6. Transaction Outcome:

   • If the amounts match, the transaction is completed and the UI is updated. If not, the system continues scanning.

7. Cycle or Idle:

   • The system checks for more requests. If there are none, it waits for new requests.

---

This flowchart helps visualize the core workflow of the web application, optimized for transaction processing and blockchain monitoring.