Incorporate network fees in Create Payment

src/modules/core/components/ActionsList/ActionsListItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useEffect } from 'react';
-import { bigNumberify } from 'ethers/utils';
+import { bigNumberify, BigNumberish } from 'ethers/utils';
 import {
   FormattedDateParts,
   FormattedMessage,
@@ -27,6 +27,7 @@ import {
   Colony,
   useColonyHistoricRolesQuery,
   useTokenInfoLazyQuery,
+  useNetworkContracts,
 } from '~data/index';
 import { createAddress } from '~utils/web3';
 import { FormattedAction, ColonyActions, ColonyMotions } from '~types/index';
@@ -201,6 +202,20 @@ const ActionsListItem = ({
     motionState === MotionState.FailedNoFinalizable;
 
   const stopPropagation = (event) => event.stopPropagation();
+
+  const { feeInverse: networkFeeInverse } = useNetworkContracts();
+  const feePercentage = networkFeeInverse
+    ? bigNumberify(100).div(networkFeeInverse)
+    : undefined;
+
+  // In case it is a Payment Motion or Action, calculate the payment the recipient gets, after network fees
+  const paymentReceivedFn = feePercentage
+    ? (paymentAmount: BigNumberish) =>
+        bigNumberify(paymentAmount)
+          .mul(bigNumberify(100).sub(feePercentage))
+          .div(100)
+    : (x: any) => x;
+
   return (
     <li>
       <div
@@ -290,7 +305,12 @@ const ActionsListItem = ({
                   ),
                   amount: (
                     <Numeral
-                      value={amount}
+                      value={
+                        actionType === ColonyActions.Payment ||
+                        actionType === ColonyMotions.PaymentMotion
+                          ? paymentReceivedFn(amount)
+                          : amount
+                      }
                       unit={getTokenDecimalsWithFallback(decimals)}
                     />
                   ),

src/modules/dashboard/components/ActionsPage/ActionsComponents/DefaultMotion.tsx

@@ -46,6 +46,7 @@ import {
   useMotionStatusQuery,
   OneDomain,
   useColonyHistoricRolesQuery,
+  useNetworkContracts,
 } from '~data/index';
 
 import DetailsWidget from '../DetailsWidget';
@@ -266,7 +267,19 @@ const DefaultMotion = ({
     color: domainColor,
     description: domainPurpose,
   };
-  const decimalAmount = getFormattedTokenValue(amount, decimals);
+
+  const { feeInverse: networkFeeInverse } = useNetworkContracts();
+  const feePercentage = networkFeeInverse
+    ? bigNumberify(100).div(networkFeeInverse)
+    : null;
+
+  // In case it is a Payment Motion , calculate the payment the recipient gets, after network fees
+  const decimalAmount = getFormattedTokenValue(
+    feePercentage && actionType === ColonyMotions.PaymentMotion
+      ? bigNumberify(amount).mul(bigNumberify(100).sub(feePercentage)).div(100)
+      : amount,
+    decimals,
+  );
   const actionAndEventValues = {
     actionType,
     newVersion,

src/modules/dashboard/components/Dialogs/CreatePaymentDialog/CreatePaymentDialog.tsx

@@ -11,12 +11,12 @@ import { ActionForm } from '~core/Fields';
 
 import { Address } from '~types/index';
 import { ActionTypes } from '~redux/index';
-import { useMembersSubscription } from '~data/index';
+import { useMembersSubscription, useNetworkContracts } from '~data/index';
 import { getTokenDecimalsWithFallback } from '~utils/tokens';
 import { pipe, withMeta, mapPayload } from '~utils/actions';
 import { WizardDialogType } from '~utils/hooks';
 
-import DialogForm from './CreatePaymentDialogForm';
+import DialogForm, { calculateFee } from './CreatePaymentDialogForm';
 
 const MSG = defineMessages({
   amountZero: {
@@ -33,7 +33,7 @@ export interface FormValues {
   forceAction: boolean;
   domainId: string;
   recipient: Address;
-  amount: string;
+  amount: string; // Amount the receiver finally gets, the initiator pays this plus network fee
   tokenAddress: Address;
   annotation: string;
   motionDomainId: string;
@@ -93,6 +93,8 @@ const CreatePaymentDialog = ({
     variables: { colonyAddress },
   });
 
+  const { feeInverse: networkFeeInverse } = useNetworkContracts();
+
   const transform = useCallback(
     pipe(
       mapPayload((payload) => {
@@ -114,14 +116,18 @@ const CreatePaymentDialog = ({
           selectedToken && selectedToken.decimals,
         );
 
+        const amountWithFees = networkFeeInverse
+          ? calculateFee(amount, networkFeeInverse, decimals).totalToPay
+          : amount;
+
         return {
           colonyName,
           colonyAddress,
           recipientAddress: walletAddress,
           domainId,
           singlePayment: {
             tokenAddress,
-            amount,
+            amount: amountWithFees, // NOTE: The contract only sees this amount
             decimals,
           },
           annotationMessage,

src/modules/dashboard/components/Dialogs/CreatePaymentDialog/CreatePaymentDialogForm.css

@@ -24,7 +24,7 @@
   text-align: right;
 }
 
-.domainPotBalance {
+.domainPotBalance, .networkFee {
   font-size: var(--size-tiny);
   font-weight: var(--weight-bold);
   text-align: right;

src/modules/dashboard/components/Dialogs/CreatePaymentDialog/CreatePaymentDialogForm.css.d.ts

@@ -4,6 +4,7 @@ export const tokenAmountSelect: string;
 export const tokenAmountContainer: string;
 export const tokenAmountUsd: string;
 export const domainPotBalance: string;
+export const networkFee: string;
 export const domainSelects: string;
 export const tokenAmountInputContainer: string;
 export const singleUserContainer: string;

src/modules/dashboard/components/Dialogs/CreatePaymentDialog/CreatePaymentDialogForm.tsx

@@ -32,6 +32,7 @@ import {
   useLoggedInUser,
   useTokenBalancesForDomainsLazyQuery,
   AnyUser,
+  useNetworkContracts,
 } from '~data/index';
 import {
   getBalanceFromToken,
@@ -64,6 +65,10 @@ const MSG = defineMessages({
     id: 'dashboard.CreatePaymentDialog.CreatePaymentDialogForm.amount',
     defaultMessage: 'Amount',
   },
+  fee: {
+    id: 'dashboard.CreatePaymentDialog.CreatePaymentDialogForm.fee',
+    defaultMessage: 'Network fee: {fee} {symbol}',
+  },
   token: {
     id: 'dashboard.CreatePaymentDialog.CreatePaymentDialogForm.address',
     defaultMessage: 'Token',
@@ -114,6 +119,29 @@ const supRenderAvatar = (address: Address, item: ItemDataType<AnyUser>) => (
   <UserAvatar address={address} user={item} size="xs" notSet={false} />
 );
 
+// NOTE: The equation to calculate totalToPay is as following (in Wei)
+// totalToPay = (receivedAmount + 1) * (feeInverse / (feeInverse -1))
+// The network adds 1 wei extra fee after the percentage calculation
+// For more info check out
+// https://github.com/JoinColony/colonyNetwork/blob/806e4d5750dc3a6b9fa80f6e007773b28327c90f/contracts/colony/ColonyFunding.sol#L656
+
+export const calculateFee = (
+  receivedAmount: string, // amount that the recipient finally receives
+  feeInverse: string,
+  decimals: number,
+): { feesInWei: string; totalToPay: string } => {
+  const amountInWei = moveDecimal(receivedAmount, decimals);
+  const totalToPayInWei = bigNumberify(amountInWei)
+    .add(1)
+    .mul(feeInverse)
+    .div(bigNumberify(feeInverse).sub(1));
+  const feesInWei = totalToPayInWei.sub(amountInWei);
+  return {
+    feesInWei: feesInWei.toString(),
+    totalToPay: moveDecimal(totalToPayInWei, -1 * decimals),
+  }; // NOTE: seems like moveDecimal does not have strict typing
+};
+
 const CreatePaymentDialogForm = ({
   back,
   colony,
@@ -313,6 +341,8 @@ const CreatePaymentDialogForm = ({
 
   const inputDisabled = !canMakePayment || onlyForceAction || isSubmitting;
 
+  const { feeInverse: networkFeeInverse } = useNetworkContracts();
+
   return (
     <>
       <DialogSection appearance={{ theme: 'sidePadding' }}>
@@ -427,6 +457,41 @@ const CreatePaymentDialogForm = ({
                */
               forcedFieldError={customAmountError}
             />
+            {networkFeeInverse &&
+              values.amount &&
+              values.amount !== '0' &&
+              values.amount !== '0.' &&
+              values.amount !== '.' && (
+                <div className={styles.networkFee}>
+                  <FormattedMessage
+                    {...MSG.fee}
+                    values={{
+                      fee: (
+                        <Numeral
+                          appearance={{
+                            size: 'small',
+                            theme: 'grey',
+                          }}
+                          value={
+                            calculateFee(
+                              values.amount,
+                              networkFeeInverse,
+                              getTokenDecimalsWithFallback(
+                                selectedToken?.decimals,
+                              ),
+                            ).feesInWei
+                          }
+                          unit={getTokenDecimalsWithFallback(
+                            selectedToken && selectedToken.decimals,
+                          )}
+                          truncate={3}
+                        />
+                      ),
+                      symbol: (selectedToken && selectedToken.symbol) || '???',
+                    }}
+                  />
+                </div>
+              )}
           </div>
           <div className={styles.tokenAmountContainer}>
             <div className={styles.tokenAmountSelect}>