feat: members page

package.json

@@ -190,6 +190,7 @@
     "@tiptap/react": "^2.0.4",
     "@tiptap/starter-kit": "^2.0.4",
     "@types/pica": "^9.0.1",
+    "@types/react-select": "^5.0.1",
     "@web3-onboard/common": "^2.2.3",
     "@web3-onboard/core": "^2.8.5",
     "@web3-onboard/injected-wallets": "^2.2.4",
@@ -244,6 +245,7 @@
     "react-responsive-masonry": "^2.1.7",
     "react-router-dom": "^6.4.2",
     "react-scrollbars-custom": "^4.1.1",
+    "react-select": "^5.8.0",
     "react-tabs": "^5.1.0",
     "react-tabs-scrollable": "^2.0.0-alpha",
     "react-textarea-autosize": "^8.3.4",

src/components/common/ColonyActionsTable/partials/MeatballMenuCopyItem/MeatballMenuCopyItem.tsx

@@ -9,7 +9,7 @@ import { MeatballMenuCopyItemProps } from './types';
 const MeatballMenuCopyItem: FC<
   PropsWithChildren<MeatballMenuCopyItemProps>
 > = ({ textToCopy, className, children, onClick }) => {
-  const { handleClipboardCopy, isCopied } = useCopyToClipboard(textToCopy);
+  const { handleClipboardCopy, isCopied } = useCopyToClipboard();
 
   return (
     <Tooltip
@@ -22,7 +22,7 @@ const MeatballMenuCopyItem: FC<
         className={className}
         onClick={() => {
           onClick?.();
-          handleClipboardCopy();
+          handleClipboardCopy(textToCopy);
         }}
       >
         {children}

src/components/common/Extensions/NotificationBanner/CopyUrl.tsx

@@ -1,17 +1,18 @@
 import React, { FC } from 'react';
 
-import { CopyUrlProps } from './types';
 import { useCopyToClipboard } from '~hooks/useCopyToClipboard';
 
+import { CopyUrlProps } from './types';
+
 const displayName = 'common.Extensions.CopyUrl';
 
 const CopyUrl: FC<CopyUrlProps> = ({ actionText }) => {
-  const { handleClipboardCopy } = useCopyToClipboard(actionText);
+  const { handleClipboardCopy } = useCopyToClipboard();
 
   return (
     <button
-      onClick={() => handleClipboardCopy()}
-      onKeyPress={() => handleClipboardCopy}
+      onClick={() => handleClipboardCopy(actionText)}
+      onKeyPress={() => handleClipboardCopy(actionText)}
       type="button"
     >
       {actionText}

src/components/common/Extensions/SpecificSidePanel/partials/ContractAddress.tsx

@@ -1,18 +1,17 @@
 import React, { FC } from 'react';
-import { useIntl } from 'react-intl';
+
 import { useCopyToClipboard } from '~hooks/useCopyToClipboard';
 import Tooltip from '~shared/Extensions/Tooltip';
+import { formatText } from '~utils/intl';
+import { splitWalletAddress } from '~utils/splitWalletAddress';
+
 import styles from '../SpecificSidePanel.module.css';
 import { PanelTypeProps } from '../types';
-import { splitWalletAddress } from '~utils/splitWalletAddress';
 
 const displayName = 'common.Extensions.partials.ContractAddress';
 
 const ContractAddress: FC<PanelTypeProps> = ({ title, description }) => {
-  const { isCopied, handleClipboardCopy } = useCopyToClipboard(
-    description || '',
-  );
-  const { formatMessage } = useIntl();
+  const { isCopied, handleClipboardCopy } = useCopyToClipboard();
 
   return (
     <div className={styles.panelRow}>
@@ -23,15 +22,15 @@ const ContractAddress: FC<PanelTypeProps> = ({ title, description }) => {
           isSuccess={isCopied}
           tooltipContent={
             <a className="block" href={description}>
-              {formatMessage({ id: isCopied ? 'copied' : 'copy.address' })}
+              {formatText({ id: isCopied ? 'copied' : 'copy.address' })}
             </a>
           }
         >
           <button
             type="button"
-            aria-label={formatMessage({ id: 'copy.address' })}
+            aria-label={formatText({ id: 'copy.address' })}
             className="font-normal text-md justify-start text-ellipsis overflow-hidden"
-            onClick={() => handleClipboardCopy()}
+            onClick={() => handleClipboardCopy(description || '')}
           >
             {splitWalletAddress(description)}
           </button>

src/components/common/Extensions/UserHub/UserHubMobile.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { useMobile } from '~hooks';
 
 import Select from '~v5/common/Fields/Select';
-import { UserHubMobileProps } from './types';
+import { UserHubMobileProps, UserHubTabs } from './types';
 
 export const displayName = 'common.Extensions.UserHub.partials.UserHubMobile';
 
@@ -16,9 +16,12 @@ const UserHubMobile: FC<UserHubMobileProps> = ({
   return (
     <div className={`${isMobile ? 'pt-0' : 'pt-5'} flex w-full`}>
       <Select
-        list={tabList}
-        selectedElement={selectedTab}
-        handleChange={onTabChange}
+        options={tabList}
+        defaultValue={selectedTab}
+        value={selectedTab}
+        onChange={(value) => onTabChange(value?.value as UserHubTabs)}
+        className="w-full"
+        hideSelectedOptions
       />
     </div>
   );

src/components/common/Extensions/UserHub/consts.ts

@@ -4,19 +4,19 @@ export const tabList: UserHubTabList = [
   {
     id: UserHubTabs.Overview,
     label: 'Your overview',
-    value: 'overview',
+    value: UserHubTabs.Overview,
     icon: 'user',
   },
   {
     id: UserHubTabs.Stakes,
     label: 'Stakes',
-    value: 'stakes',
+    value: UserHubTabs.Stakes,
     icon: 'coin-vertical',
   },
   {
     id: UserHubTabs.Transactions,
     label: 'Transactions',
-    value: 'transactions',
+    value: UserHubTabs.Transactions,
     icon: 'receipt',
   },
 ];

src/components/common/Extensions/UserHub/types.ts

@@ -9,7 +9,7 @@ export interface UserHubMobileProps {
 export type UserHubTabList = {
   id: UserHubTabs;
   label: string;
-  value: string;
+  value: UserHubTabs;
   icon: string;
 }[];
 

src/components/frame/Extensions/layouts/consts.ts

@@ -2,12 +2,12 @@ import {
   COLONY_ACTIVITY_ROUTE,
   COLONY_ADVANCED_ROUTE,
   COLONY_BALANCES_ROUTE,
+  COLONY_CONTRIBUTORS_ROUTE,
   COLONY_DETAILS_ROUTE,
   COLONY_EXTENSIONS_ROUTE,
   COLONY_INCOMING_ROUTE,
   COLONY_INCORPORATION_ROUTE,
   COLONY_INTEGRATIONS_ROUTE,
-  COLONY_MEMBERS_ROUTE,
   COLONY_PERMISSIONS_ROUTE,
   COLONY_REPUTATION_ROUTE,
   COLONY_TEAMS_ROUTE,
@@ -20,7 +20,7 @@ export const membersMenu: NavigationSidebarLinksListProps['items'] = [
   {
     key: '1',
     label: formatText({ id: 'navigation.members.members' }) || '',
-    to: COLONY_MEMBERS_ROUTE,
+    to: COLONY_CONTRIBUTORS_ROUTE,
     iconName: 'users-three',
   },
   {

src/components/frame/Extensions/layouts/hooks.tsx

@@ -13,6 +13,7 @@ import { canColonyBeUpgraded, hasRoot } from '~utils/checks';
 import { useActionSidebarContext } from '~context/ActionSidebarContext';
 import { formatText } from '~utils/intl';
 import { ACTION } from '~constants/actions';
+import { COLONY_MEMBERS_ROUTE } from '~routes/routeConstants';
 import { NavigationSidebarItem } from '~v5/frame/NavigationSidebar/partials/NavigationSidebarMainMenu/types';
 import { CalamityBannerItemProps } from '~v5/shared/CalamityBanner/types';
 import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts';
@@ -120,7 +121,9 @@ export const useMainMenuItems = () => {
       key: '3',
       iconName: 'user',
       label: formatText({ id: 'navigation.members' }) || '',
-      isActive: checkIfIsActive(nestedColonyPathname, membersMenu),
+      isActive:
+        checkIfIsActive(nestedColonyPathname, membersMenu) ||
+        nestedColonyPathname === COLONY_MEMBERS_ROUTE,
       secondLevelMenuProps: {
         title: formatText({ id: 'navigation.members.title' }) || '',
         content: membersMenu,

src/components/frame/v5/pages/BalancePage/partials/BalanceTable/BalanceTable.tsx

@@ -35,9 +35,7 @@ const BalanceTable: FC<BalanceTableProps> = ({ data }) => {
     isAddFundsModalOpened,
     { toggleOn: toggleAddFundsModalOn, toggleOff: toggleAddFundsModalOff },
   ] = useToggle();
-  const { handleClipboardCopy, isCopied } = useCopyToClipboard(
-    colonyAddress || '',
-  );
+  const { handleClipboardCopy, isCopied } = useCopyToClipboard();
 
   const columns = useBalanceTableColumns(
     nativeToken,
@@ -111,7 +109,7 @@ const BalanceTable: FC<BalanceTableProps> = ({ data }) => {
           </p>
           <CopyWallet
             isCopied={isCopied}
-            handleClipboardCopy={handleClipboardCopy}
+            handleClipboardCopy={() => handleClipboardCopy(colonyAddress || '')}
             value={colonyAddress || ''}
           />
         </>

src/components/frame/v5/pages/MembersPage/AllMembersPage.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+
+import { useColonyContext } from '~hooks';
+import { useCopyToClipboard } from '~hooks/useCopyToClipboard';
+import { formatText } from '~utils/intl';
+
+import MembersTabContent from './partials/MembersTabContent';
+import { useMembersPage } from './hooks';
+
+const AllMembersPage: FC = () => {
+  const { membersList, loadingMembers, hasMoreMembers, loadMoreMembers } =
+    useMembersPage();
+  const { handleClipboardCopy } = useCopyToClipboard();
+  const { colony } = useColonyContext();
+
+  const { name } = colony || {};
+  const colonyURL = `${window.location.origin}/${name}`;
+
+  return (
+    <MembersTabContent
+      items={membersList}
+      isLoading={loadingMembers}
+      loadMoreButtonProps={
+        hasMoreMembers
+          ? {
+              onClick: loadMoreMembers,
+            }
+          : undefined
+      }
+      withSimpleCards
+      emptyContentProps={{
+        buttonText: { id: 'members.subnav.invite' },
+        onClick: () => handleClipboardCopy(colonyURL),
+        title: formatText({ id: 'membersPage.followers.emptyTitle' }) || '',
+        description:
+          formatText({
+            id: 'membersPage.followers.emptyDescription',
+          }) || '',
+        icon: 'smiley-meh',
+      }}
+    />
+  );
+};
+
+export default AllMembersPage;

src/components/frame/v5/pages/MembersPage/ContributorsPage.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+
+import { formatText } from '~utils/intl';
+import { useCopyToClipboard } from '~hooks/useCopyToClipboard';
+import { useColonyContext } from '~hooks';
+import TeamReputationSummary from '~v5/common/TeamReputationSummary';
+
+import MembersTabContent from './partials/MembersTabContent';
+import { useMembersPage } from './hooks';
+
+const ContributorsPage: FC = () => {
+  const {
+    contributorsList,
+    loadingContributors,
+    hasMoreContributors,
+    loadMoreContributors,
+  } = useMembersPage();
+  const { handleClipboardCopy } = useCopyToClipboard();
+  const { colony } = useColonyContext();
+
+  const { name } = colony || {};
+  const colonyURL = `${window.location.origin}/${name}`;
+
+  return (
+    <MembersTabContent
+      items={contributorsList}
+      isLoading={loadingContributors}
+      loadMoreButtonProps={
+        hasMoreContributors
+          ? {
+              onClick: loadMoreContributors,
+            }
+          : undefined
+      }
+      contentClassName="flex-col-reverse sm:flex-row"
+      emptyContentProps={{
+        buttonText: { id: 'members.subnav.invite' },
+        onClick: () => handleClipboardCopy(colonyURL),
+        title: formatText({ id: 'membersPage.contributors.emptyTitle' }) || '',
+        description:
+          formatText({
+            id: 'membersPage.contributors.emptyDescription',
+          }) || '',
+        icon: 'smiley-meh',
+      }}
+    >
+      <TeamReputationSummary className="sm:max-w-[14.375rem]" />
+    </MembersTabContent>
+  );
+};
+
+export default ContributorsPage;