Frontend

Mission Control has published the full Mars Protocol frontend repository on Github. That means anyone in the galaxy can download it to:

• Run the frontend to uncover vulnerabilities
• Explore Mars’ architecture and learn how to build open Cosmos apps

The release comes with a web application license agreement that grants anyone the right to use the code to interact with Martian Council-governed Outposts. The license imposes conditions on use including compliance with applicable law in the licensee’s jurisdiction.

The description of the license herein is only a summary and may be incomplete or inaccurate–only the full text of the license is legally binding.

GitHub Repo

https://github.com/mars-protocol/interface

Web App

This project is a NextJS React application.

The project utilises React hooks, functional components, Zustand for state management, and useQuery for general data fetching and management.

Typescript is added and utilised (but optional if you want to create .jsx or .tsx files).

SCSS with CSS modules (webpack allows importing css files into javascript, use the CSS module technique to avoid className clashes).

Deployment

Start web server

_1

yarn && yarn dev

Text and translations

This repository makes use of a translation repository. This repository containes all of the translation key values that are used within the UI. The rationale is to have no hardcoded display string values in this repository.

Development practices

Imports

Local components are imported via index files, which can be automatically generated with yarn index. This command targets index.ts files with a specific pattern in order to automate component exports. This results in clean imports throughout the pages:

_1

import { Button, Card, Title } from 'components/common'

or

_1

import { Breakdown, RepayInput } from 'components/fields'

In order for this to work, components are place in a folder with UpperCamelCase with the respective Component.tsx file. The component cannot be exported at default, so rather export the const instead.

Data orchestration

Data is handled with a combination of container components, useQuery and Zustand. Container components are responsible for syncing the application state with the wallet-provider state. This fire of the required queries in useQuery, which are for many cases also stored in Zustand.

We aim to have as much as possible available in Zustand, to have one source of truth.

Contributing

We welcome and encourage contributions! Please create a pull request with as much information about the work you did and what your motivation/intention was.

License

Contents of this repository are open source under the Mars Protocol Web Application License Agreement.