Update port mapping for multisig app

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_ADDRESSES` 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_ADDRESS` 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, getChainFromEnvfile, setChainInUrl } from "./storage";
+import { addLocalChainInStorage, addRecentChainNameInStorage, setChainInUrl } from "./storage";
 import { Action, ChainsContextType, Dispatch, State } from "./types";
 
 const ChainsContext = createContext<ChainsContextType | undefined>(undefined);
@@ -61,8 +61,6 @@ interface ChainsProviderProps {
   readonly children: ReactNode;
 }
 
-const envfileChain = getChainFromEnvfile('');
-
 export const ChainsProvider = ({ children }: ChainsProviderProps) => {
   const [state, dispatch] = useReducer(chainsReducer, {
     chain: emptyChain,
@@ -72,10 +70,6 @@ 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,33 +104,19 @@ 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);
-  storedChain = getChainFromStorage(
-    envfileChain.registryName || "cosmoshub",
+  const storedChain = getChainFromStorage(
+    chainNameFromUrl || envfileChain.registryName || "cosmoshub",
     chains,
   );
-  chain = { ...storedChain, ...envfileChain };
+
+  const chain = { ...storedChain, ...envfileChain, ...urlChain };
 
   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,
+    registryName: chainName,
     ...(logo && { logo }),
     ...(chainId && { chainId }),
     ...(chainDisplayName && { chainDisplayName }),

lib/chainRegistry.ts

@@ -11,9 +11,6 @@ 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;
@@ -39,11 +36,6 @@ 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`),
@@ -77,11 +69,6 @@ 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,6 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
-  "version": "0.1.3",
   "scripts": {
     "dev": "next dev",
     "test": "jest --watch",

pages/_app.tsx

@@ -2,17 +2,11 @@ import Header from "@/components/Header";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import ThemeProvider from "@/context/ThemesContext";
-import { suggestChainToKeplr } from "@/utils/keplr";
-import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import { useEffect } from "react";
 import { ChainsProvider } from "../context/ChainsContext";
+import "@/styles/globals.css";
 
 export default function MultisigApp({ Component, pageProps }: AppProps) {
-  useEffect(() => {
-    suggestChainToKeplr();
-  }, []);
-
   return (
     <ChainsProvider>
       <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>

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

@@ -4,10 +4,10 @@ services:
     restart: unless-stopped
     depends_on:
       - alpha
+    network_mode: "host" # For local testing, to allow the container to directly access host machine ports from container
     environment:
-      DGRAPH_DOMAIN: ${DGRAPH_DOMAIN:-http://alpha:8080}
+      DGRAPH_URL: ${DGRAPH_URL:-http://localhost:8080/graphql}
       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}
@@ -20,14 +20,10 @@ services:
       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:-false}
-      CHAIN_CONFIG_PATH: ${CHAIN_CONFIG_PATH}
-      USE_HOST_NETWORK: ${USE_HOST_NETWORK}
-    network_mode: "${USE_HOST_NETWORK:-}"
     command: ["bash", "/cosmos-script/run.sh"]
     volumes:
       - ../config/cosmos-multisig-ui/run.sh:/cosmos-script/run.sh
       - ../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:
       - "7000"
     healthcheck:

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

@@ -5,28 +5,9 @@ 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}"
@@ -43,12 +24,26 @@ echo "NEXT_PUBLIC_IS_HTTP_ENABLED: ${NEXT_PUBLIC_IS_HTTP_ENABLED}"
 # Install dependencies
 npm install
 
-# Build project
+# 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}" \
 npm run build
 
 # Load Dgraph schema
 echo "Posting schema to Dgraph..."
-curl -X POST "${DGRAPH_DOMAIN}/admin/schema" -d @/cosmos-script/db-schema.graphql
+curl -X POST localhost:8080/admin/schema -d @/cosmos-script/db-schema.graphql
 
 # Start Next.js production server
 echo "Starting Next.js app in production mode..."

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

@@ -35,8 +35,14 @@ Instructions for running the `cosmos-multisig-ui` using [laconic-so](https://git
     ports:
       cosmos-multisig-ui:
       - 3000:3000
+      zero:
+      - 5080
+      - 6080
       alpha:
       - 8080:8080
+      - 9080
+      ratel:
+      - 8000
   ...
   ```
 
@@ -52,9 +58,6 @@ 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=
 

utils/keplr.ts

@@ -1,38 +0,0 @@
-import { Keplr, ChainInfo } from "@keplr-wallet/types";
-
-declare global {
-  interface Window {
-    keplr: Keplr & {
-      experimentalSuggestChain: (chainConfig: ChainInfo) => Promise<void>;
-    };
-  }
-}
-
-export const suggestChainToKeplr = async () => {
-  try {
-    if (typeof window === 'undefined') {
-      console.error('Method experimentalSuggestChain must be run in a browser environment.');
-      return;
-    }
-
-    if (!window.keplr) {
-      console.error('Keplr wallet not found. Please install the Keplr browser extension: https://www.keplr.app/');
-      return;
-    }
-
-    const response = await fetch('/assets/network.json');
-
-    let chainConfig;
-    try {
-      chainConfig = await response.json();
-    } catch (err: unknown) {
-      console.log('Valid chain config file not found.', err);
-      return;
-    }
-
-    await window.keplr.experimentalSuggestChain(chainConfig);
-    console.log('Successfully suggested chain to Keplr');
-  } catch (error) {
-    console.error('Error suggesting chain to Keplr:', error);
-  }
-};