Merge pull request #429 from GenaDrop/staging

Staging
GenaDrop · Sep 30, 2024 · bcd8199 · bcd8199
2 parents bf99fbf + f391a44
commit bcd8199
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 52 deletions.
diff --git a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Index.jsx b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Index.jsx
@@ -27,24 +27,26 @@ const { href } = VM.require("${alias_builddao}/widget/lib.url") || {
 const [isStoreOwner, setIsStoreOwner] = useState(false);
 const [isMinter, setIsMinter] = useState(false);
 
-const actualTabs = {
-  tabLabels: [
+const tabs = {
+  labels: [
     { id: 0, title: "NFTs" },
     { id: 1, title: "_About", hidden: !connectedUserIsMinter },
-    { id: 2, title: "Discussions" },
+    {title: "_Mint NFT", hidden: !isMinter},
+    { id: 3, title: "Discussions" },
     // { id: 3, title: "_User Settings", hidden: !connectedUserIsMinter },
     { id: 4, title: "Activity" },
     { id: 5, title: "Analytics" },
+    {title: "_Contract Settings", hidden: !isStoreOwner && !context.accountId}
   ],
 };
 
-if (isStoreOwner && context.accountId) {
-  actualTabs.tabLabels.splice(2, 0, { id: 7, title: "Contract Settings" });
-}
-if (isMinter) {
-  actualTabs.tabLabels.splice(1, 0, { id: 2, title: "Mint NFT" });
-}
-const hiddenTabs = actualTabs.tabLabels
+// if (isStoreOwner && context.accountId) {
+//   tabs.labels.splice(2, 0, { id: 7, title: "Contract Settings" });
+// }
+// if (isMinter) {
+//   tabs.labels.splice(1, 0, { id: 2, title: "Mint NFT" });
+// }
+const hiddenTabs = tabs.labels
   .filter((tab) => !tab.hidden)
   .map((tab) => tab.title);
 const tabProps = { tabLabels: hiddenTabs };
@@ -328,7 +330,6 @@ const PageContent = () => {
             isDarkModeOn,
             connectedDao: connectedDao,
             showFilters: showListedFilters,
-            showingListed: showListed,
           }}
         />
       );

diff --git a/apps/Mintbase/widget/Mintbase/MbTabs.jsx b/apps/Mintbase/widget/Mintbase/MbTabs.jsx
@@ -92,6 +92,9 @@ const Tabs = styled.div`
     align-items: center;
     justify-content: center;
     padding: 12px;
+    img{
+      max-width: unset;
+    }
   }
 `;
 const Dropdown = styled.div`

diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx
@@ -43,24 +43,23 @@ const { MbInputField } = VM.require(
   MbInputField: () => <></>,
 };
 
-const actualTabs = {
-  tabLabels: [
-    {title:"My Owned NFTs"},
-    {title: "My Minted NFTs"},
-    {title: "My Stores"},
-    {title: "Mint NFT"},
-    {title: "Store NFTs"},
-    {title: "Deploy Store"},
-    {title: "My Activity"},
+const tabs = {
+  labels: [
+    { title: "My Owned NFTs" },
+    { title: "My Minted NFTs" },
+    { title: "My Stores" },
+    { title: "Mint NFT" },
+    { title: "Store NFTs" },
+    { title: "Deploy Store" },
+    { title: "My Activity" },
+    {
+      title: "_DAO NFTs",
+      hidden: !connectedDao?.address && !context?.accountId,
+    },
   ],
 };
 
-
-if (connectedDao?.address) {
-  actualTabs.tabLabels.push({title: "DAO NFTs"})
-}
-
-const hiddenTabs = actualTabs.tabLabels
+const hiddenTabs = tabs.labels
   .filter((tab) => !tab.hidden)
   .map((tab) => tab.title);
 const tabProps = { tabLabels: hiddenTabs };
@@ -165,10 +164,10 @@ const ContractSection = styled.div`
   justify-content: space-evenly;
   ${getInputLabelFontType("big")}
   a {
-    color: var(--blue-300,#4f5fa3);
+    color: var(--blue-300, #4f5fa3);
     text-decoration: none;
     svg {
-      color: var(--blue-300,#4f5fa3);
+      color: var(--blue-300, #4f5fa3);
     }
   }
   svg {
@@ -434,6 +433,7 @@ const PageContent = () => {
             contractId: storeAddress,
             connectedDao: connectedDao,
             isDarkModeOn,
+            showFilters: showOwnedFilters,
           }}
         />
       );
@@ -661,7 +661,8 @@ const Index = ({}) => (
             isDarkModeOn,
             hasQueryToggle:
               selectedTab === "my-owned-nfts" ||
-              selectedTab === "my-minted-owned",
+              selectedTab === "my-minted-nfts" ||
+              selectedTab === "store-nfts",
             onQueryToggle: queryInOwnedToggleHandler,
           }}
         />
@@ -670,15 +671,17 @@ const Index = ({}) => (
         <PageContent />
       </div>
       <div className="floating-btns">
-        <Widget
-          src={`${config_account}/widget/Mintbase.App.DAOs.Connection`}
-          props={{
-            isDarkModeOn,
-            accountId,
-            localStorageData: connectedDao,
-            setLocalStorageData,
-          }}
-        />
+        {context.accountId && (
+          <Widget
+            src={`${config_account}/widget/Mintbase.App.DAOs.Connection`}
+            props={{
+              isDarkModeOn,
+              accountId,
+              localStorageData: connectedDao,
+              setLocalStorageData,
+            }}
+          />
+        )}
         <Toggle onClick={switchChangeHandler} title="Toggle Theme">
           <Widget
             src={"${config_account}/widget/Mintbase.MbIcon"}

diff --git a/apps/Mintbase/widget/Mintbase/Mini/README.md b/apps/Mintbase/widget/Mintbase/Mini/README.md
@@ -1,6 +1,7 @@
 # MintBOS Mini Documentation
 
 ## Overview
+
 A stipped down version of MintBOS without theming, flexible styling classes, no nav or footer - an easy way for users who want to leverage tools like DAO functionalities and nft minters to build on top of what has been done by MintBOS team.
 This guide will help you understand how to add, remove, or modify tabs to create your own preferred version of MintBOS Mini.
 
@@ -24,18 +25,22 @@ The main component of MintBOS Mini is structured as follows:
 
 ## Customizing Tabs
 
-The tabs are defined in the `tabProps` object:
+The tabs are defined in the `tabs` object:
 
 ```javascript
-const tabProps = {
-  tabLabels: [
-    "My Owned NFTs",
-    "My Minted NFTs",
-    "My Stores",
-    "Mint NFT",
-    "Store NFTs",
-    "Deploy Store",
-    "My Activity",
+const tabs = {
+  labels: [
+    { title: "My Owned NFTs" },
+    { title: "My Minted NFTs" },
+    { title: "My Stores" },
+    { title: "Mint NFT" },
+    { title: "Store NFTs" },
+    { title: "Deploy Store" },
+    { title: "My Activity" },
+    {
+      title: "_DAO NFTs",
+      hidden: !connectedDao?.address && !context?.accountId,
+    },
   ],
 };
 ```
@@ -44,7 +49,7 @@ const tabProps = {
 
 To add a new tab:
 
-1. Add a new label to the `tabLabels` array in `tabProps`.
+1. Add a new label to the `labels` array in `tabs`.
 2. Create a new case in the `PageContent` component's switch statement.
 3. Implement the content for the new tab.
 
@@ -53,7 +58,7 @@ Example:
 ```javascript
 // Step 1: Add new label
 const tabProps = {
-  tabLabels: [
+  labels: [
     // ... existing tabs
     "New Custom Tab",
   ],
@@ -79,7 +84,7 @@ const PageContent = () => {
 
 To remove a tab:
 
-1. Remove the label from the `tabLabels` array in `tabProps`.
+1. Remove the label from the `labels` array in `tabProps`.
 2. Remove the corresponding case from the `PageContent` component's switch statement.
 
 ## Modifying Existing Tabs
@@ -117,4 +122,4 @@ case "my-owned-nfts":
 4. Keep the UI responsive by considering mobile views when adding new content.
 5. Utilize the `isDarkModeOn` prop for consistent theming across new components.
 
-By following this guide, you can easily customize MintBOS Mini to include the specific functionalities you need for your project.
+By following this guide, you can easily customize MintBOS Mini to include the specific functionalities you need for your project.
diff --git a/apps/Mintbase/widget/Mintbase/NFT/Index.jsx b/apps/Mintbase/widget/Mintbase/NFT/Index.jsx
@@ -166,6 +166,7 @@ const NFTCard = ({ data, isDarkModeOn, accountId, connectedDao }) => {
     overflow: hidden;
     border-radius: 10px;
     margin: 0 auto;
+    min-width: 320px;
     @media (max-width: 500px) {
       width: 99% !important;
     }