chore: replace create-fuels hardcoded values with constants (#2752)

* replace some hardcoded values with named constants * sync guide app * add changeset
FuelLabs · Jul 11, 2024 · 1b4b033 · 1b4b033
1 parent 77e910f
commit 1b4b033
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 24 deletions.
diff --git a/.changeset/rotten-forks-share.md b/.changeset/rotten-forks-share.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+chore: replace `create-fuels` hardcoded values with constants
diff --git a/apps/create-fuels-counter-guide/src/app/page.tsx b/apps/create-fuels-counter-guide/src/app/page.tsx
@@ -11,11 +11,11 @@ import { Button } from "@/components/Button";
 import toast from "react-hot-toast";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import useAsync from "react-use/lib/useAsync";
-import { CURRENT_ENVIRONMENT } from "@/lib";
+import { CURRENT_ENVIRONMENT, DOCS_URL, Environments } from "@/lib";
 
 // #region deploying-dapp-to-testnet-frontend-contract-id
 const contractId =
-  CURRENT_ENVIRONMENT === "local"
+  CURRENT_ENVIRONMENT === Environments.LOCAL
     ? contractIds.testContract
     : (process.env.NEXT_PUBLIC_TESTNET_CONTRACT_ID as string); // Testnet Contract ID
 // #endregion deploying-dapp-to-testnet-frontend-contract-id
@@ -92,7 +92,7 @@ export default function Home() {
 
       <span className="text-gray-400">
         This template uses the new{" "}
-        <Link href="https://docs.fuel.network/docs/fuels-ts/fuels/#fuels-cli">
+        <Link href={`${DOCS_URL}/docs/fuels-ts/fuels/#fuels-cli`}>
           Fuels CLI
         </Link>{" "}
         to enable type-safe hot-reloading for your Sway programs.
@@ -123,7 +123,7 @@ export default function Home() {
       <Link href="/script" className="mt-4">
         Script Example
       </Link>
-      <Link href="https://docs.fuel.network" target="_blank" className="mt-12">
+      <Link href={DOCS_URL} target="_blank" className="mt-12">
         Fuel Docs
       </Link>
     </>

diff --git a/apps/create-fuels-counter-guide/src/hooks/useFaucet.tsx b/apps/create-fuels-counter-guide/src/hooks/useFaucet.tsx
@@ -1,4 +1,4 @@
-import { NODE_URL } from "@/lib";
+import { FAUCET_PRIVATE_KEY, NODE_URL } from "@/lib";
 import { Provider, Wallet, WalletUnlocked } from "fuels";
 import { useState } from "react";
 import useAsync from "react-use/lib/useAsync";
@@ -9,7 +9,7 @@ export const useFaucet = () => {
   useAsync(async () => {
     if (!faucetWallet) {
       const provider = await Provider.create(NODE_URL);
-      const wallet = Wallet.fromPrivateKey("0x01", provider);
+      const wallet = Wallet.fromPrivateKey(FAUCET_PRIVATE_KEY, provider);
       setFaucetWallet(wallet);
     }
   }, [faucetWallet]);

diff --git a/apps/create-fuels-counter-guide/src/lib.ts b/apps/create-fuels-counter-guide/src/lib.ts
@@ -1,16 +1,20 @@
-import { Account, BN } from 'fuels';
+import { Account, BN, TESTNET_NETWORK_URL } from 'fuels';
 
 // #region deploying-dapp-to-testnet-lib-current-environment
-type DappEnvironment = 'local' | 'testnet';
+export const Environments = {
+  LOCAL: 'local',
+  TESTNET: 'testnet',
+} as const;
+type Environment = (typeof Environments)[keyof typeof Environments];
 
-export const CURRENT_ENVIRONMENT: DappEnvironment =
-  (process.env.NEXT_PUBLIC_DAPP_ENVIRONMENT as DappEnvironment) || 'local';
+export const CURRENT_ENVIRONMENT: Environment =
+  (process.env.NEXT_PUBLIC_DAPP_ENVIRONMENT as Environment) || Environments.LOCAL;
 // #endregion deploying-dapp-to-testnet-lib-current-environment
 
 export const NODE_URL =
-  CURRENT_ENVIRONMENT === 'local'
+  CURRENT_ENVIRONMENT === Environments.LOCAL
     ? `http://127.0.0.1:${process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000}/v1/graphql`
-    : 'https://testnet.fuel.network/v1/graphql';
+    : TESTNET_NETWORK_URL;
 
 export interface AppWallet {
   wallet?: Account;
@@ -19,3 +23,7 @@ export interface AppWallet {
 }
 
 export const TESTNET_FAUCET_LINK = 'https://faucet-testnet.fuel.network/';
+
+export const FAUCET_PRIVATE_KEY = '0x01';
+
+export const DOCS_URL = 'https://docs.fuel.network';
diff --git a/templates/nextjs/src/app/page.tsx b/templates/nextjs/src/app/page.tsx
@@ -11,10 +11,10 @@ import { Button } from "@/components/Button";
 import toast from "react-hot-toast";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import useAsync from "react-use/lib/useAsync";
-import { CURRENT_ENVIRONMENT } from "@/lib";
+import { CURRENT_ENVIRONMENT, DOCS_URL, Environments } from "@/lib";
 
 const contractId =
-  CURRENT_ENVIRONMENT === "local"
+  CURRENT_ENVIRONMENT === Environments.LOCAL
     ? contractIds.testContract
     : (process.env.NEXT_PUBLIC_TESTNET_CONTRACT_ID as string); // Testnet Contract ID
 
@@ -73,7 +73,7 @@ export default function Home() {
 
       <span className="text-gray-400">
         This template uses the new{" "}
-        <Link href="https://docs.fuel.network/docs/fuels-ts/fuels/#fuels-cli">
+        <Link href={`${DOCS_URL}/docs/fuels-ts/fuels/#fuels-cli`}>
           Fuels CLI
         </Link>{" "}
         to enable type-safe hot-reloading for your Sway programs.
@@ -98,7 +98,7 @@ export default function Home() {
       <Link href="/script" className="mt-4">
         Script Example
       </Link>
-      <Link href="https://docs.fuel.network" target="_blank" className="mt-12">
+      <Link href={DOCS_URL} target="_blank" className="mt-12">
         Fuel Docs
       </Link>
     </>

diff --git a/templates/nextjs/src/hooks/useFaucet.tsx b/templates/nextjs/src/hooks/useFaucet.tsx
@@ -1,4 +1,4 @@
-import { NODE_URL } from "@/lib";
+import { FAUCET_PRIVATE_KEY, NODE_URL } from "@/lib";
 import { Provider, Wallet, WalletUnlocked } from "fuels";
 import { useState } from "react";
 import useAsync from "react-use/lib/useAsync";
@@ -9,7 +9,7 @@ export const useFaucet = () => {
   useAsync(async () => {
     if (!faucetWallet) {
       const provider = await Provider.create(NODE_URL);
-      const wallet = Wallet.fromPrivateKey("0x01", provider);
+      const wallet = Wallet.fromPrivateKey(FAUCET_PRIVATE_KEY, provider);
       setFaucetWallet(wallet);
     }
   }, [faucetWallet]);

diff --git a/templates/nextjs/src/lib.ts b/templates/nextjs/src/lib.ts
@@ -1,14 +1,18 @@
-import { Account, BN } from 'fuels';
+import { Account, BN, TESTNET_NETWORK_URL } from 'fuels';
 
-type DappEnvironment = 'local' | 'testnet';
+export const Environments = {
+  LOCAL: 'local',
+  TESTNET: 'testnet',
+} as const;
+type Environment = (typeof Environments)[keyof typeof Environments];
 
-export const CURRENT_ENVIRONMENT: DappEnvironment =
-  (process.env.NEXT_PUBLIC_DAPP_ENVIRONMENT as DappEnvironment) || 'local';
+export const CURRENT_ENVIRONMENT: Environment =
+  (process.env.NEXT_PUBLIC_DAPP_ENVIRONMENT as Environment) || Environments.LOCAL;
 
 export const NODE_URL =
-  CURRENT_ENVIRONMENT === 'local'
+  CURRENT_ENVIRONMENT === Environments.LOCAL
     ? `http://127.0.0.1:${process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000}/v1/graphql`
-    : 'https://testnet.fuel.network/v1/graphql';
+    : TESTNET_NETWORK_URL;
 
 export interface AppWallet {
   wallet?: Account;
@@ -17,3 +21,7 @@ export interface AppWallet {
 }
 
 export const TESTNET_FAUCET_LINK = 'https://faucet-testnet.fuel.network/';
+
+export const FAUCET_PRIVATE_KEY = '0x01';
+
+export const DOCS_URL = 'https://docs.fuel.network';