Giter Club home page Giter Club logo

osmosis-frontend's Introduction

Osmosis Frontend 👩‍🔬⚗️🧪

osmosis-banner-1200w

Note: this codebase is currently undergoing a refactor from Keplr's architecture to a tRPC stack to improve performance, maintainability, and development speed. We appreciate your patience as we work through these changes.

Overview 💻

Our frontend is built with the following tools:

  • TypeScript: type checking
  • React: ui
  • Tailwind CSS: styling, theming
  • Next.js: scaffolding/SSR/CDN/SEO
  • Turbo Repo: mono repo management with package script execution, with heavy emphasis on build caching (including shared remote caching in Vercel)
  • Lerna: libs release

Deployment 🚀

Install deps:

yarn

Start web server

yarn start

Contributing 👨‍💻

We welcome and encourage contributions! We recommend looking for issues labeled with "good-first-issue".

Make sure node = 20 and yarn is installed.

  1. Install deps
yarn

First time setup If you're on the Osmosis foundation team and have a Vercel account set up, optionally sign into turbo repo using your Vercel account, and link the repo. This could give you instant builds by sharing the remote cache on our Vercel project:

npx turbo login
...login via browser...
npx turbo link
...press y (yes) and choose "OsmoLabs" as the Vercel build scope...
  1. Run local server at localhost:3000
yarn dev

Testnet

To develop on the canonical public testnet, run:

yarn build:testnet && yarn start:testnet

To develop against a local testnet, such as localosmosis, set this in your .env.local file in web package root:

# Osmosis Chain Configuration Overwrite
NEXT_PUBLIC_IS_TESTNET=true
NEXT_PUBLIC_OSMOSIS_RPC_OVERWRITE=http://localhost:26657/
NEXT_PUBLIC_OSMOSIS_REST_OVERWRITE=http://localhost:1317/
NEXT_PUBLIC_OSMOSIS_CHAIN_ID_OVERWRITE=localosmosis
# NEXT_PUBLIC_OSMOSIS_EXPLORER_URL_OVERWRITE=https://testnet.mintscan.io/osmosis-testnet/txs/{txHash}
# NEXT_PUBLIC_OSMOSIS_CHAIN_NAME_OVERWRITE=Osmosis (Testnet v13.X latest)

You may need to go to the config folder to update the ibc-assets list and currencies in the osmosis chain info to view currencies on your testnet.

Testnet

Testnet version of the frontend uses NEXT_PUBLIC_IS_TESTNET=true. By default, it points to the canonical testnet, but packages/web/.env can be changed to point to localosmosis.

Dev:

yarn build:testnet && yarn dev:testnet

Deploy:

yarn build:testnet && yarn start:testnet

Note: our currency registrar checks IBC hashes to see if they can be found via the denom_trace query in the IBC module on chain. If it's not found, it won't add it to the chain's list of currencies. Make sure IBC assets on testnet can be found in the testnet's IBC module state for test IBC assets to be visible. Otherwise, test assets (i.e. made via tokenfactory) can be added as native assets to the Osmosis chain, simply by defining its base denom in the Osmosis chain info for testnet.

Releases

Note: releases are suspended until the refactor is complete. Please avoid importing packages from this repo until further notice.

Release tags are for the published npm packages, which are every package except for the web package. Updates to the app are released incrementally way via deployments from master branch.

To start the release process:

yarn build:libs && npx lerna publish

Translations 🌎🗺

translation badge

To add translations, you can manually edit the JSON translation files in packages/web/translations, use the inlang online editor, or run yarn machine-translate to add missing translations using AI from Inlang.

Asset Listings

Please see the asset listing requirements to display assets on Osmosis Zone web app.

Showing Preview Assets

To view preview assets for testing, append the following query parameter to the Osmosis URL:

?show_preview_assets=true

They'll be enabled for the tab's session. If you'd like to disable it, either open a new tab without the query parameter or append ?show_preview_assets=false.

osmosis-frontend's People

Contributors

addysiz avatar ankurdotb avatar assafmo avatar chikeichan avatar czarcas7ic avatar daniel-farina avatar davidesegullo avatar delivan avatar dylanschultzie avatar eric-notifi avatar fl-y avatar gfant avatar gophereth avatar jeremyparish69 avatar johnnywyles avatar jonator avatar joserfelix avatar loa212 avatar mattupham avatar maxmillington avatar p0mvn avatar riley-stride avatar samuelstroschein avatar sehyunc avatar sko-kr avatar steveliupai avatar sunnya97 avatar thunnini avatar valardragon avatar yury-dubinin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

