Echogate

Echogate - Non-custodial crypto payments. Customers pay instantly from their wallet; merchants get funds direct and an immediate e-commerce notification. Seamless, direct, instant status.

Comment

Inspiration

  • Growing crypto adoption: Need for simple, direct Web3 payment solutions for e-commerce.
  • Poor merchant visibility: Existing crypto payment methods often lack a clean, non-technical dashboard for merchants to track payments.
  • Reducing transaction friction: Streamlining the payment process into a single-page flow for customers ie payment can be made from a number of wallets.

What it does

  • Customer Payments: Allows customers to pay orders using ERC-20 tokens directly through Braavos and Ready Wallets.
  • Payment Link Generation: Provides merchants with a tool to generate a unique, secure URL (including orderInfo, amount, and a server-side nonce) for a customer.
  • Status Dashboard: Enables merchants/admins to instantly search by Order ID and view the real-time status (paid/pending) of all related blockchain transactions.

How we built it

  • Frontend: Built with VITE and styled using Mantine for a minimal, responsive design.
  • Blockchain Integration: Used starknet.js and starknetkit for secure wallet connection and direct interaction with the payment smart contract.
  • API Communication: Used Axios/fetch to query the Django backend for generating secure payment links and retrieving payment history.
  • Smart Contract Indexing: Used starknet.js to index smart contract events and retrieve payment history.
  • Webhook notifications: Used webhooks to notify the merchants of new payments.
  • Security: Implemented nonce generation on the backend to prevent transaction replay attacks.

Challenges we ran into

  • Handling Asynchronous States: Managing the customer UI through the full lifecycle: "Connect Wallet" $\rightarrow$ "Pending Transaction" $\rightarrow$ "Success/Failure."
  • Ensuring Responsiveness: Making the payment page simple and usable across both desktop and mobile wallet browsers.
  • Integrating orderInfo Security: Securely passing and validating the unique orderInfo and server-generated nonce between the frontend, backend, and the smart contract call.
  • Autogenerating payment addresses: Ability to generate and watch payment addresses for users who don't want to connect their wallets into the platform.

Accomplishments that we're proud of

  • Seamless Wallet Integration: Achieved a single-click "Pay" button that initiates the payment and handles confirmation/error states gracefully.
  • Minimal Merchant Dashboard: Successfully created a simple, fast dashboard that abstracts blockchain complexity, providing merchants with a clear "Paid / Not Paid" status.
  • Clean UI/UX: Delivered a highly minimal and mobile-friendly interface using Mantine UI, meeting the goal of easy integration.

What we learned

  • Starknet.js Complexity: Gained deeper understanding of wallet providers, signers, and contract function encoding/decoding, especially when handling custom data like orderInfo.
  • Importance of Nonces: Reinforced the critical need for server-side nonce generation and validation in any blockchain payment solution to maintain integrity.
  • State Management: Learned best practices for managing complex asynchronous states (loading, errors, success) in a React application.
  • Smart Contract Indexing: Ability to index smart contract events and retrieve payment history.
  • Webhook notifications: Ability to notify merchants of new payments.

What's next for Echogate

  • Multi-Chain Support: Expanding payment options to include other major EVM-compatible chains (e.g., Polygon, BNB Chain, Base, Arbitrum).
  • Advanced Merchant Features: Adding time-series data, filter options (by orderInfo, token), and export capabilities to the dashboard.
  • Web Wallet Integration: Implementing support for WalletConnect to allow customers to use non-MetaMask mobile wallets.

Built With

Share this project:

Updates