Implement A Settings Component

[Oshioke-Salaki]

Description:

Develop a settings component as per the design provided in the FIGMA FILE along with all it’s variants. This component enables a user to change the language, explorer and theme of the dapp.

Requirements:

• Design: Follow the provided Figma design precisely for both light and dark mode. Ensure that the component is fully responsive across different screen sizes.
• Style Guide: Adhere strictly to the project’s existing style guide for consistency in UI and UX.
• Functionality: The component should be fully functional, allowing users to seamlessly switch networks.

After building the component, create a sub-route in the preview route for the component and display each of it’s variant for easy testing.

Guidance:

There is an already implemented Connect Button component which can serve as a reference for styling, functionality and previewing.

Note:

No other external dependencies should be installed other than the ones already provided.

[martinvibes]

hello @Oshioke-Salaki i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

Follow the Figma design: Create the component exactly as shown in the Figma file, making sure it works well in both light and dark modes, and is fully responsive across different devices.

Component features: The settings component should allow users to:

Change the language Switch explorers (used to view blockchain data) Toggle the theme (light/dark mode)

Use the style guide: Ensure the component looks and behaves consistently with the rest of the app by following the project's existing style guide. Reference the Connect Button component for guidance on styling and functionality.

Add functionality: Make sure the component works properly, allowing users to easily change settings like language, theme, and explorer.

Testing: Create a sub-route to display all component variants (light/dark mode, different settings) for easy testing.

No new dependencies: Only use the dependencies already available in the project.

[gidson5]

@Oshioke-Salaki I'll like to work on this, this is my first time on Od hack

[CollinsC1O]

Hi @Oshioke-Salaki I will love to jump on this. to achieve this I will first check the already implemented Connect Button component which can serve as a reference for styling, functionality and previewing. -Analyze Figma Design -Create Settings Component -Follow Style Guide -Add Functionality -Routing & Preview -Testing & Validation

[petersdt]

@Oshioke-Salaki kindly assign me

1. Analyze the Figma Design by thoroughly review the Figma design
2. Set Up the Environment using npm install
3. Structure the Settings Component Inside your components directory, create a new folder and file for the Settings
4. Apply Figma Design Styling Incorporate styles from the Figma design for light and dark modes
5. Make the Component Responsive Use media queries in the CSS file to ensure responsiveness across devices.
6. Handle Light and Dark Mode Use a theme state to dynamically switch between light and dark modes.
7. Test Across Variants Toggle the theme between light and dark, ensuring styles adjust correctly for both modes.

[Kaminar-i]

@Oshioke-Salaki can i get this issue

To solve this issue, here’s the approach I'd take:

1. Design Implementation:

Use the provided Figma file to extract the design elements and ensure precise adherence for both light and dark modes. Ensure the component is responsive by using CSS media queries or a utility-first framework like Tailwind, ensuring it adjusts well across all screen sizes.

2. Styling Consistency:

Follow the project's style guide to maintain consistency with other components. Reference the Connect Button component for styling cues and ensure your component integrates seamlessly.

3. Functionality:

Implement functionality for switching language, explorer, and theme. This could involve: Language selection dropdown or buttons (with localization support). Theme toggler for dark and light modes. Network switcher for different explorers (e.g., Ethereum, Polygon). Ensure that changes are saved (e.g., to local storage) or handled dynamically in the app's state.

4. Sub-route for Preview:

Create a sub-route under the preview route to showcase all the variants of the settings component. Display both light and dark mode options and ensure the component can be easily tested. By breaking it down this way, I can ensure that the component meets design, functionality, and responsiveness requirements.

This is my very first issue as a new contributor, and I couldn’t be more excited to get started! I’m committed to making sure everything is done perfectly, from design to functionality. Thank you for this opportunity

[onlydustapp[bot]]

Hi @Kaminar-i! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @martinvibes! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[NueloSE]

@Oshioke-Salaki kindly assign me

[onlydustapp[bot]]

Hi @gidson5! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @NueloSE! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @petersdt! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @CollinsC1O! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[dev-chinx]

hello @Oshioke-Salaki i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

To solve this issue, here’s the approach I'd take:

Design Implementation: Use the provided Figma file to extract the design elements and ensure precise adherence for both light and dark modes. Ensure the component is responsive by using CSS media queries or a utility-first framework like Tailwind, ensuring it adjusts well across all screen sizes.

Styling Consistency: Follow the project's style guide to maintain consistency with other components. Reference the Connect Button component for styling cues and ensure your component integrates seamlessly.

