From 1745842c9692ae336c467dc8d0b4a52f305d8991 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Tue, 27 May 2025 15:18:43 +0530 Subject: [PATCH 1/7] Add laconic network to keplr wallet on app load --- package.json | 1 + pages/_app.tsx | 6 +++ public/assets/laconic-network.json | 45 +++++++++++++++++++ .../docker-compose-cosmos-multisig-ui.yml | 2 +- .../stacks/cosmos-multisig-ui/README.md | 6 --- utils/keplr.ts | 32 +++++++++++++ 6 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 public/assets/laconic-network.json create mode 100644 utils/keplr.ts diff --git a/package.json b/package.json index c9908b1..cfc6a62 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "cosmos-multisig-ui", "private": true, + "version": "0.1.0", "scripts": { "dev": "next dev", "test": "jest --watch", diff --git a/pages/_app.tsx b/pages/_app.tsx index 8627ad5..61019ba 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,9 +4,15 @@ import { TooltipProvider } from "@/components/ui/tooltip"; import ThemeProvider from "@/context/ThemesContext"; import type { AppProps } from "next/app"; import { ChainsProvider } from "../context/ChainsContext"; +import { useEffect } from "react"; +import { suggestChainToKeplr } from "@/utils/keplr"; import "@/styles/globals.css"; export default function MultisigApp({ Component, pageProps }: AppProps) { + useEffect(() => { + suggestChainToKeplr(); + }, []); + return ( diff --git a/public/assets/laconic-network.json b/public/assets/laconic-network.json new file mode 100644 index 0000000..4581d1a --- /dev/null +++ b/public/assets/laconic-network.json @@ -0,0 +1,45 @@ +{ + "chainId": "laconic-mainnet", + "chainName": "Laconic", + "rpc": "http://localhost:26657", + "rest": "https://localhost:1317", + "bip44": { + "coinType": 118 + }, + "bech32Config": { + "bech32PrefixAccAddr": "laconic", + "bech32PrefixAccPub": "laconipub", + "bech32PrefixValAddr": "laconicvaloper", + "bech32PrefixValPub": "laconicvaloperpub", + "bech32PrefixConsAddr": "laconicvalcons", + "bech32PrefixConsPub": "laconicvalconspub" + }, + "currencies": [ + { + "coinDenom": "ALNT", + "coinMinimalDenom": "alnt", + "coinDecimals": 18 + } + ], + "feeCurrencies": [ + { + "coinDenom": "ALNT", + "coinMinimalDenom": "alnt", + "coinDecimals": 18 + } + ], + "stakeCurrency": { + "coinDenom": "ALNT", + "coinMinimalDenom": "alnt", + "coinDecimals": 18 + }, + "gasPriceStep": { + "low": 0.01, + "average": 0.01, + "high": 0.02 + }, + "features": [ + "stargate", + "ibc-transfer" + ] +} diff --git a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml index 885f9d2..7a1c11d 100644 --- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml +++ b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml @@ -4,7 +4,7 @@ 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 + network_mode: "host" # Network mode is host so that browser app and backend can use the same node localhost RPC URL environment: DGRAPH_URL: ${DGRAPH_URL:-http://localhost:8080/graphql} NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN} diff --git a/stack-orchestrator/stacks/cosmos-multisig-ui/README.md b/stack-orchestrator/stacks/cosmos-multisig-ui/README.md index 40fe0d3..8816dfb 100644 --- a/stack-orchestrator/stacks/cosmos-multisig-ui/README.md +++ b/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 ... ``` diff --git a/utils/keplr.ts b/utils/keplr.ts new file mode 100644 index 0000000..941f608 --- /dev/null +++ b/utils/keplr.ts @@ -0,0 +1,32 @@ +import { Keplr } from "@keplr-wallet/types"; + +declare global { + interface Window { + keplr: Keplr & { + experimentalSuggestChain: (chainConfig: any) => Promise; + }; + } +} + +export const suggestChainToKeplr = async () => { + try { + if (typeof window === 'undefined') { + console.error('This code 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/laconic-network.json'); + const chainConfig = await response.json(); + + await window.keplr.experimentalSuggestChain(chainConfig); + console.log('Successfully suggested chain to Keplr'); + } catch (error) { + console.error('Error suggesting chain to Keplr:', error); + } + }; + -- 2.45.2 From 9be0542dd381ef523bf5d6096389e2edbcb4c5a7 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Tue, 27 May 2025 16:33:18 +0530 Subject: [PATCH 2/7] Mount custom network config file in container --- public/assets/laconic-network.json | 45 ------------------- .../docker-compose-cosmos-multisig-ui.yml | 2 + utils/keplr.ts | 44 +++++++++--------- 3 files changed, 26 insertions(+), 65 deletions(-) delete mode 100644 public/assets/laconic-network.json diff --git a/public/assets/laconic-network.json b/public/assets/laconic-network.json deleted file mode 100644 index 4581d1a..0000000 --- a/public/assets/laconic-network.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "chainId": "laconic-mainnet", - "chainName": "Laconic", - "rpc": "http://localhost:26657", - "rest": "https://localhost:1317", - "bip44": { - "coinType": 118 - }, - "bech32Config": { - "bech32PrefixAccAddr": "laconic", - "bech32PrefixAccPub": "laconipub", - "bech32PrefixValAddr": "laconicvaloper", - "bech32PrefixValPub": "laconicvaloperpub", - "bech32PrefixConsAddr": "laconicvalcons", - "bech32PrefixConsPub": "laconicvalconspub" - }, - "currencies": [ - { - "coinDenom": "ALNT", - "coinMinimalDenom": "alnt", - "coinDecimals": 18 - } - ], - "feeCurrencies": [ - { - "coinDenom": "ALNT", - "coinMinimalDenom": "alnt", - "coinDecimals": 18 - } - ], - "stakeCurrency": { - "coinDenom": "ALNT", - "coinMinimalDenom": "alnt", - "coinDecimals": 18 - }, - "gasPriceStep": { - "low": 0.01, - "average": 0.01, - "high": 0.02 - }, - "features": [ - "stargate", - "ibc-transfer" - ] -} diff --git a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml index 7a1c11d..95de30f 100644 --- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml +++ b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml @@ -20,10 +20,12 @@ 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} 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/custom-network.json}:/app/public/assets/custom-network.json ports: - "3000" healthcheck: diff --git a/utils/keplr.ts b/utils/keplr.ts index 941f608..9dce20b 100644 --- a/utils/keplr.ts +++ b/utils/keplr.ts @@ -9,24 +9,28 @@ declare global { } export const suggestChainToKeplr = async () => { - try { - if (typeof window === 'undefined') { - console.error('This code 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/laconic-network.json'); - const chainConfig = await response.json(); - - await window.keplr.experimentalSuggestChain(chainConfig); - console.log('Successfully suggested chain to Keplr'); - } catch (error) { - console.error('Error suggesting chain to Keplr:', error); + 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/custom-network.json'); + + if (!response.ok) { + console.warn(`Chain config file not found. Skipping Keplr suggestion.`); + return; + } + + const chainConfig = await response.json(); + await window.keplr.experimentalSuggestChain(chainConfig); + console.log('Successfully suggested chain to Keplr'); + } catch (error) { + console.error('Error suggesting chain to Keplr:', error); + } +}; -- 2.45.2 From a541f9f8772b0411602b31bab0f7f48ba4f65421 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Tue, 27 May 2025 17:13:25 +0530 Subject: [PATCH 3/7] Update network JSON file name --- .../compose/docker-compose-cosmos-multisig-ui.yml | 2 +- utils/keplr.ts | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml index 95de30f..f6db1ab 100644 --- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml +++ b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml @@ -25,7 +25,7 @@ services: 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/custom-network.json}:/app/public/assets/custom-network.json + - ${CHAIN_CONFIG_PATH:-../config/cosmos-multisig-ui/network.json}:/app/public/assets/network.json ports: - "3000" healthcheck: diff --git a/utils/keplr.ts b/utils/keplr.ts index 9dce20b..e3d298f 100644 --- a/utils/keplr.ts +++ b/utils/keplr.ts @@ -20,14 +20,16 @@ export const suggestChainToKeplr = async () => { return; } - const response = await fetch('/assets/custom-network.json'); + const response = await fetch('/assets/network.json'); - if (!response.ok) { - console.warn(`Chain config file not found. Skipping Keplr suggestion.`); + let chainConfig; + try { + chainConfig = await response.json(); + } catch (jsonError) { + console.error('Valid chain config file not found.'); return; } - const chainConfig = await response.json(); await window.keplr.experimentalSuggestChain(chainConfig); console.log('Successfully suggested chain to Keplr'); } catch (error) { -- 2.45.2 From 9079534c372dd3a9a24b87c5edbbb2eea6e95269 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Tue, 27 May 2025 18:42:08 +0530 Subject: [PATCH 4/7] Make network mode configurable --- .../compose/docker-compose-cosmos-multisig-ui.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml index f6db1ab..b05bb92 100644 --- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml +++ b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml @@ -4,7 +4,6 @@ services: restart: unless-stopped depends_on: - alpha - network_mode: "host" # Network mode is host so that browser app and backend can use the same node localhost RPC URL environment: DGRAPH_URL: ${DGRAPH_URL:-http://localhost:8080/graphql} NEXT_PUBLIC_MULTICHAIN: ${NEXT_PUBLIC_MULTICHAIN} @@ -21,6 +20,8 @@ services: 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:-}" # Network mode is host so that browser app and backend can use the same node localhost RPC URL command: ["bash", "/cosmos-script/run.sh"] volumes: - ../config/cosmos-multisig-ui/run.sh:/cosmos-script/run.sh -- 2.45.2 From 7acf6a2c4c15869b9b7561d65de98af288b4d9ec Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Tue, 27 May 2025 18:48:57 +0530 Subject: [PATCH 5/7] Fix import order --- pages/_app.tsx | 6 +++--- .../compose/docker-compose-cosmos-multisig-ui.yml | 2 +- utils/keplr.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 61019ba..c72157b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,11 +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 type { AppProps } from "next/app"; -import { ChainsProvider } from "../context/ChainsContext"; -import { useEffect } from "react"; 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(() => { diff --git a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml index b05bb92..f83d99e 100644 --- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml +++ b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml @@ -21,7 +21,7 @@ services: 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:-}" # Network mode is host so that browser app and backend can use the same node localhost RPC URL + network_mode: "${USE_HOST_NETWORK:-}" command: ["bash", "/cosmos-script/run.sh"] volumes: - ../config/cosmos-multisig-ui/run.sh:/cosmos-script/run.sh diff --git a/utils/keplr.ts b/utils/keplr.ts index e3d298f..d0c0eba 100644 --- a/utils/keplr.ts +++ b/utils/keplr.ts @@ -26,7 +26,7 @@ export const suggestChainToKeplr = async () => { try { chainConfig = await response.json(); } catch (jsonError) { - console.error('Valid chain config file not found.'); + console.log('Valid chain config file not found.'); return; } -- 2.45.2 From 125f39aaa699f6caeb31c0e0e95d7065a6e3fab6 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Wed, 28 May 2025 16:05:28 +0530 Subject: [PATCH 6/7] Add type for chain config --- utils/keplr.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/utils/keplr.ts b/utils/keplr.ts index d0c0eba..d8b2c59 100644 --- a/utils/keplr.ts +++ b/utils/keplr.ts @@ -1,9 +1,9 @@ -import { Keplr } from "@keplr-wallet/types"; +import { Keplr, ChainInfo } from "@keplr-wallet/types"; declare global { interface Window { keplr: Keplr & { - experimentalSuggestChain: (chainConfig: any) => Promise; + experimentalSuggestChain: (chainConfig: ChainInfo) => Promise; }; } } @@ -25,8 +25,8 @@ export const suggestChainToKeplr = async () => { let chainConfig; try { chainConfig = await response.json(); - } catch (jsonError) { - console.log('Valid chain config file not found.'); + } catch (err: unknown) { + console.log('Valid chain config file not found.', err); return; } -- 2.45.2 From 69186e2979cfd64e94b838e0fe39007dee5a3909 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Wed, 28 May 2025 16:54:17 +0530 Subject: [PATCH 7/7] Update docker compose file --- .../compose/docker-compose-cosmos-multisig-ui.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml index f83d99e..550d020 100644 --- a/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml +++ b/stack-orchestrator/compose/docker-compose-cosmos-multisig-ui.yml @@ -5,7 +5,7 @@ services: depends_on: - alpha 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} -- 2.45.2