DApp交互API：Web3钱包连接与签名完全指南

การพัฒนา DApp บน Web3 ต้องเผชิญกับความท้าทายมากมาย โดยเฉพาะการเชื่อมต่อกระเป๋าเงินดิจิทัล (Wallet) และการลงนามธุรกรรม (Transaction Signing) บทความนี้จะอธิบายวิธีการแก้ปัญหา ConnectionError: timeout และ 401 Unauthorized ที่พบบ่อย พร้อมแนะนำวิธีใช้ HolySheep AI เพื่อเพิ่มประสิทธิภาพการทำงาน

ทำไมการเชื่อมต่อ DApp ถึงล้มเหลวบ่อย

ปัญหาหลักที่นักพัฒนามักเจอเมื่อทำ DApp Integration:

• Provider ไม่ติดตั้ง - ผู้ใช้ไม่มี MetaMask หรือกระเป๋าเงินอื่น
• Network Mismatch - ต่อ Mainnet แต่ DApp ต้องการ Testnet
• Signature Rejection - ผู้ใช้ปฏิเสธการลงนาม
• Timeout - RPC Node ตอบสนองช้าเกินไป

การตรวจสอบและเชื่อมต่อ Web3 Wallet

ขั้นตอนแรกคือการสร้างฟังก์ชันตรวจสอบว่าผู้ใช้มี Wallet ติดตั้งหรือไม่ และเชื่อมต่ออย่างปลอดภัย

1. ตรวจสอบ Ethereum Provider

// DApp Web3 Connection with Error Handling
const HOLYSHEEP_API_KEY = 'YOUR_HOLYSHEEP_API_KEY';
const HOLYSHEEP_BASE_URL = 'https://api.holysheep.ai/v1';

class Web3Connector {
    constructor() {
        this.provider = null;
        this.signer = null;
        this.address = null;
    }

    // ตรวจสอบว่ามี Ethereum Provider หรือไม่
    checkProvider() {
        if (window.ethereum) {
            this.provider = window.ethereum;
            return true;
        }
        
        // กรณีไม่มี MetaMask - แนะนำติดตั้ง
        console.error('MetaMask not found. Please install MetaMask extension.');
        return false;
    }

    // เชื่อมต่อกระเป๋าเงิน
    async connect() {
        if (!this.checkProvider()) {
            throw new Error('No Ethereum provider available');
        }

        try {
            // ขอสิทธิ์เข้าถึงบัญชี
            const accounts = await this.provider.request({
                method: 'eth_requestAccounts'
            });
            
            this.address = accounts[0];
            console.log('Connected:', this.address);
            return this.address;
            
        } catch (error) {
            if (error.code === 4001) {
                throw new Error('User rejected connection');
            }
            throw error;
        }
    }

    // ตรวจสอบการเชื่อมต่อปัจจุบัน
    async checkConnection() {
        try {
            const accounts = await window.ethereum.request({
                method: 'eth_accounts'
            });
            
            if (accounts.length > 0) {
                this.address = accounts[0];
                return true;
            }
            return false;
        } catch (error) {
            console.error('Connection check failed:', error);
            return false;
        }
    }
}

// ใช้งาน
const web3Connector = new Web3Connector();

// ตรวจสอบเมื่อโหลดหน้า
if (web3Connector.checkProvider()) {
    web3Connector.checkConnection().then(connected => {
        if (connected) {
            console.log('Already connected!');
        }
    });
}

2. การลงนามข้อความ (Personal Sign)

การลงนามข้อความเป็นวิธียืนยันว่าผู้ใช้เป็นเจ้าของกระเป๋าเงินจริง โดยไม่ต้องจ่ายค่า Gas

// Personal Sign - ลงนามข้อความด้วย Web3
class Web3Signer {
    constructor(provider) {
        this.provider = provider;
    }

    // ลงนามข้อความเพื่อยืนยันตัวตน
    async personalSign(message, address) {
        try {
            const signature = await this.provider.request({
                method: 'personal_sign',
                params: [message, address]
            });
            
            return {
                success: true,
                signature: signature,
                message: message
            };
            
        } catch (error) {
            // จัดการข้อผิดพลาดต่างๆ
            if (error.code === 4001) {
                return { 
                    success: false, 
                    error: 'User rejected signature' 
                };
            }
            
            return { 
                success: false, 
                error: error.message 
            };
        }
    }

    // ตรวจสอบลายเซ็น
    async verifySignature(message, signature, expectedAddress) {
        try {
            const recoveredAddress = await this.provider.request({
                method: 'personal_ecRecover',
                params: [message, signature]
            });
            
            return recoveredAddress.toLowerCase() === expectedAddress.toLowerCase();
        } catch (error) {
            return false;
        }
    }
}

// ตัวอย่างการใช้งาน
async function authenticateUser() {
    const connector = new Web3Connector();
    await connector.connect();
    
    const signer = new Web3Signer(connector.provider);
    
    // ข้อความที่ต้องลงนาม
    const message = Welcome to DApp!\nTimestamp: ${Date.now()}\nWallet: ${connector.address};
    
    const result = await signer.personalSign(message, connector.address);
    
    if (result.success) {
        // ส่ง signature ไปยัง Backend เพื่อตรวจสอบ
        console.log('Signature:', result.signature);
    }
}

