Implement Emergency Transfer Modal (Figma)

[Baskarayelu]

Description

Implement the Emergency Transfer modal from the Figma design. Header with lightning icon and PRIORITY pill, warning box, form fields (Recipient Name, Country, Amount USDC), transfer summary (Transfer Amount, Priority Fee +2.00 USDC FAST, Total), Emergency vs Regular speed, confirmation checkbox, Cancel and Review Transfer buttons.

Design reference (Figma): RemitWise Design

Design Requirements

Layout

• Header: Red lightning icon + "Emergency Transfer". Red "PRIORITY" pill. "Priority processing guaranteed." (subtitle). Close "X" (top right).
• Warning: Red-bg box, red border. Warning icon + "Emergency Priority Transfer / This transfer will be processed with highest priority. Additional fees apply for immediate processing."
• Form: Recipient Name (person icon, placeholder "Enter recipient name"). Country (label + field). Amount (USDC) (dollar icon, "0.00", "USDC" suffix).
• Summary card: Transfer Amount 0.00 USDC. Priority Fee +2.00 USDC (red) with "FAST" tag. Total 0.00 USDC (bold red).
• Speed: "Emergency" (red, selected) — lightning, "2-5 minutes". "Regular" (grey) — clock, "30-60 minutes".
• Checkbox: "I understand that additional fees and will be processed immediately." (or similar).
• Buttons: Cancel (dark grey). Review Transfer (red, right-arrow icon).

Visual Design

• Dark theme; red for priority, fees, primary button; warning box prominent.

Technical Requirements

• Next.js App Router
• TypeScript
• Tailwind CSS
• Form validation; speed selection updates fee and total; checkbox required before Review; modal closes on Cancel/X
• Accessible (focus trap, escape, labels)

Acceptance Criteria

• Header with lightning, title, PRIORITY pill, subtitle, close button
• Warning box with full copy
• Recipient Name, Country, Amount (USDC) fields
• Transfer summary with Priority Fee +2.00 USDC FAST
• Emergency (2-5 min) vs Regular (30-60 min) selection
• Confirmation checkbox and Cancel / Review Transfer buttons
• Dark theme matches design
• Modal and form behavior functional

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[jerrybarry]

@jerrybarry has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, my name is Jerry. I’m a full-stack developer with 3+ years of experience building successful products.

I can confidently handle this issue.
Here is my portfolio and projects I have handled:
https://www.tafscraper.com/
https://app.tinnitaid.com/
http://www.tafhub.com/

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jerrybarry to this issue.

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I can deliver this in 1 hour. I will build it exactly as designed and submit a PR that works perfectly

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Chucks1093 to this issue.

[ShantelPeters]

@ShantelPeters has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would like to work on this issue , kindly assign please i'm ready to work.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ShantelPeters to this issue.

[OluRemiFour]

@OluRemiFour has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Critical actions demand clarity and urgency.

This issue stands out because the Emergency Transfer modal guides users through high-priority transactions with clear warnings, fee transparency, and step-by-step input, ensuring confidence and reducing errors. Highlighting speed options, priority fees, and an actionable summary improves usability for urgent transfers.

I have experience building responsive, accessible modals in Next.js with TypeScript and Tailwind CSS, including focus traps, form validation, dynamic summaries, and ARIA-compliant inputs. For this task, I will implement the Emergency Transfer modal as per Figma, with the red lightning header, PRIORITY pill, warning box, form fields, dynamic transfer summary, speed selector, confirmation checkbox, and Cancel/Review buttons fully functional, responsive, and aligned with the design system.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluRemiFour to this issue.

[OluwapelumiElisha]

@OluwapelumiElisha has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I can solve this very fast.

I’m a Frontend Developer with strong experience building complex, state-driven fintech modals using Next.js (App Router), TypeScript, and Tailwind CSS.

I’ve reviewed Issue #74 – Implement Emergency Transfer Modal, and the requirements are very clear.

What I’ll implement:

Dark-themed modal layout with red lightning icon, PRIORITY pill, subtitle, and close (X) button

Prominent warning box with red background/border and full copy

Form fields for Recipient Name, Country, and Amount (USDC) with icons and validation

Transfer summary card with dynamic calculations:

Transfer Amount

Priority Fee +2.00 USDC (FAST)

Total (updates based on speed selection)

Speed selection toggle:

Emergency (red, selected — 2–5 minutes)

Regular (grey — 30–60 minutes)

Confirmation checkbox required before enabling Review

Cancel and Review Transfer buttons with correct states and icons

Full accessibility: focus trap, ESC to close, labels, and error states

I’m very detail-oriented with financial flows where clarity, urgency, and accuracy matter. This is something I can implement and deliver quickly while matching the Figma design closely.

I can start immediately and push a clean PR as soon as possible.

Best regards,
Elisha

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluwapelumiElisha to this issue.

[anumukul]

@anumukul has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d like to take this issue and can deliver a fix within 24 hours.
I’ve worked on similar projects before and have relevant experience, so I should be able to handle this efficiently.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @anumukul to this issue.

[edehvictor]

@edehvictor has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I'd like to work on Issue #74: Implement Emergency Transfer Modal

My relevant experience: I am a Frontend Engineer with specific expertise in Next.js, TypeScript, and Tailwind CSS. I specialize in building complex, data-driven modal interfaces and high-stakes financial forms. I have reviewed the design reference provided (Image 5) and can deliver a pixel-perfect, accessible implementation of this emergency transfer flow.

Implementation Plan:

Modal Architecture: I will implement the modal using a robust primitive (like Headless UI or Radix) to ensure full accessibility, including a proper focus trap, "Escape" to close functionality, and aria-labelledby attributes.

Dynamic State Management: I will build a reactive form state that:

Toggles between "Emergency" and "Regular" speed options.

Dynamically updates the Priority Fee (+2.00 USDC) and Total based on the selected speed.

Requires the confirmation checkbox to be checked before enabling the "Review Transfer" CTA.

UI/UX Fidelity: I will strictly match the "Emergency" aesthetic:

Warning Box: Implementing the high-contrast red-bordered box with the correct icons.

Visual Hierarchy: Applying the red/orange gradient to the primary button and using the specific "PRIORITY" and "FAST" pill styling shown in the design.

Form Details: Adding the subtle person and dollar icons within the dark-grey input fields.

Responsiveness: I will ensure the modal layout scales gracefully for mobile users, maintaining readability of the transfer summary and speed selection cards.

Estimated completion: 3 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @edehvictor to this issue.

[drips-wave]

Congratulations, @edehvictor! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @edehvictor: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