@chakra-ui/react#chakra JavaScript Examples
The following examples show how to use
@chakra-ui/react#chakra.
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: BuilderListSkeleton.jsx From scaffold-directory with MIT License | 6 votes |
|
BuilderListSkeleton = () => (
<Box overflowX="auto">
<Center mb={5}>
<chakra.strong mr={2}>Total builders:</chakra.strong> <SkeletonText noOfLines={1} w={5} />
</Center>
<Table>
<Thead>
<Tr>
<Th>Builder</Th>
<Th>Challenges</Th>
<Th>Socials</Th>
<Th>Last Activity</Th>
</Tr>
</Thead>
<Tbody>
{[1, 2].map(lineNumber => {
return (
<Tr key={lineNumber}>
<Td>
<SkeletonAddress w="12.5" fontSize="16" />
</Td>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
)
Example #2
| Source File: chakraMarkdownTheme.jsx From scaffold-directory with MIT License | 6 votes |
|
MdPre = ({ children }) => {
const { codeBgColor } = useCustomColorModes();
return (
<chakra.pre display="block" borderRadius="md" mb={4} p={3} bg={codeBgColor} overflowX="auto">
{children}
</chakra.pre>
);
}
Example #3
| Source File: SunIcon.jsx From scaffold-directory with MIT License | 6 votes |
|
SunIcon = props => (
<chakra.svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512" stroke="currentColor">
<path
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
d="M 256 160 c -52.9 0 -96 43.1 -96 96 s 43.1 96 96 96 s 96 -43.1 96 -96 s -43.1 -96 -96 -96 Z m 246.4 80.5 l -94.7 -47.3 l 33.5 -100.4 c 4.5 -13.6 -8.4 -26.5 -21.9 -21.9 l -100.4 33.5 l -47.4 -94.8 c -6.4 -12.8 -24.6 -12.8 -31 0 l -47.3 94.7 L 92.7 70.8 c -13.6 -4.5 -26.5 8.4 -21.9 21.9 l 33.5 100.4 l -94.7 47.4 c -12.8 6.4 -12.8 24.6 0 31 l 94.7 47.3 l -33.5 100.5 c -4.5 13.6 8.4 26.5 21.9 21.9 l 100.4 -33.5 l 47.3 94.7 c 6.4 12.8 24.6 12.8 31 0 l 47.3 -94.7 l 100.4 33.5 c 13.6 4.5 26.5 -8.4 21.9 -21.9 l -33.5 -100.4 l 94.7 -47.3 c 13 -6.5 13 -24.7 0.2 -31.1 Z m -155.9 106 c -49.9 49.9 -131.1 49.9 -181 0 c -49.9 -49.9 -49.9 -131.1 0 -181 c 49.9 -49.9 131.1 -49.9 181 0 c 49.9 49.9 49.9 131.1 0 181 Z"
/>
</chakra.svg>
)
Example #4
| Source File: MoonIcon.jsx From scaffold-directory with MIT License | 6 votes |
|
MoonIcon = props => (
<chakra.svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512" stroke="currentColor">
<path
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
d="M 283.211 512 c 78.962 0 151.079 -35.925 198.857 -94.792 c 7.068 -8.708 -0.639 -21.43 -11.562 -19.35 c -124.203 23.654 -238.262 -71.576 -238.262 -196.954 c 0 -72.222 38.662 -138.635 101.498 -174.394 c 9.686 -5.512 7.25 -20.197 -3.756 -22.23 A 258.156 258.156 0 0 0 283.211 0 c -141.309 0 -256 114.511 -256 256 c 0 141.309 114.511 256 256 256 Z"
/>
</chakra.svg>
)
Example #5
| Source File: EthIcon.jsx From scaffold-directory with MIT License | 6 votes |
|
EthIcon = props => (
<chakra.svg {...props} display="inline" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.4925 9L49.9353 10.8915V65.7723L50.4925 66.3279L75.9844 51.2696L50.4925 9Z" fill="#343434" />
<path d="M50.4925 9L25 51.2696L50.4925 66.3279V39.6902V9Z" fill="#8C8C8C" />
<path d="M50.4925 71.1511L50.1785 71.5338V91.0832L50.4925 91.9994L76 56.1006L50.4925 71.1511Z" fill="#3C3C3B" />
<path d="M50.4925 91.9994V71.1511L25 56.1006L50.4925 91.9994Z" fill="#8C8C8C" />
<path d="M50.4924 66.3279L75.9843 51.2697L50.4924 39.6902V66.3279Z" fill="#141414" />
<path d="M25 51.2697L50.4925 66.3279V39.6902L25 51.2697Z" fill="#393939" />
</chakra.svg>
)
Example #6
| Source File: HeroIconUser.jsx From scaffold-directory with MIT License | 6 votes |
|
HeroIconUser = props => (
<chakra.svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</chakra.svg>
)
Example #7
| Source File: HeroIconInbox.jsx From scaffold-directory with MIT License | 6 votes |
|
HeroIconInbox = props => (
<chakra.svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
clipRule="evenodd"
/>
</chakra.svg>
)
Example #8
| Source File: HeroIconBolt.jsx From scaffold-directory with MIT License | 5 votes |
|
HeroIconBolt = props => (
<chakra.svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</chakra.svg>
)
Example #9
| Source File: TwitterIcon.jsx From scaffold-directory with MIT License | 5 votes |
|
TwitterIcon = props => (
<chakra.svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>{props.label ?? "Twitter"}</title>
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</chakra.svg>
)
Example #10
| Source File: TelegramIcon.jsx From scaffold-directory with MIT License | 5 votes |
|
TelegramIcon = props => (
<chakra.svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Telegram</title>
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
</chakra.svg>
)
Example #11
| Source File: IntagramIcon.jsx From scaffold-directory with MIT License | 5 votes |
|
IntagramIcon = props => (
<chakra.svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram</title>
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
</chakra.svg>
)
Example #12
| Source File: GithubIcon.jsx From scaffold-directory with MIT License | 5 votes |
|
GithubIcon = props => (
<chakra.svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</chakra.svg>
)
Example #13
| Source File: EmailIcon.jsx From scaffold-directory with MIT License | 5 votes |
|
EmailIcon = props => (
<chakra.svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Email</title>
<path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" />
</chakra.svg>
)
Example #14
| Source File: DiscordIcon.jsx From scaffold-directory with MIT License | 5 votes |
|
DiscordIcon = props => (
<chakra.svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>{props.label ?? "Discord"}</title>
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
</chakra.svg>
)
Example #15
| Source File: SignatureSignUp.jsx From scaffold-directory with MIT License | 5 votes |
|
SignatureSignUp = forwardRef(({ address, userProvider, onSuccess, setUserRole }, ref) => {
const [loading, setLoading] = useState(false);
const toast = useToast({ position: "top", isClosable: true });
const handleLoginSigning = async () => {
setLoading(true);
let signMessage;
try {
const signMessageResponse = await axios.get(`${serverUrl}/sign-message`, {
params: {
messageId: "login",
address,
},
});
signMessage = signMessageResponse.data;
console.log("signMessage", signMessage);
} catch (e) {
// TODO handle errors. Issue #25 https://github.com/moonshotcollective/scaffold-directory/issues/25
toast({
description: " Sorry, the server is overloaded. ???",
status: "error",
});
setLoading(false);
console.log(e);
return;
}
if (!signMessage) {
toast({
description: " Sorry, the server is overloaded. ???",
status: "error",
});
setLoading(false);
return;
}
let signature;
try {
signature = await userProvider.send("personal_sign", [signMessage, address]);
} catch (err) {
toast({
description: "Couldn't get a signature from the Wallet",
status: "error",
});
setLoading(false);
return;
}
console.log("signature", signature);
const res = await axios.post(`${serverUrl}/sign`, {
address,
signature,
});
setLoading(false);
if (res.data) {
onSuccess();
setUserRole(USER_ROLES[res.data.role] ?? USER_ROLES.registered);
}
};
return (
<Button ref={ref} colorScheme="blue" disabled={loading} onClick={handleLoginSigning}>
<span role="img" aria-label="write icon">✍</span><chakra.span ml={2}>Register</chakra.span>
</Button>
);
})
Example #16
| 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 #17
| Source File: BuilderListView.jsx From scaffold-directory with MIT License | 4 votes |
|
export default function BuilderListView({ serverUrl, mainnetProvider, userRole }) {
const [builders, setBuilders] = useState([]);
const [isLoadingBuilders, setIsLoadingBuilders] = useState(false);
const { secondaryFontColor } = useCustomColorModes();
const isAdmin = userRole === USER_ROLES.admin;
const columns = useMemo(
() => [
{
Header: "Builder",
accessor: "builder",
disableSortBy: true,
Cell: ({ value }) => <BuilderAddressCell builderId={value} mainnetProvider={mainnetProvider} />,
},
{
Header: "Challenges",
accessor: "challenges",
sortDescFirst: true,
},
{
Header: "Socials",
accessor: "socials",
disableSortBy: true,
Cell: ({ value }) => <BuilderSocialLinksCell builder={value} isAdmin={isAdmin} />,
},
{
Header: "Last Activity",
accessor: "lastActivity",
sortDescFirst: true,
Cell: ({ value }) => <DateWithTooltip timestamp={value} />,
},
],
// eslint-disable-next-line
[userRole],
);
useEffect(() => {
async function fetchBuilders() {
setIsLoadingBuilders(true);
const fetchedBuilders = await axios.get(serverUrl + serverPath);
const processedBuilders = fetchedBuilders.data.map(builder => ({
builder: builder.id,
challenges: getAcceptedChallenges(builder?.challenges)?.length ?? 0,
socials: builder,
lastActivity: builderLastActivity(builder),
}));
setBuilders(processedBuilders);
setIsLoadingBuilders(false);
}
fetchBuilders();
}, [serverUrl]);
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data: builders,
initialState: { pageIndex: 0, pageSize: 25, sortBy: useMemo(() => [{ id: "lastActivity", desc: true }], []) },
},
useSortBy,
usePagination,
);
return (
<Container maxW="container.lg">
<Container maxW="container.md" centerContent>
<Heading as="h1" mb="4">
All Builders
</Heading>
<Text color={secondaryFontColor} textAlign="center" mb="10">
List of Ethereum builders creating products, prototypes, and tutorials with{" "}
<Link href="https://github.com/scaffold-eth/scaffold-eth" color="teal.500" isExternal>
scaffold-eth
</Link>
.
</Text>
</Container>
{isLoadingBuilders ? (
<BuilderListSkeleton />
) : (
<Box overflowX="auto" mb={8}>
<Center mb={5}>
<chakra.strong mr={2}>Total builders:</chakra.strong> {builders.length}
</Center>
<Table {...getTableProps()}>
<Thead>
{headerGroups.map(headerGroup => (
<Tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<Th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
<chakra.span pl="4">
{column.isSorted ? (
column.isSortedDesc ? (
<TriangleDownIcon aria-label="sorted descending" />
) : (
<TriangleUpIcon aria-label="sorted ascending" />
)
) : null}
</chakra.span>
</Th>
))}
</Tr>
))}
</Thead>
<Tbody {...getTableBodyProps()}>
{page.map(row => {
prepareRow(row);
return (
<Tr {...row.getRowProps()}>
{row.cells.map(cell => (
<Td {...cell.getCellProps()}>{cell.render("Cell")}</Td>
))}
</Tr>
);
})}
</Tbody>
</Table>
<Center mt={4}>
<ButtonGroup>
<Button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{"<<"}
</Button>
<Button onClick={() => previousPage()} disabled={!canPreviousPage}>
{"<"}
</Button>
<Button onClick={() => nextPage()} disabled={!canNextPage}>
{">"}
</Button>
<Button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{">>"}
</Button>
</ButtonGroup>
</Center>
<Center mt={4}>
<Text mr={4}>
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{" "}
</Text>
<Box>
<Select
isFullWidth={false}
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value));
}}
>
{[25, 50, 100].map(pageSizeOption => (
<option key={pageSizeOption} value={pageSizeOption}>
Show {pageSizeOption}
</option>
))}
</Select>
</Box>
</Center>
</Box>
)}
</Container>
);
}
Example #18
| 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 #19
| Source File: Header.jsx From scaffold-directory with MIT License | 4 votes |
|
export default function Header({
injectedProvider,
userRole,
address,
mainnetProvider,
userProvider,
loadWeb3Modal,
logoutOfWeb3Modal,
setUserRole,
}) {
const { secondaryFontColor, borderColor } = useCustomColorModes();
const primaryColorString = useColorModeValue("var(--chakra-colors-gray-700)", "var(--chakra-colors-gray-200)");
const isSignerProviderConnected =
injectedProvider && injectedProvider.getSigner && injectedProvider.getSigner()._isSigner;
const userIsRegistered = userRole && USER_ROLES.anonymous !== userRole;
return (
<Box
borderBottom="1px"
borderColor={borderColor}
mb={10}
px={{ base: 4, lg: 8 }}
h={{ base: userIsRegistered ? "120px" : "80px", lg: "80px" }}
>
{ENVIRONMENT !== "production" && (
<Box pos="fixed" p="2px" fontSize={14} w="100%" bgColor="yellow.200" left={0} textAlign="center">
Working on a {ENVIRONMENT} environment.
</Box>
)}
<Flex
align={{ base: userIsRegistered ? "start" : "center", lg: "center" }}
h="full"
fontWeight="semibold"
pos="relative"
>
<Flex shrink={0} mr={9} mt={{ base: userIsRegistered ? 5 : 0, lg: 0 }}>
<NavLink to="/" exact>
<span role="img" aria-label="castle icon">
?♀️
</span>{" "}
<chakra.strong display={{ base: "none", md: "inline-block" }}>SpeedRunEthereum.com</chakra.strong>
<chakra.strong display={{ base: "inline-block", md: "none" }}>
{isSignerProviderConnected ? "SRE" : "SpeedRunEthereum.com"}
</chakra.strong>
</NavLink>
</Flex>
<HStack
as="ul"
mr={{ base: 0, lg: 6 }}
style={{ listStyle: "none" }}
spacing={{ base: 6, lg: 9 }}
pos={{ base: "absolute", lg: "static" }}
justifyContent={{ base: "center", lg: "left" }}
top="80px"
left={0}
>
{userRole && USER_ROLES.anonymous !== userRole && (
<chakra.li key="/portfolio" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
<NavLink
to="/portfolio"
isActive={(match, location) => location.pathname.includes("/builders/")}
activeStyle={{
color: primaryColorString,
}}
>
Portfolio
</NavLink>
</chakra.li>
)}
{/* ToDo. At least Builder */}
{(USER_ROLES.builder === userRole || USER_ROLES.admin === userRole) && (
<>
<chakra.li key="/builders" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
<NavLink
to="/builders"
exact
activeStyle={{
color: primaryColorString,
}}
>
Builders
</NavLink>
</chakra.li>
</>
)}
{USER_ROLES.admin === userRole && (
<>
<chakra.li key="/submission-review" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
<NavLink
to="/submission-review"
exact
activeStyle={{
color: primaryColorString,
}}
>
Review Submissions
</NavLink>
</chakra.li>
<chakra.li key="/activity" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
<NavLink
to="/activity"
exact
activeStyle={{
color: primaryColorString,
}}
>
Activity
</NavLink>
</chakra.li>
</>
)}
</HStack>
<Spacer />
<Box mt={{ base: userIsRegistered ? 3 : 0, lg: 0 }}>
<Account
address={address}
connectText="Connect Wallet"
ensProvider={mainnetProvider}
isWalletConnected={isSignerProviderConnected}
loadWeb3Modal={loadWeb3Modal}
logoutOfWeb3Modal={() => {
logoutOfWeb3Modal();
setUserRole(null);
}}
setUserRole={setUserRole}
userProvider={userProvider}
userRole={userRole}
/>
</Box>
</Flex>
</Box>
);
}
Example #20
| 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>
);
}
