Implement Send Page Automatic Split Card (Figma)

[Baskarayelu]

Description

Implement the Automatic Split card from the Figma design for the Send Remittance flow. Red info icon, "Automatic Split" title, description, four category rows (Daily Spending, Savings, Bills, Insurance) with icons, $0.00 and percentages, red progress bars, Total Amount display, amount input, and optional "Fast & Secure on Stellar" info card.

Design reference (Figma): RemitWise Design

Design Requirements

Layout

• Header: Red circle with exclamation/info icon + "Automatic Split" (white).
• Description: "Your remittance will be automatically split according to your configured allocation rules:" (light grey).
• Category rows (4): Each: icon (wallet, trend-up, document/!, shield), label, "$0.00" and "50%" / "30%" / "15%" / "5%" right-aligned, red horizontal bar below.
  • Daily Spending 50%, Savings 30%, Bills 15%, Insurance 5%.
• Total Amount: Label "Total Amount" (left). "$0.0" display (right). Input below: placeholder "Enter an amount to see split preview" (rounded, dark grey).
• Secondary card (below): "Fast & Secure on Stellar network settle in 3-5 seconds with minimal fees." (red ! icon). Rounded card.

Visual Design

• Dark rounded card; red icons and progress bars; amounts update when user enters total (split preview).

Technical Requirements

• Next.js App Router
• TypeScript
• Tailwind CSS
• Amount input updates category amounts by allocation %; percentages from Smart Split config or defaults (50/30/15/5)
• Responsive

Acceptance Criteria

• "Automatic Split" title with red icon, description
• Four rows: Daily Spending 50%, Savings 30%, Bills 15%, Insurance 5% with icons and red bars
• Amounts update when total changes (e.g. $0.00 → split values)
• Total Amount label, value display, and input with placeholder
• "Fast & Secure on Stellar..." info card below
• Dark theme matches design
• Responsive layout

[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.

[MerlinTheWhiz]

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

I have experience with replicating design, let me work on this please

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

[OluRemiFour]

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

I will Implement the Automatic Split card from the Figma design for the Send Remittance flow to meet the requested design requirement and layout structure.

ℹ️ 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 experienced in building interactive, data-driven cards and remittance flows using Next.js (App Router), TypeScript, and Tailwind CSS, especially for fintech applications.

I’ve reviewed Issue #77 – Implement Send Page Automatic Split Card, and the requirements are very clear.

What I’ll implement:

Header with red info/exclamation icon and “Automatic Split” title

Description text explaining allocation rules

Four category rows (Daily Spending, Savings, Bills, Insurance) with icons, amounts, percentages, and red progress bars

Dynamic Total Amount display with input: entering a total updates the four category amounts according to percentages (50/30/15/5 or Smart Split config)

Secondary info card: “Fast & Secure on Stellar network settle in 3-5 seconds with minimal fees.” with red icon

Fully responsive layout

Dark theme styling matching Figma design

I focus on precise, interactive UI where changes reflect immediately in the split preview. This is something I can implement and deliver quickly, fully functional and visually accurate.

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.

[Christopherdominic]

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

Hi team I’d like to work on this issue.

I have experience with Next.js (App Router), TypeScript, and Tailwind CSS, and I’m comfortable translating Figma designs into clean, reusable UI components.

I’ll implement the Automatic Split card for the Send Remittance flow, including category rows with icons, percentages, dynamic progress bars, total amount display, amount input, and the optional “Fast & Secure on Stellar” info card—fully responsive and design-accurate.

I can start immediately and deliver a polished PR

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

[edehvictor]

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

Hi Maintainer,

I would like to handle this issue. I can implement the Automatic Split card for the Send Remittance flow, ensuring the UI remains reactive and adheres to the canonical dark-themed design.

Implementation Plan:

UI Components: I will build the Automatic Split Card and the secondary Stellar Info Card based on the Figma design. I will include the specified category rows (Daily Spending, Savings, Bills, and Insurance) with their respective icons and red progress bars.

API Integration: I will ensure the component is wired to consume allocation percentages (50/30/15/5) from the global Smart Split configuration. I will also implement the logic where the Total Amount input dynamically calculates and updates the split preview for each category in real-time.

Feedback Loops: I will implement robust validation for the amount input and ensure smooth visual updates for the progress bars as values change. The "Fast & Secure" secondary card will be implemented as a clear, high-trust indicator for Stellar network settlement.

ETA: 3–6 hours.

I am ready to start immediately.

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

[drips-wave]

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

🧑‍💻 @OluRemiFour: 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 🌊