@material-ui/icons#KeyboardArrowDown TypeScript Examples
The following examples show how to use
@material-ui/icons#KeyboardArrowDown.
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: SettingsModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
const classes = useStyles();
const { palette } = useTheme();
const [
userSlippageTolerance,
setUserslippageTolerance,
] = useUserSlippageTolerance();
const [ttl, setTtl] = useUserTransactionTTL();
const { onChangeRecipient } = useSwapActionHandlers();
const [expertMode, toggleExpertMode] = useExpertModeManager();
const [slippageInput, setSlippageInput] = useState('');
const [deadlineInput, setDeadlineInput] = useState('');
const [expertConfirm, setExpertConfirm] = useState(false);
const [expertConfirmText, setExpertConfirmText] = useState('');
const slippageInputIsValid =
slippageInput === '' ||
(userSlippageTolerance / 100).toFixed(2) ===
Number.parseFloat(slippageInput).toFixed(2);
const deadlineInputIsValid =
deadlineInput === '' || (ttl / 60).toString() === deadlineInput;
const slippageError = useMemo(() => {
if (slippageInput !== '' && !slippageInputIsValid) {
return SlippageError.InvalidInput;
} else if (slippageInputIsValid && userSlippageTolerance < 50) {
return SlippageError.RiskyLow;
} else if (slippageInputIsValid && userSlippageTolerance > 500) {
return SlippageError.RiskyHigh;
} else {
return undefined;
}
}, [slippageInput, userSlippageTolerance, slippageInputIsValid]);
const slippageAlert =
!!slippageInput &&
(slippageError === SlippageError.RiskyLow ||
slippageError === SlippageError.RiskyHigh);
const deadlineError = useMemo(() => {
if (deadlineInput !== '' && !deadlineInputIsValid) {
return DeadlineError.InvalidInput;
} else {
return undefined;
}
}, [deadlineInput, deadlineInputIsValid]);
const parseCustomSlippage = (value: string) => {
setSlippageInput(value);
try {
const valueAsIntFromRoundedFloat = Number.parseInt(
(Number.parseFloat(value) * 100).toString(),
);
if (
!Number.isNaN(valueAsIntFromRoundedFloat) &&
valueAsIntFromRoundedFloat < 5000
) {
setUserslippageTolerance(valueAsIntFromRoundedFloat);
}
} catch {}
};
const parseCustomDeadline = (value: string) => {
setDeadlineInput(value);
try {
const valueAsInt: number = Number.parseInt(value) * 60;
if (!Number.isNaN(valueAsInt) && valueAsInt > 0) {
setTtl(valueAsInt);
}
} catch {}
};
return (
<CustomModal open={open} onClose={onClose}>
<CustomModal open={expertConfirm} onClose={() => setExpertConfirm(false)}>
<Box paddingX={3} paddingY={4}>
<Box
mb={3}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='h5'>Are you sure?</Typography>
<CloseIcon
style={{ cursor: 'pointer' }}
onClick={() => setExpertConfirm(false)}
/>
</Box>
<Divider />
<Box mt={2.5} mb={1.5}>
<Typography variant='body1'>
Expert mode turns off the confirm transaction prompt and allows
high slippage trades that often result in bad rates and lost
funds.
</Typography>
<Typography
variant='body1'
style={{ fontWeight: 'bold', marginTop: 24 }}
>
ONLY USE THIS MODE IF YOU KNOW WHAT YOU ARE DOING.
</Typography>
<Typography
variant='body1'
style={{ fontWeight: 'bold', marginTop: 24 }}
>
Please type the word "confirm" to enable expert mode.
</Typography>
</Box>
<Box
height={40}
borderRadius={10}
mb={2.5}
px={2}
display='flex'
alignItems='center'
bgcolor={palette.background.default}
border={`1px solid ${palette.secondary.light}`}
>
<input
style={{ textAlign: 'left' }}
className={classes.settingsInput}
value={expertConfirmText}
onChange={(e: any) => setExpertConfirmText(e.target.value)}
/>
</Box>
<Box
style={{
cursor: 'pointer',
opacity: expertConfirmText === 'confirm' ? 1 : 0.6,
}}
bgcolor='rgb(255, 104, 113)'
height={42}
borderRadius={10}
display='flex'
alignItems='center'
justifyContent='center'
onClick={() => {
if (expertConfirmText === 'confirm') {
toggleExpertMode();
setExpertConfirm(false);
}
}}
>
<Typography variant='h6'>Turn on Expert Mode</Typography>
</Box>
</Box>
</CustomModal>
<Box paddingX={3} paddingY={4}>
<Box
mb={3}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='h5'>Settings</Typography>
<CloseIcon onClick={onClose} />
</Box>
<Divider />
<Box my={2.5} display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
Slippage Tolerance
</Typography>
<QuestionHelper
size={20}
text='Your transaction will revert if the price changes unfavorably by more than this percentage.'
/>
</Box>
<Box mb={2.5}>
<Box display='flex' alignItems='center'>
<Box
className={cx(
classes.slippageButton,
userSlippageTolerance === 10 && classes.activeSlippageButton,
)}
onClick={() => {
setSlippageInput('');
setUserslippageTolerance(10);
}}
>
<Typography variant='body2'>0.1%</Typography>
</Box>
<Box
className={cx(
classes.slippageButton,
userSlippageTolerance === 50 && classes.activeSlippageButton,
)}
onClick={() => {
setSlippageInput('');
setUserslippageTolerance(50);
}}
>
<Typography variant='body2'>0.5%</Typography>
</Box>
<Box
className={cx(
classes.slippageButton,
userSlippageTolerance === 100 && classes.activeSlippageButton,
)}
onClick={() => {
setSlippageInput('');
setUserslippageTolerance(100);
}}
>
<Typography variant='body2'>1%</Typography>
</Box>
<Box
flex={1}
height={40}
borderRadius={10}
px={2}
display='flex'
alignItems='center'
bgcolor={palette.background.default}
border={`1px solid
${
slippageAlert ? palette.primary.main : palette.secondary.light
}
`}
>
{slippageAlert && <AlertTriangle color='#ffa000' size={16} />}
<NumericalInput
placeholder={(userSlippageTolerance / 100).toFixed(2)}
value={slippageInput}
fontSize={14}
fontWeight={500}
align='right'
color='rgba(212, 229, 255, 0.8)'
onBlur={() => {
parseCustomSlippage((userSlippageTolerance / 100).toFixed(2));
}}
onUserInput={(value) => parseCustomSlippage(value)}
/>
<Typography variant='body2'>%</Typography>
</Box>
</Box>
{slippageError && (
<Typography
variant='body2'
style={{ color: '#ffa000', marginTop: 12 }}
>
{slippageError === SlippageError.InvalidInput
? 'Enter a valid slippage percentage'
: slippageError === SlippageError.RiskyLow
? 'Your transaction may fail'
: 'Your transaction may be frontrun'}
</Typography>
)}
</Box>
<Divider />
<Box my={2.5} display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
Transaction Deadline
</Typography>
<QuestionHelper
size={20}
text='Your transaction will revert if it is pending for more than this long.'
/>
</Box>
<Box mb={2.5} display='flex' alignItems='center'>
<Box
height={40}
borderRadius={10}
px={2}
display='flex'
alignItems='center'
bgcolor={palette.background.default}
border={`1px solid ${palette.secondary.light}`}
maxWidth={168}
>
<NumericalInput
placeholder={(ttl / 60).toString()}
value={deadlineInput}
fontSize={14}
fontWeight={500}
color='rgba(212, 229, 255, 0.8)'
onBlur={() => {
parseCustomDeadline((ttl / 60).toString());
}}
onUserInput={(value) => parseCustomDeadline(value)}
/>
</Box>
<Typography variant='body2' style={{ marginLeft: 8 }}>
minutes
</Typography>
</Box>
{deadlineError && (
<Typography
variant='body2'
style={{ color: '#ffa000', marginTop: 12 }}
>
Enter a valid deadline
</Typography>
)}
<Divider />
<Box
my={2.5}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Box display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
Expert Mode
</Typography>
<QuestionHelper
size={20}
text='Bypasses confirmation modals and allows high slippage trades. Use at your own risk.'
/>
</Box>
<ToggleSwitch
toggled={expertMode}
onToggle={() => {
if (expertMode) {
toggleExpertMode();
onChangeRecipient(null);
} else {
setExpertConfirm(true);
}
}}
/>
</Box>
<Divider />
<Box
mt={2.5}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='body1'>Language</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body1'>English (default)</Typography>
<KeyboardArrowDown />
</Box>
</Box>
</Box>
</CustomModal>
);
}
Example #5
| 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 #6
| 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>
</>
)}
</>
);
}
