F #2544 ability to withdraw any tokens bigger than withdraw limit

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, 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,39 @@ 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({
+ web3,
  trace,
  from: userAddress,
+ selectedTokens: selectedTokens.current,
  onTxHash: txUrl => {
  sendWithdrawAnalyticsEvent(txUrl);
  txNotification('Initiating withdrawal from Trace...', txUrl, true);
@@ -137,7 +171,6 @@ const WithdrawTraceFundsButton = ({ trace, isAmountEnoughForWithdraw }) => {
  // TODO: need to update feathers to reset the donations to previous state as this
  else displayTransactionError(txUrl);
  },
- web3,
  }),
  });
  })
@@ -170,6 +203,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/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>

src/components/views/verification/Main.jsx

@@ -82,8 +82,7 @@ const Verification = props => {
  setStep(step + 1);
  })
  .catch(err => {
- if (err.message) ErrorHandler(err, err.message);
- else ErrorHandler(err, 'Something went wrong!');
+ ErrorHandler(err, err.message);
  })
  .finally(() => setIsSaving(false));
  };

src/services/DonationBlockchainService.jsx

@@ -839,7 +839,7 @@ class DonationBlockchainService {
  .then(({ total }) => total);
  }
 
- static async getTraceDonations(traceId) {
+ static async getTraceDonations(traceId, selectedTokens) {
  const service = feathersClient.service('/donations');
  let data = [];
  let total;
@@ -857,6 +857,11 @@ class DonationBlockchainService {
  $limit: spare || 1,
  $sort: { tokenAddress: 1, pledgeId: 1 }, // group by token
  };
+
+ if (selectedTokens) {
+ query.tokenAddress = { $in: selectedTokens };
+ }
+
  // eslint-disable-next-line no-await-in-loop
  const resp = await service.find({ query });
 

src/styles/_antOverrides.scss

@@ -146,6 +146,17 @@
  }
 }
 
+//Ant custom multi select with ant-select-custom-multiple class
+.ant-select-custom-multiple {
+ .ant-select-selection-overflow {
+ margin-top: -3px;
+ }
+ .ant-select-selection-item {
+ line-height: 30px !important;
+ height: 30px;
+ }
+}
+
 .ant-picker {
  width: 100%;
  border: 2px solid #dfdae8;