Support remove all delegation in opengov mode on my delegation, #4020 (…

…#4033)
opensquare-network · Mar 20, 2024 · eda09e9 · eda09e9
1 parent 91a79af
commit eda09e9
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 71 deletions.
diff --git a/...s/next-common/components/delegation/my-delegation/delegatedVotes/openGovDelegationList.js b/...s/next-common/components/delegation/my-delegation/delegatedVotes/openGovDelegationList.js
@@ -7,6 +7,7 @@ import {
 } from "next-common/components/profile/delegation/delegatedVotes/openGovDelegationList";
 import DelegationList from "next-common/components/profile/delegation/common/delegationList";
 import RemoveDelegation from "next-common/components/summary/democracyAllMyDelegationPopup/remove";
+import AllDelegationsBar from "next-common/components/summary/democracyAllMyDelegationPopup/allDelegationBar";
 
 export default function OpenGovDelegationList() {
   const delegations = useSelector(myReferendaDelegationsSelector);
@@ -31,11 +32,14 @@ export default function OpenGovDelegationList() {
     <>
       <Title delegations={delegations} />
       <SecondaryCard>
-        <DelegationList
-          isLoading={!delegations}
-          delegations={delegations}
-          columnsDef={columnsDef}
-        />
+        <div className="flex flex-col gap-[16px]">
+          {delegations?.length > 0 && <AllDelegationsBar />}
+          <DelegationList
+            isLoading={!delegations}
+            delegations={delegations}
+            columnsDef={columnsDef}
+          />
+        </div>
       </SecondaryCard>
     </>
   );

diff --git a/packages/next-common/components/summary/democracyAllMyDelegationPopup/allDelegationBar.js b/packages/next-common/components/summary/democracyAllMyDelegationPopup/allDelegationBar.js
@@ -0,0 +1,67 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import HStack from "next-common/components/styled/hStack";
+import GreyInfoPanel from "../styled/greyInfoPanel";
+import Tooltip from "next-common/components/tooltip";
+import RemoveButton from "next-common/components/removeButton";
+import {
+  incMyReferendaDelegationsTrigger,
+  myReferendaDelegationsSelector,
+} from "next-common/store/reducers/myOnChainData/referenda/myReferendaDelegations";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import useIsUseMetamask from "next-common/hooks/useIsUseMetamask";
+import isMoonChain from "next-common/utils/isMoonChain";
+import UndelegateAllPopup from "../delegation/undelegateAllPopup";
+import MoonUndelegateAllPopup from "../delegation/undelegateAllPopup/moonPopup";
+
+const Count = styled.span`
+  color: var(--textSecondary);
+`;
+
+export default function AllDelegationsBar() {
+  const dispatch = useDispatch();
+  const delegations = useSelector(myReferendaDelegationsSelector);
+  const [showPopup, setShowPopup] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const isUseMetamask = useIsUseMetamask();
+
+  let TheUndelegatePopup = UndelegateAllPopup;
+  if (isMoonChain() && isUseMetamask) {
+    TheUndelegatePopup = MoonUndelegateAllPopup;
+  }
+
+  const trackIds = useMemo(() => {
+    return (delegations || []).map((item) => item.trackId);
+  }, [delegations]);
+
+  return (
+    <>
+      <HStack space={8}>
+        <GreyInfoPanel>
+          My delegation <Count>{delegations?.length || 0}</Count>
+        </GreyInfoPanel>
+
+        <Tooltip content="Remove all">
+          <div>
+            <RemoveButton
+              disabled={!delegations?.length || isLoading}
+              onClick={() => setShowPopup(true)}
+            />
+          </div>
+        </Tooltip>
+      </HStack>
+      {showPopup && (
+        <TheUndelegatePopup
+          trackIds={trackIds}
+          onClose={() => setShowPopup(false)}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          onInBlock={() => {
+            dispatch(incMyReferendaDelegationsTrigger());
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/next-common/components/summary/democracyAllMyDelegationPopup/index.js b/packages/next-common/components/summary/democracyAllMyDelegationPopup/index.js
@@ -1,79 +1,15 @@
-import React, { useMemo, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import BaseVotesPopup from "next-common/components/popup/baseVotesPopup";
 import VStack from "next-common/components/styled/vStack";
 import AllMyDelegationPopupList from "next-common/components/summary/democracyAllMyDelegationPopup/list";
 import { noop } from "lodash-es";
-import HStack from "next-common/components/styled/hStack";
-import GreyInfoPanel from "../styled/greyInfoPanel";
-import Tooltip from "next-common/components/tooltip";
-import RemoveButton from "next-common/components/removeButton";
-import {
-  incMyReferendaDelegationsTrigger,
-  myReferendaDelegationsSelector,
-} from "next-common/store/reducers/myOnChainData/referenda/myReferendaDelegations";
-import { useSelector } from "react-redux";
-import { useDispatch } from "react-redux";
-import useIsUseMetamask from "next-common/hooks/useIsUseMetamask";
-import isMoonChain from "next-common/utils/isMoonChain";
-import UndelegateAllPopup from "../delegation/undelegateAllPopup";
-import MoonUndelegateAllPopup from "../delegation/undelegateAllPopup/moonPopup";
+import AllDelegationsBar from "./allDelegationBar";
 
 const StyledPopup = styled(BaseVotesPopup)`
   width: 610px;
 `;
 
-const Count = styled.span`
-  color: var(--textSecondary);
-`;
-
-function AllDelegationsBar() {
-  const dispatch = useDispatch();
-  const delegations = useSelector(myReferendaDelegationsSelector);
-  const [showPopup, setShowPopup] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const isUseMetamask = useIsUseMetamask();
-
-  let TheUndelegatePopup = UndelegateAllPopup;
-  if (isMoonChain() && isUseMetamask) {
-    TheUndelegatePopup = MoonUndelegateAllPopup;
-  }
-
-  const trackIds = useMemo(() => {
-    return (delegations || []).map((item) => item.trackId);
-  }, [delegations]);
-
-  return (
-    <>
-      <HStack space={8}>
-        <GreyInfoPanel>
-          My delegation <Count>{delegations?.length || 0}</Count>
-        </GreyInfoPanel>
-
-        <Tooltip content="Remove all">
-          <div>
-            <RemoveButton
-              disabled={!delegations?.length || isLoading}
-              onClick={() => setShowPopup(true)}
-            />
-          </div>
-        </Tooltip>
-      </HStack>
-      {showPopup && (
-        <TheUndelegatePopup
-          trackIds={trackIds}
-          onClose={() => setShowPopup(false)}
-          isLoading={isLoading}
-          setIsLoading={setIsLoading}
-          onInBlock={() => {
-            dispatch(incMyReferendaDelegationsTrigger());
-          }}
-        />
-      )}
-    </>
-  );
-}
-
 export default function AllMyDelegationPopup({ setShow = noop }) {
   return (
     <StyledPopup title="My Delegation" onClose={() => setShow(false)}>