Merge branch 'main' into pless

apps/web/src/components/Profile/CreatorTool.tsx

@@ -0,0 +1,98 @@
+import type { Profile } from '@hey/lens';
+
+import ToggleWrapper from '@components/Staff/Users/Overview/Tool/ToggleWrapper';
+import {
+  HEY_API_URL,
+  STAFF_PICK_FEATURE_ID,
+  VERIFIED_FEATURE_ID
+} from '@hey/data/constants';
+import { FeatureFlag } from '@hey/data/feature-flags';
+import { CREATORTOOLS } from '@hey/data/tracking';
+import getPreferences from '@hey/lib/api/getPreferences';
+import { Card, Toggle } from '@hey/ui';
+import getAuthApiHeaders from '@lib/getAuthApiHeaders';
+import { Leafwatch } from '@lib/leafwatch';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { type FC, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+
+interface CreatorToolProps {
+  profile: Profile;
+}
+
+const CreatorTool: FC<CreatorToolProps> = ({ profile }) => {
+  const [updating, setUpdating] = useState(false);
+  const [features, setFeatures] = useState<string[]>([]);
+
+  const allowedFeatures = [
+    { id: VERIFIED_FEATURE_ID, key: FeatureFlag.Verified },
+    { id: STAFF_PICK_FEATURE_ID, key: FeatureFlag.StaffPick }
+  ];
+
+  const { data: preferences, isLoading } = useQuery({
+    queryFn: () => getPreferences(profile.id, getAuthApiHeaders()),
+    queryKey: ['fetchPreferences', profile.id || '']
+  });
+
+  useEffect(() => {
+    if (preferences) {
+      setFeatures(preferences.features || []);
+    }
+  }, [preferences]);
+
+  const updateFeatureFlag = (feature: { id: string; key: string }) => {
+    const { id, key } = feature;
+    const enabled = !features.includes(key);
+
+    setUpdating(true);
+    toast.promise(
+      axios.post(
+        `${HEY_API_URL}/internal/features/assign`,
+        { enabled, id, profile_id: profile.id },
+        { headers: getAuthApiHeaders() }
+      ),
+      {
+        error: () => {
+          setUpdating(false);
+          return 'Failed to update flag';
+        },
+        loading: 'Updating the flag...',
+        success: () => {
+          Leafwatch.track(CREATORTOOLS.ASSIGN_FEATURE_FLAG, {
+            feature: key,
+            profile_id: profile.id
+          });
+          setUpdating(false);
+          setFeatures((prev) =>
+            enabled ? [...prev, key] : prev.filter((f) => f !== key)
+          );
+          return 'Flag updated';
+        }
+      }
+    );
+  };
+
+  return (
+    <Card
+      as="aside"
+      className="mb-4 space-y-2.5 border-yellow-400 !bg-yellow-300/20 p-5 text-yellow-600"
+      forceRounded
+    >
+      <div className="font-bold">Creator Tool</div>
+      <div className="space-y-2 pt-2 font-bold">
+        {allowedFeatures.map((feature) => (
+          <ToggleWrapper key={feature.id} title={feature.key}>
+            <Toggle
+              disabled={updating || isLoading}
+              on={features.includes(feature.key)}
+              setOn={() => updateFeatureFlag(feature)}
+            />
+          </ToggleWrapper>
+        ))}
+      </div>
+    </Card>
+  );
+};
+
+export default CreatorTool;

apps/web/src/components/Profile/Details.tsx

@@ -19,6 +19,7 @@ import {
   ExclamationCircleIcon
 } from '@heroicons/react/24/solid';
 import { EXPANDED_AVATAR, STATIC_IMAGES_URL } from '@hey/data/constants';
+import { FeatureFlag } from '@hey/data/feature-flags';
 import { FollowModuleType } from '@hey/lens';
 import formatDate from '@hey/lib/datetime/formatDate';
 import getAvatar from '@hey/lib/getAvatar';
@@ -30,6 +31,7 @@ import getProfile from '@hey/lib/getProfile';
 import getProfileAttribute from '@hey/lib/getProfileAttribute';
 import hasMisused from '@hey/lib/hasMisused';
 import { Button, Image, LightBox, Modal, Tooltip } from '@hey/ui';
+import isFeatureAvailable from '@lib/isFeatureAvailable';
 import isVerified from '@lib/isVerified';
 import { useTheme } from 'next-themes';
 import Link from 'next/link';
@@ -39,6 +41,7 @@ import useProfileStore from 'src/store/persisted/useProfileStore';
 import urlcat from 'urlcat';
 
 import Badges from './Badges';
+import CreatorTool from './CreatorTool';
 import Followerings from './Followerings';
 import GardenerTool from './GardenerTool';
 import InvitedBy from './InvitedBy';
@@ -299,6 +302,9 @@ const Details: FC<DetailsProps> = ({ profile }) => {
         onchainIdentity={profile.onchainIdentity}
       />
       {gardenerMode && <GardenerTool profile={profile} />}
+      {isFeatureAvailable(FeatureFlag.Staff) && (
+        <CreatorTool profile={profile} />
+      )}
     </div>
   );
 };

apps/web/src/components/Shared/UserProfile.tsx

