algorandfoundation · neilcampbell · Nov 8, 2024 · Nov 8, 2024 · Nov 9, 2024
diff --git a/examples/cloud_provider/production_react_netlify/index.html b/examples/cloud_provider/production_react_netlify/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>
diff --git a/examples/cloud_provider/production_react_netlify/package.json b/examples/cloud_provider/production_react_netlify/package.json
@@ -12,17 +12,17 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^3.0.3",
+    "@algorandfoundation/algokit-client-generator": "v4.0.0-beta.8",
     "@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-beta.22",
     "@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"
   }
 }
diff --git a/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx b/examples/cloud_provider/production_react_netlify/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' })

diff --git a/examples/cloud_provider/production_react_netlify/tests/example.spec.ts b/examples/cloud_provider/production_react_netlify/tests/example.spec.ts
@@ -1,7 +1,10 @@
-import { randomAccount } from '@algorandfoundation/algokit-utils'
+import { algorandFixture } from '@algorandfoundation/algokit-utils/testing'
 import { expect, test } from '@playwright/test'
 
+const localnet = algorandFixture()
+
 test.beforeEach(async ({ page }) => {
+  await localnet.beforeEach()
   await page.goto('http://localhost:5173/')
 })
 
@@ -27,8 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  const dummyAccount = randomAccount()
-  await page.getByTestId('receiver-address').fill(dummyAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent

diff --git a/examples/cloud_provider/production_react_netlify/vite.config.ts b/examples/cloud_provider/production_react_netlify/vite.config.ts
@@ -1,7 +1,15 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    nodePolyfills({
+      globals: {
+        Buffer: true,
+      },
+    }),
+  ],
 })
diff --git a/examples/cloud_provider/production_react_vercel/index.html b/examples/cloud_provider/production_react_vercel/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>
diff --git a/examples/cloud_provider/production_react_vercel/package.json b/examples/cloud_provider/production_react_vercel/package.json
@@ -12,17 +12,17 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^3.0.3",
+    "@algorandfoundation/algokit-client-generator": "v4.0.0-beta.8",
     "@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-beta.22",
     "@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",
@@ -77,5 +77,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "overrides": {
+    "ws@>7.0.0 <7.5.9": "7.5.10"
   }
 }
diff --git a/examples/cloud_provider/production_react_vercel/src/components/Transact.tsx b/examples/cloud_provider/production_react_vercel/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' })

diff --git a/examples/cloud_provider/production_react_vercel/tests/example.spec.ts b/examples/cloud_provider/production_react_vercel/tests/example.spec.ts
@@ -1,7 +1,10 @@
-import { randomAccount } from '@algorandfoundation/algokit-utils'
+import { algorandFixture } from '@algorandfoundation/algokit-utils/testing'
 import { expect, test } from '@playwright/test'
 
+const localnet = algorandFixture()
+
 test.beforeEach(async ({ page }) => {
+  await localnet.beforeEach()
   await page.goto('http://localhost:5173/')
 })
 
@@ -27,8 +30,7 @@ test('authentication and dummy payment transaction', async ({ page }) => {
   // 2. Must be able to send a dummy payment transaction
   await page.getByTestId('transactions-demo').click()
 
-  const dummyAccount = randomAccount()
-  await page.getByTestId('receiver-address').fill(dummyAccount.addr)
+  await page.getByTestId('receiver-address').fill(localnet.context.testAccount.addr)
   await page.getByTestId('send-algo').click()
 
   // 3. Must be able to see a notification that the transaction was sent

diff --git a/examples/cloud_provider/production_react_vercel/vite.config.ts b/examples/cloud_provider/production_react_vercel/vite.config.ts
@@ -1,7 +1,15 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    nodePolyfills({
+      globals: {
+        Buffer: true,
+      },
+    }),
+  ],
 })
diff --git a/examples/production_react/index.html b/examples/production_react/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>
diff --git a/examples/production_react/package.json b/examples/production_react/package.json
@@ -12,17 +12,17 @@
     "npm": ">=9.0"
   },
   "devDependencies": {
-    "@algorandfoundation/algokit-client-generator": "^3.0.3",
+    "@algorandfoundation/algokit-client-generator": "v4.0.0-beta.8",
     "@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-beta.22",
     "@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"
   }
 }