feat: user hub updated with streams #3018

joanna-pagepro · 2024-08-28T08:07:31Z

Description

User hub updates that are related to the streams

Unfortunately, I couldn't test the claim functionality because there was an error stating that some permissions were missing.

Testing

Step 1. Make sure that you have streaming payments extension installed
Step 2. Create streaming payments using different options for end condition, start time and interval using a form from action sidebar or from the temporary one that you can find on the dashboard page
Step 3. Open user hub and check Balance tab and reputation tab

Diffs

New stuff ✨

Streams section inside BalanceTab
AvailableToClaimCounter

Changes 🏗

BalanceTab
ReputationTab

Deletions ⚰️

Removed redundant components like Balance.tsx because there's a new structure in user hub now

TODO

Contributes to #3016

iamsamgibbs

Nice work on this so far! I've left a few comments.

The UI looks good and I can see the number ticking up here:

Screen.Recording.2024-09-04.at.09.53.46.mov

This is probably a personal preference thing, but the numbers all jumping into place when opening the balance tab is a bit distracting and might be better to just be static when it loads and only animate on update:

Screen.Recording.2024-09-04.at.09.55.02.mov

Reputation tab also looks good:

On mobile I wasn't sure if these buttons should be stacked or not, it seems like the figma mobile design might need updating as there are a few differences.

Figma:

One thing I wanted to check as it isn't clear from this PR or the original issue - is the 'total claimed' and 'available to claim' supposed to be for specifically within that colony? The "Your overview in Wayne Enterprises" to me suggests it should be for just this colony.

Currently it shows the same value in any colony and is fetching streaming payments for all colonies I believe - see the comment I left regarding this.

I am also experiencing the permissions issue with claiming payments which makes this hard to test fully.

src/components/common/Extensions/UserHub/UserHub.tsx

...nts/common/Extensions/UserHub/partials/BalanceTab/partials/StreamsInfoRow/StreamsInfoRow.tsx

iamsamgibbs · 2024-09-04T09:00:02Z

src/components/common/Extensions/UserHub/partials/ReputationTab/ReputationTab.tsx

+    return null;
+  }
+
+  // @TODO: handle empty state <EmptyContent />


Is this TODO out of scope for this PR?

...nts/common/Extensions/UserHub/partials/BalanceTab/partials/BalanceInfoRow/BalanceInfoRow.tsx

iamsamgibbs · 2024-09-04T10:25:40Z

...nts/common/Extensions/UserHub/partials/BalanceTab/partials/StreamsInfoRow/StreamsInfoRow.tsx

+      const { totalAvailable, totalClaimed } = await calculateTotalsFromStreams(
+        {
+          streamingPayments: items,
+          currentTimestamp: Math.floor(blockTime ?? Date.now() / 1000),
+          currency,
+          colony,
+        },
+      );


I'm not sure this works as it assumes all streaming payments are from the current colony. It seems like the useGetStreamingPaymentsQuery gets all the streaming payments for that user from every colony, so we should instead group the streaming payments by colony before passing them to this function - or something like that, there may be a better way to do it.

joanna-pagepro · 2024-09-05T09:50:12Z

@iamsamgibbs thanks for your review!
I've updated everything and added a filter to get streaming payments for the current colony. I've also added a few more todo comments because those imports will be needed when part of the code will be uncommented.

iamsamgibbs

Nice work! Thank you for making those changes and adding the comment re imports.

Tested with a streaming payment in planex:

And without in Wayne:

jakubcolony

Thanks for your PR @joanna-pagepro, I left some code comments for you to look at.

I was not able to test the UI using action form as it's still affected by the bug raised in #2938 regarding wrong units the start/end time is set in, but using the testing UI I can confirm the amounts look correct, and they update every second:

Screen.Recording.2024-09-17.at.11.00.45.mov

jakubcolony · 2024-09-17T08:59:09Z

src/graphql/queries/streamingPayments.graphql

+  listStreamingPayments(
+    filter: {
+      recipientAddress: { eq: $recipientAddress }
+      id: { beginsWith: $colonyId }
+    }
+  ) {
+    items {
+      ...StreamingPayment
+    }
+  }


Can you rebase and change this query to getStreamingPaymentsByColony?

The query needs to be paginated since it's likely a colony will have many streams, please have a look at how nextToken pagination is implemented elsewhere

jakubcolony · 2024-09-17T09:03:57Z

