Skip to content

Commit

Permalink
feat(tangle-dapp): Implement unstake requests table (#2453)
Browse files Browse the repository at this point in the history
  • Loading branch information
yurixander authored Jul 31, 2024
1 parent 08bdd13 commit f326fdf
Show file tree
Hide file tree
Showing 56 changed files with 1,434 additions and 720 deletions.
36 changes: 28 additions & 8 deletions apps/tangle-dapp/app/liquid-staking/[tokenSymbol]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,48 @@
'use client';

import { notFound } from 'next/navigation';
import { FC } from 'react';
import { FC, useState } from 'react';

import LiquidStakeAndUnstakeCards from '../../../components/LiquidStaking/LiquidStakeAndUnstakeCards';
import { LiquidStakingSelectionTable } from '../../../components/LiquidStaking/LiquidStakingSelectionTable';
import UnstakeRequestsTable from '../../../components/LiquidStaking/UnstakeRequestsTable';
import LiquidStakeCard from '../../../components/LiquidStaking/stakeAndUnstake/LiquidStakeCard';
import LiquidUnstakeCard from '../../../components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard';
import UnstakeRequestsTable from '../../../components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable';
import isLiquidStakingToken from '../../../utils/liquidStaking/isLiquidStakingToken';
import TabListItem from '../../restake/TabListItem';
import TabsList from '../../restake/TabsList';

type Props = {
params: { tokenSymbol: string };
};

const LiquidStakingTokenPage: FC<Props> = ({ params: { tokenSymbol } }) => {
const [isStaking, setIsStaking] = useState(true);

if (!isLiquidStakingToken(tokenSymbol)) {
return notFound();
}

return (
<div className="grid grid-cols-2 gap-12">
<LiquidStakeAndUnstakeCards />
<div className="flex flex-wrap gap-12">
<div className="flex flex-col gap-4 w-full min-w-[450px] max-w-[600px]">
<TabsList className="w-full">
<TabListItem isActive={isStaking} onClick={() => setIsStaking(true)}>
Stake
</TabListItem>

<div className="flex flex-col gap-4">
<LiquidStakingSelectionTable />
<TabListItem
isActive={!isStaking}
onClick={() => setIsStaking(false)}
>
Unstake
</TabListItem>
</TabsList>

{isStaking ? <LiquidStakeCard /> : <LiquidUnstakeCard />}
</div>

<UnstakeRequestsTable />
<div className="flex flex-col flex-grow w-min gap-4 min-w-[370px]">
{isStaking ? <LiquidStakingSelectionTable /> : <UnstakeRequestsTable />}
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/tangle-dapp/app/liquid-staking/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Typography } from '@webb-tools/webb-ui-components';
import { FC } from 'react';

import { GlassCard } from '../../components';
import LiquidStakingTokenItem from '../../components/LiquidStaking/LiquidStakingTokenItem';
import LiquidStakingTokenItem from '../../components/LiquidStaking/stakeAndUnstake/LiquidStakingTokenItem';
import StatItem from '../../components/LiquidStaking/StatItem';
import { LIQUID_STAKING_CHAINS } from '../../constants/liquidStaking';

Expand Down
58 changes: 36 additions & 22 deletions apps/tangle-dapp/app/restake/TabListItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { twMerge } from 'tailwind-merge';

export type TabListItemProps = PropsOf<'li'> & {
isActive?: boolean;
href?: ComponentProps<typeof Link>['href'];
hideSeparator?: boolean;
href: ComponentProps<typeof Link>['href'];
};

export default function TabListItem({
Expand All @@ -18,6 +18,32 @@ export default function TabListItem({
hideSeparator,
...props
}: TabListItemProps) {
const content = (
<>
{isActive && (
<motion.span
layoutId="bubble"
className="absolute inset-0 rounded-lg bg-mono-0 dark:bg-purple-50"
transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
/>
)}

<span
className={twMerge(
'absolute body2 w-full p-2 text-center',
isActive && 'font-bold',
isActive
? 'text-mono-200 dark:text-mono-0'
: 'text-mono-120 dark:text-mono-80',
)}
>
{children}
</span>
</>
);

const contentWrapperClass = 'relative transition grow';

return (
<li
{...props}
Expand All @@ -33,27 +59,15 @@ export default function TabListItem({
className,
)}
>
<Link href={href} className={twMerge('relative transition grow')}>
{isActive && (
<motion.span
layoutId="bubble"
className="absolute inset-0 rounded-lg bg-mono-0 dark:bg-purple-50"
transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
/>
)}

<span
className={twMerge(
'absolute body2 w-full p-2 text-center',
isActive && 'font-bold',
isActive
? 'text-mono-200 dark:text-mono-0'
: 'text-mono-120 dark:text-mono-80',
)}
>
{children}
</span>
</Link>
{href === undefined ? (
<div className={twMerge('cursor-pointer', contentWrapperClass)}>
{content}
</div>
) : (
<Link href={href} className={contentWrapperClass}>
{content}
</Link>
)}
</li>
);
}
4 changes: 2 additions & 2 deletions apps/tangle-dapp/components/Breadcrumbs/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import assert from 'assert';
import capitalize from 'lodash/capitalize';
import { JSX } from 'react';

import { LIQUID_STAKING_TOKEN_PREFIX } from '../../constants/liquidStaking';
import { LST_PREFIX } from '../../constants/liquidStaking';
import { PagePath } from '../../types';

const BREADCRUMB_ICONS: Record<PagePath, (props: IconBase) => JSX.Element> = {
Expand Down Expand Up @@ -88,7 +88,7 @@ export const getBreadcrumbLabel = (
index === 1 &&
pathNames[0] === PagePath.LIQUID_STAKING.substring(1)
) {
return `${LIQUID_STAKING_TOKEN_PREFIX}${pathName.toUpperCase()}`;
return `${LST_PREFIX}${pathName.toUpperCase()}`;
}

const pathNameWithSlash = '/' + pathName;
Expand Down
2 changes: 1 addition & 1 deletion apps/tangle-dapp/components/LiquidStaking/AddressLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export type AddressLinkProps = {
};

const AddressLink: FC<AddressLinkProps> = ({ address }) => {
// TODO: Determine href.
// TODO: Determine href. Currently, there doesn't seem to be any logical place to link to based on the address.
const href = '#';

// Stop propagation to prevent a parent modal (if any) from closing.
Expand Down

This file was deleted.

This file was deleted.

26 changes: 26 additions & 0 deletions apps/tangle-dapp/components/LiquidStaking/TableRowsSkeleton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { SkeletonLoader } from '@webb-tools/webb-ui-components';
import { FC } from 'react';
import { twMerge } from 'tailwind-merge';

export type SkeletonLoaderSetProps = {
rowCount: number;
className?: string;
};

const TableRowsSkeleton: FC<SkeletonLoaderSetProps> = ({
rowCount,
className,
}) => {
return (
<div className={twMerge('flex flex-col gap-2 w-full')}>
{Array.from({ length: rowCount }).map((_, index) => (
<SkeletonLoader
key={index}
className={twMerge('h-7 w-full', className)}
/>
))}
</div>
);
};

export default TableRowsSkeleton;
Loading

0 comments on commit f326fdf

Please sign in to comment.