Migrate to Lens v3

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

@@ -1,6 +1,5 @@
 import JoinLeaveButton from "@components/Shared/Group/JoinLeaveButton";
 import Markup from "@components/Shared/Markup";
-import Slug from "@components/Shared/Slug";
 import getMentions from "@hey/helpers/getMentions";
 import humanize from "@hey/helpers/humanize";
 import type { Group, GroupStatsResponse } from "@hey/indexer";
@@ -31,14 +30,7 @@ const Details: FC<DetailsProps> = ({ group, stats }) => {
         />
         <LightBox onClose={() => setExpandedImage(null)} url={expandedImage} />
       </div>
-      <div className="space-y-1 py-2">
-        <H3 className="truncate">{group.metadata?.name}</H3>
-        <Slug
-          className="text-sm sm:text-base"
-          prefix="/"
-          slug={group.metadata?.slug || ""}
-        />
-      </div>
+      <H3 className="truncate py-2">{group.metadata?.name}</H3>
       {group.metadata?.description ? (
         <div className="markup linkify mr-0 break-words text-md sm:mr-10">
           <Markup mentions={getMentions(group.metadata?.description)}>

apps/web/src/components/Group/Shimmer.tsx

@@ -1,15 +1,8 @@
-import AccountListShimmer from "@components/Shared/Shimmer/AccountListShimmer";
 import PostsShimmer from "@components/Shared/Shimmer/PostsShimmer";
-import { Card, GridItemEight, GridItemFour, GridLayout } from "@hey/ui";
+import { GridItemEight, GridItemFour, GridLayout } from "@hey/ui";
 import type { FC } from "react";
 
-interface GroupPageShimmerProps {
-  profileList?: boolean;
-}
-
-const GroupPageShimmer: FC<GroupPageShimmerProps> = ({
-  profileList = false
-}) => {
+const GroupPageShimmer: FC = () => {
   return (
     <>
       <div className="container mx-auto max-w-[1350px]">
@@ -39,13 +32,7 @@ const GroupPageShimmer: FC<GroupPageShimmerProps> = ({
           </div>
         </GridItemFour>
         <GridItemEight>
-          {profileList ? (
-            <Card>
-              <AccountListShimmer />
-            </Card>
-          ) : (
-            <PostsShimmer />
-          )}
+          <PostsShimmer />
         </GridItemEight>
       </GridLayout>
     </>

apps/web/src/components/Group/index.tsx

@@ -13,21 +13,17 @@ import { useRouter } from "next/router";
 import Custom404 from "src/pages/404";
 import Custom500 from "src/pages/500";
 import { useAccountStore } from "src/store/persisted/useAccountStore";
-import Members from "../Shared/Modal/Members";
 import Details from "./Details";
 import GroupFeed from "./GroupFeed";
 import GroupPageShimmer from "./Shimmer";
 
 const ViewGroup: NextPage = () => {
   const {
     isReady,
-    pathname,
     query: { address }
   } = useRouter();
   const { currentAccount } = useAccountStore();
 
-  const showMembers = pathname === "/g/[address]/members";
-
   const { data, loading, error } = useGroupQuery({
     variables: {
       groupRequest: { group: address },
@@ -37,7 +33,7 @@ const ViewGroup: NextPage = () => {
   });
 
   if (!isReady || loading) {
-    return <GroupPageShimmer profileList={showMembers} />;
+    return <GroupPageShimmer />;
   }
 
   if (!data?.group) {
@@ -55,7 +51,7 @@ const ViewGroup: NextPage = () => {
     <>
       <MetaTags
         description={group.metadata?.description || ""}
-        title={`${group.metadata?.name} (/${group.metadata?.slug}) • ${APP_NAME}`}
+        title={`${group.metadata?.name} • ${APP_NAME}`}
       />
       <Cover
         cover={group.metadata?.icon || `${STATIC_IMAGES_URL}/patterns/2.svg`}
@@ -65,14 +61,8 @@ const ViewGroup: NextPage = () => {
           <Details group={group} stats={stats} />
         </GridItemFour>
         <GridItemEight className="space-y-5">
-          {showMembers ? (
-            <Members address={group.address} />
-          ) : (
-            <>
-              {currentAccount && group.isMember && <NewPost />}
-              <GroupFeed address={group.address} />
-            </>
-          )}
+          {currentAccount && group.isMember && <NewPost />}
+          <GroupFeed address={group.address} />
         </GridItemEight>
       </GridLayout>
     </>

apps/web/src/components/Post/PostAccount.tsx

@@ -3,27 +3,24 @@ import Misuse from "@components/Shared/Account/Icons/Misuse";
 import Verified from "@components/Shared/Account/Icons/Verified";
 import formatRelativeOrAbsolute from "@hey/helpers/datetime/formatRelativeOrAbsolute";
 import getAccount from "@hey/helpers/getAccount";
-import type { Account } from "@hey/indexer";
+import type { Account, App } from "@hey/indexer";
 import Link from "next/link";
 import type { FC, ReactNode } from "react";
 import { memo } from "react";
 import AccountPreview from "../Shared/AccountPreview";
 import Slug from "../Shared/Slug";
-import GroupHandle from "./GroupHandle";
 
 interface PostAccountProps {
   account: Account;
   postId: string;
-  source?: string;
-  tags: string[];
+  app?: App;
   timestamp: Date;
 }
 
 const PostAccount: FC<PostAccountProps> = ({
   account,
   postId,
-  source,
-  tags,
+  app,
   timestamp
 }) => {
   const WrappedLink = ({ children }: { children: ReactNode }) => (
@@ -47,7 +44,10 @@ const PostAccount: FC<PostAccountProps> = ({
         <span className="font-semibold">{getAccount(account).name}</span>
       </WrappedLink>
       <WrappedLink>
-        <Slug className="text-sm" slug={getAccount(account).usernameWithPrefix} />
+        <Slug
+          className="text-sm"
+          slug={getAccount(account).usernameWithPrefix}
+        />
       </WrappedLink>
       <Verified address={account.address} iconClassName="size-4" />
       <Misuse address={account.address} iconClassName="size-4" />
@@ -59,8 +59,7 @@ const PostAccount: FC<PostAccountProps> = ({
           </Link>
         </span>
       ) : null}
-      <GroupHandle tags={tags} />
-      <Source publishedOn={source} />
+      {app ? <Source app={app} /> : null}
     </div>
   );
 };

apps/web/src/components/Post/PostHeader.tsx

@@ -35,8 +35,7 @@ const PostHeader: FC<PostHeaderProps> = ({
       <PostAccount
         account={account}
         postId={targetPost.id}
-        source={targetPost.app?.address}
-        tags={targetPost.metadata?.tags || []}
+        app={targetPost.app}
         timestamp={timestamp}
       />
       {!post.isDeleted && !quoted ? (

apps/web/src/components/Post/Source.tsx

@@ -1,15 +1,16 @@
-import { APP_NAME, STATIC_IMAGES_URL } from "@hey/data/constants";
+import { APP_NAME } from "@hey/data/constants";
 import { FeatureFlag } from "@hey/data/feature-flags";
+import type { App } from "@hey/indexer";
 import { useFlag } from "@unleash/proxy-client-react";
 import type { FC } from "react";
 
 interface SourceProps {
-  publishedOn: string | undefined;
+  app: App;
 }
 
-const Source: FC<SourceProps> = ({ publishedOn }) => {
+const Source: FC<SourceProps> = ({ app }) => {
   const enabled = useFlag(FeatureFlag.Staff);
-  const show = publishedOn === APP_NAME.toLowerCase();
+  const show = app.metadata?.name.toLowerCase() === APP_NAME.toLowerCase();
 
   if (!enabled || !show) {
     return null;
@@ -22,7 +23,7 @@ const Source: FC<SourceProps> = ({ publishedOn }) => {
         alt="Logo"
         className="mt-0.5 h-3.5 rounded-sm"
         height={14}
-        src={`${STATIC_IMAGES_URL}/app-icon/0.png`}
+        src={app.metadata?.logo}
       />
     </span>
   );