📚 SCT by STC - Platform Documentation

Smart Contract Template Marketplace

🌟 Ringkasan Aplikasi / App Summary

SCT by STC adalah platform marketplace komprehensif untuk smart contract template yang memudahkan developer, startup, bisnis, dan educator dalam menemukan, kustomisasi, dan deploy template Solidity smart contract.

SCT by STC is a comprehensive smart contract template marketplace platform that facilitates developers, startups, businesses, and educators in discovering, customizing, and deploying Solidity smart contract templates.

🎯 Fitur Utama / Key Features

1. Template Library (21+ Templates)

Kategori: NFT, DeFi, DAO, Token, Gaming, Marketplace, Governance, dan lainnya
Interactive Preview: Preview langsung kode contract sebelum deploy
View Code & Export: Lihat source code lengkap dengan opsi export (Copy, Download, atau IPFS)

2. Real Blockchain Integration 🔗

Wallet Connection: Integrasi MetaMask via wagmi/ethers.js
Multi-Network Support:
- Base Mainnet (Chain ID: 8453)
- Base Sepolia Testnet (Chain ID: 84532)
- Ethereum Mainnet (Chain ID: 1)
- Sepolia Testnet (Chain ID: 11155111)
Network Switching: Auto-switch network dari deployment panel
Gas Estimation: Estimasi gas fees sebelum deploy

3. One-Click Deployment 🚀

Deploy smart contract langsung ke blockchain pilihan
Real transaction tracking dengan block explorer links
Contract verification support
Transaction status monitoring real-time

4. IPFS Storage Integration 📦

Upload contract metadata ke IPFS via Pinata SDK
Decentralized storage untuk source code dan ABI
Fallback ke localStorage jika Pinata belum dikonfigurasi
Permanent, immutable contract storage

5. Community Hub 👥

Fitur interaktif dengan persistent storage:

a. Start Discussion

Post pertanyaan dan diskusi
Share pengetahuan tentang smart contracts
Activity feed untuk diskusi terbaru

b. Submit Template

Upload smart contract template baru
IPFS-backed storage
Include metadata: name, category, description, code

c. Review Code

Rate dan review templates (1-5 stars)
Berikan feedback konstruktif
View review history

d. Share Project

Showcase deployed contracts
Include contract address dan network info
Link ke block explorer
Share achievements dengan community

🏗️ Arsitektur Aplikasi / App Architecture

SCT by STC
│
├── Frontend (Next.js + React)
│   ├── UI Components (shadcn/ui)
│   ├── Wallet Connection (wagmi + ethers.js)
│   └── State Management (React Hooks)
│
├── Blockchain Layer
│   ├── Smart Contract Deployment
│   ├── Network Switching
│   ├── Transaction Management
│   └── Gas Estimation
│
├── Storage Layer
│   ├── IPFS (Pinata SDK)
│   ├── LocalStorage (Fallback)
│   └── Community Data Persistence
│
└── Services
    ├── BlockchainService (src/lib/blockchain.ts)
    ├── IPFSService (src/lib/ipfs.ts)
    └── StorageService (src/lib/storage.ts)

📂 Struktur File / File Structure

Core Application

src/
├── app/
│   ├── page.tsx                 # Main landing page
│   ├── layout.tsx               # Root layout dengan Web3Provider
│   └── globals.css              # Global styles (neon web3 theme)
│
├── components/
│   ├── AboutApp.tsx             # Tentang aplikasi (Indonesian)
│   ├── CommunitySection.tsx    # Community hub interface
│   ├── DeploymentPanel.tsx     # Blockchain deployment panel
│   ├── TemplateCard.tsx        # Template display card
│   ├── WalletConnection.tsx    # MetaMask connection UI
│   │
│   ├── Modals/
│   │   ├── PreviewTemplateModal.tsx    # Interactive preview
│   │   ├── ViewCodeModal.tsx           # Code viewer + export
│   │   ├── DeployModal.tsx             # Deployment interface
│   │   ├── StartDiscussionModal.tsx    # Discussion creator
│   │   ├── SubmitTemplateModal.tsx     # Template uploader
│   │   ├── ReviewCodeModal.tsx         # Review system
│   │   └── ShareProjectModal.tsx       # Project showcase
│   │
│   └── ui/                     # shadcn/ui components
│
├── lib/
│   ├── blockchain.ts           # 🔥 Blockchain service (ethers.js)
│   ├── ipfs.ts                 # 🔥 IPFS storage (Pinata)
│   ├── storage.ts              # 🔥 Persistent storage
│   └── wagmi-config.ts         # Wagmi configuration
│
├── hooks/
│   ├── useContractDeployment.ts    # Deployment logic
│   ├── useIPFSStorage.ts           # IPFS operations
│   ├── useCommunityStorage.ts      # Community data
│   └── useSmartContract.ts         # Contract interactions
│
├── providers/
│   └── Web3Provider.tsx        # Web3 context provider
│
└── types/
    └── template.ts             # TypeScript interfaces

