all successes need confetti

src/components/atoms/SuccessConfetti.module.css

@@ -0,0 +1,4 @@
+.action {
+  text-align: center;
+  display: block;
+}

src/components/atoms/SuccessConfetti.tsx

@@ -1,8 +1,7 @@
-import Alert from '../../atoms/Alert'
+import Alert from './Alert'
-import Button from '../../atoms/Button'
+import React, { ReactElement, ReactNode, useEffect } from 'react'
-import React, { ReactElement, 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 (
     <>
       <Alert text={success} state="success" />
-      <Button
+      <span className={styles.action} data-confetti>
-        style="primary"
+        {action}
-        size="small"
+      </span>
-        href={`/asset/${did}`}
-        className={styles.action}
-        data-confetti
-      >
-        Go to data set →
-      </Button>
     </>
   )
 }

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({
         )}
       </div>
       {txId && (
-        <>
+        <SuccessConfetti
-          <Alert
+          success="Successfully added liquidity."
-            text={`Successfully added liquidity. Transaction ID: ${txId}`}
+          action={
-            state="success"
+            <EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
-          />
+              See on Etherscan
-          <EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
+            </EtherscanLink>
-            Etherscan
+          }
-          </EtherscanLink>
+        />
-        </>
       )}
     </>
   )

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 = () => (
+    <Button
+      style="primary"
+      size="small"
+      href={`/asset/${did}`}
+      className={styles.action}
+    >
+      Go to data set →
+    </Button>
+  )
+
   return (
     <div className={styles.feedback}>
       <div className={styles.box}>
@@ -35,7 +46,7 @@ export default function Feedback({
             </Button>
           </>
         ) : success ? (
-          <Success success={success} did={did} />
+          <SuccessConfetti success={success} action={<SuccessAction />} />
         ) : (
           <Loader message={publishStepText} />
         )}

src/components/pages/Publish/Success.module.css

@@ -1,3 +0,0 @@
-.action {
-  margin-top: calc(var(--spacer) / 1.5);
-}