Updates gasless voucher handle logic

gear-foundation · Mar 8, 2024 · 18c90e0 · 18c90e0
1 parent 16d6e28
commit 18c90e0
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 22 deletions.
diff --git a/frontend/packages/gasless-transactions/src/components/enable-session/enable-session.tsx b/frontend/packages/gasless-transactions/src/components/enable-session/enable-session.tsx
@@ -1,4 +1,5 @@
 import { Button, Checkbox } from '@gear-js/vara-ui';
+import { useAccount } from '@gear-js/react-hooks';
 import styles from './enable-session.module.css';
 import { useGaslessTransactions } from '../..';
 import { ReactComponent as GaslessSVG } from '../../assets/icons/gas-station-line.svg';
@@ -9,8 +10,8 @@ type Props = {
 };
 
 function EnableSession({ type }: Props) {
-  const { isAvailable, isLoading, isActive, setIsActive } = useGaslessTransactions();
-
+  const { isAvailable, isLoading, voucherId, setIsActive } = useGaslessTransactions();
+  const { account } = useAccount();
   const handleSwitcherChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked) {
       setIsActive(true);
@@ -27,11 +28,11 @@ function EnableSession({ type }: Props) {
     setIsActive(false);
   };
 
-  return (
+  return account?.decodedAddress ? (
     <>
       {type === 'button' && (
         <>
-          {isActive ? (
+          {voucherId ? (
             <Button
               icon={PowerSVG}
               text="Disable"
@@ -58,7 +59,7 @@ function EnableSession({ type }: Props) {
               label=""
               type="switch"
               disabled={!isAvailable || isLoading}
-              checked={isActive}
+              checked={!!voucherId}
               onChange={handleSwitcherChange}
             />
           </div>
@@ -77,7 +78,7 @@ function EnableSession({ type }: Props) {
         </div>
       )}
     </>
-  );
+  ) : null;
 }
 
 export { EnableSession };
diff --git a/...ackages/gasless-transactions/src/components/gasless-transactions/gasless-transactions.tsx b/...ackages/gasless-transactions/src/components/gasless-transactions/gasless-transactions.tsx
@@ -6,11 +6,11 @@ import { ReactComponent as GaslessSVG } from '../../assets/icons/gas-station-lin
 
 function GaslessTransactions() {
   const { account } = useAccount();
-  const { isActive } = useGaslessTransactions();
+  const { voucherId } = useGaslessTransactions();
 
   return account ? (
     <div className={styles.container}>
-      {isActive && (
+      {voucherId && (
         <>
           <div className={styles.sessionContainer}>
             <div className={styles.titleWrapper}>
@@ -21,7 +21,7 @@ function GaslessTransactions() {
           </div>
         </>
       )}
-      {!isActive && <EnableSession type="button" />}
+      {!voucherId && <EnableSession type="button" />}
     </div>
   ) : null;
 }

diff --git a/frontend/packages/gasless-transactions/src/context/index.tsx b/frontend/packages/gasless-transactions/src/context/index.tsx
@@ -40,22 +40,21 @@ function GaslessTransactionsProvider({ backendAddress, programId, voucherLimit,
 
       if (data?.error) {
         console.log(`Voucher is not fetched - ${data.error}`);
-        setIsAvailable(false);
+        setIsActive(false);
 
         return undefined;
       }
 
       if (!data.voucherId) {
-        setIsAvailable(false);
+        setIsActive(false);
         return undefined;
       }
 
-      setIsAvailable(true);
       return data.voucherId;
     } catch (error: any) {
       console.log('Error when fetching voucher');
       console.log(error);
-      setIsAvailable(false);
+      setIsActive(false);
       setIsLoading(false);
 
       return undefined;
@@ -100,17 +99,53 @@ function GaslessTransactionsProvider({ backendAddress, programId, voucherLimit,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [balance]);
 
+  const checkProgramStatus = async () => {
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(`${backendAddress}gasless/voucher/${programId}/status`);
+
+      const data = await response.json();
+      setIsLoading(false);
+
+      if (data.enabled) {
+        setIsAvailable(true);
+        return;
+      }
+
+      if (!data.enabled) {
+        setIsAvailable(false);
+        return;
+      }
+
+      console.log(`Backend is not available`);
+      setIsAvailable(false);
+
+      console.log(data);
+    } catch (error: any) {
+      console.log('Error when fetching voucher');
+      console.log(error);
+      setIsAvailable(false);
+      setIsLoading(false);
+    }
+  };
+
   useEffect(() => {
-    if (account?.address) {
-      setIsLoading(true);
-      fetchVoucherId();
+    if (account?.decodedAddress) {
+      setIsAvailable(false);
+      setIsActive(false);
+      setVoucherId(undefined);
+
+      checkProgramStatus();
     }
-  }, [account?.address]);
+  }, [account?.decodedAddress]);
 
   useEffect(() => {
-    setIsAvailable(false);
-    setVoucherId(undefined);
-  }, [account?.address]);
+    if (account?.decodedAddress && isAvailable && isActive && !voucherId) {
+      setIsLoading(true);
+      fetchVoucherId();
+    }
+  }, [isAvailable, isActive, voucherId, account?.decodedAddress]);
 
   useEffect(() => {
     if (voucherId) {

diff --git a/frontend/packages/signless-transactions/src/components/enable-session/enable-session.tsx b/frontend/packages/signless-transactions/src/components/enable-session/enable-session.tsx
@@ -1,5 +1,6 @@
 import { Button, Checkbox } from '@gear-js/vara-ui';
 import { useState } from 'react';
+import { useAccount } from '@gear-js/react-hooks';
 import { ReactComponent as SignlessSVG } from '../../assets/icons/signless.svg';
 import { ReactComponent as PowerSVG } from '../../assets/icons/power.svg';
 import styles from './enable-session.module.css';
@@ -12,6 +13,7 @@ type Props = {
 };
 
 function EnableSession({ type }: Props) {
+  const { account } = useAccount();
   const { isAvailable, pair, session, deletePair, deleteSession } = useSignlessTransactions();
   const [isLoading, setIsLoading] = useState(false);
   const [isCreateSessionModalOpen, setIsCreateSessionModalOpen] = useState(false);
@@ -52,7 +54,7 @@ function EnableSession({ type }: Props) {
     }
   };
 
-  return (
+  return account?.decodedAddress ? (
     <>
       {type === 'button' && (
         <>
@@ -109,7 +111,7 @@ function EnableSession({ type }: Props) {
       {isCreateSessionModalOpen && <CreateSessionModal close={closeCreateModal} />}
       {isEnableSessionModalOpen && <EnableSessionModal close={closeEnableModal} />}
     </>
-  );
+  ) : null;
 }
 
 export { EnableSession };