feat: adding use of composite actions for handling VITE_ env vars; adding util for loading env vars (#5)

* refactor: adding env var utils for algo clients

* feat: adding usage of shared composite actions for placeholder vars

* refactor: getting rid of usage of default algo client credentials

* chore: tweaking test template code

* refactor: updating name of composite action

Author: aorumbayev

template_content/.env.template.jinja

@@ -1,14 +1,15 @@
 VITE_ENVIRONMENT=local
 
 # Algod
-VITE_ALGOD_NODE_CONFIG_TOKEN={{ algod_token }}
-VITE_ALGOD_NODE_CONFIG_SERVER={{ algod_server }}
-VITE_ALGOD_NODE_CONFIG_PORT={{ algod_port }}
+VITE_ALGOD_TOKEN={{ algod_token }}
+VITE_ALGOD_SERVER={{ algod_server }}
+VITE_ALGOD_PORT={{ algod_port }}
+# Empty string by default for sandbox otherwise use `betanet`, `testnet` or `mainnet`
+VITE_ALGOD_NETWORK=""
 
 # Indexer
 VITE_INDEXER_TOKEN={{ indexer_token }}
 VITE_INDEXER_SERVER={{ indexer_server }}
 VITE_INDEXER_PORT={{ indexer_port }}
 
-# Empty string by default for sandbox otherwise use `betanet`, `testnet` or `mainnet`
-VITE_ALGOD_NETWORK=
+

template_content/src/App.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
 import Transact from './components/Transact'
 import { useAlgoWallet } from './hooks/useAlgoWalletProvider'
+import { getAlgodConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 export default function App() {
   const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
@@ -18,11 +19,13 @@ export default function App() {
     setOpenDemoModal(!openDemoModal)
   }
 
+  const algodConfig = getAlgodConfigFromViteEnvironment()
+
   const walletProviders = useAlgoWallet({
-    nodeToken: import.meta.env.VITE_ALGOD_NODE_CONFIG_TOKEN,
-    nodeServer: import.meta.env.VITE_ALGOD_NODE_CONFIG_SERVER,
-    nodePort: import.meta.env.VITE_ALGOD_NODE_CONFIG_PORT,
-    network: import.meta.env.VITE_ALGOD_NETWORK,
+    nodeToken: String(algodConfig.token),
+    nodeServer: algodConfig.server,
+    nodePort: String(algodConfig.port),
+    network: algodConfig.network,
     autoConnect: true,
   })
 

template_content/src/components/Account.tsx

@@ -1,11 +1,20 @@
 import { useWallet } from '@txnlab/use-wallet'
 import { ellipseAddress } from '../utils/ellipseAddress'
+import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
 
 const Account = () => {
   const { activeAddress } = useWallet()
+  const algoConfig = getAlgodConfigFromViteEnvironment()
   return (
     <div>
-      <div className="text-xl">Address: {ellipseAddress(activeAddress)}</div>
+      <a
+        className="text-xl"
+        target="_blank"
+        href={`https://${algoConfig.network == 'mainnet' ? '' : `${algoConfig.network}.`}algoexplorer.io/address/${activeAddress}`}
+      >
+        Address: {ellipseAddress(activeAddress)}
+      </a>
+      <div className="text-xl">Network: {algoConfig.network}</div>
     </div>
   )
 }

template_content/src/components/Transact.tsx.jinja

@@ -1,8 +1,9 @@
-import { DEFAULT_NODE_BASEURL, DEFAULT_NODE_PORT, DEFAULT_NODE_TOKEN, useWallet } from '@txnlab/use-wallet'
 import * as algokit from '@algorandfoundation/algokit-utils'
-import { useState } from 'react'
+import { useWallet } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { useSnackbar } from 'notistack'
+import { useState } from 'react'
+import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
 
 interface TransactInterface {
   openModal: boolean
@@ -13,10 +14,11 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [receiverAddress, setReceiverAddress] = useState<string>('')
 
+  const algodConfig = getAlgodConfigFromViteEnvironment()
   const algodClient = algokit.getAlgoClient({
-    server: import.meta.env.VITE_ALGOD_NODE_CONFIG_SERVER ?? DEFAULT_NODE_BASEURL,
-    port: import.meta.env.VITE_ALGOD_NODE_CONFIG_PORT ?? DEFAULT_NODE_PORT,
-    token: import.meta.env.VITE_ALGOD_NODE_CONFIG_TOKEN ?? DEFAULT_NODE_TOKEN,
+    server: algodConfig.server,
+    port: algodConfig.port,
+    token: algodConfig.token,
   })
 
   const { enqueueSnackbar } = useSnackbar()

template_content/src/hooks/useAlgoWalletProvider.ts

@@ -1,19 +1,6 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import {
-  AlgodClientOptions,
-  DEFAULT_NETWORK,
-  DEFAULT_NODE_BASEURL,
-  DEFAULT_NODE_PORT,
-  DEFAULT_NODE_TOKEN,
-  defly,
-  exodus,
-  kmd,
-  pera,
-  PROVIDER_ID,
-  reconnectProviders,
-  WalletClient,
-} from '@txnlab/use-wallet'
+import { AlgodClientOptions, defly, exodus, kmd, pera, PROVIDER_ID, reconnectProviders, WalletClient } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { useEffect } from 'react'
 
@@ -37,12 +24,9 @@ if (import.meta.env.VITE_ENVIRONMENT === 'local') {
 const walletProviders: SupportedProviders = {}
 
 export function useAlgoWallet(context: { autoConnect: boolean; network: string; nodeServer: string; nodePort: string; nodeToken: string }) {
-  const algodOptions = [
-    context.nodeToken ?? DEFAULT_NODE_TOKEN,
-    context.nodeServer ?? DEFAULT_NODE_BASEURL,
-    context.nodePort ?? DEFAULT_NODE_PORT,
-  ] as AlgodClientOptions
-  const network = context.network ?? DEFAULT_NETWORK
+  const algodOptions = [context.nodeToken, context.nodeServer, context.nodePort] as AlgodClientOptions
+
+  const network = context.network
 
   providerIds.forEach((id) => {
     if (id in walletProviders) {

template_content/src/interfaces/network.ts

@@ -0,0 +1,13 @@
+import { AlgoClientConfig } from '@algorandfoundation/algokit-utils/types/network-client'
+import type { TokenHeader } from 'algosdk/dist/types/client/urlTokenBaseHTTPClient'
+
+export interface AlgoViteClientConfig extends AlgoClientConfig {
+  /** Base URL of the server e.g. http://localhost, https://testnet-api.algonode.cloud/, etc. */
+  server: string
+  /** The port to use e.g. 4001, 443, etc. */
+  port: string | number
+  /** The token to use for API authentication (or undefined if none needed) - can be a string, or an object with the header key => value */
+  token: string | TokenHeader
+  /** String representing current Algorand Network type (testnet/mainnet and etc) */
+  network: string
+}

template_content/src/utils/network/getAlgoClientConfigs.ts

@@ -0,0 +1,27 @@
+import { AlgoViteClientConfig } from '../../interfaces/network'
+
+export function getAlgodConfigFromViteEnvironment(): AlgoViteClientConfig {
+  if (!import.meta.env.VITE_ALGOD_SERVER) {
+    throw new Error('Attempt to get default algod configuration without specifying VITE_ALGOD_SERVER in the environment variables')
+  }
+
+  return {
+    server: import.meta.env.VITE_ALGOD_SERVER,
+    port: import.meta.env.VITE_ALGOD_PORT,
+    token: import.meta.env.VITE_ALGOD_TOKEN,
+    network: import.meta.env.VITE_ALGOD_NETWORK,
+  }
+}
+
+export function getIndexerConfigFromVercelEnvironment(): AlgoViteClientConfig {
+  if (!import.meta.env.VITE_INDEXER_SERVER) {
+    throw new Error('Attempt to get default algod configuration without specifying VITE_INDEXER_SERVER in the environment variables')
+  }
+
+  return {
+    server: import.meta.env.VITE_INDEXER_SERVER,
+    port: import.meta.env.VITE_INDEXER_PORT,
+    token: import.meta.env.VITE_INDEXER_TOKEN,
+    network: import.meta.env.VITE_ALGOD_NETWORK,
+  }
+}

template_content/src/vite-env.d.ts

@@ -2,15 +2,15 @@
 
 interface ImportMetaEnv {
   readonly VITE_ENVIRONMENT: string
-  readonly VITE_ALGOD_NODE_CONFIG_TOKEN: string
-  readonly VITE_ALGOD_NODE_CONFIG_SERVER: string
-  readonly VITE_ALGOD_NODE_CONFIG_PORT: string
+
+  readonly VITE_ALGOD_TOKEN: string
+  readonly VITE_ALGOD_SERVER: string
+  readonly VITE_ALGOD_PORT: string
+  readonly VITE_ALGOD_NETWORK: string
 
   readonly VITE_INDEXER_TOKEN: string
   readonly VITE_INDEXER_SERVER: string
   readonly VITE_INDEXER_PORT: string
-
-  readonly VITE_ALGOD_NETWORK: string
 }
 
 interface ImportMeta {

template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml

@@ -34,6 +34,14 @@ jobs:
       - name: Run unit tests
         run: npm run test
 
+      - name: Create placeholder .env file
+        if: ${{ inputs.run-build }}
+        uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main
+        with:
+          env-output-path: './.env'
+          env-template-path: './.env.template'
+          env-variable-prefix: VITE_
+
       - name: Build
         if: ${{ inputs.run-build }}
         run: npm run build

template_content/{% if use_github_actions %}.github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja

@@ -38,10 +38,34 @@ jobs:
       {% raw %}
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
+
       - name: Pull Vercel Environment Information
         run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Create placeholder .env file
+        uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main
+        with:
+          env-output-path: './.env'
+          env-template-path: './.env.template'
+          env-variable-prefix: VITE_
+
       - name: Build Project Artifacts
         run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Replace template vars
+        uses: makerxstudio/shared-config/.github/actions/placeholder-transforms@main
+        with:
+          app-artifact-path: './.vercel/output'
+          static-site-transforms: |-
+            VITE_ALGOD_TOKEN:${{ secrets.VITE_ALGOD_TOKEN }}
+            VITE_ALGOD_SERVER:${{ vars.VITE_ALGOD_SERVER }}
+            VITE_ALGOD_PORT:${{ vars.VITE_ALGOD_PORT }}
+            VITE_ALGOD_NETWORK:${{ vars.VITE_ALGOD_NETWORK }}
+            VITE_INDEXER_SERVER:${{ vars.VITE_INDEXER_SERVER }}
+            VITE_INDEXER_PORT:${{ vars.VITE_INDEXER_PORT }}
+            VITE_INDEXER_TOKEN:${{ secrets.VITE_INDEXER_TOKEN }}
+            VITE_ENVIRONMENT:${{ vars.VITE_ENVIRONMENT }}
+
       - name: Deploy Project Artifacts to Vercel
         run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
         # Set your vercel project env variables on your site instance on https://vercel.com/dashboard
@@ -54,6 +78,20 @@ jobs:
           name: dist
           path: dist
 
+      - name: Replace template vars
+        uses: makerxstudio/shared-config/.github/actions/placeholder-transforms@main
+        with:
+          app-artifact-path: './dist'
+          static-site-transforms: |-
+            VITE_ALGOD_TOKEN:${{ secrets.VITE_ALGOD_TOKEN }}
+            VITE_ALGOD_SERVER:${{ vars.VITE_ALGOD_SERVER }}
+            VITE_ALGOD_PORT:${{ vars.VITE_ALGOD_PORT }}
+            VITE_ALGOD_NETWORK:${{ vars.VITE_ALGOD_NETWORK }}
+            VITE_INDEXER_SERVER:${{ vars.VITE_INDEXER_SERVER }}
+            VITE_INDEXER_PORT:${{ vars.VITE_INDEXER_PORT }}
+            VITE_INDEXER_TOKEN:${{ secrets.VITE_INDEXER_TOKEN }}
+            VITE_ENVIRONMENT:${{ vars.VITE_ENVIRONMENT }}
+
       - name: Install netlify cli
         run: npm i netlify-cli
 
@@ -62,16 +100,5 @@ jobs:
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-
-          # Pass your environment variables here, e.g.,
-          # VITE_ALGOD_NODE_CONFIG_TOKEN: ${{ secrets.VITE_ALGOD_NODE_CONFIG_TOKEN }}
-          # VITE_ALGOD_NODE_CONFIG_SERVER: ${{ secrets.VITE_ALGOD_NODE_CONFIG_SERVER }}
-          # VITE_ALGOD_NODE_CONFIG_PORT: ${{ secrets.VITE_ALGOD_NODE_CONFIG_PORT }}
-
-          # VITE_INDEXER_TOKEN: ${{ secrets.VITE_INDEXER_TOKEN }}
-          # VITE_INDEXER_SERVER: ${{ secrets.VITE_INDEXER_SERVER }}
-          # VITE_INDEXER_PORT: ${{ secrets.VITE_INDEXER_PORT }}
-
-          # VITE_ALGOD_NETWORK: ${{ secrets.VITE_ALGOD_NETWORK }}
       {% endraw %}
     {%- endif %}