apply changes to create-fuels-counter-guide

FuelLabs · Sep 20, 2024 · 747fe06 · 747fe06
1 parent 6ba4fc7
commit 747fe06
Show file tree

Hide file tree

Showing 17 changed files with 106 additions and 56 deletions.
diff --git a/apps/create-fuels-counter-guide/fuels.config.ts b/apps/create-fuels-counter-guide/fuels.config.ts
@@ -15,5 +15,7 @@ export default createConfig({
   output: './src/sway-api', // Where your generated types will be saved
   fuelCorePort,
   providerUrl,
+  forcPath: 'fuels-forc',
+  fuelCorePath: 'fuels-core',
 });
 // #endregion fuels-config-file-env
diff --git a/apps/create-fuels-counter-guide/index.html b/apps/create-fuels-counter-guide/index.html
@@ -1,14 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/fuel.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Fuel dApp</title>
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fuel dApp</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/create-fuels-counter-guide/public/copy.svg b/apps/create-fuels-counter-guide/public/copy.svg
diff --git a/apps/create-fuels-counter-guide/public/favicon.ico b/apps/create-fuels-counter-guide/public/favicon.ico
diff --git a/apps/create-fuels-counter-guide/src/App.tsx b/apps/create-fuels-counter-guide/src/App.tsx
@@ -25,7 +25,7 @@ function App() {
       className="flex items-center justify-center lg:pt-6 dark:text-zinc-50/90"
     >
       <div id="container" className="mx-8 mb-32 w-full max-w-6xl">
-        <nav id="nav" className="flex items-center justify-center py-6">
+        <nav id="nav" className="flex items-center justify-center py-1 md:py-6">
           <a href="https://fuel.network/" target="_blank" rel="noreferrer">
             <img src="./logo_white.png" alt="Fuel Logo" className="w-[124px]" />
           </a>
@@ -48,7 +48,7 @@ function App() {
 
                   {isConnected && (
                     <section className="flex h-full flex-col justify-center space-y-6 px-4 py-8">
-                      <div className="flex flex-col sm:flex-row gap-3">
+                      <div className="flex flex-col sm:flex-row gap-3 overflow-x-scroll overflow-visible">
                         {views.map((viewName) => (
                           <Button
                             key={viewName}

diff --git a/apps/create-fuels-counter-guide/src/components/Contract.tsx b/apps/create-fuels-counter-guide/src/components/Contract.tsx
@@ -4,7 +4,7 @@ import { useWallet } from "@fuels/react";
 import LocalFaucet from "./LocalFaucet";
 import { TestContract } from "../sway-api";
 import Button from "./Button";
-import { isLocal, contractId } from "../lib";
+import { isLocal, contractId, renderTransactionId } from "../lib.tsx";
 import { useNotification } from "../hooks/useNotification";
 
 export default function Contract() {
@@ -40,9 +40,9 @@ export default function Contract() {
 
     try {
       const call = await contract.functions.increment_counter(1).call();
-      infoNotification(`Transaction submitted: ${call.transactionId}`);
+      infoNotification(<span>Transaction submitted: {renderTransactionId(call.transactionId)}</span>);
       const result = await call.waitForResult();
-      successNotification(`Transaction successful: ${result.transactionId}`);
+      successNotification(<span>Transaction successful: {renderTransactionId(result.transactionId)}</span>);
       setCounter(result.value.toNumber());
     } catch (error) {
       console.error(error);

diff --git a/apps/create-fuels-counter-guide/src/components/Faucet.tsx b/apps/create-fuels-counter-guide/src/components/Faucet.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 
 import LocalFaucet from "./LocalFaucet";
 import Button from "./Button";
-import { isLocal, testnetFaucetUrl } from "../lib";
+import { isLocal, renderFormattedBalance, testnetFaucetUrl } from "../lib.tsx";
 import { useNotification } from "../hooks/useNotification";
 
 export default function Faucet() {
@@ -52,7 +52,7 @@ export default function Faucet() {
         <div className="flex items-center justify-between text-base dark:text-zinc-50">
           <input
             type="text"
-            value={balance ? `${balance?.format()} ETH` : ""}
+            value={balance ? `${renderFormattedBalance(balance)} ETH` : ""}
             className="w-2/3 bg-gray-800 rounded-md px-2 py-1 mr-3 truncate font-mono"
             disabled
             data-testid="balance"

diff --git a/apps/create-fuels-counter-guide/src/components/Info.tsx b/apps/create-fuels-counter-guide/src/components/Info.tsx
@@ -1,9 +1,9 @@
-import { providerUrl, playgroundUrl } from "../lib";
+import { providerUrl, playgroundUrl } from "../lib.tsx";
 
 export default function Info() {
   return (
     <div id="text" className="col-span-3 px-4 py-8">
-      <h1 className="pb-1 pt-6 text-3xl font-medium">Welcome to Fuel</h1>
+      <h1 className="pb-1 pt-0 md:pt-6 text-3xl font-medium">Welcome to Fuel</h1>
       <p>
         This Vite + React template was bootstrapped with the{" "}
         <a

diff --git a/apps/create-fuels-counter-guide/src/components/Predicate.tsx b/apps/create-fuels-counter-guide/src/components/Predicate.tsx
@@ -5,7 +5,7 @@ import { bn, Predicate as FuelPredicate, InputValue } from "fuels";
 import { TestPredicate } from "../sway-api/predicates";
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
-import { isLocal } from "../lib";
+import { isLocal, renderFormattedBalance, renderTransactionId } from "../lib.tsx";
 import { useNotification } from "../hooks/useNotification";
 
 export default function Predicate() {
@@ -43,9 +43,9 @@ export default function Predicate() {
 
     try {
       const tx = await wallet.transfer(predicate.address, bn(2_000_000));
-      infoNotification(`Transaction submitted: ${tx.id}`);
+      infoNotification(<span>Transaction submitted: {renderTransactionId(tx.id)}</span>);
       await tx.waitForResult();
-      successNotification(`Transfer successful: ${tx.id}`);
+      successNotification(<span>Transfer successful: {renderTransactionId(tx.id)}</span>);
     } catch (error) {
       console.error(error);
       errorNotification("Error transferring funds. Check your wallet balance.");
@@ -65,9 +65,9 @@ export default function Predicate() {
       });
 
       const tx = await newPredicate.transfer(wallet.address, bn(1_000_000));
-      infoNotification(`Transaction submitted: ${tx.id}`);
+      infoNotification(<span>Transaction submitted: {renderTransactionId(tx.id)}</span>);
       await tx.waitForResult();
-      successNotification(`Transfer successful: ${tx.id}`);
+      successNotification(<span>Transfer successful: {renderTransactionId(tx.id)}</span>);
     } catch (error) {
       console.error(error);
       errorNotification(
@@ -91,10 +91,10 @@ export default function Predicate() {
         configurableConstants,
       });
 
-      const tx = await wallet.transfer(predicate.address, bn(2_000_000));
-      infoNotification(`Transaction submitted: ${tx.id}`);
+      const tx = await wallet.transfer(newPredicate.address, bn(2_000_000));
+      infoNotification(<span>Transaction submitted: {renderTransactionId(tx.id)}</span>);
       await tx.waitForResult();
-      successNotification(`Pin change successful: ${tx.id}`);
+      successNotification(<span>Pin change successful: {renderTransactionId(tx.id)}</span>);
     } catch (error) {
       console.error(error);
       errorNotification(
@@ -141,7 +141,7 @@ export default function Predicate() {
         <div className="flex items-center justify-between text-base dark:text-zinc-50">
           <input
             type="text"
-            value={walletBalance ? `${walletBalance?.format()} ETH` : ""}
+            value={walletBalance ? `${renderFormattedBalance(walletBalance)} ETH` : ""}
             className="w-2/3 bg-gray-800 rounded-md px-2 py-1 mr-3 truncate font-mono"
             disabled
           />
@@ -161,7 +161,7 @@ export default function Predicate() {
         <div className="flex items-center justify-between text-base dark:text-zinc-50">
           <input
             type="text"
-            value={predicateBalance ? `${predicateBalance?.format()} ETH` : ""}
+            value={predicateBalance ? `${renderFormattedBalance(predicateBalance)} ETH` : ""}
             className="w-1/2 bg-gray-800 rounded-md px-2 py-1 mr-3 truncate font-mono"
             disabled
           />

diff --git a/apps/create-fuels-counter-guide/src/components/Script.tsx b/apps/create-fuels-counter-guide/src/components/Script.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { TestScript } from "../sway-api";
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
-import { isLocal } from "../lib";
+import { isLocal, renderTransactionId } from "../lib.tsx";
 import { useNotification } from "../hooks/useNotification";
 
 export default function Script() {
@@ -30,9 +30,9 @@ export default function Script() {
     setIsLoading(true);
     try {
       const tx = await script.functions.main(input).call();
-      infoNotification(`Transaction submitted: ${tx.transactionId}`);
+      infoNotification(<span>Transaction submitted: {renderTransactionId(tx.transactionId)}</span>);
       const result = await tx.waitForResult();
-      successNotification(`Transaction successful: ${result.transactionId}`);
+      successNotification(<span>Transaction successful: {renderTransactionId(result.transactionId)}</span>);
       setResult(result.value.toNumber());
     } catch (error) {
       console.error(error);

diff --git a/apps/create-fuels-counter-guide/src/components/Wallet.tsx b/apps/create-fuels-counter-guide/src/components/Wallet.tsx
@@ -3,13 +3,15 @@ import { useEffect } from "react";
 
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
-import { isLocal } from "../lib";
+import { isLocal, renderFormattedBalance } from "../lib.tsx";
+import { useNotification } from '../hooks/useNotification'
 
 export default function Wallet() {
   const { disconnect } = useDisconnect();
   const { wallet } = useWallet();
   const address = wallet?.address.toB256() || "";
   const { balance, refetch } = useBalance({ address });
+  const { successNotification } = useNotification();
 
   useEffect(() => {
     refetch();
@@ -20,22 +22,36 @@ export default function Wallet() {
     return () => clearInterval(interval);
   }, [refetch]);
 
+  const copyAddress = () => {
+    navigator.clipboard.writeText(address);
+    successNotification("Address copied to clipboard");
+  };
+
   return (
     <>
       <div>
         <h3 className="mb-1 text-sm font-medium dark:text-zinc-300/70">
           Address
         </h3>
-        <div className="flex items-center justify-between text-base dark:text-zinc-50">
+        <div className="flex flex-col md:flex-row items-center justify-between text-base dark:text-zinc-50">
           <input
             type="text"
             value={address}
-            className="w-2/3 bg-gray-800 rounded-md px-2 py-1 mr-3 truncate font-mono"
+            className="w-full md:w-8/12 bg-gray-800 rounded-md px-2 py-1 mr-3 truncate font-mono"
             disabled
           />
-          <Button onClick={() => disconnect()} className="w-1/3">
-            Disconnect
-          </Button>
+          <div className='flex mt-1 md:mt-0 items-center justify-between'>
+          	<Button
+              color="inactive"
+              className="w-[45px] md:w-[70px] mr-1"
+              onClick={() => copyAddress()}
+            >
+              <img src="/copy.svg" alt="Copy" className="w-full" />
+            </Button>
+            <Button onClick={() => disconnect()} className="w-9/12">
+              Disconnect
+            </Button>
+          </div>
         </div>
       </div>
       <div>
@@ -45,7 +61,7 @@ export default function Wallet() {
         <div className="flex items-center justify-between text-base dark:text-zinc-50">
           <input
             type="text"
-            value={balance ? `${balance?.format()} ETH` : ""}
+            value={balance ? `${renderFormattedBalance(balance)} ETH` : ""}
             className="w-2/3 bg-gray-800 rounded-md px-2 py-1 mr-3 truncate font-mono"
             disabled
           />

diff --git a/apps/create-fuels-counter-guide/src/hooks/useNotification.ts b/apps/create-fuels-counter-guide/src/hooks/useNotification.ts
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 
 import { toast, Id, TypeOptions } from 'react-toastify';
 
@@ -12,7 +12,7 @@ export const useNotification = () => {
     notification.current = null;
   };
 
-  const showNotification = (render: string, type: TypeOptions) => {
+  const showNotification = (render: string | ReactNode, type: TypeOptions) => {
     if (notification.current) {
       toast.update(notification.current, { render, type, onClose });
     } else {
@@ -21,8 +21,8 @@ export const useNotification = () => {
   };
 
   return {
-    infoNotification: (render: string) => showNotification(render, 'info'),
-    successNotification: (render: string) => showNotification(render, 'success'),
-    errorNotification: (render: string) => showNotification(render, 'error'),
+    infoNotification: (render: string | ReactNode) => showNotification(render, 'info'),
+    successNotification: (render: string | ReactNode) => showNotification(render, 'success'),
+    errorNotification: (render: string | ReactNode) => showNotification(render, 'error'),
   };
 };
diff --git a/apps/create-fuels-counter-guide/src/index.css b/apps/create-fuels-counter-guide/src/index.css
@@ -75,3 +75,7 @@ body {
     theme("colors.zinc.800 / 0.9")
   );
 }
+
+input {
+  outline: none !important;
+}
diff --git a/apps/create-fuels-counter-guide/src/lib.ts → apps/create-fuels-counter-guide/src/lib.tsx b/apps/create-fuels-counter-guide/src/lib.ts → apps/create-fuels-counter-guide/src/lib.tsx
@@ -1,3 +1,4 @@
+import { BN } from 'fuels'
 import contractIds from './sway-api/contract-ids.json';
 
 // #region deploying-dapp-to-testnet-lib-current-environment
@@ -19,3 +20,24 @@ export const contractId = isLocal ? localContractId : testnetContractId;
 // #endregion deploying-dapp-to-testnet-frontend-contract-id
 
 export const testnetFaucetUrl = 'https://faucet-testnet.fuel.network/';
+
+export const renderTransactionId = (transactionId: string) => {
+  if (isLocal) {
+    return transactionId;
+  }
+
+  return (
+    <a
+      href={`https://app.fuel.network/tx/${transactionId}/simple`}
+      target="_blank"
+      rel="noreferrer"
+      className="underline"
+    >
+      {transactionId}
+    </a>
+  )
+}
+
+export const renderFormattedBalance = (balance: BN) => {
+  return balance.format({ precision: 4 });
+}
diff --git a/apps/create-fuels-counter-guide/src/main.tsx b/apps/create-fuels-counter-guide/src/main.tsx
@@ -7,7 +7,7 @@ import { ToastContainer } from "react-toastify";
 import { Provider } from "fuels";
 
 import App from "./App.tsx";
-import { providerUrl } from "./lib";
+import { providerUrl } from "./lib.tsx";
 
 import "react-toastify/dist/ReactToastify.css";
 import "./index.css";

diff --git a/templates/nextjs/src/lib.tsx b/templates/nextjs/src/lib.tsx
@@ -28,6 +28,7 @@ export const renderTransactionId = (transactionId: string) => {
       href={`https://app.fuel.network/tx/${transactionId}/simple`}
       target="_blank"
       rel="noreferrer"
+      className="underline"
     >
       {transactionId}
     </a>

diff --git a/templates/vite/src/lib.tsx b/templates/vite/src/lib.tsx
@@ -1,21 +1,22 @@
-import { BN } from 'fuels'
-import contractIds from './sway-api/contract-ids.json';
+import { BN } from "fuels";
+import contractIds from "./sway-api/contract-ids.json";
 
-export const environments = { LOCAL: 'local', TESTNET: 'testnet' };
-export const environment = process.env.VITE_DAPP_ENVIRONMENT || environments.LOCAL;
+export const environments = { LOCAL: "local", TESTNET: "testnet" };
+export const environment =
+  process.env.VITE_DAPP_ENVIRONMENT || environments.LOCAL;
 export const isLocal = environment === environments.LOCAL;
 export const isTestnet = environment === environments.TESTNET;
 
 export const localProviderUrl = `http://127.0.0.1:${process.env.VITE_FUEL_NODE_PORT || 4000}/v1/graphql`;
-export const testnetProviderUrl = 'https://testnet.fuel.network/v1/graphql';
+export const testnetProviderUrl = "https://testnet.fuel.network/v1/graphql";
 export const providerUrl = isLocal ? localProviderUrl : testnetProviderUrl;
-export const playgroundUrl = providerUrl.replace('v1/graphql', 'v1/playground');
+export const playgroundUrl = providerUrl.replace("v1/graphql", "v1/playground");
 
 export const localContractId = contractIds.testContract;
 export const testnetContractId = process.env.VITE_TESTNET_CONTRACT_ID as string;
 export const contractId = isLocal ? localContractId : testnetContractId;
 
-export const testnetFaucetUrl = 'https://faucet-testnet.fuel.network/';
+export const testnetFaucetUrl = "https://faucet-testnet.fuel.network/";
 
 export const renderTransactionId = (transactionId: string) => {
   if (isLocal) {
@@ -27,12 +28,13 @@ export const renderTransactionId = (transactionId: string) => {
       href={`https://app.fuel.network/tx/${transactionId}/simple`}
       target="_blank"
       rel="noreferrer"
+      className="underline"
     >
       {transactionId}
     </a>
-  )
-}
+  );
+};
 
 export const renderFormattedBalance = (balance: BN) => {
   return balance.format({ precision: 4 });
-}
+};