55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
|
|
import { toast } from 'react-toastify'
|
|
|
|
export const withToast = (promise) => {
|
|
toast.promise(
|
|
promise,
|
|
{
|
|
pending: {
|
|
render(){
|
|
return (
|
|
<div className="p-6 py-2">
|
|
<p className="mb-2">
|
|
Your transaction is being processed.
|
|
</p>
|
|
<p>
|
|
Hang tight... Just few more moments.
|
|
</p>
|
|
</div>
|
|
)
|
|
},
|
|
icon: false,
|
|
},
|
|
success: {
|
|
render({data}){
|
|
return (
|
|
<div>
|
|
<p className="font-bold">Tx: {data.transactionHash.slice(0, 20)}...</p>
|
|
<p>
|
|
Has been succesfuly processed.
|
|
</p>
|
|
<a
|
|
href={`https://ropsten.etherscan.io/tx/${data.transactionHash}`}
|
|
target="_blank"
|
|
>
|
|
<i className="text-indigo-600 underline">See Tx Details</i>
|
|
</a>
|
|
</div>
|
|
)
|
|
},
|
|
// other options
|
|
icon: "🟢",
|
|
},
|
|
error: {
|
|
render({data}){
|
|
// When the promise reject, data will contains the error
|
|
return <div>{data.message ?? "Transaction has failed"}</div>
|
|
}
|
|
}
|
|
},
|
|
{
|
|
closeButton: true
|
|
}
|
|
)
|
|
}
|