Add env for filtering public chains to show in app (#7)

Part of https://www.notion.so/Laconic-Mainnet-Plan-1eca6b22d47280569cd0d1e6d711d949

Reviewed-on: #7
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>
Co-committed-by: Nabarun <nabarun@deepstacksoft.com>

README.md

@@ -42,7 +42,7 @@ Copy the `.env.sample` file and rename it to `.env.local`
 
 ### 2. Run a local cosmos-sdk Simapp instance
 
-It's recommended that you make your simapp instance mimic the denomination of cosmoshub-4 (`uatom`). Put the local address of your node as the value for `NEXT_PUBLIC_NODE_ADDRESS` in your `.env.local` file.
+It's recommended that you make your simapp instance mimic the denomination of cosmoshub-4 (`uatom`). Put the local address of your node as the value for `NEXT_PUBLIC_NODE_ADDRESSES` in your `.env.local` file.
 
 A more in depth tutorial on this is coming soon :)
 

context/ChainsContext/index.tsx

@@ -3,7 +3,7 @@ import { toastError } from "@/lib/utils";
 import { ReactNode, createContext, useContext, useEffect, useReducer } from "react";
 import { emptyChain, isChainInfoFilled, setChain, setChains, setChainsError } from "./helpers";
 import { getChain, getNodeFromArray, useChainsFromRegistry } from "./service";
-import { addLocalChainInStorage, addRecentChainNameInStorage, setChainInUrl } from "./storage";
+import { addLocalChainInStorage, addRecentChainNameInStorage, getChainFromEnvfile, setChainInUrl } from "./storage";
 import { Action, ChainsContextType, Dispatch, State } from "./types";
 
 const ChainsContext = createContext<ChainsContextType | undefined>(undefined);
@@ -61,6 +61,8 @@ interface ChainsProviderProps {
   readonly children: ReactNode;
 }
 
