🔧 Use runtime config for constant (#181)

Author: nwingt

.env

@@ -0,0 +1,23 @@
+IS_TESTNET=TRUE
+
+SITE_URL=https://likecoin-nft-book-press-testnet.netlify.app
+
+CHAIN_ID=likecoin-public-testnet-5
+CHAIN_NAME=LikeCoin public test chain
+CHAIN_DENOM=EKIL
+CHAIN_MINIMAL_DENOM=nanoekil
+COINGECKO_ID=| undefined
+RPC_URL=https://node.testnet.like.co/rpc/
+LCD_URL=https://node.testnet.like.co
+CHAIN_EXPLORER_URL=https://node.testnet.like.co/cosmos/tx/v1beta1/txs
+
+LIKER_NFT_FEE_WALLET=like1yney2cqn5qdrlc50yr5l53898ufdhxafqz9gxp
+LIKER_NFT_TARGET_ADDRESS=like1yney2cqn5qdrlc50yr5l53898ufdhxafqz9gxp
+
+AUTHCORE_API_HOST=https://likecoin-integration-test.authcore.io
+LIKER_LAND_URL=https://rinkeby.liker.land
+LIKE_CO_HOST=https://rinkeby.like.co
+LIKE_CO_API=https://api.rinkeby.like.co
+APP_LIKE_CO_URL=https://app.rinkeby.like.co
+NFT_MARKETPLACE_URL=https://likecoin-nft-marketplace-testnet.netlify.app
+ISCN_TOOLS_URL=https://likecoin-iscn-nft-tools-testnet.netlify.app

.env.production

@@ -0,0 +1,23 @@
+IS_TESTNET=FALSE
+
+SITE_URL=https://likecoin.github.io/nft-book-press
+
+CHAIN_ID=likecoin-mainnet-2
+CHAIN_NAME=LikeCoin
+CHAIN_DENOM=LIKE
+CHAIN_MINIMAL_DENOM=nanolike
+COINGECKO_ID=likecoin
+RPC_URL=https://mainnet-node.like.co/rpc/
+LCD_URL=https://mainnet-node.like.co
+CHAIN_EXPLORER_URL=https://ping.pub/likecoin/tx
+
+LIKER_NFT_FEE_WALLET=like10ywsmztkxjl55xarxnhlxwc83z9v2hkxtsajwl
+LIKER_NFT_TARGET_ADDRESS=like17m4vwrnhjmd20uu7tst7nv0kap6ee7js69jfrs
+
+AUTHCORE_API_HOST=https://authcore.like.co
+LIKER_LAND_URL=https://liker.land
+LIKE_CO_HOST=https://like.co
+LIKE_CO_API=https://api.like.co
+APP_LIKE_CO_URL=https://app.like.co
+NFT_MARKETPLACE_URL=https://likecoin.github.io/likecoin-nft-marketplace
+ISCN_TOOLS_URL=https://likecoin.github.io/iscn-nft-tools

.github/workflows/cd.yml

@@ -27,7 +27,7 @@ jobs:
         run: yarn
 
       - name: Generate
-        run: NUXT_APP_BASE_URL=/${{ github.event.repository.name }}/ yarn generate
+        run: NUXT_APP_BASE_URL=/${{ github.event.repository.name }}/ yarn generate:production
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -4,6 +4,5 @@ node_modules
 .nitro
 .cache
 .output
-.env
 dist
 .DS_Store

README.md

@@ -9,34 +9,41 @@ Make sure to install the dependencies:
 ```bash
 # yarn
 yarn install
-
-# npm
-npm install
-
-# pnpm
-pnpm install
 ```
 
 ## Development Server
 
-Start the development server on `http://localhost:3000`
+Start the development server on `http://localhost:3000`:
+
+```bash
+yarn dev
+```
 
+Run in production config:
 ```bash
-npm run dev
+yarn dev:production
 ```
 
 ## Production
 
 Build the application for production:
 
 ```bash
-npm run build
+yarn build:production
 ```
 
 Locally preview production build:
 
 ```bash
-npm run preview
+yarn preview
+```
+
+### Static Site
+
+Build the application for static site hosting (e.g. Netlify):
+
+```bash
+yarn generate:production
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

components/SiteMenu.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ISCN_TOOLS_URL } from '~/constant'
+const { ISCN_TOOLS_URL } = useRuntimeConfig().public
 
 const props = defineProps({
   isLarge: {

components/SiteNavigation.vue

@@ -8,7 +8,7 @@
         :to="{ name: 'index' }"
       />
       <UBadge
-        v-if="IS_TESTNET"
+        v-if="isTestnet"
         label="TESTNET"
         variant="subtle"
         color="amber"
@@ -25,5 +25,5 @@
 </template>
 
 <script setup lang="ts">
-import { IS_TESTNET } from '~/constant'
+const isTestnet = getIsTestnet()
 </script>

components/StripeConnectCard.vue

@@ -141,9 +141,11 @@
 </template>
 
 <script setup lang="ts">
-import { LIKE_ADDRESS_REGEX, LIKE_CO_API } from '~/constant'
+import { LIKE_ADDRESS_REGEX } from '~/constant'
 import { useStripeStore } from '~/stores/stripe'
 
+const { LIKE_CO_API } = useRuntimeConfig().public
+
 const stripeStore = useStripeStore()
 
 const { fetchStripeConnectStatus } = stripeStore

constant/index.ts

@@ -1,41 +1,7 @@
-export const IS_TESTNET = false
-
-export const SITE_URL = IS_TESTNET ? 'https://likecoin-nft-book-press-testnet.netlify.app' : 'https://likecoin.github.io/nft-book-press'
-
-export const CHAIN_ID = IS_TESTNET
-  ? 'likecoin-public-testnet-5'
-  : 'likecoin-chain-2'
-export const RPC_URL = IS_TESTNET
-  ? 'https://node.testnet.like.co/rpc/'
-  : 'https://mainnet-node.like.co/rpc/'
-export const LCD_URL = IS_TESTNET
-  ? 'https://node.testnet.like.co'
-  : 'https://mainnet-node.like.co'
-export const LIKER_LAND_HOST = `${IS_TESTNET ? 'rinkeby.' : ''}liker.land`
-
-export const LIKER_NFT_FEE_WALLET = IS_TESTNET
-  ? 'like1yney2cqn5qdrlc50yr5l53898ufdhxafqz9gxp'
-  : 'like10ywsmztkxjl55xarxnhlxwc83z9v2hkxtsajwl'
-
-export const LIKER_NFT_TARGET_ADDRESS = IS_TESTNET
-  ? 'like1yney2cqn5qdrlc50yr5l53898ufdhxafqz9gxp'
-  : 'like17m4vwrnhjmd20uu7tst7nv0kap6ee7js69jfrs'
-
-export const LIKE_CO_HOST = `https://${IS_TESTNET ? 'rinkeby.' : ''}like.co`
-export const LIKE_CO_API = `https://api.${IS_TESTNET ? 'rinkeby.' : ''}like.co`
-export const APP_LIKE_CO_URL = `https://app.${IS_TESTNET ? 'rinkeby.' : ''}like.co`
-export const LIKER_LAND_URL = `https://${LIKER_LAND_HOST}`
-
 export const ARWEAVE_ENDPOINT = 'https://arweave.net'
 
 export const IPFS_VIEW_GATEWAY_URL = 'https://ipfs.io/ipfs'
 
-export const CHAIN_EXPLORER_URL = IS_TESTNET ? 'https://node.testnet.like.co/cosmos/tx/v1beta1/txs' : 'https://ping.pub/likecoin/tx'
-
-export const NFT_MARKETPLACE_URL = IS_TESTNET ? 'https://likecoin-nft-marketplace-testnet.netlify.app' : 'https://likecoin.github.io/likecoin-nft-marketplace'
-
-export const ISCN_TOOLS_URL = IS_TESTNET ? 'https://likecoin-iscn-nft-tools-testnet.netlify.app' : 'https://likecoin.github.io/iscn-nft-tools'
-
 export const MINIMAL_PRICE = 0.99
 export const DEFAULT_PRICE = 4.99
 

constant/network.ts

@@ -29,6 +29,33 @@ export default defineNuxtConfig({
       }
     }
   },
