feat: gbp tip (#4813)

heyxyz · Apr 15, 2024 · be7a011 · be7a011 · vercel · Apr 15, 2024
2 parents 9e71e29 + e74f8e4
commit be7a011
Show file tree

Hide file tree

Showing 38 changed files with 614 additions and 510 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -57,6 +57,7 @@
     "lexical": "^0.14.3",
     "next": "^14.2.1",
     "next-themes": "^0.3.0",
+    "party-js": "^2.2.0",
     "plur": "^5.1.0",
     "plyr-react": "^5.3.0",
     "rc-slider": "^10.5.0",

diff --git a/apps/web/src/components/Bookmarks/Feed.tsx b/apps/web/src/components/Bookmarks/Feed.tsx
@@ -13,6 +13,7 @@ import { Card, EmptyState, ErrorMessage } from '@hey/ui';
 import { type FC, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { useImpressionsStore } from 'src/store/non-persisted/useImpressionsStore';
+import { useTipsStore } from 'src/store/non-persisted/useTipsStore';
 
 let virtuosoState: any = { ranges: [], screenTop: 0 };
 
@@ -22,6 +23,7 @@ interface FeedProps {
 
 const Feed: FC<FeedProps> = ({ focus }) => {
   const { fetchAndStoreViews } = useImpressionsStore();
+  const { fetchAndStoreTips } = useTipsStore();
   const virtuoso = useRef<VirtuosoHandle>(null);
 
   // Variables
@@ -37,6 +39,7 @@ const Feed: FC<FeedProps> = ({ focus }) => {
           return p.__typename === 'Mirror' ? p.mirrorOn?.id : p.id;
         }) || [];
       await fetchAndStoreViews(ids);
+      await fetchAndStoreTips(ids);
     },
     variables: { request }
   });
@@ -66,6 +69,7 @@ const Feed: FC<FeedProps> = ({ focus }) => {
         return p.__typename === 'Mirror' ? p.mirrorOn?.id : p.id;
       }) || [];
     await fetchAndStoreViews(ids);
