make array of batch operations

Digberi · May 1, 2022 · 2730fb9 · 2730fb9
1 parent af44897
commit 2730fb9
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 72 deletions.
diff --git a/src/components/Distribute.js b/src/components/Distribute.js
@@ -36,22 +36,37 @@ export const Distribute = () => {
   };
 
   const handleDistributeForm = () =>
-    makeRpcCall({ asset, assetId, amount, receiver, deadline });
+    makeRpcCall([{ asset, assetId, amount, receiver, deadline }]);
 
   const handleDistributeJSON = () => {
     if (errorJSON) {
       return;
     }
-    makeRpcCall(JSON.parse(value));
+    const params = JSON.parse(value);
+    if (Array.isArray(params)) {
+      makeRpcCall(params);
+    } else {
+      makeRpcCall([params]);
+    }
   };
 
-  const makeRpcCall = async ({
-    asset,
-    assetId,
-    amount,
-    receiver,
-    deadline,
-  }) => {
+  const makeRpcCall = async (opParams) => {
+    try {
+      let batchOp = Tezos.wallet.batch();
+      for (var i = 0; i < opParams.length; i++) {
+        batchOp = await makeParams(opParams[i], batchOp);
+      }
+      console.log(opParams);
+      batchOp.send();
+    } catch (e) {
+      console.log("error in makeRpcCall", e);
+    }
+  };
+
+  const makeParams = async (
+    { asset, assetId, amount, receiver, deadline },
+    batchOp
+  ) => {
     const isFa2 = !!assetId || assetId === "0";
     const isTez = asset === "tz";
     const assetParam = isFa2
@@ -72,7 +87,6 @@ export const Distribute = () => {
     };
     const vestingParams = contract.methodsObject.start_vesting(tx_prm);
     try {
-      let batchOp;
       if (isFa2) {
         const tokenContract = await Tezos.contract.at(asset);
         const addOperatorParams = tokenContract.methods.update_operators([
@@ -93,34 +107,29 @@ export const Distribute = () => {
             },
           },
         ]);
-        batchOp = Tezos.wallet
-          .batch()
+        batchOp = batchOp
           .withContractCall(addOperatorParams)
           .withContractCall(vestingParams)
-          .withContractCall(removeOperatorParams)
-          .send();
+          .withContractCall(removeOperatorParams);
       } else if (isTez) {
         const vestingParamsTez = contract.methodsObject
           .start_vesting({
             ...tx_prm,
             amount: new BigNumber(amountParam).shiftedBy(6),
           })
           .toTransferParams({ amount: amountParam });
-        batchOp = Tezos.wallet.batch().withTransfer(vestingParamsTez).send();
+        batchOp = batchOp.withTransfer(vestingParamsTez);
       } else {
         const tokenContract = await Tezos.contract.at(asset);
         const approveParams = tokenContract.methods.approve(
           contractAddress,
           amount
         );
-        batchOp = Tezos.wallet
-          .batch()
+        batchOp = batchOp
           .withContractCall(approveParams)
-          .withContractCall(vestingParams)
-          .send();
+          .withContractCall(vestingParams);
       }
-      await batchOp;
-      await batchOp.confirmation();
+      return batchOp;
     } catch (e) {
       console.log(e);
     }
@@ -197,6 +206,17 @@ export const Distribute = () => {
             <div className="textarea-error">{errorJSON}</div>
           )}
 
+          <label>Example:</label>
+          <pre>{`
+[{
+  "amount": "1234",
+  "asset": "KT19H9YbHqsxFTayap7aTEfbcnyPeALKYgt9",
+  "assetId": "0",
+  "deadline": "2022-05-26",
+  "receiver": "tz1VvDQcafAxpAcc2hFWDpSmRYqdEmEhrW1h"
+}]
+    `}</pre>
+
           <Button
             disabled={storage && pkh !== storage.admin}
             onClick={handleDistributeJSON}

