alchemix-finance / alchemix-v2-frontend Goto Github PK
View Code? Open in Web Editor NEWRepository for v2 UI
Home Page: https://alchemix.fi
License: ISC License
Repository for v2 UI
Home Page: https://alchemix.fi
License: ISC License
The settings page should incorporate some options to configure the Alchemix app to a user's liking with regards to locale settings and default suggested gas for transactions, as well as enable users to revoke active permissions on tokens. Accessing the page is done via the cogwheel and then selecting 'Settings', which means that users should be able to easily go back from where they came when they're done with the configuration.
https://www.figma.com/file/25xkwdTXwAXAHTd87KAYZJ/Alchemxi-v2.4-(n4n0-edits)?node-id=0%3A1
Describe the core feature
URLs should be easy to remember and not make use of #
for anything else than anchors.
Additional context
Currently URLs are structured like this: https://host.tld/#/path/subpath
Loading any component into the storybook integration that uses svelte-i18n functionality will result in an error that prevents the component from being rendered.
The component should be rendered regularly like it is done on other components that don't use svelte-i18n.
The sidebar contains the main navigation of the application and as such is a crucial element for the entire UI.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
When using the onboard modal to connect a user's wallet, the z-index of the modal is the same or lower than some of the on-page content which results in content that should be covered by the modal being rendered on top of the modal instead.
The modal should cover all content and not have underlying content be rendered on top of it.
macOS Big Sur using Chrome 92
Storybook is a component library viewer with integrated unit and visual test options. Using this will allow us to not only create proper component libraries, but also share them with UI/UX designers to enable quick and easy crosschecks (deployment via vercel).
https://storybook.js.org/
https://storybook.js.org/docs/svelte/get-started/introduction
The toast serves as a notification for the user to inform them about the status of the last action they've taken.
success
which is of type booleanicon
of type string and timer
of type number
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
When using an ultrawide screen and viewing the app in a full-size window the content stretches way too far apart.
The content should stay closer together so elements are easier and quicker to reach
Zapper and many other sites handle this by simply choosing a max-width for the entire view and then centering the content if the viewport is larger than the content max-width.
Describe the core feature
A clear and concise description of what the feature is supposed to do.
Additional context
Links to figma, screenshots, anything to help illustrate the feature.
Blocked by #12
Until the DAO is ready Alchemix is using Snapshot votes to facilitate governance decisions. Instead of having to redirect users to an external page (snapshot.org) we will facilitate snapshot's API to display all open proposals on the Alchemix app instead and enable users to vote on each proposal just like they would do on snapshot's own interface.
API
https://docs.snapshot.org/snapshot.js
snapshot-labs/snapshot.js#341
Branding
https://github.com/snapshot-labs/brand/blob/master/logo/logo.png
Design
https://www.figma.com/file/25xkwdTXwAXAHTd87KAYZJ/Alchemxi-v2.4-(n4n0-edits)?node-id=0%3A1
Enabling users to select their preferred language is a matter of inclusion and opening the application to a wider audience of non-english-speaking people.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1804
The footer area is a place where easy to access links are put that users can use to quickly get in touch with the community, the team, check out documentations, audit reports or other pages from/for Alchemix. It is an expected element on websites nowadays and shouldn't be left out.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
Some npm package update broke the repository. Trying to start it locally will fail.
yarn install
yarn dev
https://localhost:5000
It should just run as expected.
DIFF of old yarn.lock (left) vs new yarn.lock https://www.diffchecker.com/SAMB8Nqp
DAPPs feature a button to connect to and disconnect from your wallet. Alchemix is no different to this mechanic as a wallet connection is required to interact with the application.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
Describe the core feature
The code base should be set up so future feature branches can be easily created and worked on simultaneously.
Additional context
Basing design and colors off of https://www.figma.com/proto/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1804&scaling=min-zoom
(this issue is a demo to check the feasability of using GH issues to track work on the repo)
A table component that holds arbitrary data and can display it
The table component should enable arbitrary content to be placed inside it, offering a sorting function for each column with a column at the end that doesn't include a table header and only includes the button component. Each row should allow for a limited amount of interaction through the use of a button
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?version-id=1012140218&node-id=87%3A6
Right now the table component renders each column with the same width in respect to the overall columns it has to include. This results in cells that are sized way too large for their content.
A landing page welcomes the user and guides them to further steps like connecting their wallets or checking out whatever information is available for them.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
Storybook is a tool that helps build new components in an isolated environment. We introduced this after we already had a bunch of components made, so now they need to be ported into the storybook.
src/stories
directory, mimicking their location inside the src/components
directoryThe accounts page serves as a hub of the users finances
The accounts page serves to display detailed information about the current stats of Alchemix (mintable debt, tvl, debt, alcx price, etc.), as well as an overview over the user's deposit and credit balances and their individual composition. Furthermore an overview over all currently running strategies chosen by the user is displayed as well, giving key informations for further decisions as well as allowing direct interactions.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
Using Zapper, many of the needed datum could be extracted easily, including historic data.
In the beginning Alchemix v2 should focus on supporting a limited set of major wallets, such as Metamask, WalletConnect as well as hardware wallet integration through Trezor and Ledger.
The topbar contains at minimum the Alchemix logo as well as a switch for the currency conversion (USD/EUR/etc...). Other elements may be included into it at a later time as per figma design.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
The pie chart serves to provide a quick visual representation of the user's collateral or debt/credit positions. It puts into relation the core parts of each position (i.e. Withdrawable and Liquidatable on the collateral position).
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
Explore use of https://www.chartjs.org/ or other charting tools.
A list of all Tokens and their amount on the user's currently connected wallet.
https://www.figma.com/file/jisMpcU4jKHS712qECEPEq/Alchemxi-v2.4?node-id=0%3A1
For example, instead of $3000
, we should display $3,000
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.