also fixed new link timing out bug

This commit is contained in:
ingawei 2022-07-21 12:12:26 -07:00
parent e39c999b34
commit 433cffd13b
3 changed files with 109 additions and 103 deletions

View File

@ -27,47 +27,49 @@ export function ManalinkCard(props: {
const { expiresTime, maxUses, uses, amount, message } = info const { expiresTime, maxUses, uses, amount, message } = info
return ( return (
<Col> <Col>
<div <Col>
className={clsx( <div
className,
'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
getManalinkGradient(info.amount)
)}
>
<Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
<div>
{maxUses != null
? `${maxUses - uses}/${maxUses} uses left`
: `Unlimited use`}
</div>
<div>
{expiresTime != null
? `Expires ${fromNow(expiresTime)}`
: 'Never expires'}
</div>
</Col>
<img
className={clsx( className={clsx(
'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12', className,
preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2' 'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
getManalinkGradient(info.amount)
)} )}
src="/logo-white.svg" >
/> <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
<Row className="rounded-b-xl bg-white p-4"> <div>
<Col> {maxUses != null
<div ? `${maxUses - uses}/${maxUses} uses left`
className={clsx( : `Unlimited use`}
'mb-1 text-xl text-indigo-500', </div>
getManalinkAmountColor(amount) <div>
)} {expiresTime != null
> ? `Expires ${fromNow(expiresTime)}`
{formatMoney(amount)} : 'Never expires'}
</div> </div>
<div>{message}</div>
</Col> </Col>
</Row>
</div> <img
className={clsx(
'block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12',
preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2'
)}
src="/logo-white.svg"
/>
<Row className="rounded-b-xl bg-white p-4">
<Col>
<div
className={clsx(
'mb-1 text-xl text-indigo-500',
getManalinkAmountColor(amount)
)}
>
{formatMoney(amount)}
</div>
</Col>
</Row>
</div>
</Col>
<div className="text-md mx-4 mt-2 mb-4 text-gray-500">{message}</div>
</Col> </Col>
) )
} }
@ -82,75 +84,79 @@ export function ManalinkCardFromView(props: {
const [details, setDetails] = useState(false) const [details, setDetails] = useState(false)
return ( return (
<Col <Col>
className={clsx( <Col
'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
className,
link.slug === highlightedSlug ? 'animate-pulse' : ''
)}
>
<div
className={clsx( className={clsx(
'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all', 'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
getManalinkGradient(link.amount) className,
link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
)} )}
onClick={() => setDetails(!details)}
> >
{details && ( <div
<ClaimsList className={clsx(
className="absolute h-full w-full bg-white opacity-90" 'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
link={link} getManalinkGradient(link.amount)
)}
onClick={() => setDetails(!details)}
>
{details && (
<ClaimsList
className="absolute h-full w-full bg-white opacity-90"
link={link}
/>
)}
<Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
<div>
{maxUses != null
? `${maxUses - claims.length}/${maxUses} uses left`
: `Unlimited use`}
</div>
<div>
{expiresTime != null
? `Expires ${fromNow(expiresTime)}`
: 'Never expires'}
</div>
</Col>
<img
className={clsx('my-auto block w-1/3 select-none self-center py-3')}
src="/logo-white.svg"
/> />
)} </div>
<Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100"> <Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
<div> <Row className="relative gap-1">
{maxUses != null <div
? `${maxUses - claims.length}/${maxUses} uses left` className={clsx(
: `Unlimited use`} 'my-auto mb-1 w-full',
</div> getManalinkAmountColor(amount)
<div> )}
{expiresTime != null >
? `Expires ${fromNow(expiresTime)}` {formatMoney(amount)}
: 'Never expires'} </div>
</div> <ShareIconButton
toastClassName={'-left-48 min-w-[250%]'}
buttonClassName={'transition-colors'}
onCopyButtonClassName={
'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
}
copyPayload={getManalinkUrl(link.slug)}
/>
<button
onClick={() => setDetails(!details)}
className={clsx(
contractDetailsButtonClassName,
details
? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
: ''
)}
>
<DotsHorizontalIcon className="h-[24px] w-5" />
</button>
</Row>
</Col> </Col>
<img
className={clsx('my-auto block w-1/3 select-none self-center py-3')}
src="/logo-white.svg"
/>
</div>
<Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
<Row className="relative gap-1">
<div
className={clsx(
'my-auto mb-1 w-full',
getManalinkAmountColor(amount)
)}
>
{formatMoney(amount)}
</div>
<ShareIconButton
toastClassName={'-left-48 min-w-[250%]'}
buttonClassName={'transition-colors'}
onCopyButtonClassName={
'bg-gray-200 text-gray-600 transition-none hover:bg-gray-200 hover:text-gray-600'
}
copyPayload={getManalinkUrl(link.slug)}
/>
<button
onClick={() => setDetails(!details)}
className={clsx(
contractDetailsButtonClassName,
details
? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
: ''
)}
>
<DotsHorizontalIcon className="h-[24px] w-5" />
</button>
</Row>
<div className="my-2 text-xs md:text-sm">{message || '\n\n'}</div>
</Col> </Col>
<div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm">
{message || ''}
</div>
</Col> </Col>
) )
} }

View File

@ -37,7 +37,6 @@ export function CreateLinksButton(props: {
message: newManalink.message, message: newManalink.message,
}) })
setHighlightedSlug(slug || '') setHighlightedSlug(slug || '')
setTimeout(() => setHighlightedSlug(''), 3700)
}} }}
/> />
</Col> </Col>
@ -165,6 +164,7 @@ function CreateManalinkForm(props: {
<label className="label">Message</label> <label className="label">Message</label>
<Textarea <Textarea
placeholder={defaultMessage} placeholder={defaultMessage}
maxLength={200}
className="input input-bordered resize-none" className="input input-bordered resize-none"
autoFocus autoFocus
value={newManalink.message} value={newManalink.message}

View File

@ -85,10 +85,10 @@ function ManalinksDisplay(props: {
if (unclaimedLinks.length === 0) { if (unclaimedLinks.length === 0) {
return ( return (
<div> <p className="text-gray-500">
You don't have any unclaimed manalinks. Send some more to spread the You don't have any unclaimed manalinks. Send some more to spread the
wealth! wealth!
</div> </p>
) )
} else { } else {
const [page, setPage] = useState(0) const [page, setPage] = useState(0)