feat: user hub updated with streams

Author: joanna-pagepro

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

@@ -10,8 +10,9 @@ import Select from '~v5/common/Fields/Select/index.ts';
 import TitleLabel from '~v5/shared/TitleLabel/index.ts';
 
 import { tabList } from './consts.ts';
-import BalanceTab from './partials/BalanceTab/index.ts';
+import BalanceTab from './partials/BalanceTab/BalanceTab.tsx';
 import CryptoToFiatTab from './partials/CryptoToFiatTab/CryptoToFiatTab.tsx';
+import ReputationTab from './partials/ReputationTab/ReputationTab.tsx';
 import StakesTab from './partials/StakesTab/index.ts';
 import TransactionsTab from './partials/TransactionsTab/index.ts';
 import { UserHubTab } from './types.ts';
@@ -70,7 +71,7 @@ const UserHub: FC<Props> = ({ initialOpenTab = UserHubTab.Balance }) => {
         'sm:min-h-[27.75rem]': selectedTab === UserHubTab.Balance,
       })}
     >
-      <div className="sticky left-0 right-0 top-0 flex shrink-0 flex-col justify-between border-b border-b-gray-200 bg-base-white px-6 pb-6 pt-4 sm:static sm:left-auto sm:right-auto sm:top-auto sm:w-[216px] sm:border-b-0 sm:border-r sm:border-gray-100 sm:bg-transparent sm:p-6 sm:px-6">
+      <div className="sticky left-0 right-0 top-0 flex shrink-0 flex-col justify-between border-b border-b-gray-200 bg-base-white px-6 pb-6 pt-4 sm:static sm:left-auto sm:right-auto sm:top-auto sm:w-[13.5rem] sm:border-b-0 sm:border-r sm:border-gray-100 sm:bg-transparent sm:p-6 sm:px-6">
         {isMobile ? (
           <Select
             options={filteredTabList}
@@ -126,10 +127,11 @@ const UserHub: FC<Props> = ({ initialOpenTab = UserHubTab.Balance }) => {
           </>
         )}
       </div>
-      <div className="relative h-full w-full min-w-0 overflow-y-auto">
+      <div className="relative h-full w-full">
         {selectedTab === UserHubTab.Balance && (
           <BalanceTab onTabChange={handleTabChange} />
         )}
+        {selectedTab === UserHubTab.Reputation && <ReputationTab />}
         {selectedTab === UserHubTab.Stakes && <StakesTab />}
         {selectedTab === UserHubTab.Transactions && (
           <TransactionsTab appearance={{ interactive: true }} />

src/components/common/Extensions/UserHub/consts.ts

@@ -3,6 +3,7 @@ import {
   Receipt,
   Invoice,
   CreditCard,
+  Star,
 } from '@phosphor-icons/react';
 import { defineMessages } from 'react-intl';
 
@@ -16,6 +17,10 @@ export const menuMessages = defineMessages({
     id: 'UserSubmenu.balance',
     defaultMessage: 'Balance',
   },
+  reputation: {
+    id: 'UserSubmenu.reputation',
+    defaultMessage: 'Reputation',
+  },
   stakes: {
     id: 'UserSubmenu.stakes',
     defaultMessage: 'Stakes',
@@ -37,6 +42,12 @@ export const tabList: UserHubTabList = [
     value: UserHubTab.Balance,
     icon: Invoice,
   },
+  {
+    id: UserHubTab.Reputation,
+    label: formatText(menuMessages.reputation),
+    value: UserHubTab.Reputation,
+    icon: Star,
+  },
   {
     id: UserHubTab.Stakes,
     label: formatText(menuMessages.stakes),

src/components/common/Extensions/UserHub/partials/BalanceTab/BalanceTab.styles.ts

@@ -1,52 +1,53 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
+import React, { type FC } from 'react';
+import { defineMessages } from 'react-intl';
 
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
+import { formatText } from '~utils/intl.ts';
 
-import Balance from './partials/Balance.tsx';
-import PendingReputation from './partials/PendingReputation/index.ts';
-import TotalReputation from './partials/TotalReputation.tsx';
+import BalanceInfoRow from './partials/BalanceInfoRow/BalanceInfoRow.tsx';
+import StreamsInfoRow from './partials/StreamsInfoRow/StreamsInfoRow.tsx';
 import { type BalanceTabProps } from './types.ts';
 
 const displayName = 'common.Extensions.UserHub.partials.BalanceTab';
 
-const BalanceTab = ({ onTabChange }: BalanceTabProps) => {
-  const { formatMessage } = useIntl();
-  const {
-    colony: { colonyAddress, nativeToken },
-  } = useColonyContext();
+const MSG = defineMessages({
+  title: {
+    id: `${displayName}.title`,
+    defaultMessage: 'Your overview in {colonyName}',
+  },
+  titleColonyOverview: {
+    id: `${displayName}.titleColonyOverview`,
+    defaultMessage: 'Your overview',
+  },
+});
+
+const BalanceTab: FC<BalanceTabProps> = ({ onTabChange }) => {
+  const { colony } = useColonyContext();
+  const { metadata, nativeToken } = colony;
+  const { displayName: colonyDisplayName = '' } = metadata || {};
+
   const { wallet } = useAppContext();
 
   if (!wallet) {
     return null;
   }
 
-  // @TODO: handle empty state <EmptyContent />
   return (
     <div className="p-6">
-      <p className="mb-6 heading-5 md:mb-4">
-        {formatMessage({ id: 'userHub.reputation' })}
-      </p>
-      <Balance
+      <h5 className="mb-6 heading-5 sm:mb-4">
+        {formatText(MSG.title, { colonyName: colonyDisplayName })}
+      </h5>
+      <BalanceInfoRow
         nativeToken={nativeToken}
         wallet={wallet}
         onTabChange={onTabChange}
+        className="mb-6 border-b border-gray-200 pb-6"
       />
-      <TotalReputation
-        colonyAddress={colonyAddress}
-        wallet={wallet}
-        nativeToken={nativeToken}
-      />
-      <PendingReputation
-        colonyAddress={colonyAddress}
-        wallet={wallet}
-        nativeToken={nativeToken}
-      />
+      <StreamsInfoRow />
     </div>
   );
 };
 
 BalanceTab.displayName = displayName;
-
 export default BalanceTab;

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

@@ -0,0 +1,84 @@
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { type FC, useEffect } from 'react';
+
+import { currencySymbolMap } from '~constants/currency.ts';
+import { useCurrencyContext } from '~context/CurrencyContext/CurrencyContext.ts';
+
+import { type AvailableToClaimCounterProps } from './types.ts';
+
+const AvailableToClaimCounter: FC<AvailableToClaimCounterProps> = ({
+  amountAvailableToClaim,
+  getTotalFunds,
+  isAtLeastOnePaymentActive,
+  ratePerSecond,
+}) => {
+  const { currency } = useCurrencyContext();
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      getTotalFunds();
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [getTotalFunds]);
+
+  const decimalPlaces = ratePerSecond.toString().split('.')[1]?.length || 0;
+  const fixedDecimalPlaces = decimalPlaces < 5 ? decimalPlaces : 5;
+
+  const formattedNumber = Number(
+    amountAvailableToClaim.toFixed(fixedDecimalPlaces),
+  ).toLocaleString(undefined, {
+    minimumFractionDigits: fixedDecimalPlaces,
+    maximumFractionDigits: fixedDecimalPlaces,
+  });
+
+  const digits = formattedNumber.split('').map((char, index) => ({
+    char,
+    key: `${char}-${index}`,
+    isStatic: char === ',' || char === '.', // Handle commas as static
+  }));
+
+  return isAtLeastOnePaymentActive ? (
+    <div className="flex items-center justify-end gap-[0.5ch]">
+      <span>{currencySymbolMap[currency]}</span>
+      <div className="flex items-center justify-center overflow-hidden">
+        {digits.map(({ char, key, isStatic }) => (
+          <div
+            key={key}
+            className={clsx('relative inline-block overflow-hidden', {
+              'w-[1ch]': !isStatic,
+            })}
+          >
+            {isStatic ? (
+              <div className="flex w-full items-center justify-center">
+                {char}
+              </div>
+            ) : (
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={char}
+                  initial={{ y: 50, opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  exit={{ y: -50, opacity: 0 }}
+                  className="flex w-full items-center justify-center"
+                >
+                  {char}
+                </motion.div>
+              </AnimatePresence>
+            )}
+          </div>
+        ))}
+      </div>
+      <span>{currency}</span>
+    </div>
+  ) : (
+    <span>
+      {currencySymbolMap[currency]} {formattedNumber} {currency}
+    </span>
+  );
+};
+
+export default AvailableToClaimCounter;

src/components/common/Extensions/UserHub/partials/BalanceTab/index.ts

@@ -0,0 +1,6 @@
+export interface AvailableToClaimCounterProps {
+  amountAvailableToClaim: number;
+  getTotalFunds: () => Promise<void>;
+  isAtLeastOnePaymentActive?: boolean;
+  ratePerSecond: number;
+}