Merge branch 'master' into db/feat/unsupported-blob-tx

.changeset/cyan-chicken-jam.md

@@ -0,0 +1,4 @@
+---
+---
+
+fix: build error for `demo-wallet-sdk-react`

.changeset/shaggy-houses-remember.md

@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: add testing to `create-fuels`

apps/demo-wallet-sdk-react/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fuels/connectors": "^0.2.2",
+    "@fuels/connectors": "^0.8.1",
     "@fuels/react": "^0.20.0",
     "@tanstack/react-query": "^5.51.1",
     "fuels": "workspace:*",

apps/demo-wallet-sdk-react/pages/_app.tsx

@@ -1,6 +1,12 @@
 import "@/styles/globals.css";
 // #region wallet-sdk-react-provider
-import { defaultConnectors } from '@fuels/connectors';
+import {
+  BakoSafeConnector,
+  FueletWalletConnector,
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  WalletConnectConnector,
+} from "@fuels/connectors";
 import { FuelProvider } from "@fuels/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
@@ -12,13 +18,21 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
-        <FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
-          <Component { ...pageProps } />
+        <FuelProvider
+          fuelConfig={{
+            connectors: [
+              new FuelWalletConnector(),
+              new WalletConnectConnector(),
+              new BakoSafeConnector(),
+              new FueletWalletConnector(),
+              new FuelWalletDevelopmentConnector(),
+            ],
+          }}
+        >
+          <Component {...pageProps} />
         </FuelProvider>
       </QueryClientProvider>
     </React.StrictMode>
   );
 }
 // #endregion wallet-sdk-react-provider
-
-

apps/docs-snippets/src/guide/contracts/interacting-with-contracts.test.ts

