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/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` diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx index b95ac0fb..bf52ec31 100644 --- 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 = ({}) => (
- + {context.accountId && ( + + )} { 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. 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; }