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,7 +1,7 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.1.3",
   "scripts": {
     "dev": "next dev",
     "test": "jest --watch",

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

@@ -7,6 +7,7 @@ services:
     environment:
       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}

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

@@ -8,6 +8,7 @@ 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}"
@@ -25,6 +26,7 @@ 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}"

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=