also fixed new link timing out bug
This commit is contained in:
ingawei
parent
e39c999b34
commit
433cffd13b
|
|
@ -27,47 +27,49 @@ export function ManalinkCard(props: {
|
|||
const { expiresTime, maxUses, uses, amount, message } = info
|
||||
return (
|
||||
<Col>
|
||||
<div
|
||||
className={clsx(
|
||||
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
|
||||
<Col>
|
||||
<div
|
||||
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'
|
||||
className,
|
||||
'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
|
||||
getManalinkGradient(info.amount)
|
||||
)}
|
||||
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)}
|
||||
>
|
||||
<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>
|
||||
<div>{message}</div>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
|
@ -82,75 +84,79 @@ export function ManalinkCardFromView(props: {
|
|||
const [details, setDetails] = useState(false)
|
||||
|
||||
return (
|
||||
<Col
|
||||
className={clsx(
|
||||
'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
|
||||
className,
|
||||
link.slug === highlightedSlug ? 'animate-pulse' : ''
|
||||
)}
|
||||
>
|
||||
<div
|
||||
<Col>
|
||||
<Col
|
||||
className={clsx(
|
||||
'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
|
||||
getManalinkGradient(link.amount)
|
||||
'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
|
||||
className,
|
||||
link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
|
||||
)}
|
||||
onClick={() => setDetails(!details)}
|
||||
>
|
||||
{details && (
|
||||
<ClaimsList
|
||||
className="absolute h-full w-full bg-white opacity-90"
|
||||
link={link}
|
||||
<div
|
||||
className={clsx(
|
||||
'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm">
|
||||
{message || ''}
|
||||
</div>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ export function CreateLinksButton(props: {
|
|||
message: newManalink.message,
|
||||
})
|
||||
setHighlightedSlug(slug || '')
|
||||
setTimeout(() => setHighlightedSlug(''), 3700)
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
|
|
@ -165,6 +164,7 @@ function CreateManalinkForm(props: {
|
|||
<label className="label">Message</label>
|
||||
<Textarea
|
||||
placeholder={defaultMessage}
|
||||
maxLength={200}
|
||||
className="input input-bordered resize-none"
|
||||
autoFocus
|
||||
value={newManalink.message}
|
||||
|
|
|
|||
|
|
@ -85,10 +85,10 @@ function ManalinksDisplay(props: {
|
|||
|
||||
if (unclaimedLinks.length === 0) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-gray-500">
|
||||
You don't have any unclaimed manalinks. Send some more to spread the
|
||||
wealth!
|
||||
</div>
|
||||
</p>
|
||||
)
|
||||
} else {
|
||||
const [page, setPage] = useState(0)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user