config#BASE_BSC_SCAN_URL TypeScript Examples
The following examples show how to use
config#BASE_BSC_SCAN_URL.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ExpandedFooter.tsx From glide-frontend with GNU General Public License v3.0 | 4 votes |
|
ExpandedFooter: React.FC<ExpandedFooterProps> = ({ pool, account }) => {
const { t } = useTranslation()
const { currentBlock } = useBlock()
const {
totalCakeInVault,
fees: { performanceFee },
} = useCakeVault()
const {
stakingToken,
earningToken,
totalStaked,
// startBlock,
// endBlock,
stakingLimit,
contractAddress,
sousId,
isAutoVault,
} = pool
const tokenAddress = earningToken.address ? getAddress(earningToken.address) : ''
const poolContractAddress = getAddress(contractAddress)
const cakeVaultContractAddress = getCakeVaultAddress()
const isMetaMaskInScope = !!window.ethereum?.isMetaMask
const isManualCakePool = sousId === 0
const { shouldShowBlockCountdown, blocksUntilStart, blocksRemaining, hasPoolStarted, blocksToDisplay } =
getPoolBlockInfo(pool, currentBlock)
const { targetRef, tooltip, tooltipVisible } = useTooltip(
t('Subtracted automatically from each yield harvest and burned.'),
{ placement: 'bottom-start' },
)
const getTotalStakedBalance = () => {
if (isAutoVault) {
return getBalanceNumber(totalCakeInVault, stakingToken.decimals)
}
if (isManualCakePool) {
const manualCakeTotalMinusAutoVault = new BigNumber(totalStaked).minus(totalCakeInVault)
return getBalanceNumber(manualCakeTotalMinusAutoVault, stakingToken.decimals)
}
return getBalanceNumber(totalStaked, stakingToken.decimals)
}
const {
targetRef: totalStakedTargetRef,
tooltip: totalStakedTooltip,
tooltipVisible: totalStakedTooltipVisible,
} = useTooltip(t('Total amount of %symbol% staked in this pool', { symbol: stakingToken.symbol }), {
placement: 'bottom',
})
return (
<ExpandedWrapper flexDirection="column">
<Flex mb="2px" justifyContent="space-between" alignItems="center">
<Text small>{t('Total staked')}:</Text>
<Flex alignItems="flex-start">
{totalStaked && totalStaked.gte(0) ? (
<>
<Balance small value={getTotalStakedBalance()} decimals={0} unit={` ${stakingToken.symbol}`} />
<span ref={totalStakedTargetRef}>
<HelpIcon color="textSubtle" width="20px" ml="6px" mt="4px" />
</span>
</>
) : (
<Skeleton width="90px" height="21px" />
)}
{totalStakedTooltipVisible && totalStakedTooltip}
</Flex>
</Flex>
{stakingLimit && stakingLimit.gt(0) && (
<Flex mb="2px" justifyContent="space-between">
<Text small>{t('Max. stake per user')}:</Text>
<Text small>{`${getFullDisplayBalance(stakingLimit, stakingToken.decimals, 0)} ${stakingToken.symbol}`}</Text>
</Flex>
)}
{shouldShowBlockCountdown && (
<Flex mb="2px" justifyContent="space-between" alignItems="center">
<Text small>{hasPoolStarted ? t('Ends in') : t('Starts in')}:</Text>
{blocksRemaining || blocksUntilStart ? (
<Flex alignItems="center">
{/* <Link external href={getBscScanLink(hasPoolStarted ? endBlock : startBlock, 'countdown')}> */}
<Balance small value={blocksToDisplay} decimals={0} />
<Text small ml="4px" textTransform="lowercase">
{t('Blocks')}
</Text>
<TimerIcon ml="4px" />
{/* </Link> */}
</Flex>
) : (
<Skeleton width="54px" height="21px" />
)}
</Flex>
)}
{isAutoVault && (
<Flex mb="2px" justifyContent="space-between" alignItems="center">
{tooltipVisible && tooltip}
<TooltipText ref={targetRef} small>
{t('Performance Fee')}
</TooltipText>
<Flex alignItems="center">
<Text ml="4px" small>
{performanceFee / 100}%
</Text>
</Flex>
</Flex>
)}
{/* <Flex mb="2px" justifyContent="flex-end">
<LinkExternal href={`https://pancakeswap.info/token/${getAddress(earningToken.address)}`} bold={false} small>
{t('See Token Info')}
</LinkExternal>
</Flex> */}
<Flex mb="2px" justifyContent="flex-end">
<LinkExternal href={earningToken.projectLink} bold={false} small>
{t('View Project Site')}
</LinkExternal>
</Flex>
{poolContractAddress && (
<Flex mb="2px" justifyContent="flex-end">
<LinkExternal
href={`${BASE_BSC_SCAN_URL}/address/${isAutoVault ? cakeVaultContractAddress : poolContractAddress}`}
bold={false}
small
>
{t('View Contract')}
</LinkExternal>
</Flex>
)}
{account && isMetaMaskInScope && tokenAddress && (
<Flex justifyContent="flex-end">
<Button
variant="text"
p="0"
height="auto"
onClick={() => registerToken(tokenAddress, earningToken.symbol, earningToken.decimals)}
>
<Text color="primary" fontSize="14px">
{t('Add to Metamask')}
</Text>
<MetamaskIcon ml="4px" />
</Button>
</Flex>
)}
</ExpandedWrapper>
)
}
Example #2
| Source File: ActionPanel.tsx From glide-frontend with GNU General Public License v3.0 | 4 votes |
|
ActionPanel: React.FC<ActionPanelProps> = ({ account, pool, userDataLoaded, expanded, breakpoints }) => {
const {
sousId,
stakingToken,
earningToken,
totalStaked,
startBlock,
endBlock,
stakingLimit,
contractAddress,
isAutoVault,
isDividendPool,
} = pool
const { t } = useTranslation()
const poolContractAddress = getAddress(contractAddress)
const cakeVaultContractAddress = getCakeVaultAddress()
const { currentBlock } = useBlock()
const { isXs, isSm, isMd } = breakpoints
const showSubtitle = (isXs || isSm) && sousId === 0
const { shouldShowBlockCountdown, blocksUntilStart, blocksRemaining, hasPoolStarted, blocksToDisplay } =
getPoolBlockInfo(pool, currentBlock)
const isMetaMaskInScope = !!window.ethereum?.isMetaMask
const tokenAddress = earningToken.address ? getAddress(earningToken.address) : ''
const {
totalCakeInVault,
fees: { performanceFee },
} = useCakeVault()
const performanceFeeAsDecimal = performanceFee && performanceFee / 100
const isManualCakePool = sousId === 0
const getTotalStakedBalance = () => {
if (isAutoVault) {
return getBalanceNumber(totalCakeInVault, stakingToken.decimals)
}
if (isDividendPool) {
return getBalanceNumber(totalCakeInVault, stakingToken.decimals)
}
if (isManualCakePool) {
const manualCakeTotalMinusAutoVault = new BigNumber(totalStaked).minus(totalCakeInVault)
return getBalanceNumber(manualCakeTotalMinusAutoVault, stakingToken.decimals)
}
return getBalanceNumber(totalStaked, stakingToken.decimals)
}
const {
targetRef: totalStakedTargetRef,
tooltip: totalStakedTooltip,
tooltipVisible: totalStakedTooltipVisible,
} = useTooltip(t('Total amount of %symbol% staked in this pool', { symbol: stakingToken.symbol }), {
placement: 'bottom',
})
const manualTooltipText = t('You must harvest and compound your earnings from this pool manually.')
const autoTooltipText = t(
'Any funds you stake in this pool will be automatically harvested and restaked (compounded) for you.',
)
const {
targetRef: tagTargetRef,
tooltip: tagTooltip,
tooltipVisible: tagTooltipVisible,
} = useTooltip(isDividendPool ? autoTooltipText : isAutoVault ? autoTooltipText : manualTooltipText, {
placement: 'bottom-start',
})
const maxStakeRow = stakingLimit.gt(0) ? (
<Flex mb="8px" justifyContent="space-between">
<Text>{t('Max. stake per user')}:</Text>
<Text>{`${getFullDisplayBalance(stakingLimit, stakingToken.decimals, 0)} ${stakingToken.symbol}`}</Text>
</Flex>
) : null
const blocksRow =
blocksRemaining || blocksUntilStart ? (
<Flex mb="8px" justifyContent="space-between">
<Text>{hasPoolStarted ? t('Ends in') : t('Starts in')}:</Text>
<Flex>
<Link external href={getBscScanLink(hasPoolStarted ? endBlock : startBlock, 'countdown')}>
<Balance fontSize="16px" value={blocksToDisplay} decimals={0} color="primary" />
<Text ml="4px" color="primary" textTransform="lowercase">
{t('Blocks')}
</Text>
<TimerIcon ml="4px" color="primary" />
</Link>
</Flex>
</Flex>
) : (
<Skeleton width="56px" height="16px" />
)
const aprRow = (
<Flex justifyContent="space-between" alignItems="center" mb="8px">
<Text>{isAutoVault ? t('APY') : t('APR')}:</Text>
<Apr pool={pool} showIcon performanceFee={isAutoVault ? performanceFeeAsDecimal : 0} />
</Flex>
)
const totalStakedRow = (
<Flex justifyContent="space-between" alignItems="center" mb="8px">
<Text maxWidth={['50px', '100%']}>{t('Total staked')}:</Text>
<Flex alignItems="center">
{totalStaked && totalStaked.gte(0) ? (
<>
<Balance fontSize="16px" value={getTotalStakedBalance()} decimals={0} unit={` ${stakingToken.symbol}`} />
<span ref={totalStakedTargetRef}>
<HelpIcon color="textSubtle" width="20px" ml="4px" />
</span>
</>
) : (
<Skeleton width="56px" height="16px" />
)}
{totalStakedTooltipVisible && totalStakedTooltip}
</Flex>
</Flex>
)
return (
<StyledActionPanel expanded={expanded}>
<InfoSection>
{maxStakeRow}
{(isXs || isSm) && aprRow}
{(isXs || isSm || isMd) && totalStakedRow}
{shouldShowBlockCountdown && blocksRow}
{/* <Flex mb="8px" justifyContent={['flex-end', 'flex-end', 'flex-start']}>
<LinkExternal href={`https://pancakeswap.info/token/${getAddress(earningToken.address)}`} bold={false}>
{t('See Token Info')}
</LinkExternal>
</Flex> */}
<Flex mb="8px" justifyContent={['flex-end', 'flex-end', 'flex-start']}>
<LinkExternal href={earningToken.projectLink} bold={false}>
{t('View Project Site')}
</LinkExternal>
</Flex>
{poolContractAddress && (
<Flex mb="8px" justifyContent={['flex-end', 'flex-end', 'flex-start']}>
<LinkExternal
href={`${BASE_BSC_SCAN_URL}/address/${isAutoVault ? cakeVaultContractAddress : poolContractAddress}`}
bold={false}
>
{t('View Contract')}
</LinkExternal>
</Flex>
)}
{account && isMetaMaskInScope && tokenAddress && (
<Flex mb="8px" justifyContent={['flex-end', 'flex-end', 'flex-start']}>
<Button
variant="text"
p="0"
height="auto"
onClick={() => registerToken(tokenAddress, earningToken.symbol, earningToken.decimals)}
>
<Text color="primary">{t('Add to Metamask')}</Text>
<MetamaskIcon ml="4px" />
</Button>
</Flex>
)}
{isDividendPool ? <CompoundingPoolTag /> : isAutoVault ? <CompoundingPoolTag /> : <ManualPoolTag />}
{tagTooltipVisible && tagTooltip}
<span ref={tagTargetRef}>
<HelpIcon ml="4px" width="20px" height="20px" color="textSubtle" />
</span>
</InfoSection>
<ActionContainer>
{showSubtitle && (
<Text mt="4px" mb="16px" color="textSubtle">
{isAutoVault ? t('Automatic restaking') : `${t('Earn')} GLIDE ${t('Stake').toLocaleLowerCase()} GLIDE`}
</Text>
)}
<Harvest {...pool} userDataLoaded={userDataLoaded} />
<Stake pool={pool} userDataLoaded={userDataLoaded} />
</ActionContainer>
</StyledActionPanel>
)
}
Example #3
| Source File: ExpandedFooter.tsx From glide-frontend with GNU General Public License v3.0 | 4 votes |
|
ExpandedFooter: React.FC<ExpandedFooterProps> = ({ pool, account }) => {
const { t } = useTranslation()
const { currentBlock } = useBlock()
const {
totalCakeInVault,
fees: { performanceFee },
} = useCakeVault()
const {
stakingToken,
earningToken,
totalStaked,
startBlock,
endBlock,
stakingLimit,
contractAddress,
sousId,
isAutoVault,
} = pool
const tokenAddress = earningToken.address ? getAddress(earningToken.address) : ''
const poolContractAddress = getAddress(contractAddress)
const cakeVaultContractAddress = getCakeVaultAddress()
const isMetaMaskInScope = !!window.ethereum?.isMetaMask
const isManualCakePool = sousId === 0
const { shouldShowBlockCountdown, blocksUntilStart, blocksRemaining, hasPoolStarted, blocksToDisplay } =
getPoolBlockInfo(pool, currentBlock)
const { targetRef, tooltip, tooltipVisible } = useTooltip(
t('Subtracted automatically from each yield harvest and burned.'),
{ placement: 'bottom-start' },
)
const getTotalStakedBalance = () => {
if (isAutoVault) {
return getBalanceNumber(totalCakeInVault, stakingToken.decimals)
}
if (isManualCakePool) {
const manualCakeTotalMinusAutoVault = new BigNumber(totalStaked).minus(totalCakeInVault)
return getBalanceNumber(manualCakeTotalMinusAutoVault, stakingToken.decimals)
}
return getBalanceNumber(totalStaked, stakingToken.decimals)
}
const {
targetRef: totalStakedTargetRef,
tooltip: totalStakedTooltip,
tooltipVisible: totalStakedTooltipVisible,
} = useTooltip(t('Total amount of %symbol% staked in this pool', { symbol: stakingToken.symbol }), {
placement: 'bottom',
})
return (
<ExpandedWrapper flexDirection="column">
<Flex mb="2px" justifyContent="space-between" alignItems="center">
<Text small>{t('Total staked')}:</Text>
<Flex alignItems="flex-start">
{totalStaked && totalStaked.gte(0) ? (
<>
<Balance small value={getTotalStakedBalance()} decimals={0} unit={` ${stakingToken.symbol}`} />
<span ref={totalStakedTargetRef}>
<HelpIcon color="textSubtle" width="20px" ml="6px" mt="4px" />
</span>
</>
) : (
<Skeleton width="90px" height="21px" />
)}
{totalStakedTooltipVisible && totalStakedTooltip}
</Flex>
</Flex>
{stakingLimit && stakingLimit.gt(0) && (
<Flex mb="2px" justifyContent="space-between">
<Text small>{t('Max. stake per user')}:</Text>
<Text small>{`${getFullDisplayBalance(stakingLimit, stakingToken.decimals, 0)} ${stakingToken.symbol}`}</Text>
</Flex>
)}
{shouldShowBlockCountdown && (
<Flex mb="2px" justifyContent="space-between" alignItems="center">
<Text small>{hasPoolStarted ? t('Ends in') : t('Starts in')}:</Text>
{blocksRemaining || blocksUntilStart ? (
<Flex alignItems="center">
<Link external href={getBscScanLink(hasPoolStarted ? endBlock : startBlock, 'countdown')}>
<Balance small value={blocksToDisplay} decimals={0} color="primary" />
<Text small ml="4px" color="primary" textTransform="lowercase">
{t('Blocks')}
</Text>
<TimerIcon ml="4px" color="primary" />
</Link>
</Flex>
) : (
<Skeleton width="54px" height="21px" />
)}
</Flex>
)}
{isAutoVault && (
<Flex mb="2px" justifyContent="space-between" alignItems="center">
{tooltipVisible && tooltip}
<TooltipText ref={targetRef} small>
{t('Performance Fee')}
</TooltipText>
<Flex alignItems="center">
<Text ml="4px" small>
{performanceFee / 100}%
</Text>
</Flex>
</Flex>
)}
{/* <Flex mb="2px" justifyContent="flex-end">
<LinkExternal href={`https://pancakeswap.info/token/${getAddress(earningToken.address)}`} bold={false} small>
{t('See Token Info')}
</LinkExternal>
</Flex> */}
<Flex mb="2px" justifyContent="flex-end">
<LinkExternal href={earningToken.projectLink} bold={false} small>
{t('View Project Site')}
</LinkExternal>
</Flex>
{poolContractAddress && (
<Flex mb="2px" justifyContent="flex-end">
<LinkExternal
href={`${BASE_BSC_SCAN_URL}/address/${isAutoVault ? cakeVaultContractAddress : poolContractAddress}`}
bold={false}
small
>
{t('View Contract')}
</LinkExternal>
</Flex>
)}
{account && isMetaMaskInScope && tokenAddress && (
<Flex justifyContent="flex-end">
<Button
variant="text"
p="0"
height="auto"
onClick={() => registerToken(tokenAddress, earningToken.symbol, earningToken.decimals)}
>
<Text color="primary" fontSize="14px">
{t('Add to Metamask')}
</Text>
<MetamaskIcon ml="4px" />
</Button>
</Flex>
)}
</ExpandedWrapper>
)
}