3. การลงนามธุรกรรม (Transaction Signing)

การส่งธุรกรรมบน Blockchain ต้องผ่านการลงนามด้วย Private Key ที่อยู่ในกระเป๋าเงิน

// Transaction Signing with HolySheep AI Integration
class TransactionSigner {
    constructor(provider) {
        this.provider = provider;
        this.baseUrl = HOLYSHEEP_BASE_URL;
    }

    // ดึงราคา Gas ปัจจุบัน
    async getGasPrice() {
        try {
            const gasPrice = await this.provider.request({
                method: 'eth_gasPrice'
            });
            return parseInt(gasPrice, 16);
        } catch (error) {
            console.error('Failed to get gas price:', error);
            return null;
        }
    }

    // ส่งธุรกรรม ERC-20 Token Transfer
    async transferToken(tokenAddress, toAddress, amount, onSuccess, onError) {
        try {
            // เตรียมข้อมูลธุรกรรม
            const fromAddress = (await this.provider.request({
                method: 'eth_accounts'
            }))[0];

            const txData = {
                to: tokenAddress,
                from: fromAddress,
                data: this.encodeTransferToken(toAddress, amount)
            };

            // ขอ URL วิเคราะห์ธุรกรรมจาก HolySheep
            const analysisResult = await this.analyzeWithAI(txData);
            
            if (!analysisResult.safe) {
                throw new Error(Warning: ${analysisResult.warning});
            }

            // ลงนามและส่งธุรกรรม
            const txHash = await this.provider.request({
                method: 'eth_sendTransaction',
                params: [txData]
            });

            return { success: true, txHash: txHash };

        } catch (error) {
            return { success: false, error: error.message };
        }
    }

    // วิเคราะห์ธุรกรรมด้วย AI
    async analyzeWithAI(txData) {
        try {
            const response = await fetch(${this.baseUrl}/chat/completions, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': Bearer ${HOLYSHEEP_API_KEY}
                },
                body: JSON.stringify({
                    model: 'gpt-4.1',
                    messages: [{
                        role: 'system',
                        content: 'Analyze this transaction for safety. Check if the recipient address is known malicious.'
                    }, {
                        role: 'user',
                        content: Analyze transaction: To: ${txData.to}, Data: ${txData.data}
                    }]
                })
            });

            if (!response.ok) {
                throw new Error(API Error: ${response.status});
            }

            const data = await response.json();
            return { safe: true, analysis: data.choices[0].message.content };
            
        } catch (error) {
            // กรณี API ล่ม ยังคงอนุญาตธุรกรรม
            console.warn('AI analysis failed, proceeding anyway:', error);
            return { safe: true };
        }
    }

    // Encode ข้อมูล ERC-20 Transfer
    encodeTransferToken(to, amount) {
        const methodId = '0xa9059cbb';
        const paddedTo = to.slice(2).padStart(64, '0');
        const paddedAmount = amount.toString(16).padStart(64, '0');
        return '0x' + methodId + paddedTo + paddedAmount;
    }
}

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

กรณีที่ 1: ConnectionError: timeout

สาเหตุ: RPC Node ตอบสนองช้าเกินไปหรือไม่ตอบสนองเลย

// วิธีแก้ไข: ตั้งค่า Timeout และ Fallback Provider
const FALLBACK_RPC_URLS = [
    'https://eth.llamarpc.com',
    'https://rpc.ankr.com/eth',
    'https://ethereum.publicnode.com'
];

async function withTimeout(promise, ms = 5000) {
    const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => reject(new Error('ConnectionError: timeout')), ms);
    });
    return Promise.race([promise, timeoutPromise]);
}

async function getWeb3Provider() {
    for (const rpcUrl of FALLBACK_RPC_URLS) {
        try {
            const response = await withTimeout(
                fetch(rpcUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        jsonrpc: '2.0',
                        method: 'eth_blockNumber',
                        params: [],
                        id: 1
                    })
                }),
                3000
            );
            
            if (response.ok) {
                return new ethers.providers.JsonRpcProvider(rpcUrl);
            }
        } catch (e) {
            console.warn(RPC ${rpcUrl} failed:, e.message);
            continue;
        }
    }
    
    throw new Error('All RPC providers failed');
}

กรณีที่ 2: 401 Unauthorized

สาเหตุ: API Key ไม่ถูกต้องหรือหมดอายุ

// วิธีแก้ไข: ตรวจสอบและจัดการ API Key
async function callHolySheepAPI(endpoint, payload) {
    const apiKey = localStorage.getItem('HOLYSHEEP_API_KEY');
    
    if (!apiKey) {
        throw new Error('401 Unauthorized: API key not found');
    }

    const response = await fetch(${HOLYSHEEP_BASE_URL}${endpoint}, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': Bearer ${apiKey}
        },
        body: JSON.stringify(payload)
    });

    // จัดการกรณี 401
    if (response.status === 401) {
        localStorage.removeItem('HOLYSHEEP_API_KEY');
        throw new Error('401 Unauthorized: Invalid or expired API key');
    }

    if (!response.ok) {
        throw new Error(API Error: ${response.status});
    }

    return response.json();
}

