A decentralized marketplace on the Stacks blockchain enabling secure peer-to-peer trading with multi-currency support (STX & SBTC) through Clarity smart contracts.
- DualPay Market
DualPay Market is a decentralized marketplace platform built on the Stacks blockchain, leveraging Clarity smart contracts to enable secure, transparent peer-to-peer trading of digital goods and services. The platform supports dual-currency payments using STX (Stacks native token) and SBTC (Bitcoin on Stacks), providing users with flexible payment options while maintaining full decentralization.
The application consists of a modern React-based frontend for user interaction and Clarity smart contracts for on-chain business logic, ensuring trustless transactions and immutable record-keeping.
- Decentralized Marketplace: Fully decentralized item listing and purchasing without intermediaries
- Multi-Currency Support: Native support for STX and SBTC payments
- Smart Contract Security: All transactions secured by audited Clarity contracts
- Inventory Management: Comprehensive seller dashboard for managing listings and stock
- Earnings Tracking: Real-time tracking of seller earnings with secure withdrawal mechanisms
- Responsive UI: Modern, accessible interface built with React and Tailwind CSS
- Wallet Integration: Seamless integration with Stacks-compatible wallets
- Real-time Updates: Live transaction status and balance updates
The DualPay Market follows a layered architecture separating concerns between frontend presentation, blockchain interaction, and smart contract logic.
graph TB
subgraph "Frontend Layer"
A[React Application] --> B[Vite Build Tool]
A --> C[Tailwind CSS + shadcn/ui]
end
subgraph "Integration Layer"
D[Stacks.js SDK] --> E[Wallet Connect]
D --> F[Transaction Builder]
end
subgraph "Blockchain Layer"
G[Stacks Blockchain] --> H[Clarity Smart Contracts]
H --> I[Data Maps & Variables]
H --> J[Public Functions]
end
A --> D
D --> G
E --> K[User Wallets]
K --> G
style A fill:#e1f5fe
style G fill:#f3e5f5
style H fill:#e8f5e8
- Frontend Layer: Handles user interface, state management, and API interactions
- Integration Layer: Manages blockchain connectivity, wallet interactions, and transaction signing
- Blockchain Layer: Contains the core business logic in immutable smart contracts
The following diagram illustrates the complete user journey from item listing to purchase completion.
flowchart TD
subgraph "Seller Journey"
A[Seller Access Platform] --> B[Connect Wallet]
B --> C[List New Item]
C --> D[Set Price & Quantity]
D --> E[Submit to Contract]
E --> F[Item Listed Successfully]
end
subgraph "Buyer Journey"
G[Buyer Browse Marketplace] --> H[Select Item]
H --> I[Review Details]
I --> J[Initiate Purchase]
J --> K[Select Payment Currency]
K --> L[Sign Transaction]
L --> M[Payment Processed]
end
subgraph "Contract Execution"
N[Validate Payment] --> O[Update Ownership]
O --> P[Transfer Funds to Seller]
P --> Q[Update Seller Earnings]
Q --> R[Emit Success Event]
end
M --> N
F --> S[Item Available for Purchase]
S --> H
style A fill:#fff3e0
style G fill:#e8f5e8
style N fill:#fce4ec
The system integrates multiple technologies to provide a seamless decentralized experience.
graph LR
subgraph "User Interface"
A[React Components] --> B[shadcn/ui Library]
B --> C[Tailwind CSS]
A --> D[React Router]
end
subgraph "State Management"
E[React Query] --> F[API State]
E --> G[Blockchain State]
end
subgraph "Blockchain Integration"
H[Stacks Connect] --> I[Wallet Integration]
H --> J[Transaction Signing]
K[Stacks.js] --> L[Network Calls]
K --> M[Contract Interactions]
end
subgraph "Smart Contracts"
N[Clarity Contracts] --> O[Item Management]
N --> P[Payment Processing]
N --> Q[Earnings Tracking]
end
A --> E
E --> H
H --> K
K --> N
style A fill:#e3f2fd
style H fill:#f3e5f5
style N fill:#e8f5e8
The application uses Stacks Connect and WalletConnect for secure wallet connections and transaction signing. Key packages include:
@stacks/connect: ^8.2.4 - Wallet connection and transaction handling@stacks/network: ^7.3.1 - Network configuration for Stacks blockchain@stacks/transactions: ^7.3.1 - Transaction building and signing
This enables seamless integration with popular Stacks wallets like Hiro Wallet and Xverse.
- Node.js 18.x or higher
- npm or yarn package manager
- Git
- A Stacks-compatible wallet (e.g., Hiro Wallet, Xverse)
- Clarinet (for contract development and testing)
-
Clone the Repository
git clone https://github.com/your-org/dual-pay-market.git cd dual-pay-market -
Install Dependencies
npm install
-
Environment Setup
cp .env.example .env # Edit .env with your configuration -
Start Development Server
npm run dev
The application will be available at http://localhost:8080.
Create a .env file in the root directory:
VITE_STACKS_NETWORK=mainnet
VITE_CONTRACT_ADDRESS=SP...
VITE_APP_NAME=DualPay MarketThe application supports both mainnet and testnet deployments. Configure the network in your environment variables.
- Connect your Stacks wallet
- Navigate to the seller dashboard
- Click "List New Item"
- Fill in item details (name, description, price, quantity)
- Confirm the transaction
- Monitor sales and earnings
- Browse available items
- Select an item to purchase
- Choose payment currency (STX or SBTC)
- Confirm the transaction
- Receive item access/details
The platform integrates with popular Stacks wallets for secure transaction signing and balance management.
list-item(name, desc, price, quantity): List a new item for salepurchase-item(item-id, payment-amount): Purchase an itemwithdraw-earnings(amount): Withdraw seller earnings
get-item(item-id): Get item detailsget-seller-earnings(seller): Get seller earnings balance
The React application exposes the following key components:
Marketplace: Main browsing interfaceItemCard: Individual item displaySellerDashboard: Seller management interfaceWalletConnect: Wallet connection component
cd clarity-contract
clarinet testnpm run testnpm run test:e2e-
Build the application:
npm run build
-
Deploy the
distfolder to your hosting provider (Vercel, Netlify, etc.)
- Configure deployment settings in
clarity-contract/settings/ - Use Clarinet to deploy:
clarinet deployments generate --devnet clarinet console
- Enable HTTPS
- Configure proper CORS settings
- Set up monitoring and logging
- Implement rate limiting
We welcome contributions to DualPay Market. Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Make your changes and add tests
- Ensure all tests pass:
npm run test - Commit your changes:
git commit -am 'Add new feature' - Push to the branch:
git push origin feature/your-feature - Submit a pull request
- Follow the existing code style
- Write comprehensive tests for new features
- Update documentation for API changes
- Ensure accessibility compliance
Security is paramount in a decentralized marketplace. Key security measures include:
- Smart contract audits
- Input validation on all user inputs
- Secure wallet integration
- Transaction signing verification
- Rate limiting and abuse prevention
Please report security vulnerabilities to security@dualpay.market. Do not create public issues for security concerns.
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation: docs.dualpay.market
- Community Forum: forum.dualpay.market
- Email Support: support@dualpay.market
- Discord: Join our Discord
For technical support, please provide:
- Your environment details
- Steps to reproduce issues
- Relevant log outputs
- Transaction IDs (if applicable)