F 2544 ability to withdraw any tokens bigger than withdraw limit

src/components/TraceActions.jsx

@@ -24,13 +24,15 @@ function TraceActions({ trace }) {
     actions: { convertMultipleRates },
   } = useContext(ConversionRateContext);
   const {
-    state: { minimumPayoutUsdValue },
+    state: { minimumPayoutUsdValue, activeTokenWhitelist },
   } = useContext(WhiteListContext);
   const {
     state: { currentUser },
   } = useContext(UserContext);
   const [currentBalanceUsdValue, setCurrentBalanceUsdValue] = useState(0);
-  const [isAmountEnoughForWithdraw, setIsAmountEnoughForWithdraw] = useState(true);
+  const [withdrawalTokens, setWithdrawalTokens] = useState([]);
+
+  const isAmountEnoughForWithdraw = withdrawalTokens.length > 0;
 
   const calculateTraceCurrentBalanceUsdValue = async () => {
     try {
@@ -55,16 +57,20 @@ function TraceActions({ trace }) {
     if (!currentBalanceUsdValue) {
       return;
     }
+    const _withdrawalTokens = [];
     // eslint-disable-next-line no-restricted-syntax
     for (const currencyUsdValue of currentBalanceUsdValue) {
-      // if usdValue is zero we should not set setIsAmountEnoughForWithdraw(false) because we check
-      // minimumPayoutUsdValue comparison when usdValue for a currency is not zero
-      if (currencyUsdValue.usdValue && currencyUsdValue.usdValue < minimumPayoutUsdValue) {
-        setIsAmountEnoughForWithdraw(false);
-        return;
+      if (currencyUsdValue.usdValue >= minimumPayoutUsdValue) {
+        const token = activeTokenWhitelist.find(
+          _token => _token.symbol === currencyUsdValue.currency,
+        );
+        _withdrawalTokens.push(token);
       }
     }
-    setIsAmountEnoughForWithdraw(true);
+
+    if (_withdrawalTokens.length) {
+      setWithdrawalTokens(_withdrawalTokens);
+    }
   }, [currentBalanceUsdValue]);
 
   useEffect(() => {
@@ -107,6 +113,7 @@ function TraceActions({ trace }) {
       <WithdrawTraceFundsButton
         trace={trace}
         isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
+        withdrawalTokens={withdrawalTokens}
       />
 
       <EditTraceButton trace={trace} />

src/components/TraceConversationAction.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prefer-stateless-function */
-// @dev: not prefering stateless here because functionality will be extended
+// @dev: not preferring stateless here because functionality will be extended
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 
@@ -16,7 +16,7 @@ import LPTrace from '../models/LPTrace';
 
 class TraceConversationAction extends Component {
   render() {
-    const { messageContext, trace, isAmountEnoughForWithdraw } = this.props;
+    const { messageContext, trace, isAmountEnoughForWithdraw, withdrawalTokens } = this.props;
 
     switch (messageContext) {
       case 'proposed':
@@ -38,6 +38,7 @@ class TraceConversationAction extends Component {
           <WithdrawTraceFundsButton
             trace={trace}
             isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
+            withdrawalTokens={withdrawalTokens}
           />
         );
 
@@ -68,6 +69,11 @@ TraceConversationAction.propTypes = {
   ).isRequired,
   messageContext: PropTypes.string.isRequired,
   isAmountEnoughForWithdraw: PropTypes.bool.isRequired,
+  withdrawalTokens: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+TraceConversationAction.defaultProps = {
+  withdrawalTokens: [],
 };
 
 export default React.memo(TraceConversationAction);

src/components/TraceConversationItem.jsx

@@ -143,7 +143,12 @@ const getEtherScanUrl = ({ messageContext }) =>
     ? config.homeEtherscan
     : config.etherscan;
 
-function TraceConversationItem({ conversation, trace, isAmountEnoughForWithdraw }) {
+function TraceConversationItem({
+  conversation,
+  trace,
+  isAmountEnoughForWithdraw,
+  withdrawalTokens,
+}) {
   if (!conversation) return null;
   const { txHash, messageContext, message, performedByRole, createdAt, owner } = conversation;
 
@@ -180,6 +185,7 @@ function TraceConversationItem({ conversation, trace, isAmountEnoughForWithdraw
             messageContext={messageContext}
             trace={trace}
             isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
+            withdrawalTokens={withdrawalTokens}
           />
         </div>
 
@@ -195,6 +201,11 @@ TraceConversationItem.propTypes = {
   ).isRequired,
   conversation: PropTypes.instanceOf(Object).isRequired,
   isAmountEnoughForWithdraw: PropTypes.bool.isRequired,
+  withdrawalTokens: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+TraceConversationItem.defaultProps = {
+  withdrawalTokens: [],
 };
 
 export default React.memo(TraceConversationItem);

src/components/TraceConversations.jsx

@@ -12,7 +12,7 @@ import BridgedTrace from '../models/BridgedTrace';
 import LPPCappedTrace from '../models/LPPCappedTrace';
 import LPTrace from '../models/LPTrace';
 
-const TraceConversations = ({ trace, maxHeight, isAmountEnoughForWithdraw }) => {
+const TraceConversations = ({ trace, maxHeight, isAmountEnoughForWithdraw, withdrawalTokens }) => {
   const conversationsNumPerLoad = 5;
   const [conversations, setConversations] = useState({});
   const [isLoading, setLoading] = useState(true);
@@ -66,6 +66,7 @@ const TraceConversations = ({ trace, maxHeight, isAmountEnoughForWithdraw }) =>
                 conversation={conversation}
                 trace={trace}
                 isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
+                withdrawalTokens={withdrawalTokens}
               />
             ))}
           </div>
@@ -85,10 +86,12 @@ TraceConversations.propTypes = {
   ).isRequired,
   maxHeight: PropTypes.string,
   isAmountEnoughForWithdraw: PropTypes.bool.isRequired,
+  withdrawalTokens: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 TraceConversations.defaultProps = {
   maxHeight: 'unset',
+  withdrawalTokens: [],
 };
 
 export default React.memo(TraceConversations);

src/components/ViewTraceAlerts.jsx

@@ -18,7 +18,7 @@ import BridgedTrace from '../models/BridgedTrace';
 import LPPCappedTrace from '../models/LPPCappedTrace';
 import LPTrace from '../models/LPTrace';
 
-const ViewTraceAlerts = ({ trace, campaign, isAmountEnoughForWithdraw }) => {
+const ViewTraceAlerts = ({ trace, campaign, isAmountEnoughForWithdraw, withdrawalTokens }) => {
   const {
     state: { currentUser, userIsCommunityOwner },
   } = useContext(UserContext);
@@ -92,6 +92,7 @@ const ViewTraceAlerts = ({ trace, campaign, isAmountEnoughForWithdraw }) => {
           <WithdrawTraceFundsButton
             trace={trace}
             isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
+            withdrawalTokens={withdrawalTokens}
           />
         </ProjectViewActionAlert>
       )}
@@ -105,6 +106,11 @@ ViewTraceAlerts.propTypes = {
   ).isRequired,
   campaign: PropTypes.instanceOf(Campaign).isRequired,
   isAmountEnoughForWithdraw: PropTypes.bool.isRequired,
+  withdrawalTokens: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+ViewTraceAlerts.defaultProps = {
+  withdrawalTokens: [],
 };
 
 export default React.memo(ViewTraceAlerts);

src/components/WithdrawTraceFundsButton.jsx

@@ -1,16 +1,16 @@
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { Modal, notification, Select } from 'antd';
 
 import TraceService from 'services/TraceService';
 import Trace from 'models/Trace';
 import { authenticateUser, checkBalance } from 'lib/middleware';
-import { Modal } from 'antd';
 import { Context as Web3Context } from '../contextProviders/Web3Provider';
 import { Context as NotificationContext } from '../contextProviders/NotificationModalProvider';
+import { Context as UserContext } from '../contextProviders/UserProvider';
 import DonationBlockchainService from '../services/DonationBlockchainService';
 import LPTrace from '../models/LPTrace';
 import config from '../configuration';
-import { Context as UserContext } from '../contextProviders/UserProvider';
 import ErrorHandler from '../lib/ErrorHandler';
 import BridgedTrace from '../models/BridgedTrace';
 import LPPCappedTrace from '../models/LPPCappedTrace';
@@ -21,7 +21,7 @@ import {
 } from '../services/ConversionRateService';
 import { displayTransactionError, txNotification } from '../lib/helpers';
 
-const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw }) => {
+const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw, withdrawalTokens }) => {
   const {
     state: { currentUser },
   } = useContext(UserContext);
@@ -33,6 +33,8 @@ const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw }) => {
     actions: { minPayoutWarningInWithdraw },
   } = useContext(NotificationContext);
 
+  const selectedTokens = useRef([]);
+
   async function sendWithdrawAnalyticsEvent(txUrl) {
     const donationsCounters = trace.donationCounters.filter(dc => dc.currentBalance.gt(0));
     // eslint-disable-next-line no-restricted-syntax
@@ -85,6 +87,15 @@ const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw }) => {
             minPayoutWarningInWithdraw();
             return;
           }
+
+          let defaultValue;
+          if (withdrawalTokens.length === 1) {
+            const token = withdrawalTokens[0];
+            // eslint-disable-next-line react/prop-types
+            defaultValue = token.address;
+            selectedTokens.current = defaultValue;
+          }
+
           Modal.confirm({
             title: isRecipient ? 'Withdrawal Funds to Wallet' : 'Disburse Funds to Recipient',
             content: (
@@ -111,16 +122,45 @@ const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw }) => {
                     {isRecipient ? 'your' : "the recipient's"} wallet.
                   </div>
                 )}
+
+                <div className="my-3 font-weight-bold">Select tokens to withdraw:</div>
+                <Select
+                  mode="multiple"
+                  id="token-select"
+                  allowClear
+                  placeholder="------ Select tokens ------"
+                  defaultValue={defaultValue}
+                  onChange={address => {
+                    selectedTokens.current = address;
+                  }}
+                  disabled={withdrawalTokens.length === 1}
+                  style={{ width: '100%' }}
+                  className="ant-select-custom-multiple"
+                >
+                  {withdrawalTokens.map(item => (
+                    <Select.Option value={item.address} key={item.symbol}>
+                      {item.symbol}
+                    </Select.Option>
+                  ))}
+                </Select>
               </Fragment>
             ),
             cancelText: 'Cancel',
-            okText: 'Yes, withdrawal',
+            okText: 'Withdrawal',
             centered: true,
             width: 500,
-            onOk: () =>
-              TraceService.withdraw({
+            onOk: () => {
+              if (selectedTokens.current.length < 1) {
+                return notification.error({
+                  message: 'No token selected!',
+                  description: 'Select at least one token to withdraw.',
+                });
+              }
+              return TraceService.withdraw({
+                web3,
                 trace,
                 from: userAddress,
+                selectedTokens: selectedTokens.current,
                 onTxHash: txUrl => {
                   sendWithdrawAnalyticsEvent(txUrl);
                   txNotification('Initiating withdrawal from Trace...', txUrl, true);
@@ -137,8 +177,8 @@ const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw }) => {
                   // TODO: need to update feathers to reset the donations to previous state as this
                   else displayTransactionError(txUrl);
                 },
-                web3,
-              }),
+              });
+            },
           });
         })
         .catch(err =>
@@ -170,6 +210,11 @@ WithdrawTraceFundsButton.propTypes = {
     [Trace, BridgedTrace, LPPCappedTrace, LPTrace].map(PropTypes.instanceOf),
   ).isRequired,
   isAmountEnoughForWithdraw: PropTypes.bool.isRequired,
+  withdrawalTokens: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+WithdrawTraceFundsButton.defaultProps = {
+  withdrawalTokens: [],
 };
 
 export default React.memo(WithdrawTraceFundsButton);

src/components/views/MyTraces.jsx

@@ -2,25 +2,22 @@ import React, { useState, useEffect, useContext, useCallback, Fragment, useRef }
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import Pagination from 'react-js-pagination';
+import { Helmet } from 'react-helmet';
 
 import ViewNetworkWarning from 'components/ViewNetworkWarning';
+import TraceActions from 'components/TraceActions';
 import { Context as Web3Context } from 'contextProviders/Web3Provider';
 import { Context as WhiteListContext } from 'contextProviders/WhiteListProvider';
-import TraceActions from 'components/TraceActions';
-import { Helmet } from 'react-helmet';
 import { Context as UserContext } from '../../contextProviders/UserProvider';
-
 import AuthenticationWarning from '../AuthenticationWarning';
 import Loader from '../Loader';
-
 import {
   getTruncatedText,
   getReadableStatus,
   convertEthHelper,
   ANY_TOKEN,
 } from '../../lib/helpers';
 import config from '../../configuration';
-
 import TraceService from '../../services/TraceService';
 import Trace from '../../models/Trace';
 import ErrorHandler from '../../lib/ErrorHandler';

src/components/views/ViewTrace.jsx

@@ -71,15 +71,16 @@ const ViewTrace = props => {
   const [trace, setTrace] = useState({});
   const [communityTitle, setCommunityTitle] = useState('');
   const [notFound, setNotFound] = useState(false);
-  const [isAmountEnoughForWithdraw, setIsAmountEnoughForWithdraw] = useState(true);
   const [currency, setCurrency] = useState(null);
   const [currentBalanceValue, setCurrentBalanceValue] = useState(0);
   const [currentBalanceUsdValue, setCurrentBalanceUsdValue] = useState(0);
+  const [withdrawalTokens, setWithdrawalTokens] = useState([]);
 
   const donationsObserver = useRef();
   const traceSubscription = useRef();
   const newDonations = useRef(0);
   const donationsPerBatch = 50;
+  const isAmountEnoughForWithdraw = withdrawalTokens.length > 0;
 
   const getCommunityTitle = async communityId => {
     if (communityId === 0) return;
@@ -196,16 +197,20 @@ const ViewTrace = props => {
     if (!currentBalanceUsdValue) {
       return;
     }
+    const _withdrawalTokens = [];
     // eslint-disable-next-line no-restricted-syntax
     for (const currencyUsdValue of currentBalanceUsdValue) {
-      // if usdValue is zero we should not set setIsAmountEnoughForWithdraw(false) because we check
-      // minimumPayoutUsdValue comparison when usdValue for a currency is not zero
-      if (currencyUsdValue.usdValue && currencyUsdValue.usdValue < minimumPayoutUsdValue) {
-        setIsAmountEnoughForWithdraw(false);
-        return;
+      if (currencyUsdValue.usdValue >= minimumPayoutUsdValue) {
+        const token = activeTokenWhitelist.find(
+          _token => _token.symbol === currencyUsdValue.currency,
+        );
+        _withdrawalTokens.push(token);
       }
     }
-    setIsAmountEnoughForWithdraw(true);
+
+    if (_withdrawalTokens.length) {
+      setWithdrawalTokens(_withdrawalTokens);
+    }
   }, [currentBalanceUsdValue]);
 
   const isActiveTrace = () => {
@@ -380,6 +385,7 @@ const ViewTrace = props => {
                   trace={trace}
                   campaign={campaign}
                   isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
+                  withdrawalTokens={withdrawalTokens}
                 />
 
                 <div id="description">
@@ -624,6 +630,7 @@ const ViewTrace = props => {
                       trace={trace}
                       isAmountEnoughForWithdraw={isAmountEnoughForWithdraw}
                       maxHeight={`${detailsCardHeight}px`}
+                      withdrawalTokens={withdrawalTokens}
                     />
                   </div>
                 </div>