트랜잭션
Volr SDK에서 트랜잭션이 어떻게 작동하는지 이해하고 처리 방법을 알아보세요.
트랜잭션 플로우
사용자가 결제를 할 때 다음 트랜잭션 플로우가 발생합니다:
트랜잭션 상태
트랜잭션은 여러 상태를 거칩니다:
- Pending: 트랜잭션이 생성 중입니다
- Signing: 사용자가 패스키로 트랜잭션을 서명 중입니다
- Broadcasting: 트랜잭션이 네트워크에 브로드캐스트 중입니다
- Confirming: 블록체인 확인을 대기 중입니다
- Confirmed: 블록체인에서 트랜잭션이 확인되었습니다
- Failed: 트랜잭션이 실패했습니다
트랜잭션 모니터링
Payment Handlers 사용
Payment handlers를 사용하여 트랜잭션 진행 상황을 모니터링합니다:
import { useVolrPay } from '@volr/react-ui';
function PaymentButton() {
const { pay } = useVolrPay();
const handlePay = () => {
pay({
amount: '10.00',
currency: 'USDC',
onSuccess: (result) => {
console.log('Transaction hash:', result.txHash);
console.log('Transaction confirmed!');
},
onError: (error) => {
console.error('Transaction failed:', error);
},
});
};
return <button onClick={handlePay}>Pay</button>;
}
Payment Result
onSuccess 콜백은 결제 결과를 받습니다:
interface PaymentResult {
id: string; // Payment ID
txHash: string; // Transaction hash
status: 'confirmed'; // Payment status
amount: string; // Payment amount
currency: string; // Payment currency
createdAt: string; // Payment timestamp
}
트랜잭션 해시
블록 탐색기에서 추적할 수 있도록 트랜잭션 해시를 가져옵니다:
pay({
amount: '10.00',
currency: 'USDC',
onSuccess: (result) => {
const txHash = result.txHash;
const explorerUrl = `https://basescan.org/tx/${txHash}`;
console.log('View on explorer:', explorerUrl);
},
});
오류 처리
트랜잭션 오류를 처리합니다:
pay({
amount: '10.00',
currency: 'USDC',
onError: (error) => {
if (error.message.includes('user rejected')) {
// 사용자가 트랜잭션 취소
console.log('Transaction cancelled by user');
} else if (error.message.includes('insufficient')) {
// 잔액 부족
console.log('Insufficient balance');
} else if (error.message.includes('network')) {
// 네트워크 오류
console.log('Network error, please retry');
} else {
// 기타 오류
console.error('Transaction error:', error);
}
},
});
트랜잭션 내역
트랜잭션 내역을 확인합니다:
import { useVolrModal } from '@volr/react-ui';
function PaymentHistory() {
const { open } = useVolrModal();
return (
<button onClick={() => open({ mode: 'account' })}>
View Payment History
</button>
);
}
또는 API를 직접 사용합니다:
import { useVolrPaymentApi } from '@volr/react';
function PaymentHistoryList() {
const { getPaymentHistory } = useVolrPaymentApi();
const [payments, setPayments] = useState([]);
useEffect(() => {
getPaymentHistory({ limit: 10 }).then(setPayments);
}, []);
return (
<ul>
{payments.map((payment) => (
<li key={payment.id}>
{payment.amount} {payment.currency} - {payment.txHash}
</li>
))}
</ul>
);
}
모범 사례
1. 트랜잭션 상태 표시
항상 사용자에게 트랜잭션 상태를 표시합니다:
const [txStatus, setTxStatus] = useState<'idle' | 'pending' | 'success' | 'error'>('idle');
pay({
amount: '10.00',
currency: 'USDC',
onSuccess: () => {
setTxStatus('success');
},
onError: () => {
setTxStatus('error');
},
});
return (
<div>
{txStatus === 'pending' && <div>Processing transaction...</div>}
{txStatus === 'success' && <div>Transaction confirmed!</div>}
{txStatus === 'error' && <div>Transaction failed</div>}
</div>
);
2. 트랜잭션 링크 제공
블록 탐색기로 링크를 제공합니다:
pay({
amount: '10.00',
currency: 'USDC',
onSuccess: (result) => {
const explorerUrl = `https://basescan.org/tx/${result.txHash}`;
// 사용자에게 링크 표시
window.open(explorerUrl, '_blank');
},
});
3. 타임아웃 처리
오래 걸리는 트랜잭션을 처리합니다:
const [isProcessing, setIsProcessing] = useState(false);
pay({
amount: '10.00',
currency: 'USDC',
onSuccess: () => {
setIsProcessing(false);
},
onError: () => {
setIsProcessing(false);
},
});
// 처리 시간이 너무 오래 걸리면 타임아웃 메시지 표시
useEffect(() => {
if (isProcessing) {
const timeout = setTimeout(() => {
alert('Transaction is taking longer than expected. Please check your wallet.');
}, 60000); // 1분
return () => clearTimeout(timeout);
}
}, [isProcessing]);
배치 트랜잭션
여러 트랜잭션이 필요한 복잡한 작업의 경우, 배치 트랜잭션을 사용하여 단일 요청으로 묶을 수 있습니다.