@@ -12,6 +12,7 @@ import getLennyURL from '@hey/lib/getLennyURL';
 import getMentions from '@hey/lib/getMentions';
 import getProfile from '@hey/lib/getProfile';
 import hasMisused from '@hey/lib/hasMisused';
+import humanize from '@hey/lib/humanize';
 import { Image } from '@hey/ui';
 import cn from '@hey/ui/cn';
 import isVerified from '@lib/isVerified';
@@ -30,6 +31,7 @@ interface UserProfileProps {
   profile: Profile;
   showBio?: boolean;
   showFollow?: boolean;
+  showId?: boolean;
   showUnfollow?: boolean;
   showUserPreview?: boolean;
   source?: string;
@@ -42,6 +44,7 @@ const UserProfile: FC<UserProfileProps> = ({
   profile,
   showBio = false,
   showFollow = false,
+  showId = false,
   showUnfollow = false,
   showUserPreview = true,
   source,
@@ -89,6 +92,12 @@ const UserProfile: FC<UserProfileProps> = ({
             </span>
           </span>
         ) : null}
+        {showId && (
+          <span className="ld-text-gray-500">
+            <span className="mx-1.5">·</span>
+            <span className="text-xs">{humanize(parseInt(profile.id))}</span>
+          </span>
+        )}
       </div>
     </>
   );

apps/web/src/components/Staff/Users/List.tsx

@@ -12,7 +12,16 @@ import {
   useExploreProfilesQuery
 } from '@hey/lens';
 import getProfile from '@hey/lib/getProfile';
-import { Button, Card, EmptyState, ErrorMessage, Modal, Select } from '@hey/ui';
+import {
+  Button,
+  Card,
+  EmptyState,
+  ErrorMessage,
+  Modal,
+  Select,
+  Toggle,
+  Tooltip
+} from '@hey/ui';
 import cn from '@hey/ui/cn';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
@@ -28,6 +37,7 @@ const List: FC = () => {
     ExploreProfilesOrderByType.LatestCreated
   );
   const [value, setValue] = useState('');
+  const [autoRefresh, setAutoRefresh] = useState(false);
   const [refetching, setRefetching] = useState(false);
   const [showPublicationsModal, setShowPublicationsModal] = useState(false);
   const [selectedProfile, setSelectedProfile] = useState<null | Profile>(null);
@@ -39,6 +49,7 @@ const List: FC = () => {
   };
 
   const { data, error, fetchMore, loading, refetch } = useExploreProfilesQuery({
+    pollInterval: autoRefresh ? 3000 : 0,
     variables: { request }
   });
 
@@ -96,6 +107,9 @@ const List: FC = () => {
             className={cn(refetching && 'animate-spin', 'size-5')}
           />
         </button>
+        <Tooltip content="Auto refresh" placement="top">
+          <Toggle on={autoRefresh} setOn={() => setAutoRefresh(!autoRefresh)} />
+        </Tooltip>
       </div>
       <div className="divider" />
       <div className="p-5">
@@ -133,6 +147,7 @@ const List: FC = () => {
                       linkToProfile={false}
                       profile={profile as Profile}
                       showBio={false}
+                      showId
                       showUserPreview={false}
                       timestamp={profile.createdAt}
                     />

packages/data/constants.ts

@@ -40,7 +40,7 @@ export const TEST_WALLET_ADDRESS = '0xb9C6e304545386E95d5c4ab183EE97A13555A49d';
 export const TEST_PK =
   '0x8b33302ca865bc1ed65bc02b71dd02067bd3dae3da2f8bb0d95b16509e9ac71e';
 export const TEST_LENS_ID = '0x0383';
-export const HEY_CURATED_ID = '0x020d2a';
+export const HEY_CURATED_ID = '0x0214f6';
 export const ZERO_PUBLICATION_ID = '0x00-0x00';
 export const HANDLE_PREFIX = IS_MAINNET ? 'lens/' : 'test/';
 export const SIGNUP_PRICE = IS_MAINNET ? 8 : 1;
@@ -81,3 +81,7 @@ export const ATTACHMENT = 'tr:w-500';
 export const S3_BUCKET = {
   HEY_MEDIA: 'hey-media'
 };
+
+// Feature Flags
+export const VERIFIED_FEATURE_ID = 'a0d6d247-50ef-419f-a045-54fa96054922';
+export const STAFF_PICK_FEATURE_ID = '73d2f48d-0291-4a36-adc2-9737057ad2b7';

packages/data/feature-flags.ts

@@ -4,5 +4,7 @@ export enum FeatureFlag {
   GardenerMode = 'gardener-mode',
   Staff = 'staff',
   StaffMode = 'staff-mode',
-  Suspended = 'suspended'
+  StaffPick = 'staff-pick',
+  Suspended = 'suspended',
+  Verified = 'verified'
 }

packages/data/tracking.ts

@@ -191,6 +191,10 @@ export const STAFFTOOLS = {
   }
 };
 
+export const CREATORTOOLS = {
+  ASSIGN_FEATURE_FLAG: 'Creator Tool: Assign feature flag'
+};
+
 export const SYSTEM = {
   SWITCH_NETWORK: 'Switch network',
   SWITCH_THEME: 'Switch theme'