-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tangle-dapp): Add liquid staking unstaking card (#2415)
Co-authored-by: vutuanlinh2k2 <[email protected]>
- Loading branch information
1 parent
60b225a
commit 3f7904b
Showing
70 changed files
with
2,472 additions
and
726 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { HexString } from '@polkadot/util/types'; | ||
| import { ExternalLinkLine } from '@webb-tools/icons'; | ||
| import { shortenString, Typography } from '@webb-tools/webb-ui-components'; | ||
| import { FC, useCallback } from 'react'; | ||
|
|
||
| import { AnySubstrateAddress } from '../../types/utils'; | ||
|
|
||
| export type AddressLinkProps = { | ||
| address: AnySubstrateAddress | HexString; | ||
| }; | ||
|
|
||
| const AddressLink: FC<AddressLinkProps> = ({ address }) => { | ||
| // TODO: Determine href. | ||
| const href = '#'; | ||
|
|
||
| // Stop propagation to prevent a parent modal (if any) from closing. | ||
| const handleClick = useCallback((event: any) => { | ||
| event.stopPropagation(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <a | ||
| href={href} | ||
| target="_blank" | ||
| onClick={handleClick} | ||
| className="flex gap-1 items-center justify-start hover:underline" | ||
| > | ||
| <Typography variant="body1" fw="normal" className="dark:text-mono-0"> | ||
| {shortenString(address, 6)} | ||
| </Typography> | ||
|
|
||
| <ExternalLinkLine className="dark:fill-mono-0" /> | ||
| </a> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddressLink; |
84 changes: 84 additions & 0 deletions
84
apps/tangle-dapp/components/LiquidStaking/AvailableWithdrawCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { CheckboxCircleFill, TimeFillIcon, UndoIcon } from '@webb-tools/icons'; | ||
| import { Button, Typography } from '@webb-tools/webb-ui-components'; | ||
| import { FC, ReactElement } from 'react'; | ||
|
|
||
| import GlassCard from '../GlassCard'; | ||
|
|
||
| const AvailableWithdrawCard: FC = () => { | ||
| return ( | ||
| <GlassCard className="flex rounded-xl gap-2"> | ||
| <div className="flex justify-between"> | ||
| <div className="flex flex-col gap-1"> | ||
| <Typography variant="body1" fw="semibold"> | ||
| Available | ||
| </Typography> | ||
|
|
||
| <Typography variant="h5" fw="bold"> | ||
| 0.0 DOT | ||
| </Typography> | ||
| </div> | ||
|
|
||
| <div className="flex gap-1 items-center justify-center"> | ||
| <Button variant="utility" size="sm"> | ||
| Withdraw | ||
| </Button> | ||
|
|
||
| {/* TODO: Need a tooltip for this, since it's only an icon. */} | ||
| <Button variant="utility" size="sm"> | ||
| <UndoIcon className="dark:fill-blue-40" /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr className="border-mono-0 dark:border-mono-160" /> | ||
|
|
||
| <div className="flex justify-between items-end"> | ||
| <div className="flex flex-col gap-1"> | ||
| <Typography variant="body1" fw="semibold"> | ||
| My requests | ||
| </Typography> | ||
|
|
||
| <div className="flex gap-2"> | ||
| <RequestItem | ||
| icon={<CheckboxCircleFill className="fill-green-50" />} | ||
| text="0" | ||
| /> | ||
|
|
||
| <RequestItem | ||
| icon={<TimeFillIcon className="fill-blue-50" />} | ||
| text="1" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex items-center justify-center gap-1"> | ||
| <TimeFillIcon className="dark:fill-mono-0" /> | ||
|
|
||
| <Typography variant="body1" fw="bold" className="dark:text-mono-0"> | ||
| 1.00 tgDOT | ||
| </Typography> | ||
| </div> | ||
| </div> | ||
| </GlassCard> | ||
| ); | ||
| }; | ||
|
|
||
| type RequestItemProps = { | ||
| icon: ReactElement; | ||
| text: string; | ||
| }; | ||
|
|
||
| /** @internal */ | ||
| const RequestItem: FC<RequestItemProps> = ({ icon, text }) => { | ||
| return ( | ||
| <div className="flex items-center justify-center gap-1"> | ||
| {icon} | ||
|
|
||
| <Typography className="dark:text-mono-0" variant="body1" fw="bold"> | ||
| {text} | ||
| </Typography> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AvailableWithdrawCard; |
74 changes: 74 additions & 0 deletions
74
apps/tangle-dapp/components/LiquidStaking/CancelUnstakeModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { CloseCircleLineIcon } from '@webb-tools/icons'; | ||
| import { | ||
| Button, | ||
| Modal, | ||
| ModalContent, | ||
| ModalFooter, | ||
| ModalHeader, | ||
| Typography, | ||
| } from '@webb-tools/webb-ui-components'; | ||
| import { FC, useCallback } from 'react'; | ||
|
|
||
| import ExternalLink from './ExternalLink'; | ||
| import ModalIcon from './ModalIcon'; | ||
| import { UnstakeRequestItem } from './UnstakeRequestsTable'; | ||
|
|
||
| export type CancelUnstakeModalProps = { | ||
| isOpen: boolean; | ||
| unstakeRequest: UnstakeRequestItem; | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| const CancelUnstakeModal: FC<CancelUnstakeModalProps> = ({ | ||
| isOpen, | ||
| // TODO: Make use of the unstake request data, which is relevant for the link's href. | ||
| unstakeRequest: _unstakeRequest, | ||
| onClose, | ||
| }) => { | ||
| const handleConfirm = useCallback(() => { | ||
| // TODO: Set button as loading, disable ability to close modal, and proceed to execute the unstake cancellation via its corresponding extrinsic call. | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Modal open> | ||
| <ModalContent | ||
| isCenter | ||
| isOpen={isOpen} | ||
| className="w-full max-w-[calc(100vw-40px)] md:max-w-[500px] rounded-2xl bg-mono-0 dark:bg-mono-180" | ||
| > | ||
| <ModalHeader titleVariant="h4" onClose={onClose}> | ||
| Cancel Unstake | ||
| </ModalHeader> | ||
|
|
||
| <div className="flex flex-col items-center justify-center gap-2 p-9"> | ||
| <ModalIcon Icon={CloseCircleLineIcon} /> | ||
|
|
||
| <Typography | ||
| className="dark:text-mono-0 text-center" | ||
| variant="body1" | ||
| fw="normal" | ||
| > | ||
| Are you sure you want to cancel your unstaking request? By | ||
| cancelling, your tokens will remain staked and continue earning | ||
| rewards. | ||
| </Typography> | ||
|
|
||
| {/* TODO: External link's href. */} | ||
| <ExternalLink href="#">Learn More</ExternalLink> | ||
| </div> | ||
|
|
||
| <ModalFooter className="flex gap-1 px-8 py-6 space-y-0"> | ||
| <Button onClick={onClose} isFullWidth variant="secondary"> | ||
| Cancel | ||
| </Button> | ||
|
|
||
| <Button onClick={handleConfirm} isFullWidth variant="primary"> | ||
| Confirm | ||
| </Button> | ||
| </ModalFooter> | ||
| </ModalContent> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default CancelUnstakeModal; |
Oops, something went wrong.