package.json

@@ -1,6 +1,7 @@
 {
   "name": "cosmos-multisig-ui",
   "private": true,
+  "version": "0.1.0",
   "scripts": {
     "dev": "next dev",
     "test": "jest --watch",

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_URL: ${DGRAPH_URL:-http://alpha:8080/graphql}
       NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN}
       NEXT_PUBLIC_REGISTRY_NAME: ${NEXT_PUBLIC_REGISTRY_NAME}
       NEXT_PUBLIC_LOGO: ${NEXT_PUBLIC_LOGO}
@@ -20,10 +19,14 @@ 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"
     healthcheck:

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