diff --git a/src/components/v5/tmpDebug/TmpStreamingPayments.tsx b/src/components/v5/tmpDebug/TmpStreamingPayments.tsx
new file mode 100644
index 0000000000..8add532434
--- /dev/null
+++ b/src/components/v5/tmpDebug/TmpStreamingPayments.tsx
@@ -0,0 +1,759 @@
+import { gql, useLazyQuery } from '@apollo/client';
+import { Id } from '@colony/colony-js';
+import { BigNumber } from 'ethers';
+import moveDecimal from 'move-decimal-point';
+import React, { useState } from 'react';
+
+import { DEFAULT_TOKEN_DECIMALS } from '~constants';
+import { useAppContext } from '~context/AppContext/AppContext.ts';
+import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
+import {
+ StreamingPaymentEndCondition,
+ useGetStreamingPaymentQuery,
+} from '~gql';
+import useAsyncFunction from '~hooks/useAsyncFunction.ts';
+import useCurrentBlockTime from '~hooks/useCurrentBlockTime.ts';
+import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
+import useStreamingPaymentAmountsLeft from '~hooks/useStreamingPaymentAmountsLeft.ts';
+import { ActionTypes } from '~redux';
+import { type ClaimStreamingPaymentPayload } from '~redux/sagas/expenditures/claimStreamingPayment.ts';
+import { type CreateStreamingPaymentPayload } from '~redux/sagas/expenditures/createStreamingPayment.ts';
+import {
+ type EditStreamingPaymentPayload,
+ type CancelStreamingPaymentPayload,
+} from '~redux/types/actions/expenditures.ts';
+import {
+ type StreamingPaymentsMotionEditPayload,
+ type StreamingPaymentsMotionCancelPayload,
+ type StreamingPaymentsMotionCreatePayload,
+} from '~redux/types/actions/motion.ts';
+import Numeral from '~shared/Numeral/Numeral.tsx';
+import { getStreamingPaymentDatabaseId } from '~utils/databaseId.ts';
+import { findDomainByNativeId } from '~utils/domains.ts';
+import { getStreamingPaymentLimit } from '~utils/streamingPayments.ts';
+import { getSelectedToken } from '~utils/tokens.ts';
+import InputBase from '~v5/common/Fields/InputBase/InputBase.tsx';
+import Select from '~v5/common/Fields/Select/Select.tsx';
+import Switch from '~v5/common/Fields/Switch/Switch.tsx';
+import Button from '~v5/shared/Button/Button.tsx';
+import { ActionButton } from '~v5/shared/Button/index.ts';
+
+import { useTmpContext } from './context/TmpContext.ts';
+
+enum StartTime {
+ Now = 'now',
+ OneWeekAgo = 'one-week-ago',
+ OneWeekFromNow = 'one-week-from-now',
+ TwoWeeksFromNow = 'two-weeks-from-now',
+}
+
+enum EndTime {
+ TwoWeeksFromNow = 'two-weeks-from-now',
+ ThreeWeeksFromNow = 'three-weeks-from-now',
+ FourWeeksFromNow = 'four-weeks-from-now',
+}
+
+enum Interval {
+ Hourly = 'hourly',
+ Daily = 'daily',
+ Weekly = 'weekly',
+}
+
+const TmpStreamingPayments = () => {
+ const { colony } = useColonyContext();
+ const { user } = useAppContext();
+ const { streamingPaymentsAddress, votingReputationAddress } =
+ useEnabledExtensions();
+ const [getStreamingPayments] = useLazyQuery(gql`
+ query ListStreamingPayments {
+ listStreamingPayments {
+ nextToken
+ items {
+ nativeId
+ }
+ }
+ }
+ `);
+ const { annotation } = useTmpContext();
+
+ const { currentBlockTime: blockTime, fetchCurrentBlockTime } =
+ useCurrentBlockTime();
+
+ const [tokenAddress, setTokenAddress] = useState(
+ colony.nativeToken.tokenAddress,
+ );
+ const [decimalAmount, setDecimalAmount] = useState('18');
+ const [transactionAmount, setTransactionAmount] = useState('0');
+ const [endCondition, setEndCondition] = useState(
+ StreamingPaymentEndCondition.FixedTime,
+ );
+ const [selectedStartTime, setSelectedStartTime] = useState(StartTime.Now);
+ const [selectedEndTime, setSelectedEndTime] = useState(
+ EndTime.TwoWeeksFromNow,
+ );
+ const [selectedInterval, setSelectedInterval] = useState(Interval.Hourly);
+ const [limit, setLimit] = useState('0');
+ const [streamingPaymentId, setStreamingPaymentId] = useState('');
+ const [updateStartTime, setUpdateStartTime] = useState(false);
+ const [updateEndTime, setUpdateEndTime] = useState(false);
+ const [updateAmount, setUpdateAmount] = useState(false);
+ const [updateInterval, setUpdateInterval] = useState(false);
+ const [updateEndCondition, setUpdateEndCondition] = useState(false);
+ const [updateLimit, setUpdateLimit] = useState(false);
+
+ const { data, refetch } = useGetStreamingPaymentQuery({
+ variables: {
+ streamingPaymentId: getStreamingPaymentDatabaseId(
+ colony.colonyAddress,
+ Number(streamingPaymentId),
+ ),
+ },
+ skip: Number.isNaN(streamingPaymentId),
+ fetchPolicy: 'network-only',
+ });
+ const streamingPayment = data?.getStreamingPayment;
+
+ const cancel = useAsyncFunction({
+ submit: ActionTypes.STREAMING_PAYMENT_CANCEL,
+ error: ActionTypes.STREAMING_PAYMENT_CANCEL_ERROR,
+ success: ActionTypes.STREAMING_PAYMENT_CANCEL_SUCCESS,
+ });
+ const claim = useAsyncFunction({
+ submit: ActionTypes.STREAMING_PAYMENT_CLAIM,
+ error: ActionTypes.STREAMING_PAYMENT_CLAIM_ERROR,
+ success: ActionTypes.STREAMING_PAYMENT_CLAIM_SUCCESS,
+ });
+ const editStreamingPayment = useAsyncFunction({
+ submit: ActionTypes.STREAMING_PAYMENT_EDIT,
+ error: ActionTypes.STREAMING_PAYMENT_EDIT_ERROR,
+ success: ActionTypes.STREAMING_PAYMENT_EDIT_SUCCESS,
+ });
+ const editStreamingPaymentMotion = useAsyncFunction({
+ submit: ActionTypes.MOTION_STREAMING_PAYMENT_EDIT,
+ error: ActionTypes.MOTION_STREAMING_PAYMENT_EDIT_ERROR,
+ success: ActionTypes.MOTION_STREAMING_PAYMENT_EDIT_SUCCESS,
+ });
+ const cancelMotion = useAsyncFunction({
+ submit: ActionTypes.MOTION_STREAMING_PAYMENT_CANCEL,
+ error: ActionTypes.MOTION_STREAMING_PAYMENT_CANCEL_ERROR,
+ success: ActionTypes.MOTION_STREAMING_PAYMENT_CANCEL_SUCCESS,
+ });
+
+ const { amountAvailableToClaim, amountClaimedToDate } =
+ useStreamingPaymentAmountsLeft(
+ streamingPayment,
+ Math.floor(blockTime ?? Date.now() / 1000),
+ );
+
+ const rootDomain = findDomainByNativeId(Id.RootDomain, colony);
+ if (!rootDomain) {
+ return null;
+ }
+
+ const getStartTime = (startTime: StartTime) => {
+ switch (startTime) {
+ case StartTime.OneWeekAgo: {
+ return BigNumber.from(
+ (blockTime ?? Math.floor(Date.now() / 1000)) - 604800,
+ ).toString();
+ }
+ case StartTime.OneWeekFromNow: {
+ return BigNumber.from(
+ (blockTime ?? Math.floor(Date.now() / 1000)) + 604800,
+ ).toString();
+ }
+ case StartTime.TwoWeeksFromNow: {
+ return BigNumber.from(
+ (blockTime ?? Math.floor(Date.now() / 1000)) + 604800 * 2,
+ ).toString();
+ }
+ case StartTime.Now:
+ default: {
+ return BigNumber.from(
+ blockTime ?? Math.floor(Date.now() / 1000),
+ ).toString();
+ }
+ }
+ };
+
+ const getEndTime = (endTime: EndTime) => {
+ switch (endTime) {
+ case EndTime.FourWeeksFromNow: {
+ return BigNumber.from(
+ (blockTime ?? Math.floor(Date.now() / 1000)) + 604800 * 4,
+ ).toString();
+ }
+ case EndTime.ThreeWeeksFromNow: {
+ return BigNumber.from(
+ (blockTime ?? Math.floor(Date.now() / 1000)) + 604800 * 3,
+ ).toString();
+ }
+ case EndTime.TwoWeeksFromNow:
+ default: {
+ return BigNumber.from(
+ (blockTime ?? Math.floor(Date.now() / 1000)) + 604800 * 2,
+ ).toString();
+ }
+ }
+ };
+
+ const getInterval = (interval: Interval) => {
+ switch (interval) {
+ case Interval.Weekly: {
+ return 3600 * 24 * 7;
+ }
+ case Interval.Daily: {
+ return 3600 * 24;
+ }
+ case Interval.Hourly:
+ default: {
+ return 3600;
+ }
+ }
+ };
+
+ const createStreamingPaymentPayload: CreateStreamingPaymentPayload = {
+ colonyAddress: colony.colonyAddress,
+ createdInDomain: rootDomain,
+ amount: transactionAmount,
+ endCondition,
+ interval: getInterval(selectedInterval),
+ recipientAddress: user?.walletAddress ?? '',
+ startTimestamp: getStartTime(selectedStartTime),
+ tokenAddress,
+ tokenDecimals: parseInt(decimalAmount, 10),
+ endTimestamp: getEndTime(selectedEndTime),
+ limitAmount: limit,
+ annotationMessage: annotation,
+ };
+
+ const handleCancel = async ({
+ shouldWaive,
+ }: Pick
) => {
+ if (!streamingPayment) {
+ return;
+ }
+
+ const payload: CancelStreamingPaymentPayload = {
+ colonyAddress: colony.colonyAddress,
+ streamingPayment,
+ userAddress: user?.walletAddress ?? '',
+ shouldWaive,
+ annotationMessage: annotation,
+ };
+
+ await cancel(payload);
+ };
+
+ const handleClaim = async () => {
+ if (!streamingPayment) {
+ return;
+ }
+
+ const claimPayload: ClaimStreamingPaymentPayload = {
+ colonyAddress: colony.colonyAddress,
+ streamingPaymentsAddress: streamingPaymentsAddress ?? '',
+ streamingPayment,
+ };
+
+ await claim(claimPayload);
+ };
+
+ const handleCancelMotion = async () => {
+ if (!streamingPayment || !votingReputationAddress) {
+ return;
+ }
+
+ const payload: StreamingPaymentsMotionCancelPayload = {
+ colony,
+ motionDomainId: Id.RootDomain,
+ streamingPayment,
+ votingReputationAddress,
+ annotationMessage: annotation,
+ };
+
+ await cancelMotion(payload);
+ };
+
+ const handleGetLatestMotionId = () => {
+ getStreamingPayments({
+ onCompleted: (d) => {
+ if (d) {
+ const latestStreamingPaymentNativeID =
+ d?.listStreamingPayments?.items?.length;
+
+ if (!latestStreamingPaymentNativeID) return;
+
+ setStreamingPaymentId(latestStreamingPaymentNativeID || '');
+ }
+ },
+ });
+ };
+
+ const handleEdit = async () => {
+ if (!streamingPayment || !streamingPaymentsAddress) {
+ return;
+ }
+
+ const fixedPayload: EditStreamingPaymentPayload = {
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ endCondition: StreamingPaymentEndCondition.FixedTime,
+ endTimestamp: updateEndTime ? getEndTime(selectedEndTime) : undefined,
+ };
+
+ const limitPayload: EditStreamingPaymentPayload = {
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ endCondition: StreamingPaymentEndCondition.LimitReached,
+ limitAmount: updateLimit ? limit : undefined,
+ };
+
+ const whenCancelledPayload: EditStreamingPaymentPayload = {
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ endCondition: StreamingPaymentEndCondition.WhenCancelled,
+ };
+
+ const undefinedEndConditionPayload: EditStreamingPaymentPayload = {
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ endTimestamp: updateEndTime ? getEndTime(selectedEndTime) : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ limitAmount: updateLimit ? limit : undefined,
+ };
+
+ let payload: EditStreamingPaymentPayload = undefinedEndConditionPayload;
+
+ if (updateEndCondition) {
+ if (endCondition === StreamingPaymentEndCondition.FixedTime) {
+ payload = fixedPayload;
+ }
+ if (endCondition === StreamingPaymentEndCondition.LimitReached) {
+ payload = limitPayload;
+ }
+ if (endCondition === StreamingPaymentEndCondition.WhenCancelled) {
+ payload = whenCancelledPayload;
+ }
+ }
+
+ await editStreamingPayment(payload);
+ };
+
+ const handleEditMotion = async () => {
+ if (
+ !streamingPayment ||
+ !streamingPaymentsAddress ||
+ !votingReputationAddress
+ ) {
+ return;
+ }
+
+ const fixedPayload: StreamingPaymentsMotionEditPayload = {
+ motionDomainId: Id.RootDomain,
+ votingReputationAddress,
+ annotationMessage: annotation,
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ endCondition: StreamingPaymentEndCondition.FixedTime,
+ endTimestamp: updateEndTime ? getEndTime(selectedEndTime) : undefined,
+ };
+
+ const limitPayload: StreamingPaymentsMotionEditPayload = {
+ motionDomainId: Id.RootDomain,
+ votingReputationAddress,
+ annotationMessage: annotation,
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ endCondition: StreamingPaymentEndCondition.LimitReached,
+ limitAmount: updateLimit ? limit : undefined,
+ };
+
+ const whenCancelledPayload: StreamingPaymentsMotionEditPayload = {
+ motionDomainId: Id.RootDomain,
+ votingReputationAddress,
+ annotationMessage: annotation,
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ endCondition: StreamingPaymentEndCondition.WhenCancelled,
+ };
+
+ const undefinedEndConditionPayload: StreamingPaymentsMotionEditPayload = {
+ motionDomainId: Id.RootDomain,
+ votingReputationAddress,
+ annotationMessage: annotation,
+ colony,
+ streamingPayment,
+ streamingPaymentsAddress,
+ startTimestamp: updateStartTime
+ ? getStartTime(selectedStartTime)
+ : undefined,
+ endTimestamp: updateEndTime ? getEndTime(selectedEndTime) : undefined,
+ amount: updateAmount ? transactionAmount : undefined,
+ interval: updateInterval ? getInterval(selectedInterval) : undefined,
+ limitAmount: updateLimit ? limit : undefined,
+ };
+
+ let payload: StreamingPaymentsMotionEditPayload =
+ undefinedEndConditionPayload;
+
+ if (updateEndCondition) {
+ if (endCondition === StreamingPaymentEndCondition.FixedTime) {
+ payload = fixedPayload;
+ }
+ if (endCondition === StreamingPaymentEndCondition.LimitReached) {
+ payload = limitPayload;
+ }
+ if (endCondition === StreamingPaymentEndCondition.WhenCancelled) {
+ payload = whenCancelledPayload;
+ }
+ }
+
+ await editStreamingPaymentMotion(payload);
+ };
+
+ const createStreamingPaymentMotionPayload: StreamingPaymentsMotionCreatePayload =
+ {
+ ...createStreamingPaymentPayload,
+ motionDomainId: Id.RootDomain,
+ votingReputationAddress: votingReputationAddress ?? '',
+ annotationMessage: annotation,
+ startTimestamp: '0',
+ };
+
+ return (
+
+
+
Streaming Payments
+
+ setTokenAddress(e.currentTarget.value)}
+ value={tokenAddress}
+ label="Token Address"
+ />
+ setDecimalAmount(e.currentTarget.value)}
+ value={decimalAmount}
+ label="Token Decimals"
+ />
+ setTransactionAmount(e.currentTarget.value)}
+ value={transactionAmount}
+ label="Transaction Amount"
+ />
+ setLimit(e.currentTarget.value)}
+ value={limit}
+ label="Limit"
+ disabled={
+ endCondition !== StreamingPaymentEndCondition.LimitReached
+ }
+ />
+
+
+
+
+ setStreamingPaymentId(e.currentTarget.value)}
+ placeholder="Streaming Payment Native ID"
+ />
+
+
+ {streamingPayment && (
+
+
+ Amount claimed to date:{' '}
+
+
+
+
+
+ Available to claim:{' '}
+
+
+
+
+
+ Start time: {streamingPayment.startTime}
+
+
+ End time: {streamingPayment.endTime}
+
+
+ Amount:{' '}
+
+
+
+
+
+ Interval: {streamingPayment.interval}
+
+
+ End Condition: {streamingPayment.metadata?.endCondition}
+
+
+ Limit:{' '}
+
+ {moveDecimal(
+ getStreamingPaymentLimit({ streamingPayment }),
+ -(
+ getSelectedToken(colony, streamingPayment.tokenAddress)
+ ?.decimals || DEFAULT_TOKEN_DECIMALS
+ ),
+ )}
+
+
+
+ )}
+
+
+
+
+
+
+
+ {streamingPayment && (
+
+
+ Update start time
+ setUpdateStartTime(event.target.checked)}
+ />
+
+
+ Update end time (for fixed end condition)
+ setUpdateEndTime(event.target.checked)}
+ />
+
+
+ Update amount
+ setUpdateAmount(event.target.checked)}
+ />
+
+
+ Update interval
+ setUpdateInterval(event.target.checked)}
+ />
+
+
+ Update end condition
+
+ setUpdateEndCondition(event.target.checked)
+ }
+ />
+
+
+ Update limit (for limit reached end condition)
+ setUpdateLimit(event.target.checked)}
+ />
+
+
+
+
+ )}
+
+
+
+
+
+ Common action form fields
+
+
+ setAnnotation(e.currentTarget.value)}
+ value={annotation}
+ label="Annotation"
+ placeholder="Enter a description"
+ />
+
+
+
+ Debug values
+
+
+
Latest Transaction
+ {latestTx && (
+
+ )}
+
+
Hash: {latestTx?.hash ?? 'null'}
+
+ Context: {latestTx?.context ?? 'null'}
+
+
+ Method name: {latestTx?.methodName}
+
+
+
+ {children}
+