# rasathelamedude/vaultpay architecture

> Architecture diagram of the GitHub repository rasathelamedude/vaultpay, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rasathelamedude/vaultpay
- Repository: https://github.com/rasathelamedude/vaultpay

## Overview

VaultPay is a local-chain ERC-20 escrow dApp. A payer connects a wallet, obtains mock tUSD, approves VaultPay, and creates a payment with a recipient and deadline; the recipient can claim it, or the payer can cancel after expiry. The React app also displays wallet and transaction status, while the contracts enforce token and escrow operations. The README documents these capabilities; contract implementation details beyond the supplied excerpts are represented only where documented.

Main entry points: [`frontend/src/App.tsx`](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/App.tsx) (Payment UI), [`contracts/MockTUSD.sol`](https://github.com/rasathelamedude/vaultpay/blob/main/contracts/MockTUSD.sol) (Mock tUSD), [`frontend/src/wagmi.ts`](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/wagmi.ts) (Wallet config), [`contracts/VaultPay.sol`](https://github.com/rasathelamedude/vaultpay/blob/main/contracts/VaultPay.sol) (VaultPay escrow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web application"]
  node_browser["Browser app<br/>[main.tsx]"]
  node_app["Payment UI<br/>[App.tsx]"]
  node_wallet_config["Wallet config<br/>[wagmi.ts]"]
  node_addresses["Contract addresses<br/>[config.ts]"]
  node_abis["Contract ABIs<br/>[abis.ts]"]
end

subgraph group_contracts["Escrow contracts"]
  node_vault["VaultPay escrow<br/>[VaultPay.sol]"]
  node_token["Mock tUSD<br/>[MockTUSD.sol]"]
end

subgraph group_chain["Local blockchain"]
  node_local_chain["Hardhat local EVM"]
end

node_payer(("Payer"))
node_recipient(("Recipient"))
node_wallet["Injected wallet"]

node_payer -->|"uses"| node_app
node_recipient -->|"uses"| node_app
node_browser -->|"renders"| node_app
node_browser -->|"provides config"| node_wallet_config
node_app -->|"reads addresses"| node_addresses
node_app -->|"uses interfaces"| node_abis
node_app -->|"connects and signs"| node_wallet
node_wallet_config -->|"configures connectors"| node_wallet
node_wallet_config -->|"sends RPC"| node_local_chain
node_app -->|"reads balance and allowance"| node_token
node_app -->|"requests faucet and approval"| node_token
node_app -->|"creates, claims, cancels"| node_vault
node_vault -->|"escrows and transfers"| node_token
node_token -->|"executes on"| node_local_chain
node_vault -->|"executes on"| node_local_chain

click node_browser "https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/main.tsx"
click node_app "https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/App.tsx"
click node_wallet_config "https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/wagmi.ts"
click node_addresses "https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/config.ts"
click node_abis "https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/abis.ts"
click node_vault "https://github.com/rasathelamedude/vaultpay/blob/main/contracts/VaultPay.sol"
click node_token "https://github.com/rasathelamedude/vaultpay/blob/main/contracts/MockTUSD.sol"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_browser,node_app,node_wallet_config,node_addresses,node_abis toneBlue
class node_vault,node_token toneAmber
class node_local_chain toneMint
class node_payer,node_recipient,node_wallet toneIndigo
```

## Components

### Web application

- [Browser app](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/main.tsx): `frontend/src/main.tsx`
- [Payment UI](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Wallet config](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/wagmi.ts): `frontend/src/wagmi.ts`
- [Contract addresses](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/config.ts): `frontend/src/config.ts`
- [Contract ABIs](https://github.com/rasathelamedude/vaultpay/blob/main/frontend/src/abis.ts): `frontend/src/abis.ts`

### Escrow contracts

- [VaultPay escrow](https://github.com/rasathelamedude/vaultpay/blob/main/contracts/VaultPay.sol): `contracts/VaultPay.sol`
- [Mock tUSD](https://github.com/rasathelamedude/vaultpay/blob/main/contracts/MockTUSD.sol): `contracts/MockTUSD.sol`

### Local blockchain

- **Hardhat local EVM**

### Other components

- **Payer**
- **Recipient**
- **Injected wallet**

## Connections

- Payer → Payment UI: uses
- Recipient → Payment UI: uses
- Browser app → Payment UI: renders
- Browser app → Wallet config: provides config
- Payment UI → Contract addresses: reads addresses
- Payment UI → Contract ABIs: uses interfaces
- Payment UI → Injected wallet: connects and signs
- Wallet config → Injected wallet: configures connectors
- Wallet config → Hardhat local EVM: sends RPC
- Payment UI → Mock tUSD: reads balance and allowance
- Payment UI → Mock tUSD: requests faucet and approval
- Payment UI → VaultPay escrow: creates, claims, cancels
- VaultPay escrow → Mock tUSD: escrows and transfers
- Mock tUSD → Hardhat local EVM: executes on
- VaultPay escrow → Hardhat local EVM: executes on