+  runtimeConfig: {
+    public: {
+      IS_TESTNET: process.env.IS_TESTNET,
+
+      SITE_URL: process.env.SITE_URL,
+
+      CHAIN_ID: process.env.CHAIN_ID,
+      CHAIN_NAME: process.env.CHAIN_NAME,
+      CHAIN_DENOM: process.env.CHAIN_DENOM,
+      CHAIN_MINIMAL_DENOM: process.env.CHAIN_MINIMAL_DENOM,
+      COINGECKO_ID: process.env.COINGECKO_ID,
+      RPC_URL: process.env.RPC_URL,
+      LCD_URL: process.env.LCD_URL,
+      CHAIN_EXPLORER_URL: process.env.CHAIN_EXPLORER_URL,
+
+      LIKER_NFT_FEE_WALLET: process.env.LIKER_NFT_FEE_WALLET,
+      LIKER_NFT_TARGET_ADDRESS: process.env.LIKER_NFT_TARGET_ADDRESS,
+
+      AUTHCORE_API_HOST: process.env.AUTHCORE_API_HOST,
+      LIKER_LAND_URL: process.env.LIKER_LAND_URL,
+      LIKE_CO_HOST: process.env.LIKE_CO_HOST,
+      LIKE_CO_API: process.env.LIKE_CO_API,
+      APP_LIKE_CO_URL: process.env.APP_LIKE_CO_URL,
+      NFT_MARKETPLACE_URL: process.env.NFT_MARKETPLACE_URL,
+      ISCN_TOOLS_URL: process.env.ISCN_TOOLS_URL
+    }
+  },
   app: {
     pageTransition: { name: 'page', mode: 'out-in' },
     layoutTransition: { name: 'page', mode: 'out-in' }

nuxt.config.ts

@@ -5,8 +5,11 @@
   },
   "scripts": {
     "build": "nuxt build",
+    "build:production": "nuxt build --dotenv .env.production",
     "dev": "nuxt dev",
+    "dev:production": "nuxt dev --dotenv .env.production",
     "generate": "nuxt generate",
+    "generate:production": "nuxt generate --dotenv .env.production",
     "lint": "eslint . --ext \".js,.vue,.ts\" --fix",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"

package.json

@@ -206,10 +206,11 @@
 
 <script setup lang="ts">
 import { type FileExtension } from '@likecoin/qr-code-styling'
-import { AFFILIATION_CHANNELS, LIKE_CO_API } from '~/constant'
+import { AFFILIATION_CHANNELS } from '~/constant'
 import { useCollectionStore } from '~/stores/collection'
 import { getPurchaseLink } from '~/utils'
 
+const { LIKE_CO_API } = useRuntimeConfig().public
 const collectionStore = useCollectionStore()
 const route = useRoute()
 const router = useRouter()

pages/affiliation-link.vue

@@ -412,9 +412,9 @@ import { stringify } from 'csv-stringify/sync'
 import type { FormError } from '#ui/types'
 
 import { useWalletStore } from '~/stores/wallet'
-import { LCD_URL, APP_LIKE_CO_URL, LIKER_LAND_URL } from '~/constant'
 import { downloadFile, convertArrayOfObjectsToCSV, sleep } from '~/utils'
 
+const { LCD_URL, APP_LIKE_CO_URL, LIKER_LAND_URL } = useRuntimeConfig().public
 const router = useRouter()
 const route = useRoute()
 

pages/mint-nft/index.vue

@@ -425,7 +425,7 @@ import { MdEditor, ToolbarNames, config } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 import DOMPurify from 'dompurify'
 
-import { DEFAULT_PRICE, MINIMAL_PRICE, LCD_URL } from '~/constant'
+import { DEFAULT_PRICE, MINIMAL_PRICE } from '~/constant'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useWalletStore } from '~/stores/wallet'
 import { useNftStore } from '~/stores/nft'