diff --git a/src/components/Explore.js b/src/components/Explore.js
@@ -4,31 +4,12 @@ import BigNumber from "bignumber.js";
 import { getTokensMetadata } from "../utils/tokenMetadata.api";
 import { Button } from "./Button";
 import { RefreshableButton } from "./RefreshableButton";
+import { useRewards } from "../hooks/useRewards";
 
 export const Explore = () => {
-  const { contract, storage, pkh, connect, Tezos } = useBeacon();
-  const [rewards, setRewards] = useState([]);
+  const { contract, pkh, connect, Tezos } = useBeacon();
   const [tokens, setTokens] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  const loadRewards = useCallback(async () => {
-    if (!storage || !storage.vestings_counter || !pkh) {
-      setLoading(false);
-      return;
-    }
-    const limit = storage.vestings_counter;
-    let arr = [];
-    for (let i = 0; i < limit; i++) {
-      const vesting = await storage.vestings.get([i]);
-      arr.push(vesting);
-    }
-    if (pkh) {
-      // arr = arr.filter((x) => x.receiver === pkh || x.admin !== pkh); // for debug
-      arr = arr.filter((x) => x.receiver === pkh || x.admin === pkh);
-    }
-    setRewards(arr);
-    setLoading(false);
-  }, [storage, pkh]);
+  const { rewards, loadingRewards: loading, loadRewards } = useRewards();
 
   const loadTokensMetadata = useCallback(async () => {
     if (rewards.length === 0) {
@@ -59,10 +40,6 @@ export const Explore = () => {
     setTokens(newTokens);
   }, [rewards]);
 
-  useEffect(() => {
-    loadRewards();
-  }, [loadRewards]);
-
   useEffect(() => {
     loadTokensMetadata();
   }, [loadTokensMetadata]);

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -24,6 +24,7 @@ export const Header = () => {
             onClick={() => setCurrentTab(index)}
             selected={currentTab === index}
             key={index}
+            admin={tab.admin}
           >
             {tab.label}
           </Tab>

diff --git a/src/components/Tab.js b/src/components/Tab.js
@@ -1,12 +1,27 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
+import useBeacon from "../hooks/useBeacon";
+
+export const Tab = ({
+  onClick,
+  selected = false,
+  disabled,
+  admin,
+  children,
+}) => {
+  const { storage, pkh } = useBeacon();
+  const isAdmin = storage && storage.admin === pkh && admin;
+  const handleClick = () => {
+    if (onClick && !disabled) {
+      if (admin && !isAdmin) return false;
+      onClick();
+    }
+  };
 
-export const Tab = ({ onClick, selected = false, disabled, children }) => {
-  const handleClick = () => onClick && !disabled && onClick();
   return (
     <div
       className={`material-tabs-content ${
-        disabled && "material-tabs-disabled"
+        (disabled || (admin && !isAdmin)) && "material-tabs-disabled"
       }`}
     >
       <a onClick={handleClick} className="material-tabs-content" href="#">

diff --git a/src/hooks/useBeacon.js b/src/hooks/useBeacon.js
@@ -5,27 +5,27 @@ import { BeaconWallet } from "@taquito/beacon-wallet";
 import { MichelCodecPacker, TezosToolkit } from "@taquito/taquito";
 
 // TESTNET
-// export const contractAddress = "KT1QwVmmYNp3Ke2JkNr2eaAdYyAJFusbi7yH";
-
-// const DEFAULT_NETWORK = {
-//   id: "ithacanet",
-//   nextNetworkIndex: 1,
-//   name: "Ithacanet",
-//   type: "testnet",
-//   rpcBaseURL: "https://ithacanet.smartpy.io",
-// };
-
-// MAINNET
-export const contractAddress = "KT1N5HyBD5HZ7NZwmDar1LmBN7WkHbdr6zb9";
+export const contractAddress = "KT1QwVmmYNp3Ke2JkNr2eaAdYyAJFusbi7yH";
 
 const DEFAULT_NETWORK = {
-  id: "mainnet",
+  id: "ithacanet",
   nextNetworkIndex: 1,
-  name: "Mainnet",
-  type: "main",
-  rpcBaseURL: "https://mainnet.smartpy.io",
+  name: "Ithacanet",
+  type: "testnet",
+  rpcBaseURL: "https://ithacanet.smartpy.io",
 };
 
+// MAINNET
+// export const contractAddress = "KT1N5HyBD5HZ7NZwmDar1LmBN7WkHbdr6zb9";
+
+// const DEFAULT_NETWORK = {
+//   id: "mainnet",
+//   nextNetworkIndex: 1,
+//   name: "Mainnet",
+//   type: "main",
+//   rpcBaseURL: "https://mainnet.smartpy.io",
+// };
+
 class LambdaViewSigner {
   async publicKeyHash() {
     const acc = await wallet.client.getActiveAccount();

diff --git a/src/hooks/useRewards.js b/src/hooks/useRewards.js
@@ -0,0 +1,39 @@
+import { useCallback, useState, useEffect } from "react";
+import constate from "constate";
+
+import useBeacon from "./useBeacon";
+
+export const [UseRewardsProvider, useRewards] = constate(() => {
+  const { storage, pkh } = useBeacon();
+  const [rewards, setRewards] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadRewards = useCallback(async () => {
+    if (!storage || !storage.vestings_counter || !pkh) {
+      setLoading(false);
+      return;
+    }
+    const limit = storage.vestings_counter;
+    let arr = [];
+    for (let i = 0; i < limit; i++) {
+      const vesting = await storage.vestings.get([i]);
+      arr.push(vesting);
+    }
+    if (pkh) {
+      // arr = arr.filter((x) => x.receiver === pkh || x.admin !== pkh); // for debug
+      arr = arr.filter((x) => x.receiver === pkh || x.admin === pkh);
+    }
+    setRewards(arr);
+    setLoading(false);
+  }, [storage, pkh]);
+
+  useEffect(() => {
+    loadRewards();
+  }, [loadRewards]);
+
+  return {
+    rewards,
+    loadingRewards: loading,
+    loadRewards,
+  };
+});
diff --git a/src/hooks/useTabs.js b/src/hooks/useTabs.js
@@ -7,9 +7,9 @@ import { Stop } from "../components/Stop";
 
 const TABS = [
   { label: "Explore", component: Explore },
-  { label: "Distribute", component: Distribute },
-  { label: "Stop vesting", component: Stop },
-  { label: "Change Admin", component: ChangeAdmin },
+  { label: "Distribute", component: Distribute, admin: true },
+  { label: "Stop vesting", component: Stop, admin: true },
+  { label: "Change Admin", component: ChangeAdmin, admin: true },
 ];
 
 export const [UseTabsProvider, useTabs] = constate(() => {

diff --git a/src/index.js b/src/index.js
@@ -4,14 +4,17 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { UseBeaconProvider } from "./hooks/useBeacon";
+import { UseRewardsProvider } from "./hooks/useRewards";
 import { UseTabsProvider } from "./hooks/useTabs";
 
 ReactDOM.render(
   <React.StrictMode>
     <UseBeaconProvider>
-      <UseTabsProvider>
-        <App />
-      </UseTabsProvider>
+      <UseRewardsProvider>
+        <UseTabsProvider>
+          <App />
+        </UseTabsProvider>
+      </UseRewardsProvider>
     </UseBeaconProvider>
   </React.StrictMode>,
   document.getElementById("root")

diff --git a/src/material-tabs.css b/src/material-tabs.css
@@ -45,6 +45,15 @@
   bottom: 32px;
 }
 
+.material-tabs-disabled {
+  cursor: not-allowed;
+}
+
+.material-tabs-disabled .material-tabs-content {
+  color: #ccc4ca;
+  cursor: not-allowed;
+}
+
 @media only screen and (max-width: 520px) {
   .nav-tabs.material-tabs > li > a {
     font-size: 11px;