OCT-2264: UI support for the GLM giveaways receivers

client/src/api/calls/userWinnings.ts → client/src/api/calls/userSablierStreams.ts

@@ -2,14 +2,16 @@ import env from 'env';
 import apiService from 'services/apiService';
 
 export type Response = {
-  winnings: {
+  sablierStreams: {
     amount: string;
     dateAvailableForWithdrawal: string;
+    isCancelled: boolean;
+    remainingAmount: string;
   }[];
 };
 
-export async function apiGetUserRaffleWinnings(address: string): Promise<Response> {
+export async function apiGetUserSablierStreams(address: string): Promise<Response> {
   return apiService
-    .get(`${env.serverEndpoint}user/${address}/raffle/winnings`)
+    .get(`${env.serverEndpoint}user/${address}/sablier-streams`)
     .then(({ data }) => data);
 }

client/src/api/queryKeys/index.ts

@@ -22,8 +22,8 @@ export const ROOTS: Root = {
   projectsDonors: 'projectsDonors',
   projectsEpoch: 'projectsEpoch',
   projectsIpfsResults: 'projectsIpfsResults',
-  raffleWinnings: 'raffleWinnings',
   rewardsRate: 'rewardsRate',
+  sablierStreams: 'sablierStreams',
   searchResultsDetails: 'searchResultsDetails',
   upcomingBudget: 'upcomingBudget',
   uqScore: 'uqScore',
@@ -75,8 +75,8 @@ export const QUERY_KEYS: QueryKeys = {
   ],
   projectsMetadataAccumulateds: ['projectsMetadataAccumulateds'],
   projectsMetadataPerEpoches: ['projectsMetadataPerEpoches'],
-  raffleWinnings: userAddress => [ROOTS.raffleWinnings, userAddress],
   rewardsRate: epochNumber => [ROOTS.rewardsRate, epochNumber.toString()],
+  sablierStreams: userAddress => [ROOTS.sablierStreams, userAddress],
   searchResults: ['searchResults'],
   searchResultsDetails: (address, epoch) => [ROOTS.searchResultsDetails, address, epoch.toString()],
   syncStatus: ['syncStatus'],

client/src/api/queryKeys/types.ts

@@ -22,8 +22,8 @@ export type Root = {
   projectsDonors: 'projectsDonors';
   projectsEpoch: 'projectsEpoch';
   projectsIpfsResults: 'projectsIpfsResults';
-  raffleWinnings: 'raffleWinnings';
   rewardsRate: 'rewardsRate';
+  sablierStreams: 'sablierStreams';
   searchResultsDetails: 'searchResultsDetails';
   upcomingBudget: 'upcomingBudget';
   uqScore: 'uqScore';
@@ -75,8 +75,8 @@ export type QueryKeys = {
   ) => [Root['projectsIpfsResults'], string, string];
   projectsMetadataAccumulateds: ['projectsMetadataAccumulateds'];
   projectsMetadataPerEpoches: ['projectsMetadataPerEpoches'];
-  raffleWinnings: (userAddress: string) => [Root['raffleWinnings'], string];
   rewardsRate: (epochNumber: number) => [Root['rewardsRate'], string];
+  sablierStreams: (userAddress: string) => [Root['sablierStreams'], string];
   searchResults: ['searchResults'];
   searchResultsDetails: (
     address: string,

client/src/components/Home/HomeGridCurrentGlmLock/HomeGridCurrentGlmLock.tsx

@@ -1,5 +1,5 @@
 import _first from 'lodash/first';
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccount } from 'wagmi';
 
@@ -12,7 +12,7 @@ import useMediaQuery from 'hooks/helpers/useMediaQuery';
 import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
 import useDepositValue from 'hooks/queries/useDepositValue';
 import useEstimatedEffectiveDeposit from 'hooks/queries/useEstimatedEffectiveDeposit';
-import useUserRaffleWinnings from 'hooks/queries/useUserRaffleWinnings';
+import useUserSablierStreams from 'hooks/queries/useUserSablierStreams';
 import useTransactionLocalStore from 'store/transactionLocal/store';
 import getIsPreLaunch from 'utils/getIsPreLaunch';
 
@@ -38,11 +38,22 @@ const HomeGridCurrentGlmLock: FC<HomeGridCurrentGlmLockProps> = ({ className })
   const { data: estimatedEffectiveDeposit, isFetching: isFetchingEstimatedEffectiveDeposit } =
     useEstimatedEffectiveDeposit();
   const { data: depositsValue, isFetching: isFetchingDepositValue } = useDepositValue();
-  const { data: userRaffleWinnings, isFetching: isFetchingUserRaffleWinnings } =
-    useUserRaffleWinnings();
+  const { data: userSablierStreams, isFetching: isFetchinguserSablierStreams } =
+    useUserSablierStreams();
 
   const isPreLaunch = getIsPreLaunch(currentEpoch);
-  const didUserWinAnyRaffles = !!userRaffleWinnings && userRaffleWinnings.sum > 0;
+  const didUserWinAnyRaffles = !!userSablierStreams && userSablierStreams.sum > 0;
+
+  const buttonText = useMemo(() => {
+    if (userSablierStreams && userSablierStreams.sumAvailable > 0n) {
+      return t('editLockedGLM');
+    }
+    if (!depositsValue || (!!depositsValue && depositsValue === 0n)) {
+      return i18n.t('common.lockGlm');
+    }
+    return t('editLockedGLM');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [depositsValue, userSablierStreams?.sumAvailable]);
 
   return (
     <>
@@ -59,12 +70,12 @@ const HomeGridCurrentGlmLock: FC<HomeGridCurrentGlmLockProps> = ({ className })
             dataTest="HomeGridCurrentGlmLock--current"
             isFetching={
               isFetchingDepositValue ||
-              isFetchingUserRaffleWinnings ||
+              isFetchinguserSablierStreams ||
               (isAppWaitingForTransactionToBeIndexed &&
                 _first(transactionsPending)?.type !== 'withdrawal')
             }
             showCryptoSuffix
-            valueCrypto={(depositsValue || 0n) + (userRaffleWinnings?.sum || 0n)}
+            valueCrypto={(depositsValue || 0n) + (userSablierStreams?.sumAvailable || 0n)}
             variant={isMobile ? 'large' : 'extra-large'}
           />
           <div className={styles.divider} />
@@ -104,9 +115,7 @@ const HomeGridCurrentGlmLock: FC<HomeGridCurrentGlmLockProps> = ({ className })
             onClick={() => setIsModalLockGlmOpen(true)}
             variant="cta"
           >
-            {!depositsValue || (!!depositsValue && depositsValue === 0n)
-              ? i18n.t('common.lockGlm')
-              : t('editLockedGLM')}
+            {buttonText}
           </Button>
         </div>
       </GridTile>

client/src/components/Home/HomeGridCurrentGlmLock/ModalLockGlm/LockGlmBudgetBox/LockGlmBudgetBox.module.scss

@@ -36,3 +36,33 @@
     }
   }
 }
+
+.timeLockedInSablier {
+  text-align: left;
+  position: relative;
+}
+
+.tooltipWrapper {
+  left: 1rem;
+  top: -6.8rem;
+
+  .tooltip {
+    position: initial;
+  }
+}
+
+.svgWrapper {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
+.tooltipBox {
+  margin: 0.1rem 0 0 0.4rem;
+}
+
+.unlockInSablierButton {
+  position: absolute;
+  padding: 0;
+  font-size: 1rem;
+  bottom: -1.4rem;
+}

client/src/components/Home/HomeGridCurrentGlmLock/ModalLockGlm/LockGlmBudgetBox/LockGlmBudgetBox.tsx

@@ -1,12 +1,13 @@
 import cx from 'classnames';
-import { format } from 'date-fns';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BoxRounded from 'components/ui/BoxRounded';
+import Button from 'components/ui/Button';
+import { SABLIER_APP_LINK } from 'constants/urls';
 import useAvailableFundsGlm from 'hooks/helpers/useAvailableFundsGlm';
 import useDepositValue from 'hooks/queries/useDepositValue';
-import useUserRaffleWinnings from 'hooks/queries/useUserRaffleWinnings';
+import useUserSablierStreams from 'hooks/queries/useUserSablierStreams';
 import getFormattedGlmValue from 'utils/getFormattedGlmValue';
 
 import AvailableFundsGlm from './AvailableFundsGlm';
@@ -22,41 +23,52 @@ const LockGlmBudgetBox: FC<LockGlmBudgetBoxProps> = ({
   const { data: depositsValue, isFetching: isFetchingDepositValue } = useDepositValue();
   const { data: availableFundsGlm, isFetching: isFetchingAvailableFundsGlm } =
     useAvailableFundsGlm();
-  const { data: userRaffleWinnings, isFetching: isFetchingUserRaffleWinnings } =
-    useUserRaffleWinnings();
+  const { data: userSablierStreams, isFetching: isFetchinguserSablierStreams } =
+    useUserSablierStreams();
 
   const { t } = useTranslation('translation', {
     keyPrefix: 'components.home.homeGridCurrentGlmLock.modalLockGlm.lockGlmBudgetBox',
   });
 
   const depositsValueString = useMemo(
-    () => getFormattedGlmValue({ value: depositsValue || BigInt(0) }).fullString,
-    [depositsValue],
+    () =>
+      getFormattedGlmValue({
+        value:
+          (depositsValue || 0n) +
+          ((currentMode === 'lock' && userSablierStreams?.sumAvailable) || 0n),
+      }).fullString,
+    [depositsValue, currentMode, userSablierStreams?.sumAvailable],
   );
 
   const shouldRaffleWinningsBeDisplayed =
-    currentMode === 'unlock' && userRaffleWinnings && userRaffleWinnings.sum > 0;
-  const areFundsFetching = isFetchingAvailableFundsGlm || isFetchingUserRaffleWinnings;
+    currentMode === 'unlock' && userSablierStreams && userSablierStreams.sum > 0;
+  const areFundsFetching = isFetchingAvailableFundsGlm || isFetchinguserSablierStreams;
 
   const secondRowValue = getFormattedGlmValue({
     value: shouldRaffleWinningsBeDisplayed
-      ? userRaffleWinnings?.sum
+      ? userSablierStreams?.sumAvailable
       : BigInt(availableFundsGlm ? availableFundsGlm!.value : 0),
   }).fullString;
 
   const secondRowLabel = useMemo(() => {
     if (shouldRaffleWinningsBeDisplayed) {
-      const date = format(
-        parseInt(userRaffleWinnings?.winnings[0].dateAvailableForWithdrawal, 10) * 1000,
-        'd LLL y',
+      return (
+        <div className={styles.timeLockedInSablier}>
+          {t('timeLockedInSablier')}
+          <Button
+            className={styles.unlockInSablierButton}
+            href={SABLIER_APP_LINK}
+            isButtonScalingUpOnHover={false}
+            variant="link"
+          >
+            {t('unlockInSablier')}
+          </Button>
+        </div>
       );
-      return userRaffleWinnings?.winnings.length > 1
-        ? t('raffleWinnings.multipleWins')
-        : t('raffleWinnings.oneWin', { date });
     }
     return t('walletBalance');
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldRaffleWinningsBeDisplayed, userRaffleWinnings?.winnings.length]);
+  }, [shouldRaffleWinningsBeDisplayed, userSablierStreams?.sablierStreams.length]);
 
   return (
     <BoxRounded

client/src/components/Home/HomeGridCurrentGlmLock/ModalLockGlm/LockGlmTabs/LockGlmTabs.tsx

@@ -10,7 +10,7 @@ import Button from 'components/ui/Button';
 import ButtonProps from 'components/ui/Button/types';
 import useAvailableFundsGlm from 'hooks/helpers/useAvailableFundsGlm';
 import useDepositValue from 'hooks/queries/useDepositValue';
-import useUserRaffleWinnings from 'hooks/queries/useUserRaffleWinnings';
+import useUserSablierStreams from 'hooks/queries/useUserSablierStreams';
 import { formatUnitsBigInt } from 'utils/formatUnitsBigInt';
 import getFormattedGlmValue from 'utils/getFormattedGlmValue';
 import { parseUnitsBigInt } from 'utils/parseUnitsBigInt';
@@ -39,7 +39,7 @@ const LockGlmTabs: FC<LockGlmTabsProps> = ({
 
   const { data: availableFundsGlm } = useAvailableFundsGlm();
   const { data: depositsValue } = useDepositValue();
-  const { data: userRaffleWinnings } = useUserRaffleWinnings();
+  const { data: userSablierStreams } = useUserSablierStreams();
 
   const isMaxDisabled = isLoading || step > 1;
 
@@ -86,7 +86,7 @@ const LockGlmTabs: FC<LockGlmTabsProps> = ({
 
   const isButtonDisabled =
     !formik.isValid || parseUnitsBigInt(formik.values.valueToDeposeOrWithdraw || '0') === 0n;
-  const didUserWinAnyRaffles = !!userRaffleWinnings && userRaffleWinnings.sum > 0;
+  const didUserWinAnyRaffles = !!userSablierStreams && userSablierStreams.sum > 0;
   const shouldRaffleLabelBeVisible = didUserWinAnyRaffles && currentMode === 'unlock';
 
   return (
@@ -142,7 +142,7 @@ const LockGlmTabs: FC<LockGlmTabsProps> = ({
                   {
                     getFormattedGlmValue({
                       value: shouldRaffleLabelBeVisible
-                        ? userRaffleWinnings?.sum
+                        ? userSablierStreams?.sum
                         : depositsValue || BigInt(0),
                     }).value
                   }

client/src/components/Home/HomeGridCurrentGlmLock/RaffleWinnerBadge/RaffleWinnerBadge.module.scss

@@ -15,6 +15,31 @@ $padding: 1.1rem;
   padding: 0 $padding;
   transition: opacity $transition-time-1;
 
+  &.isSablierStreamCancelled {
+    background: $color-octant-orange5;
+    color: $color-octant-orange;
+
+    .img {
+      path {
+        stroke: $color-octant-orange;
+
+        &:hover {
+          stroke: $color-octant-orange;
+        }
+      }
+    }
+  }
+
+  &:not(.isSablierStreamCancelled) {
+    .tooltipWrapper {
+      &:hover {
+        path {
+          stroke: $color-white !important;
+        }
+      }
+    }
+  }
+
   .img {
     margin-right: $padding;
   }
@@ -28,14 +53,6 @@ $padding: 1.1rem;
   }
 }
 
-.tooltipWrapper {
-  &:hover {
-    path {
-      stroke: $color-white !important;
-    }
-  }
-}
-
 .tooltip {
   white-space: pre-wrap;
   width: 29.2rem !important;