// ฟังก์ชันตรวจสอบ API Key ก่อนใช้งาน
async function validateAPIKey(apiKey) {
    try {
        const response = await fetch(${HOLYSHEEP_BASE_URL}/models, {
            headers: {
                'Authorization': Bearer ${apiKey}
            }
        });
        return response.ok;
    } catch {
        return false;
    }
}

กรณีที่ 3: User rejected signature (Error Code 4001)

สาเหตุ: ผู้ใช้ปฏิเสธการลงนามใน MetaMask

// วิธีแก้ไข: แสดงข้อความและให้ทำซ้ำ
class SignatureHandler {
    constructor() {
        this.maxRetries = 3;
        this.retryCount = 0;
    }

    async signWithRetry(signer, message, address) {
        while (this.retryCount < this.maxRetries) {
            try {
                const result = await signer.personalSign(message, address);
                
                if (result.success) {
                    this.retryCount = 0; // รีเซ็ตเมื่อสำเร็จ
                    return result;
                }
                
                throw new Error(result.error);
                
            } catch (error) {
                this.retryCount++;
                
                if (error.code === 4001) {
                    if (this.retryCount < this.maxRetries) {
                        const userChoice = confirm(
                            'คุณปฏิเสธการลงนาม\n' +
                            'ต้องการลองอีกครั้งหรือไม่? ' +
                            (${this.retryCount}/${this.maxRetries})
                        );
                        
                        if (!userChoice) {
                            return { success: false, error: 'User cancelled' };
                        }
                        continue;
                    }
                }
                
                return { success: false, error: error.message };
            }
        }
        
        return { success: false, error: 'Max retries exceeded' };
    }
}

การใช้ HolySheep AI เพื่อวิเคราะห์ธุรกรรม

HolySheep AI มีความเร็วในการตอบสนองน้อยกว่า 50 มิลลิวินาที รองรับโมเดลหลากหลาย เช่น GPT-4.1, Claude Sonnet 4.5 และ DeepSeek V3.2 ในราคาที่ประหยัดถึง 85% เมื่อเทียบกับบริการอื่น

// วิเคราะห์ความปลอดภัยของธุรกรรมด้วย HolySheep AI
async function analyzeTransactionSafety(txData, apiKey) {
    const systemPrompt = `คุณคือผู้เชี่ยวชาญด้านความปลอดภัย Blockchain 
    วิเคราะห์ธุรกรรมและตรวจสอบว่าปลอดภัยหรือไม่`;

    const userPrompt = `
    ตรวจสอบธุรกรรมนี้:
    - ที่อยู่ผู้รับ: ${txData.to}
    - จำนวนเงิน: ${txData.value} wei
    - ข้อมูล: ${txData.data || 'ไม่มี'}
    
    ระบุ:
    1. ความเสี่ยง (สูง/กลาง/ต่ำ)
    2. คำแนะนำ
    3. ควรดำเนินการต่อหรือไม่`;

    try {
        const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': Bearer ${apiKey}
            },
            body: JSON.stringify({
                model: 'deepseek-v3.2',
                messages: [
                    { role: 'system', content: systemPrompt },
                    { role: 'user', content: userPrompt }
                ],
                temperature: 0.3 // ความแม่นยำสูง
            })
        });

        if (!response.ok) {
            throw new Error(HTTP ${response.status});
        }

        const result = await response.json();
        return result.choices[0].message.content;
        
    } catch (error) {
        console.error('Analysis failed:', error);
        return 'ไม่สามารถวิเคราะห์ได้ กรุณาตรวจสอบด้วยตนเอง';
    }
}

สรุปแนวทางปฏิบัติที่ดีที่สุด

• ตรวจสอบ Provider ก่อนเชื่อมต่อ - แจ้งผู้ใช้ติดตั้ง MetaMask หากยังไม่มี
• จัดการ Timeout อย่างเหมาะสม - ใช้ Fallback RPC เมื่อ Provider หลักล่ม
• เก็บ API Key ปลอดภัย - ใช้ Environment Variables ไม่ Hardcode ในโค้ด
• ใช้ AI วิเคราะห์ธุรกรรม - ป้องกันผู้ใช้ส่งเงินไปยังที่อยู่ประสงค์ร้าย
• แสดงข้อผิดพลาดที่เข้าใจง่าย - แปลรหัสข้อผิดพลาดเป็นภาษาที่ผู้ใช้เข้าใจ

การพัฒนา DApp ที่มีความปลอดภัยต้องคำนึงถึงประสบการณ์ผู้ใช้และการจัดการข้อผิดพลาดอย่างครบถ้วน การใช้เครื่องมือ AI อย่าง HolySheep AI ช่วยให้การวิเคราะห์ธุรกรรมรวดเร็วและแม่นยำ

👉 สมัคร HolySheep AI — รับเครดิตฟรีเมื่อลงทะเบียน