🔄 Alur Kerja Aplikasi / App Workflow

1. User Journey - Browse Templates

User masuk app → Browse 21+ templates → Filter by category →
Preview template → View code → Choose: Export or Deploy

2. User Journey - Deploy Contract

Click "Deploy to Blockchain" → Connect MetaMask →
Select network (Base/Ethereum/Sepolia) → Review gas fees →
Confirm transaction → Track deployment → Get contract address →
View on block explorer

3. User Journey - Community Engagement

Navigate to Community Hub →
Choose action:
  ├── Start Discussion (Post question)
  ├── Submit Template (Upload contract + IPFS)
  ├── Review Code (Rate template)
  └── Share Project (Showcase deployment)
→ Submit → Data persisted to storage → Activity feed updated

4. Technical Flow - Smart Contract Deployment

// Step-by-step deployment process

1. User clicks "Deploy" on template
   ↓
2. WalletConnection checks MetaMask
   ↓
3. User selects target network
   ↓
4. BlockchainService.estimateGas()
   ↓
5. User confirms with gas estimate
   ↓
6. BlockchainService.deployContract()
   - Compiles Solidity code
   - Estimates gas
   - Sends transaction
   - Waits for confirmation
   ↓
7. Transaction hash returned
   ↓
8. IPFSService.uploadMetadata()
   - Uploads contract metadata to IPFS
   - Returns IPFS hash
   ↓
9. StorageService.saveDeployment()
   - Saves deployment record
   ↓
10. Success! Display contract address + explorer link

5. Technical Flow - IPFS Storage

// IPFS upload process

1. User submits template/project
   ↓
2. Prepare metadata object:
   {
     name, description, code,
     abi, bytecode, network,
     timestamp, author
   }
   ↓
3. IPFSService.uploadToIPFS()
   ↓
4. Check Pinata API configuration
   ├─ If configured: Upload to Pinata
   └─ If not: Fallback to localStorage
   ↓
5. Return IPFS hash (or local reference)
   ↓
6. Save hash to storage for future retrieval

🛠️ Service Layer Detail

BlockchainService (`src/lib/blockchain.ts`)

Fungsi Utama / Main Functions:

// Initialize provider dengan network
initializeProvider(chainId: number): JsonRpcProvider

// Deploy smart contract
deployContract(
  sourceCode: string,
  contractName: string,
  signer: Signer,
  constructorArgs?: any[]
): Promise<{
  address: string;
  transactionHash: string;
  blockNumber: number;
}>

// Estimate gas untuk deployment
estimateGas(
  sourceCode: string,
  signer: Signer
): Promise<bigint>

// Switch network di MetaMask
switchNetwork(chainId: number): Promise<void>

// Get block explorer URL
getExplorerUrl(
  chainId: number,
  address: string,
  type: 'address' | 'tx'
): string

Supported Networks:

Base Mainnet: https://mainnet.base.org
Base Sepolia: https://sepolia.base.org
Ethereum: https://eth.llamarpc.com
Sepolia: https://rpc.sepolia.org

IPFSService (`src/lib/ipfs.ts`)

Fungsi Utama / Main Functions:

// Upload contract metadata ke IPFS
uploadToIPFS(metadata: ContractMetadata): Promise<string>

// Retrieve metadata dari IPFS
getFromIPFS(hash: string): Promise<ContractMetadata>

// Check Pinata API configuration
isPinataConfigured(): boolean

// Generate metadata object
generateMetadata(
  name: string,
  code: string,
  network: string,
  author?: string
): ContractMetadata

Metadata Structure:

{
  "name": "Contract Name",
  "description": "Description",
  "sourceCode": "// Solidity code",
  "abi": [...],
  "bytecode": "0x...",
  "compiler": "0.8.20",
  "network": "Base",
  "timestamp": 1234567890,
  "author": "0x...",
  "ipfsHash": "Qm..."
}

StorageService (`src/lib/storage.ts`)

Fungsi Utama / Main Functions:

// Community discussions
saveDiscussion(discussion: Discussion): void
getDiscussions(): Discussion[]

