@chakra-ui/icons#QuestionOutlineIcon TypeScript Examples
The following examples show how to use
@chakra-ui/icons#QuestionOutlineIcon.
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: StatsPage.tsx From rari-dApp with GNU Affero General Public License v3.0 | 4 votes |
|
StatsPage = () => {
const { isAuthed } = useRari();
const { t } = useTranslation();
const isMobile = useIsSmallScreen();
const [subNav, setSubNav] = useState(StatsSubNav.TOTAL);
const [netDeposits, setNetDeposits] = useState(0);
const [netDebt, setNetDebt] = useState(0);
const netBalance = useMemo(() => {
return netDeposits - netDebt;
}, [netDeposits, netDebt]);
return (
<SaffronProvider>
<Column
mainAxisAlignment="flex-start"
crossAxisAlignment="center"
color="#FFFFFF"
mx="auto"
width={isMobile ? "100%" : "1000px"}
height="100%"
px={isMobile ? 4 : 0}
>
<Header isAuthed={isAuthed} />
<Column
width="100%"
mainAxisAlignment="center"
crossAxisAlignment="flex-start"
mt="3rem"
p={15}
>
<Row
mb={2}
pr={2}
py={1}
mainAxisAlignment="flex-start"
crossAxisAlignment="center"
>
<Heading size="lg">{t("Net Balance")}:</Heading>
<motion.div
initial={{ opacity: 0, y: -40 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 40 }}
>
<Heading ml={2} size="lg">
{smallUsdFormatter(netBalance) ?? smallUsdFormatter(0)}
</Heading>
</motion.div>
<SimpleTooltip
label={`${smallUsdFormatter(netDeposits)} ${t(
"Deposits"
)} - ${smallUsdFormatter(netDebt)} ${t("Debt")}`}
placement="right"
>
<Box
mainAxisAlignment="center"
crossAxisAlignment="center"
ml={4}
my="auto"
_hover={{ color: "gray", cursor: "auto" }}
display="flex"
justifyContent="center"
alignItems="center"
>
<QuestionOutlineIcon color="currentColor" />
</Box>
</SimpleTooltip>
</Row>
<SubNav isMobile={isMobile} subNav={subNav} setSubNav={setSubNav} />
<Box width="100%">
{subNav === StatsSubNav.TOTAL && (
<StatsTotalSection
setNetDebt={setNetDebt}
setNetDeposits={setNetDeposits}
/>
)}
{subNav === StatsSubNav.FUSE && <StatsFuseSection />}
{subNav === StatsSubNav.POOL2 && <StatsPool2Section />}
{subNav === StatsSubNav.EARN && <StatsEarnSection />}
{subNav === StatsSubNav.TRANCHES && <StatsTranchesSection />}
</Box>
</Column>
<Footer />
</Column>
</SaffronProvider>
);
}
Example #2
| Source File: StatsPool2Section.tsx From rari-dApp with GNU Affero General Public License v3.0 | 4 votes |
|
Earn = () => {
const { t } = useTranslation();
const apr = usePool2APR();
const earned = usePool2UnclaimedRGT();
const balance = usePool2Balance();
const balanceSLP = balance?.hasDeposited ? balance.SLP!.toFixed(4) : "0.0000";
const balanceETH = balance?.hasDeposited ? balance.eth!.toFixed(2) : "0.0000";
const balanceRGT = balance?.hasDeposited ? balance.rgt!.toFixed(2) : "0.0000";
const balanceUSD = balance?.hasDeposited
? smallUsdFormatter(balance.balanceUSD)
: "$0";
const hasDeposits = useMemo(() => earned! > 0, [earned]);
return (
<motion.div
key="pool2"
style={{ width: "100%" }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<Table variant="simple">
<Thead color="white">
<Tr>
<Th color="white">{t("Pool")}</Th>
<Th color="white" textAlign="right">
{t("APY")}
</Th>
<Th color="white" textAlign="right">
{t("Deposits")}
</Th>
<Th color="white" textAlign="right">
{t("RGT Earned")}
</Th>
<Th color="white" textAlign="right">
{t("Growth")}
</Th>
</Tr>
</Thead>
<Tbody>
<>
{hasDeposits && (
<Tr>
<Td>
<Row
mainAxisAlignment="flex-start"
crossAxisAlignment="center"
>
<Box>
<Avatar
bg="#FFF"
boxSize="30px"
name={"RGT"}
src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xD291E7a03283640FDc51b121aC401383A46cC623/logo.png"
/>
<Avatar
bg="#FFF"
boxSize="30px"
name={"ETH"}
src="https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/64/Ethereum-ETH-icon.png"
/>
</Box>
<Box ml={3}>RGT-ETH</Box>
</Row>
</Td>
<Td textAlign="right">{apr}%</Td>
<Td textAlign="right">
<Row
mainAxisAlignment="flex-start"
crossAxisAlignment="center"
>
<Box>{balanceSLP} RGT-ETH</Box>
<SimpleTooltip
label={`${balanceRGT} RGT - ${balanceETH} ETH `}
placement="top-start"
>
<Box
ml={4}
my="auto"
_hover={{ color: "gray", cursor: "auto" }}
>
<QuestionOutlineIcon color="currentColor" />
</Box>
</SimpleTooltip>
</Row>
</Td>
<Td textAlign="right">{earned?.toFixed(2)} RGT</Td>
<Td textAlign="right">0%</Td>
</Tr>
)}
{/* Todo (sharad) - implement totals for apy and growth */}
<Tr>
<Td>
<Text fontWeight={hasDeposits ? "bold" : "normal"}>Total</Text>
</Td>
<Td textAlign="right">
<Text fontWeight={hasDeposits ? "bold" : "normal"}>
{parseFloat(balanceSLP) > 0 ? `${apr}%` : null}
</Text>
</Td>
<Td textAlign="right">
<Text fontWeight={hasDeposits ? "bold" : "normal"}>
{balanceUSD}
</Text>
</Td>
<Td textAlign="right">
<Text fontWeight={hasDeposits ? "bold" : "normal"}>
{earned?.toFixed(2)} RGT
</Text>
</Td>
<Td textAlign="right"> </Td>
</Tr>
</>
</Tbody>
</Table>
</motion.div>
);
}
Example #3
| Source File: PaymentMethodsInput.tsx From coindrop with GNU General Public License v3.0 | 4 votes |
|
PaymentMethodsInput: FC<Props> = ({ fieldArrayName, fields, control, register, remove, append }) => {
const { colors } = useTheme();
const paymentMethodsDataWatch: PaymentMethod[] = useWatch({
control,
name: fieldArrayName,
});
const [openAccordionItemIndex, setOpenAccordionItemIndex] = useState(-1);
useEffect(() => {
if (
paymentMethodsDataWatch[paymentMethodsDataWatch.length - 1]?.paymentMethodId === "default-blank"
|| paymentMethodsDataWatch[paymentMethodsDataWatch.length - 1]?.address === ""
) {
setOpenAccordionItemIndex(paymentMethodsDataWatch.length - 1);
}
}, [paymentMethodsDataWatch]);
const containsInvalidAddress = paymentMethodsDataWatch.some(paymentMethod => !paymentMethod.address);
const { isAddressTouched, setIsAddressTouched } = useContext(AdditionalValidation);
// optgroup not compatible with Chakra dark mode: https://github.com/chakra-ui/chakra-ui/issues/2853
// const optionsGroup = (category: Category) => {
// const optgroupLabels: Record<Category, string> = {
// "digital-wallet": 'Digital Wallets',
// "digital-asset": "Digital Assets",
// "subscription-platform": "Subscription Platforms",
// };
// return (
// <optgroup label={optgroupLabels[category]}>
// {paymentMethods
// .filter(paymentMethod => paymentMethod.category === category)
// .sort((a, b) => (a.id < b.id ? -1 : 1))
// .map(({ id, displayName }) => (
// <option
// key={id}
// value={id}
// style={{display: paymentMethodsDataWatch.map(paymentMethodDataWatch => paymentMethodDataWatch.paymentMethodId).includes(id) ? "none" : undefined }}
// >
// {displayName}
// </option>
// ))}
// </optgroup>
// );
// };
return (
<>
{fields.length < 1
? 'No payment methods defined yet.'
: (
<Accordion
allowToggle
defaultIndex={-1}
index={openAccordionItemIndex}
>
{
fields
.map((item, index) => {
const watchedData = paymentMethodsDataWatch.find(watchedPaymentMethod => watchedPaymentMethod.id === item.id);
const PaymentMethodIcon = paymentMethodIcons[watchedData?.paymentMethodId];
return (
<AccordionItem
key={item.id}
>
<AccordionButton
onClick={() => {
setIsAddressTouched(true);
if (openAccordionItemIndex !== index && !paymentMethodsDataWatch.find(paymentMethod => paymentMethod.address === "")) {
setOpenAccordionItemIndex(index);
} else {
setOpenAccordionItemIndex(undefined);
}
}}
>
<Flex flex="1" textAlign="left" align="center">
<Flex mr={1} align="center">
{PaymentMethodIcon ? <PaymentMethodIcon mr={2} /> : <QuestionOutlineIcon mr={2} />}
{paymentMethodNames[watchedData?.paymentMethodId] ?? 'Add payment method'}
</Flex>
{watchedData?.isPreferred && (
<Flex>
<StarIcon
ml={2}
size="16px"
color={colors.yellow['400']}
/>
<Text
as="span"
fontSize="xs"
ml={1}
>
<i>Preferred</i>
</Text>
</Flex>
)}
</Flex>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} id={`accordion-panel-${watchedData.paymentMethodId}`}>
<input
ref={register()}
name={`${fieldArrayName}[${index}].id`}
defaultValue={item.id}
style={{display: 'none'}}
/>
<Box
display={paymentMethodNames[watchedData?.paymentMethodId] ? "none" : "block"}
data-cy={`select-payment-method-container-${watchedData.paymentMethodId}`}
>
<Select
name={`${fieldArrayName}[${index}].paymentMethodId`}
ref={register()}
defaultValue={paymentMethodNames[item.paymentMethodId] ? item.paymentMethodId : 'default-blank'}
isInvalid={containsInvalidAddress && isAddressTouched}
onChange={() => setIsAddressTouched(false)}
>
<option hidden disabled value="default-blank">Select...</option>
{/* optgroup not compatible with Chakra dark mode: https://github.com/chakra-ui/chakra-ui/issues/2853 */}
{Object.entries(paymentMethodNames)
.sort((a, b) => {
const [aId] = a;
const [bId] = b;
return aId < bId ? -1 : 1;
})
.map(([paymentMethodId, paymentMethodDisplayName]) => (
<option
key={paymentMethodId}
value={paymentMethodId}
style={{display: paymentMethodsDataWatch.map(paymentMethod => paymentMethod.paymentMethodId).includes(paymentMethodId) ? "none" : undefined }}
>
{paymentMethodDisplayName}
</option>
))}
</Select>
</Box>
<Box
mx={3}
display={paymentMethodNames[watchedData?.paymentMethodId] ? "block" : "none"}
>
<FormControl isRequired>
<FormLabel htmlFor={`${fieldArrayName}[${index}].address`}>Address</FormLabel>
<Input
id={`address-input-${watchedData.paymentMethodId}`}
name={`${fieldArrayName}[${index}].address`}
ref={register()}
defaultValue={item.address}
isInvalid={containsInvalidAddress && isAddressTouched}
/>
<Box>
<Checkbox
name={`${fieldArrayName}[${index}].isPreferred`}
ref={register()}
defaultValue={item?.isPreferred ? 1 : 0}
defaultIsChecked={item?.isPreferred}
mt={1}
colorScheme="yellow"
>
Preferred
</Checkbox>
</Box>
</FormControl>
</Box>
<Flex
justify={watchedData?.paymentMethodId === 'default-blank' ? 'space-between' : 'flex-end'}
mt={3}
wrap="wrap"
align="center"
>
{watchedData?.paymentMethodId === 'default-blank' && (
<Text fontSize="xs" ml={1}>
<Link href="/blog/payment-method-request" isExternal>
Payment method not listed?
</Link>
</Text>
)}
<Button
onClick={() => {
remove(index);
setIsAddressTouched(false);
}}
leftIcon={<MinusIcon />}
size="sm"
>
{'Remove '}
{/* {paymentMethodNames[watchedData?.paymentMethodId]} */}
</Button>
</Flex>
</AccordionPanel>
</AccordionItem>
);
})
}
</Accordion>
)}
<Flex
justify="center"
mt={2}
>
<Button
id="add-payment-method-button"
onClick={() => {
append({});
setIsAddressTouched(false);
}}
leftIcon={<AddIcon />}
variant="ghost"
size="sm"
isDisabled={
(
fields.length > 0
&& !paymentMethodNames[paymentMethodsDataWatch[paymentMethodsDataWatch.length - 1]?.paymentMethodId]
)
|| containsInvalidAddress
}
>
Add payment method
</Button>
</Flex>
</>
);
}
