working demo

ApeWorX · Dec 19, 2023 · 3a20baf · 3a20baf
1 parent 8647b26
commit 3a20baf
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 13 deletions.
diff --git a/ui/app/src/CreatePage.tsx b/ui/app/src/CreatePage.tsx
@@ -72,7 +72,7 @@ const StreamPage = () => {
       <div className="create-stream-component">
         <CreateStream
           streamManagerAddress={sm as `0x${string}`}
-          amountPerSecond={BigInt(10000000000000)}
+          amountPerSecond={BigInt(30000000000000)}
           registerStream={addStreams}
           renderReasonCode={renderReasonCode}
           handleTransactionStatus={handleTransactionStatus}

diff --git a/ui/lib/CreateStream.tsx b/ui/lib/CreateStream.tsx
@@ -247,16 +247,49 @@ const CreateStream = (props: CreateStreamProps) => {
     }
   }, [props.tokenList, targetChainId]);
 
-  const [allowance, setAllowance] = useState<number>(0);
-
+  const [allowance, setAllowance] = useState<number | null>(null);
+  const [isAllowanceSufficient, setIsAllowanceSufficient] =
+    useState<boolean>(false);
+
+  // ABI used to fetch the current user allowance
+  const erc20ABI = [
+    {
+      constant: true,
+      inputs: [
+        { name: "_owner", type: "address" },
+        { name: "_spender", type: "address" },
+      ],
+      name: "allowance",
+      outputs: [{ name: "", type: "uint256" }],
+      type: "function",
+    },
+  ];
+
+  // Fetch current user allowance
   const { data: allowanceData } = useContractRead({
     address: selectedToken?.address as Address,
     functionName: "allowance",
+    abi: erc20ABI,
     args: [address, props.streamManagerAddress],
     watch: true,
   });
 
-  console.log("allowance", allowanceData);
+  useEffect(() => {
+    if (allowanceData) {
+      const fetchedAllowance = Number(allowanceData.toString());
+      setAllowance(fetchedAllowance);
+    }
+  }, [allowanceData]);
+
+  // Effect hook to check if the allowance is sufficient
+  useEffect(() => {
+    if (allowance !== null && txCost !== undefined) {
+      setIsAllowanceSufficient(allowance >= txCost);
+    }
+  }, [allowance, txCost]);
+
+  console.log("allowance", allowance);
+  console.log("cost", txCost);
 
   // Select the payment token among tokens with the same chainID
   const Step1 = () => {
@@ -416,15 +449,31 @@ const CreateStream = (props: CreateStreamProps) => {
             }
             disabled={isSuccess}
           />
-          <button
-            className="button-validate-transaction"
-            onClick={approveStream}
-            disabled={isSuccess}
-            style={{ backgroundColor: isSuccess ? "grey" : "initial" }}
-          >
-            {`Approve ${Math.floor(transactionAmount + 1)}`}&nbsp;
-            {`${selectedToken?.symbol}`}
-          </button>
+
+          {isAllowanceSufficient && (
+            <>
+              <button
+                className="button-validate-transaction allowance"
+                onClick={() => validateStep(2)}
+              >
+                {`Approve ${Math.floor(transactionAmount + 1)}`}&nbsp;
+                {`${selectedToken?.symbol}`}
+              </button>
+            </>
+          )}
+          {!isAllowanceSufficient && (
+            <>
+              <button
+                className="button-validate-transaction"
+                onClick={approveStream}
+                disabled={isSuccess}
+                style={{ backgroundColor: isSuccess ? "grey" : "initial" }}
+              >
+                {`Approve ${Math.floor(transactionAmount + 1)}`}&nbsp;
+                {`${selectedToken?.symbol}`}
+              </button>
+            </>
+          )}
           {isLoading && (
             <div className="validate-transaction-message">
               Waiting for your confirmation.