Merge pull request #78 from Scaffold-Stark/bu/update-deploy-flag

0xquantum3labs · web-flow · commit 4a0e95171ebf · 2025-01-08T11:24:46.000+07:00
Add deploy flag to Customize Your Own dApp
diff --git a/docs/components/Balance.md b/docs/components/Balance.md
@@ -28,29 +28,24 @@ import { Balance } from "~~/components/scaffold-stark";
 
 ## Props
 
-| Prop                     | Type     | Default Value | Description                                                                                                               |
-| ------------------------ | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| **address**              | `string` | `undefined`   | Address in `0x___` format, it will resolve its Starknet Domain if it has one associated(coming soon).                     |
-| **className** (optional) | `string` | `""`          | Prop to pass additional CSS styling to the component. You can use Tailwind / daisyUI classes like `text-3xl` for styling. |
-| **usdMode** (optional) | `boolean` | `false`          | If true, the balance is displayed in USD. Otherwise, it defaults to ETH/STRK. |
-
+| Prop                     | Type      | Default Value | Description                                                                                                               |
+| ------------------------ | --------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| **address**              | `string`  | `undefined`   | Address in `0x___` format, it will resolve its Starknet Domain if it has one associated(coming soon).                     |
+| **className** (optional) | `string`  | `""`          | Prop to pass additional CSS styling to the component. You can use Tailwind / daisyUI classes like `text-3xl` for styling. |
+| **usdMode** (optional)   | `boolean` | `false`       | If true, the balance is displayed in USD. Otherwise, it defaults to ETH/STRK.                                             |
 
 ## Example
 
 The `Balance` component can be easily customized using Tailwind or daisyUI classes. Here’s a more detailed example of its usage:
 
 ```tsx
-<Balance
-  address="0x34aA3F359A9D614239015126635CE7732c18fDF3"
-  className="text-lg text-gray-700 mt-4"
-  usdMode={true}
-/>
+<Balance address="0x34aA3F359A9D614239015126635CE7732c18fDF3" className="text-lg text-gray-700 mt-4" usdMode={true} />
 ```
 
 This example showcases how to apply additional styling to the component and enables the USD display mode.
 
-
 :::info
+
 - The component automatically handles loading states, showing a skeleton loader when the balance is being fetched.
 - If the address is invalid or no balance is found, it will show an error message.
-:::
+  :::
diff --git a/docs/hooks/useScaffoldStrkBalance.md b/docs/hooks/useScaffoldStrkBalance.md
@@ -31,19 +31,19 @@ This example demonstrates how to use the `useScaffoldStrkBalance` hook to displa
 
 ## Configuration
 
-| Parameter      | Type                   | Description                                                                                     |
-| :------------- | :--------------------- | :---------------------------------------------------------------------------------------------- |
-| **address**    | `Address \| string`    | The STRK address to fetch the balance for. If not provided, it will attempt to fetch the balance for the current connected account. |
+| Parameter   | Type                | Description                                                                                                                         |
+| :---------- | :------------------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| **address** | `Address \| string` | The STRK address to fetch the balance for. If not provided, it will attempt to fetch the balance for the current connected account. |
 
 ## Return Values
 
-| Parameter        | Type          | Description                                                                                                    |
-| :--------------- | :------------ | :------------------------------------------------------------------------------------------------------------- |
-| **value**        | `bigint`      | The raw STRK balance fetched from the contract as a `bigint`.                                                   |
-| **decimals**     | `number`      | Number of decimals for the token. Defaults to `18` for STRK.                                                    |
-| **symbol**       | `string`      | The token symbol. For this contract, it will return `"STRK"`.                                                   |
-| **formatted**    | `string`      | The balance formatted into a human-readable string using ethers' `formatUnits`.                                 |
-| **error**        | `Error`       | Error object in case there is a failure fetching the balance.                                                   |
+| Parameter     | Type     | Description                                                                     |
+| :------------ | :------- | :------------------------------------------------------------------------------ |
+| **value**     | `bigint` | The raw STRK balance fetched from the contract as a `bigint`.                   |
+| **decimals**  | `number` | Number of decimals for the token. Defaults to `18` for STRK.                    |
+| **symbol**    | `string` | The token symbol. For this contract, it will return `"STRK"`.                   |
+| **formatted** | `string` | The balance formatted into a human-readable string using ethers' `formatUnits`. |
+| **error**     | `Error`  | Error object in case there is a failure fetching the balance.                   |
 
 ## Best Practices
 
