Skip to content

USER_FLOWS.md

Latest commit

 

History

History
410 lines (392 loc) · 38.7 KB

USER_FLOWS.md

File metadata and controls

410 lines (392 loc) · 38.7 KB
Raw

User Flow Diagrams

1. First-Time User Flow (Happy Path)

┌─────────────────────────────────────────────────────────────────┐
│                         User Lands on App                        │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                  Sees "Connect Wallet" Button                    │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Clicks "Connect Wallet"                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              Wallet Connection Modal Opens                       │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │  Choose a wallet to connect:                             │  │
│  │  ┌────────────────────────────────────────────────────┐  │  │
│  │  │  🚀 Freighter                                       │  │  │
│  │  │  Browser extension wallet for Stellar              │  │  │
│  │  └────────────────────────────────────────────────────┘  │  │
│  │  ┌────────────────────────────────────────────────────┐  │  │
│  │  │  ⭐ Albedo                                          │  │  │
│  │  │  Web-based Stellar wallet                          │  │  │
│  │  └────────────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   User Selects Freighter                         │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              Loading State (Spinner Shows)                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│          Freighter Extension Prompts for Approval                │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                    User Approves Connection                      │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Success State Shows                         │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │              ✓ Wallet Connected!                         │  │
│  │        You're all set to start using Creditra            │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Modal Auto-Closes (1.5s)                      │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Onboarding Flow Starts                         │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │              👋 Welcome to Creditra                      │  │
│  │   Your adaptive credit protocol on Stellar blockchain    │  │
│  │                                                           │  │
│  │              ● ○ ○                [Skip]                 │  │
│  │                                                           │  │
│  │                    [Next]                                │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Step 2: Credit Evaluation                   │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │              📊 Credit Evaluation                        │  │
│  │   We analyze your on-chain activity to determine your    │  │
│  │          credit limit and terms                          │  │
│  │                                                           │  │
│  │              ● ● ○                [Skip]                 │  │
│  │                                                           │  │
│  │                    [Next]                                │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Step 3: Flexible Credit Lines                  │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │              💳 Flexible Credit Lines                    │  │
│  │   Draw and repay credit as needed with dynamic interest  │  │
│  │          rates based on your risk profile                │  │
│  │                                                           │  │
│  │              ● ● ●                [Skip]                 │  │
│  │                                                           │  │
│  │                 [Get Started]                            │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Onboarding Complete                           │
│              User Sees Dashboard with Connected Wallet           │
│                Header Shows: GXXX...XXXX ▼                       │
└─────────────────────────────────────────────────────────────────┘

2. Returning User Flow

┌─────────────────────────────────────────────────────────────────┐
│                         User Lands on App                        │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              App Checks localStorage for wallet_info             │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                  Wallet Info Found - Auto Connect                │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              Header Shows: GXXX...XXXX ▼                         │
│              (No onboarding shown)                               │
└─────────────────────────────────────────────────────────────────┘

3. Error Flow - Wallet Not Found

┌─────────────────────────────────────────────────────────────────┐
│                   User Clicks "Connect Wallet"                   │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   User Selects Freighter                         │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              System Detects Freighter Not Installed              │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Error State Shows                           │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │  ⚠ Connection Failed                                     │  │
│  │  Freighter wallet not found. Please install the          │  │
│  │  extension.                                              │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│          User Can Try Another Wallet or Close Modal              │
└─────────────────────────────────────────────────────────────────┘

4. Error Flow - Connection Rejected

┌─────────────────────────────────────────────────────────────────┐
│                   User Selects Freighter                         │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│          Freighter Extension Prompts for Approval                │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                    User Rejects Connection                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Error State Shows                           │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │  ⚠ Connection Failed                                     │  │
│  │  Failed to connect wallet. Please try again.            │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                    User Can Retry or Close                       │
└─────────────────────────────────────────────────────────────────┘

5. Error Flow - Wrong Network

┌─────────────────────────────────────────────────────────────────┐
│                   User Approves Connection                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│          System Detects Wallet on Non-Stellar Network            │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Error State Shows                           │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │  ⚠ Connection Failed                                     │  │
│  │  Please switch to Stellar network in your wallet.       │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│          User Switches Network in Wallet and Retries             │
└─────────────────────────────────────────────────────────────────┘

