fix: interact middle transaction (#67)

FuelLabs · May 31, 2024 · c791674 · c791674
1 parent 7235ac5
commit c791674
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 13 deletions.
diff --git a/examples/react-app/src/App.tsx b/examples/react-app/src/App.tsx
@@ -23,6 +23,7 @@ export default function App() {
     address,
   } = useWallet();
 
+  const [isSigning, setIsSigning] = useState(false);
   const [toast, setToast] = useState<Omit<NotificationProps, 'setOpen'>>({
     open: false,
   });
@@ -123,10 +124,22 @@ export default function App() {
 
                   {isConnected && !isLoading && (
                     <section className="flex h-full flex-col justify-center space-y-6 px-4 py-8 sm:px-8 sm:py-8 md:px-10 md:py-12">
-                      <Account />
-                      <Balance />
-                      <Counter />
-                      <Transfer />
+                      <Account
+                        isSigning={isSigning}
+                        setIsSigning={setIsSigning}
+                      />
+                      <Balance
+                        isSigning={isSigning}
+                        setIsSigning={setIsSigning}
+                      />
+                      <Counter
+                        isSigning={isSigning}
+                        setIsSigning={setIsSigning}
+                      />
+                      <Transfer
+                        isSigning={isSigning}
+                        setIsSigning={setIsSigning}
+                      />
                     </section>
                   )}
                 </div>

diff --git a/examples/react-app/src/components/account.tsx b/examples/react-app/src/components/account.tsx
@@ -3,7 +3,12 @@ import { useWallet } from '../hooks/useWallet';
 import Button from './button';
 import Feature from './feature';
 
-export default function ConnectedAccount() {
+interface Props {
+  isSigning: boolean;
+  setIsSigning: (isSigning: boolean) => void;
+}
+
+export default function ConnectedAccount({ isSigning }: Props) {
   const { address } = useWallet();
 
   const { disconnect } = useDisconnect();
@@ -12,7 +17,11 @@ export default function ConnectedAccount() {
     <Feature title="Your Fuel Address">
       <code className="block md:hidden">{truncAddressMiddle(address, 4)}</code>
       <code className="hidden md:block">{truncAddressMiddle(address, 8)}</code>
-      <Button onClick={() => disconnect()} loadingText="Disconnecting...">
+      <Button
+        onClick={() => disconnect()}
+        loadingText="Disconnecting..."
+        disabled={isSigning}
+      >
         Disconnect
       </Button>
     </Feature>

diff --git a/examples/react-app/src/components/balance.tsx b/examples/react-app/src/components/balance.tsx
@@ -5,11 +5,16 @@ import Feature from './feature';
 
 export const DEFAULT_AMOUNT = bn.parseUnits('0.0001');
 
+interface Props {
+  isSigning: boolean;
+  setIsSigning: (isSigning: boolean) => void;
+}
+
 const BalanceSkeleton = () => (
   <div className="h-6 w-28 animate-pulse bg-gray-800" />
 );
 
-export default function Balance() {
+export default function Balance({ isSigning }: Props) {
   const { refetchWallet, balance, address } = useWallet();
 
   useEffect(() => {
@@ -23,8 +28,17 @@ export default function Balance() {
       <a
         href={`https://faucet-testnet.fuel.network/?address=${address}`}
         target="_blank"
-        className="btn btn-primary"
+        className={`btn ${
+          isSigning
+            ? 'cursor-not-allowed border border-zinc-400/25 bg-zinc-950 text-zinc-400'
+            : 'btn-primary'
+        }`}
         rel="noreferrer"
+        onClick={(e) => {
+          if (isSigning) {
+            e.preventDefault();
+          }
+        }}
       >
         Get coins
       </a>

diff --git a/examples/react-app/src/components/counter.tsx b/examples/react-app/src/components/counter.tsx
@@ -13,7 +13,12 @@ import Notification, { type Props as NotificationProps } from './notification';
 export const COUNTER_CONTRACT_ID =
   '0x14355ad56cddcff339a017eb32c913b95b7cd892b610241c27de056cbeda3c25';
 
-export default function ContractCounter() {
+interface Props {
+  isSigning: boolean;
+  setIsSigning: (isSigning: boolean) => void;
+}
+
+export default function ContractCounter({ isSigning, setIsSigning }: Props) {
   const { balance, wallet } = useWallet();
 
   const [toast, setToast] = useState<Omit<NotificationProps, 'setOpen'>>({
@@ -40,7 +45,7 @@ export default function ContractCounter() {
         <div className="space-x-2">
           <Button
             onClick={increment}
-            disabled={isLoading || !hasBalance}
+            disabled={isLoading || !hasBalance || isSigning}
             loading={isLoading}
             loadingText="Incrementing..."
           >
@@ -59,7 +64,11 @@ export default function ContractCounter() {
   async function increment() {
     if (wallet) {
       setLoading(true);
-      const contract = CounterAbi__factory.connect(COUNTER_CONTRACT_ID, wallet);
+      setIsSigning(true);
+      const contract = CounterAbi__factory.connect(
+        COUNTER_CONTRACT_ID,
+        wallet,
+      );
       try {
         await contract.functions
           .increment_counter(1)
@@ -87,6 +96,7 @@ export default function ContractCounter() {
         });
       } finally {
         setLoading(false);
+        setIsSigning(false);
       }
     }
   }

diff --git a/examples/react-app/src/components/transfer.tsx b/examples/react-app/src/components/transfer.tsx
@@ -9,7 +9,12 @@ import Notification, { type Props as NotificationProps } from './notification';
 
 const DEFAULT_ADDRESS = Address.fromRandom().toString();
 
-export default function Transfer() {
+interface Props {
+  isSigning: boolean;
+  setIsSigning: (isSigning: boolean) => void;
+}
+
+export default function Transfer({ isSigning, setIsSigning }: Props) {
   const { balance, wallet, refetchWallet } = useWallet();
 
   const [receiver, setReceiver] = useState(DEFAULT_ADDRESS);
@@ -22,6 +27,7 @@ export default function Transfer() {
 
   const handleTransfer = async () => {
     setLoading(true);
+    setIsSigning(true);
     try {
       if (!receiver) {
         throw Error('Invalid address');
@@ -74,6 +80,7 @@ export default function Transfer() {
       });
     } finally {
       setLoading(false);
+      setIsSigning(false);
       refetchWallet();
     }
   };
@@ -90,7 +97,7 @@ export default function Transfer() {
 
       <Button
         onClick={handleTransfer}
-        disabled={isLoading || !hasBalance}
+        disabled={isLoading || !hasBalance || isSigning}
         className="mt-1 shrink-0 md:mt-2"
         loading={isLoading}
         loadingText="Transferring..."