// Template submissions
saveTemplate(template: Template): void
getTemplates(): Template[]

// Code reviews
saveReview(review: Review): void
getReviews(templateId?: string): Review[]

// Shared projects
saveProject(project: Project): void
getProjects(): Project[]

// Deployments
saveDeployment(deployment: Deployment): void
getDeployments(): Deployment[]

Data Persistence:

Menggunakan localStorage untuk browser persistence
Data survive page refresh dan browser restart
Key prefix: sct_ untuk namespace isolation

🎨 Design System

Color Palette (Neon Web3 Theme)

--primary: Cyan (#00F0FF) - Main actions
--secondary: Purple (#9D4EDD) - Secondary actions
--accent: Pink (#FF006E) - Highlights
--background: Dark (#0A0A0F) - App background
--foreground: White (#FFFFFF) - Text
--border: Neon Blue (#00F0FF33) - Borders

Typography

Headings: Geist (Modern sans-serif)
Code: Geist Mono (Monospace)
Body: Default system fonts

UI Components

Framework: shadcn/ui
Icons: Lucide React
Animations: Tailwind transitions
Responsive: Mobile-first approach

🔐 Security Considerations

Wallet Security

Never request private keys
All transactions require user confirmation
Clear gas fee display before confirmation
Network verification before deployment

Smart Contract Security

Templates provided as-is (user responsibility)
Recommend audit before mainnet deployment
Test on testnet first (Sepolia/Base Sepolia)
Display security warnings for high-value contracts

Data Privacy

No personal data collection
Wallet addresses only stored locally
IPFS metadata is public by design
Community data encrypted in localStorage

🚀 Deployment Checklist

Before Publishing:

✅ Environment Variables (Optional for enhanced features):

# Pinata IPFS (Optional - fallback to localStorage if not set)
NEXT_PUBLIC_PINATA_API_KEY=your_api_key
NEXT_PUBLIC_PINATA_SECRET_KEY=your_secret_key

# Blockchain RPC (Optional - uses public RPCs by default)
NEXT_PUBLIC_BASE_RPC=https://mainnet.base.org
NEXT_PUBLIC_SEPOLIA_RPC=https://rpc.sepolia.org

✅ Build Verification:

TypeScript compilation passes
No ESLint errors
All imports resolved
Build completes successfully

✅ Functionality Tests:

✅ Browser Compatibility:

Chrome/Edge (Recommended)
Firefox
Safari (Limited MetaMask support)
Brave (Full support)

✅ Responsive Design:

Desktop (1920px+)
Laptop (1024px-1920px)
Tablet (768px-1024px)
Mobile (320px-768px)

📱 User Guide (Quick Start)

Bahasa Indonesia:

1. Menjelajahi Template

Buka aplikasi → Lihat 21+ template smart contract
Filter berdasarkan kategori (NFT, DeFi, DAO, dll)
Klik "Preview" untuk melihat fungsi contract
Klik "View Code" untuk melihat source code lengkap

2. Deploy Smart Contract

Pilih template yang diinginkan
Klik "Deploy to Blockchain"
Connect MetaMask wallet
Pilih network (Base Mainnet untuk produksi, Sepolia untuk testing)
Review estimasi gas fees
Confirm transaction di MetaMask
Tunggu konfirmasi (biasanya 15-30 detik)
Copy contract address atau view di block explorer

3. Berpartisipasi di Community

Navigasi ke "Community" tab
Start Discussion: Post pertanyaan atau tips
Submit Template: Upload template smart contract milik Anda
Review Code: Berikan rating dan feedback
Share Project: Showcase hasil deployment Anda

4. Export Template

Klik "View Code" pada template
Pilih export method:
- Copy: Salin ke clipboard
- Download: Download sebagai .sol file
- IPFS: Upload ke IPFS dan dapatkan hash

English:

1. Browse Templates

Open app → View 21+ smart contract templates
Filter by category (NFT, DeFi, DAO, etc.)
Click "Preview" to see contract functionality
Click "View Code" to view full source code

2. Deploy Smart Contract

Select desired template
Click "Deploy to Blockchain"
Connect MetaMask wallet
Choose network (Base Mainnet for production, Sepolia for testing)
Review gas fee estimate
Confirm transaction in MetaMask
Wait for confirmation (typically 15-30 seconds)
Copy contract address or view on block explorer

3. Community Participation

Navigate to "Community" tab
Start Discussion: Post questions or tips
Submit Template: Upload your own smart contract template
Review Code: Give ratings and feedback
Share Project: Showcase your deployments

4. Export Template

Click "View Code" on template
Choose export method:
- Copy: Copy to clipboard
- Download: Download as .sol file
- IPFS: Upload to IPFS and get hash

🐛 Troubleshooting

Common Issues & Solutions:

1. MetaMask Not Connecting

Problem: "Connect Wallet" tidak response
Solution: 
  - Refresh halaman
  - Check MetaMask extension terpasang
  - Unlock MetaMask wallet
  - Coba browser lain (Chrome/Brave recommended)

2. Transaction Failed

Problem: Deployment gagal dengan error
Solution:
  - Check saldo ETH/token cukup untuk gas
  - Switch ke network yang benar
  - Increase gas limit jika perlu
  - Coba lagi setelah beberapa menit (network congestion)

3. IPFS Upload Failed

Problem: Template tidak tersimpan ke IPFS
Solution:
  - Check Pinata API keys di environment variables
  - Fallback: Data tersimpan di localStorage
  - Verify internet connection
  - File size < 10MB

4. Network Switch Failed

Problem: Tidak bisa ganti network
Solution:
  - Ganti network manual di MetaMask
  - Ensure network sudah ditambahkan di MetaMask
  - Untuk Base: Tambahkan via Chainlist.org

5. Template Not Displaying

Problem: Template cards kosong
Solution:
  - Hard refresh (Ctrl+Shift+R)
  - Clear browser cache
  - Check console untuk errors
  - Verify JavaScript enabled

🔮 Future Enhancements (Roadmap)

Phase 4: Advanced Features

Phase 5: Social Features

Phase 6: Developer Tools

Phase 7: Enterprise Features

📞 Support & Resources

Official Links

Website: https://smartourism.elpeef.com
Email: support@elpeef.com
Documentation: This file

Community

Start discussion di Community Hub
Share your deployments
Submit templates for review

Technical Support

Check Troubleshooting section above
Review console errors (F12)
Test on different browsers
Verify MetaMask setup

📄 License & Credits

Technologies Used

Framework: Next.js 15+ (React 19)
Blockchain: ethers.js v6, wagmi
Storage: Pinata SDK (IPFS)
UI: shadcn/ui, Tailwind CSS
Icons: Lucide React

Smart Contract Templates

Templates provided as educational resources
Use at your own risk
Audit before mainnet deployment
No warranty or liability

Platform Credits

Built by: STC (Smart Tourism Chain) Ecosystem
Platform: SCT by STC
Version: 1.0.0
Last Updated: 2025-08-10

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
DOCUMENTATION.md		DOCUMENTATION.md
LICENSE		LICENSE
README.md		README.md
app.py		app.py

License

mrbrightsides/sct

Folders and files

Latest commit

History

Repository files navigation

📚 SCT by STC - Platform Documentation

Smart Contract Template Marketplace

🌟 Ringkasan Aplikasi / App Summary

🎯 Fitur Utama / Key Features

1. Template Library (21+ Templates)

2. Real Blockchain Integration 🔗

3. One-Click Deployment 🚀

4. IPFS Storage Integration 📦

5. Community Hub 👥

a. Start Discussion

b. Submit Template

c. Review Code

d. Share Project

🏗️ Arsitektur Aplikasi / App Architecture

📂 Struktur File / File Structure

Core Application

🔄 Alur Kerja Aplikasi / App Workflow

1. User Journey - Browse Templates

2. User Journey - Deploy Contract

3. User Journey - Community Engagement

4. Technical Flow - Smart Contract Deployment

5. Technical Flow - IPFS Storage

🛠️ Service Layer Detail

BlockchainService (src/lib/blockchain.ts)

IPFSService (src/lib/ipfs.ts)

StorageService (src/lib/storage.ts)

🎨 Design System

Color Palette (Neon Web3 Theme)

Typography

UI Components

🔐 Security Considerations

Wallet Security

Smart Contract Security

Data Privacy

🚀 Deployment Checklist

Before Publishing:

📱 User Guide (Quick Start)

Bahasa Indonesia:

English:

🐛 Troubleshooting

Common Issues & Solutions:

🔮 Future Enhancements (Roadmap)

Phase 4: Advanced Features

Phase 5: Social Features

Phase 6: Developer Tools

Phase 7: Enterprise Features

📞 Support & Resources

Official Links

Community

Technical Support

📄 License & Credits

Technologies Used

Smart Contract Templates

Platform Credits

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

BlockchainService (`src/lib/blockchain.ts`)

IPFSService (`src/lib/ipfs.ts`)

StorageService (`src/lib/storage.ts`)

Packages