Functionality: Implement functionality for switching language, explorer, and theme. This could involve: Language selection dropdown or buttons (with localization support). Theme toggler for dark and light modes. Network switcher for different explorers (e.g., Ethereum, Polygon). Ensure that changes are saved (e.g., to local storage) or handled dynamically in the app's state.

[onlydustapp[bot]]

Hi @dev-chinx! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Kaminar-i! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Kaminar-i! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Kaminar-i! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Kaminar-i! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @martinvibes! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[Dprof-in-tech]

Hey chief @Oshioke-Salaki , I am Dprof-in-tech, an experienced Full Stack Blockchain Developer and I am excited to contribute my skills to the {project name} project in this ODHACK 8. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Rust and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 34 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. Due to my web2 experience, i am skilled in building out pixel perfect UI components. I would love to contribute to this project by solving this issue. Below is a link to my OnlyDust public profile. https://app.onlydust.com/u/Dprof-in-tech

HOW I PLAN TO SOLVE THIS ISSUE

I will begin by reviewing the Figma design and style guide:

I will thoroughly examine the Figma design to understand the layout, color schemes, fonts, and responsiveness required for both light and dark modes. I will consult the project’s style guide to ensure that the component's UI and UX are consistent with the rest of the application. I will set up the Settings component structure:

I will create the base structure of the Settings component using React and Tailwind CSS (or the existing CSS framework) to follow the design exactly. This structure will accommodate settings for language, explorer, and theme options, ensuring a user-friendly layout and navigation. I will ensure full responsiveness:

Using the project's responsive design strategy, I will make sure the Settings component is fully responsive across mobile, tablet, and desktop screens. I will use media queries and flexbox/grid layouts to adapt the component's layout and spacing for different screen sizes. I will implement light and dark modes:

I will integrate light/dark mode support into the Settings component, matching the theme-switching mechanism already established in the project. This will allow users to toggle between light and dark themes dynamically, with immediate feedback on the component's appearance. I will add the language, explorer, and theme change functionality:

Language Change: I will implement the ability to switch between different languages, integrating it with the existing i18n or translation setup in the project. Explorer Selection: I will add functionality to allow users to change the default explorer (e.g., Etherscan, Polygonscan) based on the design. Theme Switching: I will link the theme switch functionality (light/dark mode) directly to the project’s theme provider or CSS variables, ensuring smooth transitions between themes. I will reference the Connect Button component for consistency:

I will use the Connect Button component as a styling and functionality reference to ensure the Settings component has consistent behavior and looks similar to the other components within the project. I will create a sub-route for previewing and testing:

After building the Settings component, I will create a dedicated sub-route under /preview/settings that will showcase the various component states (language, explorer, and theme options). This will allow the team to easily test each variant of the component to ensure that all functionality and design requirements are met. I will test the component functionality:

Once the component is complete, I will thoroughly test it across different devices and browsers to verify its responsiveness and correctness in both light and dark modes. I will ensure that the language switch, explorer selection, and theme switching work as intended without causing any issues in the app. I will submit the PR with testing details and screenshots:

I will provide a comprehensive set of screenshots that demonstrate the component in different states (light/dark mode, different languages, explorer options). I will include any necessary documentation on how to test the component, as well as information on how to access the sub-route for previewing each variant.

[onlydustapp[bot]]

Hi @Dprof-in-tech! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Dprof-in-tech! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @petersdt! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Kaminar-i! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[ShantelPeters]

Hello @Oshioke-Salaki please can i work on this? here is how i intend to approach the issue:

1. Review the Figma Design: Analyze the provided Figma file to understand the layout, colors, typography, and components needed for both light and dark modes.

2. Set Up the Component

   • Create a new settings component that matches the Figma design.
   • Implement the options for changing language, explorer, and theme.

3. Responsiveness

   • Ensure the component is responsive by using CSS flexbox or grid layouts. Test on various screen sizes.

4. Adhere to Style Guid

   • Use the existing style guide for fonts, colors, and spacing to maintain consistency with the overall project.

5. Implement Functionality

   • Add the necessary functionality for changing networks and themes (e.g., toggling light/dark mode and updating the language/explorer).
   • Make sure these functions are seamless and intuitive.

6. Create Sub-route for Preview

   • In your routing setup, add a sub-route for the settings component.
   • Display each variant of the component for easy testing.

7. Reference the Connect Button

   • Use the Connect Button component as a reference for styling and functionality. Ensure consistency in UX.

8. Testing:

   • Test the component in both light and dark modes and across different devices to ensure full functionality and responsiveness. please kindly assign

[onlydustapp[bot]]

