update counter-dapp guide

docs/guides/docs/counter-dapp/building-a-frontend.mdx

@@ -21,7 +21,9 @@ To build a frontend application for the counter contract, we'll do the following
 
 Our frontend application will allow users to connect with a wallet, so you'll need to have a browser wallet installed.
 
-You can use the [Fuel Wallet](https://chromewebstore.google.com/detail/fuel-wallet/dldjpboieedgcmpkchcjcbijingjcgok), [Fuelet](https://fuelet.app/), or [Metamask](https://metamask.io/).
+The current Fuel Wallet release can only be used with the `beta-5` network. To test the new `devnet`, you must use the [Fuel Development Wallet](https://chromewebstore.google.com/detail/fuel-wallet-development/hcgmehahnlbhpilepakbdinkhhaackmc).
+
+You can get test funds for the `devnet` by visiting the [Devnet Faucet](https://faucet-devnet.fuel.network/).
 
 ## Initialize a React project
 
@@ -127,7 +129,7 @@ A successful process should print and output like the following:
 
 ```sh
 Building..
-Building Sway programs using built-in 'forc' binary
+Building Sway programs using source 'forc' binary
 Generating types..
 🎉  Build completed successfully!
 ```
@@ -155,7 +157,7 @@ action={{
   file="../../examples/counter-dapp/frontend/src/index.tsx"
   lang="tsx"
   lineStart="6"
-  lineEnd="15"
+  lineEnd="13"
 />
 
 Next, modify your `frontend/src/index.tsx` file to wrap the `App` component with the `FuelProvider` and `QueryClientProvider` components.
@@ -165,16 +167,16 @@ id="fuel-wallet-provider"
 action={{
   name: 'modifyFile',
   filepath: 'guides-testing/fuel-project/frontend/src/index.tsx',
-  atLine: 22,
-  removeLines: [22],
+  atLine: 19,
+  removeLines: [19],
 }}
 />
 
 <CodeImport
   file="../../examples/counter-dapp/frontend/src/index.tsx"
   lang="tsx"
-  lineStart="22"
-  lineEnd="35"
+  lineStart="19"
+  lineEnd="29"
 />
 
 Next, change the file `fuel-project/frontend/src/App.tsx` to:

docs/guides/docs/counter-dapp/building-a-smart-contract.mdx

@@ -336,14 +336,10 @@ action={{
 }}
 />
 
-<ConditionalContent versionSet={props.versionSet} showForVersions={['default', 'nightly']}>
-
 ```sh
-cargo generate --init fuellabs/sway templates/sway-test-rs --name counter-contract --tag v0.49.3
+cargo generate --init fuellabs/sway templates/sway-test-rs --name counter-contract
 ```
 
-</ConditionalContent>
-
 ```sh
 ⚠️   Favorite `fuellabs/sway` not found in config, using it as a git repository: https://github.com/fuellabs/sway.git
 🔧   Destination: /home/user/path/to/counter-contract ...
@@ -390,6 +386,14 @@ We have two new files!
 - The `Cargo.toml` is the manifest for our new test harness and specifies the required dependencies including `fuels` (the Fuel Rust SDK).
 - The `tests/harness.rs` contains some boilerplate test code to get us started, though doesn't call any contract methods just yet.
 
+Open your `Cargo.toml` file and check the version of `fuels` used under `dev-dependencies`. Change the version to `0.61.0` if it's not already:
+
+```toml
+[dev-dependencies]
+fuels = { version = "0.61.0", features = ["fuel-core-lib"] }
+tokio = { version = "1.12", features = ["rt", "macros"] }
+```
+
 Now that we have our default test harness, let's add a useful test to it.
 
 At the bottom of `test/harness.rs` below the `can_get_contract_id()` test, add the `test_increment` test function below to verify that the value of the counter gets incremented:
@@ -457,22 +461,10 @@ Now, you can deploy the contract to the latest testnet with the `forc deploy` co
 
 If you don't have a wallet installed, the terminal will help you to create one. Then you can use the {props.faucetLink} to get some testnet coins.
 
-<ConditionalContent versionSet={props.versionSet} showForVersions={['default', 'nightly']}>
-
-```sh
-forc deploy --node-url https://devnet.fuel.network/v1/graphql
-```
-
-</ConditionalContent>
-
-<ConditionalContent versionSet={props.versionSet} showForVersions={['']}>
-
 ```sh
 forc deploy --testnet
 ```
 
-</ConditionalContent>
-
 {/*forc_wallet:example:start*/}
 The terminal will ask for the password of the wallet:
 
@@ -497,20 +489,6 @@ Finally, you will get back the network endpoint where the contract was deployed,
 
 Save the `Contract ID`, as you'll need this later to connect the frontend.
 
-<ConditionalContent versionSet={props.versionSet} showForVersions={['']}>
-
-```sh
-Contract counter-contract Deployed!
-
-Network: https://.fuel.network
-Contract ID: 0x8342d413de2a678245d9ee39f020795800c7e6a4ac5ff7daae275f533dc05e08
-Deployed in block 0x4ea52b6652836c499e44b7e42f7c22d1ed1f03cf90a1d94cd0113b9023dfa636
-```
-
-</ConditionalContent>
-
-<ConditionalContent versionSet={props.versionSet} showForVersions={['default', 'nightly']}>
-
 ```sh
 Contract counter-contract Deployed!
 
@@ -519,8 +497,6 @@ Contract ID: 0x8342d413de2a678245d9ee39f020795800c7e6a4ac5ff7daae275f533dc05e08
 Deployed in block 0x4ea52b6652836c499e44b7e42f7c22d1ed1f03cf90a1d94cd0113b9023dfa636
 ```
 
-</ConditionalContent>
-
 ### Congrats, you have completed your first smart contract on Fuel ⛽
 
 [Here is the repo for this project](https://github.com/FuelLabs/docs-hub/tree/master/docs/guides/examples/counter-dapp). If you run into any problems, a good first step is to compare your code to this repo and resolve any differences.

docs/guides/examples/counter-dapp/frontend/src/App.tsx

@@ -5,11 +5,10 @@ import {
   useIsConnected,
   useWallet
 } from '@fuels/react';
-// Import the contract factory -- you can find the name in src/contracts/contracts/index.ts.
-// You can also do command + space and the compiler will suggest the correct name.
 import { CounterContractAbi__factory  } from "./sway-api"
 import type { CounterContractAbi } from "./sway-api";
 
+// REPLACE WITH YOUR CONTRACT ID
 const CONTRACT_ID = 
   "0x...";
 

docs/guides/examples/counter-dapp/frontend/src/index.tsx

@@ -24,8 +24,8 @@ root.render(
           ],
         }}
       >
-    <App />
-    </FuelProvider>
+        <App />
+      </FuelProvider>
     </QueryClientProvider>
   </React.StrictMode>
 );

spell-check-custom-words.txt

@@ -108,4 +108,6 @@ configurables
 DeFi
 onboarding
 Fuelet
-Metamask
+Metamask
+Devnet
+devnet