@@ -434,6 +434,7 @@ import { getPortfolioURL, deliverMethodOptions } from '~/utils'
 import { getNFTAuthzGrants, sendNFTsToAPIWallet } from '~/utils/cosmos'
 import { useCollectionStore } from '~/stores/collection'
 
+const { LCD_URL } = useRuntimeConfig().public
 const walletStore = useWalletStore()
 const bookStoreApiStore = useBookStoreApiStore()
 const collectionStore = useCollectionStore()

pages/nft-book-store/collection/new.vue

@@ -154,14 +154,14 @@
 <script setup lang="ts">
 import { DeliverTxResponse } from '@cosmjs/stargate'
 import { storeToRefs } from 'pinia'
-import { LIKE_CO_API, LCD_URL } from '~/constant'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useWalletStore } from '~/stores/wallet'
 import { useNftStore } from '~/stores/nft'
 import { useCollectionStore } from '~/stores/collection'
 import { parseImageURLFromMetadata } from '~/utils'
 import { getNFTs, getNFTOwner, signExecNFTSendAuthz, signSendNFTs } from '~/utils/cosmos'
 
+const { LIKE_CO_API, LCD_URL } = useRuntimeConfig().public
 const store = useWalletStore()
 const { wallet, signer } = storeToRefs(store)
 const { connect } = store