Merge pull request #23 from mars-protocol/docker-envvars

Add ability to specify endpoints with Docker

.env.production

@@ -0,0 +1,7 @@
+# DO NOT EDIT THIS FILE WHEN USING DOCKER
+# These values are used to replace the values in the built app, 
+# you should pass environment variables as defined in README.md
+NEXT_PUBLIC_NETWORK=APP_NEXT_NETWORK
+NEXT_PUBLIC_RPC=APP_NEXT_RPC
+NEXT_PUBLIC_GQL=APP_NEXT_GQL
+NEXT_PUBLIC_REST=APP_NEXT_REST

Dockerfile

@@ -1,13 +1,6 @@
 FROM node:19-alpine as builder
 WORKDIR /app
 
-# This overrides the parameters during the build time.
-# You have to do this as passing env variables alone (or via .env file) is not enough.
-ARG NEXT_PUBLIC_RPC=https://rpc-osmosis.blockapsis.com
-ARG NEXT_PUBLIC_REST=https://lcd-osmosis.blockapsis.com
-ARG NEXT_PUBLIC_NETWORK=mainnet
-ARG NEXT_PUBLIC_GQL=https://rpc-osmosis.blockapsis.com
-
 COPY package.json yarn.lock ./
 RUN yarn install
 COPY . .
@@ -24,6 +17,11 @@ COPY --from=builder /app/next.config.js .
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
+COPY entrypoint.sh .
+
+RUN apk add --no-cache --upgrade bash
+RUN ["chmod", "+x", "./entrypoint.sh"]
+ENTRYPOINT ["./entrypoint.sh"]
 
 EXPOSE 3000
 CMD ["node", "server.js"]

README.md

@@ -20,6 +20,34 @@ Start web server
 yarn && yarn dev
 ```
 
+### 2.1 Custom node endpoints using non-Docker deployments
+
+Copy `.env.example` to `.env` and modify the values to suit your needs.
+
+### 2.2 Custom node endpoints using Docker
+
+We allow the use of environment variables to be passed to the Docker container to specify custom endpoints for the app. The variables are:
+
+
+|Variable|Description|Default|
+|--------|-----------|-------|
+|NETWORK|Flag for mainnet or testnet|mainnet|
+|URL_GQL|The Hive GraphQL endpoint to use|https://osmosis-node.marsprotocol.io/GGSFGSFGFG34/osmosis-hive-front/graphql|
+|URL_REST|The node REST endpoint to use|https://lcd-osmosis.blockapsis.com|
+|URL_RPC|The node RPC endpoint to use|https://rpc-osmosis.blockapsis.com|
+
+**Sample Docker run command**
+
+This command will start the container in interactive mode with port 3000 bound to localhost and print logs to stdout.
+
+```sh
+docker run -it -p 3000:3000 \
+      -e NETWORK=mainnet \
+      -e URL_GQL=https://your-hive-endpoint.com \
+      -e URL_REST=https://your-rest-endpoint.com \
+      -e URL_RPC=https://your-rpc-endpoint.com mars-interface:latest
+```
+
 ## 3. Text and translations
 
 This repository makes use of a [translation repository](https://github.com/mars-protocol/translations). This repository containes all of the translation key values that are used within the UI. The rationale is to have no _hardcoded_ display string values in this repository.

entrypoint.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+# no verbose
+set +x
+nextFolder='/app/.next'
+# create the config file from environment variables
+envFilename='override.conf'
+echo "APP_NEXT_NETWORK=$NETWORK" >> $envFilename
+echo "APP_NEXT_GQL=$URL_GQL" >> $envFilename
+echo "APP_NEXT_REST=$URL_REST" >> $envFilename
+echo "APP_NEXT_RPC=$URL_RPC" >> $envFilename
+function apply_path {
+  # read all config file  
+  while read line; do
+    # no comment or not empty
+    if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
+      continue
+    fi
+    
+    # split
+    configName="$(cut -d'=' -f1 <<<"$line")"
+    configValue="$(cut -d'=' -f2 <<<"$line")"
+    
+    # replace all config values in built app with the ones defined in override
+    find $nextFolder \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#$configName#$configValue#g"
+    
+  done < $envFilename
+}
+apply_path
+exec "$@"

src/components/common/Containers/CommonContainer.tsx

@@ -9,7 +9,7 @@ import {
 } from '@marsprotocol/wallet-connector'
 import { useQueryClient } from '@tanstack/react-query'
 import { MARS_SYMBOL } from 'constants/appConstants'
-import { IS_TESTNET } from 'constants/env'
+import { NETWORK } from 'constants/env'
 import {
   useBlockHeight,
   useDepositAndDebt,
@@ -77,7 +77,7 @@ export const CommonContainer = ({ children }: CommonContainerProps) => {
   // SETTERS
   // ------------------
   useEffect(() => {
-    if (!IS_TESTNET) {
+    if (NETWORK === 'mainnet') {
       setCurrentNetwork(Network.MAINNET)
     }
     loadNetworkConfig()

src/components/common/CosmosWalletConnectProvider/CosmosWalletConnectProvider.tsx

@@ -1,6 +1,6 @@
 import { ChainInfoID, WalletID, WalletManagerProvider } from '@marsprotocol/wallet-connector'
 import { CircularProgress, SVG } from 'components/common'
-import { IS_TESTNET } from 'constants/env'
+import { NETWORK } from 'constants/env'
 import { useEffect, useState } from 'react'
 
 import styles from './CosmosWalletConnectProvider.module.scss'
@@ -21,7 +21,7 @@ export const CosmosWalletConnectProvider = ({ children }: Props) => {
     if (chainInfoOverrides) return
 
     const fetchConfig = async () => {
-      const file = await import(`../../../configs/${IS_TESTNET ? 'osmo-test-4' : 'osmosis-1'}.ts`)
+      const file = await import(`../../../configs/${NETWORK !== 'mainnet' ? 'osmo-test-4' : 'osmosis-1'}.ts`)
 
       const networkConfig: NetworkConfig = file.NETWORK_CONFIG
 

src/constants/env.ts

@@ -1,5 +1,4 @@
 export const NETWORK = process.env.NEXT_PUBLIC_NETWORK
-export const IS_TESTNET = NETWORK !== 'mainnet'
 export const URL_GQL = process.env.NEXT_PUBLIC_GQL
 export const URL_REST = process.env.NEXT_PUBLIC_REST
 export const URL_RPC = process.env.NEXT_PUBLIC_RPC

src/libs/council.ts

@@ -1,9 +1,9 @@
 import { WalletID } from '@marsprotocol/wallet-connector'
-import { IS_TESTNET } from 'constants/env'
+import { NETWORK } from 'constants/env'
 import { DocURL } from 'types/enums/docURL'
 
 export function getCouncilLink(currentProvider?: WalletID): string {
-  if (IS_TESTNET) return DocURL.COUNCIL_TESTNET_URL
+  if (NETWORK !== 'mainnet') return DocURL.COUNCIL_TESTNET_URL
 
   if (!currentProvider) return DocURL.COUNCIL_URL