@material-ui/icons#KeyboardArrowUp TypeScript Examples
The following examples show how to use
@material-ui/icons#KeyboardArrowUp.
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: BLunaBurnProcess.tsx From anchor-web-app with Apache License 2.0 | 6 votes |
|
function Component({ className, style }: BLunaBurnProcessProps) {
const [show, setShow] = useLocalStorage<'on' | 'off'>(
'__anchor_show_burn_process__',
'off',
);
return (
<div className={className} style={style}>
<h4 onClick={() => setShow(show === 'on' ? 'off' : 'on')}>
<Info /> bLuna Burn Process{' '}
{show === 'on' ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</h4>
{show === 'on' && <Content />}
</div>
);
}
Example #2
| Source File: CustomMenu.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
|
CustomMenu: React.FC<CustomMenuProps> = ({ title, menuItems }) => {
const classes = useStyles();
const [openMenu, setOpenMenu] = React.useState(false);
const [menuItem, setMenuItem] = React.useState<CustomMenuItem | null>(null);
return (
<>
<Box className={classes.wrapper} onClick={() => setOpenMenu(!openMenu)}>
<Typography variant='body2'>
{title} {menuItem?.text}
</Typography>
{openMenu ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
{openMenu && (
<Box className={classes.menuContent}>
{menuItems.map((item, index) => (
<Box
my={1}
key={index}
onClick={() => {
item.onClick();
setOpenMenu(false);
setMenuItem(item);
}}
>
<Typography variant='body2' color='textSecondary'>
{item.text}
</Typography>
</Box>
))}
</Box>
)}
</>
);
}
Example #3
| Source File: FarmCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FarmCard: React.FC<{
stakingInfo: StakingInfo | DualStakingInfo;
stakingAPY: number;
isLPFarm?: boolean;
}> = ({ stakingInfo, stakingAPY, isLPFarm }) => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [isExpandCard, setExpandCard] = useState(false);
const lpStakingInfo = stakingInfo as StakingInfo;
const dualStakingInfo = stakingInfo as DualStakingInfo;
const token0 = stakingInfo.tokens[0];
const token1 = stakingInfo.tokens[1];
const currency0 = unwrappedToken(token0);
const currency1 = unwrappedToken(token1);
const stakedAmounts = getStakedAmountStakingInfo(stakingInfo);
let apyWithFee: number | string = 0;
if (stakingAPY && stakingAPY > 0 && stakingInfo.perMonthReturnInRewards) {
apyWithFee = formatAPY(
getAPYWithFee(stakingInfo.perMonthReturnInRewards, stakingAPY),
);
}
const tvl = getTVLStaking(
stakedAmounts?.totalStakedUSD,
stakedAmounts?.totalStakedBase,
);
const lpPoolRate = getRewardRate(
lpStakingInfo.totalRewardRate,
lpStakingInfo.rewardToken,
);
const dualPoolRateA = getRewardRate(
dualStakingInfo.totalRewardRateA,
dualStakingInfo.rewardTokenA,
);
const dualPoolRateB = getRewardRate(
dualStakingInfo.totalRewardRateB,
dualStakingInfo.rewardTokenB,
);
const earnedUSDStr = isLPFarm
? getEarnedUSDLPFarm(lpStakingInfo)
: getEarnedUSDDualFarm(dualStakingInfo);
const lpRewards = lpStakingInfo.rewardTokenPrice * lpStakingInfo.rate;
const dualRewards =
dualStakingInfo.rateA * dualStakingInfo.rewardTokenAPrice +
dualStakingInfo.rateB * dualStakingInfo.rewardTokenBPrice;
const renderPool = (width: number) => (
<Box display='flex' alignItems='center' width={width}>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
size={28}
/>
<Box ml={1.5}>
<Typography variant='body2'>
{currency0.symbol} / {currency1.symbol} LP
</Typography>
</Box>
</Box>
);
return (
<Box
className={cx(
classes.farmLPCard,
isExpandCard && classes.highlightedCard,
)}
>
<Box
className={classes.farmLPCardUp}
onClick={() => setExpandCard(!isExpandCard)}
>
{isMobile ? (
<>
{renderPool(isExpandCard ? 0.95 : 0.7)}
{!isExpandCard && (
<Box width={0.25}>
<Box display='flex' alignItems='center'>
<Typography variant='caption' color='textSecondary'>
APY
</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box mt={0.5} color={palette.success.main}>
<Typography variant='body2'>{apyWithFee}%</Typography>
</Box>
</Box>
)}
<Box
width={0.05}
display='flex'
justifyContent='flex-end'
color={palette.primary.main}
>
{isExpandCard ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
</>
) : (
<>
{renderPool(0.3)}
<Box width={0.2} textAlign='center'>
<Typography variant='body2'>{tvl}</Typography>
</Box>
<Box width={0.25} textAlign='center'>
<Typography variant='body2'>
${(isLPFarm ? lpRewards : dualRewards).toLocaleString()} / day
</Typography>
{isLPFarm ? (
<Typography variant='body2'>{lpPoolRate}</Typography>
) : (
<>
<Typography variant='body2'>{dualPoolRateA}</Typography>
<Typography variant='body2'>{dualPoolRateB}</Typography>
</>
)}
</Box>
<Box
width={0.15}
display='flex'
justifyContent='center'
alignItems='center'
color={palette.success.main}
>
<Typography variant='body2'>{apyWithFee}%</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box width={0.2} textAlign='right'>
<Typography variant='body2'>{earnedUSDStr}</Typography>
{isLPFarm ? (
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={lpStakingInfo.rewardToken}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(lpStakingInfo.earnedAmount)}
<span> {lpStakingInfo.rewardToken.symbol}</span>
</Typography>
</Box>
) : (
<>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenA)}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(dualStakingInfo.earnedAmountA)}
<span> {dualStakingInfo.rewardTokenA.symbol}</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenB)}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(dualStakingInfo.earnedAmountB)}
<span> {dualStakingInfo.rewardTokenB.symbol}</span>
</Typography>
</Box>
</>
)}
</Box>
</>
)}
</Box>
{isExpandCard && (
<FarmCardDetails
stakingInfo={stakingInfo}
stakingAPY={stakingAPY}
isLPFarm={isLPFarm}
/>
)}
</Box>
);
}
Example #4
| Source File: SyrupCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const currency = unwrappedToken(syrup.token);
const depositAmount = syrup.valueOfTotalStakedAmountInUSDC
? `$${syrup.valueOfTotalStakedAmountInUSDC.toLocaleString()}`
: `${formatTokenAmount(syrup.totalStakedAmount)} ${
syrup.stakingToken.symbol
}`;
return (
<Box className={classes.syrupCard}>
<Box
display='flex'
flexWrap='wrap'
alignItems='center'
width={1}
padding={2}
style={{ cursor: 'pointer' }}
onClick={() => setExpanded(!expanded)}
>
{isMobile ? (
<>
<Box
display='flex'
alignItems='center'
width={expanded ? 0.95 : 0.5}
>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Typography variant='body2'>{currency.symbol}</Typography>
</Box>
</Box>
{!expanded && (
<Box width={0.45}>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
)}
<Box
width={0.05}
display='flex'
justifyContent='flex-end'
color={palette.primary.main}
>
{expanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
</>
) : (
<>
<Box width={0.3} display='flex' alignItems='center'>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Typography variant='body2'>{currency.symbol}</Typography>
<Box display='flex' mt={0.25}>
<Typography variant='caption'>
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}
<span style={{ color: palette.text.secondary }}>
{' '}
/ day
</span>
</Typography>
</Box>
<Box display='flex' mt={0.25}>
<Typography variant='caption'>
$
{syrup.rewardTokenPriceinUSD
? (
syrup.rate * syrup.rewardTokenPriceinUSD
).toLocaleString()
: '-'}{' '}
<span style={{ color: palette.text.secondary }}>/ day</span>
</Typography>
</Box>
</Box>
</Box>
<Box width={0.3}>
<Typography variant='body2'>{depositAmount}</Typography>
</Box>
<Box width={0.2} textAlign='left'>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
<Box width={0.2} textAlign='right'>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
mb={0.25}
>
<CurrencyLogo currency={currency} size='16px' />
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(syrup.earnedAmount)}
</Typography>
</Box>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{getEarnedUSDSyrup(syrup)}
</Typography>
</Box>
</>
)}
</Box>
{expanded && syrup && (
<SyrupCardDetails syrup={syrup} dQUICKAPY={dQUICKAPY} />
)}
</Box>
);
}
Example #5
| Source File: LiquidityPools.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
LiquidityPools: React.FC<{
token1: Token;
token2: Token;
}> = ({ token1, token2 }) => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [liquidityPoolClosed, setLiquidityPoolClosed] = useState(false);
const [liquidityFilterIndex, setLiquidityFilterIndex] = useState(0);
const [tokenPairs, updateTokenPairs] = useState<any[] | null>(null);
const token1Address = token1.address.toLowerCase();
const token2Address = token2.address.toLowerCase();
const allTokenList = useAllTokens();
const liquidityPairs = useMemo(
() =>
tokenPairs
? tokenPairs
.filter((pair: any) => {
if (liquidityFilterIndex === 0) {
return true;
} else if (liquidityFilterIndex === 1) {
return (
pair.token0.id === token1Address ||
pair.token1.id === token1Address
);
} else {
return (
pair.token0.id === token2Address ||
pair.token1.id === token2Address
);
}
})
.slice(0, 5)
: [],
[tokenPairs, liquidityFilterIndex, token1Address, token2Address],
);
const whiteListAddressList = useMemo(
() => Object.keys(allTokenList).map((item) => item.toLowerCase()),
[allTokenList],
);
useEffect(() => {
async function fetchTokenPairs() {
const [newPrice] = await getEthPrice();
const tokenPairs = await getTokenPairs(token1Address, token2Address);
const formattedPairs = tokenPairs
? tokenPairs
.filter((pair: any) => {
return (
whiteListAddressList.includes(pair?.token0?.id) &&
whiteListAddressList.includes(pair?.token1?.id)
);
})
.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTokenPairs(pairData);
}
}
fetchTokenPairs();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token1Address, token2Address, whiteListAddressList]);
return (
<>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
marginBottom={liquidityPoolClosed ? 0 : '20px'}
>
<Box display='flex' alignItems='center'>
<Typography
variant='h6'
style={{ color: palette.text.primary, marginRight: 8 }}
>
Liquidity Pools{' '}
</Typography>
<Typography variant='body2' style={{ color: palette.text.secondary }}>
({token1.symbol?.toUpperCase()}, {token2.symbol?.toUpperCase()})
</Typography>
</Box>
<Box
display='flex'
style={{ cursor: 'pointer', color: palette.text.secondary }}
onClick={() => setLiquidityPoolClosed(!liquidityPoolClosed)}
>
{liquidityPoolClosed ? <KeyboardArrowDown /> : <KeyboardArrowUp />}
</Box>
</Box>
{!liquidityPoolClosed && (
<>
<Divider />
<Box width={1}>
<Box display='flex' padding={2} className={classes.liquidityMain}>
<Box
display='flex'
width={0.5}
className={classes.liquidityFilter}
>
<Typography
variant='body2'
className={liquidityFilterIndex === 0 ? 'active' : ''}
onClick={() => setLiquidityFilterIndex(0)}
>
All
</Typography>
<Typography
variant='body2'
className={liquidityFilterIndex === 1 ? 'active' : ''}
onClick={() => setLiquidityFilterIndex(1)}
>
{token1.symbol?.toUpperCase()}
</Typography>
<Typography
variant='body2'
className={liquidityFilterIndex === 2 ? 'active' : ''}
onClick={() => setLiquidityFilterIndex(2)}
>
{token2.symbol?.toUpperCase()}
</Typography>
</Box>
{!isMobile && (
<>
<Box width={0.2}>
<Typography variant='body2' align='left'>
TVL
</Typography>
</Box>
<Box width={0.15}>
<Typography variant='body2' align='left'>
24h Volume
</Typography>
</Box>
<Box width={0.15}>
<Typography variant='body2' align='right'>
APY
</Typography>
</Box>
</>
)}
</Box>
{liquidityPairs.map((pair: any, ind: any) => (
<LiquidityPoolRow pair={pair} key={ind} />
))}
</Box>
</>
)}
</>
);
}
