@chakra-ui/react#Badge JavaScript Examples
The following examples show how to use
@chakra-ui/react#Badge.
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: components.js From idena-web with MIT License | 6 votes |
export function ContactCardBadge(props) {
return (
<Badge
borderRadius="lg"
fontWeight={500}
px={2}
py={1}
alignSelf="start"
textTransform="initial"
{...props}
/>
)
}
Example #2
Source File: components.js From idena-web with MIT License | 6 votes |
export function VotingBadge(props) {
return (
<Badge
display="inline-flex"
alignItems="center"
borderRadius="xl"
fontSize="sm"
fontWeight={500}
textTransform="capitalize"
h={6}
px={3}
{...props}
/>
)
}
Example #3
Source File: components.js From idena-web with MIT License | 6 votes |
export function TodoVotingCountBadge(props) {
return (
<Flex
as={Badge}
align="center"
justify="center"
bg="blue.500"
color="white"
fontSize={8}
fontWeight={700}
rounded={4}
px={1}
h={4}
minW={4}
{...props}
/>
)
}
Example #4
Source File: BuilderListView.jsx From scaffold-directory with MIT License | 6 votes |
BuilderSocialLinksCell = ({ builder, isAdmin }) => {
const socials = Object.entries(builder.socialLinks ?? {}).sort(bySocialWeight);
if (!socials.length) return "-";
return (
<Flex direction="column">
<Flex justifyContent="space-evenly" alignItems="center">
{socials.map(([socialId, socialValue]) => (
<SocialLink id={socialId} value={socialValue} />
))}
</Flex>
{isAdmin && builder.reachedOut && (
<Badge variant="outline" colorScheme="green" alignSelf="center" mt={2}>
Reached Out
</Badge>
)}
</Flex>
);
}
Example #5
Source File: ChallengeStatusTag.jsx From scaffold-directory with MIT License | 5 votes |
ChallengeStatusTag = ({ status, comment, autograding }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
let colorScheme;
let label;
switch (status) {
case CHALLENGE_SUBMISSION_STATUS.ACCEPTED: {
colorScheme = "green";
label = "Accepted";
break;
}
case CHALLENGE_SUBMISSION_STATUS.REJECTED: {
colorScheme = "red";
label = "Rejected";
break;
}
case CHALLENGE_SUBMISSION_STATUS.SUBMITTED: {
label = "Submitted";
break;
}
default:
// do nothing
}
return (
<>
<Flex align="center">
<Box>
<Badge borderRadius="xl" colorScheme={colorScheme} textTransform="none" py={0.5} px={2.5}>
{label}
</Badge>
</Box>
<Spacer />
{status !== CHALLENGE_SUBMISSION_STATUS.SUBMITTED && comment && (
<Tooltip label="See comment">
<Button variant="ghost" onClick={onOpen} p={0} ml={1}>
<QuestionOutlineIcon ml="2px" />
</Button>
</Tooltip>
)}
</Flex>
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay />
<ModalContent maxW="56rem">
<ModalHeader>Review feedback</ModalHeader>
<ModalCloseButton />
<ModalBody p={6} overflowX="auto">
{autograding ? (
<Box className="autograding-feedback">
<style>
{`
.autograding-feedback a { text-decoration: underline; color: var(--chakra-colors-teal-500) }
`}
</style>
<chakra.pre fontSize={14} whiteSpace="pre-wrap" dangerouslySetInnerHTML={{ __html: comment }} />
</Box>
) : (
<ReactMarkdown components={ChakraUIRenderer(chakraMarkdownComponents)} remarkPlugins={[remarkBreaks]}>
{comment}
</ReactMarkdown>
)}
</ModalBody>
</ModalContent>
</Modal>
</>
);
}
Example #6
Source File: Chat.jsx From realtime-chat-supabase-react with Apache License 2.0 | 5 votes |
export default function Chat() {
const [height, setHeight] = useState(window.innerHeight - 205);
const {
scrollRef,
onScroll,
scrollToBottom,
isOnBottom,
unviewedMessageCount,
} = useAppContext();
useEffect(() => {
window.addEventListener("resize", () => {
setHeight(window.innerHeight - 205);
});
}, []);
return (
<Container maxW="600px" pb="20px">
<Box
bg="white"
p="5"
overflow="auto"
borderRadius="10px"
height={height}
onScroll={onScroll}
ref={scrollRef}
>
<Messages />
{!isOnBottom && (
<div
style={{
position: "sticky",
bottom: 8,
// right: 0,
float: "right",
cursor: "pointer",
}}
onClick={scrollToBottom}
>
{unviewedMessageCount > 0 ? (
<Badge
ml="1"
fontSize="0.8em"
colorScheme="green"
display="flex"
borderRadius="7px"
padding="3px 5px"
alignItems="center"
>
{unviewedMessageCount}
<BsChevronDoubleDown style={{ marginLeft: "3px" }} />
</Badge>
) : (
<BsChevronDoubleDown style={{ marginLeft: "3px" }} />
)}
</div>
)}
</Box>
</Container>
);
}
Example #7
Source File: ConferenceCard.js From codeursenseine.com with MIT License | 4 votes |
ConferenceCard = ({ conference, speakers }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const capitalizeFirstLetter = (string) =>
string.charAt(0).toUpperCase() + string.slice(1);
if (conference?.childMdx?.frontmatter?.type === "break") {
return (
<Card variant="primary" mt={2}>
<Stack align="center">
<Text>{conference?.childMdx?.frontmatter?.title}</Text>
</Stack>
</Card>
);
}
return (
<Stack>
<Grid
templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr) repeat(1, 4fr)"]}
mt={3}
>
<Stack mr={3}>
<Flex
display={["none", "flex"]}
flexDirection="column"
justifyContent="space-between"
h="100%"
borderColor="blue.50"
borderStyle="solid"
borderTopWidth={1}
borderBottomWidth={1}
>
<Text color="blue.600">
{conference.childMdx.frontmatter.startHour}
</Text>
<Text color="blue.600">
{conference.childMdx.frontmatter.endHour}
</Text>
</Flex>
<Stack display={["block", "none"]} mb={2}>
<Text color="blue.600">
{`${conference.childMdx.frontmatter.startHour} - ${conference.childMdx.frontmatter.endHour}`}
</Text>
</Stack>
{conference.childMdx.frontmatter.isKeynote && (
<Badge colorScheme="brand" width="fit-content">
Keynote
</Badge>
)}
</Stack>
<Card
borderLeftWidth={2}
borderLeftColor="brand.600"
onClick={onOpen}
w="full"
isLink
>
<Heading fontSize="md">
{conference.childMdx.frontmatter.title}
</Heading>
{speakers?.map((speaker) => (
<SpeakerPreview
key={speaker.childMdx.frontmatter.slug}
speaker={speaker}
/>
))}
<Center>
<Button
colorScheme="brand"
variant="link"
width="fit-content"
mt={2}
>
Voir les détails et s'inscrire
</Button>
</Center>
</Card>
</Grid>
<Drawer size="md" isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>
<Stack alignItems="center" display="flex" flexDirection="row">
<Text fontSize="sm" mt={2}>
{capitalizeFirstLetter(
dayjs(conference.childMdx.frontmatter.eventDate).format(
"dddd D MMM"
)
)}{" "}
{`${conference.childMdx.frontmatter.startHour} - ${conference.childMdx.frontmatter.endHour}`}
</Text>
{conference.childMdx.frontmatter.isKeynote && (
<Badge
ml={3}
h="fit-content"
colorScheme="brand"
width="fit-content"
>
Keynote
</Badge>
)}
</Stack>
<Text>{conference.childMdx.frontmatter.title}</Text>
<Stack mt={3}>
{speakers?.map((speaker) => (
<SpeakerPreview
key={speaker.childMdx.frontmatter.slug}
speaker={speaker}
/>
))}
</Stack>
</DrawerHeader>
<DrawerBody overflow="auto">
<MDXRenderer>{conference.childMdx.body}</MDXRenderer>
</DrawerBody>
{conference.childMdx.frontmatter.meetupLink && (
<DrawerFooter display="flex" flexDirection="column">
<Button isFullWidth variant="outline" mb={3} onClick={onClose}>
Fermer
</Button>
<Button
colorScheme="brand"
as={Link}
target="_blank"
to={conference.childMdx.frontmatter.meetupLink}
isFullWidth
>
S'inscrire
</Button>
</DrawerFooter>
)}
</DrawerContent>
</DrawerOverlay>
</Drawer>
</Stack>
);
}
Example #8
Source File: Account.jsx From scaffold-directory with MIT License | 4 votes |
/*
~ What it does? ~
Displays an Address, Balance, and Wallet as one Account component,
also allows users to log in to existing accounts and log out
~ How can I use? ~
<Account
address={address}
localProvider={localProvider}
userProvider={userProvider}
mainnetProvider={mainnetProvider}
price={price}
web3Modal={web3Modal}
loadWeb3Modal={loadWeb3Modal}
logoutOfWeb3Modal={logoutOfWeb3Modal}
blockExplorer={blockExplorer}
/>
~ Features ~
- Provide address={address} and get balance corresponding to the given address
- Provide localProvider={localProvider} to access balance on local network
- Provide userProvider={userProvider} to display a wallet
- Provide mainnetProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth")
- Provide price={price} of ether and get your balance converted to dollars
- Provide web3Modal={web3Modal}, loadWeb3Modal={loadWeb3Modal}, logoutOfWeb3Modal={logoutOfWeb3Modal}
to be able to log in/log out to/from existing accounts
- Provide blockExplorer={blockExplorer}, click on address and get the link
(ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")
*/
export default function Account({
address,
connectText,
ensProvider,
isWalletConnected,
loadWeb3Modal,
logoutOfWeb3Modal,
setUserRole,
userProvider,
userRole,
}) {
const ens = useDisplayAddress(ensProvider, address);
const shortAddress = ellipsizedAddress(address);
const toast = useToast({ position: "top", isClosable: true });
const [isPopoverOpen, setIsPopoverOpen] = useState(true);
const registerButtonRef = useRef();
const openPopover = () => setIsPopoverOpen(true);
const closePopover = () => setIsPopoverOpen(false);
const { primaryFontColor, secondaryFontColor, dividerColor } = useCustomColorModes();
if (!userRole && isWalletConnected) {
return <Spinner />;
}
const hasEns = ens !== shortAddress;
const isAdmin = userRole === USER_ROLES.admin;
const isBuilder = userRole === USER_ROLES.builder;
const isAnonymous = userRole === USER_ROLES.anonymous;
const connectWallet = (
<Button colorScheme="blue" key="loginbutton" onClick={loadWeb3Modal}>
{connectText || "connect"}
</Button>
);
const UserDisplayName = ({ mb, textAlign }) =>
hasEns ? (
<>
<Text fontSize="md" fontWeight="bold" textAlign={textAlign} color={primaryFontColor}>
{ens}
</Text>
<Text color={secondaryFontColor} fontSize="sm" fontWeight="normal" textAlign={textAlign} mb={mb}>
{shortAddress}
</Text>
</>
) : (
<Text fontSize="md" fontWeight="semibold" textAlign={textAlign} color={primaryFontColor} mb={mb}>
{shortAddress}
</Text>
);
const accountMenu = address && (
<LinkBox>
<Flex align="center">
<LinkOverlay as={NavLink} to="/portfolio">
<QRPunkBlockie withQr={false} address={address.toLowerCase()} w={9} borderRadius={6} />
</LinkOverlay>
<Box ml={4}>
{/* ToDo. Move to Utils */}
<UserDisplayName textAlign="left" />
</Box>
<Tooltip label="Disconnect wallet">
<Button ml={4} onClick={logoutOfWeb3Modal} variant="outline" size="sm">
X
</Button>
</Tooltip>
</Flex>
</LinkBox>
);
const handleSignUpSuccess = () => {
closePopover();
toast({
title: "You are now registered!",
description: (
<>
Visit{" "}
<Link href="/portfolio" textDecoration="underline">
your portfolio
</Link>{" "}
to start building
</>
),
status: "success",
});
};
const anonymousMenu = address && (
<Popover placement="bottom-end" initialFocusRef={registerButtonRef} isOpen={isPopoverOpen} onClose={closePopover}>
<PopoverTrigger>
<Button variant="ghost" _hover={{ backgroundColor: "gray.50" }} w={9} p={0} onClick={openPopover}>
<Box>
<Icon as={HeroIconUser} w={6} h={6} color={secondaryFontColor} />
<AvatarBadge boxSize={2} bg="red.500" borderRadius="full" top="4px" right="4px" />
</Box>
</Button>
</PopoverTrigger>
<Tooltip label="Disconnect wallet">
<Button ml={4} onClick={logoutOfWeb3Modal} variant="outline" size="sm">
X
</Button>
</Tooltip>
<PopoverContent w={72}>
<PopoverBody
as={Flex}
direction="column"
px={9}
py={10}
_focus={{ background: "none" }}
_active={{ background: "none" }}
>
<Text color={primaryFontColor} fontWeight="bold" textAlign="center" mb={1}>
Register as a builder
</Text>
<Text color={secondaryFontColor} fontSize="sm" fontWeight="normal" textAlign="center" mb={6}>
Sign a message with your wallet to create a builder profile.
</Text>
<Box m="auto" p="px" borderWidth="1px" borderColor={dividerColor} borderRadius={8}>
<QRPunkBlockie address={address} w={19} borderRadius={6} />
</Box>
<UserDisplayName textAlign="center" mb={6} />
<SignatureSignUp
ref={registerButtonRef}
userProvider={userProvider}
address={address}
onSuccess={handleSignUpSuccess}
setUserRole={setUserRole}
/>
</PopoverBody>
</PopoverContent>
</Popover>
);
const userMenu = isAnonymous ? anonymousMenu : accountMenu;
return (
<Flex align="center">
{isAdmin && (
<Badge colorScheme="red" mr={4}>
admin
</Badge>
)}
{isBuilder && (
<Badge colorScheme="green" mr={4}>
builder
</Badge>
)}
{isWalletConnected ? userMenu : connectWallet}
</Flex>
);
}
Example #9
Source File: BuilderProfileCard.jsx From scaffold-directory with MIT License | 4 votes |
BuilderProfileCard = ({ builder, mainnetProvider, isMyProfile, userProvider, fetchBuilder, userRole }) => {
const address = useUserAddress(userProvider);
const ens = useDisplayAddress(mainnetProvider, builder?.id);
const [updatedSocials, setUpdatedSocials] = useState({});
const [isUpdatingReachedOutFlag, setIsUpdatingReachedOutFlag] = useState(false);
const [isUpdatingSocials, setIsUpdatingSocials] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure();
const { hasCopied, onCopy } = useClipboard(builder?.id);
const { borderColor, secondaryFontColor } = useCustomColorModes();
const shortAddress = ellipsizedAddress(builder?.id);
const hasEns = ens !== shortAddress;
const toast = useToast({ position: "top", isClosable: true });
const toastVariant = useColorModeValue("subtle", "solid");
const joinedDate = new Date(builder?.creationTimestamp);
const joinedDateDisplay = joinedDate.toLocaleString("default", { month: "long" }) + " " + joinedDate.getFullYear();
// INFO: conditional chaining and coalescing didn't work when also checking the length
const hasProfileLinks = builder?.socialLinks ? Object.keys(builder.socialLinks).length !== 0 : false;
const isAdmin = userRole === USER_ROLES.admin;
useEffect(() => {
if (builder) {
setUpdatedSocials(builder.socialLinks ?? {});
}
}, [builder]);
const handleUpdateSocials = async () => {
setIsUpdatingSocials(true);
// Avoid sending socials with empty strings.
const socialLinkCleaned = Object.fromEntries(Object.entries(updatedSocials).filter(([_, value]) => !!value));
const invalidSocials = validateSocials(socialLinkCleaned);
if (invalidSocials.length !== 0) {
toast({
description: `The usernames for the following socials are not correct: ${invalidSocials
.map(([social]) => social)
.join(", ")}`,
status: "error",
variant: toastVariant,
});
setIsUpdatingSocials(false);
return;
}
let signMessage;
try {
signMessage = await getUpdateSocialsSignMessage(address);
} catch (error) {
toast({
description: " Sorry, the server is overloaded. ???",
status: "error",
variant: toastVariant,
});
setIsUpdatingSocials(false);
return;
}
let signature;
try {
signature = await userProvider.send("personal_sign", [signMessage, address]);
} catch (error) {
toast({
description: "Couldn't get a signature from the Wallet",
status: "error",
variant: toastVariant,
});
setIsUpdatingSocials(false);
return;
}
try {
await postUpdateSocials(address, signature, socialLinkCleaned);
} catch (error) {
if (error.status === 401) {
toast({
status: "error",
description: "Access error",
variant: toastVariant,
});
setIsUpdatingSocials(false);
return;
}
toast({
status: "error",
description: "Can't update your socials. Please try again.",
variant: toastVariant,
});
setIsUpdatingSocials(false);
return;
}
toast({
description: "Your social links have been updated",
status: "success",
variant: toastVariant,
});
fetchBuilder();
setIsUpdatingSocials(false);
onClose();
};
const handleUpdateReachedOutFlag = async reachedOut => {
setIsUpdatingReachedOutFlag(true);
let signMessage;
try {
signMessage = await getUpdateReachedOutFlagSignMessage(builder.id, reachedOut);
} catch (error) {
toast({
description: " Sorry, the server is overloaded. ???",
status: "error",
variant: toastVariant,
});
setIsUpdatingReachedOutFlag(false);
return;
}
let signature;
try {
signature = await userProvider.send("personal_sign", [signMessage, address]);
} catch (error) {
toast({
description: "Couldn't get a signature from the Wallet",
status: "error",
variant: toastVariant,
});
setIsUpdatingReachedOutFlag(false);
return;
}
try {
await postUpdateReachedOutFlag(address, builder.id, reachedOut, signature);
} catch (error) {
if (error.status === 401) {
toast({
status: "error",
description: "Access error",
variant: toastVariant,
});
setIsUpdatingReachedOutFlag(false);
return;
}
toast({
status: "error",
description: "Can't update the reached out flag. Please try again.",
variant: toastVariant,
});
setIsUpdatingReachedOutFlag(false);
return;
}
toast({
description: 'Updated "reached out" flag successfully',
status: "success",
variant: toastVariant,
});
fetchBuilder();
setIsUpdatingReachedOutFlag(false);
};
return (
<>
<BuilderProfileCardSkeleton isLoaded={!!builder}>
{() => (
/* delay execution */
<Flex
borderRadius="lg"
borderColor={borderColor}
borderWidth={1}
justify={{ base: "space-around", xl: "center" }}
direction={{ base: "row", xl: "column" }}
p={4}
pb={6}
maxW={{ base: "full", lg: "50%", xl: 60 }}
margin="auto"
>
<Link as={RouteLink} to={`/builders/${builder.id}`}>
<QRPunkBlockie
withQr={false}
address={builder.id?.toLowerCase()}
w={52}
borderRadius="lg"
margin="auto"
/>
</Link>
<Flex alignContent="center" direction="column" mt={4}>
{hasEns ? (
<>
<Text fontSize="2xl" fontWeight="bold" textAlign="center">
{ens}
</Text>
<Text textAlign="center" mb={4} color={secondaryFontColor}>
{shortAddress}{" "}
<Tooltip label={hasCopied ? "Copied!" : "Copy"} closeOnClick={false}>
<CopyIcon cursor="pointer" onClick={onCopy} />
</Tooltip>
</Text>
</>
) : (
<Text fontSize="2xl" fontWeight="bold" textAlign="center" mb={8}>
{shortAddress}{" "}
<Tooltip label={hasCopied ? "Copied!" : "Copy"} closeOnClick={false}>
<CopyIcon cursor="pointer" onClick={onCopy} />
</Tooltip>
</Text>
)}
{isAdmin && (
<Center mb={4}>
{builder.reachedOut ? (
<Badge variant="outline" colorScheme="green" alignSelf="center">
Reached Out
</Badge>
) : (
<Button
colorScheme="green"
size="xs"
onClick={() => handleUpdateReachedOutFlag(true)}
isLoading={isUpdatingReachedOutFlag}
alignSelf="center"
>
Mark as reached out
</Button>
)}
</Center>
)}
<Divider mb={6} />
{hasProfileLinks ? (
<Flex mb={4} justifyContent="space-evenly" alignItems="center">
{Object.entries(builder.socialLinks)
.sort(bySocialWeight)
.map(([socialId, socialValue]) => (
<SocialLink id={socialId} value={socialValue} />
))}
</Flex>
) : (
isMyProfile && (
<Alert mb={3} status="warning">
<Text style={{ fontSize: 11 }}>
You haven't set your socials{" "}
<Tooltip label="It's our way of reaching out to you. We could sponsor you an ENS, offer to be part of a build or set up an ETH stream for you.">
<QuestionOutlineIcon />
</Tooltip>
</Text>
</Alert>
)
)}
{isMyProfile && (
<Button mb={3} size="xs" variant="outline" onClick={onOpen}>
Update socials
</Button>
)}
<Text textAlign="center" color={secondaryFontColor}>
Joined {joinedDateDisplay}
</Text>
</Flex>
</Flex>
)}
</BuilderProfileCardSkeleton>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Update your socials</ModalHeader>
<ModalCloseButton />
<ModalBody p={6}>
{Object.entries(socials).map(([socialId, socialData]) => (
<FormControl id="socialId" key={socialId} mb={3}>
<FormLabel htmlFor={socialId} mb={0}>
<strong>{socialData.label}:</strong>
</FormLabel>
<Input
type="text"
name={socialId}
value={updatedSocials[socialId] ?? ""}
placeholder={socialData.placeholder}
onChange={e => {
const value = e.target.value;
setUpdatedSocials(prevSocials => ({
...prevSocials,
[socialId]: value,
}));
}}
/>
</FormControl>
))}
<Button colorScheme="blue" onClick={handleUpdateSocials} isLoading={isUpdatingSocials} isFullWidth mt={4}>
Update
</Button>
</ModalBody>
</ModalContent>
</Modal>
</>
);
}
Example #10
Source File: ChallengeExpandedCard.jsx From scaffold-directory with MIT License | 4 votes |
ChallengeExpandedCard = ({ challengeId, challenge, builderAttemptedChallenges }) => {
const { borderColor, secondaryFontColor } = useCustomColorModes();
const builderHasCompletedDependenciesChallenges = challenge.dependencies?.every(id => {
if (!builderAttemptedChallenges[id]) {
return false;
}
if (!(builderAttemptedChallenges[id].status === CHALLENGE_SUBMISSION_STATUS.ACCEPTED)) {
return false;
}
if (challenge.lockedTimestamp) {
return (
new Date().getTime() - builderAttemptedChallenges[id].submittedTimestamp > challenge.lockedTimestamp * 60 * 1000
);
}
return true;
});
const pendingDependenciesChallenges = challenge.dependencies?.filter(dependency => {
return (
!builderAttemptedChallenges[dependency] ||
builderAttemptedChallenges[dependency].status !== CHALLENGE_SUBMISSION_STATUS.ACCEPTED
);
});
const lockReasonToolTip = "The following challenges are not completed: " + pendingDependenciesChallenges.join(", ");
const isRampUpChallenge = challenge.dependencies?.length === 0;
const challengeStatus = builderAttemptedChallenges[challengeId]?.status;
let colorScheme;
let label;
switch (challengeStatus) {
case CHALLENGE_SUBMISSION_STATUS.ACCEPTED: {
colorScheme = "green";
label = "Accepted";
break;
}
case CHALLENGE_SUBMISSION_STATUS.REJECTED: {
colorScheme = "red";
label = "Rejected";
break;
}
case CHALLENGE_SUBMISSION_STATUS.SUBMITTED: {
label = "Submitted";
break;
}
default:
// do nothing
}
const isChallengeLocked = challenge.disabled || !builderHasCompletedDependenciesChallenges;
if (challenge.checkpoint) {
return (
<Box bg="#f9f9f9">
<Flex maxW={500} overflow="hidden" m="0 auto 24px" opacity={isChallengeLocked ? "0.5" : "1"}>
<Flex pt={6} pb={4} px={4} direction="column" grow={1}>
<Flex alignItems="center" pb={4} direction="column">
<Text fontWeight="bold" fontSize="lg" mb={2}>
{challenge.label}
</Text>
<Center borderBottom="1px" borderColor={borderColor} w="200px" flexShrink={0} p={1}>
<Image src={challenge.previewImage} objectFit="cover" />
</Center>
</Flex>
<Text color={secondaryFontColor} mb={4} textAlign="center">
{challenge.description}
</Text>
<Spacer />
<ButtonGroup>
<Button
as={isChallengeLocked ? Button : Link}
href={isChallengeLocked ? null : challenge.externalLink?.link}
isDisabled={isChallengeLocked}
variant={isChallengeLocked ? "outline" : "solid"}
isFullWidth
isExternal
>
{builderHasCompletedDependenciesChallenges ? (
<chakra.span>{challenge.externalLink.claim}</chakra.span>
) : (
<>
<span role="img" aria-label="lock icon">
?
</span>
<chakra.span ml={1}>Locked</chakra.span>
</>
)}
</Button>
{!builderHasCompletedDependenciesChallenges && (
<Tooltip label={lockReasonToolTip}>
<IconButton icon={<QuestionOutlineIcon />} />
</Tooltip>
)}
</ButtonGroup>
</Flex>
</Flex>
</Box>
);
}
return (
<Flex maxW={880} borderWidth="1px" borderRadius="lg" borderColor={borderColor} overflow="hidden" mb={6}>
<Center borderBottom="1px" borderColor={borderColor} w="200px" flexShrink={0} p={1}>
{challenge.previewImage ? (
<Image src={challenge.previewImage} objectFit="cover" />
) : (
<Text p={3} textAlign="center">
{challengeId} image
</Text>
)}
</Center>
<Flex pt={6} pb={4} px={4} direction="column" grow={1}>
<Flex justify="space-between" pb={4}>
<Text fontWeight="bold">{challenge.label}</Text>
{isRampUpChallenge && challengeStatus && (
<Badge borderRadius="xl" colorScheme={colorScheme} textTransform="none" py={0.5} px={2.5}>
{label}
</Badge>
)}
</Flex>
<Text color={secondaryFontColor} mb={4}>
{challenge.description}
</Text>
<Spacer />
{challenge.externalLink?.link ? (
// Redirect to externalLink if set (instead of challenge detail view)
<ButtonGroup>
<Button
as={isChallengeLocked ? Button : Link}
href={isChallengeLocked ? null : challenge.externalLink?.link}
isDisabled={isChallengeLocked}
variant={isChallengeLocked ? "outline" : "solid"}
isFullWidth
isExternal
>
{builderHasCompletedDependenciesChallenges ? (
<chakra.span>{challenge.externalLink.claim}</chakra.span>
) : (
<>
<span role="img" aria-label="lock icon">
?
</span>
<chakra.span ml={1}>Locked</chakra.span>
</>
)}
</Button>
{!builderHasCompletedDependenciesChallenges && (
<Tooltip label={lockReasonToolTip}>
<IconButton icon={<QuestionOutlineIcon />} />
</Tooltip>
)}
</ButtonGroup>
) : (
<ButtonGroup>
<Button
as={RouteLink}
to={!isChallengeLocked && `/challenge/${challengeId}`}
isDisabled={isChallengeLocked}
variant={isChallengeLocked ? "outline" : "solid"}
isFullWidth
>
{!isChallengeLocked ? (
<>
{" "}
<span role="img" aria-label="castle icon">
⚔️
</span>
<chakra.span ml={1}>Quest</chakra.span>
</>
) : (
<>
<span role="img" aria-label="lock icon">
?
</span>
<chakra.span ml={1}>Locked</chakra.span>
</>
)}
</Button>
{!builderHasCompletedDependenciesChallenges && (
<Tooltip label={lockReasonToolTip}>
<IconButton icon={<QuestionOutlineIcon />} />
</Tooltip>
)}
</ButtonGroup>
)}
</Flex>
</Flex>
);
}
Example #11
Source File: ChallengeReviewRow.jsx From scaffold-directory with MIT License | 4 votes |
export default function ChallengeReviewRow({ challenge, isLoading, approveClick, rejectClick, userProvider }) {
const [comment, setComment] = useState(challenge.reviewComment ?? "");
const [testPassed, setTestPassed] = useState(null);
const [isRunningTests, setIsRunningTests] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure();
const address = useUserAddress(userProvider);
if (!challengeInfo[challenge.id]) {
return null;
}
// We asume that rejected challenges will always have review Comments.
const isAutograded = challenge.autograding;
// ToDo. Use the stored events.
const isResubmitted = !isAutograded && !!challenge.reviewComment;
const runTests = async () => {
try {
console.log("Testing challenge with the auto-grader");
setIsRunningTests(true);
setTestPassed(null);
const result = await runAutograderTest(challenge.id, challenge.contractUrl, address);
const resultData = result.data;
console.log("Testing results", resultData);
setTestPassed(resultData.success);
setComment(resultData.feedback ?? resultData.error);
} catch (e) {
console.log("Error calling the auto-grader", e);
} finally {
setIsRunningTests(false);
}
};
const challengeReviewDisplay = (
<Link as={RouteLink} to={`/challenge/${challenge.id}`}>
{challengeInfo[challenge.id].label}
{isResubmitted && (
<>
<br />
<Text fontSize="xs">(Resubmitted)</Text>
</>
)}
{isAutograded && (
<>
<br />
<Text fontSize="xs" color="orange.500">
(Autograded)
</Text>
</>
)}
</Link>
);
const submittedMoment = moment(challenge.submittedTimestamp);
const reviewRow = (
<>
<Td>
<Link as={RouteLink} to={`/builders/${challenge.userAddress}`} pos="relative">
<Address address={challenge.userAddress} w="12.5" fontSize="16" />
</Link>
</Td>
<Td>{challengeReviewDisplay}</Td>
<Td>
<DateWithTooltip timestamp={challenge.submittedTimestamp} />
</Td>
</>
);
return (
<Tr>
{reviewRow}
<Td>
<Button type="button" colorScheme="blue" disabled={isLoading} className="danger" onClick={onOpen} size="xs">
Review
</Button>
</Td>
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay />
<ModalContent maxW="56rem">
<ModalHeader>Review Challenge</ModalHeader>
<ModalCloseButton />
<Table mb={4}>
<Thead>
<Tr>
<Th>Builder</Th>
<Th>Challenge & Links</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>
<Link as={RouteLink} to={`/builders/${challenge.userAddress}`} pos="relative">
<Address address={challenge.userAddress} w="12.5" fontSize="16" />
</Link>
</Td>
<Td>
{challengeReviewDisplay}
<UnorderedList>
<ListItem>
<Link
// Legacy branchUrl
href={challenge.contractUrl || challenge.branchUrl}
color="teal.500"
target="_blank"
rel="noopener noreferrer"
>
Contract
</Link>
</ListItem>
<ListItem>
<Link href={challenge.deployedUrl} color="teal.500" target="_blank" rel="noopener noreferrer">
Demo
</Link>
</ListItem>
<ListItem>
Submitted{" "}
<Tooltip label={submittedMoment.format("YYYY-MM-DD, HH:mm")}>
<chakra.span cursor="pointer">{submittedMoment.fromNow()}</chakra.span>
</Tooltip>
</ListItem>
<ListItem listStyleType="none" mt={2}>
<Flex align="center">
<Button onClick={runTests} isLoading={isRunningTests} mr={2}>
Run tests
</Button>
{isBoolean(testPassed) && (
<Badge colorScheme={testPassed ? "green" : "red"}>
{testPassed ? "Accepted" : "Rejected"}
</Badge>
)}
</Flex>
</ListItem>
</UnorderedList>
</Td>
</Tr>
</Tbody>
</Table>
<ModalBody px={6} pb={0}>
<Tabs variant="enclosed-colored">
<TabList>
<Tab>Write</Tab>
<Tab>Preview</Tab>
</TabList>
<TabPanels align="left">
<TabPanel p={0}>
<Textarea
onChange={e => {
const value = e.target.value;
setComment(value);
}}
placeholder="Comment"
style={{ marginBottom: 10 }}
rows={10}
value={comment}
borderTopRadius={0}
/>
</TabPanel>
<TabPanel>
<ReactMarkdown components={ChakraUIRenderer(chakraMarkdownComponents)}>{comment}</ReactMarkdown>
</TabPanel>
</TabPanels>
</Tabs>
</ModalBody>
<ModalFooter>
<Button
type="button"
colorScheme="red"
disabled={isLoading}
className="danger"
onClick={() => rejectClick(challenge.userAddress, challenge.id, comment)}
size="sm"
isFullWidth
>
Reject
</Button>
<Button
type="button"
colorScheme="green"
disabled={isLoading}
ml={3}
onClick={() => approveClick(challenge.userAddress, challenge.id, comment)}
size="sm"
isFullWidth
>
Approve
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Tr>
);
}