diff --git a/docs/quick-start/customize-your-own-dApp.mdx b/docs/quick-start/customize-your-own-dApp.mdx
@@ -19,6 +19,61 @@ These two directories together form the complete project structure, with `snfoun
 2. **Deployment Scripts**:
    The deployment scripts are located in `packages/snfoundry/scripts-ts/deploy.ts`. This script is used to deploy your smart contract to the specified blockchain network. By editing this script, you can adjust the deployment process, such as specifying different networks or contract parameters.
 
+   #### Deployment Command Line Flags
+
+   The deployment script supports several command line flags to customize the deployment process:
+
+   #### --network
+
+   - Type: string
+   - Default: "devnet"
+   - Description: Specifies the network for deployment
+   - Example: `--network mainnet`
+
+   <br />
+
+   #### --fee
+
+   - Type: string
+   - Default: "eth"
+   - Choices:
+     - "eth": Use ETH as the fee token
+     - "strk": Use STRK as the fee token
+   - Example: `--fee strk`
+
+   <br />
+
+   #### --reset
+
+   - Type: boolean
+   - Default: true
+   - Description: Controls whether to reset existing deployments
+   - When true: Keeps existing deployments
+   - When false: Resets deployments before new deployment
+   - Example: `--reset false`
+
+   <br />
+
+   #### Example Commands
+
+   2.1. Deploy to devnet using ETH fees (default settings):
+
+   ```bash
+   yarn deploy
+   ```
+
+   2.2. Deploy to testnet using STRK fees:
+
+   ```bash
+   yarn deploy --network sepolia --fee strk
+   ```
+
+   2.3. Deploy with reset:
+
+   ```bash
+   yarn deploy --network sepolia --reset false
+   ```
+
 3. **Test Smart Contracts**:
    To ensure your smart contracts work correctly, write and run tests in the `packages/snfoundry/contracts/src/test` directory. These tests can be executed using the `yarn test` command. This helps catch and fix potential errors before deployment.
 
diff --git a/docs/quick-start/installation.mdx b/docs/quick-start/installation.mdx
@@ -136,7 +136,7 @@ curl --location 'https://starknet-sepolia.public.blastapi.io/rpc/v0_7' \
 | starknet-devnet | v0.2.3  |
 | snforge         | v0.34.0 |
 | starknet.js     | v6.12.1 |
-| starknet-react  | v3.6.0 |
+| starknet-react  | v3.6.0  |
 
 ## Setup
 
diff --git a/docs/recipes/DevelopingOnFork.md b/docs/recipes/DevelopingOnFork.md
@@ -5,27 +5,47 @@ This guide shows how to run and interact with a local fork of Starknet mainnet.
 ## Setup
 
 1. Start the fork:
+
 ```bash
 yarn chain --fork-network https://starknet-mainnet.public.blastapi.io/rpc/v0_7
 ```
 
-2. Update `scaffoldConfig` in scaffold.config.ts as:
+2. After running yarn chain fork, there will be a block number in console:
+
+```bash
+Forking from block: number=1047693
+```
+
+3. If you wanna use events, **MAKE SURE** the fromBlock : is > the number in console + 1, otherwise the events data will always be empty. i.e. do not capture the first block of the fork
+
+```typescript
+const { data: events } = useScaffoldEventHistory({
+  contractName: "YourContract",
+  eventName: "contracts::YourContract::YourContract::GreetingChanged",
+  fromBlock: 1028886n, // NOTE : Use the latest block on the fork + 1 ( see the logs in the console)
+  watch: true,
+});
+```
+
+4. Update `scaffoldConfig` in scaffold.config.ts as:
+
 ```typescript
 const scaffoldConfig = {
   targetNetworks: [chains.mainnetFork],
-  isFork: true,  // handles forked network validation
   // ... other config options
 };
 ```
 
-3. Create a `.env` file from the `.env.example` template and configure it accordingly
+5. Create a `.env` file from the `.env.example` template and configure it accordingly
+
 ```
 NEXT_PUBLIC_PROVIDER_URL=http://127.0.0.1:5050
 ```
 
 ## Wallet Configuration
 
 ### Using Argent/Braavos
+
 1. Open your wallet
 2. Add Custom Network:
    - RPC URL: http://127.0.0.1:5050/rpc
@@ -34,16 +54,16 @@ NEXT_PUBLIC_PROVIDER_URL=http://127.0.0.1:5050
 
 ![image](https://github.com/user-attachments/assets/511b84a1-e232-46b3-a4a4-82c44ad03969)
 
-
 similiarly for braavos.
 if you correctly connected with the devnet correctly, it should show
 ![image](https://github.com/user-attachments/assets/a684c853-35ed-4042-a415-86744efb36d2)
 
-
 ## Interaction
+
 Navigate to `/debug-ui` to interact with your contracts
 
 ## Notes
+
 - Make sure your contract deployment is complete before testing
 - The burner wallet is automatically configured with test ETH
-- External wallets need to be configured with the correct network settings
+- External wallets need to be configured with the correct network settings
diff --git a/docs/recipes/MultiWriteFeature.md b/docs/recipes/MultiWriteFeature.md
@@ -9,6 +9,7 @@ description: Learn how to perform multiple write operations to StarkNet smart co
 This recipe shows how to perform multiple contract write operations in a single transaction using the [`useScaffoldMultiWriteContract`](https://github.com/Scaffold-Stark/scaffold-stark-2/blob/main/packages/nextjs/hooks/scaffold-stark/useScaffoldMultiWriteContract.ts) hook from Scaffold-Stark.
 
 ## Overview
+
 In this guide, we will implement a feature that allows writing to multiple contracts or executing multiple transactions in a single action. This is particularly useful when your decentralized application (dApp) requires multiple state changes at once.
 
 This documentation will walk through the code and steps necessary to create a button that triggers the multi-write contract interaction.
@@ -56,30 +57,22 @@ export const MultiSetData = () => {
         type="text"
         placeholder="Enter your name"
         className="input border border-primary"
-        onChange={(e) => setName(e.target.value)}
+        onChange={e => setName(e.target.value)}
       />
       <input
         type="number"
         placeholder="Enter your age"
         className="input border border-primary"
-        onChange={(e) => setAge(Number(e.target.value))}
+        onChange={e => setAge(Number(e.target.value))}
       />
-      <button
-        className="btn btn-primary"
-        onClick={handleSetData}
-        disabled={isPending}
-      >
-        {isPending ? (
-          <span className="loading loading-spinner loading-sm"></span>
-        ) : (
-          "Submit"
-        )}
+      <button className="btn btn-primary" onClick={handleSetData} disabled={isPending}>
+        {isPending ? <span className="loading loading-spinner loading-sm"></span> : "Submit"}
       </button>
     </div>
   );
 };
-
 ```
