Skip to main content

​
Swap POC Example

Simple Swap Interface This example demonstrates how to build a simple frontend application that uses the Mach SDK for token swaps. The application showcases the basic integration of Mach’s swap functionality in a Next.js environment.

​
Overview

The Swap POC Frontend is a proof-of-concept application that demonstrates the Mach SDK swap functionality. It provides a simplified interface for:
  • Viewing supported assets
  • Creating and executing token swaps
  • Managing orders through the Mach API

​
Key Features

  • Integration with Mach SDK for swap functionality
  • Simple API routes for asset listing and order creation
  • Environment-based private key configuration for swap execution
  • Next.js-based frontend implementation

​
Project Structure

The application follows a standard Next.js project structure: 
src/
├── app/           # Route components
    ├── api/       # API Routes
├── components/    # Reusable UI components
├── config/        # Environment configuration
├── hooks/         # Custom React hooks
├── pages/         # Page components
├── types/         # TypeScript definitions
└── utils/         # Utility functions

​
Prerequisites

Before getting started, ensure you have:
  • Node.js 18 or higher
  • npm or yarn package manager
  • A private key for swap execution

​
Quick Start

  1. Clone the repository:
git clone https://github.com/ggarza5/mach-next-first
  1. Install dependencies:
npm install
  1. Configure environment variables: Create a .env file with your private key:
PRIVATE_KEY=your_private_key_here
  1. Start the development server:
npm run dev

​
API Routes

The application includes two main API routes:

​
/api/assets

Returns a list of assets supported by the Mach API.

​
/api/order

Creates a new swap order using the configured private key.

​
Development

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

​
Deployment

You can easily deploy this application to Vercel using the button below:

​
Important Notes

  • This is a proof-of-concept implementation and not production-ready
  • The application uses a single private key configured in the backend
  • Wallet connection in the browser is not supported in this example
  • The implementation is simplified for demonstration purposes

​
Next Steps

To extend this example, consider:
  • Adding wallet connection support
  • Implementing proper error handling
  • Adding order status tracking
  • Implementing cross-chain swap functionality