support approving tokens from Alchemy ; check allowance ; added more redeem time and amount ; show error if not enough balance in the wallet to lock

Author: roienatan

src/@store/arc/arcActions.ts

@@ -1,4 +1,4 @@
-import { Address, DAO, IProposalCreateOptions, IProposalOutcome, ITransactionState, ITransactionUpdate, ReputationFromTokenScheme, Scheme, CL4RScheme } from "@daostack/arc.js";
+import Arc, { Address, DAO, IProposalCreateOptions, IProposalOutcome, ITransactionState, ITransactionUpdate, ReputationFromTokenScheme, Scheme, CL4RScheme, Token } from "@daostack/arc.js";
 import { IAsyncAction } from "@store/async";
 import { toWei, getArcByDAOAddress } from "lib/util";
 import { IRedemptionState } from "lib/proposalHelpers";
@@ -281,3 +281,22 @@ export const redeemLocking = (cl4rScheme: CL4RScheme, beneficiary: string, locki
     cl4rScheme.redeem(beneficiary, lockingIds).subscribe(...observer);
   };
 };
+
+/**
+ * A generic function to approve spending of a token in a scheme.
+ * The default allowance is 100,000 tokens.
+ * @param {Address} spender
+ * @param {Arc} arc
+ * @param {string} token
+ * @param {string} tokenSymbol
+ * @param {function} setIsApproving
+ * @param {number} amount
+ */
+export function approveTokens(spender: Address, arc: Arc, token: string, tokenSymbol: string, setIsApproving: any, amount = 100000) {
+  return async (dispatch: Redux.Dispatch<any, any>, ) => {
+    const tokenObj = new Token(token, arc);
+    setIsApproving(true);
+    const observer = operationNotifierObserver(dispatch, `Approve ${tokenSymbol}`, () => setIsApproving(false), () => setIsApproving(false));
+    tokenObj.approveForStaking(spender, toWei(amount)).subscribe(...observer);
+  };
+}

src/components/Scheme/CL4R/CL4R.scss

@@ -76,9 +76,15 @@
     }
     input {
       height: 25px;
-      margin-bottom: 20px;
       text-indent: 5px;
     }
+    .lowBalanceLabel {
+      color: $accent-2;
+      margin-top: 3px;
+    }
+    .releasableLable {
+      margin-top: 20px;
+    }
     .lockButton {
       border: none;
       background-color: $accent-1;

src/components/Scheme/CL4R/CL4R.tsx

@@ -3,28 +3,31 @@ 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 } from "lib/util";
-import { Address, CL4RScheme, IDAOState, ISchemeState } from "@daostack/arc.js";
+import { getArcByDAOAddress, standardPolling, getNetworkByDAOAddress, toWei, ethErrorHandler, fromWei } from "lib/util";
+import { Address, CL4RScheme, IDAOState, ISchemeState, Token } from "@daostack/arc.js";
 import { RouteComponentProps } from "react-router-dom";
 import LockRow from "./LockRow";
 import PeriodRow from "./PeriodRow";
 import * as classNames from "classnames";
 import * as moment from "moment";
 import Countdown from "components/Shared/Countdown";
 import { first } from "rxjs/operators";
+import { combineLatest } from "rxjs";
 import { enableWalletProvider } from "arc";
-import { lock, releaseLocking, extendLocking, redeemLocking } from "@store/arc/arcActions";
+import { lock, releaseLocking, extendLocking, redeemLocking, approveTokens } from "@store/arc/arcActions";
 import { showNotification } from "@store/notifications/notifications.reducer";
 import { connect } from "react-redux";
 import Tooltip from "rc-tooltip";
 import { getCL4RParams, ICL4RParams } from "./CL4RHelper";
