Update port mapping for multisig app

components/ChainConnect/DialogButton.tsx

@@ -1,6 +1,5 @@
 import { useChains } from "@/context/ChainsContext";
 import { isChainInfoFilled } from "@/context/ChainsContext/helpers";
-import { env } from 'next-runtime-env';
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { DialogTrigger } from "../ui/dialog";
 import { Skeleton } from "../ui/skeleton";
@@ -27,8 +26,7 @@ export function ChainHeader() {
 }
 
 export default function DialogButton() {
-  console.log("MULTICHAIN PUBLIC DIALOG BUTTION",env('NEXT_PUBLIC_MULTICHAIN'));
-  const showChainSelect = env('NEXT_PUBLIC_MULTICHAIN')?.toLowerCase() === "true";
+  const showChainSelect = process.env.NEXT_PUBLIC_MULTICHAIN?.toLowerCase() === "true";
 
   return showChainSelect ? (
     <DialogTrigger>

components/head.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { PublicEnvScript } from 'next-runtime-env';
 import NextHead from "next/head";
 import { string } from "prop-types";
 
@@ -21,7 +20,6 @@ const Head = (props: Props) => (
     <meta property="og:url" content={props.url || defaultOGURL} />
     <meta property="og:title" content={props.title || ""} />
     <meta property="og:description" content={props.description || defaultDescription} />
-    <PublicEnvScript />
   </NextHead>
 );
 

context/ChainsContext/service.tsx

@@ -14,7 +14,6 @@ import {
   setShaInStorage,
 } from "./storage";
 import { ChainItems } from "./types";
-import { env } from "next-runtime-env";
 
 export const useChainsFromRegistry = () => {
   const [chainItems, setChainItems] = useState<ChainItems>({
@@ -74,9 +73,7 @@ export const useChainsFromRegistry = () => {
 export const getNodeFromArray = async (nodeArray: readonly string[]) => {
   let secureNodes: readonly string[] = [];
 
-  console.log(env('NEXT_PUBLIC_IS_HTTP_ENABLED'));
-
-  if (env('NEXT_PUBLIC_IS_HTTP_ENABLED')?.toLowerCase() === "true") {
+  if (process.env.NEXT_PUBLIC_IS_HTTP_ENABLED?.toLowerCase() === "true") {
     // Allow all nodes, HTTP or HTTPS
     secureNodes = nodeArray;
   } else {

context/ChainsContext/storage.tsx

@@ -1,7 +1,6 @@
 import { RegistryAsset } from "@/types/chainRegistry";
 import { emptyChain } from "./helpers";
 import { ChainInfo, ChainItems, ExplorerLinks } from "./types";
-import { env } from "next-runtime-env";
 
 const registryShaStorageKey = "context-registry-sha";
 export const getShaFromStorage = () => localStorage.getItem(registryShaStorageKey);
@@ -143,23 +142,23 @@ export const getChainFromUrl = (chainName: string) => {
 };
 
 export const getChainFromEnvfile = (chainName: string) => {
-  const registryName = env("NEXT_PUBLIC_REGISTRY_NAME") || "";
+  const registryName = process.env.NEXT_PUBLIC_REGISTRY_NAME || "";
   if (chainName && registryName !== chainName) {
     return { registryName: chainName };
   }
 
-  const logo = env("NEXT_PUBLIC_LOGO");
-  const chainId = env("NEXT_PUBLIC_CHAIN_ID");
-  const chainDisplayName = env("NEXT_PUBLIC_CHAIN_DISPLAY_NAME");
-  const nodeAddresses = env("NEXT_PUBLIC_NODE_ADDRESSES");
-  const denom = env("NEXT_PUBLIC_DENOM");
-  const displayDenom = env("NEXT_PUBLIC_DISPLAY_DENOM");
-  const displayDenomExponent = env("NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT");
-  const assets = env("NEXT_PUBLIC_ASSETS");
-  const gasPrice = env("NEXT_PUBLIC_GAS_PRICE");
-  const addressPrefix = env("NEXT_PUBLIC_ADDRESS_PREFIX");
-  // An object containing link 'templates') for txs and accounts
-  const explorerLinks = env("NEXT_PUBLIC_EXPLORER_LINKS");
+  const logo = process.env.NEXT_PUBLIC_LOGO;
+  const chainId = process.env.NEXT_PUBLIC_CHAIN_ID;
+  const chainDisplayName = process.env.NEXT_PUBLIC_CHAIN_DISPLAY_NAME;
+  const nodeAddresses = process.env.NEXT_PUBLIC_NODE_ADDRESSES;
+  const denom = process.env.NEXT_PUBLIC_DENOM;
+  const displayDenom = process.env.NEXT_PUBLIC_DISPLAY_DENOM;
+  const displayDenomExponent = process.env.NEXT_PUBLIC_DISPLAY_DENOM_EXPONENT;
+  const assets = process.env.NEXT_PUBLIC_ASSETS;
+  const gasPrice = process.env.NEXT_PUBLIC_GAS_PRICE;
+  const addressPrefix = process.env.NEXT_PUBLIC_ADDRESS_PREFIX;
+  // An object containing link templates for txs and accounts
+  const explorerLinks = process.env.NEXT_PUBLIC_EXPLORER_LINKS;
 
   const nodeAddressesValue: readonly string[] = JSON.parse(nodeAddresses || "[]");
   const assetsValue: readonly RegistryAsset[] = JSON.parse(assets || "[]");

package-lock.json

@@ -1,12 +1,10 @@
 {
   "name": "cosmos-multisig-ui",
-  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cosmos-multisig-ui",
-      "version": "0.1.2",
       "dependencies": {
         "@cosmjs/amino": "^0.33.0",
         "@cosmjs/cosmwasm-stargate": "^0.33.0",
@@ -71,7 +69,6 @@
         "jest-environment-jsdom": "^29.7.0",
         "lucide-react": "^0.397.0",
         "next": "^14.2.23",
-        "next-runtime-env": "^3.3.0",
         "next-themes": "^0.3.0",
         "postcss": "8.4.38",
         "prettier": "^3.4.2",
@@ -89,10 +86,6 @@
         "typescript": "5.5.2",
         "vanilla-jsoneditor": "^0.23.7",
         "zod": "^3.23.8"
-      },
-      "devDependencies": {
-        "@import-meta-env/unplugin": "^0.6.2",
-        "dotenv": "^16.5.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -1421,32 +1414,6 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@import-meta-env/unplugin": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@import-meta-env/unplugin/-/unplugin-0.6.2.tgz",
-      "integrity": "sha512-m8TEQTgWekSkhlT9lkHBKQ4TDf5l8+BWvO6q/cxcsv1AvyfsOXUOHbvjhKSiVDaz/CDDCbOWc/aOAiPFRzcXGA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "dotenv": "^16.0.0",
-        "magic-string": "^0.30.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "unplugin": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "@import-meta-env/cli": "^0.7.0"
-      },
-      "peerDependenciesMeta": {
-        "@import-meta-env/cli": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4753,9 +4720,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -6462,19 +6429,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
-      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -10479,20 +10433,6 @@
         }
       }
     },
-    "node_modules/next-runtime-env": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/next-runtime-env/-/next-runtime-env-3.3.0.tgz",
-      "integrity": "sha512-JgKVnog9mNbjbjH9csVpMnz2tB2cT5sLF+7O47i6Ze/s/GoiKdV7dHhJHk1gwXpo6h5qPj5PTzryldtSjvrHuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "next": "^14",
-        "react": "^18"
-      },
-      "peerDependencies": {
-        "next": "^14",
-        "react": "^18"
-      }
-    },
     "node_modules/next-themes": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
@@ -13296,34 +13236,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/unplugin": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.5.tgz",
-      "integrity": "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.14.1",
-        "picomatch": "^4.0.2",
-        "webpack-virtual-modules": "^0.6.2"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      }
-    },
-    "node_modules/unplugin/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
@@ -13597,13 +13509,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/webpack-virtual-modules": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
-      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",

package.json

@@ -1,9 +1,8 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
-  "version": "0.1.2",
   "scripts": {
-    "dev": "next dev -p 7000",
+    "dev": "next dev",
     "test": "jest --watch",
     "test:ci": "jest",
     "build": "next build",
@@ -76,7 +75,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "lucide-react": "^0.397.0",
     "next": "^14.2.23",
-    "next-runtime-env": "^3.3.0",
     "next-themes": "^0.3.0",
     "postcss": "8.4.38",
     "prettier": "^3.4.2",
@@ -94,10 +92,5 @@
     "typescript": "5.5.2",
     "vanilla-jsoneditor": "^0.23.7",
     "zod": "^3.23.8"
-  },
-  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
-  "devDependencies": {
-    "@import-meta-env/unplugin": "^0.6.2",
-    "dotenv": "^16.5.0"
   }
 }

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,8 +4,9 @@ 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_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}
       NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}
@@ -19,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,24 +5,7 @@ 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_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_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}"
@@ -41,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
   ...
   ```
 

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);
-  }
-};