Implement Launch Campaign: Escrow Setup Step 2

[Benjtalkshow]

Implement Launch Campaign: Escrow Setup

Overview

This task involves building the "Escrow Setup" step of the "Launch Campaign" flow. Users will review milestone summaries, understand escrow terms, select their preferred escrow network, transaction type, and connect their wallet to finalize the smart contract setup. The system must adhere strictly to the provided Figma designs and API documentation, while reusing existing components to maintain consistency across the application.

This system must handle all loading, error, and empty states gracefully, and it should follow the defined color palette, typography, and spacing from the design system.

User Flow

Access Escrow Setup UI

1. After completing the Implement Launch Campaign: Set Campaign Details Step 1 #122 step, the "Escrow Setup" form will be displayed.

Review Milestone Summary

1. The "Milestone Summary" section will display previously defined milestones (e.g., "Prototype & Smart Contract Setup", "Campaign & Grant Builder Integration").
2. Each milestone should be expandable to show details like date and amount.

Understand Escrow Terms

1. Review the "Escrow Terms" section, which outlines key aspects of the smart contract:
   • Smart Contract Control
   • Milestone-Based Release
   • Immutable Fund Allocation
   • Non-Custodial Holding
   • Unmet Funding Goals
   • KYC Compliance
   • Transparency

Configure Escrow Details

1. Escrow Network: Select the desired blockchain network (e.g., "Stella / Soroban"). This field is required.
2. Transaction Type: This field should display "On-chain, Irreversible".
3. Wallet Address: This field will display the connected wallet address (e.g., "GDS3...GB7").

Connect Wallet

1. Click the "Connect Wallet" button.
2. A "Connect Wallet" modal will appear, requiring users to:
   • Accept "Terms of Service and Privacy Policy".
   • Choose a network (e.g., "Stella / Soroban").
   • Select a wallet from a list of supported options (e.g., Wallet Connect, Ledger, Freighter, Lobstr, Albedo, Trezor, xBull, Hana, Rabet, HOT Wallet).
3. Upon successful connection, the "Wallet Address" field in the main form will update, and a "Wallet connected!" toast/indicator will appear.

Review & Submit

1. The "I understand and agree to the above escrow terms." checkbox must be checked to enable the "Review & Submit" button.
2. The "Review & Submit" button should be disabled if the wallet is not connected or terms are not accepted.
3. On clicking "Review & Submit", the system should validate inputs and proceed to the next step of the "Launch Campaign" flow (Review Campaign).

API

• An endpoint to fetch milestone details for display.
• An endpoint to initiate wallet connection and retrieve the connected wallet address.
• An endpoint to save the selected escrow network and confirm wallet connection details.
• API for interacting with blockchain (e.g., Soroban) for smart contract deployment details (if applicable at this stage).

For any missing endpoints, mock the expected behavior in the frontend until backend endpoints are available.
Ensure all API calls:

• Handle loading and error states.
• Use proper authentication and headers.
• Respect rate limits.

Design Requirements

Match Figma exactly:

• Escrow Setup (Initial State): Escrow Setup Initial
• Escrow Setup (Wallet Connected): Escrow Setup Wallet Connected
• Connect Wallet Modal: Connect Wallet Modal

Final Flow

• Reuse existing components – Before creating a new component, check if a similar one exists in the project and extend it instead of duplicating.
• Do not introduce new colors – All colors must come from the predefined theme.
• Ensure responsiveness – The UI must be functional and visually consistent on all device sizes.
• Accessibility – Follow accessibility best practices (proper aria labels, keyboard navigation, and contrast).

Development Guidelines

• Implement client-side validation for required fields and checkbox.
• Integrate with wallet connection libraries/SDKs.
• Show clear loading indicators during wallet connection and submission.
• Display helpful error messages for connection failures or invalid inputs.
• Keep the code modular and reusable – Suggested structure:
  • EscrowSetupForm – Main component for the form.
  • WalletConnectModal – Handles wallet selection and connection.
• Follow the Contribution Guidelines for:
  • Naming conventions.
  • Commit messages.
  • Pull request structure.

⚠️ Warning on AI-Generated UIs

We are not against AI-assisted design, but any AI-generated UI must be thoroughly tweaked to match the Figma designs exactly.
Do not rely on AI output without:

• Adjusting to match spacing, typography, and colors from the design system.
• Ensuring responsive and accessible layout.
• Checking for consistency with existing components.

Failure to follow these steps will result in your work being rejected.

Timeline

• Draft PR: Within 24h of assignment (include screenshots and development notes).
• Final PR: Within 48h of assignment.

[legend4tech]

Hi 👋,
I’m legend4tech a fullstack developer and a fellow with experience in building responsive, accessible UIs that strictly follow Figma designs and design systems.

I can implement the Escrow Setup step while:

Respecting rate limits and integrating with wallet connection libraries/SDKs.

Matching the Figma specs pixel-perfect, reusing existing components, and following theme colors.

Ensuring full responsiveness and accessibility compliance (aria attributes, keyboard navigation, proper contrast).

Adding client-side validation, clear loading states, and helpful error messaging for wallet connection and submission flows.

Looking forward to be assigned

Recommended by OnlyDust for high-quality and dependable contributions.

[pushkarm029]

I can help you with this.

~ OnlyDust Stellar Fellow

Recommended by OnlyDust for outstanding experience and quality contributions.