feat: separate my delegate card

packages/next-common/components/delegation/delegate/democracy/card.jsx

@@ -14,14 +14,15 @@ import { DelegateAvatar } from "../referenda/avatar";
 import useRealAddress from "next-common/utils/hooks/useRealAddress";
 import useSubDemocracyDelegating from "next-common/utils/hooks/referenda/useSubDemocracyDelegating";
 
-export default function DemocracyDelegateCard({ delegate = {} }) {
+export default function DemocracyDelegateCard({
+  delegate = {},
+  showDelegateButton = true,
+}) {
   const { address, manifesto } = delegate;
 
   const realAddress = useRealAddress();
   const { delegating } = useSubDemocracyDelegating(realAddress);
 
-  const isDelegatee = realAddress === address;
-
   const [detailOpen, setDetailOpen] = useState(false);
 
   return (
@@ -30,7 +31,7 @@ export default function DemocracyDelegateCard({ delegate = {} }) {
         <DelegateAvatar address={address} />
 
         <div className="space-x-2">
-          {!isDelegatee && (
+          {showDelegateButton && (
             <DemocracyNewDelegation
               disabled={!!delegating}
               defaultTargetAddress={address}

packages/next-common/components/delegation/delegate/myDelegationSection/publicAnnouncement.jsx → packages/next-common/components/delegation/delegate/myDelegationSection/publicAnnouncement/announcement.jsx

@@ -3,7 +3,7 @@ import { SecondaryCard } from "next-common/components/styled/containers/secondar
 import Tooltip from "next-common/components/tooltip";
 import PrimaryButton from "next-common/lib/button/primary";
 
-export default function PublicAnnouncement() {
+export default function Announcement() {
   return (
     <SecondaryCard className="flex flex-row gap-[16px] max-sm:flex-col">
       <div className="flex grow gap-[16px] sm:items-center max-sm:gap-[12px] max-sm:flex-col">

packages/next-common/components/delegation/delegate/myDelegationSection/publicAnnouncement/democracy.jsx

@@ -0,0 +1,45 @@
+import { AvatarContextProvider } from "next-common/context/avatar";
+import nextApi from "next-common/services/nextApi";
+import { delegationDemocracyDelegatesAddressApi } from "next-common/services/url";
+import useRealAddress from "next-common/utils/hooks/useRealAddress";
+import { useAsync } from "react-use";
+import MemberCardListContainer from "../../common/cardListContainer";
+import DemocracyDelegateCard from "../../democracy/card";
+import Announcement from "./announcement";
+
+export default function DemocracyAnnouncement() {
+  const realAddress = useRealAddress();
+
+  const state = useAsync(async () => {
+    return await nextApi
+      .fetch(delegationDemocracyDelegatesAddressApi(realAddress))
+      .then((resp) => {
+        if (resp.result) {
+          return resp.result;
+        }
+      });
+  }, [realAddress]);
+
+  const addressAvatarMap = new Map([
+    [state.value?.address, state.value?.manifesto?.image],
+  ]);
+
+  if (state.loading) {
+    return null;
+  }
+
+  if (state.value) {
+    return (
+      <AvatarContextProvider addressAvatarMap={addressAvatarMap}>
+        <MemberCardListContainer>
+          <DemocracyDelegateCard
+            delegate={state.value}
+            showDelegateButton={false}
+          />
+        </MemberCardListContainer>
+      </AvatarContextProvider>
+    );
+  }
+
+  return <Announcement />;
+}

packages/next-common/components/delegation/delegate/myDelegationSection/publicAnnouncement/index.jsx

@@ -0,0 +1,19 @@
+import {
+  Democracy,
+  Referenda,
+  useModuleTab,
+} from "next-common/components/profile/votingHistory/common";
+import ReferendaAnnouncement from "./referenda";
+import DemocracyAnnouncement from "./democracy";
+
+export default function PublicAnnouncement() {
+  const moduleTab = useModuleTab();
+
+  if (moduleTab === Referenda) {
+    return <ReferendaAnnouncement />;
+  } else if (moduleTab === Democracy) {
+    return <DemocracyAnnouncement />;
+  }
+
+  return null;
+}

packages/next-common/components/delegation/delegate/myDelegationSection/publicAnnouncement/referenda.jsx

@@ -0,0 +1,45 @@
+import { AvatarContextProvider } from "next-common/context/avatar";
+import nextApi from "next-common/services/nextApi";
+import { delegationReferendaDelegatesAddressApi } from "next-common/services/url";
+import useRealAddress from "next-common/utils/hooks/useRealAddress";
+import { useAsync } from "react-use";
+import MemberCardListContainer from "../../common/cardListContainer";
+import ReferendaDelegateCard from "../../referenda/card";
+import Announcement from "./announcement";
+
+export default function ReferendaAnnouncement() {
+  const realAddress = useRealAddress();
+
+  const state = useAsync(async () => {
+    return await nextApi
+      .fetch(delegationReferendaDelegatesAddressApi(realAddress))
+      .then((resp) => {
+        if (resp.result) {
+          return resp.result;
+        }
+      });
+  }, [realAddress]);
+
+  const addressAvatarMap = new Map([
+    [state.value?.address, state.value?.manifesto?.image],
+  ]);
+
+  if (state.loading) {
+    return null;
+  }
+
+  if (state.value) {
+    return (
+      <AvatarContextProvider addressAvatarMap={addressAvatarMap}>
+        <MemberCardListContainer>
+          <ReferendaDelegateCard
+            delegate={state.value}
+            showDelegateButton={false}
+          />
+        </MemberCardListContainer>
+      </AvatarContextProvider>
+    );
+  }
+
+  return <Announcement />;
+}

packages/next-common/components/delegation/delegate/referenda/card.js

@@ -12,7 +12,10 @@ import ReferendaDelegateeDetailPopup from "./detailPopup";
 import ReferendaDelegationCardSummary from "./summary";
 import { DelegateAvatar } from "./avatar";
 
-export default function ReferendaDelegateCard({ delegate = {} }) {
+export default function ReferendaDelegateCard({
+  delegate = {},
+  showDelegateButton = true,
+}) {
   const { address, manifesto, shortBio } = delegate;
 
   const shortDescription = shortBio || manifesto?.shortDescription;
@@ -25,7 +28,9 @@ export default function ReferendaDelegateCard({ delegate = {} }) {
         <DelegateAvatar address={address} />
 
         <div className="space-x-2">
-          <NewDelegateButton defaultTargetAddress={address} />
+          {showDelegateButton && (
+            <NewDelegateButton defaultTargetAddress={address} />
+          )}
           <SecondaryButton
             className="w-7 h-7 p-0"
             size="small"