Merge pull request #413 from GenaDrop/staging

Staging
GenaDrop · Aug 24, 2024 · 66ba961 · 66ba961
2 parents fbbc980 + 918aa8f
commit 66ba961
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 40 deletions.
diff --git a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/ContractNFTs.jsx b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/ContractNFTs.jsx
@@ -23,7 +23,7 @@ const ContractNFTs = ({ contractId, isDarkModeOn, showFilters }) => {
     }
   `;
 
-  const perPage = 50;
+  const perPage = 52;
   const [nftData, setNftData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [countNFTs, setCountNFTs] = useState(0);
@@ -186,6 +186,7 @@ const ContractNFTs = ({ contractId, isDarkModeOn, showFilters }) => {
                     totalItems: countNFTs,
                     isDarkModeOn,
                     itemsPerPage: perPage,
+                    notInTable: true,
                     currentPage: pageNumber,
                     onPageChange: (pageNumber) => setPageNumber(pageNumber),
                   }}

diff --git a/apps/Mintbase/widget/Mintbase/App/Navbar/Index.jsx b/apps/Mintbase/widget/Mintbase/App/Navbar/Index.jsx
@@ -196,7 +196,7 @@ const MbNavbar = styled.div`
     max-width: 100px;
     min-width: 30px;
     @media (max-width: 800px) {
-      width: 60px;
+      width: 100px;
     }
   }
 `;
@@ -401,6 +401,9 @@ const SidebarMobile = styled.div`
 
   .mobile-tabs {
     display: none;
+    .menu-items {
+      position: unset;
+    }
     @media (max-width: 800px) {
       display: flex;
       flex-direction: column;

diff --git a/apps/Mintbase/widget/Mintbase/App/Tokens/Minted.jsx b/apps/Mintbase/widget/Mintbase/App/Tokens/Minted.jsx
@@ -54,11 +54,11 @@ const [countNFTs, setCountNFTs] = useState(0);
 const [pageNumber, setPageNumber] = useState(1);
 const [showListed, setShowListed] = useState(false);
 
-const limit = 20;
+const perPage = 56;
 
-const offset = (pageNumber - 1) * limit;
+const offset = (pageNumber - 1) * perPage;
 
-const totalPages = Math.ceil(countNFTs / limit);
+const totalPages = Math.ceil(countNFTs / perPage);
 
 const listedToggleHandler = () => {
   setShowListed((prev) => !prev);
@@ -89,10 +89,10 @@ useEffect(() => {
   fetchMintedNFTs({
     minter: minterId || "jgodwill.near",
     offset,
-    limit,
+    limit: perPage,
     listed: showListed,
   });
-}, [offset, pageNumber, showListed]);
+}, [limit, offset, pageNumber, showListed]);
 
 const WrapCards = styled.div`
   display: flex;
@@ -176,11 +176,19 @@ return (
               ))}
           </Cards>
           <div className="pagination_container">
-            <Pagination
-              totalPages={totalPages}
-              selectedPage={pageNumber}
-              onPageClick={(v) => setPageNumber(v)}
-            />
+            <div className="w-100 px-4">
+              <Widget
+                src="${config_account}/widget/Mintbase.TablePagination"
+                props={{
+                  totalItems: countNFTs,
+                  isDarkModeOn,
+                  itemsPerPage: perPage,
+                  notInTable: true,
+                  currentPage: pageNumber,
+                  onPageChange: (pageNumber) => setPageNumber(pageNumber),
+                }}
+              />
+            </div>
           </div>
         </>
       ) : (

diff --git a/apps/Mintbase/widget/Mintbase/App/Tokens/Owned.jsx b/apps/Mintbase/widget/Mintbase/App/Tokens/Owned.jsx
@@ -1,7 +1,3 @@
-const { Pagination } = VM.require("buildhub.near/widget/components") || {
-  Pagination: () => <></>,
-};
-
 const { ownerId, isDarkModeOn, isConnected, showFilters, accountId } = props;
 const Card = styled.div`
   padding: 1em;
@@ -53,10 +49,10 @@ const [countNFTs, setCountNFTs] = useState(0);
 const [pageNumber, setPageNumber] = useState(1);
 const [showListed, setShowListed] = useState(false);
 
-const limit = 20;
+const perPage = 56;
 
-const offset = (pageNumber - 1) * limit;
-const totalPages = Math.ceil(countNFTs / limit);
+const offset = (pageNumber - 1) * perPage;
+const totalPages = Math.ceil(countNFTs / perPage);
 
 const fetchOwnedNFTs = ({ owner, offset, limit, listed }) => {
   asyncFetch(
@@ -83,10 +79,10 @@ useEffect(() => {
   fetchOwnedNFTs({
     owner: ownerId || "jgodwill.near",
     offset,
-    limit,
+    limit: perPage,
     listed: showListed,
   });
-}, [offset, pageNumber, showListed]);
+}, [limit, offset, pageNumber, showListed]);
 
 const listedToggleHandler = () => {
   setShowListed((prev) => !prev);
@@ -180,11 +176,19 @@ return (
               ))}
           </Cards>
           <div className="pagination_container">
