Cypress tests

Run all tests

pnpm build
pnpm integration-test

Run just one test

If you want to run single test you first need to build an app and then serve it

pnpm build
serve -s build -p 3000

After that you can specify the test to run with the following command

cypress run --spec cypress/integration/exchange/add-liquidity.test.ts

Remember that if you modify the code under test (e.g. adding id to some element) you need to rebuild the app.

Cypress GUI

Cypress GUI is a nice tool to use if screenshots don't tell enough information.

You open it with

cypress open

It might ask you to update by installing latest GUI version - this will download normal MacOS app which you can open normally without cypress open

Tips and tricks

If you are trying to debug something in GUI console be sure to switch to context of iFramed app (Click "top ▼" and then "Your App: lucia-frontend")

Documentation: Info

A brief overview how Info part of Lucia website works.

In terms of React components Info section is just another view (located in apps/web/src/views/Info) that is assigned route (in pages). There are also some Info-related components inside apps/web/src/components (InfoNav, InfoCharts, InfoTables and InfoSearch at the time of writing).

There are helper functions to handle data formatting and requests - apps/web/src/views/Info/utils/infoDataHelpers.ts and apps/web/src/views/Info/utils/infoQueryHelpers.ts

Info section has it's own reducer in Redux store - apps/web/src/state/info. It handles all data about pools, tokens and overall protocol. The only exception is token/pool watchlist that is stored under src/state/user reducer.

GraphQL request logic lives under apps/web/src/state/info/queries directory. Code over there handles firing requests to StreamingFast subgraph as well as formatting returned values and calculating all the derived data we need.

Requests flow

When user visits Info page the following requests are fired (names as declared in src/state/info/queries):

overview - gets basic protocol data like volume, liquidity and transaction count. 3 requests are fired for current, 24h ago and 48h ago data. overviewCharts - gets data to show liquidity and volume charts on overview page. overviewTransactions - gets data to show transaction table on overview page

prices - gets BNB prices (current, 24h, 48 and 7d ago) used in calculations (see src/hooks/useBnbPrices.ts)

topTokens - gets top NN pools by 24h volume. This request just fetches token addresses, full data is handled separately. tokens - given the list of token addresses retrieves all needed data about these tokens. Done in single request but it is in fact 5 batched requests for different timeframes (needed to calculate rate of change). When user first opens the page this request is requesting data for token addresses acquired via topTokens request.

topPools - same as topTokens but for pools pools - same as tokens but for pools

There are also multiple blocks queries to retrieve block numbers at different timestamps.

The flow is controlled by apps/web/src/state/info/updaters.ts. When user navigates through the site more pools and tokens are automatically loaded, (e.g. you click on BNB token and pools for BNB are loaded automatically, if you click on BNB-BTCB then BTCB token will be loaded, etc)

There are additional requests for price chart and search that are fired when user uses these features.

Pools documentation

How to add a new pool

Add an entry in apps/web/src/config/constants/pools.tsx, below the pool with the id 0
Insert informations, with the contract address and the correct tokens (See Tokens)
Run pnpm test:config to make sure the data you set in the config match the data on chain

Pools APRs depend on farm data to compute prices

Pools data

Data are stored in the global redux state (apps/web/src/state/pools).

Tokens management

All the tokens are in /packages/tokens/src/[chainId].ts. They are instances of the Token class defined in the SDK. Before adding a new farm or pool you need to make sure the Tokens are in this file. To add a Token to the exchange lists:

For the default list: /config/constant/tokenLists/lucia-default.tokenlist.json
For other lists, check the token-lists project in the lucia-toolkit repo
To blacklist a token: /config/constant/tokenListslucia-unsupported.tokenlist.json

Localisation

Keys should be added to translation.json file, in order to be translated to other languages.

Adding translations

A hook expose the function you need to translate content.

import { useTranslation } from '@lucia/localization'

...
const { t } =  useTranslation()
...

t(key, data)

key is the crowdin key of the string you want to translate.
data dynamic variables

Dynamic variables Example

If a Crowdin translation like this You have %num% left in your wallet - would look something like:

t(`You have %num% left in your wallet`, { num: luciaBalance })

Lucia Dex Documentation