Remix

Make your own version of Digital Wallet

Get an exact, working copy in your account, then change anything with chat.

Original by keeyahsmith209

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Build and enhance a complete, production-grade digital banking and e-wallet platform inspired by Skrill, engineered with React, Tailwind CSS, TanStack, and Lovable Cloud backend (Auth, Database, Storage, RPCs).

======================================================================
1. BRAND IDENTITY, DESIGN SYSTEM & SCREEN LAYOUT
======================================================================
- Visual Palette: Signature Skrill deep plum and burgundy (#811e4f, #66103a, #4a0d2a), paired with warm dark neutrals, crisp white accents, and subtle glass borders.
- Typography: Bricolage Grotesque for numeric balances, headlines, and card numbers; Manrope for body copy, labels, and receipts.
- Screen Background Watermark: Embed a soft, semi-transparent oversized "skrill" typographic watermark spanning across the lower background of the inner screens.
- Navigation Shell: Mobile-first responsive app shell with persistent bottom navigation (Home, Activity, Send/Transfer, Cards, Profile) plus a dedicated Admin Hub link for staff accounts.
- Dashboard Balance Formatting: The main wallet balance on the dashboard must be fully visible and contained (using fluid typography text-2xl sm:text-3xl md:text-4xl, whitespace-nowrap, with currency tags positioned on their own row) so large amounts never wrap, break, or truncate.

======================================================================
2. USER ONBOARDING, AUTHENTICATION & SECURITY
======================================================================
- Multi-Method Auth: Email/Password sign-up and login, along with Google and Lovable social sign-in.
- 6-Digit Email OTP Verification: Require users to enter a 6-digit confirmation code sent to their registered email before their account is activated.
- Strong Password Validation: Enforce strict password rules (minimum 8 characters, at least one uppercase letter, one number, and one special character) with real-time feedback.
- Starting Balance Policy: All newly registered accounts strictly start at $0.00 balance (no welcome balance bonus).
- Role-Based Access Control (RBAC): Dedicated user_roles table with 'admin' and 'user' roles. The first registered user automatically receives the 'admin' role.

======================================================================
3. WALLETS, LEDGERS & DATABASE ARCHITECTURE
======================================================================
- Skrill Account Number: Every wallet is assigned a unique, uppercase account code formatted as "SKR" + 6 characters (e.g. SKR0WHU9A), labeled app-wide exclusively as "Skrill Account Number" (never "Customer ID").
- Recipient Search & Transfer: Transfers and lookups accept either the recipient's Skrill Account Number (SKR...) or their registered Skrill Email.
- Transfer PIN Authorization: 4–6 digit hashed security PIN required to authorize all outgoing transfers and withdrawals. Users can set their own PIN in Security settings.
- Immutable Transactions Ledger:
  - Records sender, recipient, type (transfer, deposit, withdrawal, fee), amount, currency (USD), reference code, status (completed, pending, failed), and description note.
- Security-Definer RPC Functions:
  - transfer_funds (atomic balance check, PIN validation, debit and credit transaction recording).
  - request_withdrawal (validates balance and places funds into withdrawal hold).
  - lookup_recipient (finds users by Skrill Account Number or registered email).
  - set_own_pin, admin_set_pin, admin_credit_wallet, admin_review_withdrawal, admin_list_support, and admin_resolve_support.

======================================================================
4. CORE CUSTOMER SCREENS & FEATURES
======================================================================
- Dashboard (/):
  - Top bar with profile avatar and an Announcement / Notification Bell (📣 / 🔔) with unread indicator badge opening an in-app alerts drawer.
  - Quick Actions Bar: Styled squircle buttons for Add, Receive, Transfer, Withdraw, and More.
  - Available Balance Card: Fluid-sized balance display with currency indicator.
  - Crypto Portfolio Section: "PORTFOLIO: Crypto balance" card displaying holdings, USD values, and 24h percentage gain/loss (+/-) for Bitcoin (BTC), Ethereum (ETH), Solana (SOL), BNB, and Tether (USDT), with quick convert/trade actions.
  - Overview: Recent transaction feed with a "View all >" link routing to full Activity history.
- Activity (/activity):
  - Chronological transaction feed with filter tabs (All, In, Out), search, and tap-to-view interaction on any row.
- Send Money (/transfer):
  - Recipient lookup by Skrill Account Number or Email.
  - Amount input with real-time balance checks and optional note.
  - Inline "Request a PIN" trigger if the user does not have an active PIN.
  - Security PIN confirmation modal before submission.
- "Money Sent" Confirmation Screen:
  - Soft circular checkmark badge with plum check icon (✓).
  - Bold "Money sent" headline.
  - Format: "$[amount] sent to [recipient email or account number]".
  - Solid plum/burgundy "Done" button returning to Dashboard.
  - "View Receipt" button to immediately open the full official receipt.
- Receive Money (/receive):
  - Displays user's full name, Skrill Account Number with one-tap copy, and shareable QR code.
- Withdraw (/withdraw):
  - Payout methods (Bank Wire, Crypto/USDT, Card), amount entry, pending status tracker, and inline PIN request link.
- Virtual Debit Cards (/cards):
  - Digital card visual preview featuring a subtle semi-transparent "skrill" brand watermark across the card background.
  - Cardholder name, masked number, expiry, CVV flip toggle, and freeze/unfreeze controls.
- Profile & Security (/profile):
  - User details, Skrill Account Number, password updates, Set / Change Transfer PIN modal, and sign out.

======================================================================
5. PERSISTENT DIGITAL RECEIPTS & PEER-TO-PEER CHAT
======================================================================
- Persistent Receipt Access: An official receipt is presented immediately after completing a payment, and can be reopened anytime by tapping that transaction row in the Dashboard or Activity history.
- Receipt Details Displayed:
  - Sender: Full Name and Skrill Account Number (SKR...).
  - Recipient: Full Name and Skrill Account Number / registered email.
  - Payment Details: Amount, status badge, transaction reference number with one-tap copy, exact timestamp, fee ($0.00), and note.
  - Actions: "Copy Receipt Summary" button to share or export.
- Native Sender-to-Receiver Transaction Chat:
  - On any completed transfer receipt, provide a "Chat with Recipient" / "Chat with Sender" button.
  - Opens a private in-app message thread tied to that transaction reference where the receiver can communicate directly with the sender regarding clearance, payment details, or confirmations.

======================================================================
6. AUTOMATED EMAIL NOTIFICATIONS (VIA RESEND)
======================================================================
- Automated Email Delivery: Integrated with Resend using project secret RESEND_API_KEY.
- Reply-To Address: All outgoing system emails have reply_to set to skrill.notifications.support2646@gmail.com.
- Instant Credit Alert: Sent automatically to the recipient when money is transferred to them or credited by admin, displaying sender name, Skrill Account Number, amount, reference code, and date.
- Instant Debit Alert: Sent to the sender immediately upon transferring funds or initiating a withdrawal.
- Withdrawal Status Alerts: Automated emails sent when a withdrawal is submitted and when it is reviewed or approved.

======================================================================
7. IN-APP SUPPORT & SMARTSUPP LIVE CHAT INTEGRATION
======================================================================
- Persistent Help Trigger: Floating or header "Help & Support" button accessible across all customer screens.
- In-App Support Modal: Allows users to submit tickets (PIN request, deposit/withdrawal inquiries, general support) and track ticket status.
- Smartsupp Live Chat Integration:
  - Widget URL: https://widget-page.smartsupp.com/widget/cd882142c3271534b900594adc08694dcef34c5a?ss-chat-settings
  - In-App Drawer: Opens directly inside the app as a slide-out drawer with a branded "Skrill Live Support" header and close button (no external tab redirects).
  - Access Control:
    - Admins always have access to the live chat widget directly in /admin and their support menu.
    - Admin can enable or disable live chat access for specific users from the Admin Hub via an "Enable Live Chat" toggle. Only enabled users see the live chat button; regular users see the standard ticket form.

======================================================================
8. ADMIN HUB (/admin) & CUSTOM BILLING CLEARANCE GENERATOR
======================================================================
- Restricted exclusively to authenticated users with the 'admin' role.
- Customer Management: Search wallets by name, email, or Skrill Account Number; view balances and PIN status; manual credit/debit adjustments with audit logging.
- Withdrawals Manager: Review, approve, or reject customer payout requests.
- Support & Clearance Tab:
  - Displays open tickets with user name, email, Skrill Account Number, and PIN status.
  - Custom Billing & Clearance Invoice Generator:
    - Admin inputs a custom fee amount (e.g. $100, $250, etc.).
    - Flexible Settlement Instructions Toggle:
      - Option 1 ("Contact Sender"): Generates invoice copy stating: "To complete clearance and release your pending funds / Transfer PIN, please contact the sender directly on how to pay the required clearance fee."
      - Option 2 ("Direct Payment Channel"): Displays admin's saved payment details (USDT wallet address / bank wire info) with quick edit capability.
    - "Send Billing Invoice via Email" Button: Dispatches the branded Skrill billing invoice directly to the customer's registered email with reply-to skrill.notifications.support2646@gmail.com.
  - PIN Release & Fund Approval: Admin enters the 4–6 digit PIN and clicks "Set PIN & Approve Funds", which activates the customer's PIN, marks the ticket resolved, and automatically emails the customer their newly activated Transfer PIN.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.