Osmosis Frontend 👩‍🔬⚗️🧪

Overview 💻

Our frontend is built with the following tools:

TypeScript: type checking
React: ui
Tailwind CSS: styling, theming
Next.js: scaffolding/SSR/CDN/SEO
- We deploy on Vercel for optimizations out of the box, behind CloudFlare
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.

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...

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, modify the .env file:

# 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

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 🌎🗺

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 Unlisted Assets

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

?show_unlisted_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_unlisted_assets=false.