From 313bfb276b1ab785a2298df6ec588987f92e2f56 Mon Sep 17 00:00:00 2001 From: Jiku Godwill Nsanwi Date: Mon, 30 Sep 2024 13:56:23 +0100 Subject: [PATCH] Refactor Mintbase: Update tab labels in Mintbase Mini --- .../App/ContractProfilePage/Mint/Index.jsx | 10 +- apps/Mintbase/widget/Mintbase/Mini/README.md | 158 +++++++++++++----- 2 files changed, 123 insertions(+), 45 deletions(-) diff --git a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx index f6f2920e..b3751f25 100644 --- a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx +++ b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx @@ -74,6 +74,7 @@ const MintAmount = styled.div` color: #fff; } .max { + color: inherit; opacity: 0.7; } } @@ -272,7 +273,7 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => { const [splits, setSplits] = useState([]); const [img, setImg] = useState(null); const owner = context.accountId; - + const uploadFile = (files) => { const file = files[0]; setLoadingUpload(true); @@ -414,7 +415,12 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => {
-

+

Amount to mint

(max 50)

*

diff --git a/apps/Mintbase/widget/Mintbase/Mini/README.md b/apps/Mintbase/widget/Mintbase/Mini/README.md index 2488c461..247d7ff6 100644 --- a/apps/Mintbase/widget/Mintbase/Mini/README.md +++ b/apps/Mintbase/widget/Mintbase/Mini/README.md @@ -2,30 +2,63 @@ ## 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. +MintBOS Mini is a customizable, single-file 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. +# Comprehensive MintBOS Mini Developer Documentation + +## Overview + +MintBOS Mini is a customizable, single-file React-based application that provides various functionalities for interacting with the Mintbase ecosystem. This guide will help you understand how to fork, customize, and extend the application to create your own preferred version of MintBOS Mini. + ## Table of Contents -1. [Application Structure](#application-structure) -2. [Customizing Tabs](#customizing-tabs) -3. [Adding a New Tab](#adding-a-new-tab) -4. [Removing a Tab](#removing-a-tab) -5. [Modifying Existing Tabs](#modifying-existing-tabs) -6. [Best Practices](#best-practices) +1. [File Structure](#file-structure) +2. [Forking and Configuration](#forking-and-configuration) +3. [Application Components](#application-components) +4. [Customizing Tabs](#customizing-tabs) +5. [Adding a New Tab](#adding-a-new-tab) +6. [Removing a Tab](#removing-a-tab) +7. [Modifying Existing Tabs](#modifying-existing-tabs) +8. [Creating Custom Tab Ribbons](#creating-custom-tab-ribbons) +9. [Important Details and Customization Points](#important-details-and-customization-points) +10. [Best Practices](#best-practices) + +## File Structure + +MintBOS Mini is designed as a single file for easy forking and customization. The file contains all necessary components, styling, and logic for the application. + +## Forking and Configuration + +To create your own version of MintBOS Mini: + +1. Fork the file from its original location. +2. Update the `config_account` variable: + ```javascript + // Original + ${config_account} = "bos.genadrop.near" + + // Your custom version + ${config_account} = "your-account.near" + ``` +3. Customize the components, tabs, and functionality as needed. -## Application Structure +## Application Components -The main component of MintBOS Mini is structured as follows: +The main components of MintBOS Mini include: -- State management for mode, filters, and selected tab -- Styled components for UI elements -- Tab rendering logic -- Content rendering based on selected tab +- `Root`: The main container component +- `Card`: The styled card component for the application content +- `AppContent`: Styled component for specific app sections +- `FormSection`: Styled component for form sections +- `Toggle`: Component for theme toggling +- `PageContent`: Component that renders content based on selected tab + +# Comprehensive MintBOS Mini Developer Documentation ## Customizing Tabs -The tabs are defined in the `tabs` object: +The tabs are now defined in a `tabs` object with a more complex structure: ```javascript const tabs = { @@ -45,30 +78,41 @@ const tabs = { }; ``` +This new structure allows for more flexibility in defining tabs, including the ability to hide tabs based on certain conditions. + +### Tab Properties + +- `title`: The display text for the tab +- `hidden`: (Optional) A boolean or expression that determines whether the tab should be hidden + ## Adding a New Tab To add a new tab: -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. +1. Add a new object to the `labels` array in the `tabs` object. +2. If needed, include a `hidden` property to control the tab's visibility. +3. Create a new case in the `PageContent` component's switch statement. +4. Implement the content for the new tab. Example: ```javascript -// Step 1: Add new label -const tabProps = { +// Step 1 & 2: Add new tab object +const tabs = { labels: [ // ... existing tabs - "New Custom Tab", + { + title: "New Custom Tab", + hidden: someCondition, // Optional: control visibility + }, ], }; -// Step 2 & 3: Add new case and implement content +// Step 3 & 4: Add new case and implement content const PageContent = () => { switch (selectedTab) { // ... existing cases - case "new-custom-tab": + case "New Custom Tab": return ( { To remove a tab: -1. Remove the label from the `labels` array in `tabProps`. +1. Remove the corresponding object from the `labels` array in the `tabs` object. 2. Remove the corresponding case from the `PageContent` component's switch statement. ## Modifying Existing Tabs To modify an existing tab: -1. Locate the case for the tab you want to modify in the `PageContent` component. -2. Update the content or props as needed. +1. Locate the tab object in the `labels` array of the `tabs` object. +2. Update the `title` or add/modify the `hidden` property as needed. +3. If necessary, update the corresponding case in the `PageContent` component. -Example: +Example of modifying a tab's visibility: ```javascript -case "my-owned-nfts": - return ( - - ); +{ + title: "My Activity", + hidden: !context.accountId, // Hide this tab if user is not logged in +} ``` +## Handling Conditional Tabs + +The new structure allows for conditional rendering of tabs. For example, the "_DAO NFTs" tab is hidden unless there's a connected DAO or the user is logged in: + +```javascript +{ + title: "_DAO NFTs", + hidden: !connectedDao?.address && !context?.accountId, +} +``` + +When working with conditional tabs: + +1. Ensure that the conditions for `hidden` are properly defined and tested. +2. Update the conditions if the requirements for showing/hiding the tab change. +3. Remember to handle the case in the `PageContent` component, even if the tab is currently hidden (to support future visibility). + +## Important Details and Customization Points + +1. **Theme Toggling**: The application supports dark and light modes. Customize the `Toggle` component and `switchChangeHandler` function to adjust theming behavior. + +2. **Local Storage**: The application uses local storage for persisting data. Customize the `LOCALSTORAGE_KEY` and related functions to manage your app's state. + +3. **Styling**: The application uses styled-components. Customize the styled components (`Root`, `Card`, `AppContent`, etc.) to adjust the look and feel of your app. + +4. **Widget Integration**: The application uses a Widget system. When adding new tabs or features, create and integrate new Widgets using the `VM.require` syntax: + + ```javascript + const { YourWidget } = VM.require("${config_account}/widget/Your.Widget.Path"); + ``` + +5. **State Management**: The application uses React's `useState` for state management. Consider implementing more robust state management (e.g., Context API or Redux) for more complex applications. + +6. **Error Handling**: Implement proper error handling in the `catch` blocks throughout the application to improve user experience and debugging. + +7. **Responsive Design**: The application includes some responsive design elements. Ensure that any customizations or new features maintain responsiveness across different device sizes. + ## Best Practices 1. Maintain consistency in naming conventions for tab labels and case statements. @@ -121,5 +192,6 @@ case "my-owned-nfts": 3. Test thoroughly after making changes to ensure all functionalities work as expected. 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. +6. When adding new features, consider their impact on performance and load time. +7. Document any significant changes or additions to help future developers understand your customizations. +8. Regularly update dependencies and check for compatibility with the latest Mintbase ecosystem updates. \ No newline at end of file