+    await fetchAndStoreTips(ids);
   };
 
   if (loading) {

diff --git a/apps/web/src/components/Comment/Feed.tsx b/apps/web/src/components/Comment/Feed.tsx
@@ -17,6 +17,7 @@ import { OptmisticPublicationType } from '@hey/types/enums';
 import { Card, EmptyState, ErrorMessage } from '@hey/ui';
 import { Virtuoso } from 'react-virtuoso';
 import { useImpressionsStore } from 'src/store/non-persisted/useImpressionsStore';
+import { useTipsStore } from 'src/store/non-persisted/useTipsStore';
 import { useTransactionStore } from 'src/store/persisted/useTransactionStore';
 
 interface FeedProps {
@@ -28,6 +29,7 @@ const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
   const { txnQueue } = useTransactionStore();
   const { showHiddenComments } = useHiddenCommentFeedStore();
   const { fetchAndStoreViews } = useImpressionsStore();
+  const { fetchAndStoreTips } = useTipsStore();
 
   // Variables
   const request: PublicationsRequest = {
@@ -48,6 +50,7 @@ const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
     onCompleted: async ({ publications }) => {
       const ids = publications?.items?.map((p) => p.id) || [];
       await fetchAndStoreViews(ids);
+      await fetchAndStoreTips(ids);
     },
     skip: !publicationId,
     variables: { request }
@@ -79,6 +82,7 @@ const Feed: FC<FeedProps> = ({ isHidden, publicationId }) => {
     });
     const ids = data?.publications?.items?.map((p) => p.id) || [];
     await fetchAndStoreViews(ids);
+    await fetchAndStoreTips(ids);
   };
 
   if (loading) {

diff --git a/apps/web/src/components/Comment/NoneRelevantFeed.tsx b/apps/web/src/components/Comment/NoneRelevantFeed.tsx
@@ -16,6 +16,7 @@ import { Card, StackedAvatars } from '@hey/ui';
 import { useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { useImpressionsStore } from 'src/store/non-persisted/useImpressionsStore';
+import { useTipsStore } from 'src/store/non-persisted/useTipsStore';
 
 interface NoneRelevantFeedProps {
   publicationId: string;
@@ -25,6 +26,7 @@ const NoneRelevantFeed: FC<NoneRelevantFeedProps> = ({ publicationId }) => {
   const { showHiddenComments } = useHiddenCommentFeedStore();
   const [showMore, setShowMore] = useState(false);
   const { fetchAndStoreViews } = useImpressionsStore();
+  const { fetchAndStoreTips } = useTipsStore();
 
   // Variables
   const request: PublicationsRequest = {
@@ -45,6 +47,7 @@ const NoneRelevantFeed: FC<NoneRelevantFeedProps> = ({ publicationId }) => {
     onCompleted: async ({ publications }) => {
       const ids = publications?.items?.map((p) => p.id) || [];
       await fetchAndStoreViews(ids);
+      await fetchAndStoreTips(ids);
     },
     skip: !publicationId,
     variables: { request }
@@ -65,6 +68,7 @@ const NoneRelevantFeed: FC<NoneRelevantFeedProps> = ({ publicationId }) => {
     });
     const ids = data?.publications?.items?.map((p) => p.id) || [];
     await fetchAndStoreViews(ids);
+    await fetchAndStoreTips(ids);
   };
 
   if (totalComments === 0) {

diff --git a/apps/web/src/components/Common/Providers/PreferencesProvider.tsx b/apps/web/src/components/Common/Providers/PreferencesProvider.tsx
@@ -29,45 +29,40 @@ const PreferencesProvider: FC = () => {
   // Fetch preferences
   const fetchPreferences = async () => {
     try {
-      if (Boolean(sessionProfileId)) {
-        const preferences = await getPreferences(
-          sessionProfileId,
-          getAuthApiHeaders()
-        );
+      const preferences = await getPreferences(
+        sessionProfileId,
+        getAuthApiHeaders()
+      );
 
-        // Profile preferences
-        setHighSignalNotificationFilter(
-          preferences.highSignalNotificationFilter
-        );
-        setIsPride(preferences.isPride);
+      // Profile preferences
+      setHighSignalNotificationFilter(preferences.highSignalNotificationFilter);
+      setIsPride(preferences.isPride);
 
-        // Email preferences
-        setEmail(preferences.email);
-        setEmailVerified(preferences.emailVerified);
+      // Email preferences
+      setEmail(preferences.email);
+      setEmailVerified(preferences.emailVerified);
 
-        // Feature flags
-        setFeatureFlags(preferences.features);
-        setStaffMode(preferences.features.includes(FeatureFlag.StaffMode));
-        setGardenerMode(
-          preferences?.features.includes(FeatureFlag.GardenerMode)
-        );
-        setRestriction({
-          isFlagged: preferences.features.includes(FeatureFlag.Flagged),
-          isSuspended: preferences.features.includes(FeatureFlag.Suspended)
-        });
+      // Feature flags
+      setFeatureFlags(preferences.features);
+      setStaffMode(preferences.features.includes(FeatureFlag.StaffMode));
+      setGardenerMode(preferences?.features.includes(FeatureFlag.GardenerMode));
+      setRestriction({
+        isFlagged: preferences.features.includes(FeatureFlag.Flagged),
+        isSuspended: preferences.features.includes(FeatureFlag.Suspended)
+      });
 
-        // Membership NFT
-        setHasDismissedOrMintedMembershipNft(
-          preferences.hasDismissedOrMintedMembershipNft
-        );
-      }
+      // Membership NFT
+      setHasDismissedOrMintedMembershipNft(
+        preferences.hasDismissedOrMintedMembershipNft
+      );
       return true;
     } catch {
       return false;
     }
   };
 
   useQuery({
+    enabled: Boolean(sessionProfileId),
     queryFn: fetchPreferences,
     queryKey: ['fetchPreferences', sessionProfileId || '']
   });

diff --git a/apps/web/src/components/Common/Providers/TipsProvider.tsx b/apps/web/src/components/Common/Providers/TipsProvider.tsx
@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { TIP_API_URL } from '@hey/data/constants';
+import getCurrentSession from '@lib/getCurrentSession';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { useTipsStore } from 'src/store/non-persisted/useTipsStore';
+
+const TipsProvider: FC = () => {
+  const { id: sessionProfileId } = getCurrentSession();
+  const { setAllowance, setAllowanceResetsAt } = useTipsStore();
+
+  const fetchTipsAllowance = async () => {
+    try {
+      const response = await axios.get(`${TIP_API_URL}/profile`, {
+        params: { profileId: sessionProfileId }
+      });
+      const { data } = response;
+      setAllowance(data?.allowance || null);
+      setAllowanceResetsAt(new Date(data?.resetAt * 1000));
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  useQuery({
+    enabled: Boolean(sessionProfileId),
+    queryFn: fetchTipsAllowance,
+    queryKey: ['fetchTipsAllowance', sessionProfileId || '']
+  });
+
+  return null;
+};
+
+export default TipsProvider;
diff --git a/apps/web/src/components/Common/Providers/index.tsx b/apps/web/src/components/Common/Providers/index.tsx
@@ -20,6 +20,7 @@ import LensSubscriptionsProvider from './LensSubscriptionsProvider';
 import OptimisticTransactionsProvider from './OptimisticTransactionsProvider';
 import PreferencesProvider from './PreferencesProvider';
 import ServiceWorkerProvider from './ServiceWorkerProvider';
+import TipsProvider from './TipsProvider';
 import Web3Provider from './Web3Provider';
 
 const lensApolloClient = apolloClient(authLink);
@@ -42,6 +43,7 @@ const Providers = ({ children }: { children: ReactNode }) => {
           <OptimisticTransactionsProvider />
           <QueryClientProvider client={queryClient}>
             <PreferencesProvider />
+            <TipsProvider />
             <LivepeerConfig client={livepeerClient} theme={getLivepeerTheme}>
               <ThemeProvider attribute="class" defaultTheme="light">
                 <Layout>{children}</Layout>

diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/Config/Tip.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/Config/Tip.tsx
diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionsConfig.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionsConfig.tsx
@@ -4,17 +4,11 @@ import { OpenAction } from '@hey/data/enums';
 import { useOpenActionStore } from 'src/store/non-persisted/publication/useOpenActionStore';
 
 import SwapConfig from './Config/Swap';
-import TipConfig from './Config/Tip';
 
 const OpenActionsConfig: FC = () => {
   const { selectedOpenAction } = useOpenActionStore();
 
-  return (
-    <div>
-      {selectedOpenAction === OpenAction.Tip && <TipConfig />}
-      {selectedOpenAction === OpenAction.Swap && <SwapConfig />}
-    </div>
-  );
+  return <div>{selectedOpenAction === OpenAction.Swap && <SwapConfig />}</div>;
 };
 
 export default OpenActionsConfig;
diff --git a/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionsList.tsx b/apps/web/src/components/Composer/Actions/OpenActionSettings/OpenActionsList.tsx
@@ -2,7 +2,6 @@ import type { FC } from 'react';
 
 import { BanknotesIcon } from '@heroicons/react/24/outline';
 import { OpenAction } from '@hey/data/enums';
-import { TipIcon } from '@hey/icons';
 import {
   ScreenType,
   useOpenActionStore
@@ -24,12 +23,6 @@ const OpenActionsList: FC = () => {
           title="Token Swap"
           type={OpenAction.Swap}
         />
-        <OpenActionItem
-          description="Add ability to tip"
-          icon={<TipIcon className="size-6" />}
-          title="Tipping"
-          type={OpenAction.Tip}
-        />
       </div>
       <SaveOrCancel
         onSave={() => setShowModal(false)}