Update env for dgraph URL (#5)

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: #5
Co-authored-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
Co-committed-by: ishavenikar <ishavenikar@noreply.git.vdb.to>

package.json

@@ -1,12 +1,13 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
+  "version": "0.1.2",
   "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"

pages/_app.tsx

@@ -2,11 +2,17 @@ import Header from "@/components/Header";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import ThemeProvider from "@/context/ThemesContext";
-import type { AppProps } from "next/app";
-import { ChainsProvider } from "../context/ChainsContext";
+import { suggestChainToKeplr } from "@/utils/keplr";
 import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { useEffect } from "react";
+import { ChainsProvider } from "../context/ChainsContext";
 
 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,9 +4,8 @@ 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_URL: ${DGRAPH_URL:-http://localhost:8080/graphql}
+      DGRAPH_DOMAIN: ${DGRAPH_DOMAIN:-http://alpha:8080}
       NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN}
       NEXT_PUBLIC_REGISTRY_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}
       NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}
@@ -20,14 +19,18 @@ 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:
-      - "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,7 +5,24 @@ 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}"
@@ -24,26 +41,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

@@ -35,14 +35,8 @@ 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

@@ -0,0 +1,38 @@
+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);
+  }
+};