chore: update AppCall.tsx and regen templates (#36)

.github/workflows/check-python.yaml

@@ -44,6 +44,11 @@ jobs:
           # set git user and email as test invoke git
           git config --global user.email "[email protected]" && git config --global user.name "github-actions"
 
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
       - name: Run tests
         shell: bash
         run: |

examples/production_python_react/projects/production_python_react-contracts/.algokit/.copier-answers.yml

@@ -1,5 +1,5 @@
 # Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
-_commit: 1.3.3
+_commit: 1.4.1
 _src_path: gh:algorandfoundation/algokit-python-template
 author_email: None
 author_name: None

examples/production_python_react/projects/production_python_react-contracts/README.md

@@ -77,15 +77,7 @@ By default the template creates a single `HelloWorld` contract under hello_world
 
 By default the template instance does not contain any env files. Using [`algokit project deploy`](https://github.com/algorandfoundation/algokit-cli/blob/main/docs/features/project/deploy.md) against `localnet` | `testnet` | `mainnet` will use default values for `algod` and `indexer` unless overwritten via `.env` or `.env.{target_network}`. 
 
-To generate a new `.env` or `.env.{target_network}` file, run `algokit generate env-file`### Continuous Integration / Continuous Deployment (CI/CD)
-
-This project uses [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions) to define CI/CD workflows, which are located in the [.github/workflows](`../../.github/workflows`) folder.
-
-> Please note, if you instantiated the project with --workspace flag in `algokit init` it will automatically attempt to move the contents of the `.github` folder to the root of the workspace.
-
-### AlgoKit Workspaces
-
-To define custom `algokit project run` commands refer to [documentation](https://github.com/algorandfoundation/algokit-cli/blob/main/docs/features/project/run.md). This allows orchestration of commands spanning across multiple projects within an algokit workspace based project (monorepo).
+To generate a new `.env` or `.env.{target_network}` file, run `algokit generate env-file`
 
 ### Debugging Smart Contracts
 
@@ -94,7 +86,15 @@ Refer to the commented header in the `__main__.py` file in the `smart_contracts`
 
 If you have opted in to include VSCode launch configurations in your project, you can also use the `Debug TEAL via AlgoKit AVM Debugger` launch configuration to interactively select an available trace file and launch the debug session for your smart contract.
 
-For information on using and setting up the `AlgoKit AVM Debugger` VSCode extension refer [here](https://github.com/algorandfoundation/algokit-avm-vscode-debugger). To install the extension from the VSCode Marketplace, use the following link: [AlgoKit AVM Debugger extension](https://marketplace.visualstudio.com/items?itemName=algorandfoundation.algokit-avm-vscode-debugger).
+For information on using and setting up the `AlgoKit AVM Debugger` VSCode extension refer [here](https://github.com/algorandfoundation/algokit-avm-vscode-debugger). To install the extension from the VSCode Marketplace, use the following link: [AlgoKit AVM Debugger extension](https://marketplace.visualstudio.com/items?itemName=algorandfoundation.algokit-avm-vscode-debugger).### Continuous Integration / Continuous Deployment (CI/CD)
+
+This project uses [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions) to define CI/CD workflows, which are located in the [.github/workflows](`../../.github/workflows`) folder.
+
+> Please note, if you instantiated the project with --workspace flag in `algokit init` it will automatically attempt to move the contents of the `.github` folder to the root of the workspace.
+
+### AlgoKit Workspaces
+
+To define custom `algokit project run` commands refer to [documentation](https://github.com/algorandfoundation/algokit-cli/blob/main/docs/features/project/run.md). This allows orchestration of commands spanning across multiple projects within an algokit workspace based project (monorepo).
 
 #### Setting up GitHub for CI/CD workflow and TestNet deployment
 

examples/production_python_react/projects/production_python_react-contracts/poetry.toml

@@ -1,2 +1,3 @@
 [virtualenvs]
 in-project = true
+prefer-active-python = true

examples/production_python_react/projects/production_python_react-contracts/pyproject.toml

@@ -56,7 +56,7 @@ warn_redundant_casts = true
 warn_unused_ignores = true
 warn_return_any = true
 strict_equality = true
-strict_concatenate = true
+extra_checks = true
 disallow_any_unimported = true
 disallow_any_expr = true
 disallow_any_decorated = true

examples/production_python_react/projects/production_python_react-contracts/smart_contracts/_helpers/build.py

@@ -31,7 +31,7 @@ def build(output_dir: Path, contract_path: Path) -> Path:
             contract_path.absolute(),
             f"--out-dir={output_dir}",
             "--output-arc32",
-            "--debug-level=0",
+            "--output-source-map",
         ],
         stdout=subprocess.PIPE,
         stderr=subprocess.STDOUT,

examples/production_python_react/projects/production_python_react-frontend/.algokit/.copier-answers.yml

@@ -1,5 +1,5 @@
 # Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
-_commit: 1.0.8
+_commit: 1.0.9
 _src_path: gh:algorandfoundation/algokit-react-frontend-template
 author_email: None
 author_name: None

examples/production_python_react/projects/production_python_react-frontend/index.html

@@ -7,9 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script>
-      global = globalThis
-    </script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

examples/production_python_react/projects/production_python_react-frontend/package.json

@@ -8,21 +8,21 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": ">=18.0",
+    "node": ">=20.0",
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^3.0.3",
+    "@algorandfoundation/algokit-client-generator": "^4.0.0",
     "@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",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "postcss": "^8.4.24",
     "tailwindcss": "3.3.2",
     "ts-jest": "^29.1.1",
@@ -31,16 +31,16 @@
     "typescript": "^5.1.6",
     "@playwright/test": "^1.35.0",
     "playwright": "^1.35.0",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
-    "@walletconnect/modal-sign-html": "^2.6.1",
-    "@algorandfoundation/algokit-utils": "^6.0.2",
+    "@algorandfoundation/algokit-utils": "^7.0.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
-    "@perawallet/connect": "^1.3.1",
-    "@txnlab/use-wallet": "^2.4.0",
-    "algosdk": "^2.7.0",
+    "@perawallet/connect": "^1.3.4",
+    "@txnlab/use-wallet": "^2.8.2",
+    "algosdk": ">=2.9.0 <3.0",
     "daisyui": "^4.0.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
@@ -74,5 +74,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "overrides": {
+    "ws@>7.0.0 <7.5.9": "7.5.10"
   }
 }

examples/production_python_react/projects/production_python_react-frontend/src/components/AppCalls.tsx

@@ -1,12 +1,10 @@
-import * as algokit from '@algorandfoundation/algokit-utils'
-import { TransactionSignerAccount } from '@algorandfoundation/algokit-utils/types/account'
 import { useWallet } from '@txnlab/use-wallet'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
-import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client'
-import { HelloWorldClient } from '../contracts/HelloWorld'
+import { HelloWorldFactory } from '../contracts/HelloWorld'
 import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app'
 import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
+import { AlgorandClient } from '@algorandfoundation/algokit-utils'
 
 interface AppCallsInterface {
   openModal: boolean
@@ -16,22 +14,16 @@ interface AppCallsInterface {
 const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [contractInput, setContractInput] = useState<string>('')
+  const { enqueueSnackbar } = useSnackbar()
+  const { signer, activeAddress } = useWallet()
 
   const algodConfig = getAlgodConfigFromViteEnvironment()
-  const algodClient = algokit.getAlgoClient({
-    server: algodConfig.server,
-    port: algodConfig.port,
-    token: algodConfig.token,
-  })
   const indexerConfig = getIndexerConfigFromViteEnvironment()
-  const indexer = algokit.getAlgoIndexerClient({
-    server: indexerConfig.server,
-    port: indexerConfig.port,
-    token: indexerConfig.token,
+  const algorand = AlgorandClient.fromConfig({
+    algodConfig,
+    indexerConfig,
   })
-
-  const { enqueueSnackbar } = useSnackbar()
-  const { signer, activeAddress } = useWallet()
+  algorand.setDefaultSigner(signer)
 
   const sendAppCall = async () => {
     setLoading(true)
@@ -41,31 +33,38 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => {
     // Instead, you would deploy your contract on your backend and reference it by id.
     // Given the simplicity of the starter contract, we are deploying it on the frontend
     // for demonstration purposes.
-    const appDetails = {
-      resolveBy: 'creatorAndName',
-      sender: { signer, addr: activeAddress } as TransactionSignerAccount,
-      creatorAddress: activeAddress,
-      findExistingUsing: indexer,
-    } as AppDetails
+    const factory = new HelloWorldFactory({
+      defaultSender: activeAddress,
+      algorand,
+    })
+    const deployResult = await factory
+      .deploy({
+        onSchemaBreak: OnSchemaBreak.AppendApp,
+        onUpdate: OnUpdate.AppendApp,
+      })
+      .catch((e: Error) => {
+        enqueueSnackbar(`Error deploying the contract: ${e.message}`, { variant: 'error' })
+        setLoading(false)
+        return undefined
+      })
 
-    const appClient = new HelloWorldClient(appDetails, algodClient)
-    const deployParams = {
-      onSchemaBreak: OnSchemaBreak.AppendApp,
-      onUpdate: OnUpdate.AppendApp,
-    }
-    await appClient.deploy(deployParams).catch((e: Error) => {
-      enqueueSnackbar(`Error deploying the contract: ${e.message}`, { variant: 'error' })
-      setLoading(false)
+    if (!deployResult) {
       return
-    })
+    }
+
+    const { appClient } = deployResult
 
-    const response = await appClient.hello({ name: contractInput }).catch((e: Error) => {
+    const response = await appClient.send.hello({ args: { name: contractInput } }).catch((e: Error) => {
       enqueueSnackbar(`Error calling the contract: ${e.message}`, { variant: 'error' })
       setLoading(false)
-      return
+      return undefined
     })
 
-    enqueueSnackbar(`Response from the contract: ${response?.return}`, { variant: 'success' })
+    if (!response) {
+      return
+    }
+
+    enqueueSnackbar(`Response from the contract: ${response.return}`, { variant: 'success' })
     setLoading(false)
   }
 

examples/production_python_react/projects/production_python_react-frontend/src/components/Transact.tsx

@@ -1,6 +1,5 @@
-import * as algokit from '@algorandfoundation/algokit-utils'
+import { algo, AlgorandClient } from '@algorandfoundation/algokit-utils'
 import { useWallet } from '@txnlab/use-wallet'
-import algosdk from 'algosdk'
 import { useSnackbar } from 'notistack'
 import { useState } from 'react'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -15,15 +14,11 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
   const [receiverAddress, setReceiverAddress] = useState<string>('')
 
   const algodConfig = getAlgodConfigFromViteEnvironment()
-  const algodClient = algokit.getAlgoClient({
-    server: algodConfig.server,
-    port: algodConfig.port,
-    token: algodConfig.token,
-  })
+  const algorand = AlgorandClient.fromConfig({ algodConfig })
 
   const { enqueueSnackbar } = useSnackbar()
 
-  const { signer, activeAddress, signTransactions, sendTransactions } = useWallet()
+  const { signer, activeAddress } = useWallet()
 
   const handleSubmitAlgo = async () => {
     setLoading(true)
@@ -33,25 +28,15 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
       return
     }
 
-    const suggestedParams = await algodClient.getTransactionParams().do()
-
-    const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
-      from: activeAddress,
-      to: receiverAddress,
-      amount: 1e6,
-      suggestedParams,
-    })
-
-    const encodedTransaction = algosdk.encodeUnsignedTransaction(transaction)
-
-    const signedTransactions = await signTransactions([encodedTransaction])
-
-    const waitRoundsToConfirm = 4
-
     try {
       enqueueSnackbar('Sending transaction...', { variant: 'info' })
-      const { id } = await sendTransactions(signedTransactions, waitRoundsToConfirm)
-      enqueueSnackbar(`Transaction sent: ${id}`, { variant: 'success' })
+      const result = await algorand.send.payment({
+        signer,
+        sender: activeAddress,
+        receiver: receiverAddress,
+        amount: algo(1),
+      })
+      enqueueSnackbar(`Transaction sent: ${result.txIds[0]}`, { variant: 'success' })
       setReceiverAddress('')
     } catch (e) {
       enqueueSnackbar('Failed to send transaction', { variant: 'error' })