How ventee-app/ventee-mobile works
Ventee transfers selected device contacts through a proxy WebSocket server. In sharing, the app loads contacts, lets the user select them, displays a QR code for the connection, sends the selected contacts after a peer requests them, and shows completion. Receiving scans that code, requests the transfer, lets the user review contacts, and saves them to the device. The graph also shows navigation, shared connection state, and the contact-list UI. Some connection-hook internals and the scanner implementation were not excerpted, so uncertain links are omitted.
Main entry points: ShareContacts.tsx Share workflow · ReceiveContacts.tsx Receive workflow · index.tsx Screen navigation · ContactsList.tsx Contact selector
Components 20
App shell
- App entry
App.tsx - Screen navigation
navigation/index.tsx - About screen
screens/About/About.tsx
Contact sharing
- Share workflow
screens/ShareContacts/ShareContacts.tsx - Connection QR
screens/ShareContacts/components/QRCode.tsx - Empty state
screens/ShareContacts/components/EmptyList.tsx
Contact receiving
- Receive workflow
screens/ReceiveContacts/ReceiveContacts.tsx - QR scanner
screens/ReceiveContacts/components/Scanner.tsx
Shared runtime
- Contact selector
components/ContactsList/ContactsList.tsx - Contact row
components/ContactsList/components/Contact.tsx - Search input
components/Input/Input.tsx - Completion view
components/ActionComplete/ActionComplete.tsx - Action button
components/BigButton/BigButton.tsx - Loading indicator
components/Spinner/Spinner.tsx - WebSocket hook
hooks/use-websockets.ts - Connection state
store/index.ts - Transfer data types
types/data-models.ts
Other components
- Device user
- Proxy WebSocket server
- Device contacts
Connections 26
- Device user → Screen navigation: selects screen
navigation/index.tsx - App entry → Connection state: provides state
App.tsx - App entry → Screen navigation: renders
App.tsx - Screen navigation → Share workflow: routes to
navigation/index.tsx - Screen navigation → Receive workflow: routes to
navigation/index.tsx - Screen navigation → About screen: routes to
navigation/index.tsx - Share workflow → WebSocket hook: uses connection
screens/ShareContacts/ShareContacts.tsx - Receive workflow → WebSocket hook: uses connection
screens/ReceiveContacts/ReceiveContacts.tsx - WebSocket hook → Proxy WebSocket server: connects through
- WebSocket hook → Connection state: uses actions
hooks/use-websockets.ts - Share workflow → Device contacts: loads contacts
screens/ShareContacts/ShareContacts.tsx - Share workflow → Contact selector: renders selection
screens/ShareContacts/ShareContacts.tsx - Share workflow → Connection QR: shows connection
screens/ShareContacts/ShareContacts.tsx - Share workflow → Empty state: shows when empty
screens/ShareContacts/ShareContacts.tsx - Share workflow → Completion view: shows result
screens/ShareContacts/ShareContacts.tsx - Share workflow → Loading indicator: shows while loading
screens/ShareContacts/ShareContacts.tsx - Share workflow → Proxy WebSocket server: sends selected contacts
- Receive workflow → QR scanner: renders scanner
screens/ReceiveContacts/ReceiveContacts.tsx - Receive workflow → Action button: starts scanning
screens/ReceiveContacts/ReceiveContacts.tsx - Receive workflow → Contact selector: reviews received contacts
screens/ReceiveContacts/ReceiveContacts.tsx - Receive workflow → Completion view: shows saved result
screens/ReceiveContacts/ReceiveContacts.tsx - Receive workflow → Loading indicator: shows while loading
screens/ReceiveContacts/ReceiveContacts.tsx - Receive workflow → Proxy WebSocket server: requests contacts
screens/ReceiveContacts/ReceiveContacts.tsx - Receive workflow → Device contacts: saves contacts
screens/ReceiveContacts/ReceiveContacts.tsx - Contact selector → Contact row: renders rows
components/ContactsList/ContactsList.tsx - Contact selector → Search input: renders search
components/ContactsList/ContactsList.tsx