diff --git a/packages/next-common/components/delegation/my-delegation/delegatedVotes/openGovDelegationList.js b/packages/next-common/components/delegation/my-delegation/delegatedVotes/openGovDelegationList.js
index cdeba810ab..a581b243db 100644
--- a/packages/next-common/components/delegation/my-delegation/delegatedVotes/openGovDelegationList.js
+++ b/packages/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() {
<>
-
+
+ {delegations?.length > 0 &&
}
+
+
>
);
diff --git a/packages/next-common/components/summary/democracyAllMyDelegationPopup/allDelegationBar.js b/packages/next-common/components/summary/democracyAllMyDelegationPopup/allDelegationBar.js
new file mode 100644
index 0000000000..cc80785058
--- /dev/null
+++ 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 (
+ <>
+
+
+ My delegation {delegations?.length || 0}
+
+
+
+
+ setShowPopup(true)}
+ />
+
+
+
+ {showPopup && (
+ 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
index 42b9280734..b6cc1dd0cf 100644
--- 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 (
- <>
-
-
- My delegation {delegations?.length || 0}
-
-
-
-
- setShowPopup(true)}
- />
-
-
-
- {showPopup && (
- setShowPopup(false)}
- isLoading={isLoading}
- setIsLoading={setIsLoading}
- onInBlock={() => {
- dispatch(incMyReferendaDelegationsTrigger());
- }}
- />
- )}
- >
- );
-}
-
export default function AllMyDelegationPopup({ setShow = noop }) {
return (
setShow(false)}>