utils#useLairDQUICKAPY TypeScript Examples
The following examples show how to use
utils#useLairDQUICKAPY.
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: TradingInfo.tsx From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
TradingInfo: React.FC<{ globalData: any }> = ({ globalData }) => {
const classes = useStyles();
const lairInfo = useLairInfo();
const [openStakeModal, setOpenStakeModal] = useState(false);
const dQUICKAPY = useLairDQUICKAPY(lairInfo);
const totalRewardsUSD = useTotalRewardsDistributed();
return (
<>
{openStakeModal && (
<StakeQuickModal
open={openStakeModal}
onClose={() => setOpenStakeModal(false)}
/>
)}
<Box className={classes.tradingSection}>
{globalData ? (
<Typography variant='h3'>
{Number(globalData.oneDayTxns).toLocaleString()}
</Typography>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>24H TRANSACTIONS</Typography>
</Box>
<Box className={classes.tradingSection}>
{globalData ? (
<Box display='flex'>
<Typography variant='h6'>$</Typography>
<Typography variant='h3'>
{formatCompact(globalData.oneDayVolumeUSD)}
</Typography>
</Box>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>24H TRADING VOLUME</Typography>
</Box>
<Box className={classes.tradingSection}>
{totalRewardsUSD ? (
<Box display='flex'>
<Typography variant='h6'>$</Typography>
<Typography variant='h3'>
{totalRewardsUSD.toLocaleString()}
</Typography>
</Box>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>24h REWARDS DISTRIBUTED</Typography>
</Box>
<Box className={classes.tradingSection}>
{globalData ? (
<Typography variant='h3'>
{Number(globalData.pairCount).toLocaleString(undefined, {
maximumFractionDigits: 0,
})}
</Typography>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>TOTAL TRADING PAIRS</Typography>
</Box>
<Box className={classes.tradingSection} pt='20px'>
{dQUICKAPY ? (
<Typography variant='h3'>{dQUICKAPY.toLocaleString()}%</Typography>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>dQUICK APY</Typography>
<Typography variant='h4' onClick={() => setOpenStakeModal(true)}>
stake {'>'}
</Typography>
</Box>
</>
);
}
Example #2
| Source File: DragonsLair.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
DragonsLair: React.FC = () => {
const classes = useStyles();
const { palette } = useTheme();
const quickPrice = useUSDCPriceToken(returnTokenFromKey('QUICK'));
const dQUICKPrice = useUSDCPriceToken(returnTokenFromKey('DQUICK'));
const dQUICKtoQUICK = dQUICKPrice / quickPrice;
const QUICKtodQUICK = quickPrice / dQUICKPrice;
const [isQUICKRate, setIsQUICKRate] = useState(false);
const [openStakeModal, setOpenStakeModal] = useState(false);
const [openUnstakeModal, setOpenUnstakeModal] = useState(false);
const lairInfo = useLairInfo();
const APY = useLairDQUICKAPY(lairInfo);
return (
<Box position='relative' zIndex={3}>
{openStakeModal && (
<StakeQuickModal
open={openStakeModal}
onClose={() => setOpenStakeModal(false)}
/>
)}
{openUnstakeModal && (
<UnstakeQuickModal
open={openUnstakeModal}
onClose={() => setOpenUnstakeModal(false)}
/>
)}
<Box display='flex'>
<CurrencyLogo currency={returnTokenFromKey('QUICK')} size='32px' />
<Box ml={1.5}>
<Typography
variant='body2'
style={{ color: palette.text.primary, lineHeight: 1 }}
>
QUICK
</Typography>
<Typography variant='caption' style={{ color: palette.text.hint }}>
Single Stake — Auto compounding
</Typography>
</Box>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>Total QUICK</Typography>
<Typography variant='body2'>
{lairInfo
? lairInfo.totalQuickBalance.toFixed(2, {
groupSeparator: ',',
})
: 0}
</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>TVL:</Typography>
<Typography variant='body2'>
$
{(
Number(lairInfo.totalQuickBalance.toExact()) * quickPrice
).toLocaleString()}
</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>APY</Typography>
<Typography variant='body2' style={{ color: palette.success.main }}>
{APY}%
</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>Your Deposits</Typography>
<Typography variant='body2'>
{formatTokenAmount(lairInfo.QUICKBalance)}
</Typography>
</Box>
<Box
mt={2.5}
width={1}
height='40px'
display='flex'
alignItems='center'
justifyContent='center'
borderRadius={10}
border={`1px solid ${palette.secondary.light}`}
>
<CurrencyLogo currency={returnTokenFromKey('QUICK')} />
<Typography variant='body2' style={{ margin: '0 8px' }}>
{isQUICKRate ? 1 : dQUICKtoQUICK.toLocaleString()} QUICK =
</Typography>
<CurrencyLogo currency={returnTokenFromKey('QUICK')} />
<Typography variant='body2' style={{ margin: '0 8px' }}>
{isQUICKRate ? QUICKtodQUICK.toLocaleString() : 1} dQUICK
</Typography>
<PriceExchangeIcon
style={{ cursor: 'pointer' }}
onClick={() => setIsQUICKRate(!isQUICKRate)}
/>
</Box>
<Box
className={classes.stakeButton}
bgcolor={palette.primary.main}
onClick={() => setOpenStakeModal(true)}
>
<Typography variant='body2'>Stake</Typography>
</Box>
<Box
className={classes.stakeButton}
bgcolor='transparent'
onClick={() => setOpenUnstakeModal(true)}
>
<Typography variant='body2'>Unstake</Typography>
</Box>
<Box mt={3} textAlign='center'>
<Typography
variant='caption'
style={{ color: palette.text.secondary, fontWeight: 500 }}
>
⭐️ When you unstake, the contract will automatically claim QUICK on
your behalf.
</Typography>
</Box>
</Box>
);
}
Example #3
| Source File: DragonsSyrup.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
DragonsSyrup: React.FC = () => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [isEndedSyrup, setIsEndedSyrup] = useState(false);
const [pageIndex, setPageIndex] = useState(0);
const [sortBy, setSortBy] = useState(0);
const [sortDesc, setSortDesc] = useState(false);
const [stakedOnly, setStakeOnly] = useState(false);
const [syrupSearch, setSyrupSearch] = useState('');
const [syrupSearchInput, setSyrupSearchInput] = useDebouncedChangeHandler(
syrupSearch,
setSyrupSearch,
);
const lairInfo = useLairInfo();
const dQUICKAPY = useLairDQUICKAPY(lairInfo);
const addedStakingSyrupInfos = useSyrupInfo(
null,
isEndedSyrup ? 0 : undefined,
isEndedSyrup ? 0 : undefined,
{ search: syrupSearch, isStaked: stakedOnly },
);
const addedOldSyrupInfos = useOldSyrupInfo(
null,
isEndedSyrup ? undefined : 0,
isEndedSyrup ? undefined : 0,
{ search: syrupSearch, isStaked: stakedOnly },
);
const addedSyrupInfos = isEndedSyrup
? addedOldSyrupInfos
: addedStakingSyrupInfos;
const sortIndex = sortDesc ? 1 : -1;
const sortByToken = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
const syrupStrA = a.token.symbol ?? '';
const syrupStrB = b.token.symbol ?? '';
return (syrupStrA > syrupStrB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByDeposit = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
const depositA =
a.valueOfTotalStakedAmountInUSDC ??
getExactTokenAmount(a.totalStakedAmount);
const depositB =
b.valueOfTotalStakedAmountInUSDC ??
getExactTokenAmount(b.totalStakedAmount);
return (depositA > depositB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByAPR = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
return (getTokenAPRSyrup(a) > getTokenAPRSyrup(b) ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByEarned = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
const earnedUSDA =
getExactTokenAmount(a.earnedAmount) * (a.rewardTokenPriceinUSD ?? 0);
const earnedUSDB =
getExactTokenAmount(b.earnedAmount) * (b.rewardTokenPriceinUSD ?? 0);
return (earnedUSDA > earnedUSDB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortedSyrupInfos = useMemo(() => {
return addedSyrupInfos.sort((a, b) => {
if (sortBy === TOKEN_COLUMN) {
return sortByToken(a, b);
} else if (sortBy === DEPOSIT_COLUMN) {
return sortByDeposit(a, b);
} else if (sortBy === APR_COLUMN) {
return sortByAPR(a, b);
} else if (sortBy === EARNED_COLUMN) {
return sortByEarned(a, b);
}
return 1;
});
}, [
addedSyrupInfos,
sortBy,
sortByToken,
sortByDeposit,
sortByAPR,
sortByEarned,
]);
const syrupRewardAddress = useMemo(
() =>
sortedSyrupInfos
.map((syrupInfo) => syrupInfo.stakingRewardAddress.toLowerCase())
.reduce((totStr, str) => totStr + str, ''),
[sortedSyrupInfos],
);
useEffect(() => {
setPageIndex(0);
}, [syrupRewardAddress]);
const syrupInfos = useMemo(() => {
return sortedSyrupInfos
? sortedSyrupInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADSYRUP_COUNT),
)
: null;
}, [sortedSyrupInfos, pageIndex]);
const loadNext = () => {
setPageIndex(pageIndex + 1);
};
const { loadMoreRef } = useInfiniteLoading(loadNext);
const renderStakedOnly = () => (
<Box display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.disabled, marginRight: 8 }}
>
Staked Only
</Typography>
<ToggleSwitch
toggled={stakedOnly}
onToggle={() => setStakeOnly(!stakedOnly)}
/>
</Box>
);
const syrupStatusItems = [
{
text: 'Active',
onClick: () => setIsEndedSyrup(false),
condition: !isEndedSyrup,
},
{
text: 'Ended',
onClick: () => setIsEndedSyrup(true),
condition: isEndedSyrup,
},
];
const sortColumns = [
{
text: 'Earn',
index: TOKEN_COLUMN,
width: 0.3,
},
{
text: 'Deposits',
index: DEPOSIT_COLUMN,
width: 0.3,
},
{
text: 'APR',
index: APR_COLUMN,
width: 0.2,
},
{
text: 'Earned',
index: EARNED_COLUMN,
width: 0.2,
justify: 'flex-end',
},
];
const sortByDesktopItems = sortColumns.map((item) => {
return {
...item,
onClick: () => {
if (sortBy === item.index) {
setSortDesc(!sortDesc);
} else {
setSortBy(item.index);
setSortDesc(false);
}
},
};
});
const sortByMobileItems = sortColumns.map((item) => {
return { text: item.text, onClick: () => setSortBy(item.index) };
});
return (
<>
<Box display='flex' flexWrap='wrap' alignItems='center' mb={3.5}>
<Box
display='flex'
justifyContent='space-between'
width={returnFullWidthMobile(isMobile)}
flex={isMobile ? 'unset' : 1}
>
<Box width={isMobile ? 'calc(100% - 150px)' : 1} mr={2} my={2}>
<SearchInput
placeholder={
isMobile ? 'Search' : 'Search name, symbol or paste address'
}
value={syrupSearchInput}
setValue={setSyrupSearchInput}
/>
</Box>
{isMobile && renderStakedOnly()}
</Box>
<Box
width={returnFullWidthMobile(isMobile)}
display='flex'
flexWrap='wrap'
alignItems='center'
>
<Box mr={2}>
<CustomSwitch width={160} height={40} items={syrupStatusItems} />
</Box>
{isMobile ? (
<>
<Box height={40} flex={1}>
<CustomMenu title='Sort By' menuItems={sortByMobileItems} />
</Box>
<Box mt={2} width={1} display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.disabled, marginRight: 8 }}
>
Sort {sortDesc ? 'Desc' : 'Asc'}
</Typography>
<ToggleSwitch
toggled={sortDesc}
onToggle={() => setSortDesc(!sortDesc)}
/>
</Box>
</>
) : (
renderStakedOnly()
)}
</Box>
</Box>
<Divider />
{!isMobile && (
<Box mt={2.5} display='flex' paddingX={2}>
{sortByDesktopItems.map((item) => (
<Box
key={item.index}
display='flex'
alignItems='center'
width={item.width}
style={{ cursor: 'pointer' }}
justifyContent={item.justify}
onClick={item.onClick}
color={
sortBy === item.index
? palette.text.primary
: palette.text.secondary
}
>
<Typography variant='body2'>{item.text}</Typography>
<Box display='flex' ml={0.5}>
{sortBy === item.index && sortDesc ? (
<ArrowDown size={20} />
) : (
<ArrowUp size={20} />
)}
</Box>
</Box>
))}
</Box>
)}
{syrupInfos ? (
syrupInfos.map((syrup, ind) => (
<SyrupCard key={ind} syrup={syrup} dQUICKAPY={dQUICKAPY} />
))
) : (
<>
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
</>
)}
<div ref={loadMoreRef} />
</>
);
}