6. Disconnect Flow

┌─────────────────────────────────────────────────────────────────┐
│              User Clicks Connected Wallet Button                 │
│                    (GXXX...XXXX ▼)                              │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Dropdown Menu Opens                         │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │  Wallet: freighter                                       │  │
│  │  Network: PUBLIC                                         │  │
│  │  ┌────────────────────────────────────────────────────┐  │  │
│  │  │              Disconnect                            │  │  │
│  │  └────────────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   User Clicks "Disconnect"                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              Wallet Disconnected, localStorage Cleared           │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│              Header Shows "Connect Wallet" Button                │
└─────────────────────────────────────────────────────────────────┘

Component State Diagram

WalletButton States:
┌──────────────┐
│ Disconnected │ ──────────────┐
└──────────────┘               │
       │                       │
       │ Click                 │
       ▼                       │
┌──────────────┐               │
│ Modal Open   │               │
└──────────────┘               │
       │                       │
       │ Select Wallet         │
       ▼                       │
┌──────────────┐               │
│ Connecting   │ ──Error──────┤
└──────────────┘               │
       │                       │
       │ Success               │
       ▼                       │
┌──────────────┐               │
│  Connected   │               │
└──────────────┘               │
       │                       │
       │ Disconnect            │
       └───────────────────────┘

7. Repayment Flow (Happy Path)

┌─────────────────────────────────────────────────────────────────┐
│               User Views Active Credit Line Details             │
│        (Shows Utilized Amount, Available Limit, APR)            │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                 Clicks "Make Repayment" Button                  │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Repayment Modal Opens (Step 1)                │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  Current Debt: $2,500.00                                 │   │
│  │  Accrued Interest: $15.50                                │   │
│  │  Total Due: $2,515.50                                    │   │
│  │                                                          │   │
│  │  [ 25% ] [ 50% ] [ 75% ] [ 100% ]                        │   │
│  │                                                          │   │
│  │  Amount to Repay:                                        │   │
│  │  [ $               ]                                     │   │
│  │                                                          │   │
│  │  Preview:                                                │   │
│  │  Remaining Debt: $---                                    │   │
│  │  New Utilization: --%                                    │   │
│  │                                                          │   │
│  │                     [Review Repayment]                   │   │
│  └──────────────────────────────────────────────────────────┘   │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│            User Selects 50% or Enters Valid Amount              │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Repayment Modal Updates                       │
│  Preview section shows Remaining Debt and New Utilization       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                 Clicks "Review Repayment"                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Confirmation Step (Step 2)                    │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  Review Details                                          │   │
│  │  Repayment Amount: $1,257.75                             │   │
│  │  Remaining Debt: $1,257.75                               │   │
│  │                                                          │   │
│  │  Wallet Balance Check: Sufficient                        │   │
│  │                                                          │   │
│  │  [Back]               [Confirm Repayment]                │   │
│  └──────────────────────────────────────────────────────────┘   │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                 Clicks "Confirm Repayment"                      │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                 Pending State (Simulated)                       │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  ⟳ Processing Repayment...                               │   │
│  │  Please confirm the transaction in your wallet if        │   │
│  │  prompted.                                               │   │
│  └──────────────────────────────────────────────────────────┘   │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Success Confirm State                         │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │  ✓ Repayment Successful!                                 │   │
│  │  You repaid $1,257.75                                    │   │
│  │  Remaining Debt: $1,257.75                               │   │
│  │                                                          │   │
│  │                     [Close]                              │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

8. Repayment Validation Error

┌─────────────────────────────────────────────────────────────────┐
│                   Repayment Modal (Step 1)                      │
│                User Enters Amount > Total Due                   │
│             OR Amount > Available Wallet Balance                │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                     Error Indicators Show                       │
│  - Input border turns Red                                       │
│  - "Amount exceeds total due" or "Insufficient balance"         │
│  - [Review Repayment] button becomes Disabled                   │
└─────────────────────────────────────────────────────────────────┘