+const envfileChain = getChainFromEnvfile('');
+
 export const ChainsProvider = ({ children }: ChainsProviderProps) => {
   const [state, dispatch] = useReducer(chainsReducer, {
     chain: emptyChain,
@@ -70,6 +72,10 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
   });
 
   const { chainItems, chainItemsError } = useChainsFromRegistry();
+  
+  if (isChainInfoFilled(envfileChain)) {
+    chainItems.localnets.set(envfileChain.registryName, envfileChain);
+  }
 
   useEffect(() => {
     setChains(dispatch, chainItems);

context/ChainsContext/service.tsx

@@ -104,19 +104,33 @@ export const getChain = (chains: ChainItems) => {
   // Avoid app from thinking the /api route is a registryName
   const chainNameFromUrl = rootRoute === "api" ? "" : rootRoute;
 
+  // Get chain only after public chains have been fetched from registry
+  if (!(chains.mainnets.size || chains.testnets.size)) {
+    return emptyChain;
+  }
+
   const recentChain = getRecentChainFromStorage(chains);
   if (!chainNameFromUrl && isChainInfoFilled(recentChain)) {
     return recentChain;
   }
 
+  // Set chain if no reccent chain and chain name set in URL
+
+  // Check if info set in URL
   const urlChain = getChainFromUrl(chainNameFromUrl);
+  let storedChain = getChainFromStorage(chainNameFromUrl, chains);
+  let chain = { ...storedChain, ...urlChain };
+  if (isChainInfoFilled(chain)) {
+    return chain;
+  }
+
+  // Check if info set in env
   const envfileChain = getChainFromEnvfile(chainNameFromUrl);
-  const storedChain = getChainFromStorage(
-    chainNameFromUrl || envfileChain.registryName || "cosmoshub",
+  storedChain = getChainFromStorage(
+    envfileChain.registryName || "cosmoshub",
     chains,
   );
-
-  const chain = { ...storedChain, ...envfileChain, ...urlChain };
+  chain = { ...storedChain, ...envfileChain };
 
   return isChainInfoFilled(chain) ? chain : emptyChain;
 };

context/ChainsContext/storage.tsx

@@ -165,7 +165,7 @@ export const getChainFromEnvfile = (chainName: string) => {
   const explorerLinksValue: Partial<ExplorerLinks> = JSON.parse(explorerLinks || "{}");
 
   const envfileChain: Partial<ChainInfo> = {
-    registryName: chainName,
+    registryName,
     ...(logo && { logo }),
     ...(chainId && { chainId }),
     ...(chainDisplayName && { chainDisplayName }),

lib/chainRegistry.ts

@@ -11,6 +11,9 @@ const mainnetsUrl = `https://api.github.com/repos/${chainRegistryRepo}/contents`
 const testnetsUrl = `https://api.github.com/repos/${chainRegistryRepo}/contents/testnets`;
 const registryCdnUrl = `https://cdn.jsdelivr.net/gh/${chainRegistryRepo}@${repoBranch}`;
 
+const registryEnabledChains = process.env.NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS;
+const registryEnabledChainsValue: readonly string[] = JSON.parse(registryEnabledChains || "[]");
+
 const getShaFromRegistry = async () => {
   const { sha }: { sha: string } = await requestGhJson(shaUrl);
   return sha;
@@ -36,6 +39,11 @@ const getChainsFromRegistry = async () => {
       continue;
     }
 
+    // Skip if chain is not included in NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS (unset env to fetch all chains)
+    if (registryEnabledChainsValue.length && !registryEnabledChainsValue.includes(path)) {
+      continue;
+    }
+
     mainnetPromisesMap.set(path, {
       chainInfo: requestGhJson(`${registryCdnUrl}/${path}/chain.json`),
       assetList: requestGhJson(`${registryCdnUrl}/${path}/assetlist.json`),
@@ -69,6 +77,11 @@ const getChainsFromRegistry = async () => {
       continue;
     }
 
+    // Skip if chain is not included in NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS (unset env to fetch all chains)
+    if (registryEnabledChainsValue.length && !registryEnabledChainsValue.includes(path)) {
+      continue;
+    }
+
     testnetPromisesMap.set(path, {
       chainInfo: requestGhJson(`${registryCdnUrl}/${path}/chain.json`),
       assetList: requestGhJson(`${registryCdnUrl}/${path}/assetlist.json`),

package.json

@@ -1,13 +1,13 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.3",
   "scripts": {
     "dev": "next dev",
     "test": "jest --watch",
     "test:ci": "jest",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 7000",
     "format": "prettier --write --log-level warn \"./**/*.{js,jsx,mjs,ts,tsx}\"",
     "lint": "eslint --max-warnings 0 \"./**/*.{js,jsx,mjs,ts,tsx}\"",
     "lint:fix": "eslint --max-warnings 0 \"./**/*.{js,jsx,mjs,ts,tsx}\" --fix"

stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml

@@ -5,8 +5,9 @@ services:
     depends_on:
       - alpha
     environment:
-      DGRAPH_URL: ${DGRAPH_URL:-http://alpha:8080/graphql}
+      DGRAPH_DOMAIN: ${DGRAPH_DOMAIN:-http://alpha:8080}
       NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN}
+      NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS: ${NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS}
       NEXT_PUBLIC_REGISTRY_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}
       NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}
       NEXT_PUBLIC_CHAIN_ID: ${NEXT_PUBLIC_CHAIN_ID}
@@ -28,9 +29,9 @@ services:
       - ../config/cosmos-multisig-ui/db-schema.graphql:/cosmos-script/db-schema.graphql
       - ${CHAIN_CONFIG_PATH:-../config/cosmos-multisig-ui/network.json}:/app/public/assets/network.json
     ports:
-      - "3000"
+      - "7000"
     healthcheck:
-      test: ["CMD", "nc", "-vz", "127.0.0.1", "3000"]
+      test: ["CMD", "nc", "-vz", "127.0.0.1", "7000"]
       interval: 20s
       timeout: 5s
       retries: 15

stack-orchestrator/config/cosmos-multisig-ui/run.sh

@@ -5,9 +5,28 @@ if [ -n "$CERC_SCRIPT_DEBUG" ]; then
   set -x
 fi
 
+# Export environment variables
+export DGRAPH_URL="${DGRAPH_DOMAIN}/graphql"
+export NEXT_PUBLIC_MULTICHAIN="${NEXT_PUBLIC_MULTICHAIN}"
+export NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS="${NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS}"
+export NEXT_PUBLIC_REGISTRY_NAME="${NEXT_PUBLIC_REGISTRY_NAME}"
+export NEXT_PUBLIC_LOGO="${NEXT_PUBLIC_LOGO}"
+export NEXT_PUBLIC_CHAIN_ID="${NEXT_PUBLIC_CHAIN_ID}"
+export NEXT_PUBLIC_CHAIN_DISPLAY_NAME="${NEXT_PUBLIC_CHAIN_DISPLAY_NAME}"
+export NEXT_PUBLIC_NODE_ADDRESSES="${NEXT_PUBLIC_NODE_ADDRESSES}"
+export NEXT_PUBLIC_DENOM="${NEXT_PUBLIC_DENOM}"
+export NEXT_PUBLIC_DISPLAY_DENOM="${NEXT_PUBLIC_DISPLAY_DENOM}"
+export NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT="${NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT}"
+export NEXT_PUBLIC_ASSETS="${NEXT_PUBLIC_ASSETS}"
+export NEXT_PUBLIC_GAS_PRICE="${NEXT_PUBLIC_GAS_PRICE}"
+export NEXT_PUBLIC_ADDRESS_PREFIX="${NEXT_PUBLIC_ADDRESS_PREFIX}"
+export NEXT_PUBLIC_IS_HTTP_ENABLED="${NEXT_PUBLIC_IS_HTTP_ENABLED}"
+
 echo "Using the following env variables:"
+echo "DGRAPH_DOMAIN: ${DGRAPH_DOMAIN}"
 echo "DGRAPH_URL: ${DGRAPH_URL}"
 echo "NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN}"
+echo "NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS: ${NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS}"
 echo "NEXT_PUBLIC_REGISTRY_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}"
 echo "NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}"
 echo "NEXT_PUBLIC_CHAIN_ID: ${NEXT_PUBLIC_CHAIN_ID}"
@@ -24,26 +43,12 @@ echo "NEXT_PUBLIC_IS_HTTP_ENABLED: ${NEXT_PUBLIC_IS_HTTP_ENABLED}"
 # Install dependencies
 npm install
 
-# Build with all required env vars
-DGRAPH_URL="${DGRAPH_URL}" \
-NEXT_PUBLIC_MULTICHAIN="${NEXT_PUBLIC_MULTICHAIN}" \
-NEXT_PUBLIC_REGISTRY_NAME="${NEXT_PUBLIC_REGISTRY_NAME}" \
-NEXT_PUBLIC_LOGO="${NEXT_PUBLIC_LOGO}" \
-NEXT_PUBLIC_CHAIN_ID="${NEXT_PUBLIC_CHAIN_ID}" \
-NEXT_PUBLIC_CHAIN_DISPLAY_NAME="${NEXT_PUBLIC_CHAIN_DISPLAY_NAME}" \
-NEXT_PUBLIC_NODE_ADDRESSES="${NEXT_PUBLIC_NODE_ADDRESSES}" \
-NEXT_PUBLIC_DENOM="${NEXT_PUBLIC_DENOM}" \
-NEXT_PUBLIC_DISPLAY_DENOM="${NEXT_PUBLIC_DISPLAY_DENOM}" \
-NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT="${NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT}" \
-NEXT_PUBLIC_ASSETS="${NEXT_PUBLIC_ASSETS}" \
-NEXT_PUBLIC_GAS_PRICE="${NEXT_PUBLIC_GAS_PRICE}" \
-NEXT_PUBLIC_ADDRESS_PREFIX="${NEXT_PUBLIC_ADDRESS_PREFIX}" \
-NEXT_PUBLIC_IS_HTTP_ENABLED="${NEXT_PUBLIC_IS_HTTP_ENABLED}" \
+# Build project
 npm run build
 
 # Load Dgraph schema
 echo "Posting schema to Dgraph..."
-curl -X POST localhost:8080/admin/schema -d @/cosmos-script/db-schema.graphql
+curl -X POST "${DGRAPH_DOMAIN}/admin/schema" -d @/cosmos-script/db-schema.graphql
 
 # Start Next.js production server
 echo "Starting Next.js app in production mode..."

stack-orchestrator/container-build/cerc-cosmos-multisig-ui/Dockerfile

@@ -38,4 +38,4 @@ COPY . .
 # Install app dependencies
 RUN npm install --legacy-peer-deps
 
-EXPOSE 3000
+EXPOSE 7000

stack-orchestrator/stacks/cosmos-multisig-ui/README.md

@@ -52,6 +52,9 @@ Instructions for running the `cosmos-multisig-ui` using [laconic-so](https://git
   # Allow multiple networks/chains in app
   NEXT_PUBLIC_MULTICHAIN=
 
+  # List of public chains to show in app / or leave empty to show all chains
+  NEXT_PUBLIC_REGISTRY_ENABLED_CHAINS=
+
   # Name of the chain registry
   NEXT_PUBLIC_REGISTRY_NAME=