Skip to main content

Osmosis Frontend

Osmosis is a decentralized exchange built on top of the Cosmos SDK, which provides a platform for exchanging and trading digital assets. The Osmosis Frontend is a user interface for the Osmosis network that allows users to easily trade and manage their assets.

osmosis-banner-1200w Let's dive in!

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 >= 16 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

Frontier 🤠​

To reduce duplicated effort, master branch is used to deploy the frontier app as well. The frontier deployment has NEXT_PUBLIC_IS_FRONTIER env var set to true. If making updates to frontier, please target the master branch. Frontier assets are configured in packages/web/config/ibc-assets.ts.

Develop​

To develop with frontier configuration, use:

yarn build:frontier && yarn dev:frontier

Deploy​

To deploy frontier (the env var will be set for you):

yarn build:frontier && yarn start:frontier

Otherwise the non-frontier commands can be used with the env var set to true.

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 it's base denom in the Osmosis chain info for testnet.

Releases​

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

Localization 🌎🗺​

Have a change you want to make with our translations? We have a frontend for updating localizations in our app easily, all you need is a GitHub account. Coming soon: creating new language profiles from this frontend.

Inlang editor & status:

translation badge