feat: add tba support

apps/web/src/components/Common/Providers/TbaStatusProvider.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+
+import getTbaStatus from '@hey/lib/api/getTbaStatus';
+import { useQuery } from '@tanstack/react-query';
+import useProfileStore from 'src/store/persisted/useProfileStore';
+import { useTbaStatusStore } from 'src/store/persisted/useTbaStatusStore';
+
+const TbaStatusProvider: FC = () => {
+  const currentProfile = useProfileStore((state) => state.currentProfile);
+  const setIsTba = useTbaStatusStore((state) => state.setIsTba);
+
+  useQuery({
+    queryFn: () =>
+      getTbaStatus(currentProfile?.ownedBy.address, (deployed) =>
+        setIsTba(deployed)
+      ),
+    queryKey: ['getTbaStatus', currentProfile?.ownedBy.address]
+  });
+
+  return null;
+};
+
+export default TbaStatusProvider;

apps/web/src/components/Common/Providers/index.tsx

@@ -18,6 +18,7 @@ import LeafwatchProvider from './LeafwatchProvider';
 import LensSubscriptionsProvider from './LensSubscriptionsProvider';
 import PreferencesProvider from './PreferencesProvider';
 import ServiceWorkerProvider from './ServiceWorkerProvider';
+import TbaStatusProvider from './TbaStatusProvider';
 import Web3Provider from './Web3Provider';
 
 const lensApolloClient = apolloClient(authLink);
