Paginator

apps/engine/pages/docs.js

@@ -6,11 +6,13 @@ import { DEFAULT_METATAGS } from "../src/constants";
 
 const API = process.env.NEXT_PUBLIC_ENGINE_API_URL;
 
+console.log("API", API);
+
 const Docs = () => {
   return (
     // <Box overflowY="hidden" w="100%" maxH="100%" minH="100vh">
     <>
-      <Box w="100%" maxH="100vh" overflowY="scroll" zIndex={0}>
+      <Box w="100%" maxH="100vh" overflowY="scroll" zIndex={0} bgColor="white">
         <RedocStandalone
           specUrl={`${API}/openapi.json`}
           options={{

apps/engine/src/AppContext.js

@@ -18,6 +18,7 @@ import {
   TIME_RANGE_SECONDS,
   WHITE_LOGO_W_TEXT_URL,
 } from "./constants";
+import { PAGETYPE } from "../../../types/Site";
 
 const AppContext = (props) => {
   useEffect(() => {
@@ -32,7 +33,14 @@ const AppContext = (props) => {
       <Web3Provider>
         <MoonstreamProvider
           constants={{
-            SITEMAP: [],
+            SITEMAP: [
+              {
+                title: "Resources",
+                children: [
+                  { title: "Api Docs", path: "/docs", type: PAGETYPE.CONTENT },
+                ],
+              },
+            ],
             DEFAULT_METATAGS: DEFAULT_METATAGS,
             TIME_RANGE_SECONDS: TIME_RANGE_SECONDS,
             COPYRIGHT_NAME: COPYRIGHT_NAME,

packages/moonstream-components/src/components/Footer.js

@@ -117,7 +117,7 @@ const Footer = () => {
                 >
                   <>
                     <ListHeader>{category.title}</ListHeader>
-                    {category.children.map((linkItem, linkItemIndex) => {
+                    {category.children?.map((linkItem, linkItemIndex) => {
                       return (
                         <RouterLink
                           passHref

packages/moonstream-components/src/components/LandingNavbar.js

@@ -63,10 +63,11 @@ const LandingNavbar = () => {
       </Flex>
 
       {!ui.isMobileView && (
-        <>
+        <Flex pr={14} justifyItems="flex-end" flexGrow={1} alignItems="center">
           <Spacer />
           <ButtonGroup variant="solid" spacing={4} pr={16}>
             {SITEMAP.map((item, idx) => {
+              console.log("item", item);
               return (
                 <React.Fragment key={`Fragment-${idx}`}>
                   {!item.children && (
@@ -82,7 +83,12 @@ const LandingNavbar = () => {
                   )}
                   {item.children && (
                     <Menu>
-                      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
+                      <MenuButton
+                        as={Button}
+                        rightIcon={<ChevronDownIcon />}
+                        color="white"
+                        variant="link"
+                      >
                         {item.title}
                       </MenuButton>
                       <Portal>
@@ -106,54 +112,51 @@ const LandingNavbar = () => {
                 </React.Fragment>
               );
             })}
-            {web3Provider.buttonText !==
-              web3Provider.WALLET_STATES.CONNECTED && (
-              <Button
-                colorScheme={
-                  web3Provider.buttonText ===
-                  web3Provider.WALLET_STATES.CONNECTED
-                    ? "green"
-                    : "green"
-                }
-                onClick={web3Provider.onConnectWalletClick}
+          </ButtonGroup>
+          {web3Provider.buttonText !== web3Provider.WALLET_STATES.CONNECTED && (
+            <Button
+              colorScheme={
+                web3Provider.buttonText === web3Provider.WALLET_STATES.CONNECTED
+                  ? "green"
+                  : "green"
+              }
+              onClick={web3Provider.onConnectWalletClick}
+            >
+              {web3Provider.buttonText}
+              {"  "}
+              <Image
+                pl={2}
+                h="24px"
+                src="https://raw.githubusercontent.com/MetaMask/brand-resources/master/SVG/metamask-fox.svg"
+              />
+            </Button>
+          )}
+          {web3Provider.buttonText === web3Provider.WALLET_STATES.CONNECTED && (
+            <Flex>
+              <Badge
+                colorScheme={"blue"}
+                variant={"subtle"}
+                size="sm"
+                borderRadius={"md"}
+                mr={2}
+                p={0}
               >
-                {web3Provider.buttonText}
-                {"  "}
-                <Image
-                  pl={2}
-                  h="24px"
-                  src="https://raw.githubusercontent.com/MetaMask/brand-resources/master/SVG/metamask-fox.svg"
-                />
-              </Button>
-            )}
-            {web3Provider.buttonText ===
-              web3Provider.WALLET_STATES.CONNECTED && (
-              <Flex>
-                <Badge
-                  colorScheme={"blue"}
-                  variant={"subtle"}
-                  size="sm"
-                  borderRadius={"md"}
-                  mr={2}
-                  p={0}
+                <Skeleton
+                  isLoaded={web3Provider.account}
+                  h="100%"
+                  colorScheme={"red"}
+                  w="100%"
+                  borderRadius={"inherit"}
+                  startColor="red.500"
+                  endColor="blue.500"
+                  p={1}
                 >
-                  <Skeleton
-                    isLoaded={web3Provider.account}
-                    h="100%"
-                    colorScheme={"red"}
-                    w="100%"
-                    borderRadius={"inherit"}
-                    startColor="red.500"
-                    endColor="blue.500"
-                    p={1}
-                  >
-                    {web3Provider.account}
-                  </Skeleton>
-                </Badge>
-              </Flex>
-            )}
-          </ButtonGroup>
-        </>
+                  {web3Provider.account}
+                </Skeleton>
+              </Badge>
+            </Flex>
+          )}
+        </Flex>
       )}
     </>
   );

packages/moonstream-components/src/components/Paginator.js

@@ -0,0 +1,73 @@
+import React from "react";
+
+import { Flex, Button, ButtonGroup, Select, Spacer } from "@chakra-ui/react";
+import { useRouter } from "../core/hooks";
+
+const Paginator = ({
+  children,
+  onForward,
+  onBack,
+  setLimit,
+  paginatorKey,
+  hasMore,
+  pageOptions,
+  ...props
+}) => {
+  const router = useRouter();
+  /**
+   *  @dev set page and limit by appending query to url path:
+   * @example
+   * router.appendQueries({
+      claimantsLimit: claimantsPageSize,
+      claimantsPage: claimantsPage,
+    });
+   */
+  const page = router.query[`${paginatorKey}Page`];
+  const limit = router.query[`${paginatorKey}Limit`];
+  const _pageOptions = pageOptions ?? ["25", "50", "100", "300", "500"];
+
+  const PageBar = () => (
+    <Flex justifyContent={"space-between"} pt={2}>
+      <ButtonGroup
+        size="sm"
+        variant={"outline"}
+        colorScheme="orange"
+        justifyContent={"space-between"}
+        w="100%"
+        alignItems="baseline"
+      >
+        <Button isDisabled={page == "0"} onClick={onBack}>
+          {`<<<`}
+        </Button>
+        <Spacer />
+        <Select
+          size="sm"
+          maxW="150px"
+          placeholder="Select page size"
+          onChange={(e) => setLimit(e.target.value)}
+          value={limit}
+        >
+          {_pageOptions.map((pageSize) => {
+            return (
+              <option
+                key={`paginator-options-pagesize-${pageSize}`}
+                value={pageSize}
+              >
+                {pageSize}
+              </option>
+            );
+          })}
+        </Select>
+        <Button isDisabled={!hasMore} onClick={onForward}>{`>>>`}</Button>
+      </ButtonGroup>
+    </Flex>
+  );
+  return (
+    <Flex className="Paginator" direction={"column"} w="100%" {...props}>
+      <PageBar />
+      {children}
+      <PageBar />
+    </Flex>
+  );
+};
+export default Paginator;

packages/moonstream-components/src/core/services/index.js

@@ -1,4 +1,3 @@
-export { default as authService } from "./auth.service";
 export { default as dashboardService } from "./dashboard.service";
 export { default as moonstreamEngineService } from "./moonstream-engine.service";
 export { default as terminusService } from "./terminus.service";