Skip to content

Flowchart

Bitrequest edited this page Jul 17, 2025 · 3 revisions

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, & Local Storage Data"]
B --> C["Initialize JS Libraries, Crypto Utils, & jQuery"]
C --> D["User Authentication / Pinlock Check"]
D --> E["Initialize Core Modules & Dashboard UI"]

%% Core Modules Setup
E --> F["Currency/Address Management Module"]
E --> G["Payment Processing Module"]
E --> H["Blockchain Payment Monitoring Module"]
E --> I["Socket & Polling Module"]
E --> J["Settings Module"]

%% Settings Flow (Configurable Options)
J --> K["Set Confirmations, API Keys, RPC Nodes, Fiat Currency, Pincode, Permissions (Admin/Cashier Mode)"]
K --> E

%% Currency/Address Management Flow
F --> L["Add/Manage Addresses: Manual Entry, QR Scan, Bip39/Xpub Derivation, Arrange Priority"]
L --> M["Save to Local Storage"]
M --> N["Update Dashboard: Currencies Section"]
N --> O["User Ready for Request Creation?"]
O -- Yes --> P
O -- No --> AA

%% Payment Request Creation Flow (Expanded)
G --> P["User Initiates Payment Request Creation (POS or Share)"]
P --> Q["Select Currency & Address"]
Q --> R["Input Amount in Fiat/Crypto + Metadata (Title, Description)"]
R --> S["Real-Time Fiat-to-Crypto Conversion via Cached Exchange Rates (CoinGecko/etc.)"]
S --> T["Generate URI & QR Code (Supports Lightning Bolt11/LNURL, NFC/Boltcard)"]
T --> U["Share Request: Device Share Dialog, URL Shortening, or Display for POS"]
U --> V["Save Request to Local Storage (Incoming/Outgoing/Local)"]
V --> W["Scan for Open Requests in Dashboard: Requests Section"]

%% Fetching Transaction Data (Monitoring Flow)
H --> X["Open WebSocket/Polling When QR Visible or Request Active"]
X --> Y["Monitor Address via Coin-Specific APIs/Nodes (e.g., Blockcypher/Electrum for BTC, Infura/Etherscan for ETH, Lightning Nodes)"]
W --> Z["Retrieve Next Open Request"]
Z --> Y
Y --> AB["Fetch Transaction Data & Historical Exchange Rates"]

%% Processing Transaction Data
AB --> AC["Display Transaction Info in Request Dialog"]
AC --> AD["Match Transaction with Request: Compare Crypto Amounts & Fiat Equivalent (Adjust for Volatility)"]
AD --> AE["Check Confirmations (User-Set Threshold, e.g., 0 for Small Payments)"]

%% Decision & Outcome
AE -- "Match & Confirmed" --> AF["Mark Transaction as Paid/Complete"]
AE -- "Pending Confirmations" --> AG["Mark as Pending & Continue Monitoring"]
AE -- "No Match" --> AH["Error/No Match: Continue Scanning or Notify User"]
AF --> AI["Update UI with Status: Requests Section (Instant Feedback via WebSockets)"]
AG --> AI
AH --> W
AI --> AJ["Generate Receipt (PDF/CSV Export), Archive Request if Complete"]
AJ --> AK["Update Dashboard: Archive Section"]

%% End or Repeat
AK --> AL["Check for Additional Requests or User Actions"]
AL -- Yes --> W
AL -- No --> AA["Idle / Await New Request or User Action (e.g., View Details, Backup JSON, Team Invite)"]
AA --> P
AA --> L
AA --> K
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.

Clone this wiki locally