Display one redeem button to all redeemable REP ; show total REP that was redeemed ; many code improvements

Author: roienatan

src/components/Scheme/CL4R/CL4R.scss

@@ -7,15 +7,30 @@
     width: 70%;
     display: flex;
     flex-direction: column;
-    .currentPeriod{
-      font-size: $title;
-    }
-    .nextPeriod {
-      margin-bottom: 20px;
-      color: $gray-label;
-    }
-    .nextPeriod * {
-      color: $gray-label;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      .countersWrapper {
+        display: flex;
+        flex-direction: column;
+        .currentPeriod{
+          font-size: $title;
+        }
+        .nextPeriod {
+          margin-bottom: 20px;
+          color: $gray-label;
+        }
+        .nextPeriod * {
+          color: $gray-label;
+        }
+      }
+      .redeemWrapper {
+        display: flex;
+        flex-direction: column;
+        .redeemedAmountLabel {
+          color: $gray-label;
+        }
+      }
     }
     .tableTitleWrapper {
       margin-bottom: 10px;
@@ -85,21 +100,21 @@
     .releasableLable {
       margin-top: 20px;
     }
-    .lockButton {
-      border: none;
-      background-color: $accent-1;
-      color: white;
-      border-radius: 30px;
-      font-weight: bold;
-      margin: 10px 0px;
-      height: 30px;
-      &:hover {
-        opacity: 0.8;
-      }
-      &.disabled {
-        pointer-events: none;
-        background-color: $gray-1;
-      }
+  }
+  .actionButton {
+    border: none;
+    background-color: $accent-1;
+    color: white;
+    border-radius: 30px;
+    font-weight: bold;
+    margin: 10px 0px;
+    height: 30px;
+    &:hover {
+      opacity: 0.8;
+    }
+    &.disabled {
+      pointer-events: none;
+      background-color: $gray-1;
     }
   }
 }

src/components/Scheme/CL4R/CL4R.tsx

@@ -3,7 +3,7 @@ import * as css from "./CL4R.scss";
 import gql from "graphql-tag";
 import Loading from "components/Shared/Loading";
 import withSubscription, { ISubscriptionProps } from "components/Shared/withSubscription";
-import { getArcByDAOAddress, standardPolling, getNetworkByDAOAddress, toWei, ethErrorHandler, fromWei } from "lib/util";
+import { getArcByDAOAddress, standardPolling, getNetworkByDAOAddress, toWei, ethErrorHandler, fromWei, formatTokens } from "lib/util";
 import { Address, CL4RScheme, IDAOState, ISchemeState, Token } from "@daostack/arc.js";
 import { RouteComponentProps } from "react-router-dom";
 import LockRow from "./LockRow";
@@ -18,7 +18,7 @@ import { lock, releaseLocking, extendLocking, redeemLocking, approveTokens } fro
 import { showNotification } from "@store/notifications/notifications.reducer";
 import { connect } from "react-redux";
 import Tooltip from "rc-tooltip";
