From af71552cc53c41b210d2a447be5d8a17bb168ce6 Mon Sep 17 00:00:00 2001 From: Altynbek Orumbayev Date: Tue, 19 Mar 2024 21:25:44 +0100 Subject: [PATCH] chore: regen artifacts --- .../src/components/AppCalls.tsx | 16 ++--- .../src/components/AppCalls.tsx | 16 ++--- ...t-contracts.test.ts => Calculator.test.ts} | 13 ++-- ...duction_tealscript_react-contracts.algo.ts | 58 ------------------ .../src/components/AppCalls.tsx | 38 ++++-------- .../src/components/AppCalls.tsx | 16 ++--- .../src/components/AppCalls.tsx | 16 ++--- ...t-contracts.test.ts => Calculator.test.ts} | 13 ++-- ...starter_tealscript_react-contracts.algo.ts | 58 ------------------ .../src/components/AppCalls.tsx | 38 ++++-------- .../inject_content/AppCalls.tsx.jinja | 60 ++++++++++++++----- 11 files changed, 110 insertions(+), 232 deletions(-) rename examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/{production_tealscript_react-contracts.test.ts => Calculator.test.ts} (76%) delete mode 100644 examples/production_tealscript_react/projects/production_tealscript_react-contracts/contracts/production_tealscript_react-contracts.algo.ts rename examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/{starter_tealscript_react-contracts.test.ts => Calculator.test.ts} (76%) delete mode 100644 examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/contracts/starter_tealscript_react-contracts.algo.ts diff --git a/examples/production_beaker_react/projects/production_beaker_react-frontend/src/components/AppCalls.tsx b/examples/production_beaker_react/projects/production_beaker_react-frontend/src/components/AppCalls.tsx index 0364cf1..c440768 100644 --- a/examples/production_beaker_react/projects/production_beaker_react-frontend/src/components/AppCalls.tsx +++ b/examples/production_beaker_react/projects/production_beaker_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 { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' 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/hello_world' - import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' @@ -25,7 +23,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { port: algodConfig.port, token: algodConfig.token, }) - const indexerConfig = getIndexerConfigFromViteEnvironment() const indexer = algokit.getAlgoIndexerClient({ server: indexerConfig.server, @@ -39,6 +36,11 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { const sendAppCall = async () => { setLoading(true) + // Please note, in typical production scenarios, + // you wouldn't want to use deploy directly from your frontend. + // 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, @@ -47,12 +49,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { } as AppDetails const appClient = new HelloWorldClient(appDetails, algodClient) - - // Please note, in typical production scenarios, - // you wouldn't want to use deploy directly from your frontend. - // 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 isLocal = await algokit.isLocalNet(algodClient) const deployParams: Parameters[0] = { allowDelete: isLocal, diff --git a/examples/production_puya_react/projects/production_puya_react-frontend/src/components/AppCalls.tsx b/examples/production_puya_react/projects/production_puya_react-frontend/src/components/AppCalls.tsx index 1dd2661..897b80c 100644 --- a/examples/production_puya_react/projects/production_puya_react-frontend/src/components/AppCalls.tsx +++ b/examples/production_puya_react/projects/production_puya_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 { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' 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 { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' @@ -25,7 +23,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { port: algodConfig.port, token: algodConfig.token, }) - const indexerConfig = getIndexerConfigFromViteEnvironment() const indexer = algokit.getAlgoIndexerClient({ server: indexerConfig.server, @@ -39,6 +36,11 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { const sendAppCall = async () => { setLoading(true) + // Please note, in typical production scenarios, + // you wouldn't want to use deploy directly from your frontend. + // 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, @@ -47,12 +49,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { } as AppDetails const appClient = new HelloWorldClient(appDetails, algodClient) - - // Please note, in typical production scenarios, - // you wouldn't want to use deploy directly from your frontend. - // 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 deployParams = { onSchemaBreak: OnSchemaBreak.AppendApp, onUpdate: OnUpdate.AppendApp, diff --git a/examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/production_tealscript_react-contracts.test.ts b/examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/Calculator.test.ts similarity index 76% rename from examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/production_tealscript_react-contracts.test.ts rename to examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/Calculator.test.ts index 958dbc6..4051a39 100644 --- a/examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/production_tealscript_react-contracts.test.ts +++ b/examples/production_tealscript_react/projects/production_tealscript_react-contracts/__test__/Calculator.test.ts @@ -1,21 +1,21 @@ import { describe, test, expect, beforeAll, beforeEach } from '@jest/globals'; import { algorandFixture } from '@algorandfoundation/algokit-utils/testing'; -import { ProductionTealscriptReactContractsClient } from '../contracts/clients/ProductionTealscriptReactContractsClient'; +import { CalculatorClient } from '../contracts/clients/CalculatorClient'; import * as algokit from '@algorandfoundation/algokit-utils'; const fixture = algorandFixture(); algokit.Config.configure({ populateAppCallResources: true }); -let appClient: ProductionTealscriptReactContractsClient; +let appClient: CalculatorClient; -describe('ProductionTealscriptReactContracts', () => { +describe('Calculator', () => { beforeEach(fixture.beforeEach); beforeAll(async () => { await fixture.beforeEach(); const { algod, testAccount } = fixture.context; - appClient = new ProductionTealscriptReactContractsClient( + appClient = new CalculatorClient( { sender: testAccount, resolveBy: 'id', @@ -40,4 +40,9 @@ describe('ProductionTealscriptReactContracts', () => { const diff = await appClient.doMath({ a, b, operation: 'difference' }); expect(diff.return?.valueOf()).toBe(BigInt(a >= b ? a - b : b - a)); }); + + test('hello', async () => { + const diff = await appClient.hello({ name: 'world!' }); + expect(diff.return?.valueOf()).toBe('Hello, world!'); + }); }); diff --git a/examples/production_tealscript_react/projects/production_tealscript_react-contracts/contracts/production_tealscript_react-contracts.algo.ts b/examples/production_tealscript_react/projects/production_tealscript_react-contracts/contracts/production_tealscript_react-contracts.algo.ts deleted file mode 100644 index bf7a66d..0000000 --- a/examples/production_tealscript_react/projects/production_tealscript_react-contracts/contracts/production_tealscript_react-contracts.algo.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Contract } from '@algorandfoundation/tealscript'; - -// eslint-disable-next-line no-unused-vars -class ProductionTealscriptReactContracts extends Contract { - /** - * Calculates the sum of two numbers - * - * @param a - * @param b - * @returns The sum of a and b - */ - private getSum(a: uint64, b: uint64): uint64 { - return a + b; - } - - /** - * Calculates the difference between two numbers - * - * @param a - * @param b - * @returns The difference between a and b. - */ - private getDifference(a: uint64, b: uint64): uint64 { - return a >= b ? a - b : b - a; - } - - /** - * A method that takes two numbers and does either addition or subtraction - * - * @param a The first uint64 - * @param b The second uint64 - * @param operation The operation to perform. Can be either 'sum' or 'difference' - * - * @returns The result of the operation - */ - doMath(a: uint64, b: uint64, operation: string): uint64 { - let result: uint64; - - if (operation === 'sum') { - result = this.getSum(a, b); - } else if (operation === 'difference') { - result = this.getDifference(a, b); - } else throw Error('Invalid operation'); - - return result; - } - - /** - * A demonstration method used in the AlgoKit fullstack template. - * Greets the user by name. - * - * @param name The name of the user to greet. - * @returns A greeting message to the user. - */ - hello(name: string): string { - return 'Hello, ' + name; - } -} diff --git a/examples/production_tealscript_react/projects/production_tealscript_react-frontend/src/components/AppCalls.tsx b/examples/production_tealscript_react/projects/production_tealscript_react-frontend/src/components/AppCalls.tsx index 1c6bf06..7f8f8b5 100644 --- a/examples/production_tealscript_react/projects/production_tealscript_react-frontend/src/components/AppCalls.tsx +++ b/examples/production_tealscript_react/projects/production_tealscript_react-frontend/src/components/AppCalls.tsx @@ -1,14 +1,10 @@ import * as algokit from '@algorandfoundation/algokit-utils' import { TransactionSignerAccount } from '@algorandfoundation/algokit-utils/types/account' -import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' import { useWallet } from '@txnlab/use-wallet' import { useSnackbar } from 'notistack' import { useState } from 'react' - -import { CalculatorClient } from '../contracts/ProductionTealscriptReactContracts' - -import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' -import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' +import { CalculatorClient } from '../contracts/Calculator' +import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' interface AppCallsInterface { openModal: boolean @@ -26,38 +22,26 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { token: algodConfig.token, }) - const indexerConfig = getIndexerConfigFromViteEnvironment() - const indexer = algokit.getAlgoIndexerClient({ - server: indexerConfig.server, - port: indexerConfig.port, - token: indexerConfig.token, - }) - const { enqueueSnackbar } = useSnackbar() const { signer, activeAddress } = useWallet() const sendAppCall = async () => { setLoading(true) - const appDetails = { - resolveBy: 'creatorAndName', - sender: { signer, addr: activeAddress } as TransactionSignerAccount, - creatorAddress: activeAddress, - findExistingUsing: indexer, - } as AppDetails - - const appClient = new CalculatorClient(appDetails, algodClient) - // Please note, in typical production scenarios, // you wouldn't want to use deploy directly from your frontend. // 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 deployParams = { - onSchemaBreak: OnSchemaBreak.AppendApp, - onUpdate: OnUpdate.AppendApp, - } - await appClient.deploy(deployParams).catch((e: Error) => { + const appClient = new CalculatorClient( + { + sender: { signer, addr: activeAddress } as TransactionSignerAccount, + resolveBy: 'id', + id: 0, + }, + algodClient, + ) + await appClient.create.createApplication({}).catch((e: Error) => { enqueueSnackbar(`Error deploying the contract: ${e.message}`, { variant: 'error' }) setLoading(false) return diff --git a/examples/starter_beaker_react/projects/starter_beaker_react-frontend/src/components/AppCalls.tsx b/examples/starter_beaker_react/projects/starter_beaker_react-frontend/src/components/AppCalls.tsx index a86aac4..429ef89 100644 --- a/examples/starter_beaker_react/projects/starter_beaker_react-frontend/src/components/AppCalls.tsx +++ b/examples/starter_beaker_react/projects/starter_beaker_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 { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' 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/hello_world' - import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' @@ -25,7 +23,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { port: algodConfig.port, token: algodConfig.token, }) - const indexerConfig = getIndexerConfigFromViteEnvironment() const indexer = algokit.getAlgoIndexerClient({ server: indexerConfig.server, @@ -39,6 +36,11 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { const sendAppCall = async () => { setLoading(true) + // Please note, in typical production scenarios, + // you wouldn't want to use deploy directly from your frontend. + // 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, @@ -47,12 +49,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { } as AppDetails const appClient = new HelloWorldClient(appDetails, algodClient) - - // Please note, in typical production scenarios, - // you wouldn't want to use deploy directly from your frontend. - // 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 deployParams = { onSchemaBreak: OnSchemaBreak.AppendApp, onUpdate: OnUpdate.AppendApp, diff --git a/examples/starter_puya_react/projects/starter_puya_react-frontend/src/components/AppCalls.tsx b/examples/starter_puya_react/projects/starter_puya_react-frontend/src/components/AppCalls.tsx index 1dd2661..897b80c 100644 --- a/examples/starter_puya_react/projects/starter_puya_react-frontend/src/components/AppCalls.tsx +++ b/examples/starter_puya_react/projects/starter_puya_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 { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' 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 { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' @@ -25,7 +23,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { port: algodConfig.port, token: algodConfig.token, }) - const indexerConfig = getIndexerConfigFromViteEnvironment() const indexer = algokit.getAlgoIndexerClient({ server: indexerConfig.server, @@ -39,6 +36,11 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { const sendAppCall = async () => { setLoading(true) + // Please note, in typical production scenarios, + // you wouldn't want to use deploy directly from your frontend. + // 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, @@ -47,12 +49,6 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { } as AppDetails const appClient = new HelloWorldClient(appDetails, algodClient) - - // Please note, in typical production scenarios, - // you wouldn't want to use deploy directly from your frontend. - // 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 deployParams = { onSchemaBreak: OnSchemaBreak.AppendApp, onUpdate: OnUpdate.AppendApp, diff --git a/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/starter_tealscript_react-contracts.test.ts b/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/Calculator.test.ts similarity index 76% rename from examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/starter_tealscript_react-contracts.test.ts rename to examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/Calculator.test.ts index 974504e..4051a39 100644 --- a/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/starter_tealscript_react-contracts.test.ts +++ b/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/__test__/Calculator.test.ts @@ -1,21 +1,21 @@ import { describe, test, expect, beforeAll, beforeEach } from '@jest/globals'; import { algorandFixture } from '@algorandfoundation/algokit-utils/testing'; -import { StarterTealscriptReactContractsClient } from '../contracts/clients/StarterTealscriptReactContractsClient'; +import { CalculatorClient } from '../contracts/clients/CalculatorClient'; import * as algokit from '@algorandfoundation/algokit-utils'; const fixture = algorandFixture(); algokit.Config.configure({ populateAppCallResources: true }); -let appClient: StarterTealscriptReactContractsClient; +let appClient: CalculatorClient; -describe('StarterTealscriptReactContracts', () => { +describe('Calculator', () => { beforeEach(fixture.beforeEach); beforeAll(async () => { await fixture.beforeEach(); const { algod, testAccount } = fixture.context; - appClient = new StarterTealscriptReactContractsClient( + appClient = new CalculatorClient( { sender: testAccount, resolveBy: 'id', @@ -40,4 +40,9 @@ describe('StarterTealscriptReactContracts', () => { const diff = await appClient.doMath({ a, b, operation: 'difference' }); expect(diff.return?.valueOf()).toBe(BigInt(a >= b ? a - b : b - a)); }); + + test('hello', async () => { + const diff = await appClient.hello({ name: 'world!' }); + expect(diff.return?.valueOf()).toBe('Hello, world!'); + }); }); diff --git a/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/contracts/starter_tealscript_react-contracts.algo.ts b/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/contracts/starter_tealscript_react-contracts.algo.ts deleted file mode 100644 index 8f0795b..0000000 --- a/examples/starter_tealscript_react/projects/starter_tealscript_react-contracts/contracts/starter_tealscript_react-contracts.algo.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Contract } from '@algorandfoundation/tealscript'; - -// eslint-disable-next-line no-unused-vars -class StarterTealscriptReactContracts extends Contract { - /** - * Calculates the sum of two numbers - * - * @param a - * @param b - * @returns The sum of a and b - */ - private getSum(a: uint64, b: uint64): uint64 { - return a + b; - } - - /** - * Calculates the difference between two numbers - * - * @param a - * @param b - * @returns The difference between a and b. - */ - private getDifference(a: uint64, b: uint64): uint64 { - return a >= b ? a - b : b - a; - } - - /** - * A method that takes two numbers and does either addition or subtraction - * - * @param a The first uint64 - * @param b The second uint64 - * @param operation The operation to perform. Can be either 'sum' or 'difference' - * - * @returns The result of the operation - */ - doMath(a: uint64, b: uint64, operation: string): uint64 { - let result: uint64; - - if (operation === 'sum') { - result = this.getSum(a, b); - } else if (operation === 'difference') { - result = this.getDifference(a, b); - } else throw Error('Invalid operation'); - - return result; - } - - /** - * A demonstration method used in the AlgoKit fullstack template. - * Greets the user by name. - * - * @param name The name of the user to greet. - * @returns A greeting message to the user. - */ - hello(name: string): string { - return 'Hello, ' + name; - } -} diff --git a/examples/starter_tealscript_react/projects/starter_tealscript_react-frontend/src/components/AppCalls.tsx b/examples/starter_tealscript_react/projects/starter_tealscript_react-frontend/src/components/AppCalls.tsx index 19c09ec..7f8f8b5 100644 --- a/examples/starter_tealscript_react/projects/starter_tealscript_react-frontend/src/components/AppCalls.tsx +++ b/examples/starter_tealscript_react/projects/starter_tealscript_react-frontend/src/components/AppCalls.tsx @@ -1,14 +1,10 @@ import * as algokit from '@algorandfoundation/algokit-utils' import { TransactionSignerAccount } from '@algorandfoundation/algokit-utils/types/account' -import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' import { useWallet } from '@txnlab/use-wallet' import { useSnackbar } from 'notistack' import { useState } from 'react' - -import { CalculatorClient } from '../contracts/StarterTealscriptReactContracts' - -import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' -import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' +import { CalculatorClient } from '../contracts/Calculator' +import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' interface AppCallsInterface { openModal: boolean @@ -26,38 +22,26 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { token: algodConfig.token, }) - const indexerConfig = getIndexerConfigFromViteEnvironment() - const indexer = algokit.getAlgoIndexerClient({ - server: indexerConfig.server, - port: indexerConfig.port, - token: indexerConfig.token, - }) - const { enqueueSnackbar } = useSnackbar() const { signer, activeAddress } = useWallet() const sendAppCall = async () => { setLoading(true) - const appDetails = { - resolveBy: 'creatorAndName', - sender: { signer, addr: activeAddress } as TransactionSignerAccount, - creatorAddress: activeAddress, - findExistingUsing: indexer, - } as AppDetails - - const appClient = new CalculatorClient(appDetails, algodClient) - // Please note, in typical production scenarios, // you wouldn't want to use deploy directly from your frontend. // 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 deployParams = { - onSchemaBreak: OnSchemaBreak.AppendApp, - onUpdate: OnUpdate.AppendApp, - } - await appClient.deploy(deployParams).catch((e: Error) => { + const appClient = new CalculatorClient( + { + sender: { signer, addr: activeAddress } as TransactionSignerAccount, + resolveBy: 'id', + id: 0, + }, + algodClient, + ) + await appClient.create.createApplication({}).catch((e: Error) => { enqueueSnackbar(`Error deploying the contract: ${e.message}`, { variant: 'error' }) setLoading(false) return diff --git a/template_content/inject_content/AppCalls.tsx.jinja b/template_content/inject_content/AppCalls.tsx.jinja index 9c04df6..491d7a9 100644 --- a/template_content/inject_content/AppCalls.tsx.jinja +++ b/template_content/inject_content/AppCalls.tsx.jinja @@ -1,18 +1,22 @@ import * as algokit from '@algorandfoundation/algokit-utils' import { TransactionSignerAccount } from '@algorandfoundation/algokit-utils/types/account' -import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' import { useWallet } from '@txnlab/use-wallet' import { useSnackbar } from 'notistack' import { useState } from 'react' -{% if contract_template == 'beaker' %} +{%- if contract_template == 'beaker' %} +import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' import { {{ contract_name.split('_')|map('capitalize')|join }}Client } from '../contracts/{{ contract_name }}' -{% elif contract_template == 'tealscript' %} -import { {{ contract_name.split('_')|map('capitalize')|join }}Client } from '../contracts/{{ project_name.split('_')|map('capitalize')|join }}Contracts' -{% else %} +import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' +import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' +{%- elif contract_template == 'tealscript' %} +import { {{ contract_name }}Client } from '../contracts/{{ contract_name }}' +import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' +{%- else %} +import { AppDetails } from '@algorandfoundation/algokit-utils/types/app-client' import { {{ contract_name.split('_')|map('capitalize')|join }}Client } from '../contracts/{{ contract_name.split('_')|map('capitalize')|join }}' -{% endif %} import { OnSchemaBreak, OnUpdate } from '@algorandfoundation/algokit-utils/types/app' import { getAlgodConfigFromViteEnvironment, getIndexerConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' +{%- endif %} interface AppCallsInterface { openModal: boolean @@ -30,12 +34,14 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { token: algodConfig.token, }) + {%- if contract_template != 'tealscript' %} const indexerConfig = getIndexerConfigFromViteEnvironment() const indexer = algokit.getAlgoIndexerClient({ server: indexerConfig.server, port: indexerConfig.port, token: indexerConfig.token, }) + {%- endif %} const { enqueueSnackbar } = useSnackbar() const { signer, activeAddress } = useWallet() @@ -43,6 +49,26 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { const sendAppCall = async () => { setLoading(true) + // Please note, in typical production scenarios, + // you wouldn't want to use deploy directly from your frontend. + // 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. + {%- if contract_template == 'tealscript'%} + const appClient = new {{ contract_name.split('_')|map('capitalize')|join }}Client( + { + sender: { signer, addr: activeAddress } as TransactionSignerAccount, + resolveBy: 'id', + id: 0, + }, + algodClient, + ) + await appClient.create.createApplication({}).catch((e: Error) => { + enqueueSnackbar(`Error deploying the contract: ${e.message}`, { variant: 'error' }) + setLoading(false) + return + }) + {%- elif preset_name == 'starter' or contract_template != 'beaker' %} const appDetails = { resolveBy: 'creatorAndName', sender: { signer, addr: activeAddress } as TransactionSignerAccount, @@ -51,18 +77,24 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { } as AppDetails const appClient = new {{ contract_name.split('_')|map('capitalize')|join }}Client(appDetails, algodClient) - - // Please note, in typical production scenarios, - // you wouldn't want to use deploy directly from your frontend. - // 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. - {%- if preset_name == 'starter' or contract_template != 'beaker' %} 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) + return + }) {%- elif preset_name == 'production' and contract_template == 'beaker' %} + const appDetails = { + resolveBy: 'creatorAndName', + sender: { signer, addr: activeAddress } as TransactionSignerAccount, + creatorAddress: activeAddress, + findExistingUsing: indexer, + } as AppDetails + + const appClient = new {{ contract_name.split('_')|map('capitalize')|join }}Client(appDetails, algodClient) const isLocal = await algokit.isLocalNet(algodClient) const deployParams: Parameters[0] = { allowDelete: isLocal, @@ -70,12 +102,12 @@ const AppCalls = ({ openModal, setModalState }: AppCallsInterface) => { onSchemaBreak: isLocal ? OnSchemaBreak.ReplaceApp : OnSchemaBreak.Fail, onUpdate: isLocal ? OnUpdate.UpdateApp : OnUpdate.Fail, } - {%- endif %} await appClient.deploy(deployParams).catch((e: Error) => { enqueueSnackbar(`Error deploying the contract: ${e.message}`, { variant: 'error' }) setLoading(false) return }) + {%- endif %} const response = await appClient.hello({ name: contractInput }).catch((e: Error) => { enqueueSnackbar(`Error calling the contract: ${e.message}`, { variant: 'error' })