From 2b996a1d0b682f2b0bdc14420ffd81ce78bc9782 Mon Sep 17 00:00:00 2001 From: Joseph Knecht <83087510+JosephKnecht-lab@users.noreply.github.com> Date: Wed, 20 Dec 2023 16:19:36 +0100 Subject: [PATCH 1/7] initial commit --- applications/si-front-end-template.md | 145 ++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 applications/si-front-end-template.md diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md new file mode 100644 index 00000000000..278bcd45c1b --- /dev/null +++ b/applications/si-front-end-template.md @@ -0,0 +1,145 @@ +# FrontRevamp: A Material Design Makeover for Substrate Front-End Template + + +- **Team Name:** BinaryMinds +- **Payment Address:** Fiat 20.12.2023 +- **[Level](https://github.com/w3f/Grants-Program/tree/master#level_slider-levels):** 1 + + + +## Project Overview :page_facing_up: + +Our project seeks to elevate the user experience and design aesthetics of the [substrate-front-end-template](https://github.com/substrate-developer-hub/substrate-front-end-template) by transitioning to [Material Design UI](https://m3.material.io/). With the growing emphasis on user-centric interfaces, the adoption of Material Design principles will not only enhance the visual appeal of Substrate but also streamline navigation and improve overall usability. This should enable developers to build more appealing application, without applying too much effort. By reimagining and implementing Material Design components, we aim to create a intuitive and responsive interface that aligns seamlessly with modern design standards. +### Overview + +This project aims to enhance the user experience of the [substrate-front-end-template](https://github.com/substrate-developer-hub/substrate-front-end-template) by migrating to Material Design UI, ensuring a visually appealing, intuitive, and modern interface that aligns with contemporary design standards. + +### Project Details + +The project scope encompasses a comprehensive overhaul of the Web3 Foundation's React [substrate-front-end-template](https://github.com/substrate-developer-hub/substrate-front-end-template), focusing on the adoption of Material Design UI principles. This includes redesigning key user interface elements, such as navigation menus, buttons, forms, and overall layout, to align with the Material Design aesthetic. The scope also involves the development and integration of Material Design components and patterns, ensuring a cohesive and consistent user experience across the platform. + +The project will leverage the latest technologies and frameworks compatible with React, such as Material-UI, to implement these design changes efficiently. Additionally, the scope involves rigorous testing to guarantee compatibility, responsiveness, and accessibility across various devices and browsers. This project aims to not only meet the WEB3 Foundation's current needs but also establish a foundation for future scalability and adaptability to emerging web technologies. + +![Material Kit](https://i.imgur.com/PSQgjHE.png) +![Material Kit](https://i.imgur.com/1PqKkbO.png) + +### Ecosystem Fit + +The proposed project to rewrite the [substrate-front-end-template](https://github.com/substrate-developer-hub/substrate-front-end-template) using Material Design UI has several implications for enabling developers to build better UI and benefiting the Substrate ecosystem. + +1. **Enhanced User Experience**: By adopting Material Design principles, developers gain access to a well-established and user-tested set of design guidelines. + +2. **Accelerated Development**: Material Design provides developers with pre-designed components and styles. This accelerates development cycles, allowing developers to focus more on refining features and functionality rather than spending time on the nitty-gritty details of UI design. + +3. **Responsive Design**: Material Design inherently encourages responsive design practices. This means the UI will adapt seamlessly to various screen sizes and devices, providing a consistent and user-friendly experience across desktops, tablets, and mobile devices. + +4. **Accessibility Standards**: Material Design is designed with accessibility in mind, ensuring that the UI is usable by individuals with disabilities. + +5. **Community Support**: Material Design has a vast community of designers and developers contributing to its evolution. By aligning with this design language, developers can tap into a wealth of resources, forums, and libraries, fostering collaboration and knowledge exchange within the broader development community. + +6. **Adoption and Attraction of Talent**: A modern, well-designed UI can make the Substrate ecosystem more attractive to developers and users. A visually appealing and user-friendly interface can play a crucial role in attracting new talent and encouraging adoption, thereby strengthening the Substrate ecosystem as a whole. + + +## Team :busts_in_silhouette: + + +### Team members + + +- Team member: Igor Stojanov + +### Contact + +- **Contact Name:** Igor Stojanov +- **Contact Email:** contact@igorstojanov.com +- **Website:** https://igorstojanov.com + +### Legal Structure + +- **Registered Address:** N/A +- **Registered Legal Entity:** N/A + +### Team's experience + +Igor is Software Architect, currently based in Eindhoven, The Netherlands. Born in Macedonia, finished undergraduate studies in USA. Worked for large multinational organizations such as Philips, Signify, TYMLEZ and BearingPoint. + +Igor Stojanov is also the founder of UniversalDot Foundation which aims to create software applications for the decentralized internet. As such, the UniversalDot Foundation is recipient of [WEB3 Grant)(https://github.com/w3f/Grants-Program/pull/714) previously. + +The team that was previously assembled is no longer active, and this grant is to be completed as private person. + +### Team Code Repos + +https://github.com/stojanov-igor + +### Team LinkedIn Profiles + +https://www.linkedin.com/in/igor-stojanov-96364ba/ + + +## Development Status :open_book: + + +## Development Roadmap :nut_and_bolt: + + + +### Overview + +- **Total Estimated Duration:** 2 months +- **Full-Time Equivalent (FTE):** 1 FTE +- **Total Costs:** 10,000 USD + +### Milestone 1 — Design & Initial code + +- **Estimated duration:** 1 month +- **FTE:** 1 +- **Costs:** 5,000 USD + +> :exclamation: **The default deliverables 0a-0d below are mandatory for all milestones**, and deliverable 0e at least for the last one. + +| Number | Deliverable | Specification | +| -----: | ----------- | ------------- | +| **0a.** | License | Apache 2.0 | +| **0b.** | Documentation | We will provide both **inline documentation** of the code | +| **0c.** | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. | +| 1. | Figma Design | Figma Design of the new front-end using Material Design UI Elements | +| 2. | Menu Header | UI element that replaces existing menu items | +| 3. | Footer | New Element for implementing a new UI Element footer | +| 4. | Polkadot Extension| Ensure working connection with Polkadot extension | +| 5. | Light/Dark Mode| Enable styling switch to dark and light mode | + + + +### Milestone 2 — Full implementation + +- **Estimated Duration:** 1 month +- **FTE:** 1 +- **Costs:** 5,000 USD + +| Number | Deliverable | Specification | +| -----: | ----------- | ------------- | +| **0a.** | License | Apache 2.0 | +| **0b.** | Documentation | We will provide both **inline documentation** of the code | +| **0c.** | Testing and Testing Guide | Core functions will be fully covered by comprehensive unit tests to ensure functionality and robustness. In the guide, we will describe how to run these tests. | +| **0d.** | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. | +| 0e. | Article | We will publish an **article**/workshop that explains [...] (what was done/achieved as part of the grant). (Content, language, and medium should reflect your target audience described above.) | +| 1. | Cards | Implement dashboard cards with basic statistics about the chain. | +| 2. | Table| Add table that holds Account balances that can be loaded from Polkadot Extension | +| 3. | Transfer Module | Simple module to transfer tokens from one acount to another | +| 4. | Upgrade Runtime Module| EEnsure users can upload wasm File from the UI | +| 5. | Pallet Interactor | Module that allows interaction with extrinsics and queries | +| 6. | Event Module | Displaying latest events that happens on-chain + +... + + +## Future Plans + + +- Build more UI pages/components that allow developers to build better dApps with improved user experience. + + +## Additional Information :heavy_plus_sign: + +**How did you hear about the Grants Program?** Web3 Foundation Website + From 13f03aea59d619952b6004c2680f9b73a68626ca Mon Sep 17 00:00:00 2001 From: Joseph Knecht <83087510+JosephKnecht-lab@users.noreply.github.com> Date: Wed, 20 Dec 2023 16:32:44 +0100 Subject: [PATCH 2/7] minor updates --- applications/si-front-end-template.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md index 278bcd45c1b..e4966606ac9 100644 --- a/applications/si-front-end-template.md +++ b/applications/si-front-end-template.md @@ -2,7 +2,7 @@ - **Team Name:** BinaryMinds -- **Payment Address:** Fiat 20.12.2023 +- **Payment Address:** Fiat 20.12.2023, 16.32 - **[Level](https://github.com/w3f/Grants-Program/tree/master#level_slider-levels):** 1 @@ -63,7 +63,7 @@ The proposed project to rewrite the [substrate-front-end-template](https://githu Igor is Software Architect, currently based in Eindhoven, The Netherlands. Born in Macedonia, finished undergraduate studies in USA. Worked for large multinational organizations such as Philips, Signify, TYMLEZ and BearingPoint. -Igor Stojanov is also the founder of UniversalDot Foundation which aims to create software applications for the decentralized internet. As such, the UniversalDot Foundation is recipient of [WEB3 Grant)(https://github.com/w3f/Grants-Program/pull/714) previously. +Igor Stojanov is also the founder of UniversalDot Foundation which aims to create software applications for the decentralized internet. As such, the UniversalDot Foundation is recipient of [WEB3 Grant](https://github.com/w3f/Grants-Program/pull/714) previously. The team that was previously assembled is no longer active, and this grant is to be completed as private person. @@ -100,7 +100,7 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | Number | Deliverable | Specification | | -----: | ----------- | ------------- | | **0a.** | License | Apache 2.0 | -| **0b.** | Documentation | We will provide both **inline documentation** of the code | +| **0b.** | Documentation | We will provide **inline documentation** of the code | | **0c.** | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. | | 1. | Figma Design | Figma Design of the new front-end using Material Design UI Elements | | 2. | Menu Header | UI element that replaces existing menu items | @@ -119,12 +119,12 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | Number | Deliverable | Specification | | -----: | ----------- | ------------- | | **0a.** | License | Apache 2.0 | -| **0b.** | Documentation | We will provide both **inline documentation** of the code | +| **0b.** | Documentation | We will provide **inline documentation** of the code | | **0c.** | Testing and Testing Guide | Core functions will be fully covered by comprehensive unit tests to ensure functionality and robustness. In the guide, we will describe how to run these tests. | | **0d.** | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. | | 0e. | Article | We will publish an **article**/workshop that explains [...] (what was done/achieved as part of the grant). (Content, language, and medium should reflect your target audience described above.) | -| 1. | Cards | Implement dashboard cards with basic statistics about the chain. | -| 2. | Table| Add table that holds Account balances that can be loaded from Polkadot Extension | +| 1. | Cards Module | Implement dashboard cards with basic statistics about the blockchain. | +| 2. | Table Module| Add table that holds Account balances that can be loaded from Polkadot Extension | | 3. | Transfer Module | Simple module to transfer tokens from one acount to another | | 4. | Upgrade Runtime Module| EEnsure users can upload wasm File from the UI | | 5. | Pallet Interactor | Module that allows interaction with extrinsics and queries | From 07a96c1dc72e7ee01cb9c703d401c7576180748d Mon Sep 17 00:00:00 2001 From: Joseph Knecht <83087510+JosephKnecht-lab@users.noreply.github.com> Date: Sat, 23 Dec 2023 19:49:27 +0100 Subject: [PATCH 3/7] Update based on comments --- applications/si-front-end-template.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md index e4966606ac9..b30a6519631 100644 --- a/applications/si-front-end-template.md +++ b/applications/si-front-end-template.md @@ -1,7 +1,7 @@ # FrontRevamp: A Material Design Makeover for Substrate Front-End Template -- **Team Name:** BinaryMinds +- **Team Name:** IgorStojanov - **Payment Address:** Fiat 20.12.2023, 16.32 - **[Level](https://github.com/w3f/Grants-Program/tree/master#level_slider-levels):** 1 @@ -23,6 +23,10 @@ The project will leverage the latest technologies and frameworks compatible with ![Material Kit](https://i.imgur.com/PSQgjHE.png) ![Material Kit](https://i.imgur.com/1PqKkbO.png) +#### Mockup + +![Material Kit](https://i.imgur.com/vRgon2y.jpg) + ### Ecosystem Fit The proposed project to rewrite the [substrate-front-end-template](https://github.com/substrate-developer-hub/substrate-front-end-template) using Material Design UI has several implications for enabling developers to build better UI and benefiting the Substrate ecosystem. @@ -57,7 +61,7 @@ The proposed project to rewrite the [substrate-front-end-template](https://githu ### Legal Structure - **Registered Address:** N/A -- **Registered Legal Entity:** N/A +- **Registered Legal Entity:** Individual ### Team's experience @@ -102,7 +106,6 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | **0a.** | License | Apache 2.0 | | **0b.** | Documentation | We will provide **inline documentation** of the code | | **0c.** | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. | -| 1. | Figma Design | Figma Design of the new front-end using Material Design UI Elements | | 2. | Menu Header | UI element that replaces existing menu items | | 3. | Footer | New Element for implementing a new UI Element footer | | 4. | Polkadot Extension| Ensure working connection with Polkadot extension | From 513f05c0ca1f6c37dc287e1403bd28c78df5b316 Mon Sep 17 00:00:00 2001 From: Stojanov Igor <83087510+stojanov-igor@users.noreply.github.com> Date: Wed, 10 Jan 2024 15:15:03 +0100 Subject: [PATCH 4/7] Update applications/si-front-end-template.md Co-authored-by: S E R A Y A --- applications/si-front-end-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md index b30a6519631..1176ee0f043 100644 --- a/applications/si-front-end-template.md +++ b/applications/si-front-end-template.md @@ -129,7 +129,7 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | 1. | Cards Module | Implement dashboard cards with basic statistics about the blockchain. | | 2. | Table Module| Add table that holds Account balances that can be loaded from Polkadot Extension | | 3. | Transfer Module | Simple module to transfer tokens from one acount to another | -| 4. | Upgrade Runtime Module| EEnsure users can upload wasm File from the UI | +| 4. | Upgrade Runtime Module| Ensure users can upload a wasm File from the UI that allows them to upgrade their runtime | | 5. | Pallet Interactor | Module that allows interaction with extrinsics and queries | | 6. | Event Module | Displaying latest events that happens on-chain From a83d2c0e7d2cb886414b833c540c3c66afb01ba1 Mon Sep 17 00:00:00 2001 From: Stojanov Igor <83087510+stojanov-igor@users.noreply.github.com> Date: Wed, 10 Jan 2024 15:15:30 +0100 Subject: [PATCH 5/7] Update applications/si-front-end-template.md Co-authored-by: S E R A Y A --- applications/si-front-end-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md index 1176ee0f043..0fa792fdf34 100644 --- a/applications/si-front-end-template.md +++ b/applications/si-front-end-template.md @@ -108,7 +108,7 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | **0c.** | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. | | 2. | Menu Header | UI element that replaces existing menu items | | 3. | Footer | New Element for implementing a new UI Element footer | -| 4. | Polkadot Extension| Ensure working connection with Polkadot extension | +| 4. | Polkadot Extension | Ensure working connection with Polkadot extension | | 5. | Light/Dark Mode| Enable styling switch to dark and light mode | From c5d67dc018fe8e04fef44500c93791d2a75619ff Mon Sep 17 00:00:00 2001 From: Stojanov Igor <83087510+stojanov-igor@users.noreply.github.com> Date: Wed, 10 Jan 2024 15:15:56 +0100 Subject: [PATCH 6/7] Update applications/si-front-end-template.md Co-authored-by: S E R A Y A --- applications/si-front-end-template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md index 0fa792fdf34..d7b0e0fb2b7 100644 --- a/applications/si-front-end-template.md +++ b/applications/si-front-end-template.md @@ -109,7 +109,7 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | 2. | Menu Header | UI element that replaces existing menu items | | 3. | Footer | New Element for implementing a new UI Element footer | | 4. | Polkadot Extension | Ensure working connection with Polkadot extension | -| 5. | Light/Dark Mode| Enable styling switch to dark and light mode | +| 5. | Light/Dark Mode | Enable styling switch to dark and light mode | From 9d2c2203f256a1602d0e5c65557afd8b91088f8f Mon Sep 17 00:00:00 2001 From: Joseph Knecht <83087510+JosephKnecht-lab@users.noreply.github.com> Date: Mon, 22 Jan 2024 11:33:02 +0100 Subject: [PATCH 7/7] add typescript migration --- applications/si-front-end-template.md | 1 + 1 file changed, 1 insertion(+) diff --git a/applications/si-front-end-template.md b/applications/si-front-end-template.md index b30a6519631..3e8ab0aa76d 100644 --- a/applications/si-front-end-template.md +++ b/applications/si-front-end-template.md @@ -110,6 +110,7 @@ https://www.linkedin.com/in/igor-stojanov-96364ba/ | 3. | Footer | New Element for implementing a new UI Element footer | | 4. | Polkadot Extension| Ensure working connection with Polkadot extension | | 5. | Light/Dark Mode| Enable styling switch to dark and light mode | +| 6. | Typescript Migration | Migration of current Javascript implementation to Typescript |