-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
v7.9.6
- Loading branch information
Showing
35 changed files
with
739 additions
and
116 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
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
110 changes: 110 additions & 0 deletions
110
packages/app/src/sections/dashboard/Stake/DelegationInput.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,110 @@ | ||
| import { memo, useCallback, useState } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import styled from 'styled-components' | ||
|
|
||
| import Button from 'components/Button' | ||
| import Input from 'components/Input/Input' | ||
| import { FlexDivCol } from 'components/layout/flex' | ||
| import { Body, Heading } from 'components/Text' | ||
| import { useAppDispatch, useAppSelector } from 'state/hooks' | ||
| import { approveOperator } from 'state/staking/actions' | ||
| import { selectIsApprovingOperator } from 'state/staking/selectors' | ||
| import { media } from 'styles/media' | ||
|
|
||
| import { StakingCard } from './card' | ||
|
|
||
| const DelegationInput = memo(() => { | ||
| const { t } = useTranslation() | ||
| const dispatch = useAppDispatch() | ||
| const isApprovingOperator = useAppSelector(selectIsApprovingOperator) | ||
| const [delegatedAddress, setDelegatedAddress] = useState('') | ||
|
|
||
| const onInputChange = useCallback((text: string) => { | ||
| setDelegatedAddress(text.toLowerCase().trim()) | ||
| }, []) | ||
|
|
||
| const handleApproveOperator = useCallback( | ||
| (delegatedAddress: string) => { | ||
| dispatch(approveOperator({ delegatedAddress, isApproval: true })) | ||
| setDelegatedAddress('') | ||
| }, | ||
| [dispatch] | ||
| ) | ||
|
|
||
| return ( | ||
| <CardGridContainer> | ||
| <FlexDivCol rowGap="5px"> | ||
| <StyledHeading variant="h4">{t('dashboard.stake.tabs.delegate.title')}</StyledHeading> | ||
| <Body color="secondary">{t('dashboard.stake.tabs.delegate.copy')}</Body> | ||
| </FlexDivCol> | ||
| <FlexDivCol rowGap="10px" style={{ marginBottom: '10px' }}> | ||
| <Body color="secondary">{t('dashboard.stake.tabs.delegate.address')}</Body> | ||
| <InputBarContainer> | ||
| <InputBar> | ||
| <AddressInput | ||
| autoFocus={true} | ||
| value={delegatedAddress} | ||
| onChange={(e) => onInputChange(e.target.value)} | ||
| placeholder="" | ||
| /> | ||
| </InputBar> | ||
| </InputBarContainer> | ||
| </FlexDivCol> | ||
| <Button | ||
| fullWidth | ||
| variant="flat" | ||
| size="small" | ||
| loading={isApprovingOperator} | ||
| disabled={delegatedAddress.length !== 42} | ||
| onClick={() => handleApproveOperator(delegatedAddress)} | ||
| > | ||
| {t('dashboard.stake.tabs.delegate.title')} | ||
| </Button> | ||
| </CardGridContainer> | ||
| ) | ||
| }) | ||
|
|
||
| const AddressInput = styled(Input)` | ||
| position: relative; | ||
| height: 38px; | ||
| border-radius: 8px; | ||
| padding: 10px 0px; | ||
| font-size: 14px; | ||
| background: ${(props) => props.theme.colors.selectedTheme.input.background}; | ||
| font-family: ${(props) => props.theme.fonts.mono}; | ||
| border: none; | ||
| ${media.lessThan('sm')` | ||
| font-size: 12px; | ||
| `} | ||
| ` | ||
|
|
||
| const InputBar = styled.div` | ||
| width: 100%; | ||
| overflow-x: auto; | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| padding-left: 8px; | ||
| background: ${(props) => props.theme.colors.selectedTheme.input.background}; | ||
| border-radius: 8px; | ||
| border: ${(props) => props.theme.colors.selectedTheme.input.border}; | ||
| ` | ||
|
|
||
| const InputBarContainer = styled.div` | ||
| display: flex; | ||
| height: 100%; | ||
| width: 100%; | ||
| ` | ||
|
|
||
| const StyledHeading = styled(Heading)` | ||
| font-weight: 400; | ||
| ` | ||
|
|
||
| const CardGridContainer = styled(StakingCard)` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| row-gap: 25px; | ||
| ` | ||
|
|
||
| export default DelegationInput |
30 changes: 30 additions & 0 deletions
30
packages/app/src/sections/dashboard/Stake/DelegationTab.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,30 @@ | ||
| import styled from 'styled-components' | ||
|
|
||
| import media from 'styles/media' | ||
|
|
||
| import DelegationInput from './DelegationInput' | ||
| import DelegationTable from './DelegationTable' | ||
|
|
||
| const DelegationTab = () => { | ||
| return ( | ||
| <GridContainer> | ||
| <DelegationInput /> | ||
| <DelegationTable /> | ||
| </GridContainer> | ||
| ) | ||
| } | ||
|
|
||
| const GridContainer = styled.div` | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| column-gap: 15px; | ||
|
|
||
| ${media.lessThan('lg')` | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| row-gap: 25px; | ||
| margin-bottom: 25px; | ||
| `} | ||
| ` | ||
|
|
||
| export default DelegationTab |
Oops, something went wrong.
cff0664There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
kwenta – ./packages/app
kwenta-git-main-kwenta.vercel.app
kwenta.io
kwenta-kwenta.vercel.app
www.kwenta.io