also fixed new link timing out bug
This commit is contained in:
parent
e39c999b34
commit
433cffd13b
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user