Skip to content

Commit

Permalink
Fix the card to expand seperatly (#111)
Browse files Browse the repository at this point in the history 
Co-authored-by: Thibaut Sardan <[email protected]>
  • Loading branch information
@wirednkod @Tbaut
wirednkod and Tbaut authored Sep 12, 2024
1 parent 692497d commit 44e7519
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 110 deletions.
2 changes: 1 addition & 1 deletion src/components/DelegationByAmountConviction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const DelegationByAmountConviction = ({
return (
<div
key={`${conviction}-${balance.toString()}`}
className="mb-2 ml-12 border-l-2 pl-2"
className="mb-2 ml-12 overflow-auto border-l-2 pl-2"
>
{trackIds.length === 1 ? (
trackIds.map((trackId) => (
Expand Down
159 changes: 76 additions & 83 deletions src/components/LocksCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,8 @@ import { TrackDisplay } from './TrackDisplay'
export const LocksCard = () => {
const [currentBlock, setCurrentBlock] = useState(0)
const [expectedBlockTime, setExpectedBlockTime] = useState(0)
const { api } = useNetwork()
const { api, assetInfo } = useNetwork()
const { voteLocks: locks, delegationLocks } = useLocks()
const { assetInfo } = useNetwork()
const [ongoingVoteLocks, setOngoingVoteLocks] = useState<VoteLock[]>([])
const [freeLocks, setFreeLocks] = useState<Array<VoteLock | DelegationLock>>(
[],
Expand Down Expand Up @@ -129,96 +128,90 @@ export const LocksCard = () => {
}, [api, freeLocks, getUnlockTx, selectedAccount])

return (
<div className="grid grid-cols-1 gap-2 md:grid-cols-3">
{freeLocks.length > 0 && (
<Card className="relative h-full border-2 p-2 px-4">
<div className="relative z-10">
<div className="flex gap-x-2">
<Title variant="h4">Unlockable</Title>
<Popover>
<PopoverTrigger>
<Info className="h-3 w-3 text-gray-500" />
</PopoverTrigger>
<PopoverContent>
<p className="max-w-[15rem]">
Elapsed locks for votes casted on referenda, or tracks
delegation. Since locks can overlap, unlocking doesn't
necessarily mean the transferable balance will change.
</p>
</PopoverContent>
</Popover>
</div>
<div className="font-unbounded text-5xl font-bold">
{freeLocks.length}
<LockKeyholeOpen className="ml-1 inline-block h-8 w-8 rotate-[10deg] text-gray-200" />
</div>
{freeLocks.length > 0 && (
<>
<Button
className="mb-2 mt-4 w-full"
onClick={onUnlockClick}
disabled={isUnlockingLoading}
>
Unlock
</Button>
<ContentReveal hidden={false}>
{freeLocks.map((lock) => {
if (lock.type === LockType.Delegating) {
const { amount, trackId } = lock
return (
<div key={trackId}>
<ul>
<li className="mb-2">
<div className="capitalize">
<TrackDisplay trackId={trackId} />
<div>
<BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
{planckToUnit(
amount,
assetInfo.precision,
).toLocaleString('en')}{' '}
{assetInfo.symbol}
</div>
</div>
</li>
</ul>
<div className="flex flex-col gap-2 md:grid md:grid-cols-3 md:flex-row">
<Card className="h-max border-2 p-2 px-4">
<div className="relative z-10">
<div className="flex gap-x-2">
<Title variant="h4">Unlockable</Title>
<Popover>
<PopoverTrigger>
<Info className="h-3 w-3 text-gray-500" />
</PopoverTrigger>
<PopoverContent>
<p className="max-w-[15rem]">Funds that are unlockable.</p>
</PopoverContent>
</Popover>
</div>
<div className="font-unbounded text-5xl font-bold">
{freeLocks.length}
<LockKeyholeOpen className="ml-1 inline-block h-8 w-8 rotate-[10deg] text-gray-200" />
</div>
{freeLocks.length > 0 && (
<Button
className="mb-2 mt-4 w-full"
onClick={onUnlockClick}
disabled={isUnlockingLoading}
>
Unlock
</Button>
)}
<ContentReveal hidden={freeLocks.length == 0}>
{freeLocks.map((lock) => {
if (lock.type === LockType.Delegating) {
const { amount, trackId } = lock
return (
<div key={trackId}>
<ul>
<li className="mb-2">
<div className="capitalize">
<span className="capitalize">
<TrackDisplay trackId={trackId} />
</span>
<div>
<BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
{planckToUnit(
amount,
assetInfo.precision,
).toLocaleString('en')}{' '}
{assetInfo.symbol}
</div>
</div>
)
}
</li>
</ul>
</div>
)
}

const { amount, refId } = lock
return (
<div key={refId}>
<ul>
<li className="mb-2">
<Badge>#{refId}</Badge>
<div>
<BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
{planckToUnit(
amount,
assetInfo.precision,
).toLocaleString('en')}{' '}
{assetInfo.symbol}
</div>
</li>
</ul>
const { amount, refId } = lock
return (
<div key={refId}>
<ul>
<li className="mb-2">
<Badge>#{refId}</Badge>
<div>
<BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
{planckToUnit(
amount,
assetInfo.precision,
).toLocaleString('en')}{' '}
{assetInfo.symbol}
</div>
)
})}
</ContentReveal>
</>
)}
</div>
</Card>
)}
</li>
</ul>
</div>
)
})}
</ContentReveal>
</div>
</Card>
{!locksLoaded ? (
<>
<Skeleton className="h-[116px] rounded-xl" />
<Skeleton className="h-[116px] rounded-xl" />
</>
) : (
<>
<Card className="h-full border-2 p-2 px-4">
<Card className="h-max border-2 p-2 px-4">
<div className="flex gap-x-2">
<Title variant="h4">Unlocking</Title>
<Popover>
Expand Down Expand Up @@ -297,7 +290,7 @@ export const LocksCard = () => {
</>
</ContentReveal>
</Card>
<Card className="h-full border-2 p-2 px-4">
<Card className="h-max border-2 p-2 px-4">
<div className="flex gap-x-2">
<Title variant="h4">Votes</Title>
<Popover>
Expand Down
43 changes: 24 additions & 19 deletions src/components/MyDelegations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ export const MyDelegations = () => {

return (
<>
<Title className="mb-4">My Delegations</Title>
<div className="grid grid-cols-1 gap-2 md:grid-cols-2">
<Title className="mt-4">My Delegations</Title>
<div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
{delegationsByDelegateConvictionAmount === undefined ? (
<Skeleton className="h-[116px] rounded-xl" />
) : noDelegations ? (
Expand All @@ -103,28 +103,33 @@ export const MyDelegations = () => {

return (
<Card
className="flex h-full flex-col border bg-card p-2 px-4"
className="flex h-max flex-col justify-between border bg-card p-2 px-4"
key={delegateAddress}
>
<>
{knownDelegate?.name ? (
<div className="flex items-center gap-2">
<img
src={knownDelegate.image}
className="mr-2 w-12 rounded-full"
/>
<div className="py-2 text-xl font-semibold">
{knownDelegate.name}
<div className="flex flex-col justify-between">
{knownDelegate?.name ? (
<div className="flex items-center gap-2">
<img
src={knownDelegate.image}
className="mr-2 w-12 rounded-full"
/>
<div className="py-2 text-xl font-semibold">
{knownDelegate.name}
</div>
</div>
</div>
) : (
<AddressDisplay address={delegateAddress} size={'3rem'} />
)}
<DelegationByAmountConviction
amountConvictionMap={amountConvictionMap}
/>
) : (
<AddressDisplay
address={delegateAddress}
size={'3rem'}
/>
)}
<DelegationByAmountConviction
amountConvictionMap={amountConvictionMap}
/>
</div>
<Button
className="mb-2 mt-4 w-full"
className="w-a bottom-0 mb-2 mt-4"
variant={'outline'}
onClick={() => onUndelegate(delegateAddress)}
disabled={delegateLoading.includes(delegateAddress)}
Expand Down
6 changes: 3 additions & 3 deletions src/components/ui/button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable react-refresh/only-export-components */
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'
Expand All @@ -9,8 +10,7 @@ const buttonVariants = cva(
{
variants: {
variant: {
default:
'bg-primary text-primary-foreground bg-primary/90 hover:bg-primary',
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
Expand Down Expand Up @@ -53,5 +53,5 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
},
)
Button.displayName = 'Button'
// eslint-disable-next-line

export { Button, buttonVariants }
2 changes: 1 addition & 1 deletion src/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const Header = () => {
</Link>
))}
</nav>
<nav className="fixed bottom-48 flex flex-col gap-4">
<nav className="fixed bottom-8 flex flex-col gap-4">
{isLight && (
<a
href="#"
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Delegate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export const Delegate = () => {
}

return (
<main className="mx-0 grid flex-1 items-start gap-4 gap-8 p-4 sm:mx-[5%] sm:px-6 sm:py-0 xl:mx-[20%]">
<>
{!api && (
<AlertNote
title={msgs.api.title}
Expand Down Expand Up @@ -198,6 +198,6 @@ export const Delegate = () => {
>
Delegate with {voteAmount} {assetInfo.symbol} votes
</Button>
</main>
</>
)
}
2 changes: 1 addition & 1 deletion src/pages/Home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const Home = () => {
const { delegates } = useDelegates()

return (
<main className="mx-0 grid flex-1 items-start gap-4 p-4 sm:mx-[5%] sm:px-6 sm:py-0 md:gap-8 xl:mx-[20%]">
<main className="mx-0 flex-1 items-start gap-4 p-4 sm:mx-[5%] sm:px-6 sm:py-0 md:gap-8">
<LocksCard />
<MyDelegations />
<Title className="mt-4">Delegates</Title>
Expand Down

0 comments on commit 44e7519

Please sign in to comment.