Feature/checkout

[juanpredev13]

UI flow checkout

Multi-Currency Crypto Checkout Component

Overview

This PR introduces a comprehensive multi-transaction checkout flow for cryptocurrency payments. (No smart contract implementation yet) For this Issue #11

Key UI Features

• Multi-Currency Support: Users can pay using ETH, USDC, STRK, or BTC [^2].
• Wallet Integration: Seamless connection with user's crypto wallet for transactions.
• Multi-Step Checkout Process: Includes cart summary, delivery method selection, address entry, and order review [^1][^2].
• Payment Confirmation: Provides clear confirmation of successful transactions.

Component Structure

The checkout process is divided into several key components [^1]:

• CartSummary.tsx: Displays items in the cart and total price.
• DeliveryMethod.tsx: Allows selection of delivery options.
• AddressForm.tsx: Captures user's delivery address.
• OrderReview.tsx: Provides a final review of the order before payment.
• PaymentMethod.tsx: Handles selection of payment method and currency.
• CurrencySelector.tsx: Allows users to choose their preferred cryptocurrency.
• SuccessMessage.tsx: Displays confirmation after successful purchase.

Technical Implementation

• Implements custom hooks for managing checkout state, currency conversion, and payment processing.
• Ensures responsive design for optimal user experience across devices.

Next Steps

• Smart Contract integration
• Further optimization for transaction speed and gas fees.
• Enhanced error handling for failed transactions.
• Additional localization support for international users.

Checklist

• The title of the PR is clear and descriptive.
• All tests have been run and passed.
• Code follows project conventions (Biome formatting, linting).
• Documentation has been updated as needed.
• Commit messages follow the Conventional Commits style.

Type of Change

• Bugfix
• [ x] Feature
• Refactor
• Chore
• Documentation
• Test

Testing

Manual Testing

N/A

Automated Tests

N/A

Additional Notes

[vercel]

@juanpredev13 is attempting to deploy a commit to the CofiBlocks Team on Vercel.

A member of the Team first needs to authorize it.