Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/osmosis-labs/osmosis-frontend
Web interface for Osmosis Zone
https://github.com/osmosis-labs/osmosis-frontend
cosmos nextjs nodejs osmosis react tailwindcss trpc typescript
Last synced: 2 days ago
JSON representation
Web interface for Osmosis Zone
- Host: GitHub
- URL: https://github.com/osmosis-labs/osmosis-frontend
- Owner: osmosis-labs
- License: apache-2.0
- Created: 2021-06-10T22:45:53.000Z (over 3 years ago)
- Default Branch: stage
- Last Pushed: 2024-12-31T07:46:21.000Z (12 days ago)
- Last Synced: 2025-01-01T17:55:48.514Z (10 days ago)
- Topics: cosmos, nextjs, nodejs, osmosis, react, tailwindcss, trpc, typescript
- Language: JavaScript
- Homepage: https://app.osmosis.zone/
- Size: 152 MB
- Stars: 236
- Watchers: 26
- Forks: 423
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- best-of-crypto - GitHub - 9% open · ⏱️ 05.06.2024): (Automated Market Maker (AMM))
README
# Osmosis Frontend 👩🔬⚗️🧪
> 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](https://app.osmosis.zone) is built with the following tools:
- [TypeScript](https://www.typescriptlang.org/): type checking
- [React](https://reactjs.org/): ui
- [Tailwind CSS](https://tailwindcss.com/): styling, theming
- [Next.js](https://nextjs.org/): scaffolding/SSR/CDN/SEO
- We deploy on [Vercel](https://vercel.com/solutions/nextjs?utm_source=next-site&utm_medium=banner&utm_campaign=next-website) for optimizations out of the box, behind [CloudFlare](https://www.cloudflare.com/)
- [Turbo Repo](https://turbo.build/repo): mono repo management with package script execution, with heavy emphasis on build caching (including shared remote caching in Vercel)
- [Lerna](https://lerna.js.org/): libs release
## Deployment 🚀
Install deps:
```bash
yarn
```
Start web server
```bash
yarn start
```
## Contributing 👨💻
We welcome and encourage contributions! We recommend looking for [issues labeled with "good-first-issue"](https://github.com/osmosis-labs/osmosis-frontend/contribute).
Make sure [node](https://nodejs.org/en/) = 20 and [yarn](https://yarnpkg.com/getting-started/install) is installed.
1. Install deps
```bash
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:
```bash
npx turbo login
...login via browser...
npx turbo link
...press y (yes) and choose "OsmoLabs" as the Vercel build scope...
```
2. Run an initial build to create packages build artifacts:
```bash
yarn build
```
3. Run local server at [`localhost:3000`](localhost:3000)
```bash
yarn dev
```
## Testnet
To develop on the canonical public testnet, run:
```bash
yarn build:testnet && yarn start:testnet
```
To develop against a local testnet, such as [localosmosis](https://github.com/osmosis-labs/osmosis/blob/1eb6506297c88dd3acc7d9c0a5f7c4e34ecd1b4e/tests/localosmosis/README.md), set this in your .env.local file in web package root:
```bash
# 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](https://github.com/osmosis-labs/osmosis/tree/main/tests/localosmosis).
Dev:
```bash
yarn build:testnet && yarn dev:testnet
```
Deploy:
```bash
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](https://www.npmjs.com/org/osmosis-labs), 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:
```bash
yarn build:libs && npx lerna publish
```
## Translations 🌎🗺
[](https://inlang.com/editor/github.com/osmosis-labs/osmosis-frontend?ref=badge)
To add translations, you can manually edit the JSON translation files in `packages/web/translations`, use the [inlang](https://inlang.com/) online editor, or run `yarn machine-translate` to add missing translations using AI from Inlang.
Note: we have tests in web package that ensure all localization files contain the same keys and that they're (best effort) all found within the TSX source files. These help keep our localizations up to date. To clean up localizations, check out the scripts in the web/localizations folder. They must be run using `node` within the localization folder.
## Asset Listings
Please see the asset [listing requirements](https://github.com/osmosis-labs/assetlists/blob/main/LISTING.md) 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`.