osmosis-frontend's Issues

Add LICENSE file

Hi guys,

Would recommend adding a LICENSE file to clarify usage for 3rd parties. Thanks 👍

Express Osmosis Time more clearly

Did you realize that we have gone and created a time zone?

Well, a while ago I noticed a glorious synchronization with other participants in the osmosis net work, because of epoch time. Currently, we are expressing time until epoch.

However, given that we will be ascendant, and that we are ambitious, I wish to propose Osmosis Time, or OZT "Osmosis Zone Time" or... (suggestions welcome here.

Ok, so for me, Epoch is midnight, I'm GMT+7.

Osmosis Time:

Days begin at epoch and end at the next epoch.

before epoch, the time is:

23:59:59

Epoch time is:
00:00:00

.... and that is the beginning of a new day.

Expressing this concept clearly, and using OTZ throughout the community may enhance the odd synchronicity benefits of OT.

Due to a lack of murderous stupidity in our community, OT has no concept of daylight savings time.

NB: OT !=GMT+7

it is instead a clean break away from current time-related silliness plaguing the world.

Allow for asymmetric liquidity adds

Currently, the frontend only allows adding liquidity at exactly 50-50 by using the JoinPool msg type. This turns into an issue because if a swap happens in the time since a user made the JoinPool tx, it would fail.

The chain also supports JoinSwaps, which would make it possible to swap to the right ratio and then add liquidity. https://github.com/osmosis-labs/osmosis/blob/main/proto/osmosis/gamm/v1beta1/tx.proto#L126

This is a requested feature, but only low priority imo
https://twitter.com/larry0x/status/1461483020469346311

Add Staked Assets value to Assets page

These balances are visible for now:

My Osmosis Assets :
Total Assets
Available Assets
Bonded Assets
+ Staked Assets

There would be a more complete view of the total value of the wallet if the balance of staked Osmos were also exposed.

Use token logos under Pool Catalyst

Problem

Within the Pool Catalyst section of a pool's page (/pool/###), the current colored circles with bubbles in them don't serve much value, and misses an opportunity to make it quicker and easier to visually understand which tokens make up the pool.

Solution

Replacing the generic bubbling liquid with the token logo will vastly improve readability. See image below for an example of current vs proposed.

image

Redesign Liquidity Mining Rewards section

I'd argue that the current liquidity mining screen is not as intuitive as it could be, doesn't convey enough information--and where it does, it's scattered--and isn't sustainable for potential future scenarios.

For example, let's say Juno network provides 2045 JUNO as bonus rewards. How will users know whether that bonus is being matched by Osmosis? Or let's say someone else offers a few extra JUNO to the bonus. Does that additional offer get matched? (I assume not). Could someone add a totally random token, e.g., SCRT, to an unrelated pool, e.g., JUNO/OSMO? Or how much does my current LP tokens earn of each token, and by dollar amount, each day?

It would be nice to be able to easily see what the extrenal incentives are (daily amount, which token, remaining # of epochs), whether they're matched by Osmosis, and what their APRs from each are.

My suggestion here is to have a section for Osmosis Rewards, Matched Rewards, and Bonus Rewards. This should clear much of the confusion around rewards and will be able to handle all kinds of multiple people offering all kinds of different tokens and bonus rewards for all kinds of durations.
I even added a 'My Rewards' section, as an additional suggestion, to show how much the user has bonded to each gauge, and what the daily rewards look like.

I really think something like this (albeit a tad cluttered when there is many types of external incentives) is much more intuitive. Using tooltips can cut down on the explainer paragraphs (e.g., on what bonus rewards are). I ask that you consider taking inspiration from this:

image

Deposit function on Assets page includes vested tokens

Problem

The Deposit link on the Assets page includes vested tokens, making IBC transactions fail. It can be difficult for users to troubleshoot since even Keplr extension shows vested tokens as 'Available' and Mintscan will first show the total balance. Only once you manually subtract the vested balance (or look at 'Available' on Mintscan) can you determine what the real available balance is.

I noticed this today with LUM where many users' tokens are vested from the Airdrop.

Solution

Make it easy on users by having the Deposit function subtract vested tokens so transfers user don't get confused and IBC txs stop failing.

Show pool composition in pool detail header

Problem

When in the pool detail view, unless you scroll down it's hard to see what coins this pool involves.

Screen Shot 2021-10-15 at 5 33 10 PM

Solution

Somewhere in the header we should include the coin composition. (ex. CRO/OSMO)

Remove Pool 562 LUNA/UST from Trade page

Ask

Please remove Pool 562 LUNA/UST from being used from the Trade page.

Problem

The Trade page on Osmosis app defaults to using pool 562 to trade between LUNA and UST with a swap fee of 0.535%. The primary issue is that this swap fee is high and discourages trading on Osmosis. For those who don't know that a cheaper routes exist (e.g., through Pool 560 (at 0.2% fee) and then Pool 561 (at 0.2% fee) == 0.4% fee total) are charged extra swap fee and might choose an alternative trading platform (e.g., TerraSwap); while those who do know that a cheaper route exists are inconvenienced by manually having to swap to OSMO first as an intermediate step.

image

In addition, due the fact that this pool is selected for these types of trades when it is not the cheapest trade option, we have more of the Osmosis incentives being allocated to LPs of this pool--a pool without OSMO--which is Liquidity that is not benefitting Osmosis (yet) because cheaper routes exist.

Solution

The solution in the short term is simple: ensure that trades between on LUNA and UST on the Trade page instead go through pools 560 (UST/OSMO) and 561 (LUNA/OSMO).

I think it might just need to be removed from GAMMSwapManager at osmosis-frontend/src/stores/root.ts, however, more change might be required to ensure the route does a hop through pools 560 and 561 instead of pool 562.

Discussion

There has been discussion on this on Commonwealth and a bit on Osmosis Siberia, which explore further the problem, the possible solutions, and all seem to conclude that removal of Pool 562 as default on the Trade page is the only solution we have right now. (i.e., unless pool sub-governance or optimized trade routing are coming very very soon).

Mobile compatibility

Hello,

I just wanted to start a topic to discuss the mobile compatibility. Is this currently in the backlog, what are the current blockers? I started playing with the Keplr Mobile App and it's looking quite stable. Any additional information is appreciated !

Thanks!

Add filtering system for pools page

Background / Problem

  • The current pools page UI was designed at a time when there were ~8 IBC enabled chains
  • The number of assets continue to increase on Osmosis
  • Number of incentivized pools grew from under 10 to over 40
  • Looking for a pool for a specific token requires multiple 'trial and errors' sifting through pools lists
  • Current UI is not space efficient

Solution

  • Add 'filter-by-token' system for 'All Pools' section
  • Allow sorting by categories (TVL/Volume)
  • Redesign the 'Incentivized pools' section to:
    1. Use screen real estate more efficiently
    2. Allow multiple views sorting by various categories such as token, APR, TVL, etc

Potential issues / Things to consider

  • The current frontend architecture was intended to only make use of available on-chain information (reduce dependency to proprietary backend/middlelayer infrastructure), additional implementation or use of middle layer solutions may be necessary
  • The visual contrast between a 'card format' of incentivized/my pools vs 'list format' of all pools serves the purpose of prioritizing information (albeit somewhat poorly). Find a middle ground where the number of cards are not overwhelming, but still maintains the purpose of providing visual separation
  • Don't stray too far from the current visual layout of Osmosis to not add friction for existing users

Add Coingecko OSMO price data and logo to sidebar

The Coingecko team has been true champs that integrated Osmosis dex price data to their platform very early.

As stated here, we should add OSMO price to the sidebar alongside a basic Coingecko logo or a 'Powered by Coingecko API' text that links to the Coingecko website as a gesture of appreciation.

Remove 0D from time until epoch rewards

Since epoch rewards are once a day, I think the 0D should be removed from the time until next epoch rewards. (Not really a high priority thing) E.g. here in /pools
Screenshot 2021-10-30 at 12 09 50 AM

IBC scrollbars

Hello,
Is it possible to remove these scrollbars ? Or replace them with something more modern ?

Thank you

Osmosis-IBC
u

Make it possible to filter Pools and Assets on Asset/Chain

Because the number of Pools and Assets are growing it is sometimes difficult to find the Pool or Asset you are searching for.

I think this can be solved by adding a filter (in the top) on the Pools and Assets pages.

Thank you for all the good work in this beautiful project.

Add HALF button to swap screen

Currently, there is a MAX button to select your total balance for swap, other Dex'es like Solana Raydium have a half option as well which is very useful when converting funds for 50/50 pools.

image

Osmosis would benefit from this to help users swap tokens for liquidity pools, we could go a step further and offer buttons like:
10% 25% 50% 75% MAX which should cover most pool configurations.

Reduce precision on external pool incentives

If dust is added to external incentives, it appears that it shows up on the pools themselves. I imagine this isn't the ideal behavior; I ended up just adding more SCRT to even it out.

Screen_Shot_2021-11-29_at_6 49 06_PM

Allow to specify withdraw address

Due to the fact that Keplr does not support different Ledger apps, it would be nice to be able to specify the withdraw address when withdrawing funds from Osmosis. This way, people that are using addresses generated with different SLIP-44 values can safely withdraw their funds to such addresses without having to perform the following steps:

  1. withdraw the funds to the address generate by Keplr
  2. send the funds to their real account

[EPIC] Main trading page

Currently the tokens in main page's UI, when you click the "From" button, are sorted by what appears to be the order in the assets page.

Instead, we should change it so that it puts tokens you already have at the top. (So you don't have to scroll as far as to find them)

Tracking tasks

Consider adding LBP simulation chart for LBPs

Background / Problem

  • LBPs follow a drastic 'start high, end low' dutch-auction-like mechanism for markets demand to be reflected in initial price discovery of tokens
  • LBPs are effective when there is demand 'at a certain price', not 'at a certain time'
  • Lack of understanding of the LBP mechanism can lead users to 'ape-in' early
  • Mechanism between pool weight <> token price can be too difficult to understand

Solution

  • Provide a more digestible graph/chart on the LBP pool details page breaking down the simulated price graph over time
  • Show that 'buying the token' moves price up vs 'not buying the token' moves price down

Potential issues/ things to consider

  • LBP pool on Osmosis, while not insignificant, is relatively smaller in comparison to existing pools. Don't overcomplicate, overengineer, overdesign. Need to be resource efficient with bigger priorities if needed.
  • Working with the Imperator historical data may be necessary to provide non-onchain information that may need to be included in chart

Helpful resources

[Epic] Osmosis Frontend Refactoring

Goals

  • Component standardization
    • Need dependency on design team (cc @victortokaito)
    • Allow reusable components
  • Separation of logic-related code and view-related code
    • Currently code related to logic and code related to view are mixed up, causing lots of bugs
    • Adding new features are resource intensive
  • Previous refactor was started but wasn't finished
  • Standardize frontend styling framework to tailwind
    • Currently using two frameworks for frontend styling (tailwind and emotion)
  • Move to NextJS

Revert Halloween

Now that Halloween is past, we should bring back non-spooky Wosmongton!

General UI Improvements (December 2021)

This issue takes into consideration, implements, and resolves issues #128, #138, #142, #148, #64, #134.

Background / Problem

  • Pools are not easy to scan. And the number of assets continues to increase on Osmosis.
  • Pools page was designed at a time when there were few IBC-enabled chains
  • Searching for a pool for a specific token requires multiple ‘trial and errors’ sifting through pool lists. The current UI is not space efficient.
  • Users request breakdown of certain rewards/APR’s

Solution

  • Provide more tools for users to filter data.
    • Add ‘filter by symbol’ search system
    • Enable sorting by categories (e.g. TVL, volume, APR, my assets)
  • Redesign “Incentivized Pools” to:
    • use screen real estate more efficiently
    • allow multiple sorting categories (e.g. by name, APR, TVL, etc.)
  • Improve general information architecture, making pools easier to scan.
  • Improve sense of visual hierarchy, highlighting most relevant statistics, add icons for quick visual identification.
  • Use info alerts/tool tips/APR breakdowns to keep information hidden until needed. Complexity is obscured for users who don't need this info, but available to those who want to know how things work.

Things to consider

  1. New changes to UI should keep original osmosis aesthetic intact to reduce any friction for existing users.
  2. Consider visual hierarchy and space inefficiencies of the current pools section to improve readability/scanning

Use asset registry

Problem

Currently, token information is included to the osmosis-frontend source build. This means there is a duplicated effort of adding token information for every time a new token needs to be added to Osmosis.

Potential Solution

  • There already is osmosis-labs/assetlists which has all the information (including token logos) needed.
  • The Osmosis frontend should fetch all the information from assetlists including token denom, decimals, IBC channels, logo, etc.
  • One issue could be RPC/REST endpoints do not exist in assetlists, and will need to be added from cosmos/chain-registry. However, because Keplr requires websockets to be enabled there needs to be some checking of the endpoint to ensure that websocket works.

Add a tool tip to explain the breakdown of pool APRs

From @jeremyparish https://commonwealth.im/osmosis/proposal/discussion/1547-how-can-we-improve-the-osmosis-frontend-feedback-thread?comment=7905

Essentially it would be cool if we could add a tool tip to every APR on the front-end, showing a decomposition of where the APR is coming from. There would be three sources in Osmosis:

  • Osmo Incentive APR
  • Fee APR
  • {other token} incentives APR

Not sure if we need more work to add the Fee APR at the moment though. It should be possible to derive using API data from imperator https://api-osmosis.imperator.co/swagger/#/

Add Partial Unbond to UI

I think the image explains it well. Since begin-partial-unbond is here (or coming soon), we should be able to allow for something like this, where the user can enter a specific amount of LP tokens to unbond:

We may be able to eventually have some kind of combined 'Manage LP tokens' or 'Manage bondings' section/prompt for a cleaner interface (like how Sushi has), but for now you should be able to bascially reuse the 'Bond LP tokens' prompt for allowing to specify for partial unbond. Since LP tokens aren't always in user friendly numbers (in terms of readability), perhaps an option to enter a % of bonded tokens and showing $ value of specified amount could also be nice.

image

USD Prices are incorrect

Hello,
Using the up/down button to switch the tokens the USD price of the tokens will not be the same.

  1. Use a token pair eg. Luna/Osmo
  2. Wait for a USD change (no cents) of one of the token and the press the middle button to switch.

The USD price will be different. I expect to be the same.

So it seems that frontend doesn't correctly update the USD values of both tokens or are you getting the USD values from CoinGecko which it's slow ? Isn't an oracle better like Band ?

Osmosis-Prices

Osmosis App Documentation

Challenge

The documentation for the frontend is work in progress and needs work and step by step guides.

Solution

Create the following guides in order for users to fully understand the process from beginning to end.

Docs pPreview

https://osmosis-labs.github.io/osmosis/overview/

App Documentation breakdown

TODO/Goals

  • Update Structure to match the one below Commit
  • Finish up all docs for each section
  • Add video tutorials to display on the getting started page.

OSMOSIS APP Documentation Structure

  • Getting Started
    • Open the App
    • Connect Wallet
    • Deposit Funds
    • Swapping Tokens
    • Create a New Pool
  • Adding Liquidity to a Pool
    • Bonding LP Tokens
  • Learn More
    • Bonded Liquidity Gauges
    • Allocation Points
    • External Incentives
    • Fees
  • Wallet
    • Create Keplr Wallet
    • Import a Keplr account
    • Import a Ledger account

Introduce a "CleanTxErrorMessage" function, replace common hard to parse error messages

We should clean error messages from the state machine to be far more human readable.

In these lines, https://github.com/osmosis-labs/osmosis-frontend/blob/master/src/tx/tx-tracer.ts#L160-L161 we should clean the error message before creating it into an Error.

We should in the beginning do:

  1. Find/Replace ibc denoms strings with human readable denoms from the asset list
  2. Run the following regex: Find Regex signature verification failed; please verify account number \([0-9]*\), sequence \(([0-9]*)\) and chain-id \(osmosis-1\): unauthorized Replace Regex You have too many concurrent txs in flight! Try resending after your prior tx lands on chain. (We couldn't send the tx with sequence number $1). You can play with the regex here: https://regex101.com/r/ZkRbXL/1/
    The way you can do this regex substitution before displaying the error in JS per my understanding is string_to_replace.replace(findRegex, replace)

Default Multi-hop trades should use OSMO pools

Multi-hops are using non-optimal routes by not using OSMO pools. OSMO pools tend to have 0.2% fees compared to 0.3% fees for ATOM pools as well usually having substantially more Liquidity to minimise slippage due to the OSMO bias on incentives attracting more liquidity before a stable Liquidity is reached.

Example:
Swap from DVPN to HUAHUA via OSMO multi hop: costing 0.4% swap fees and 0.142% slippage
image

Swap back from HUAHUA to DVPN goes via ATOM pools and costs 0.6% fees and 0.727% slippage
image

Discussion on this here: Commonwealth

Add Relayer status!

Hello,
Could you please add the relayer status when you try to deposit/withdraw in order to avoid doing that when the relayer is down or has a malfunction ? (or even better disable it the buttons)

Currently i can find this info on Osmosis Discord #ibc-status

Thank you

Mobile: close menu drawer on menu item selection.

Problem

It's quite annoying to have to tap away from the menu after making a selection in the menu. It's one extra tap that isn't needed.

Proposed Solution

We should automatically close the menu when someone makes a menu selection on mobile.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.