How to Create a Virtual Wallet for Storing Digital Assets in FlutterFlow

Create a wallets collection with fields: userId (String), balance (Number, default 0), currency (String, default 'USD'), lastUpdated (Timestamp), pinHash (String). Create a wallet_transactions collection with: walletId (String), type (String: 'deposit', 'withdrawal', 'transfer_sent', 'transfer_received', 'purchase'), amount (Number), description (String), counterpartyId (String, optional for transfers), timestamp (Timestamp), status (String: 'completed', 'pending', 'failed'). Add a Firestore index on wallet_transactions for walletId + timestamp descending. Create a wallet document automatically when a user signs up using a Cloud Function triggered on user creation.

Create a WalletPage with a Column. At the top, add a Container with a gradient background showing the balance in large headlineLarge Text (formatted as currency), currency label Text, and lastUpdated timestamp. Below, add a Row of three action button Containers: Add Funds (green, plus icon), Send (blue, send icon), Withdraw (orange, download icon). Below the actions, add a 'Recent Transactions' Text heading and a ListView with Backend Query on wallet_transactions filtered by walletId, ordered by timestamp descending, limited to 20. Each transaction row shows: a type-based Icon (colored: green for deposits, red for sent/withdrawn, blue for received), description Text, amount Text (green with + for incoming, red with - for outgoing), and timestamp.

On Add Funds tap, open an AddFundsSheet Bottom Sheet. Display preset amount Containers ($10, $25, $50, $100) and a custom amount TextField. On Confirm, call a Cloud Function createWalletDeposit that creates a Stripe Checkout Session (mode: 'payment') with the amount and user metadata, returning the session URL. Launch URL to open Stripe Checkout. Create a webhook Cloud Function for checkout.session.completed that reads the userId from metadata, finds their wallet, atomically increments the balance using FieldValue.increment(), and creates a wallet_transactions document with type 'deposit' and status 'completed'. This ensures the balance is only credited after confirmed payment.

1// Cloud Function: onDepositComplete (Stripe webhook)
2const admin = require('firebase-admin');
3const db = admin.firestore();
4
5exports.onDepositComplete = async (event) => {
6  const session = event.data.object;
7  const { userId } = session.metadata;
8  const amountCents = session.amount_total;
9
10  const walletSnap = await db.collection('wallets')
11    .where('userId', '==', userId).limit(1).get();
12  const walletRef = walletSnap.docs[0].ref;
13
14  const batch = db.batch();
15  batch.update(walletRef, {
16    balance: admin.firestore.FieldValue.increment(amountCents),
17    lastUpdated: admin.firestore.FieldValue.serverTimestamp(),
18  });
19  batch.create(db.collection('wallet_transactions').doc(), {
20    walletId: walletRef.id,
21    type: 'deposit',
22    amount: amountCents,
23    description: 'Added funds via card',
24    timestamp: admin.firestore.FieldValue.serverTimestamp(),
25    status: 'completed',
26  });
27  await batch.commit();
28};

On Send tap, open a SendMoneySheet Bottom Sheet. Add a TextField for recipient lookup (email or username) with a search action that queries the users collection and displays the matching user with avatar and name. Add an amount TextField and an optional note TextField. On Confirm, first verify the PIN (next step), then call a Cloud Function processTransfer that uses a Firestore transaction to: read sender wallet balance, verify sufficient funds, decrement sender balance, increment recipient balance, and create two wallet_transactions documents (transfer_sent and transfer_received). The Firestore transaction ensures atomicity: if any step fails, everything rolls back.

Create a PINVerification Component that appears as a Bottom Sheet before any financial action. It shows a Text ('Enter your PIN'), four dot indicators, and a number pad Grid. On first use, prompt the user to set a PIN via a SetPIN flow: enter PIN, confirm PIN, hash with SHA-256, store pinHash on the wallet document. On subsequent uses, hash the entered PIN and compare with the stored pinHash. On match, trigger a callback action (the financial operation). After 5 failed attempts, lock the wallet for 30 minutes by setting a lockedUntil Timestamp on the wallet document. Require PIN verification before Add Funds, Send, and Withdraw actions.

Enhance the transaction ListView with filtering. Add a Row above the list with ChoiceChips for transaction types: All, Deposits, Sent, Received, Purchases. Filter the Backend Query based on the selected type. Add a DateTimePicker for date range filtering. Tap a transaction row to navigate to a TransactionDetailPage showing: type with colored icon, amount (large), description, counterparty name (for transfers), timestamp, and status badge. For pending transactions, show a status indicator. Add a search TextField above the list for searching transactions by description.