@@ -38,6 +39,7 @@ const Providers = ({ children }: { children: ReactNode }) => {
           <LensSubscriptionsProvider />
           <QueryClientProvider client={queryClient}>
             <PreferencesProvider />
+            <TbaStatusProvider />
             <FeaturedGroupsProvider />
             <LivepeerConfig client={livepeerClient} theme={getLivepeerTheme}>
               <ThemeProvider attribute="class" defaultTheme="light">

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

@@ -49,6 +49,7 @@ import ProfileMenu from './Menu';
 import MutualFollowers from './MutualFollowers';
 import MutualFollowersList from './MutualFollowers/List';
 import ScamWarning from './ScamWarning';
+import TbaBadge from './TbaBadge';
 
 interface DetailsProps {
   profile: Profile;
@@ -103,6 +104,7 @@ const Details: FC<DetailsProps> = ({ profile }) => {
               <CheckBadgeIcon className="text-brand-500 h-6 w-6" />
             </Tooltip>
           ) : null}
+          <TbaBadge profile={profile} />
           {hasMisused(profile.id) ? (
             <Tooltip content={misuseDetails?.type}>
               <ExclamationCircleIcon className="h-6 w-6 text-red-500" />

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

@@ -0,0 +1,41 @@
+import type { Profile } from '@hey/lens';
+import type { FC } from 'react';
+
+import { STATIC_IMAGES_URL } from '@hey/data/constants';
+import getTbaStatus from '@hey/lib/api/getTbaStatus';
+import { Tooltip } from '@hey/ui';
+import isFeatureEnabled from '@lib/isFeatureEnabled';
+import { useQuery } from '@tanstack/react-query';
+
+interface TbaBadgeProps {
+  profile: Profile;
+}
+
+const TbaBadge: FC<TbaBadgeProps> = ({ profile }) => {
+  const { data: isTba } = useQuery({
+    queryFn: () => getTbaStatus(profile.ownedBy.address),
+    queryKey: ['getTbaStatus', profile.ownedBy.address]
+  });
+
+  if (!isTba) {
+    return null;
+  }
+
+  if (!isFeatureEnabled('tba')) {
+    return null;
+  }
+
+  return (
+    <Tooltip content="Token Bounded Account">
+      <img
+        alt="Token Bounded Account"
+        className="h-6 w-6"
+        height={24}
+        src={`${STATIC_IMAGES_URL}/brands/tba.svg`}
+        width={24}
+      />
+    </Tooltip>
+  );
+};
+
+export default TbaBadge;

apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx

@@ -19,6 +19,7 @@ import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { useNonceStore } from 'src/store/non-persisted/useNonceStore';
 import useProfileStore from 'src/store/persisted/useProfileStore';
+import { hydrateTbaStatus } from 'src/store/persisted/useTbaStatusStore';
 import { useContractWrite, useSignTypedData } from 'wagmi';
 
 interface ToggleLensManagerProps {
@@ -36,6 +37,8 @@ const ToggleLensManager: FC<ToggleLensManagerProps> = ({
     (state) => state.setLensHubOnchainSigNonce
   );
   const [isLoading, setIsLoading] = useState(false);
+
+  const { isTba } = hydrateTbaStatus();
   const { canBroadcast, canUseSignless } =
     checkDispatcherPermissions(currentProfile);
 
@@ -94,7 +97,7 @@ const ToggleLensManager: FC<ToggleLensManagerProps> = ({
           switchToGivenConfig
         ];
 
-        if (canBroadcast) {
+        if (!isTba && canBroadcast) {
           const { data } = await broadcastOnchain({
             variables: { request: { id, signature } }
           });

apps/web/src/components/Settings/Manager/ProfileManager/AddProfileManager.tsx

@@ -21,6 +21,7 @@ import toast from 'react-hot-toast';
 import useHandleWrongNetwork from 'src/hooks/useHandleWrongNetwork';
 import { useNonceStore } from 'src/store/non-persisted/useNonceStore';
 import useProfileStore from 'src/store/persisted/useProfileStore';
+import { hydrateTbaStatus } from 'src/store/persisted/useTbaStatusStore';
 import { isAddress } from 'viem';
 import { useContractWrite, useSignTypedData } from 'wagmi';
 
@@ -42,6 +43,8 @@ const AddProfileManager: FC<AddProfileManagerProps> = ({
   const [isLoading, setIsLoading] = useState(false);
 
   const handleWrongNetwork = useHandleWrongNetwork();
+
+  const { isTba } = hydrateTbaStatus();
   const { canBroadcast } = checkDispatcherPermissions(currentProfile);
 
   const onCompleted = (__typename?: 'RelayError' | 'RelaySuccess') => {
@@ -99,7 +102,7 @@ const AddProfileManager: FC<AddProfileManagerProps> = ({
           switchToGivenConfig
         ];
 
-        if (canBroadcast) {
+        if (!isTba && canBroadcast) {
           const signature = await signTypedDataAsync(getSignature(typedData));
           const { data } = await broadcastOnchain({
             variables: { request: { id, signature } }

apps/web/src/store/persisted/useAuthStore.ts

@@ -43,7 +43,8 @@ export const useAuthStore = create(
           (value) =>
             value !== IndexDB.AlgorithmStore &&
             value !== IndexDB.VerifiedMembersStore &&
-            value !== IndexDB.FeaturedGroupsStore
+            value !== IndexDB.FeaturedGroupsStore &&
+            value !== IndexDB.TBAStore
         );
         await delMany(allIndexedDBStores);
       }

apps/web/src/store/persisted/useTbaStatusStore.ts

@@ -0,0 +1,30 @@
+import { IndexDB } from '@hey/data/storage';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import createIdbStorage from '../lib/createIdbStorage';
+
+interface TbaStatusState {
+  hydrateTbaStatus: () => { isTba: boolean };
+  isTba: boolean;
+  setIsTba: (isTba: boolean) => void;
+}
+
+export const useTbaStatusStore = create(
+  persist<TbaStatusState>(
+    (set, get) => ({
+      hydrateTbaStatus: () => {
+        return { isTba: get().isTba };
+      },
+      isTba: false,
+      setIsTba: (isTba) => set(() => ({ isTba }))
+    }),
+    {
+      name: IndexDB.TBAStore,
+      storage: createIdbStorage()
+    }
+  )
+);
+
+export const hydrateTbaStatus = () =>
+  useTbaStatusStore.getState().hydrateTbaStatus();

packages/data/storage.ts

@@ -13,5 +13,6 @@ export const IndexDB = {
   FeaturedGroupsStore: 'featuredgroups.store',
   FeatureFlagsStore: 'featureflags.store',
   ProfileStore: 'profile.store',
+  TBAStore: 'tba.store',
   VerifiedMembersStore: 'verifiedmembers.store'
 };

packages/lib/api/getTbaStatus.ts

@@ -0,0 +1,31 @@
+import { HEY_API_URL } from '@hey/data/constants';
+import axios from 'axios';
+
+/**
+ * Get TBA status of an address
+ * @param address address
+ * @param callbackFn callback function
+ * @returns TBA status
+ */
+const getTbaStatus = async (
+  address: string,
+  callbackFn?: (deployed: boolean) => void
+): Promise<boolean> => {
+  if (!address) {
+    return false;
+  }
+
+  try {
+    const response = await axios.get(`${HEY_API_URL}/tba/deployed`, {
+      params: { address }
+    });
+    const { data } = response;
+    callbackFn?.(data?.deployed || false);
+
+    return data?.deployed || false;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default getTbaStatus;