🌺 Lens and Hey v3: v35 (#lens-v3)

Summary: Migrated to Lens v3, removing deprecated features and updating configurations. Highlights: • Removed `ReferenceSettings` and `SuperFollow` components, simplifying the publication and account settings. • Updated `Web3Provider.tsx` to use new Lens SDK chains, replacing `lensTestnet` with `chains.testnet`. • Replaced `ChooseHandle` with `ChooseUsername` for user signup, reflecting changes in account creation flow. Read more: https://pierre.co/hey/hey/lens-v3
heyxyz · Dec 6, 2024 · 3d88862 · 3d88862
1 parent d847b96
commit 3d88862
Show file tree

Hide file tree

Showing 34 changed files with 386 additions and 1,279 deletions.
diff --git a/apps/api/src/routes/internal/gardener/report.ts b/apps/api/src/routes/internal/gardener/report.ts
@@ -29,7 +29,7 @@ export const reportPost = async (
         {
           headers: {
             "Content-Type": "application/json",
-            Authorization: `Bearer ${accessToken}`
+            "X-Access-Token": accessToken
           }
         }
       );

diff --git a/apps/api/src/routes/lens/internal/stats/signup-revenue.ts b/apps/api/src/routes/lens/internal/stats/signup-revenue.ts
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -23,7 +23,8 @@
     "@hey/image-cropper": "workspace:*",
     "@hey/indexer": "workspace:*",
     "@hey/ui": "workspace:*",
-    "@lens-protocol/metadata": "^1.2.0",
+    "@lens-network/sdk": "canary",
+    "@lens-protocol/metadata": "next",
     "@livepeer/react": "^4.2.8",
     "@next/bundle-analyzer": "^15.0.2",
     "@radix-ui/react-hover-card": "^1.1.2",

diff --git a/apps/web/src/components/Account/Details.tsx b/apps/web/src/components/Account/Details.tsx
@@ -20,7 +20,7 @@ import getAvatar from "@hey/helpers/getAvatar";
 import getFavicon from "@hey/helpers/getFavicon";
 import getLennyURL from "@hey/helpers/getLennyURL";
 import getMentions from "@hey/helpers/getMentions";
-import type { Account, AccountStats } from "@hey/indexer";
+import type { Account } from "@hey/indexer";
 import { Button, Drawer, H3, Image, LightBox, Tooltip } from "@hey/ui";
 import { useFlag } from "@unleash/proxy-client-react";
 import { useTheme } from "next-themes";
@@ -55,19 +55,16 @@ const MetaDetails = ({
 interface DetailsProps {
   isSuspended: boolean;
   account: Account;
-  stats: AccountStats;
 }
 
-const Details: FC<DetailsProps> = ({ isSuspended = false, account, stats }) => {
+const Details: FC<DetailsProps> = ({ isSuspended = false, account }) => {
   const { push } = useRouter();
   const { currentAccount } = useAccountStore();
   const [expandedImage, setExpandedImage] = useState<null | string>(null);
   const [showPersonalizeModal, setShowPersonalizeModal] = useState(false);
   const isStaff = useFlag(FeatureFlag.Staff);
   const { resolvedTheme } = useTheme();
 
-  const followType = account?.followModule?.type;
-
   return (
     <div className="mb-4 space-y-5 px-5 sm:px-0">
       <div className="-mt-24 sm:-mt-32 relative size-32 sm:size-52">
@@ -117,7 +114,7 @@ const Details: FC<DetailsProps> = ({ isSuspended = false, account, stats }) => {
       ) : null}
       <div className="space-y-5">
         <ScamWarning accountAddress={account.address} />
-        <Followerings account={account} stats={stats} />
+        <Followerings account={account} />
         <div className="flex items-center space-x-2">
           {currentAccount?.address === account.address ? (
             <>
@@ -126,7 +123,7 @@ const Details: FC<DetailsProps> = ({ isSuspended = false, account, stats }) => {
                 onClick={() => push("/settings")}
                 outline
               >
-                Edit Acc
+                Edit Account
               </Button>
               <Button
                 icon={<PaintBrushIcon className="size-5" />}
@@ -136,9 +133,9 @@ const Details: FC<DetailsProps> = ({ isSuspended = false, account, stats }) => {
                 Personalize
               </Button>
             </>
-          ) : followType !== FollowModuleType.RevertFollowModule ? (
+          ) : (
             <FollowUnfollowButton account={account} />
-          ) : null}
+          )}
           <AccountMenu account={account} />
         </div>
         {currentAccount?.address !== account.address ? (

diff --git a/apps/web/src/components/Account/Followerings.tsx b/apps/web/src/components/Account/Followerings.tsx
@@ -2,20 +2,32 @@ import Followers from "@components/Shared/Modal/Followers";
 import Following from "@components/Shared/Modal/Following";
 import getAccount from "@hey/helpers/getAccount";
 import humanize from "@hey/helpers/humanize";
-import type { Account, AccountStats } from "@hey/indexer";
+import { type Account, useAccountStatsQuery } from "@hey/indexer";
 import { H4, Modal } from "@hey/ui";
 import plur from "plur";
 import { type FC, useState } from "react";
 
 interface FolloweringsProps {
   account: Account;
-  stats: AccountStats;
 }
 
-const Followerings: FC<FolloweringsProps> = ({ account, stats }) => {
+const Followerings: FC<FolloweringsProps> = ({ account }) => {
   const [showFollowingModal, setShowFollowingModal] = useState(false);
   const [showFollowersModal, setShowFollowersModal] = useState(false);
-  const { graphFollowStats } = stats;
+
+  const { data, loading } = useAccountStatsQuery({
+    variables: { request: { account: account.address } }
+  });
+
+  if (loading) {
+    return null;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const stats = data.accountStats.graphFollowStats;
 
   return (
     <div className="flex gap-8">
@@ -24,17 +36,17 @@ const Followerings: FC<FolloweringsProps> = ({ account, stats }) => {
         onClick={() => setShowFollowingModal(true)}
         type="button"
       >
-        <H4>{humanize(graphFollowStats?.following)}</H4>
+        <H4>{humanize(stats?.following)}</H4>
         <div className="ld-text-gray-500">Following</div>
       </button>
       <button
         className="text-left outline-offset-4"
         onClick={() => setShowFollowersModal(true)}
         type="button"
       >
-        <H4>{humanize(graphFollowStats?.followers)}</H4>
+        <H4>{humanize(stats?.followers)}</H4>
         <div className="ld-text-gray-500">
-          {plur("Follower", graphFollowStats?.followers)}
+          {plur("Follower", stats?.followers)}
         </div>
       </button>
       <Modal

diff --git a/apps/web/src/components/Account/index.tsx b/apps/web/src/components/Account/index.tsx
@@ -9,11 +9,7 @@ import getAccountDetails, {
   GET_ACCOUNT_DETAILS_QUERY_KEY
 } from "@hey/helpers/api/getAccountDetails";
 import getAccount from "@hey/helpers/getAccount";
-import {
-  type Account,
-  type AccountStats,
-  useFullAccountQuery
-} from "@hey/indexer";
+import { type Account, useAccountQuery } from "@hey/indexer";
 import { EmptyState, GridItemEight, GridItemFour, GridLayout } from "@hey/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useFlag } from "@unleash/proxy-client-react";
@@ -53,15 +49,14 @@ const ViewProfile: NextPage = () => {
     data,
     error,
     loading: profileLoading
-  } = useFullAccountQuery({
+  } = useAccountQuery({
     skip: address ? !address : !username,
     variables: {
-      accountRequest: {
+      request: {
         ...(address
           ? { address }
           : { username: { localName: username as string } })
-      },
-      accountStatsRequest: { account: address }
+      }
     }
   });
 
@@ -112,7 +107,6 @@ const ViewProfile: NextPage = () => {
             <Details
               isSuspended={accountDetails?.isSuspended || false}
               account={account as Account}
-              stats={data?.accountStats as AccountStats}
             />
           )}
         </GridItemFour>

diff --git a/apps/web/src/components/Common/Layout.tsx b/apps/web/src/components/Common/Layout.tsx
@@ -18,7 +18,6 @@ import { useAccountStore } from "src/store/persisted/useAccountStore";
 import { useAccountThemeStore } from "src/store/persisted/useAccountThemeStore";
 import { hydrateAuthTokens, signOut } from "src/store/persisted/useAuthStore";
 import { usePreferencesStore } from "src/store/persisted/usePreferencesStore";
-import { isAddress } from "viem";
 import { useDisconnect } from "wagmi";
 import GlobalModals from "../Shared/GlobalModals";
 import Navbar from "../Shared/Navbar";
@@ -37,8 +36,9 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   const isMounted = useIsClient();
   const { disconnect } = useDisconnect();
 
-  const { id: sessionAccountId } = getCurrentSession();
+  const { address: sessionAccountAddress } = getCurrentSession();
 
+  console.log(sessionAccountAddress);
   const logout = (shouldReload = false) => {
     resetPreferences();
     resetStatus();
@@ -60,7 +60,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
       // }
     },
     onError: () => logout(true),
-    skip: !sessionAccountId || isAddress(sessionAccountId)
+    skip: !sessionAccountAddress
   });
 
   const validateAuthentication = () => {

diff --git a/apps/web/src/components/Common/Providers/Web3Provider.tsx b/apps/web/src/components/Common/Providers/Web3Provider.tsx
@@ -1,9 +1,8 @@
-import { lensTestnet } from "@helpers/chains";
 import { APP_NAME, WALLETCONNECT_PROJECT_ID } from "@hey/data/constants";
 import { LENS_TESTNET_RPCS, POLYGON_RPCS } from "@hey/data/rpcs";
+import { chains } from "@lens-network/sdk/viem";
 import type { FC, ReactNode } from "react";
-import { http, WagmiProvider, createConfig, fallback } from "wagmi";
-import { polygon } from "wagmi/chains";
+import { createConfig, fallback, http, WagmiProvider } from "wagmi";
 import { coinbaseWallet, injected, walletConnect } from "wagmi/connectors";
 
 const connectors = [
@@ -13,11 +12,11 @@ const connectors = [
 ];
 
 const wagmiConfig = createConfig({
-  chains: [polygon, lensTestnet],
+  chains: [chains.testnet, chains.testnet],
   connectors,
   transports: {
-    [polygon.id]: fallback(POLYGON_RPCS.map((rpc) => http(rpc))),
-    [lensTestnet.id]: fallback(LENS_TESTNET_RPCS.map((rpc) => http(rpc)))
+    [chains.testnet.id]: fallback(POLYGON_RPCS.map((rpc) => http(rpc))),
+    [chains.testnet.id]: fallback(LENS_TESTNET_RPCS.map((rpc) => http(rpc)))
   }
 });