1
0
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:
Matthias Kretschmann 2020-10-16 10:00:16 +02:00
parent c72e01c9ec
commit f33b3bb023
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 38 additions and 32 deletions

View File

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

View File

@ -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>
</>
)
}

View File

@ -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"
/>
<EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
Etherscan
</EtherscanLink>
</>
<SuccessConfetti
success="Successfully added liquidity."
action={
<EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
See on Etherscan
</EtherscanLink>
}
/>
)}
</>
)

View File

@ -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} />
)}

View File

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