hicommonwealth · salman-neslit · May 12, 2025 · May 13, 2025 · May 13, 2025 · May 13, 2025
@@ -40,6 +40,7 @@ const featureFlags = {
   trustLevel: buildFlag(process.env.FLAG_TRUST_LEVEL),
   tokenizedThreads: buildFlag(process.env.FLAG_TOKENIZED_THREADS),
   partnershipWallet: buildFlag(process.env.FLAG_PARTNERSHIP_WALLET),
+  newProfilePage: buildFlag(process.env.FLAG_NEW_PROFILE_PAGE),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;

@@ -0,0 +1,7 @@
+@import '../../../../../../styles/mixins/colors.module';
+
+.CommunityStake {
+  .green-500 {
+    color: $green-500;
+  }
+}
@@ -0,0 +1,52 @@
+import React, { useRef } from 'react';
+
+import { ExtendedCommunity } from '@hicommonwealth/schemas';
+import { useCommunityCardPrice } from 'client/scripts/hooks/useCommunityCardPrice';
+import { useGetCommunityByIdQuery } from 'client/scripts/state/api/communities';
+import { CWText } from 'client/scripts/views/components/component_kit/cw_text';
+import { useFetchTokenUsdRateQuery } from 'state/api/communityStake/index';
+import { trpc } from 'utils/trpcClient';
+import { z } from 'zod';
+import './CommunityStake.scss';
+
+interface CommunityStakeProps {
+  communityId: string;
+}
+
+export const CommunityStake = ({ communityId }: CommunityStakeProps) => {
+  const { data: community } = useGetCommunityByIdQuery({
+    id: communityId,
+    includeNodeInfo: true,
+  });
+
+  const { data: ethUsdRateData } = useFetchTokenUsdRateQuery({
+    tokenSymbol: 'ETH',
+  });
+  const ethUsdRate = ethUsdRateData?.data?.data?.amount;
+
+  const oneDayAgo = useRef(new Date().getTime() - 24 * 60 * 60 * 1000);
+
+  const { data: historicalPrices } =
+    trpc.community.getStakeHistoricalPrice.useQuery({
+      past_date_epoch: oneDayAgo.current / 1000,
+    });
+
+  const { stakeValue } = useCommunityCardPrice({
+    community: community as z.infer<typeof ExtendedCommunity>,
+    // @ts-expect-error <StrictNullChecks/>
+    ethUsdRate,
+    stakeId: 2,
+    // @ts-expect-error <StrictNullChecks/>
+    historicalPrice: historicalPrices,
+  });
+
+  return (
+    <div className="CommunityStake">
+      {stakeValue && (
+        <CWText type="b1" className="green-500">
+          {stakeValue} ETH
+        </CWText>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,4 @@
+@import '../../../../../styles/shared.scss';
+.CommunityTab {
+  padding: 0px;
+}
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import useUserStore from 'state/ui/user';
+import { CWText } from '../../../component_kit/cw_text';
+import { CWTable } from '../../../component_kit/new_designs/CWTable';
+import { CommunityStake } from './CommunityStake/CommunityStake';
+import './CommunityTab.scss';
+import { LastActive } from './LastActive/LastActive';
+import { Role } from './Role/Role';
+
+export const CommunityTab = () => {
+  const user = useUserStore();
+
+  const columns = [
+    {
+      key: 'name',
+      header: 'Community',
+      numeric: false,
+      sortable: true,
+    },
+    {
+      key: 'role',
+      header: 'Role',
+      numeric: false,
+      sortable: true,
+    },
+    {
+      key: 'stake',
+      header: 'Stake',
+      numeric: true,
+      sortable: true,
+    },
+    {
+      key: 'lastActive',
+      header: 'Last Active',
+      numeric: false,
+      sortable: true,
+    },
+  ];
+
+  const rowData = user.communities.map((community) => ({
+    name: community.name,
+    stake: <CommunityStake communityId={community.id} />,
+    role: <Role communityId={community.id} />,
+    lastActive: <LastActive communityId={community.id} />,
+    avatars: {
+      name: {
+        avatarUrl: community.iconUrl,
+        address: null,
+      },
+    },
+  }));
+
+  return (
+    <div className="CommunityTab">
+      {user.communities.length > 0 ? (
+        <CWTable columnInfo={columns} rowData={rowData} />
+      ) : (
+        <CWText>No communities found</CWText>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,23 @@
+import React from 'react';
+import { trpc } from 'utils/trpcClient';
+import { CWText } from '../../../../component_kit/cw_text';
+
+interface LastActiveProps {
+  communityId: string;
+}
+
+export const LastActive = ({ communityId }: LastActiveProps) => {
+  const { data: memberData } = trpc.community.getMembers.useQuery({
+    community_id: communityId,
+    limit: 1,
+    order_by: 'last_active',
+    include_roles: true,
+  });
+
+  const lastActive = memberData?.results?.[0]?.last_active;
+  const formattedDate = lastActive
+    ? new Date(lastActive).toLocaleDateString()
+    : '-';
+
+  return <CWText>{formattedDate}</CWText>;
+};
@@ -0,0 +1,23 @@
+import React from 'react';
+import { trpc } from 'utils/trpcClient';
+import { CWText } from '../../../../component_kit/cw_text';
+
+interface RoleProps {
+  communityId: string;
+}
+
+export const Role = ({ communityId }: RoleProps) => {
+  const { data: memberData } = trpc.community.getMembers.useQuery({
+    community_id: communityId,
+    limit: 1,
+    include_roles: true,
+  });
+
+  const role = memberData?.results?.[0]?.addresses?.[0]?.role || 'member';
+
+  return (
+    <CWText type="b1" className="neutral-500">
+      {role}
+    </CWText>
+  );
+};
@@ -0,0 +1,3 @@
+import { CommunityTab } from './CommunityTab';
+
+export default CommunityTab;
@@ -73,6 +73,9 @@
     &.removePadding {
       padding: 0 !important;
     }
+    &.communityPadding {
+      padding: 0 12px !important;
+    }
     .ThreadCard {
       padding-left: 0px !important;
       padding-right: 0px !important;

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 
 import './ProfileActivity.scss';
 
+import { useFlag } from 'client/scripts/hooks/useFlag';
 import { mapProfileThread } from 'client/scripts/utils/mapProfileThread';
 import clsx from 'clsx';
 import type Comment from 'models/Comment';
 import type Thread from 'models/Thread';
 import type { IUniqueId } from 'models/interfaces';
+import useUserStore from 'state/ui/user';
 import { CWTab, CWTabsRow } from '../../component_kit/new_designs/CWTabs';
 import ProfileActivityContent, {
   ProfileActivityType,
@@ -22,9 +24,12 @@ type ProfileActivityProps = {
 };
 
 const ProfileActivity = ({ comments, threads }: ProfileActivityProps) => {
+  const newProfilePageEnabled = useFlag('newProfilePage');
+
   const [selectedActivity, setSelectedActivity] = useState(
     ProfileActivityType.Comments,
   );
+  const user = useUserStore();
 
   return (
     <div className="ProfileActivity">
@@ -56,6 +61,20 @@ const ProfileActivity = ({ comments, threads }: ProfileActivityProps) => {
             }}
             isSelected={selectedActivity === ProfileActivityType.MyTokens}
           />
+          {newProfilePageEnabled && (
+            <CWTab
+              label={
+                <div className="tab-header">
+                  Communities
+                  <div className="count">{user.communities.length}</div>
+                </div>
+              }
+              onClick={() => {
+                setSelectedActivity(ProfileActivityType.Communities);
+              }}
+              isSelected={selectedActivity === ProfileActivityType.Communities}
+            />
+          )}
         </CWTabsRow>
       </div>
       <div
@@ -65,6 +84,9 @@ const ProfileActivity = ({ comments, threads }: ProfileActivityProps) => {
             selectedActivity === ProfileActivityType.Threads
             ? 'removePadding'
             : '',
+          selectedActivity === ProfileActivityType.Communities
+            ? 'communityPadding'
+            : '',
         )}
       >
         <ProfileActivityContent

@@ -1,9 +1,8 @@
-import React from 'react';
-
-import './../Profile.scss';
-
 import Thread from 'models/Thread';
+import React from 'react';
 import { CWText } from '../../component_kit/cw_text';
+import './../Profile.scss';
+import CommunityTab from './CommunityTab';
 import type { CommentWithAssociatedThread } from './ProfileActivity';
 import ProfileActivityRow from './ProfileActivityRow';
 import { ProfileThread } from './ProfileThread/ProfileThread';
@@ -61,6 +60,10 @@ const ProfileActivityContent = ({
     return <TransactionsTab transactionsType="tokens" />;
   }
 
+  if (option === ProfileActivityType.Communities) {
+    return <CommunityTab />;
+  }
+
   const allActivities: Array<CommentWithAssociatedThread | Thread> = [
     ...comments,
     ...threads,

@@ -63,6 +63,9 @@ export default defineConfig(({ mode }) => {
     'process.env.FLAG_PARTNERSHIP_WALLET': JSON.stringify(
       env.FLAG_PARTNERSHIP_WALLET,
     ),
+    'process.env.FLAG_NEW_PROFILE_PAGE': JSON.stringify(
+      env.FLAG_NEW_PROFILE_PAGE,
+    ),
   };
 
   const config = {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { CommunityTab } from './CommunityTab';

		export default CommunityTab;