-import { getCL4RParams, ICL4RParams } from "./CL4RHelper";
+import { calculateTotalRedeemedAmount, getCL4RParams, ICL4RParams, secondsToDays } from "./CL4RHelper";
 import BN from "bn.js";
 
 interface IDispatchProps {
@@ -58,27 +58,25 @@ const CL4R = (props: IProps) => {
   const [cl4rScheme, setCL4RScheme] = React.useState<CL4RScheme>();
   const [isLocking, setIsLocking] = React.useState(false);
   const [isApprovingToken, setIsApprovingToken] = React.useState(false);
+  const [isRedeeming, setIsRedeeming] = React.useState(false);
   const [currentTime, setCurrentTime] = React.useState(moment().unix());
   const isAllowance = data[1]?.gt(new BN(0));
   const isEnoughBalance = fromWei(data[2]) >= lockAmount;
   const cl4Rlocks = (data as any)[0].data.cl4Rlocks;
-
-  const getLockingBatch = React.useCallback((lockingTime: number, startTime: number, batchTime: number): number => {
-    const timeElapsed = lockingTime - startTime;
-    return Math.trunc(timeElapsed / batchTime);
-  }, [schemeParams]);
+  const [redeemableAmount, setRedeemableAmount] = React.useState(0);
+  const [allLockingIdsForRedeem, setAllLockingIdsForRedeem] = React.useState<Set<number>>(new Set());
 
   const isLockingStarted = React.useMemo(() => {
     return (moment().isAfter(moment.unix(Number(schemeParams.startTime))));
   }, [schemeParams]);
 
   const endTime = React.useMemo(() => {
-    return Number(schemeParams.startTime) + (Number(schemeParams.batchTime) * Number(schemeParams.batchesIndexCap));
+    return Number(schemeParams.startTime) + (schemeParams.batchTime * schemeParams.batchesIndexCap);
   }, [schemeParams]);
 
   const isLockingEnded = React.useMemo(() => {
     return (moment().isAfter(moment.unix(endTime)));
-  }, [schemeParams]);
+  }, [schemeParams, currentTime]);
 
   const handleRelease = React.useCallback(async (lockingId: number, setIsReleasing: any) => {
     if (!await enableWalletProvider({ showNotification: props.showNotification }, getNetworkByDAOAddress(daoState.address))) { return; }
@@ -90,9 +88,9 @@ const CL4R = (props: IProps) => {
     props.extendLocking(cl4rScheme, extendPeriod, batchIndexToLockIn, lockingId, schemeParams.agreementHash, setIsExtending);
   }, [cl4rScheme, schemeParams]);
 
-  const handleRedeem = React.useCallback(async (lockingId: number[], setIsRedeeming: any) => {
+  const handleRedeem = React.useCallback(async (lockingIds: number[], setIsRedeeming: any) => {
     if (!await enableWalletProvider({ showNotification: props.showNotification }, getNetworkByDAOAddress(daoState.address))) { return; }
-    props.redeemLocking(cl4rScheme, props.currentAccountAddress, lockingId, setIsRedeeming);
+    props.redeemLocking(cl4rScheme, props.currentAccountAddress, lockingIds, setIsRedeeming);
   }, [cl4rScheme, schemeParams]);
 
   const handleTokenApproving = React.useCallback(async () => {
@@ -111,17 +109,22 @@ const CL4R = (props: IProps) => {
     getSchemeInfo();
   }, []);
 
+  const redeemedAmount = React.useMemo(() => {
+    return calculateTotalRedeemedAmount(cl4Rlocks);
+  }, [schemeParams, cl4Rlocks]);
+
   const durations = [] as any;
-  for (let duration = 1; duration <= Number(schemeParams.maxLockingBatches); duration++) {
-    if (moment().unix() + (duration * Number(schemeParams.batchTime)) <= endTime) {
+  for (let duration = 1; duration <= schemeParams.maxLockingBatches; duration++) {
+    if (moment().unix() + (duration * schemeParams.batchTime) <= endTime) {
       durations.push(<option key={duration} value={duration} selected={duration === 1}>{duration}</option>);
     }
   }
 
   const startTime = Number(schemeParams.startTime);
   const timeElapsed = currentTime - startTime;
-  const currentLockingBatch = isLockingEnded ? Number(schemeParams.batchesIndexCap) : Math.trunc(timeElapsed / Number(schemeParams.batchTime));
-  const nextBatchStartTime = moment.unix(startTime + ((currentLockingBatch + 1) * Number(schemeParams.batchTime)));
+  const currentLockingBatch = isLockingEnded ? schemeParams.batchesIndexCap : Math.trunc(timeElapsed / schemeParams.batchTime);
+  const nextBatchStartTime = moment.unix(startTime + ((currentLockingBatch + 1) * schemeParams.batchTime));
+  const redeemable = moment().isSameOrAfter(moment.unix(Number(schemeParams.redeemEnableTime)));
 
   const handleLock = React.useCallback(async () => {
     if (!await enableWalletProvider({ showNotification: props.showNotification }, getNetworkByDAOAddress(daoState.address))) { return; }
@@ -138,10 +141,11 @@ const CL4R = (props: IProps) => {
       cl4rScheme={cl4rScheme}
       currentLockingBatch={currentLockingBatch}
       isLockingEnded={isLockingEnded}
-      getLockingBatch={getLockingBatch}
-      handleRedeem={handleRedeem} />);
+      redeemableAmount={redeemableAmount}
+      setRedeemableAmount={setRedeemableAmount}
+      allLockingIdsForRedeem={allLockingIdsForRedeem}
+      setAllLockingIdsForRedeem={setAllLockingIdsForRedeem} />);
   }
-
   if (isLockingEnded) {
     periods.splice(-1, 1);
   }
@@ -155,7 +159,6 @@ const CL4R = (props: IProps) => {
       lockData={lock}
       handleRelease={handleRelease}
       handleExtend={handleExtend}
-      getLockingBatch={getLockingBatch}
       endTime={endTime}
       currentLockingBatch={currentLockingBatch}
       isLockingEnded={isLockingEnded} />;
@@ -167,7 +170,7 @@ const CL4R = (props: IProps) => {
     prefix = "Starts in";
   }
 
-  if (currentLockingBatch + 1 === Number(schemeParams.batchesIndexCap)) {
+  if (currentLockingBatch + 1 === schemeParams.batchesIndexCap) {
     prefix = "Ends in";
   }
 
@@ -182,22 +185,38 @@ const CL4R = (props: IProps) => {
   });
 
   const lockButtonClass = classNames({
-    [css.lockButton]: true,
+    [css.actionButton]: true,
     [css.disabled]: !lockAmount || !lockDuration || isLocking || !isEnoughBalance,
   });
 
   const approveTokenButtonClass = classNames({
-    [css.lockButton]: true,
+    [css.actionButton]: true,
     [css.disabled]: isApprovingToken,
   });
 
+  const actionButtonClass = classNames({
+    [css.actionButton]: true,
+    [css.disabled]: isRedeeming || !redeemable || redeemableAmount === 0,
+  });
+
   return (
     !loading ? <div className={css.wrapper}>
       <div className={css.leftWrapper}>
-        <div className={css.currentPeriod}>Current Period: {isLockingEnded ? Number(schemeParams.batchesIndexCap) : currentLockingBatch + 1} of {schemeParams.batchesIndexCap}</div>
-        <div className={css.nextPeriod}>{isLockingEnded ? "Locking Ended" : <div>{prefix} <Countdown toDate={nextBatchStartTime} onEnd={() => setCurrentTime(moment().unix())} /></div>}</div>
+        <div className={css.top}>
+          <div className={css.countersWrapper}>
+            <div className={css.currentPeriod}>Current Period: {isLockingEnded ? schemeParams.batchesIndexCap : currentLockingBatch + 1} of {schemeParams.batchesIndexCap}</div>
+            <div className={css.nextPeriod}>{isLockingEnded ? "Locking Ended" : <div>{prefix} <Countdown toDate={nextBatchStartTime} onEnd={() => setCurrentTime(moment().unix())} /></div>}</div>
+          </div>
+          <div className={css.redeemWrapper}>
+            <button
+              className={actionButtonClass}
+              onClick={() => handleRedeem(Array.from(allLockingIdsForRedeem), setIsRedeeming)}
+              disabled={isRedeeming || !redeemable || redeemableAmount === 0}>{`Redeem ${formatTokens(toWei(redeemableAmount))} REP`}</button>
+            <div className={css.redeemedAmountLabel}>{`Total Redeemed: ${formatTokens(redeemedAmount, "REP")}`}</div>
+          </div>
+        </div>
         <div className={css.tableTitleWrapper}>
-          <div className={periodsClass} onClick={() => setShowYourLocks(false)}>All Periods</div>
+          <div className={periodsClass} onClick={() => { setShowYourLocks(false); setRedeemableAmount(0); }}>All Periods</div>
           <div className={locksClass} onClick={() => setShowYourLocks(true)}>Your Locks</div>
         </div>
         {
@@ -224,7 +243,6 @@ const CL4R = (props: IProps) => {
                   <th>You Locked</th>
                   <th>Total Reputation</th>
                   <th>You Will Receive</th>
-                  <th>Action</th>
                 </tr>
               </thead>
               <tbody>
@@ -237,15 +255,15 @@ const CL4R = (props: IProps) => {
         <div className={css.lockTitle}>New Lock</div>
         <div className={css.lockDurationLabel}>
           <span style={{ marginRight: "5px" }}>Lock Duration</span>
-          <Tooltip trigger={["hover"]} overlay={`Period: ${schemeParams.batchTime} seconds`}><img width="15px" src="/assets/images/Icon/question-help.svg" /></Tooltip>
+          <Tooltip trigger={["hover"]} overlay={`Period: ${secondsToDays(schemeParams.batchTime).toFixed(2)} days`}><img width="15px" src="/assets/images/Icon/question-help.svg" /></Tooltip>
         </div>
         <select onChange={(e: any) => setLockDuration(e.target.value)} disabled={!isAllowance}>
           {durations}
         </select>
         <span style={{ marginBottom: "5px" }}>Lock Amount ({schemeParams.tokenSymbol})</span>
         <input type="number" onChange={(e: any) => setLockAmount(e.target.value)} disabled={!isAllowance} />
         {!isEnoughBalance && <span className={css.lowBalanceLabel}>{`Not enough ${schemeParams.tokenSymbol}!`}</span>}
-        {<span className={css.releasableLable}>Releasable: {moment().add(lockDuration * Number(schemeParams.batchTime), "seconds").format("DD.MM.YYYY HH:mm")}</span>}
+        {<span className={css.releasableLable}>Releasable: {moment().add(lockDuration * schemeParams.batchTime, "seconds").format("DD.MM.YYYY HH:mm")}</span>}
         {isAllowance && <button onClick={handleLock} className={lockButtonClass} disabled={!lockAmount || !lockDuration}>Lock</button>}
         {!isAllowance && <Tooltip trigger={["hover"]} overlay={`Upon activation, the smart contract will be authorized to receive up to 100,000 ${schemeParams.tokenSymbol}`}>
           <button onClick={handleTokenApproving} className={approveTokenButtonClass} disabled={isApprovingToken}>Enable Locking</button>

src/components/Scheme/CL4R/CL4RHelper.tsx

@@ -1,21 +1,22 @@
-import { getArcByDAOAddress } from "lib/util";
+import { formatTokens, getArcByDAOAddress } from "lib/util";
 import gql from "graphql-tag";
 import * as React from "react";
 import moment from "moment-timezone";
 import { Address } from "@daostack/arc.js";
+import BN from "bn.js";
 
 export interface ICL4RParams {
   id: Address;
-  batchTime: string;
+  batchTime: number;
   startTime: string;
   token: Address;
   redeemEnableTime: string;
   tokenName: string;
   tokenSymbol: string;
-  maxLockingBatches: string;
+  maxLockingBatches: number;
   repRewardConstA: string;
   repRewardConstB: string;
-  batchesIndexCap: string;
+  batchesIndexCap: number;
   agreementHash: string;
 }
 
@@ -62,26 +63,42 @@ export const getCL4RParams = async (daoAddress: string, schemeId: string) => {
   }
   `;
   const schemeInfoParams = await arc.sendQuery(schemeInfoQuery);
-  return schemeInfoParams.data.controllerSchemes[0].continuousLocking4ReputationParams;
+  const schemeInfoParamsObject = schemeInfoParams.data.controllerSchemes[0].continuousLocking4ReputationParams as ICL4RParams;
+  schemeInfoParamsObject.batchTime = Number(schemeInfoParamsObject.batchTime);
+  schemeInfoParamsObject.maxLockingBatches = Number(schemeInfoParamsObject.maxLockingBatches);
+  schemeInfoParamsObject.batchesIndexCap = Number(schemeInfoParamsObject.batchesIndexCap);
+  return schemeInfoParamsObject;
+};
+
+export const secondsToDays = (seconds: number): number => {
+  return seconds / 86400;
 };
 
 export const renderCL4RParams = (CL4RParams: ICL4RParams) => {
   const activationTime = moment.unix(Number(CL4RParams.startTime)).utc();
   const redeemEnableTime = moment.unix(Number(CL4RParams.redeemEnableTime)).utc();
-  const endTime = moment.unix(Number(CL4RParams.startTime) + (Number(CL4RParams.batchTime) * Number(CL4RParams.batchesIndexCap)));
+  const endTime = moment.unix(Number(CL4RParams.startTime) + (CL4RParams.batchTime * CL4RParams.batchesIndexCap));
   return (<React.Fragment>
     <div>ID</div><div>{CL4RParams.id}</div>
-    <div>Token Name</div><div>{CL4RParams.tokenName}</div>
+    <div>Token</div><div>{`${CL4RParams.token} (${CL4RParams.tokenName})`}</div>
     <div>Token Symbol</div><div>{CL4RParams.tokenSymbol}</div>
-    <div>Token</div><div>{CL4RParams.token}</div>
     <div>Start Time</div><div>{activationTime.format("h:mm A [UTC] on MMMM Do, YYYY")} {moment().isSameOrAfter(activationTime) && endTime.isAfter(moment()) ? "(active)" : "(inactive)"}</div>
     <div>End Time</div><div>{endTime.format("h:mm A [UTC] on MMMM Do, YYYY")}</div>
     <div>Redeem Enable Time</div><div>{`${redeemEnableTime.format("h:mm A [UTC] on MMMM Do, YYYY")} ${redeemEnableTime.isSameOrBefore(moment()) ? "(redeemable)" : "(not redeemable)"}`}</div>
-    <div>Batch Time</div><div>{CL4RParams.batchTime} seconds</div>
+    <div>Batch Time</div><div>{`${secondsToDays(CL4RParams.batchTime).toFixed(2)} days`}</div>
     <div>Max Locking Batches</div><div>{CL4RParams.maxLockingBatches}</div>
     <div>Batches Index Cap</div><div>{CL4RParams.batchesIndexCap}</div>
-    <div>Reputation Reward Const A</div><div>{CL4RParams.repRewardConstA}</div>
-    <div>Reputation Reward Const B</div><div>{CL4RParams.repRewardConstB}</div>
+    <div>Reputation Reward Const A</div><div>{formatTokens(new BN(CL4RParams.repRewardConstA), "REP")}</div>
+    <div>Reputation Reward Const B</div><div>{formatTokens(new BN(CL4RParams.repRewardConstB))}</div>
     <div>Agreement Hash</div><div>{CL4RParams.agreementHash}</div>
   </React.Fragment>);
 };
+
+export const getLockingBatch = (lockingTime: number, startTime: number, batchTime: number) => {
+  const timeElapsed = lockingTime - startTime;
+  return Math.trunc(timeElapsed / batchTime);
+};
+
+export const calculateTotalRedeemedAmount = (cl4Rlocks: Array<ICL4RLock>) => {
+  return cl4Rlocks.map((value: ICL4RLock) => value.redeemed).flat().map((value: ICL4RRedeem) => new BN(value.amount)).reduce((a: BN, b: BN) => a.add(b), new BN(0));
+};

src/components/Scheme/CL4R/LockRow.tsx

@@ -4,36 +4,35 @@ import { formatTokens, numberWithCommas } from "lib/util";
 import moment from "moment-timezone";
 import * as React from "react";
 import * as css from "./LockRow.scss";
-import { ICL4RLock, ICL4RParams } from "./CL4RHelper";
+import { getLockingBatch, ICL4RLock, ICL4RParams } from "./CL4RHelper";
 
 interface IProps {
   schemeParams: ICL4RParams;
   lockData: ICL4RLock;
   handleRelease: (lockingId: number, setIsReleasing: any) => any;
   handleExtend: (extendPeriod: number, batchIndexToLockIn: number, lockingId: number, setIsExtending: any) => any;
-  getLockingBatch: any;
   currentLockingBatch: number;
   isLockingEnded: boolean;
   endTime: number;
 }
 
 const LockRow = (props: IProps) => {
-  const { lockData, schemeParams, handleRelease, handleExtend, getLockingBatch, currentLockingBatch, isLockingEnded } = props;
+  const { lockData, schemeParams, handleRelease, handleExtend, currentLockingBatch, isLockingEnded } = props;
   const [isReleasing, setIsReleasing] = React.useState(false);
   const [isExtending, setIsExtending] = React.useState(false);
   const [lockDuration, setLockDuration] = React.useState(1);
   const lockingBatch = getLockingBatch(Number(lockData.lockingTime), Number(schemeParams.startTime), Number(schemeParams.batchTime));
 
   // This is to avoid an option to extend more then the max locking batch.
   const extendDurations = [] as any;
-  for (let duration = 1; duration <= Number(schemeParams.maxLockingBatches); duration++) {
-    if ((duration + Number(lockData.period) <= Number(schemeParams.maxLockingBatches)) && (lockingBatch + Number(lockData.period) + duration < schemeParams.batchesIndexCap)) {
+  for (let duration = 1; duration <= schemeParams.maxLockingBatches; duration++) {
+    if ((duration + Number(lockData.period) <= schemeParams.maxLockingBatches) && (lockingBatch + Number(lockData.period) + duration < schemeParams.batchesIndexCap)) {
       extendDurations.push(<option key={duration} value={duration} selected={duration === 1}>{duration}</option>);
     }
   }
 
   const releasable = React.useMemo(() => {
-    return moment.unix(Number(lockData.lockingTime)).add(Number(lockData.period) * Number(schemeParams.batchTime), "seconds");
+    return moment.unix(Number(lockData.lockingTime)).add(Number(lockData.period) * schemeParams.batchTime, "seconds");
   }, [lockData]);
 
   const release = React.useMemo(() => {