Skip to main content

Send Transactions

This tutorial will make you understand how to send a transaction and allow users to buy some tickets through the lottery dapp.

image

Here is the completed Git repo for this part

Buy Tickets

Open the file src\Pages\Home\Play.jsx. Add a method called buyTicket. Note that you should add a key uid to the message which will be sent to Lamden Vault. It's useful to help you figure out which message of responese is for your transaction.

const buyTicket = () => {
setTxPending(true)
uid.current = new Date().toISOString()
const detail = JSON.stringify({
uid: uid.current,
networkType: networkType,
methodName: 'buy',
kwargs: {
ticket: selectedFruit,
amount: parseInt(amountValue),
round_num: currentRound
},
stampLimit: 300
})

//Send transaction to the wallet
document.dispatchEvent(new CustomEvent('lamdenWalletSendTx', {detail}));
}
info

For more details about send transaction, click here.

Next we should add a listener for lamdenWalletTxStatus event. It will get you know the result of the transaction you've send. We can use the attribute "uid" to distinguish responses.

useEffect(() => {
const handleTxInfo = (response) => {
console.log(response)
if (response.detail.data.errors) {
// Tell user the tx is failed
toast({
title: 'Wallet Error',
description: response.detail.data.errors[0],
status: 'error',
duration: 9000,
position: 'top',
isClosable: true,
})
}else{
let data = response.detail.data.resultInfo
// check whether this response is we want
if (uid.current !== response.detail.data.uid) {
return
}

// Tell user the result of tx.
toast({
title: data.title,
description: `${data.subtitle}`,
status: 'success',
duration: 9000,
position: 'top',
isClosable: true,
})
setTxPending(false)
}
}

document.addEventListener('lamdenWalletTxStatus', handleTxInfo)

return () => {
document.removeEventListener('lamdenWalletTxStatus', handleTxInfo)
}
}, [])

Now, click the button Buy Tickets to show the back of draw card. Select a fruit you want to buy and input the amount you want to spend.

image

Click button Confirm and wait a minute.

image

Claim Prize

If you win the lottery, then you will want to claim your prize. Open the file src\Pages\Home\Claim.jsx. It is time to complete the function claimBonus() in component "Round". Same to the last section that we send a transaction to call the cliam() method of the lottery contract.

const claimBonus = () => {
setTxPending(false)
uid.current = new Date().toISOString()
const detail = JSON.stringify({
uid: uid.current,
networkType: networkType,
methodName: 'claim',
kwargs: {
round_num: parseInt(data.id)
},
stampLimit: 300
})

//Send transaction to the wallet
document.dispatchEvent(new CustomEvent('lamdenWalletSendTx', {detail}));
}
useEffect(() => {
const handleTxInfo = (response) => {
console.log(response)
if (response.detail.data.errors) {
toast({
title: 'Wallet Error',
description: response.detail.data.errors[0],
status: 'error',
duration: 9000,
position: 'top',
isClosable: true,
})
}else{
let data = response.detail.data.resultInfo
if (uid.current !== response.detail.data.uid) {
return
}

toast({
title: data.title,
description: `${data.subtitle}`,
status: 'success',
duration: 9000,
position: 'top',
isClosable: true,
})
setTxPending(false)
}
}

document.addEventListener('lamdenWalletTxStatus', handleTxInfo)

return () => {
document.removeEventListener('lamdenWalletTxStatus', handleTxInfo)
}
}, [])

Save the code above and have a try.

image

Click the "Claim" button to get your prize.

image

Congratulations you have completed your dapp !