-            <Pagination
-              totalPages={totalPages}
-              selectedPage={pageNumber}
-              onPageClick={(v) => setPageNumber(v)}
-            />
+            <div className="w-100 px-4">
+              <Widget
+                src="${config_account}/widget/Mintbase.TablePagination"
+                props={{
+                  totalItems: countNFTs,
+                  isDarkModeOn,
+                  itemsPerPage: perPage,
+                  notInTable: true,
+                  currentPage: pageNumber,
+                  onPageChange: (pageNumber) => setPageNumber(pageNumber),
+                }}
+              />
+            </div>
           </div>
         </>
       ) : (

diff --git a/apps/Mintbase/widget/Mintbase/TablePagination.jsx b/apps/Mintbase/widget/Mintbase/TablePagination.jsx
@@ -3,7 +3,7 @@ const TablePagination = ({
   currentPage,
   itemsPerPage,
   totalItems,
-  hideLabel,
+  notInTable,
   isDarkModeOn,
 }) => {
   const DOTS = "...";
@@ -76,8 +76,8 @@ const TablePagination = ({
 
   const PaginationRoot = styled.div`
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    flex-direction: ${notInTable ? "column-reverse" : "space-between"};
+    justify-content: ${notInTable ? "center" : "space-between"};
     align-items: center;
     width: 100%;
     padding: 1rem 0;
@@ -122,12 +122,12 @@ const TablePagination = ({
       align-items: center;
       justify-content: center;
       border-radius: 0.25rem;
+      font-weight: 500;
       width: 2rem;
       height: 2rem;
       margin: 0 0.25rem;
       border: 1px solid transparent;
-      color: ${isDarkModeOn ? "#9CA3AF" : "#93C5FD"};
-      background-color: ${isDarkModeOn ? "#1F2937" : "#EFF6FF"};
+      color: ${isDarkModeOn ? "#c5d0ff" : "#4758a3"};
       transition-property: all;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 300ms;
@@ -143,28 +143,35 @@ const TablePagination = ({
         box-shadow: 0 0 0 2px ${isDarkModeOn ? "#93C5FD" : "#3B82F6"};
       }
       &.active {
-        background-color: ${isDarkModeOn ? "#B91C1C" : "#F87171"};
-        color: ${isDarkModeOn ? "#FFF" : "#FFF"};
+        color: ${isDarkModeOn ? "#Ff2424" : "#Ff2424"};
+        background-color: ${isDarkModeOn ? "#3a1c2a" : "#Ffdede"};
         border: 1px solid transparent;
         box-shadow: none;
       }
     }
     .showingCount {
       padding-top: 1rem;
-      font-weight: 500;
+      font-weight: ${notInTable ? "normal" : "500"};
       text-align: center;
-      color: ${isDarkModeOn ? "#fff" : "#eeeee"};
+      font-size: ${notInTable ? ".8rem" : "1rem"};
+      color: ${isDarkModeOn
+        ? notInTable
+          ? "#b3b5bd"
+          : "#fff"
+        : notInTable
+        ? "#404252"
+        : "#eeeee"};
       flex: 1;
     }
   `;
 
   return (
     <PaginationRoot>
-      {!hideLabel && (
-        <div className="showingCount">
-          {showingCount} of {props.totalItems || 0}
-        </div>
-      )}
+      {/* {!notInTable && ( */}
+      <div className="showingCount">
+        {notInTable ? "showing" : ""} {showingCount} of {props.totalItems || 0}
+      </div>
+      {/* )} */}
       {props.totalItems !== 0 && (
         <div className="pagination">
           <div className="previous" onClick={previousPage}>