mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
all successes need confetti
This commit is contained in:
parent
c72e01c9ec
commit
f33b3bb023
4
src/components/atoms/SuccessConfetti.module.css
Normal file
4
src/components/atoms/SuccessConfetti.module.css
Normal file
@ -0,0 +1,4 @@
|
||||
.action {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
@ -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 (
|
||||
<>
|
||||
<Alert text={success} state="success" />
|
||||
<Button
|
||||
style="primary"
|
||||
size="small"
|
||||
href={`/asset/${did}`}
|
||||
className={styles.action}
|
||||
data-confetti
|
||||
>
|
||||
Go to data set →
|
||||
</Button>
|
||||
<span className={styles.action} data-confetti>
|
||||
{action}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
}
|
@ -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 && (
|
||||
<>
|
||||
<Alert
|
||||
text={`Successfully added liquidity. Transaction ID: ${txId}`}
|
||||
state="success"
|
||||
/>
|
||||
<SuccessConfetti
|
||||
success="Successfully added liquidity."
|
||||
action={
|
||||
<EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
|
||||
Etherscan
|
||||
See on Etherscan
|
||||
</EtherscanLink>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
@ -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} />
|
||||
)}
|
||||
|
@ -1,3 +0,0 @@
|
||||
.action {
|
||||
margin-top: calc(var(--spacer) / 1.5);
|
||||
}
|
Loading…
Reference in New Issue
Block a user