mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-28 16:48:00 +02:00
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { type ReactElement } from 'react'
|
|
import styles from './Alert.module.css'
|
|
|
|
export function getTransactionMessage(transactionHash?: string): {
|
|
[key: string]: string
|
|
} {
|
|
return {
|
|
transaction: `<a href="https://etherscan.io/tx/${transactionHash}" target="_blank">See your transaction on etherscan.io.</a>`,
|
|
waitingForUser: 'Waiting for your confirmation',
|
|
waitingConfirmation: 'Waiting for network confirmation, hang on',
|
|
success: 'Confirmed. You are awesome, thanks!'
|
|
}
|
|
}
|
|
|
|
function constructMessage(
|
|
transactionHash: string,
|
|
message?: { text?: string }
|
|
): string | undefined {
|
|
return transactionHash
|
|
? message?.text +
|
|
'<br /><br />' +
|
|
getTransactionMessage(transactionHash).transaction
|
|
: message && message.text
|
|
}
|
|
|
|
const classes = (status: string) =>
|
|
status === 'success'
|
|
? styles.success
|
|
: status === 'error'
|
|
? styles.error
|
|
: styles.alert
|
|
|
|
export default function Alert({
|
|
transactionHash,
|
|
message
|
|
}: {
|
|
transactionHash?: string
|
|
message: { text?: string; status?: string }
|
|
}): ReactElement {
|
|
return (
|
|
<div
|
|
className={classes(message.status || '')}
|
|
dangerouslySetInnerHTML={{
|
|
__html: `${constructMessage(transactionHash as string, message)}`
|
|
}}
|
|
/>
|
|
)
|
|
}
|