Merge pull request #22 from algorandfoundation/fix/cd-docs-improvement

fix: refining docs; tweaking usage of useWallet hook
algorandfoundation · Jan 21, 2024 · f877f05 · f877f05
2 parents 0613b9e + 6b16800
commit f877f05
Show file tree

Hide file tree

Showing 31 changed files with 414 additions and 301 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "files.associations": {
     "**/*.jinja": "jinja"
   },
-  "python.testing.pytestArgs": ["tests"],
+  "python.testing.pytestArgs": ["."],
   "python.testing.unittestEnabled": false,
   "python.testing.pytestEnabled": true,
   "files.eol": "\n"

diff --git a/template_content/README.md.jinja b/template_content/README.md.jinja
@@ -47,7 +47,26 @@ For pull requests and pushes to `main` branch against this repository the follow
 
 The project template provides base Github Actions workflows for continuous deployment to [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/). These workflows are located in the [`.github/workflows`](./.github/workflows) folder.
 
-> Please note: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. For netlify you can pass the project specific environment variables as part of Github actions secrets, while for vercel you will need to set the secrets on your site instance (refer to the [Vercel documentation](https://vercel.com/docs/cli#commands/secrets) for more details).
+**Please note**: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. Default setup provided by the template allows you to manage the secrets via environment variables and secrets on your github repository.
+
+{% if cloud_provider != none %}
+#### Setting up environment variables and secrets for webapp deployment
+
+1. [Create a new environment variable on your repository](https://docs.github.com/en/actions/learn-github-actions/variables#creating-configuration-variables-for-a-repository) called `NETLIFY_AUTH_TOKEN` and `NETLIFY_SITE_ID` if you are using Netlify as your cloud provider. Set it to the value of your Netlify auth token respectively. You can find your Netlify auth token by going to [app.netlify.com](https://app.netlify.com/).
+2. If you are using Vercel as your cloud provider, create a new environment variable on your repository called `VERCEL_TOKEN`. Set it to the value of your Vercel auth token. You can find your Vercel auth token by going to [vercel.com/account/tokens](https://vercel.com/account/tokens).
+3. Set environment variables similarly to step one for the following variables (see .env.template for default values):
+    - VITE_ALGOD_SERVER
+    - VITE_ALGOD_PORT
+    - VITE_ALGOD_NETWORK
+    - VITE_INDEXER_SERVER
+    - VITE_INDEXER_PORT
+    - VITE_ENVIRONMENT
+4. (Optional) [Set environment secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) for the following variables (see .env.template for default values):
+    - VITE_ALGOD_TOKEN
+    - VITE_INDEXER_TOKEN
+
+> If you prefer alternative deployment methods, you can remove the relevant workflow files from the [`.github/workflows`](./.github/workflows) folder and configure your own.
+{% endif %}
 
 {% endif -%}
 
@@ -96,4 +115,3 @@ It has also been configured to have a productive dev experience out of the box i
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja
@@ -36,15 +36,15 @@
     "@playwright/test": "^1.35.0",
     "playwright": "^1.35.0",
     {% endif -%}
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
     "@algorandfoundation/algokit-utils": "^4.1.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     {% if use_daisy_ui -%}
     "daisyui": "^3.1.0",

diff --git a/template_content/src/App.tsx b/template_content/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )

diff --git a/template_content/src/Home.tsx b/template_content/src/Home.tsx
@@ -0,0 +1,63 @@
+// src/components/Home.tsx
+import { useWallet } from '@txnlab/use-wallet'
+import React, { useState } from 'react'
+import ConnectWallet from './components/ConnectWallet'
+import Transact from './components/Transact'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  return (
+    <div className="hero min-h-screen bg-teal-400">
+      <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
+        <div className="max-w-md">
+          <h1 className="text-4xl">
+            Welcome to <div className="font-bold">AlgoKit 🙂</div>
+          </h1>
+          <p className="py-6">
+            This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
+          </p>
+
+          <div className="grid">
+            <a
+              data-test-id="getting-started"
+              className="btn btn-primary m-2"
+              target="_blank"
+              href="https://github.com/algorandfoundation/algokit-cli"
+            >
+              Getting started
+            </a>
+
+            <div className="divider" />
+            <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
+              Wallet Connection
+            </button>
+
+            {activeAddress && (
+              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
+                Transactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home
diff --git a/...}.github{% endif %}/workflows/checks.yaml → ...ub{% endif %}/workflows/checks.yaml.jinja b/...}.github{% endif %}/workflows/checks.yaml → ...ub{% endif %}/workflows/checks.yaml.jinja
@@ -30,24 +30,24 @@ jobs:
 
       - name: Run linters
         run: npm run lint
-
+      {% if use_jest %}
       - name: Run unit tests
         run: npm run test
-
+      {% endif %}
       - name: Create placeholder .env file
-        if: ${{ inputs.run-build }}
+        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 }}
+        if: ${{ '{{' }} inputs.run-build {{ '}}' }}
         run: npm run build
 
       - name: Archive
-        if: ${{ inputs.run-build }}
+        if: ${{ '{{' }} inputs.run-build {{ '}}' }}
         uses: actions/upload-artifact@v3
         with:
           name: dist

diff --git a/....github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja b/....github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja
@@ -68,7 +68,7 @@ jobs:
 
       - 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
+        # Set your vercel project env variables on your github repository (see README for more info)
       {% endraw %}
     {%- else %}
       {% raw %}
@@ -100,5 +100,6 @@ jobs:
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          # Set your netlify project env variables on your github repository (see README for more info)
       {% endraw %}
     {%- endif %}
diff --git a/tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml b/tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml
@@ -6,14 +6,12 @@ algod_server: http://localhost
 algod_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 author_email: None
 author_name: None
-cloud_provider: none
 ide_jetbrains: true
 ide_vscode: false
 indexer_port: 8980
 indexer_server: http://localhost
 indexer_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 project_name: test_all_default_parameters_jetbrains
-use_daisy_ui: false
 use_eslint_prettier: false
 use_github_actions: false
 use_jest: false

diff --git a/tests_generated/test_all_default_parameters_jetbrains/README.md b/tests_generated/test_all_default_parameters_jetbrains/README.md
@@ -55,4 +55,3 @@ This project makes use of React and Tailwind to provider a base project configur
 # Integrating with smart contracts and application clients
 
 Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
-
diff --git a/tests_generated/test_all_default_parameters_jetbrains/package.json b/tests_generated/test_all_default_parameters_jetbrains/package.json
@@ -17,15 +17,15 @@
     "autoprefixer": "10.4.14",
     "ts-node": "10.9.1",
     "typescript": "5.1.6",
-    "vite": "4.4.9"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
     "@algorandfoundation/algokit-utils": "^4.1.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
+    "@txnlab/use-wallet": "^2.4.0",
     "algosdk": "^2.5.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

diff --git a/tests_generated/test_all_default_parameters_jetbrains/src/App.tsx b/tests_generated/test_all_default_parameters_jetbrains/src/App.tsx
@@ -1,12 +1,10 @@
 import { DeflyWalletConnect } from '@blockshake/defly-connect'
 import { DaffiWalletConnect } from '@daffiwallet/connect'
 import { PeraWalletConnect } from '@perawallet/connect'
-import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
+import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
-import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Home from './Home'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 }
 
 export default function App() {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )
Original file line number	Diff line number	Diff line change
Expand Up		@@ -55,4 +55,3 @@ This project makes use of React and Tailwind to provider a base project configur
		# Integrating with smart contracts and application clients

		Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.