+import BN from "bn.js";
 
 interface IDispatchProps {
   lock: typeof lock;
   releaseLocking: typeof releaseLocking;
   extendLocking: typeof extendLocking;
   redeemLocking: typeof redeemLocking;
   showNotification: typeof showNotification;
+  approveTokens: typeof approveTokens;
 }
 
 const mapDispatchToProps = {
@@ -33,9 +36,10 @@ const mapDispatchToProps = {
   extendLocking,
   redeemLocking,
   showNotification,
+  approveTokens,
 };
 
-type SubscriptionData = Array<any>;
+type SubscriptionData = [any, BN, BN];
 type IProps = IExternalProps & ISubscriptionProps<SubscriptionData> & IDispatchProps;
 type IExternalProps = {
   daoState: IDAOState;
@@ -50,10 +54,14 @@ const CL4R = (props: IProps) => {
   const [schemeParams, setSchemeParams] = React.useState({} as ICL4RParams);
   const [showYourLocks, setShowYourLocks] = React.useState(false);
   const [lockDuration, setLockDuration] = React.useState(1);
-  const [lockAmount, setLockAmount] = React.useState();
+  const [lockAmount, setLockAmount] = React.useState(0);
   const [cl4rScheme, setCL4RScheme] = React.useState<CL4RScheme>();
   const [isLocking, setIsLocking] = React.useState(false);
+  const [isApprovingToken, setIsApprovingToken] = 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;
@@ -87,6 +95,11 @@ const CL4R = (props: IProps) => {
     props.redeemLocking(cl4rScheme, props.currentAccountAddress, lockingId, setIsRedeeming);
   }, [cl4rScheme, schemeParams]);
 
+  const handleTokenApproving = React.useCallback(async () => {
+    if (!await enableWalletProvider({ showNotification: props.showNotification }, getNetworkByDAOAddress(daoState.address))) { return; }
+    props.approveTokens(props.scheme.address, getArcByDAOAddress(daoState.address), schemeParams.token, schemeParams.tokenSymbol, setIsApprovingToken);
+  }, [schemeParams]);
+
   React.useEffect(() => {
     const getSchemeInfo = async () => {
       const arc = getArcByDAOAddress(daoState.id);
@@ -121,7 +134,7 @@ const CL4R = (props: IProps) => {
       key={period}
       period={period}
       schemeParams={schemeParams}
-      lockData={(data as any).data.cl4Rlocks}
+      lockData={cl4Rlocks}
       cl4rScheme={cl4rScheme}
       currentLockingBatch={currentLockingBatch}
       isLockingEnded={isLockingEnded}
@@ -135,7 +148,7 @@ const CL4R = (props: IProps) => {
 
   periods.reverse();
 
-  const lockings = ((data as any).data.cl4Rlocks?.map((lock: any) => {
+  const lockings = (cl4Rlocks?.map((lock: any) => {
     return <LockRow
       key={lock.id}
       schemeParams={schemeParams}
@@ -170,7 +183,12 @@ const CL4R = (props: IProps) => {
 
   const lockButtonClass = classNames({
     [css.lockButton]: true,
-    [css.disabled]: !lockAmount || !lockDuration || isLocking,
+    [css.disabled]: !lockAmount || !lockDuration || isLocking || !isEnoughBalance,
+  });
+
+  const approveTokenButtonClass = classNames({
+    [css.lockButton]: true,
+    [css.disabled]: isApprovingToken,
   });
 
   return (
@@ -183,7 +201,7 @@ const CL4R = (props: IProps) => {
           <div className={locksClass} onClick={() => setShowYourLocks(true)}>Your Locks</div>
         </div>
         {
-          showYourLocks ? (data as any).data.cl4Rlocks.length > 0 ?
+          showYourLocks ? cl4Rlocks.length > 0 ?
             <table>
               <thead>
                 <tr>
@@ -218,16 +236,20 @@ const CL4R = (props: IProps) => {
       {!isLockingEnded && isLockingStarted && <div className={css.lockWrapper}>
         <div className={css.lockTitle}>New Lock</div>
         <div className={css.lockDurationLabel}>
-          <span style={{marginRight: "5px"}}>Lock Duration</span>
+          <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>
         </div>
-        <select onChange={(e: any) => setLockDuration(e.target.value)}>
+        <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)} />
-        {<span>Releasable: {moment().add(lockDuration * Number(schemeParams.batchTime), "seconds").format("DD.MM.YYYY HH:mm")}</span>}
-        <button onClick={handleLock} className={lockButtonClass} disabled={!lockAmount || !lockDuration}>Lock</button>
+        <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>}
+        {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>
+        </Tooltip>}
       </div>}
     </div> : <Loading />
   );
@@ -241,6 +263,18 @@ const SubscribedCL4R = withSubscription({
   createObservable: async (props: IProps) => {
     if (props.currentAccountAddress) {
       const arc = getArcByDAOAddress(props.daoState.id);
+      const schemeToken = gql`
+      query SchemeInfo {
+        controllerSchemes(where: {id: "${props.scheme.id.toLowerCase()}"}) {
+          continuousLocking4ReputationParams {
+            id
+            token
+          }
+        }
+      }
+      `;
+      const schemeTokenData = await arc.sendQuery(schemeToken);
+      const tokenString = schemeTokenData.data.controllerSchemes[0].continuousLocking4ReputationParams.token;
       const locksQuery = gql`
       query Locks {
         cl4Rlocks(where: {scheme: "${props.scheme.id.toLowerCase()}", locker: "${props.currentAccountAddress}"}) {
@@ -250,15 +284,26 @@ const SubscribedCL4R = withSubscription({
           amount
           lockingTime
           period
-          redeemed
-          redeemedAt
           released
           releasedAt
-          batchIndexRedeemed
+          redeemed {
+            id
+            lock
+            amount
+            redeemedAt
+            batchIndex
+          }
         }
       }
       `;
-      return arc.getObservable(locksQuery, standardPolling());
+      const token = new Token(tokenString, arc);
+      const allowance = token.allowance(props.currentAccountAddress, props.scheme.address);
+      const balanceOf = token.balanceOf(props.currentAccountAddress);
+      return combineLatest(
+        arc.getObservable(locksQuery, standardPolling()),
+        allowance.pipe(ethErrorHandler()),
+        balanceOf.pipe(ethErrorHandler())
+      );
     }
   },
 });

src/components/Scheme/CL4R/CL4RHelper.tsx

@@ -26,11 +26,17 @@ export interface ICL4RLock {
   amount: string;
   lockingTime: string;
   period: string;
-  redeemed: boolean;
-  redeemedAt: string;
+  redeemed: Array<ICL4RRedeem>;
   released: boolean;
   releasedAt: string;
-  batchIndexRedeemed: string;
+}
+
+export interface ICL4RRedeem {
+  id: Address;
+  lock: ICL4RLock;
+  amount: string;
+  redeemedAt: string;
+  batchIndex: string;
 }
 
 export const getCL4RParams = async (daoAddress: string, schemeId: string) => {

src/components/Scheme/CL4R/LockRow.tsx

@@ -18,15 +18,16 @@ interface IProps {
 }
 
 const LockRow = (props: IProps) => {
-  const { lockData, schemeParams, handleRelease, handleExtend, getLockingBatch, endTime, currentLockingBatch, isLockingEnded } = props;
+  const { lockData, schemeParams, handleRelease, handleExtend, getLockingBatch, 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 ((moment().unix() + (duration * Number(schemeParams.batchTime)) <= endTime) && (duration + Number(lockData.period) <= Number(schemeParams.maxLockingBatches))) {
+    if ((duration + Number(lockData.period) <= Number(schemeParams.maxLockingBatches)) && (lockingBatch + Number(lockData.period) + duration < schemeParams.batchesIndexCap)) {
       extendDurations.push(<option key={duration} value={duration} selected={duration === 1}>{duration}</option>);
     }
   }
@@ -39,8 +40,6 @@ const LockRow = (props: IProps) => {
     return moment().isSameOrAfter(releasable);
   }, [lockData]);
 
-  const lockingBatch = getLockingBatch(Number(lockData.lockingTime), Number(schemeParams.startTime), Number(schemeParams.batchTime));
-
   const actionButtonClass = classNames({
     [css.actionButton]: true,
     [css.disabled]: isReleasing || isExtending,

src/components/Scheme/CL4R/PeriodRow.scss

@@ -22,4 +22,9 @@
       color: $gray-1;
     }
   }
+  .redeemedLabel {
+    display: flex;
+    flex-direction: column;
+    color: $gray-label;
+  }
 }

src/components/Scheme/CL4R/PeriodRow.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as css from "./PeriodRow.scss";
-import { ICL4RLock, ICL4RParams } from "./CL4RHelper";
+import { ICL4RLock, ICL4RParams, ICL4RRedeem } from "./CL4RHelper";
 import { formatTokens, numberWithCommas, WEI } from "lib/util";
 import { CL4RScheme } from "@daostack/arc.js";
 import Decimal from "decimal.js";
@@ -26,6 +26,7 @@ const PeriodRow = (props: IProps) => {
   const [isRedeeming, setIsRedeeming] = React.useState(false);
   const lockingIds: Array<number> = [];
   const lockingIdsForRedeem: Array<number> = [];
+  const redeemData: Array<ICL4RRedeem> = [];
 
   let youLocked = new BN(0);
   for (const lock of lockData) {
@@ -39,7 +40,22 @@ const PeriodRow = (props: IProps) => {
         lockingIdsForRedeem.push(Number(lock.lockingId));
       }
     }
+    redeemData.push(...lock.redeemed);
   }
+
+  const isPeriodRedeemed = youLocked.gt(new BN(0)) && Number(repuationRewardForLockings) === 0;
+  let redeemedAt;
+  let amountRedeemed = new BN(0);
+  if (isPeriodRedeemed) {
+    // Traverse the redeemed data to extract the redeem time and amount.
+    for (const redeem of redeemData) {
+      if (redeem.redeemedAt && period === Number(redeem.batchIndex)) {
+        redeemedAt = moment.unix(Number(redeem.redeemedAt)).format("DD.MM.YYYY HH:mm");
+        amountRedeemed = amountRedeemed.add(new BN(redeem.amount));
+      }
+    }
+  }
+
   React.useEffect(() => {
     const getRepuationData = async () => {
       const repuationRewardForBatch = (await props.cl4rScheme.getRepuationRewardForBatch(schemeParams.repRewardConstA, schemeParams.repRewardConstB, period));
@@ -52,7 +68,12 @@ const PeriodRow = (props: IProps) => {
 
   const inProgress = currentLockingBatch === period && !isLockingEnded;
   const redeemable = moment().isSameOrAfter(moment.unix(Number(schemeParams.redeemEnableTime)));
-  const reputationToReceive = youLocked.gt(new BN(0)) && Number(repuationRewardForLockings) === 0 ? <span className={css.inProgressLabel}>Redeemed</span> : `${numberWithCommas(repuationRewardForLockings)} REP`;
+  const reputationToReceive = isPeriodRedeemed ?
+    <div className={css.redeemedLabel}>
+      <span className={css.inProgressLabel}>{`${numberWithCommas(formatTokens(amountRedeemed))} REP Redeemed`}</span>
+      <span>{redeemedAt}</span>
+    </div> :
+    `${numberWithCommas(repuationRewardForLockings)} REP`;
 
   const actionButtonClass = classNames({
     [css.actionButton]: true,
@@ -62,7 +83,7 @@ const PeriodRow = (props: IProps) => {
   return (
     <tr className={css.row}>
       <td>{period + 1}</td>
-      <td>{`${numberWithCommas(formatTokens(new BN(youLocked)))} ${schemeParams.tokenSymbol}`}</td>
+      <td>{`${numberWithCommas(formatTokens(youLocked))} ${schemeParams.tokenSymbol}`}</td>
       <td>{`${numberWithCommas(repuationRewardForBatch)} REP`}</td>
       <td>{inProgress ? <span className={css.inProgressLabel}>In Progress</span> : reputationToReceive}</td>
       <td>{!inProgress && redeemable && Number(repuationRewardForLockings) > 0 && <button className={actionButtonClass} onClick={() => handleRedeem(lockingIdsForRedeem, setIsRedeeming)} disabled={isRedeeming}>Redeem</button>}</td>