Download off-chain group information

[vplasencia]

Description

The idea is to allow users to save the group data in JSON format.

Implementation idea

Create a new box like the Use API key box in the off-chain group page. The title of the box will be Download group. The description would be something like Download group information in JSON format.. Then there will be a button to the right called Download and when users click on it, they will download the group information. The button will have the same style as the Select All and Deselect buttons.

Different design and text proposals are welcome.

[tanyas-codes]

hey ! @vplasencia ,can i give this a try ?

Also i reckon the download group info will be lenghty so adding a button next to text ,which makes the group info visible can make the page look neat and not so crowded (just like the api enabled button.

Here the gorup info has a lot of fields so only when the user clicks on the enable button,we can make all the info visible?

[vplasencia]

Hey @tanyas-codes yes sure thanks 🤩

The idea was to only click on the button and download the info without showing the info, but if you have an idea to show the info and the Download button is always visible so that users can see that they can download the group info, that's also good. Let me know what design you have in mind.

[vplasencia]

Do you want me to assign you this issue @tanyas-codes ?

[tanyas-codes]

@vplasencia ,yes please do ! I'll create the design locally and then you can suggest the changes/modifications.

[vplasencia]

Done ✅

Sounds great! Thanks.

[aguzmant103]

Hey @tanyas-codes ! Thank you for picking up this issue. Were you able to work on it? Any troubles or work pending?

[aguzmant103]

@tanyas-codes heya, I'm going to unassign this task from you so it's available for anyone to take.

But please let me know if you have progress or need any help to complete it.

[ScottyDavies]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in creating intuitive and user-friendly interfaces that enhance the overall experience for users. My expertise in HTML, CSS, and JavaScript, combined with a deep understanding of UI/UX principles, allows me to develop visually appealing and highly functional applications.

How I plan on tackling this issue

1 UI Design and Mockup:
Start by creating a mockup or wireframe of the new "Download group" box, positioning it on the off-chain group page in a visually appealing and logical manner.
Design the box with a clear title, "Download group", and a concise description, "Download group information in JSON format."
Incorporate the "Download" button on the right side, styled similarly to the existing "Select All" and "Deselect" buttons for consistency.
Ensure the overall design aligns with the Kakarot application's branding and visual identity.
2 HTML Structure:
Create the necessary HTML structure for the "Download group" box, including the title, description, and the download button.
Wrap the content within appropriate semantic HTML elements to maintain a clean and organized codebase.
Utilize classes and IDs to facilitate easy styling and targeting of the elements.
3 CSS Styling:
Apply the appropriate CSS styles to the "Download group" box, ensuring it matches the look and feel of the existing UI elements.
Style the "Download" button to match the design of the "Select All" and "Deselect" buttons, including the hover and active states.
Implement responsive design techniques to ensure the feature adapts well to different screen sizes and devices.
4 JavaScript Functionality:
Add an event listener to the "Download" button to capture the user's click event.
Fetch the group data from the appropriate data source (e.g., the Kakarot API or a local data store).
Convert the group data to a JSON format, either by processing the data on the client-side or by making an API request to the backend.
Trigger the file download process by creating a temporary anchor element, setting the appropriate file properties (e.g., filename, MIME type), and appending it to the document. This will initiate the download for the user.
Remove the temporary anchor element after the download is complete to maintain a clean DOM structure.
5 Error Handling and Feedback:
Implement error handling mechanisms to gracefully handle any issues that may occur during the data fetching or download process.
Provide clear and informative error messages to the user, guiding them on how to troubleshoot or retry the download.
Consider adding progress indicators or loading states to give users feedback on the download progress.
6 Testing and Optimization:
Thoroughly test the "Download group" feature to ensure it functions as expected, with a focus on edge cases and user interactions.
Optimize the performance of the feature, such as caching the group data or leveraging browser caching mechanisms to improve download times.
Gather user feedback and iterate on the design and functionality based on their input, continuously improving the user experience.
7 Documentation and Collaboration:
Document the implementation details, including any relevant APIs or data structures, to facilitate seamless collaboration with the Kakarot team.
Communicate with the backend developers to ensure the frontend implementation aligns with the backend requirements and data formats.
Participate in code reviews and project discussions to ensure the overall solution meets the project's goals and standards.

[vplasencia]

Hey @ScottyDavies! Do you want me to assign you this issue?

[ScottyDavies]

yes, I will start working on it immediately.

[vplasencia]

Hey @ScottyDavies! Done. Thank you. Please, let us know if you have any questions.

[ScottyDavies]

okay thanks

[ScottyDavies]

out of curiosity do contributors get paid? @vplasencia

[vplasencia]

Hey @ScottyDavies not so far.

[uooooo]

@vplasencia Hi! I would like to work on this project, is it still working?

[vplasencia]

Hey! @uooooo! Yes. Would you like me to assign this issue to you?

[uooooo]

@vplasencia Yes, please!

[SIDHARTH20K4]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a web3 developer

[vplasencia]

Hey @uooooo! Thank you. I just assigned the issue to you. Feel free to ask any questions.

[vplasencia]

Hey @SIDHARTH20K4! I just assigned the issue to @uooooo because they asked for it first but feel free to ask for any other good first issue here. Thank you.

[uooooo]

@vplasencia
Thanks for the assign. I tried to make it as simple as the following image, is this ok?

[vplasencia]

Hey @uooooo it looks great 🤩

Thank you very much. Feel free to create the PR.

[uooooo]

@vplasencia Thank you very much. Please check the PR I just created.

#549