+
 </details>
 
 ## Implementation Guide
@@ -88,11 +81,10 @@ export const MultiSetData = () => {
 
 Create a new component in your `component` folder, named `MultiContractInteraction.tsx`. This component will handle multiple write operations on different contracts
 
-
 ```tsx title="components/MultiContractInteraction.tsx"
 export const MultiContractInteraction = () => {
-	return <div>Your MultiContractInteraction</div>
-}
+  return <div>Your MultiContractInteraction</div>;
+};
 ```
 
 ### Step 2: Import Required Hooks and Utilities
@@ -134,12 +126,12 @@ const { sendAsync, isPending } = useScaffoldMultiWriteContract({
     },
   ],
 });
-
 ```
 
 - The `isPending` variable will manage the loading state of the button, and `sendAsync` will handle the contract transaction.
 
 ### Step 5: Handle Submission
+
 - Create a `handleSetData` function that triggers the multi-write action. If successful, display a success notification; otherwise, log the error and display a failure message.
 
 ```tsx title="components/MultiContractInteraction.tsx"
@@ -155,6 +147,7 @@ const handleSetData = async () => {
 ```
 
 ### Step 6: Create the UI
+
 - Add inputs for `name` and `age`, and a button to submit the data.
 - Disable the button while the transaction is pending.
 
@@ -165,24 +158,16 @@ return (
       type="text"
       placeholder="Enter your name"
       className="input border border-primary"
-      onChange={(e) => setName(e.target.value)}
+      onChange={e => setName(e.target.value)}
     />
     <input
       type="number"
       placeholder="Enter your age"
       className="input border border-primary"
-      onChange={(e) => setAge(Number(e.target.value))}
+      onChange={e => setAge(Number(e.target.value))}
     />
-    <button
-      className="btn btn-primary"
-      onClick={handleSetData}
-      disabled={isPending}
-    >
-      {isPending ? (
-        <span className="loading loading-spinner loading-sm"></span>
-      ) : (
-        "Submit"
-      )}
+    <button className="btn btn-primary" onClick={handleSetData} disabled={isPending}>
+      {isPending ? <span className="loading loading-spinner loading-sm"></span> : "Submit"}
     </button>
   </div>
 );
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,7 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const dotenv = require('dotenv'); // Import dotenv
+const dotenv = require("dotenv"); // Import dotenv
 dotenv.config(); // Load environment variables
 
 const lightCodeTheme = require("prism-react-renderer/themes/github");
