From 949fb65283ee390a91bef7bf4ba3d98b95e1269a Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Mon, 30 Sep 2024 05:31:48 +0100 Subject: [PATCH 1/4] fixed width for tab filter icon --- apps/Mintbase/widget/Mintbase/MbTabs.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/Mintbase/widget/Mintbase/MbTabs.jsx b/apps/Mintbase/widget/Mintbase/MbTabs.jsx index 4e77d678..bcb2c224 100644 --- 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` From c413393eb6c99b5f10e657c4db102756fb38d4ad Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Mon, 30 Sep 2024 05:48:21 +0100 Subject: [PATCH 2/4] Added checks for DAO address and signin --- apps/Mintbase/widget/Mintbase/Mini/Index.jsx | 43 ++++++++++---------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx index b95ac0fb..45e48cf0 100644 --- a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx +++ b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx @@ -45,19 +45,18 @@ const { MbInputField } = VM.require( 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"}, + { title: "My Owned NFTs" }, + { title: "My Minted NFTs" }, + { title: "My Stores" }, + { title: "Mint NFT" }, + { title: "Store NFTs" }, + { title: "Deploy Store" }, + { title: "My Activity" }, ], }; - -if (connectedDao?.address) { - actualTabs.tabLabels.push({title: "DAO NFTs"}) +if (connectedDao?.address && context?.accountId) { + actualTabs.tabLabels.push({ title: "_DAO NFTs" }); } const hiddenTabs = actualTabs.tabLabels @@ -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 { @@ -670,15 +669,17 @@ const Index = ({}) => (
- + {context.accountId && ( + + )} Date: Mon, 30 Sep 2024 06:07:57 +0100 Subject: [PATCH 3/4] Refactor Mintbase: Update tab labels in Mintbase Mini --- apps/Mintbase/widget/Mintbase/Mini/Index.jsx | 13 ++++---- apps/Mintbase/widget/Mintbase/Mini/README.md | 33 +++++++++++--------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx index 45e48cf0..1467bf51 100644 --- a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx +++ b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx @@ -43,8 +43,8 @@ const { MbInputField } = VM.require( MbInputField: () => <>, }; -const actualTabs = { - tabLabels: [ +const tabs = { + labels: [ { title: "My Owned NFTs" }, { title: "My Minted NFTs" }, { title: "My Stores" }, @@ -52,14 +52,15 @@ const actualTabs = { { title: "Store NFTs" }, { title: "Deploy Store" }, { title: "My Activity" }, + {title: "_DAO NFTs", hidden: !connectedDao?.address && !context?.accountId } ], }; -if (connectedDao?.address && context?.accountId) { - actualTabs.tabLabels.push({ title: "_DAO NFTs" }); -} +// if (connectedDao?.address && context?.accountId) { +// tabs.labels.push({ title: "_DAO NFTs" }); +// } -const hiddenTabs = actualTabs.tabLabels +const hiddenTabs = tabs.labels .filter((tab) => !tab.hidden) .map((tab) => tab.title); const tabProps = { tabLabels: hiddenTabs }; diff --git a/apps/Mintbase/widget/Mintbase/Mini/README.md b/apps/Mintbase/widget/Mintbase/Mini/README.md index d1a2ca82..2488c461 100644 --- 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. \ No newline at end of file +By following this guide, you can easily customize MintBOS Mini to include the specific functionalities you need for your project. From f391a442e1b74e2c26e104fccff019cd3e9e51fe Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Mon, 30 Sep 2024 06:36:53 +0100 Subject: [PATCH 4/4] Refactor Mintbase: Update tab labels in Mintbase Mini --- .../App/ContractProfilePage/Index.jsx | 23 ++++++++++--------- apps/Mintbase/widget/Mintbase/Mini/Index.jsx | 13 ++++++----- apps/Mintbase/widget/Mintbase/NFT/Index.jsx | 1 + 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Index.jsx b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Index.jsx index a280c38d..9d1b2048 100644 --- 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/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx index 1467bf51..bf52ec31 100644 --- a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx +++ b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx @@ -52,14 +52,13 @@ const tabs = { { title: "Store NFTs" }, { title: "Deploy Store" }, { title: "My Activity" }, - {title: "_DAO NFTs", hidden: !connectedDao?.address && !context?.accountId } + { + title: "_DAO NFTs", + hidden: !connectedDao?.address && !context?.accountId, + }, ], }; -// if (connectedDao?.address && context?.accountId) { -// tabs.labels.push({ title: "_DAO NFTs" }); -// } - const hiddenTabs = tabs.labels .filter((tab) => !tab.hidden) .map((tab) => tab.title); @@ -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, }} /> diff --git a/apps/Mintbase/widget/Mintbase/NFT/Index.jsx b/apps/Mintbase/widget/Mintbase/NFT/Index.jsx index 941584cf..a201c5f5 100644 --- 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; }