installation.md

Prerequisites

1. Node and Yarn - Acquired using Node Version Manager (https://github.com/nvm-sh/nvm)

Quick Install for Prerequisites

1. Install Node Version Manager

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

2. Install the latest version of NodeJS

nvm install node # "node" is an alias for the latest version

3. Install the latest version of NPM for Node

nvm install-latest-npm # get the latest supported npm version on the current node version

4. Install Yarn

npm install --global yarn

Installation:

1. Running with yarn

yarn --ignore-engines && yarn serve

2. Building for web servers, like nginx, apache

yarn --ignore-engines && yarn build
cp -r ./dist/* <ROOT_OF_WEB_SERVER>

3. Running with docker

./docker.sh
docker run -d -p 8088:80 ping.pub/dashboard

Enable LCD for Ping.pub (do this on the config for your chain)

1. Set enable = true in ./config/app.toml

###############################################################################
###                           API Configuration                             ###
###############################################################################

[api]

# Enable defines if the API server should be enabled.
enable = true

# Swagger defines if swagger documentation should automatically be registered.
swagger = false

# Address defines the API server to listen on.
address = "tcp://0.0.0.0:1317"

# MaxOpenConnections defines the number of maximum open connections.
max-open-connections = 1000

2. add proxy server and enable CORS. NOTE: You must enable https as well.

server {
    server_name juno.api.ping.pub;
    listen 443;
    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Expose-Headers Content-Length;

        proxy_pass http://<HOST>:1317;

    }
}

3. config your blockchain in ./chains/mainnet

Theming

Colours live in the daisyUI themes in tailwind.config.js. Editing them re-themes the app; no component changes are needed.

// tailwind.config.js
daisyui: {
  themes: [
    {
      light: {
        ...require('daisyui/src/theming/themes')['[data-theme=light]'],
        primary: '#0f766e',
      },
    },
    {
      dark: {
        ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
        primary: '#2dd4bf',
        'base-100': '#0b1220', // cards, sidebar, header
        'base-200': '#111a2e', // page bands, table headers
      },
    },
  ],
},

Spreading the stock theme first means you only list what you want to change.

The tokens you will reach for most:

token	used for
primary	active nav, buttons, links, chart accent
base-100	cards, sidebar, header
base-200 / base-300	page bands, table headers, hover
base-content	default text colour
info success warning error	status text, badges, vote bars

Full list: https://daisyui.com/docs/colors/

Tailwind reads the config at startup, so restart the dev server after editing.

Two caveats:

• A component that hardcodes a colour (text-gray-400, bg-green-500, ...) will not follow the theme. Those are gradually being moved onto tokens.
• @ping-pub/widget injects its own daisyUI build at runtime, which would otherwise override these values. postcss.config.js re-emits the theme at a higher specificity so the app's config wins - keep that plugin if you fork.