https://github.com/hyperweb-io/code-challenge-v4
https://github.com/hyperweb-io/code-challenge-v4
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hyperweb-io/code-challenge-v4
- Owner: hyperweb-io
- Created: 2024-02-15T15:02:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-26T02:58:40.000Z (over 2 years ago)
- Last Synced: 2025-10-27T15:46:01.777Z (8 months ago)
- Size: 808 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UI and State Challenge
## Overview
In this challenge, you are tasked with creating a UI that enables users to add tokens to an asset list. Your application will feature a ComboBox for selecting assets and an "Add Asset" button to trigger the selection process, etc. This challenge is designed to assess your skills in React component integration and state management.
## Requirements
- Make sure to include all of the [deliverables](#deliverables) of your expertise.
- If you're experienced in implementing UI components, you can focus on the [UI Components](#ui-components) part. And include state management and some of the business logic as a bonus.
- Or you can focus on the [Business Logic](#business-logic) part, make the business logic readable and maintainable. For the UI, you can just make a rough one to show the data. And including a well implemented UI would be a bonus.
- No real data handling like deposit/withdraw actions is required.
- No need to connect a wallet or implement authentication.
- Focus on UI implementation and business logic.
## Setup
- Install `create-cosmos-app` globally using npm:
```bash
npm install -g create-cosmos-app
```
- Scaffold your project with the `connect-chain` template:
```bash
cca --template connect-chain
```
- Make sure to commit the boilerplate state in git as the first commit so we can see the commits more cleanly, BEFORE you make changes.
```bash
git init .
git add .
git commit -am "first commit"
```
- Then you're good to start your magic.
## Deliverables
### UI Components
- [ ] Integrate and render the asset-list component as shown in the [storybook](https://storybook.cosmology.zone/?path=/docs/asset-assetlist--docs) — which should display the asset list.
- [ ] Implement an "Add Asset" button that, when clicked, opens a modal or another UI element of your choice.
- [ ] The modal (or popover or other) should render the ComboBox component, allowing the user to select an asset to add. Reference for the ComboBox implementation can be found in the [Cosmology Storybook](https://storybook.cosmology.zone/?path=/story/combobox--custom-combobox-item).
- [ ] The `state.selectedChain`, e.g., `osmosis` should determine which set of assets can show up in the list of assets.
- [ ] Upon selecting an asset from the ComboBox, the asset list should update to include the chosen asset. Likely should have a submit button to confirm.
- [ ] When the deposit button is clicked, open a modal as follows(Static component. No need to add functionalities):
- [ ] Not required, but if that was simple for you, consider adding the following: A layout, a menu, or some organization
#### Notes
- Using `Styled Component` only. Don't use any UI Kit.
- `Theme` is optional.
### Business Logic
- [ ] Add a state management library of your choice (e.g., Zustand, MobX).
- [ ] Create a store that can `addAssetList`. Use `Chain` and `AssetList` types from the `@chain-registry/types`, and data from `chain-registry`
— [ ] Add a small set, 2-5 random assets from `chain-registry`. Choose a default chain, such as `"osmosis"`, and store it as something like `state.selectedChain`.
- [ ] Implement a configurable data source adapter to support multiple data sources. Implement two data source providers as follows, and then config to use one of these potential data sources when starting the demo:
- chain-registry
- @chain-registry/client
#### Notes
- DO NOT add any other dependencies unless there's a good reason. Use libs provided in the boilerplate only is preferred.
- Show your consideration on readability, maintainability and optimization.
## Submission Guidelines
- Include this README in your repository with checked [deliverables](#deliverables) and instructions on how to run your project.
- DO NOT fork this repo.
- Make sure to commit the boilerplate state in git as the first commit so we can see the commits more cleanly, BEFORE you make changes.
- Ensure your project is available on GitHub or a similar platform.
Good luck!