src/utils/streamingPayments.ts

+  }
+};
+
+export const getStatus = ({


Suggested change

export const getStatus = ({

export const getStreamingPaymentStatus = ({

jakubcolony · 2024-09-17T09:13:11Z

src/components/common/Extensions/UserHub/partials/BalanceTab/partials/StreamsInfoRow/utils.ts

+  }
+
+  const balanceInWeiToEth = new Decimal(amount).div(
+    10 ** getTokenDecimalsWithFallback(decimals, nativeToken?.decimals),


native token decimals shouldn't be used as fallback here

jakubcolony · 2024-09-17T09:17:32Z

src/utils/streamingPayments.ts

+  return startTimeValue.lt(currentTimestamp);
+};
+
+export const checkIfEnded = ({


Suggested change

export const checkIfEnded = ({

export const checkIfStreamingPaymentEnded = ({

jakubcolony · 2024-09-17T09:17:46Z

src/utils/streamingPayments.ts

+  };
+};
+
+export const checkIfStarted = ({


Please keep the names streaming payment specific as it's hard to follow if outside this file

jakubcolony · 2024-09-17T09:25:04Z

src/types/streamingPayments.ts

+  Active = 'Active',
+  Cancelled = 'Cancelled',
+  NotStarted = 'Not started',
+  Ended = 'Ended',
+  LimitReached = 'Limit reached',


Can you make the values match the keys? E.g. NotStarted = 'NotStarted'. This is so that people don't accidentally use it as labels instead of i18n messages.

jakubcolony · 2024-09-17T09:26:51Z

...nts/common/Extensions/UserHub/partials/BalanceTab/partials/StreamsInfoRow/StreamsInfoRow.tsx

+        await calculateTotalsFromStreams({
+          streamingPayments: items,
+          currentTimestamp: Math.floor(blockTime ?? Date.now() / 1000),
+          currency,
+          colony,
+        });


Feels like this could be a hook that manages its own state and data fetching, instead of the component having to call it inside useEffect and then put the results into state.

I moved this code to a separate hooks.ts file for better readability.
Can you explain more? I'm not sure what you'd like me to do here.

That's exactly what I meant, thank you

jakubcolony · 2024-09-17T09:27:38Z

...nts/common/Extensions/UserHub/partials/BalanceTab/partials/StreamsInfoRow/StreamsInfoRow.tsx

+
+  const getTotalFunds = useCallback(
+    async (items: StreamingPaymentItems) => {
+      const { totalAvailable, totalClaimed, isActive } =


I think isActive lacks context, it's not clear what it refers to based on the method.

jakubcolony · 2024-09-17T09:28:47Z

...ons/UserHub/partials/BalanceTab/partials/AvailableToClaimCounter/AvailableToClaimCounter.tsx

+const AvailableToClaimCounter: FC<AvailableToClaimCounterProps> = ({
+  amountAvailableToClaim,
+  getTotalFunds,
+  isActive,


as below, can it specify what is active? (at least one stream presumably?)

joanna-pagepro · 2024-09-18T09:44:57Z

@jakubcolony code updated. Please also check my question regarding the hook that you've suggested.

arrenv

Thank you @joanna-pagepro for your work and your patience. Nice work, I have noticed a couple of things.

After creating a streaming payment, the UI did not update, I had to reload the app. Can we have it update without requiring an upload.
The value does not appear to be aligned correctly on my end.
I am not able to test completely as the claim is not working for me. I am getting a permissions error.

jakubcolony

Code-wise all looks good, nice work. I can confirm I'm getting the same issues Arren reported, I was only able to claim by manually assigning permissions.

joanna-pagepro · 2024-09-19T07:03:57Z

@jakubcolony I think that there's a problem when installing the extension because the enable action is not called if there are no initializationParams and if I understand it correctly, the extension is installed without correct permissions. Can you help me with this one?

iamsamgibbs · 2024-09-19T07:35:47Z

Ah, seems like this is likely related to #3027 (I'm assuming it made it's way onto a parent branch somewhere further up the chain) - looks like I mistakenly assumed having no initializationParams meant it shouldn't be automatically enabled. Should be an easy fix to just check for neededColonyPermissions and still make the setUserRoles transaction even if there is no initialise step. I'll put up a fix for this today.

joanna-pagepro · 2024-09-19T08:07:34Z

@arrenv can you check 1. and 2. again?

iamsamgibbs · 2024-09-19T11:17:35Z

Actually on further inspection, the changes in #3027 don't appear to be on this branch, so won't be the cause of any issues here. Apologies for any confusion! (And on even further inspection, #3027 will make the setUserRoles transaction even if there are no initializationParams, so long as enabledAutomaticallyAfterInstall is true)

joanna-pagepro self-assigned this Aug 28, 2024

joanna-pagepro force-pushed the feat/16038847-streaming-hub branch from 02346fd to 8b37a8d Compare August 28, 2024 08:08

AdrianDudko linked an issue Aug 28, 2024 that may be closed by this pull request

Streams balance in Userhub #3016

Open

joanna-pagepro force-pushed the feat/streaming-payments-ui branch 2 times, most recently from 0c19e06 to af8a4f5 Compare August 30, 2024 10:43

joanna-pagepro force-pushed the feat/16038847-streaming-hub branch 3 times, most recently from 0f90696 to 4256eb6 Compare September 3, 2024 12:13

joanna-pagepro marked this pull request as ready for review September 3, 2024 12:29

joanna-pagepro requested review from a team as code owners September 3, 2024 12:29

iamsamgibbs requested changes Sep 4, 2024

View reviewed changes

joanna-pagepro force-pushed the feat/16038847-streaming-hub branch from 4256eb6 to 8f3cbe2 Compare September 5, 2024 09:48

joanna-pagepro requested a review from iamsamgibbs September 5, 2024 09:50

iamsamgibbs approved these changes Sep 5, 2024

View reviewed changes

jakubcolony requested changes Sep 17, 2024

View reviewed changes

joanna-pagepro force-pushed the feat/16038847-streaming-hub branch 2 times, most recently from 8bcdc01 to 56c18b2 Compare September 18, 2024 09:42

joanna-pagepro requested a review from jakubcolony September 18, 2024 09:44

arrenv requested changes Sep 18, 2024

View reviewed changes

jakubcolony approved these changes Sep 18, 2024

View reviewed changes

feat: user hub updated with streams

1b74096

joanna-pagepro force-pushed the feat/16038847-streaming-hub branch from 56c18b2 to 1b74096 Compare September 19, 2024 08:06

joanna-pagepro requested a review from arrenv September 19, 2024 08:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: user hub updated with streams #3018

feat: user hub updated with streams #3018

joanna-pagepro commented Aug 28, 2024 •

edited

Loading

iamsamgibbs left a comment •

edited

Loading

iamsamgibbs Sep 4, 2024

iamsamgibbs Sep 4, 2024

joanna-pagepro commented Sep 5, 2024

iamsamgibbs left a comment

jakubcolony left a comment

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

joanna-pagepro Sep 18, 2024

jakubcolony Sep 18, 2024

jakubcolony Sep 17, 2024

jakubcolony Sep 17, 2024

joanna-pagepro commented Sep 18, 2024

arrenv left a comment

jakubcolony left a comment

joanna-pagepro commented Sep 19, 2024

iamsamgibbs commented Sep 19, 2024

joanna-pagepro commented Sep 19, 2024

iamsamgibbs commented Sep 19, 2024 •

edited

Loading

	export const getStatus = ({
	export const getStreamingPaymentStatus = ({

	export const checkIfEnded = ({
	export const checkIfStreamingPaymentEnded = ({

feat: user hub updated with streams #3018

Are you sure you want to change the base?

feat: user hub updated with streams #3018

Conversation

joanna-pagepro commented Aug 28, 2024 • edited Loading

Description

Testing

Diffs

TODO

iamsamgibbs left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joanna-pagepro commented Sep 5, 2024

iamsamgibbs left a comment

Choose a reason for hiding this comment

jakubcolony left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joanna-pagepro commented Sep 18, 2024

arrenv left a comment

Choose a reason for hiding this comment

jakubcolony left a comment

Choose a reason for hiding this comment

joanna-pagepro commented Sep 19, 2024

iamsamgibbs commented Sep 19, 2024

joanna-pagepro commented Sep 19, 2024

iamsamgibbs commented Sep 19, 2024 • edited Loading

joanna-pagepro commented Aug 28, 2024 •

edited

Loading

iamsamgibbs left a comment •

edited

Loading

iamsamgibbs commented Sep 19, 2024 •

edited

Loading