You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
5
+
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.
6
6
This guide will help you understand how to add, remove, or modify tabs to create your own preferred version of MintBOS Mini.
7
7
8
+
# Comprehensive MintBOS Mini Developer Documentation
9
+
10
+
## Overview
11
+
12
+
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.
9.[Important Details and Customization Points](#important-details-and-customization-points)
25
+
10.[Best Practices](#best-practices)
26
+
27
+
## File Structure
28
+
29
+
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.
30
+
31
+
## Forking and Configuration
32
+
33
+
To create your own version of MintBOS Mini:
34
+
35
+
1. Fork the file from its original location.
36
+
2. Update the `config_account` variable:
37
+
```javascript
38
+
// Original
39
+
${config_account} ="bos.genadrop.near"
40
+
41
+
// Your custom version
42
+
${config_account} ="your-account.near"
43
+
```
44
+
3. Customize the components, tabs, and functionality as needed.
16
45
17
-
## Application Structure
46
+
## Application Components
18
47
19
-
The main component of MintBOS Mini is structured as follows:
48
+
The main components of MintBOS Mini include:
20
49
21
-
- State management for mode, filters, and selected tab
22
-
- Styled components for UI elements
23
-
- Tab rendering logic
24
-
- Content rendering based on selected tab
50
+
-`Root`: The main container component
51
+
-`Card`: The styled card component for the application content
52
+
-`AppContent`: Styled component for specific app sections
53
+
-`FormSection`: Styled component for form sections
54
+
-`Toggle`: Component for theme toggling
55
+
-`PageContent`: Component that renders content based on selected tab
56
+
57
+
# Comprehensive MintBOS Mini Developer Documentation
25
58
26
59
## Customizing Tabs
27
60
28
-
The tabs are defined in the`tabs` object:
61
+
The tabs are now defined in a`tabs` object with a more complex structure:
29
62
30
63
```javascript
31
64
consttabs= {
@@ -45,30 +78,41 @@ const tabs = {
45
78
};
46
79
```
47
80
81
+
This new structure allows for more flexibility in defining tabs, including the ability to hide tabs based on certain conditions.
82
+
83
+
### Tab Properties
84
+
85
+
- `title`: The display text for the tab
86
+
- `hidden`: (Optional) A boolean or expression that determines whether the tab should be hidden
87
+
48
88
## Adding a New Tab
49
89
50
90
To add a new tab:
51
91
52
-
1. Add a new label to the `labels` array in `tabs`.
53
-
2. Create a new case in the `PageContent` component's switch statement.
54
-
3. Implement the content for the new tab.
92
+
1. Add a new object to the `labels` array in the `tabs` object.
93
+
2. If needed, include a `hidden` property to control the tab's visibility.
94
+
3. Create a new case in the `PageContent` component's switch statement.
95
+
4. Implement the content for the new tab.
55
96
56
97
Example:
57
98
58
99
```javascript
59
-
// Step 1: Add new label
60
-
consttabProps= {
100
+
// Step 1 & 2: Add new tab object
101
+
consttabs= {
61
102
labels: [
62
103
// ... existing tabs
63
-
"New Custom Tab",
104
+
{
105
+
title:"New Custom Tab",
106
+
hidden: someCondition, // Optional: control visibility
107
+
},
64
108
],
65
109
};
66
110
67
-
// Step 2 & 3: Add new case and implement content
111
+
// Step 3 & 4: Add new case and implement content
68
112
constPageContent= () => {
69
113
switch (selectedTab) {
70
114
// ... existing cases
71
-
case"new-custom-tab":
115
+
case"New Custom Tab":
72
116
return (
73
117
<Widget
74
118
src="${config_account}/widget/YourCustomWidget"
@@ -84,42 +128,70 @@ const PageContent = () => {
84
128
85
129
To remove a tab:
86
130
87
-
1. Remove the label from the `labels` array in `tabProps`.
131
+
1. Remove the corresponding object from the `labels` array in the `tabs` object.
88
132
2. Remove the corresponding case from the `PageContent` component's switch statement.
89
133
90
134
## Modifying Existing Tabs
91
135
92
136
To modify an existing tab:
93
137
94
-
1. Locate the case for the tab you want to modify in the `PageContent` component.
95
-
2. Update the content or props as needed.
138
+
1. Locate the tab object in the `labels` array of the `tabs` object.
139
+
2. Update the `title` or add/modify the `hidden` property as needed.
140
+
3. If necessary, update the corresponding case in the `PageContent` component.
hidden:!context.accountId, // Hide this tab if user is not logged in
148
+
}
115
149
```
116
150
151
+
## Handling Conditional Tabs
152
+
153
+
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:
1. Ensure that the conditions for `hidden` are properly defined and tested.
165
+
2. Update the conditions if the requirements for showing/hiding the tab change.
166
+
3. Remember to handle the case in the `PageContent` component, even if the tab is currently hidden (to support future visibility).
167
+
168
+
## Important Details and Customization Points
169
+
170
+
1. **Theme Toggling**: The application supports dark and light modes. Customize the `Toggle` component and `switchChangeHandler` function to adjust theming behavior.
171
+
172
+
2. **Local Storage**: The application uses local storage for persisting data. Customize the `LOCALSTORAGE_KEY` and related functions to manage your app's state.
173
+
174
+
3. **Styling**: The application uses styled-components. Customize the styled components (`Root`, `Card`, `AppContent`, etc.) to adjust the look and feel of your app.
175
+
176
+
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:
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.
183
+
184
+
6. **Error Handling**: Implement proper error handling in the `catch` blocks throughout the application to improve user experience and debugging.
185
+
186
+
7. **Responsive Design**: The application includes some responsive design elements. Ensure that any customizations or new features maintain responsiveness across different device sizes.
187
+
117
188
## Best Practices
118
189
119
190
1. Maintain consistency in naming conventions for tab labels and case statements.
120
191
2. Ensure that new tabs follow the existing pattern of using Widget components.
121
192
3. Test thoroughly after making changes to ensure all functionalities work as expected.
122
193
4. Keep the UI responsive by considering mobile views when adding new content.
123
194
5. Utilize the `isDarkModeOn` prop for consistent theming across new components.
124
-
125
-
By following this guide, you can easily customize MintBOS Mini to include the specific functionalities you need for your project.
195
+
6. When adding new features, consider their impact on performance and load time.
196
+
7. Document any significant changes or additions to help future developers understand your customizations.
197
+
8. Regularly update dependencies and check for compatibility with the latest Mintbase ecosystem updates.
0 commit comments