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, & 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.