Hi @ShantelPeters! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @martinvibes! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @dev-chinx! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @CollinsC1O! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Dprof-in-tech! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[Benjtalkshow]

Hi @Oshioke-Salaki,
I’m Benjamin, a JavaScript developer with 4 years of experience and over 18 contributions on OnlyDust . I love creating responsive, user-friendly interfaces, and I’m confident I can build the settings component you need.

Here’s how i plan to tackle the issue:

1. I’ll closely follow the Figma design for both light and dark modes, making sure it works smoothly on all screen sizes.

2. I’ll set up the SettingsComponent.tsx to handle language, explorer, and theme changes, keeping the structure modular and easy to expand.

3. I’ll stick to the project’s style guide while adding language switching, explorer selection, and a theme toggle.

4. I’ll add a new route under /preview so we can easily test and view all the different versions of the component.

5. I’ll clean up the code and make sure everything works perfectly across different devices.

[onlydustapp[bot]]

Hi @Benjtalkshow! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Benjtalkshow! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[Ayoazeez26]

Hi @Oshioke-Salaki I will like to work on this.

I would follow the figma file design and produce pixel perfect implementation.

I will use the dark: utitlity class in tailwind to implement dark mode, and also ensure that the component is fully responsive across screen sizes. I would also follow the project's existing style guide for consistency. ETA - 48HOURS

[onlydustapp[bot]]

Hi @Ayoazeez26! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @Ayoazeez26! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[Oshioke-Salaki]

Hello guys, everyone needs to apply for issues via, The OnlyDust Platform. So please do that and i will assign. Only applications done via OD will be considered.

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey chief , I am Dprof-in-tech, an experienced Full Stack Blockchain Developer and I am excited to contribute my skills to the {project name} project in this ODHACK 8. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Rust and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 34 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. Due to my web2 experience, i am skilled in building out pixel perfect UI components. I would love to contribute to this project by solving this issue. Below is a link to my OnlyDust public profile. https://app.onlydust.com/u/Dprof-in-tech

How I plan on tackling this issue

Approach for Developing a Settings Component:

I will begin by reviewing the Figma design and style guide: I will thoroughly examine the Figma design to understand the layout, color schemes, fonts, and responsiveness required for both light and dark modes. I will consult the project’s style guide to ensure that the component's UI and UX are consistent with the rest of the application.

I will set up the Settings component structure: I will create the base structure of the Settings component using React and Tailwind CSS (or the existing CSS framework) to follow the design exactly. This structure will accommodate settings for language, explorer, and theme options, ensuring a user-friendly layout and navigation.

I will ensure full responsiveness: Using the project's responsive design strategy, I will make sure the Settings component is fully responsive across mobile, tablet, and desktop screens. I will use media queries and flexbox/grid layouts to adapt the component's layout and spacing for different screen sizes.

I will implement light and dark modes: I will integrate light/dark mode support into the Settings component, matching the theme-switching mechanism already established in the project. This will allow users to toggle between light and dark themes dynamically, with immediate feedback on the component's appearance.

I will add the language, explorer, and theme change functionality: Language Change: I will implement the ability to switch between different languages, integrating it with the existing i18n or translation setup in the project. Explorer Selection: I will add functionality to allow users to change the default explorer (e.g., Etherscan, Polygonscan) based on the design. Theme Switching: I will link the theme switch functionality (light/dark mode) directly to the project’s theme provider or CSS variables, ensuring smooth transitions between themes.

I will reference the Connect Button component for consistency: I will use the Connect Button component as a styling and functionality reference to ensure the Settings component has consistent behavior and looks similar to the other components within the project.

I will create a sub-route for previewing and testing: After building the Settings component, I will create a dedicated sub-route under /preview/settings that will showcase the various component states (language, explorer, and theme options). This will allow the team to easily test each variant of the component to ensure that all functionality and design requirements are met.

I will test the component functionality: Once the component is complete, I will thoroughly test it across different devices and browsers to verify its responsiveness and correctness in both light and dark modes. I will ensure that the language switch, explorer selection, and theme switching work as intended without causing any issues in the app.

I will submit the PR with testing details and screenshots: I will provide a comprehensive set of screenshots that demonstrate the component in different states (light/dark mode, different languages, explorer options).

I will include any necessary documentation on how to test the component, as well as information on how to access the sub-route for previewing each variant.

my delivery time would be in 2 days from the assignment date.

[PabloVillaplana]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack developer with 6 years of experience in the industry, I am super excited to be able to contribute to Web 3 projects, this to continue paving my way as an Open Source Contributor. I am from Dojo Coding Community

