feat: StablePay Implementation

[Tanya-ruby]

🚀 StablePay SDK Implementation

🎯 Overview

This PR introduces a comprehensive StablePay SDK implementation with React components, network support, and wallet integration capabilities.

✨ Key Features

• 🎨 Custom styling system - modular CSS
• 🔄 React Context providers - network and wallet management
• 📦 Rollup configuration - optimal bundling
• 💻 Widget-based implementation - React
• 🔗 Integration - viem and web3.js

📁 File Structure

stablepay-sdk/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── NetworkSelector.jsx
│   ├── contexts/
│   │   ├── NetworkContext.jsx
│   │   └── WalletContext.jsx
│   ├── core/
│   │   ├── MerchantConfig.js
│   │   ├── NetworkSelector.js
│   │   ├── TokenSelector.js
│   │   └── Transaction.js
│   ├── styles/
│   ├── utils/
│   └── widget/
│       ├── Dialog.jsx
│       ├── NetworkDropdown.jsx
│       ├── PayButton.jsx
│       ├── TokenDropdown.jsx
│       ├── TransactionReview.jsx
│       └── Widget.jsx

💻 Widget Components

• Widget.jsx - Main container component
• Dialog.jsx - Modal component for interactions
• NetworkDropdown.jsx - Network selector component
• PayButton.jsx - Primary payment trigger
• TokenDropdown.jsx - Token selection interface
• TransactionReview.jsx - Transaction confirmation flow

⚙️ Core Logic

• MerchantConfig.js - Merchant configuration handling
• NetworkSelector.js - Network selection logic
• TokenSelector.js - Token selection management
• Transaction.js - Transaction processing

📦 Dependencies

• viem - Ethereum interaction library
• web3.js - Web3 functionality
• react - widget creation dependency

✏️ Next Steps

• Modify buy function from djed-sdk:
• Implement transaction confirmation flow
• Add transaction hash return functionality
• Add additional network support

🎥 Demo

final-vid.mov

Features demonstrated:

• *Network switching *
• Token selection and validation
• Transaction flow with confirmation
• Error handling scenarios
• Responsive design adaptability

🧪 Testing

• Core components tested locally
• Transaction flow verified on test networks
• Mobile responsiveness verified

📋 Checklist

• Code follows the style guidelines
• Changes have been tested locally
• No breaking changes introduced

🔍 Additional Notes

The implementation focuses on maintainability and extensibility. Future network additions can be easily integrated through the network context system.

---

Note

Please ensure you have the latest dependencies installed before testing(example directory will have the vite/react test file) :

npm install