feat: create streaming payment via reputation

amplify/backend/api/colonycdapp/schema/schema.graphql

@@ -3061,6 +3061,11 @@ type ColonyMotion @model {
   """
   streamingPayment: StreamingPayment @hasOne(fields: ["streamingPaymentId"])
 
+  """
+  Pending streaming payment to be created by motion, if any
+  """
+  pendingStreamingPayment: PendingStreamingPayment
+
   """
   Streaming Payment changes by the action
   """
@@ -4132,6 +4137,37 @@ type StreamingPayment @model @searchable {
   creatorAddress: ID!
 }
 
+type PendingStreamingPayment {
+  """
+  Address of the recipient
+  """
+  recipientAddress: String!
+  """
+  Native domain ID where the streaming payment will be created
+  """
+  nativeDomainId: Int!
+  """
+  Start time in seconds since epoch
+  """
+  startTime: String!
+  """
+  End time in seconds since epoch
+  """
+  endTime: String!
+  """
+  Payment interval in seconds
+  """
+  interval: String!
+  """
+  Token address used for payments
+  """
+  tokenAddress: ID!
+  """
+  Amount per interval
+  """
+  amount: String!
+}
+
 type StreamingPaymentMetadata @model {
   id: ID! # Self-managed, formatted as colonyId_nativeId
   endCondition: StreamingPaymentEndCondition!

docker/colony-cdapp-dev-env-block-ingestor

@@ -1,6 +1,6 @@
 FROM colony-cdapp-dev-env/base:latest
 
-ENV BLOCK_INGESTOR_HASH=030397b9467673a108758269a7e087ca6ce8fee7
+ENV BLOCK_INGESTOR_HASH=97bca4c0a96a0d78b5a78961dfcc48a7009909ff
 
 # Declare volumes to set up metadata
 VOLUME [ "/colonyCDapp/amplify/mock-data" ]

src/components/v5/common/ActionSidebar/hooks/useGetColonyAction.ts

@@ -45,6 +45,7 @@ const useGetColonyAction = (transactionHash: OptionalValue<string>) => {
   const {
     data: actionData,
     loading: loadingAction,
+    called: actionCalled,
     startPolling,
     stopPolling,
     refetch: refetchAction,
@@ -168,7 +169,10 @@ const useGetColonyAction = (transactionHash: OptionalValue<string>) => {
   });
 
   useEffect(() => {
-    if (hasPendingAnnotation && !action?.annotation) {
+    if (
+      (hasPendingAnnotation && !action?.annotation) ||
+      (!actionData?.getColonyAction?.metadata && actionCalled)
+    ) {
       startActionPoll();
     } else {
       setHasPendingAnnotation(false);
@@ -182,11 +186,13 @@ const useGetColonyAction = (transactionHash: OptionalValue<string>) => {
     hasPendingAnnotation,
     startActionPoll,
     stopActionPoll,
+    actionCalled,
+    actionData?.getColonyAction,
   ]);
 
   return {
     isValidTransactionHash: isValidTx,
-    isInvalidTransactionHash: !isValidTx,
+    isInvalidTransactionHash: !isValidTx && !!transactionHash,
     isUnknownTransaction:
       isValidTx && action?.colony?.colonyAddress !== colonyAddress,
     loadingAction:

src/components/v5/common/ActionSidebar/partials/ActionSidebarLayout/ActionSidebarLayout.tsx

@@ -48,6 +48,7 @@ const ActionSidebarLayout = forwardRef<
   ) => {
     const isMobile = useMobile();
     const { isCopied, handleClipboardCopy } = useCopyToClipboard();
+    const noActionFound = !!(actionNotFound && !isLoading);
 
     const [
       isSidebarFullscreen,
@@ -117,7 +118,7 @@ const ActionSidebarLayout = forwardRef<
             'md:max-w-full': isSidebarFullscreen,
             'md:max-w-[43.375rem]': !isSidebarFullscreen && !isMotion,
             'md:max-w-[67.3125rem]':
-              (!isSidebarFullscreen && !!transactionHash && !actionNotFound) ||
+              (!isSidebarFullscreen && !!transactionHash && !noActionFound) ||
               (!isSidebarFullscreen && !!transactionId && isLoading),
           },
         )}

src/components/v5/common/ActionSidebar/partials/forms/StreamingPaymentForm/hooks.ts

@@ -11,6 +11,7 @@ import { StreamingPaymentEndCondition } from '~gql';
 import useCurrentBlockTime from '~hooks/useCurrentBlockTime.ts';
 import useNetworkInverseFee from '~hooks/useNetworkInverseFee.ts';
 import { ActionTypes } from '~redux/index.ts';
+import { DecisionMethod } from '~types/actions.ts';
 import { mapPayload, pipe } from '~utils/actions.ts';
 import getLastIndexFromPath from '~utils/getLastIndexFromPath.ts';
 import { formatText } from '~utils/intl.ts';
@@ -136,6 +137,7 @@ export const useStreamingPayment = (
   const tokenAddress = useWatch({ name: 'tokenAddress' });
   const limitTokenAddress = useWatch({ name: 'limitTokenAddress' });
   const endCondition = useWatch({ name: 'ends' });
+  const decisionMethod = useWatch({ name: 'decisionMethod' });
   const { setValue, resetField, trigger } = useFormContext();
   const { currentBlockTime: blockTime } = useCurrentBlockTime();
 
@@ -171,7 +173,10 @@ export const useStreamingPayment = (
       }),
       [colony.nativeToken.tokenAddress],
     ),
-    actionType: ActionTypes.STREAMING_PAYMENT_CREATE,
+    actionType:
+      decisionMethod === DecisionMethod.Permissions
+        ? ActionTypes.STREAMING_PAYMENT_CREATE
+        : ActionTypes.MOTION_STREAMING_PAYMENT_CREATE,
     getFormOptions,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     transform: useCallback(

src/components/v5/common/ActionSidebar/partials/forms/StreamingPaymentForm/utils.ts

@@ -1,3 +1,4 @@
+import { Id } from '@colony/colony-js';
 import isDate from 'date-fns/isDate';
 import { BigNumber } from 'ethers';
 
@@ -48,6 +49,7 @@ export const getStreamingPaymentPayload = (
     limit,
     from,
     decisionMethod,
+    title,
   } = values;
 
   const selectedToken = getSelectedToken(colony, tokenAddress);
@@ -91,5 +93,7 @@ export const getStreamingPaymentPayload = (
     limitAmount:
       ends === StreamingPaymentEndCondition.LimitReached ? limit : undefined,
     annotationMessage,
+    motionDomainId: Id.RootDomain,
+    customActionTitle: title,
   };
 };

src/components/v5/common/CompletedAction/CompletedAction.tsx

@@ -122,6 +122,8 @@ const CompletedAction = ({ action }: ICompletedAction) => {
         return <StreamingPayment action={action} />;
       case ColonyActionType.CancelStreamingPayment:
         return <StreamingPayment action={action} />;
+      case ColonyActionType.CreateStreamingPaymentMotion:
+        return <StreamingPayment action={action} />;
       default:
         console.warn('Unsupported action display', action);
         return <div>Not implemented yet</div>;

src/components/v5/common/CompletedAction/partials/StreamingPayment/StreamingPayment.tsx

@@ -160,7 +160,13 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
       </div>
     );
   }
-  if (!streamingPaymentData) {
+
+  const streamingData = streamingPaymentData ?? {
+    ...action.motionData?.pendingStreamingPayment,
+    metadata: action.motionData?.pendingStreamingPaymentMetadata,
+  };
+
+  if (!streamingData) {
     return null;
   }
   const {
@@ -182,7 +188,7 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
     endTime,
     startTime,
     metadata: streamingPaymentMetadata,
-  } = streamingPaymentData;
+  } = streamingData;
   const selectedToken = getSelectedToken(colony, tokenAddress || '');
   const formattedAmount = getNumeralTokenAmount(
     amount || '1',
@@ -193,7 +199,8 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
   const motionDomain = motionData?.motionDomain ?? null;
 
   const limitAmount = getStreamingPaymentLimit({
-    streamingPayment: streamingPaymentData,
+    // @ts-ignore
+    streamingPayment: streamingData,
   });
 
   const formattedLimitAmount = getNumeralTokenAmount(
@@ -205,7 +212,7 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
     address: user?.walletAddress || '',
     colony,
     requiredRoles: [ColonyRole.Arbitration],
-    requiredRolesDomain: streamingPaymentData.nativeDomainId,
+    requiredRolesDomain: nativeDomainId ?? 0,
   });
 
   const showCancelOption =
@@ -239,7 +246,7 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
           toggleActionSidebarOn({
             [TITLE_FIELD_NAME]: customTitle,
             [ACTION_TYPE_FIELD_NAME]: Action.StreamingPayment,
-            [FROM_FIELD_NAME]: streamingPaymentData?.nativeDomainId,
+            [FROM_FIELD_NAME]: nativeDomainId,
             [RECIPIENT_FIELD_NAME]: recipientAddress,
             [AMOUNT_FIELD_NAME]: formattedAmount,
             [TOKEN_FIELD_NAME]: selectedToken?.tokenAddress,
@@ -257,15 +264,15 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
                   interval: 'custom',
                 }
               : {
-                  interval: getAmountPerValue(interval).toLowerCase(),
+                  interval: getAmountPerValue(interval ?? '0').toLowerCase(),
                 },
             limit: limitAmount ? formattedLimitAmount : undefined,
             limitTokenAddress: limitAmount
               ? selectedToken?.tokenAddress
               : undefined,
             [CREATED_IN_FIELD_NAME]: isMotion
               ? motionDomain?.nativeId
-              : streamingPaymentData?.nativeDomainId,
+              : nativeDomainId,
             [DESCRIPTION_FIELD_NAME]: annotation?.message,
           });
         }, 500);
@@ -316,7 +323,7 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
             actionType: ColonyActionType.CreateStreamingPayment,
             amount: formattedAmount,
             tokenSymbol: selectedToken?.symbol,
-            period: getAmountPerValue(interval).toLowerCase(),
+            period: getAmountPerValue(interval ?? '0').toLowerCase(),
             recipient: recipientAddress ? (
               <UserInfoPopover
                 walletAddress={recipientAddress}
@@ -402,7 +409,7 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
         <AmountRow amount={amount || '1'} token={selectedToken || undefined} />
         <ActionData
           rowLabel={formatText({ id: 'actionSidebar.amountPer' })}
-          rowContent={<p>{getAmountPerValue(interval)}</p>}
+          rowContent={<p>{getAmountPerValue(interval ?? '0')}</p>}
           RowIcon={Calendar}
           tooltipContent={formatText({
             id: 'actionSidebar.tooltip.streamingPayment.amount.per',
@@ -432,7 +439,8 @@ const StreamingPayment: FC<StreamingPaymentProps> = ({ action }) => {
       )}
       <CancelModal
         isOpen={isCancelModalOpen}
-        streamingPayment={streamingPaymentData}
+        // @ts-ignore
+        streamingPayment={streamingData}
         onClose={toggleCancelModalOff}
         onSuccess={() =>
           setExpectedActionStatus(StreamingPaymentStatus.Cancelled)

src/components/v5/tmpDebug/TmpStreamingPayments.tsx

@@ -461,6 +461,7 @@ const TmpStreamingPayments = () => {
       votingReputationAddress: votingReputationAddress ?? '',
       annotationMessage: annotation,
       startTimestamp: '0',
+      customActionTitle: 'Streaming payment',
     };
 
   return (

src/graphql/fragments/actions.graphql

@@ -260,6 +260,12 @@ fragment ColonyMotion on ColonyMotion {
   createdAt
   createdBy
   expenditureSlotIds
+  pendingStreamingPayment {
+    ...PendingStreamingPayment
+  }
+  pendingStreamingPaymentMetadata {
+    ...PendingStreamingPaymentMetadata
+  }
 }
 
 fragment MotionMessage on MotionMessage {

src/graphql/fragments/streamingPayment.graphql

@@ -40,3 +40,25 @@ fragment StreamingPaymentChanges on StreamingPaymentChanges {
   interval
   amount
 }
+
+fragment PendingStreamingPayment on PendingStreamingPayment {
+  recipientAddress
+  nativeDomainId
+  tokenAddress
+  amount
+  startTime
+  endTime
+  interval
+}
+
+fragment PendingStreamingPaymentMetadata on StreamingPaymentMetadata {
+  createdAt
+  endCondition
+  id
+  updatedAt
+  changelog {
+    newEndCondition
+    oldEndCondition
+    transactionHash
+  }
+}

src/i18n/en-actions.ts

@@ -141,8 +141,8 @@ const actionsMessageDescriptors = {
       ${ColonyActionType.MakeArbitraryTransaction} {Custom transactions}
       ${ColonyActionType.MakeArbitraryTransactionsMotion} {Custom transactions}
       ${ColonyActionType.MakeArbitraryTransactionsMultisig} {Custom transactions}
-      ${ColonyActionType.CreateStreamingPayment} {Create streaming payment}
-      ${ColonyActionType.CreateStreamingPaymentMotion} {Create streaming payment}
+      ${ColonyActionType.CreateStreamingPayment} {Streaming payment}
+      ${ColonyActionType.CreateStreamingPaymentMotion} {Streaming payment}
       ${ExtendedColonyActionType.StagedPayment} {Staged payment}
       ${ExtendedColonyActionType.AddSafe} {Add Safe}
       ${ExtendedColonyActionType.RemoveSafe} {Remove Safe}

src/redux/sagas/expenditures/createStreamingPayment.ts

@@ -36,7 +36,8 @@ import {
 } from '../utils/index.ts';
 
 export type CreateStreamingPaymentPayload =
-  Action<ActionTypes.STREAMING_PAYMENT_CREATE>['payload'];
+  | Action<ActionTypes.STREAMING_PAYMENT_CREATE>['payload']
+  | Action<ActionTypes.MOTION_STREAMING_PAYMENT_CREATE>['payload'];
 
 function* createStreamingPaymentAction({
   payload: {