chore: propagate latest changes from algokit child templates

template_content/inject.py

@@ -101,7 +101,7 @@ def cleanup():
     for file in os.listdir(os.path.join(inject_folder_path)):
         source_file = os.path.join(inject_folder_path, file)
 
-        if file == "App.tsx":
+        if file == "Home.tsx":
             dest_file = os.path.join(ROOT_DIR, "frontend", "src", file)
             inject_file(source_file, dest_file)
         if file == "AppCalls.tsx":

template_content/inject_content/Home.tsx

@@ -0,0 +1,76 @@
+// 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'
+import AppCalls from './components/AppCalls'
+
+interface HomeProps {}
+
+const Home: React.FC<HomeProps> = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const [appCallsDemoModal, setAppCallsDemoModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+
+  const toggleDemoModal = () => {
+    setOpenDemoModal(!openDemoModal)
+  }
+
+  const toggleAppCallsModal = () => {
+    setAppCallsDemoModal(!appCallsDemoModal)
+  }
+
+  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>
+            )}
+
+            {activeAddress && (
+              <button data-test-id="appcalls-demo" className="btn m-2" onClick={toggleAppCallsModal}>
+                Contract Interactions Demo
+              </button>
+            )}
+          </div>
+
+          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
+          <AppCalls openModal={appCallsDemoModal} setModalState={setAppCallsDemoModal} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

template_content/{% if use_github_actions %}.github{% endif %}/workflows/frontend-cd.yaml.jinja

@@ -73,7 +73,7 @@ jobs:
       - name: Deploy Project Artifacts to Vercel
         working-directory: ./frontend
         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 in frontend folder for more info)
       {% endraw %}
     {%- else %}
       {% raw %}
@@ -107,5 +107,6 @@ jobs:
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          # Set your vercel project env variables on your github repository (see README in frontend folder for more info)
       {% endraw %}
     {%- endif %}

tests_generated/test_all_default_parameters_off_jetbrains/backend/.copier-answers.yml

@@ -1,5 +1,5 @@
 # Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
-_commit: 1.11.0
+_commit: 1.11.3
 _src_path: gh:algorandfoundation/algokit-beaker-default-template
 algod_port: 4001
 algod_server: http://localhost

tests_generated/test_all_default_parameters_off_jetbrains/backend/pyproject.toml

@@ -12,6 +12,7 @@ algokit-utils = "^2.2.0"
 python-dotenv = "^1.0.0"
 
 [tool.poetry.group.dev.dependencies]
+setuptools = "^69.0.2" # Adding explicitly to work around pyteal https://github.com/algorand/pyteal/issues/712
 
 [build-system]
 requires = ["poetry-core"]

tests_generated/test_all_default_parameters_off_jetbrains/frontend/.copier-answers.yml

@@ -1,5 +1,5 @@
 # Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
-_commit: 0.9.1
+_commit: 0.9.3
 _src_path: gh:algorandfoundation/algokit-react-frontend-template
 algod_port: 4001
 algod_server: http://localhost

tests_generated/test_all_default_parameters_off_jetbrains/frontend/README.md

@@ -56,4 +56,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.
-

tests_generated/test_all_default_parameters_off_jetbrains/frontend/package.json

@@ -6,31 +6,32 @@
     "email": "None"
   },
   "private": true,
+  "type": "module",
   "engines": {
     "node": ">=18.0"
   },
   "devDependencies": {
-    "@types/node": "18.17.14",
-    "@types/react": "18.2.11",
-    "@types/react-dom": "18.2.4",
-    "@vitejs/plugin-react-swc": "3.3.2",
-    "autoprefixer": "10.4.14",
-    "ts-node": "10.9.1",
-    "typescript": "5.1.6",
-    "vite": "4.4.9"
+    "@types/node": "^18.17.14",
+    "@types/react": "^18.2.11",
+    "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.14",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.6",
+    "vite": "^5.0.0"
   },
   "dependencies": {
     "@walletconnect/modal-sign-html": "^2.6.1",
-    "@algorandfoundation/algokit-utils": "^4.1.0",
+    "@algorandfoundation/algokit-utils": "^5.0.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.1.1",
-    "algosdk": "^2.5.0",
-    "daisyui": "^3.1.0",
+    "@txnlab/use-wallet": "^2.4.0",
+    "algosdk": "^2.7.0",
+    "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "tslib": "^2.6.2"
   },
   "scripts": {

tests_generated/test_all_default_parameters_off_jetbrains/frontend/src/App.tsx

@@ -1,18 +1,27 @@
 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 AppCalls from './components/AppCalls'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
-import { getAlgodConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
+import Home from './Home'
+import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
 if (import.meta.env.VITE_ALGOD_NETWORK === '') {
-  providersArray = [{ id: PROVIDER_ID.KMD }]
+  const kmdConfig = getKmdConfigFromViteEnvironment()
+  providersArray = [
+    {
+      id: PROVIDER_ID.KMD,
+      clientOptions: {
+        wallet: kmdConfig.wallet,
+        password: kmdConfig.password,
+        host: kmdConfig.server,
+        token: String(kmdConfig.token),
+        port: String(kmdConfig.port),
+      },
+    },
+  ]
 } else {
   providersArray = [
     { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
@@ -25,23 +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 [appCallsDemoModal, setAppCallsDemoModal] = useState<boolean>(false)
-  const { activeAddress } = useWallet()
-
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
-  const toggleAppCallsModal = () => {
-    setAppCallsDemoModal(!appCallsDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -58,50 +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>
-                )}
-
-                {activeAddress && (
-                  <button data-test-id="appcalls-demo" className="btn m-2" onClick={toggleAppCallsModal}>
-                    Contract Interactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-              <AppCalls openModal={appCallsDemoModal} setModalState={setAppCallsDemoModal} />
-            </div>
-          </div>
-        </div>
+        <Home />
       </WalletProvider>
     </SnackbarProvider>
   )