@@ -18,7 +18,7 @@ describe(__filename, () => {
   });
 
   it('should successfully use "get" to read from the blockchain', async () => {
-    const { waitForResult } = await counterContract.functions.increment_count(1).call();
+    const { waitForResult } = await counterContract.functions.increment_counter(1).call();
     await waitForResult();
 
     const { id: contractId, interface: abi } = counterContract;
@@ -37,7 +37,7 @@ describe(__filename, () => {
     // #region interacting-with-contracts-2
     const contract = new Contract(contractId, abi, provider);
 
-    const { value } = await contract.functions.increment_count(1).dryRun();
+    const { value } = await contract.functions.increment_counter(1).dryRun();
     // #endregion interacting-with-contracts-2
     expect(value.toNumber()).toBeGreaterThanOrEqual(1);
   });
@@ -50,7 +50,7 @@ describe(__filename, () => {
     // #region interacting-with-contracts-3
     const contract = new Contract(contractId, abi, fundedWallet);
 
-    const { value } = await contract.functions.increment_count(10).simulate();
+    const { value } = await contract.functions.increment_counter(10).simulate();
     // #endregion interacting-with-contracts-3
     expect(value.toNumber()).toBeGreaterThanOrEqual(10);
   });
@@ -59,7 +59,7 @@ describe(__filename, () => {
     const contract = counterContract;
 
     // #region interacting-with-contracts-4
-    const { transactionId, waitForResult } = await contract.functions.increment_count(10).call();
+    const { transactionId, waitForResult } = await contract.functions.increment_counter(10).call();
 
     const { value } = await waitForResult();
     // #endregion interacting-with-contracts-4
@@ -72,7 +72,7 @@ describe(__filename, () => {
     const contract = counterContract;
 
     // #region interacting-with-contracts-5
-    const { waitForResult } = await contract.functions.increment_count(10).call();
+    const { waitForResult } = await contract.functions.increment_counter(10).call();
     const { value } = await waitForResult();
     // #endregion interacting-with-contracts-5
 

apps/docs-snippets/src/guide/contracts/multicalls.test.ts

@@ -61,8 +61,8 @@ describe(__filename, () => {
     const { waitForResult } = await counterContract
       .multiCall([
         counterContract.functions.get_count(),
-        counterContract.functions.increment_count(2),
-        counterContract.functions.increment_count(4),
+        counterContract.functions.increment_counter(2),
+        counterContract.functions.increment_counter(4),
       ])
       .call();
 
@@ -83,7 +83,7 @@ describe(__filename, () => {
     const chain = echoContract.multiCall([
       echoContract.functions.echo_u8(17),
       counterContract.functions.get_count(),
-      counterContract.functions.increment_count(5),
+      counterContract.functions.increment_counter(5),
     ]);
 
     const { waitForResult } = await chain.call();

apps/docs-snippets/src/guide/cookbook/custom-transactions-contract-calls.test.ts

@@ -41,7 +41,7 @@ describe('Custom Transactions from Contract Calls', () => {
     // Connect to the contract
     const contractInstance = new Contract(contract.id, abi, senderWallet);
     // Create an invocation scope for the contract function you'd like to call in the transaction
-    const scope = contractInstance.functions.increment_count(amountToRecipient).addTransfer({
+    const scope = contractInstance.functions.increment_counter(amountToRecipient).addTransfer({
       amount: amountToRecipient,
       destination: receiverWallet.address,
       assetId: baseAssetId,

apps/docs-snippets/src/guide/create-fuels/decrement_counter.test.ts

@@ -0,0 +1,65 @@
+import { launchTestNode } from 'fuels/test-utils';
+import { describe, test, expect } from 'vitest';
+
+import { CounterAbi__factory } from '../../../test/typegen';
+import bytecode from '../../../test/typegen/contracts/CounterAbi.hex';
+
+/**
+ * @group node
+ * @group browser
+ */
+describe('Counter Contract', () => {
+  // #region decrement-counter
+  // #context import { CounterAbi__factory } from './sway-programs-api';
+  // #context import bytecode from './sway-programs-api/contracts/CounterAbi.hex';
+
+  test('calls the decrement_counter function', async () => {
+    // First, we'll launch a test node, passing the contract factory and bytecode. This will deploy the contract
+    // to our test node so we can test against it.
+    using launched = await launchTestNode({
+      // The test node will be killed automatically once the `launched` variable goes out of scope,
+      // because we are instantiating it with the `using` keyword.
+      contractsConfigs: [
+        {
+          deployer: CounterAbi__factory,
+          bytecode,
+        },
+      ],
+    });
+
+    // We can now destructure the contract from the launched object.
+    const {
+      contracts: [contract],
+    } = launched;
+
+    // Lets setup some values to use in the test.
+    const initialCount = 0;
+    const incrementedValue = 5;
+    const decrementedValue = 2;
+
+    // We can now call the contract functions and test the results. Lets assert the initial value of the counter.
+    const { waitForResult: initWaitForResult } = await contract.functions.get_count().call();
+    const { value: initValue } = await initWaitForResult();
+    expect(initValue.toNumber()).toBe(initialCount);
+
+    // Next we'll increment the counter, so that we can decrement it.
+    const { waitForResult: incWaitForResult } = await contract.functions
+      .increment_counter(5)
+      .call();
+    const { value: incValue } = await incWaitForResult();
+    expect(incValue.toNumber()).toBe(incrementedValue);
+
+    // Next, we'll decrement the counter by 3 and assert the new value.
+    const { waitForResult: decWaitForResult } = await contract.functions
+      .decrement_counter(3)
+      .call();
+    const { value: decValue } = await decWaitForResult();
+    expect(decValue.toNumber()).toBe(decrementedValue);
+
+    // Finally, we'll test the get count function again to ensure parity.
+    const { waitForResult: finalWaitForResult } = await contract.functions.get_count().call();
+    const { value: finalValue } = await finalWaitForResult();
+    expect(finalValue.toNumber()).toBe(decrementedValue);
+  });
+  // #endregion decrement-counter
+});

apps/docs-snippets/src/guide/transactions/transaction-parameters.test.ts

@@ -93,7 +93,7 @@ describe(__filename, () => {
   it('executes contract call with txParams', async () => {
     // #region transaction-parameters-8
     const { waitForResult } = await contract.functions
-      .increment_count(15)
+      .increment_counter(15)
       .txParams({
         variableOutputs: 1,
       })

apps/docs-snippets/src/guide/transactions/transaction-response.test.ts

@@ -28,7 +28,7 @@ describe('Transaction Response', () => {
   it('gets transaction response from contract call', async () => {
     // #region transaction-response-1
     // Call a contract function
-    const call = await contract.functions.increment_count(15).call();
+    const call = await contract.functions.increment_counter(15).call();
 
     // Wait for the result
     const { transactionResponse } = await call.waitForResult();

apps/docs-snippets/test/fixtures/forc-projects/counter/src/main.sw

@@ -5,7 +5,10 @@ abi Counter {
     fn get_count() -> u64;
 
     #[storage(write, read)]
-    fn increment_count(amount: u64) -> u64;
+    fn increment_counter(amount: u64) -> u64;
+
+    #[storage(write, read)]
+    fn decrement_counter(amount: u64) -> u64;
 }
 
 storage {
@@ -19,9 +22,16 @@ impl Counter for Contract {
     }
 
     #[storage(write, read)]
-    fn increment_count(amount: u64) -> u64 {
+    fn increment_counter(amount: u64) -> u64 {
         let current = storage.counter.read();
         storage.counter.write(current + amount);
         storage.counter.read()
     }
+
+    #[storage(write, read)]
+    fn decrement_counter(amount: u64) -> u64 {
+        let current = storage.counter.read();
+        storage.counter.write(current - amount);
+        storage.counter.read()
+    }
 }

apps/docs/src/guide/creating-a-fuel-dapp/index.md

@@ -183,14 +183,22 @@ Second, we will add a new button to the UI that will call the `onDecrementPresse
 </Button>
 ```
 
-Congratulations! That's all. You should now be able to see the counter dApp running at `http://localhost:3000` with our newly added decrement functionality.
+Congratulations! You should now be able to see the counter dApp running at `http://localhost:3000` with our newly added decrement functionality.
 
 You can find the complete source code of the dApp we built [here](https://github.com/FuelLabs/fuels-ts/tree/master/apps/create-fuels-counter-guide).
 
 ![End result of this guide](../../public/creating-a-fuel-dapp-create-fuels-end-result.png)
 
 Whenever you want to add a new feature to your dApp and quickly prototype things, you can follow the same steps we followed in this guide.
 
+### 3. Extending the Test Suite (Optional)
+
+Testing the integration with your smart contract isn't essential, but it's good practice to ensure that your application is working as expected. It also gives you the ability to test your application in a controlled environment against a local node.
+
+We've provided some examples for each program type in the `./test` directory of your project. But let's also add a test for our new `decrement_counter` function in the `./test/contract.test.ts` file:
+
+<<< @/../../docs-snippets/src/guide/create-fuels/decrement_counter.test.ts#decrement-counter{ts:line-numbers}
+
 ## Next Steps
 
 - Now that you have a basic counter dApp running and have the `npm create fuels` workflow powering you, you can start building more complex dApps using the Fuel Stack. A good place to start for ideas and reference code is the [Sway Applications Repo](https://github.com/FuelLabs/sway-applications).
@@ -199,6 +207,8 @@ Whenever you want to add a new feature to your dApp and quickly prototype things
 
 - If you want to deploy your dApp to the testnet, check out our [Deploying a dApp to Testnet](./deploying-a-dapp-to-testnet.md) guide.
 
+- If you want to further validate the functionality of your dApp and program types, check out the `test` directory in your `create fuels` project. Couple this with our [testing guide](https://docs.fuel.network/docs/fuels-ts/testing/) to get a better understanding of how to test your dApp.
+
 - If you have any questions or need help, feel free to reach out to us on the [Official Fuel Forum](https://forum.fuel.network/).
 
 - If you want to learn more about the Fuel Stack, check out the [Fuel Docs](https://docs.fuel.network/).

packages/create-fuels/src/bin.ts

@@ -5,6 +5,7 @@ import { runScaffoldCli, setupProgram } from './cli';
 
 runScaffoldCli({
   program: setupProgram(),
+  templateName: 'nextjs',
   args: process.argv,
 })
   .then(() => process.exit(0))

packages/create-fuels/src/cli.ts

@@ -38,10 +38,12 @@ function writeEnvFile(envFilePath: string) {
 
 export const runScaffoldCli = async ({
   program,
+  templateName = 'nextjs',
   args = process.argv,
 }: {
   program: Command;
   args: string[];
+  templateName: string;
 }) => {
   program.parse(args);
 
@@ -84,7 +86,8 @@ export const runScaffoldCli = async ({
 
   await mkdir(projectPath);
 
-  await cp(join(__dirname, '../templates/nextjs'), projectPath, {
+  const templateDir = join(__dirname, '..', 'templates', templateName);
+  await cp(templateDir, projectPath, {
     recursive: true,
     filter: (filename) => !filename.includes('CHANGELOG.md'),
   });

packages/create-fuels/src/lib/rewriteTemplateFiles.test.ts

@@ -3,6 +3,7 @@ import { join } from 'path';
 
 import {
   bootstrapProject,
+  cleanupFilesystem,
   copyTemplate,
   resetFilesystem,
   type ProjectPaths,
@@ -24,19 +25,23 @@ describe('rewriteTemplateFiles', () => {
 
   beforeEach(() => {
     paths = bootstrapProject(__filename);
-    copyTemplate(paths.sourceTemplate, paths.template, false);
+    copyTemplate(paths.templateSource, paths.templateRoot, false);
   });
 
   afterEach(() => {
-    resetFilesystem(paths.root);
-    resetFilesystem(paths.template);
+    resetFilesystem(paths.projectRoot);
+    resetFilesystem(paths.templateRoot);
     vi.resetAllMocks();
   });
 
+  afterAll(() => {
+    cleanupFilesystem();
+  });
+
   it('should rewrite the package.json', () => {
-    const packageJsonPath = join(paths.template, 'package.json');
+    const packageJsonPath = join(paths.templateRoot, 'package.json');
 
-    rewriteTemplateFiles(paths.template);
+    rewriteTemplateFiles(paths.templateRoot);
 
     const packageJson = readFileSync(packageJsonPath, 'utf-8');
 
@@ -49,13 +54,42 @@ describe('rewriteTemplateFiles', () => {
   });
 
   it('should rewrite the fuels.config.ts', () => {
-    const fuelsConfigPath = join(paths.template, 'fuels.config.ts');
+    const fuelsConfigPath = join(paths.templateRoot, 'fuels.config.ts');
 
-    rewriteTemplateFiles(paths.template);
+    rewriteTemplateFiles(paths.templateRoot);
 
     const fuelsConfig = readFileSync(fuelsConfigPath, 'utf-8');
 
     expect(fuelsConfig).not.toContain(/\n\W+forcPath: 'fuels-forc',/g);
     expect(fuelsConfig).not.toContain(/\n\W+fuelCorePath: 'fuels-core',/g);
   });
+
+  it('should rewrite the test files', () => {
+    const testDir = join(paths.templateRoot, 'test');
+    const programs = [
+      {
+        program: 'contract',
+        capitalised: 'Contract',
+      },
+      {
+        program: 'predicate',
+        capitalised: 'Predicate',
+      },
+      {
+        program: 'script',
+        capitalised: 'Script',
+      },
+    ];
+
+    rewriteTemplateFiles(paths.templateRoot);
+
+    programs.forEach(({ program, capitalised }) => {
+      const testFilePath = join(testDir, `${program}.test.ts`);
+      const testFileContents = readFileSync(testFilePath, 'utf-8');
+
+      expect(testFileContents).not.toContain('@group node');
+      expect(testFileContents).not.toContain('@group browser');
+      expect(testFileContents).toContain(`${capitalised} Testing`);
+    });
+  });
 });