feat: New syrup pool cards #874
Conversation
…arning tokens and links
…tend into feature/syrup-pool-new-cards
| const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0) | ||
| const earnings = new BigNumber(userData?.pendingReward || 0) | ||
| const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool | ||
| const isStaked = stakedBalance.toNumber() > 0 |
There was a problem hiding this comment.
same feedback, stick with BigNumber
There was a problem hiding this comment.
Akh sorry you had to catch this multiple times, ty! I wasn't familiar with .gt() / .gte() until yesterday. Suuuper useful
| const allowance = new BigNumber(userData?.allowance || 0) | ||
| const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0) | ||
| const earnings = new BigNumber(userData?.pendingReward || 0) | ||
| const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool |
There was a problem hiding this comment.
same with allowance.toNumber()
| const { stakingToken, earningToken, totalStaked, startBlock, endBlock, isFinished, contractAddress } = pool | ||
|
|
||
| const tokenAddress = earningToken.address ? getAddress(earningToken.address) : '' | ||
| const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID] |
There was a problem hiding this comment.
This is what getAddress does
| </Flex> | ||
| )} | ||
| <Flex mb="2px" justifyContent="flex-end"> | ||
| <LinkExternal bold={false} fontSize="14px" href={earningToken.projectLink} target="_blank"> |
There was a problem hiding this comment.
target="_blank" is not needed on this component
| <LinkExternal | ||
| bold={false} | ||
| fontSize="14px" | ||
| href={`https://bscscan.com/address/${poolContractAddress}`} |
There was a problem hiding this comment.
Not sure we had a bsc scan const in config - I've added it!
| bold={false} | ||
| fontSize="14px" | ||
| href={`https://bscscan.com/address/${poolContractAddress}`} | ||
| target="_blank" |
| <Button mt="24px" as="a" external href={BASE_EXCHANGE_URL}> | ||
| {TranslateString(999, 'Buy')} {tokenSymbol} | ||
| </Button> | ||
| <Button variant="secondary" mt="8px" href="https://yieldwatch.net" as="a" external> |
There was a problem hiding this comment.
external won't work on a, you need to import Link from the uikit.
| const [stakeAmount, setStakeAmount] = useState('') | ||
| const [percent, setPercent] = useState(0) | ||
|
|
||
| const usdValueStaked = stakeAmount && formatNumber(parseFloat(stakeAmount) * stakingTokenPrice) |
There was a problem hiding this comment.
use BigNumber for arithmetic operations
| const convertedInput = new BigNumber(inputValue).multipliedBy(new BigNumber(10).pow(stakingToken.decimals)) | ||
| const percentage = Math.floor(convertedInput.dividedBy(stakingMax).multipliedBy(100).toNumber()) | ||
| setStakeAmount(inputValue) | ||
| setPercent(percentage > 100 ? 100 : percentage) |
| step={1} | ||
| /> | ||
| <Flex alignItems="center" justifyContent="space-between" mt="8px"> | ||
| <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(25)}> |
There was a problem hiding this comment.
Ahahaha. Yes good point. I think I just yeeted some [redacted] code here 😬
| {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')} | ||
| </Button> | ||
| {!isRemovingStake && ( | ||
| <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary"> |
There was a problem hiding this comment.
external not working on a
| </NotificationDot> | ||
| </ButtonMenu> | ||
| <Flex ml="24px" justifyContent="center" alignItems="center"> | ||
| <Toggle scale="sm" checked={stakedOnly} onChange={() => setStakedOnly(!stakedOnly)} /> |
There was a problem hiding this comment.
() => setStakedOnly(!stakedOnly) is absolutely forbidden !!
(prev) => setStakedOnly(!prev)
| <Button | ||
| px={['14px', null, null, null, '20px']} | ||
| variant="subtle" | ||
| as="a" |
There was a problem hiding this comment.
Link, with external props
src/views/Pools/svgs/SashVector.tsx
Outdated
| @@ -0,0 +1,12 @@ | |||
| import React from 'react' | |||
There was a problem hiding this comment.
Pretty sure we have this somewhere already
There was a problem hiding this comment.
Ah yes indeed, I've pulled in the stuff from ui kit but I think it needs a z-index adding, so uikit PR here for that pancakeswap/pancake-toolkit#88
…tend into feature/syrup-pool-new-cards
|
Left the comments unresolved in case you want to check back @RabbitDoge, but all the fixes are here - dfa6bc5 |
| @@ -30,7 +31,7 @@ const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => { | |||
|
|
|||
| const apyModalLink = | |||
| stakingToken.address && | |||
| `https://exchange.pancakeswap.finance/#/swap?outputCurrency= | |||
| `${BASE_EXCHANGE_URL}/#/swap?outputCurrency= | |||
There was a problem hiding this comment.
- Now there is a space between
=and token/cake address (outputCurrency= 0x1234), so the link to exchange doesn't set token as intended. - Even if it would work exchange shows scary modal now for token addresses. AFAIK there is no way to pass token name to pre-select CAKE so might be not fixable at the moment, but that's ok I guess.
There was a problem hiding this comment.
Cheers Cheems, nice catch!
| import { Button } from '@pancakeswap-libs/uikit' | ||
|
|
||
| interface PercentageButtonProps { | ||
| onClick?: () => void |
There was a problem hiding this comment.
This probably shouldn't be optional.
| @@ -79,7 +79,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({ | |||
| </Flex> | |||
| </Flex> | |||
| ) : ( | |||
| <Button onClick={stakingTokenBalance.toNumber() > 0 ? onPresentStake : onPresentTokenRequired}> | |||
| <Button onClick={stakingTokenBalance.gt(0) ? onPresentStake : onPresentTokenRequired}> | |||
There was a problem hiding this comment.
Not sure what's the intended behavior - but shouldn't stakingTokenBalance.gt(0) ? onPresentStake : onPresentTokenRequired (i.e. opening NotEnoughTokens modal) be also used on the staked pool when you click on + ?
There was a problem hiding this comment.
That is an excellent catch yes you're dead right, I actually thought I'd added it. Maybe in the vault PR.
| </NotificationDot> | ||
| </ButtonMenu> | ||
| <Flex ml="24px" justifyContent="center" alignItems="center"> | ||
| <Toggle scale="sm" checked={stakedOnly} onChange={(prev) => setStakedOnly(!prev)} /> |
There was a problem hiding this comment.
@ChefHutch Staked only toggle doesn't work. This should be onChange={() => setStakedOnly((prev) => !prev)}.
| isFinished?: boolean | ||
| }> = ({ earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => { | ||
| const poolImageSrc = `${earningTokenSymbol}-${stakingTokenSymbol}.svg`.toLocaleLowerCase() | ||
| const isPromoted = earningTokenSymbol === 'CAKE' |
There was a problem hiding this comment.
This is incorrect, if we have a pool BNB/CAKE , it will trigger this line
There was a problem hiding this comment.
Cheers Doge, have amended to earningTokenSymbol === 'CAKE' && stakingTokenSymbol === 'CAKE'
…tend into feature/syrup-pool-new-cards
* feat(syrup-pool-v2): Update PageHeader and TabButtons * feat(syrup-pool-v2): Reorg component structure and add new styledCardHeader * feat(syrup-pool-v2): Yeet some sheet * feat(syrup-pool-v2): Add finished sash and handle finished state of card header * feat(syrup-pool-v2): Create APR row comp * feat(syrup-pool-v2): Tidy up & restyling of footer * feat(syrup-pool-v2): Finish up various footer comps * feat(syrup-pool-v2): Upgrade ApyCalculatorModal to handle different earning tokens and links * feat(syrup-pool-v2): Loading states for footer and APR * fix(syrup-pool-v2): Fix merge conflicts * fix(syrup-pool-v2): Fix lint error * chore(syrup-pool-v2): Break CardActions into its own component and reorg props * feat(syrup-pool-v2): Create separate Staking / HarvestActions comps * feat(syrup-pool-v2): Approval and Staking actions * feat(pool-stake-modal): Basics of stake modal laid out * feat(syrup-pool-v2): Styling of cards and improvements to error reporting for users * feat(syrup-pool-v2): Add proper USD calculation * feat(syrup-pool-v2): Adding unstaking buttons and rough modal operations * feat(syrup-pool-v2): Refactor footer for performance and add HarvestActions * feat(syrup-pool-v2): Basic harvest modal and functionality added * feat(syrup-pool-v2): Styling fixes and pass account down from pool view * feat(syrup-pool-v2): Styling and tooltip for compounding modal * feat(syrup-pool-v2): Finish compounding modal * feat(syrup-pool-v2): Style for promoted pool (& cake) and organising files * feat(syrup-pool-v2): Massive proptypes tidy up * chore(syrup-pool-v2): Del unused SVG * feat(syrup-pool-v2): Add loading states for different card elements * feat(syrup-pool-v2): Add bunny img * feat(syrup-pool-v2): Fix high price token showing 0% APR * chore(syrup-pool-v2): Cleanup white space * chore(syrup-pool-v2): Re-add usePersistState * chore(syrup-pool-v2): Add comments to help * chore(syrup-pool-v2): Remove unused components * fix(syrup-pool-v2): Fix useToast * feat(syrup-pool-v2): Move help to pooltabbuttons bar * feat(syrup-pool-v2): Disabled button when stakeAmount is zero or unset * fix(pool-cards-v2): Amendments based on Doge's CR comments * fix(pool-cards-v2): Proper finished handling on staking actions * fix(pool-cards-v2): Follow up CR comments * feat(syrup-pool-v2): Add new uikit version
Quite a complete rewrite of the existing
PoolCardcomponent. The pools view itself has had small changes & the pools / userData state is untouched.Preview: https://new-pool-cards.netlify.app/
The whole rework only adds 100 lines of code (net) to the codebase! ✊