Almerico

Almerico (tribute to Almerico from Schio) is the official Commercio.network explorer.

Install

In order to properly build the project, first you have to install all of its dependencies. To do so run:

npm install

Project setup

Development

In order to run this project as a developer with the hot reload option enabled, you have to:

1. Create a file named .env.development.local inside the project root folder;

2. Inside the .env.development.local file add the following data:

   VUE_APP_API_VERSION=VALUE (e.g., v1)
   VUE_APP_API_VERSION_COSMWASM=VALUE (e.g., v1)
   VUE_APP_ANCESTORS=VALUE (e.g., [{"lcd_ledger":"http://archive.com",
   "lcd": "http://archive.com", "ver": "0.45"}, {"lcd_ledger":"http://lcd.com",
   "lcd": "http://lcd.com", "ver": "0.38"}])
   # The array is queried in order: list the current-SDK archive node ("ver":
   # "0.45") first, then older ancestors ("ver": "0.38") as further fallbacks.
   VUE_APP_BACKEND=VALUE (e.g., http://backend.com)
   VUE_APP_BACKEND_WS=VALUE (e.g., ws://backend.com/websocket)
   VUE_APP_CONNECTIONS=VALUE (e.g., [{"id":"connection-10","chain_id":"osmo-test-5"}])
   VUE_APP_CONTRACT_DEX=VALUE (e.g., did:com:1yva23huwtu5f5tzm9vu3ce4h4y7x9j0q59wvse4t0lrzhhv68tzq5vps96)
   VUE_APP_FIRST_CONVERSION_RATE=VALUE (e.g., 1)
   VUE_APP_HAS_POOLS=VALUE (e.g., true)
   VUE_APP_LCD=VALUE (e.g., http://lcd.com)
   VUE_APP_MAIN_TITLE=VALUE (e.g., Testnet)
   VUE_APP_RPC=VALUE (e.g., http://rpc.com)
   VUE_APP_WASM_CW20_CODE_ID=VALUE (e.g., '7')
   VUE_APP_WASM_SWAP_CODE_ID=VALUE (e.g., '4')
   VUE_APP_WS=VALUE (e.g., ws://rpc.com/websocket)

Compiles and hot-reloads for development

To execute the explorer run:

npm run serve

This will start a local web server and publish a web page to http://localhost:8080

Production

Create a file named .env.production inside the project root folder and set the following data with your values:

VUE_APP_API_VERSION=VALUE (e.g., v1)
VUE_APP_API_VERSION_COSMWASM=VALUE (e.g., v1)
VUE_APP_ANCESTORS=VALUE (e.g., [{"lcd_ledger":"https://archive.com",
"lcd": "https://archive.com", "ver": "0.45"}, {"lcd_ledger":"https://lcd.com",
"lcd": "https://lcd.com", "ver": "0.38"}])
# The array is queried in order: list the current-SDK archive node ("ver":
# "0.45") first, then older ancestors ("ver": "0.38") as further fallbacks.
VUE_APP_BACKEND=VALUE (e.g., https://backend.com)
VUE_APP_BACKEND_WS=VALUE (e.g., wss://backend.com/websocket)
VUE_APP_CONNECTIONS=VALUE (e.g., [{"id":"connection-8","chain_id":"osmosis-1"}])
VUE_APP_CONTRACT_DEX=VALUE (e.g., did:com:1yva23huwtu5f5tzm9vu3ce4h4y7x9j0q59wvse4t0lrzhhv68tzq5vps96)
VUE_APP_FIRST_CONVERSION_RATE=VALUE (e.g., 1)
VUE_APP_HAS_POOLS=VALUE (e.g., false)
VUE_APP_LCD=VALUE (e.g., https://lcd.com)
VUE_APP_MAIN_TITLE=VALUE (e.g., Mainnet)
VUE_APP_RPC=VALUE (e.g., https://rpc.com)
VUE_APP_WASM_CW20_CODE_ID=VALUE (e.g., '1')
VUE_APP_WASM_SWAP_CODE_ID=VALUE (e.g., '2')
VUE_APP_WS=VALUE (e.g., wss://rpc.com/websocket)

Compiles and minifies for production

To build the project run:

npm run build

Run your unit tests

To test the code base run:

npm run test

Lints and fixes files

npm run lint

Transaction detail archive fallback

When opening a transaction detail, the explorer queries the live LCD first and, on failure, falls back to the nodes listed in VUE_APP_ANCESTORS in order (see the env var examples above). This lets the explorer resolve transactions that predate the current node's history.

The following mainnet hashes can be used to manually verify each step of the chain (they only resolve through the indicated source):

Source	SDK	Example transaction hash
Archive node	v0.45	4249C26E4C01B95E27233E6EF42A8EF5026CB3E954E3FA6C55862059EBB26188
Archive node	v0.45	A090C3667E3AAC0E6B15216772DD75EAEFBBBCC4B34ABA64616440B34F8E5DA1
Ancestor node	v0.38	11980F8E3C810A994E23B51A250DE709DE5E080725F263E63FED94FB01BB7B53

Opening any of these from the transactions detail view should display the full transaction, served transparently by the matching fallback node.

Docker

Build the Docker image

docker build -t almerico \
  --build-arg ANCESTORS_LIST=<Ancestors list> \
  --build-arg API_VERSION=<API version> \
  --build-arg API_VERSION_COSMWASM=<API version> \
  --build-arg BACKEND=<Backend url> \
  --build-arg BACKEND_WS=<Backend WebSocket URL> \
  --build-arg CONNECTIONS=<Connections list> \
  --build-arg CONTRACT_DEX=<DEX contract address> \
  --build-arg FIRST_CONVERSION_RATE=<First conversion rate> \
  --build-arg HAS_POOLS=<boolean> \
  --build-arg LCD_URL=<LCD URL> \
  --build-arg MAIN_TITLE=<App title> \
  --build-arg RPC_URL=<RPC URL> \
  --build-arg WASM_CW20_CODE_ID=<Wasm CW20 code_id> \
  --build-arg WASM_SWAP_CODE_ID=<Wasm SWAP code_id> \
  --build-arg WS_URL=<WebSocket URL> \
  .

Use the Docker image

docker run --name almerico --rm almerico

Customize the explorer

To customize the configuration edit the config.json file which is in the /src/config folder.

Customize the Vue.js CLI configuration

In order to properly customize the Vue.js CLI configuration please refer to the official configuration page.