How I plan on tackling this issue

1. Analyze the Figma Design by thoroughly review the Figma design
2. Set Up the Environment using npm install
3. Structure the Settings Component Inside your components directory, create a new folder and file for the Settings
4. Apply Figma Design Styling Incorporate styles from the Figma design for light and dark modes
5. Make the Component Responsive Use media queries in the CSS file to ensure responsiveness across devices.
6. Handle Light and Dark Mode Use a theme state to dynamically switch between light and dark modes.
7. Test Across Variants Toggle the theme between light and dark, ensuring styles adjust correctly for both modes.

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I'm a full stack developer. Nextjs, Cairo, nodej, react.

How I plan on tackling this issue

1. Set Up the Component: Create a new component file, e.g., Settings.tsx, in the components directory.

2. Design Implementation:

   • Use the provided Figma design as a blueprint for the component layout.
   • Ensure the design supports both light and dark modes, adjusting styles accordingly.

3. Responsive Design: Make sure the component is fully responsive.

4. Functionality:

   • Implement functionality for changing language, explorer, and theme. Use state management to handle the settings.
   • Ensure users can seamlessly switch between different networks.

5. Adhere to Style Guide: Follow the existing style guide to maintain consistency in UI/UX across the application.

6. Sub-route Creation: After building the component, create a sub-route (e.g., /preview/settings) to display the Settings component for testing and review.

7. Testing: Verify that the component works correctly in both modes and across different screen sizes.

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software developer with 6 years experience building applications

How I plan on tackling this issue

I would follow the figma design to ensure pixel perfect implementation while maintaining the style guide

I will make use of tailwind dark: utility classes to implement dark mode

I will ensure implementation is fully responsive and fully functional

[Luluameh]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have extensive experience in front-end development, particularly in building settings components that allow users to interact with various configurable options, such as language selection, theme switching, and other user preferences. My experience with TypeScript and React makes me well-equipped to manage state, handle dynamic UI changes, and ensure smooth functionality for user interactions.

In addition, I have worked on projects where precise design implementation based on Figma files was essential. I understand how to translate those designs into responsive, pixel-perfect components while adhering to existing style guides for UI consistency. I have also worked with dark and light themes, ensuring proper color contrast, layout adjustments, and overall user experience across different themes.

This experience will allow me to ensure the Settings component is functional, follows the design, and is fully responsive across different devices.

How I plan on tackling this issue

To implement the Settings component, I would approach it with the following steps:

Analyze the Figma design: I would carefully review the Figma file to fully understand the design elements and interactions for both light and dark modes. This would include all variants of the component, such as the language selection, network switching, and theme toggling.

Component structure: I would break down the Settings component into smaller sub-components (e.g., language switcher, theme toggler, and network selector) to ensure it’s modular and easy to manage. I would use the React useState or a context for managing the selected language, network, and theme.

Style according to the design: Using the project’s style guide, I would style the component to match the Figma design for both light and dark themes. I would ensure that the styling adheres to the overall look and feel of the app, using existing UI elements like buttons, dropdowns, and switches from the design system.

Implement functionality:

The language switcher would allow users to select their preferred language and save it in local state or context, which could later be persisted or passed to the app’s internationalization logic. The theme toggle would handle switching between light and dark modes by applying the appropriate styles or themes. The network selector would allow users to choose between different explorers or networks, triggering any required network switch logic. For functionality, I would reference the already implemented Connect Button to ensure consistency in interaction and styling.

Test and preview variants: After building the component, I would create a sub-route under the preview route to display each variant of the component. This would allow easy testing of the component under different conditions (e.g., different screen sizes and themes).

Ensure responsiveness and cross-browser compatibility: I would ensure the Settings component is responsive across different screen sizes, testing on various devices and browsers to ensure that the component behaves consistently.

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a blockchain developer with vast experience with languages like css, javascript, typescript,react,cario, solidity . i will love to contribute to this issue. kindly assign.

How I plan on tackling this issue

To solve this i will implement the following:

1. Design & Style Implement the settings component following the Figma design for light and dark modes. Use the existing style guide and the Connect Button for reference.

2. Functionality: Enable language, explorer, and theme switching in the component. Ensure seamless network switching functionality.

3.*Responsiveness: Ensure the component is fully responsive across all screen sizes.

4. Sub-Route Create a sub-route in the preview section to test and display all component variants.

5. No New Dependencies: Use only the provided dependencies without adding any new ones.

[onlydustapp[bot]]

The maintainer Darlington02 has assigned Ayoazeez26 to this issue via OnlyDust Platform. Good luck!