-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: add delegation and undelegation flow (#846)
* added delegation and undelegation flow * fixed issue with sticky header in tabs * added a new modal window with buttons on the home page * added empty state UI for undelegation * fixed deploys tab and deploys details page for staking --------- Co-authored-by: ost-ptk <[email protected]> Co-authored-by: Vynnyk Dmytro <[email protected]>
- Loading branch information
3 people
authored
Nov 16, 2023
1 parent
096fc63
commit b1e268a
Showing
52 changed files
with
3,066 additions
and
157 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
49 changes: 49 additions & 0 deletions
49
src/apps/popup/pages/home/components/more-buttons-modal/index.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,49 @@ | ||
| import React from 'react'; | ||
| import { Trans, useTranslation } from 'react-i18next'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { Button, Modal, SvgIcon, Typography } from '@libs/ui'; | ||
| import { CenteredFlexColumn, SpacingSize } from '@libs/layout'; | ||
|
|
||
| import { ModalButtons } from './modal-buttons'; | ||
|
|
||
| const MoreButton = styled(CenteredFlexColumn)` | ||
| cursor: pointer; | ||
| padding: 0 16px; | ||
| `; | ||
|
|
||
| interface MoreButtonsModalProps { | ||
| handleBuyWithCSPR: () => void; | ||
| } | ||
|
|
||
| export const MoreButtonsModal = ({ | ||
| handleBuyWithCSPR | ||
| }: MoreButtonsModalProps) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <Modal | ||
| placement="bottom" | ||
| renderContent={() => ( | ||
| <ModalButtons handleBuyWithCSPR={handleBuyWithCSPR} /> | ||
| )} | ||
| children={() => ( | ||
| <MoreButton gap={SpacingSize.Small}> | ||
| <Button circle> | ||
| <SvgIcon | ||
| src="assets/icons/more.svg" | ||
| color="contentOnFill" | ||
| style={{ | ||
| transform: 'rotate(90deg)' | ||
| }} | ||
| /> | ||
| </Button> | ||
| <Typography type="captionMedium" color="contentAction"> | ||
| <Trans t={t}>More</Trans> | ||
| </Typography> | ||
| </MoreButton> | ||
| )} | ||
| /> | ||
| ); | ||
| }; |
119 changes: 119 additions & 0 deletions
119
src/apps/popup/pages/home/components/more-buttons-modal/modal-buttons.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,119 @@ | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { Trans, useTranslation } from 'react-i18next'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { NetworkSetting } from '@src/constants'; | ||
| import { AlignedFlexRow, FlexColumn, SpacingSize } from '@libs/layout'; | ||
| import { Button, SvgIcon, Typography } from '@libs/ui'; | ||
| import { RouterPath, useTypedNavigate } from '@popup/router'; | ||
| import { useCasperToken } from '@src/hooks'; | ||
| import { selectActiveNetworkSetting } from '@background/redux/settings/selectors'; | ||
|
|
||
| const ButtonContainer = styled(AlignedFlexRow)` | ||
| cursor: pointer; | ||
| padding: 14px 16px; | ||
| `; | ||
|
|
||
| interface ButtonsProps { | ||
| handleBuyWithCSPR: () => void; | ||
| } | ||
|
|
||
| export const ModalButtons = ({ handleBuyWithCSPR }: ButtonsProps) => { | ||
| const { t } = useTranslation(); | ||
| const navigate = useTypedNavigate(); | ||
| const casperToken = useCasperToken(); | ||
|
|
||
| const network = useSelector(selectActiveNetworkSetting); | ||
|
|
||
| return ( | ||
| <FlexColumn> | ||
| {network === NetworkSetting.Mainnet && ( | ||
| <ButtonContainer gap={SpacingSize.Large} onClick={handleBuyWithCSPR}> | ||
| <Button circle> | ||
| <SvgIcon src="assets/icons/card.svg" color="contentOnFill" /> | ||
| </Button> | ||
| <FlexColumn> | ||
| <Typography type="bodySemiBold"> | ||
| <Trans t={t}>Buy</Trans> | ||
| </Typography> | ||
| <Typography type="captionRegular" color="contentSecondary"> | ||
| <Trans t={t}>Buy CSPR with cash</Trans> | ||
| </Typography> | ||
| </FlexColumn> | ||
| </ButtonContainer> | ||
| )} | ||
| <ButtonContainer | ||
| gap={SpacingSize.Large} | ||
| onClick={() => | ||
| navigate( | ||
| casperToken?.id | ||
| ? RouterPath.Transfer.replace( | ||
| ':tokenContractPackageHash', | ||
| casperToken.id | ||
| ).replace( | ||
| ':tokenContractHash', | ||
| casperToken.contractHash || 'null' | ||
| ) | ||
| : RouterPath.TransferNoParams | ||
| ) | ||
| } | ||
| > | ||
| <Button circle> | ||
| <SvgIcon src="assets/icons/transfer.svg" color="contentOnFill" /> | ||
| </Button> | ||
| <FlexColumn> | ||
| <Typography type="bodySemiBold"> | ||
| <Trans t={t}>Send</Trans> | ||
| </Typography> | ||
| <Typography type="captionRegular" color="contentSecondary"> | ||
| <Trans t={t}>Send CSPR to any account</Trans> | ||
| </Typography> | ||
| </FlexColumn> | ||
| </ButtonContainer> | ||
| <ButtonContainer | ||
| gap={SpacingSize.Large} | ||
| onClick={() => | ||
| navigate(RouterPath.Receive, { | ||
| state: { tokenData: casperToken } | ||
| }) | ||
| } | ||
| > | ||
| <Button circle> | ||
| <SvgIcon src="assets/icons/receive.svg" color="contentOnFill" /> | ||
| </Button> | ||
| <FlexColumn> | ||
| <Typography type="bodySemiBold"> | ||
| <Trans t={t}>Receive</Trans> | ||
| </Typography> | ||
| <Typography type="captionRegular" color="contentSecondary"> | ||
| <Trans t={t}>Receive CSPR</Trans> | ||
| </Typography> | ||
| </FlexColumn> | ||
| </ButtonContainer> | ||
| <ButtonContainer | ||
| gap={SpacingSize.Large} | ||
| onClick={() => navigate(RouterPath.Delegate)} | ||
| > | ||
| <Button circle> | ||
| <SvgIcon src="assets/icons/delegate.svg" color="contentOnFill" /> | ||
| </Button> | ||
| <Typography type="bodySemiBold"> | ||
| <Trans t={t}>Delegate</Trans> | ||
| </Typography> | ||
| </ButtonContainer> | ||
| <ButtonContainer | ||
| gap={SpacingSize.Large} | ||
| onClick={() => navigate(RouterPath.Undelegate)} | ||
| > | ||
| <Button circle> | ||
| <SvgIcon src="assets/icons/undelegate.svg" color="contentOnFill" /> | ||
| </Button> | ||
| <Typography type="bodySemiBold"> | ||
| <Trans t={t}>Undelegate</Trans> | ||
| </Typography> | ||
| </ButtonContainer> | ||
| </FlexColumn> | ||
| ); | ||
| }; |
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
Oops, something went wrong.