diff --git a/src/features/Web3/components/Success/ExplorerLink.tsx b/src/features/Web3/components/Success/ExplorerLink.tsx new file mode 100644 index 00000000..63d8cd0d --- /dev/null +++ b/src/features/Web3/components/Success/ExplorerLink.tsx @@ -0,0 +1,19 @@ +import { $txHash } from '@features/Web3/stores' +import { useStore } from '@nanostores/react' + +export function ExplorerLink({ + url, + children +}: { + url: string | undefined + children: React.ReactNode +}) { + const txHash = useStore($txHash) + const explorerLink = `${url}/tx/${txHash}` + + return ( + + {children} + + ) +} diff --git a/src/features/Web3/components/Success/Success.tsx b/src/features/Web3/components/Success/Success.tsx index a2251027..940e270d 100644 --- a/src/features/Web3/components/Success/Success.tsx +++ b/src/features/Web3/components/Success/Success.tsx @@ -2,29 +2,30 @@ import { $txHash, $isInitSend } from '@features/Web3/stores' import { useStore } from '@nanostores/react' import styles from './Success.module.css' import { useNetwork } from 'wagmi' +import { ExplorerLink } from './ExplorerLink' + +const title = `You're amazing, thanks!` +const description = `Your transaction is on its way. You can check the status on` export function Success() { const { chain } = useNetwork() const txHash = useStore($txHash) const explorerName = chain?.blockExplorers?.default.name - const explorerLink = `${chain?.blockExplorers?.default.url}/tx/${txHash}` + const explorerUrl = chain?.blockExplorers?.default.url return (
-
You're amazing, thanks!
+
{title}

- Your transaction is on its way. You can check the status on{' '} - - {explorerName} - - . + {description}{' '} + {explorerName}.

- + {txHash} - +