diff --git a/src/components/atoms/SuccessConfetti.module.css b/src/components/atoms/SuccessConfetti.module.css new file mode 100644 index 000000000..e28b14524 --- /dev/null +++ b/src/components/atoms/SuccessConfetti.module.css @@ -0,0 +1,4 @@ +.action { + text-align: center; + display: block; +} diff --git a/src/components/pages/Publish/Success.tsx b/src/components/atoms/SuccessConfetti.tsx similarity index 58% rename from src/components/pages/Publish/Success.tsx rename to src/components/atoms/SuccessConfetti.tsx index c6f94e130..25d8f7052 100644 --- a/src/components/pages/Publish/Success.tsx +++ b/src/components/atoms/SuccessConfetti.tsx @@ -1,8 +1,7 @@ -import Alert from '../../atoms/Alert' -import Button from '../../atoms/Button' -import React, { ReactElement, useEffect } from 'react' +import Alert from './Alert' +import React, { ReactElement, ReactNode, useEffect } from 'react' import { confetti } from 'dom-confetti' -import styles from './Success.module.css' +import styles from './SuccessConfetti.module.css' const confettiConfig = { angle: 90, @@ -24,33 +23,29 @@ const confettiConfig = { ] } -export default function Success({ +export default function SuccessConfetti({ success, - did + action }: { success: string - did: string + action: ReactNode }): ReactElement { // Have some confetti upon success useEffect(() => { if (!success || typeof window === 'undefined') return - const startElement: HTMLElement = document.querySelector('a[data-confetti]') + const startElement: HTMLElement = document.querySelector( + 'span[data-confetti]' + ) confetti(startElement, confettiConfig) }, [success]) return ( <> - + + {action} + ) } diff --git a/src/components/organisms/AssetActions/Pool/Actions.tsx b/src/components/organisms/AssetActions/Pool/Actions.tsx index 29d854ae4..df1e7adcb 100644 --- a/src/components/organisms/AssetActions/Pool/Actions.tsx +++ b/src/components/organisms/AssetActions/Pool/Actions.tsx @@ -1,9 +1,9 @@ import React, { ReactElement } from 'react' import Loader from '../../../atoms/Loader' import Button from '../../../atoms/Button' -import Alert from '../../../atoms/Alert' import styles from './Actions.module.css' import EtherscanLink from '../../../atoms/EtherscanLink' +import SuccessConfetti from '../../../atoms/SuccessConfetti' export default function Actions({ isLoading, @@ -30,15 +30,14 @@ export default function Actions({ )} {txId && ( - <> - - - Etherscan - - + + See on Etherscan + + } + /> )} ) diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx index 3ea69603a..e4e0ea011 100644 --- a/src/components/pages/Publish/Feedback.tsx +++ b/src/components/pages/Publish/Feedback.tsx @@ -1,9 +1,9 @@ import Alert from '../../atoms/Alert' -import Success from './Success' import Button from '../../atoms/Button' import Loader from '../../atoms/Loader' import React, { ReactElement } from 'react' import styles from './Feedback.module.css' +import SuccessConfetti from '../../atoms/SuccessConfetti' export default function Feedback({ error, @@ -18,6 +18,17 @@ export default function Feedback({ publishStepText: string setError: (error: string) => void }): ReactElement { + const SuccessAction = () => ( + + ) + return (
@@ -35,7 +46,7 @@ export default function Feedback({ ) : success ? ( - + } /> ) : ( )} diff --git a/src/components/pages/Publish/Success.module.css b/src/components/pages/Publish/Success.module.css deleted file mode 100644 index 9c49ec74c..000000000 --- a/src/components/pages/Publish/Success.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.action { - margin-top: calc(var(--spacer) / 1.5); -}