diff --git a/.github/workflows/check-python.yaml b/.github/workflows/check-python.yaml index 9cfedba..1c68bfe 100644 --- a/.github/workflows/check-python.yaml +++ b/.github/workflows/check-python.yaml @@ -41,6 +41,11 @@ jobs: # set git user and email as test invoke git git config --global user.email "actions@github.com" && 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: | diff --git a/examples/cloud_provider/production_react_netlify/index.html b/examples/cloud_provider/production_react_netlify/index.html index a85566a..5a2ef4f 100644 --- a/examples/cloud_provider/production_react_netlify/index.html +++ b/examples/cloud_provider/production_react_netlify/index.html @@ -7,9 +7,6 @@
- diff --git a/examples/cloud_provider/production_react_netlify/package.json b/examples/cloud_provider/production_react_netlify/package.json index 85bc401..19d21c3 100644 --- a/examples/cloud_provider/production_react_netlify/package.json +++ b/examples/cloud_provider/production_react_netlify/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" } } diff --git a/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx b/examples/cloud_provider/production_react_netlify/src/components/Transact.tsx index 16bd932..9e32a9e 100644 --- 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('') 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 index df83322..d6909a3 100644 --- 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 index 36f7f4e..e42dc7c 100644 --- 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 index a85566a..5a2ef4f 100644 --- a/examples/cloud_provider/production_react_vercel/index.html +++ b/examples/cloud_provider/production_react_vercel/index.html @@ -7,9 +7,6 @@
- diff --git a/examples/cloud_provider/production_react_vercel/package.json b/examples/cloud_provider/production_react_vercel/package.json index 203e91a..5bc288c 100644 --- a/examples/cloud_provider/production_react_vercel/package.json +++ b/examples/cloud_provider/production_react_vercel/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", @@ -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 index 16bd932..9e32a9e 100644 --- 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('') 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 index df83322..d6909a3 100644 --- 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 index 36f7f4e..e42dc7c 100644 --- 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 index a85566a..5a2ef4f 100644 --- a/examples/production_react/index.html +++ b/examples/production_react/index.html @@ -7,9 +7,6 @@
- diff --git a/examples/production_react/package.json b/examples/production_react/package.json index a449ee8..88c0ef2 100644 --- a/examples/production_react/package.json +++ b/examples/production_react/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" } } diff --git a/examples/production_react/src/components/Transact.tsx b/examples/production_react/src/components/Transact.tsx index 16bd932..9e32a9e 100644 --- a/examples/production_react/src/components/Transact.tsx +++ b/examples/production_react/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('') 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/production_react/tests/example.spec.ts b/examples/production_react/tests/example.spec.ts index df83322..d6909a3 100644 --- a/examples/production_react/tests/example.spec.ts +++ b/examples/production_react/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/production_react/vite.config.ts b/examples/production_react/vite.config.ts index 36f7f4e..e42dc7c 100644 --- a/examples/production_react/vite.config.ts +++ b/examples/production_react/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/starter_react/index.html b/examples/starter_react/index.html index a85566a..5a2ef4f 100644 --- a/examples/starter_react/index.html +++ b/examples/starter_react/index.html @@ -7,9 +7,6 @@
- diff --git a/examples/starter_react/package.json b/examples/starter_react/package.json index 8a1ac0d..542c011 100644 --- a/examples/starter_react/package.json +++ b/examples/starter_react/package.json @@ -8,11 +8,11 @@ "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", @@ -20,16 +20,16 @@ "autoprefixer": "^10.4.14", "ts-node": "^10.9.1", "typescript": "^5.1.6", - "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", "notistack": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -57,5 +57,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "overrides": { + "ws@>7.0.0 <7.5.9": "7.5.10" } } diff --git a/examples/starter_react/src/components/Transact.tsx b/examples/starter_react/src/components/Transact.tsx index becfadc..760040b 100644 --- a/examples/starter_react/src/components/Transact.tsx +++ b/examples/starter_react/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('') 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/starter_react/vite.config.ts b/examples/starter_react/vite.config.ts index 36f7f4e..e42dc7c 100644 --- a/examples/starter_react/vite.config.ts +++ b/examples/starter_react/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/template_content/index.html b/template_content/index.html index a85566a..5a2ef4f 100644 --- a/template_content/index.html +++ b/template_content/index.html @@ -7,9 +7,6 @@
- diff --git a/template_content/package.json.jinja b/template_content/package.json.jinja index d4d8389..774da6f 100644 --- a/template_content/package.json.jinja +++ b/template_content/package.json.jinja @@ -8,22 +8,22 @@ "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", {% if use_eslint_prettier -%} - "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", {% endif -%} {% if use_tailwind -%} "postcss": "^8.4.24", @@ -39,16 +39,16 @@ "@playwright/test": "^1.35.0", "playwright": "^1.35.0", {% endif -%} - "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", {% if use_daisy_ui -%} "daisyui": "^4.0.0", {% endif -%} @@ -97,5 +97,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "overrides": { + "ws@>7.0.0 <7.5.9": "7.5.10" } } diff --git a/template_content/src/components/Transact.tsx.jinja b/template_content/src/components/Transact.tsx.jinja index 5256774..2c96b04 100644 --- a/template_content/src/components/Transact.tsx.jinja +++ b/template_content/src/components/Transact.tsx.jinja @@ -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('') 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/template_content/vite.config.ts b/template_content/vite.config.ts index 36f7f4e..e42dc7c 100644 --- a/template_content/vite.config.ts +++ b/template_content/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/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts b/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts index df83322..d6909a3 100644 --- a/template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts +++ b/template_content/{% if use_playwright %}tests{% endif %}/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