diff --git a/packages/next-common/components/staking/overview/accountNomination/modifyNomineesPopup/index.js b/packages/next-common/components/staking/overview/accountNomination/modifyNomineesPopup/index.js
index d7cb710932..1aa9f3e073 100644
--- a/packages/next-common/components/staking/overview/accountNomination/modifyNomineesPopup/index.js
+++ b/packages/next-common/components/staking/overview/accountNomination/modifyNomineesPopup/index.js
@@ -1,5 +1,4 @@
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { useContextApi } from "next-common/context/api";
 import Signer from "next-common/components/popup/fields/signerField";
 import { useCallback, useEffect, useState } from "react";
@@ -126,13 +125,11 @@ function ModifyNomineesPopupContent() {
 
 export default function ModifyNomineesPopup({ onClose, startNominating }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup
-        title={startNominating ? "Start Nominating" : "Modify Nominees"}
-        onClose={onClose}
-      >
-        <ModifyNomineesPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner
+      title={startNominating ? "Start Nominating" : "Modify Nominees"}
+      onClose={onClose}
+    >
+      <ModifyNomineesPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/quickActions/bondPopup.jsx b/packages/next-common/components/staking/overview/accountNomination/quickActions/bondPopup.jsx
index 029a6b57f1..1e907789d8 100644
--- a/packages/next-common/components/staking/overview/accountNomination/quickActions/bondPopup.jsx
+++ b/packages/next-common/components/staking/overview/accountNomination/quickActions/bondPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
 import { useState } from "react";
@@ -68,10 +67,8 @@ function BondPopupContent() {
 
 export default function BondPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Bond Extra" onClose={onClose}>
-        <BondPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Bond Extra" onClose={onClose}>
+      <BondPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/quickActions/claimPopup.jsx b/packages/next-common/components/staking/overview/accountNomination/quickActions/claimPopup.jsx
index d940fdb204..3d7d9d346f 100644
--- a/packages/next-common/components/staking/overview/accountNomination/quickActions/claimPopup.jsx
+++ b/packages/next-common/components/staking/overview/accountNomination/quickActions/claimPopup.jsx
@@ -4,8 +4,7 @@ import { useTxBuilder } from "next-common/hooks/useTxBuilder";
 import { useChainSettings } from "next-common/context/chain";
 import { toPrecision } from "next-common/utils";
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import Signer from "next-common/components/popup/fields/signerField";
 import SecondaryButton from "next-common/lib/button/secondary";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
@@ -172,10 +171,8 @@ function ClaimPopupContent() {
 
 export default function ClaimPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Claim Rewards" onClose={onClose}>
-        <ClaimPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Claim Rewards" onClose={onClose}>
+      <ClaimPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/quickActions/payeePopup.jsx b/packages/next-common/components/staking/overview/accountNomination/quickActions/payeePopup.jsx
index d654b08bb3..9651628ef4 100644
--- a/packages/next-common/components/staking/overview/accountNomination/quickActions/payeePopup.jsx
+++ b/packages/next-common/components/staking/overview/accountNomination/quickActions/payeePopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import Signer from "next-common/components/popup/fields/signerField";
 import { useContextApi } from "next-common/context/api";
 import { useState, useEffect, useMemo } from "react";
@@ -200,10 +199,8 @@ function PayeePopupContent() {
 
 export default function PayeePopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Set Payee Destination" onClose={onClose}>
-        <PayeePopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Set Payee Destination" onClose={onClose}>
+      <PayeePopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/quickActions/stopNominationPopup.jsx b/packages/next-common/components/staking/overview/accountNomination/quickActions/stopNominationPopup.jsx
index 16d361daeb..176a6a1a26 100644
--- a/packages/next-common/components/staking/overview/accountNomination/quickActions/stopNominationPopup.jsx
+++ b/packages/next-common/components/staking/overview/accountNomination/quickActions/stopNominationPopup.jsx
@@ -4,8 +4,7 @@ import EstimatedGas from "next-common/components/estimatedGas";
 import BalanceField from "next-common/components/popup/fields/balanceField";
 import Signer from "next-common/components/popup/fields/signerField";
 import TextInputField from "next-common/components/popup/fields/textInputField";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { InfoMessage } from "next-common/components/setting/styled";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
 import { useContextApi } from "next-common/context/api";
@@ -77,10 +76,8 @@ function StopNominatingPopupContent() {
 
 export default function StopNominationPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Stop Nominating" onClose={onClose}>
-        <StopNominatingPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Stop Nominating" onClose={onClose}>
+      <StopNominatingPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/quickActions/unBondPopup.jsx b/packages/next-common/components/staking/overview/accountNomination/quickActions/unBondPopup.jsx
index 5f26da28ea..6667382017 100644
--- a/packages/next-common/components/staking/overview/accountNomination/quickActions/unBondPopup.jsx
+++ b/packages/next-common/components/staking/overview/accountNomination/quickActions/unBondPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import Signer from "next-common/components/popup/fields/signerField";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
@@ -101,10 +100,8 @@ function UnBondPopupContent() {
 
 export default function UnBondPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Unbond" onClose={onClose}>
-        <UnBondPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Unbond" onClose={onClose}>
+      <UnBondPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/startNominatingPopup/index.jsx b/packages/next-common/components/staking/overview/accountNomination/startNominatingPopup/index.jsx
index 35d11e4522..20db18ef02 100644
--- a/packages/next-common/components/staking/overview/accountNomination/startNominatingPopup/index.jsx
+++ b/packages/next-common/components/staking/overview/accountNomination/startNominatingPopup/index.jsx
@@ -1,5 +1,4 @@
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { useContextApi } from "next-common/context/api";
 import useRealAddress from "next-common/utils/hooks/useRealAddress";
 import Signer from "next-common/components/popup/fields/signerField";
@@ -169,10 +168,8 @@ function StartNominatingPopupContent() {
 
 export default function StartNominatingPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Start Nominating" onClose={onClose}>
-        <StartNominatingPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Start Nominating" onClose={onClose}>
+      <StartNominatingPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountNomination/withdrawUnbondedPopup/index.js b/packages/next-common/components/staking/overview/accountNomination/withdrawUnbondedPopup/index.js
index 03f903a3b7..8e36f31a68 100644
--- a/packages/next-common/components/staking/overview/accountNomination/withdrawUnbondedPopup/index.js
+++ b/packages/next-common/components/staking/overview/accountNomination/withdrawUnbondedPopup/index.js
@@ -2,8 +2,7 @@ import TxSubmissionButton from "next-common/components/common/tx/txSubmissionBut
 import EstimatedGas from "next-common/components/estimatedGas";
 import BalanceField from "next-common/components/popup/fields/balanceField";
 import Signer from "next-common/components/popup/fields/signerField";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
@@ -45,10 +44,8 @@ function WithdrawUnbondedPopupContent() {
 
 export default function WithdrawUnbondedPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Withdraw Unbonded" onClose={onClose}>
-        <WithdrawUnbondedPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Withdraw Unbonded" onClose={onClose}>
+      <WithdrawUnbondedPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountStaking/claimPoolRewardPopup/index.js b/packages/next-common/components/staking/overview/accountStaking/claimPoolRewardPopup/index.js
index bb734fa59d..25f7affc86 100644
--- a/packages/next-common/components/staking/overview/accountStaking/claimPoolRewardPopup/index.js
+++ b/packages/next-common/components/staking/overview/accountStaking/claimPoolRewardPopup/index.js
@@ -2,8 +2,7 @@ import TxSubmissionButton from "next-common/components/common/tx/txSubmissionBut
 import EstimatedGas from "next-common/components/estimatedGas";
 import BalanceField from "next-common/components/popup/fields/balanceField";
 import Signer from "next-common/components/popup/fields/signerField";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
@@ -53,10 +52,8 @@ function ClaimPoolRewardPopupContent() {
 
 export default function ClaimPoolRewardPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Claim Reward" onClose={onClose}>
-        <ClaimPoolRewardPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Claim Reward" onClose={onClose}>
+      <ClaimPoolRewardPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountStaking/compoundPoolRewardPopup/index.js b/packages/next-common/components/staking/overview/accountStaking/compoundPoolRewardPopup/index.js
index e8b60bc481..1e6ecaf0ae 100644
--- a/packages/next-common/components/staking/overview/accountStaking/compoundPoolRewardPopup/index.js
+++ b/packages/next-common/components/staking/overview/accountStaking/compoundPoolRewardPopup/index.js
@@ -2,8 +2,7 @@ import TxSubmissionButton from "next-common/components/common/tx/txSubmissionBut
 import EstimatedGas from "next-common/components/estimatedGas";
 import BalanceField from "next-common/components/popup/fields/balanceField";
 import Signer from "next-common/components/popup/fields/signerField";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
@@ -54,10 +53,8 @@ function CompoundPoolRewardPopupContent() {
 
 export default function CompoundPoolRewardPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Compound Reward" onClose={onClose}>
-        <CompoundPoolRewardPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Compound Reward" onClose={onClose}>
+      <CompoundPoolRewardPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/overview/accountStaking/withdrawUnbondedPopup/index.js b/packages/next-common/components/staking/overview/accountStaking/withdrawUnbondedPopup/index.js
index 67587b3044..24084a8ce1 100644
--- a/packages/next-common/components/staking/overview/accountStaking/withdrawUnbondedPopup/index.js
+++ b/packages/next-common/components/staking/overview/accountStaking/withdrawUnbondedPopup/index.js
@@ -2,8 +2,7 @@ import TxSubmissionButton from "next-common/components/common/tx/txSubmissionBut
 import EstimatedGas from "next-common/components/estimatedGas";
 import BalanceField from "next-common/components/popup/fields/balanceField";
 import Signer from "next-common/components/popup/fields/signerField";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import AdvanceSettings from "next-common/components/summary/newProposalQuickStart/common/advanceSettings";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
@@ -48,10 +47,8 @@ function PoolWithdrawUnbondedPopupContent() {
 
 export default function PoolWithdrawUnbondedPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Withdraw Unbonded" onClose={onClose}>
-        <PoolWithdrawUnbondedPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Withdraw Unbonded" onClose={onClose}>
+      <PoolWithdrawUnbondedPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/pools/actions/bondExtraPopup.jsx b/packages/next-common/components/staking/pools/actions/bondExtraPopup.jsx
index 53c44753ca..edf37a73f0 100644
--- a/packages/next-common/components/staking/pools/actions/bondExtraPopup.jsx
+++ b/packages/next-common/components/staking/pools/actions/bondExtraPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
 import { useCallback, useState } from "react";
@@ -85,10 +84,8 @@ function BondExtraPopupContent() {
 
 export default function BondExtraPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Bond Extra" onClose={onClose}>
-        <BondExtraPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Bond Extra" onClose={onClose}>
+      <BondExtraPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/pools/actions/claimPayoutPopup.jsx b/packages/next-common/components/staking/pools/actions/claimPayoutPopup.jsx
index 177f31cccb..1be1e4e4e9 100644
--- a/packages/next-common/components/staking/pools/actions/claimPayoutPopup.jsx
+++ b/packages/next-common/components/staking/pools/actions/claimPayoutPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { useContextApi } from "next-common/context/api";
 import { useCallback } from "react";
 import SecondaryButton from "next-common/lib/button/secondary";
@@ -73,10 +72,8 @@ function ClaimPayoutPopupContent() {
 
 export default function ClaimPayoutPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Claim Payout" onClose={onClose}>
-        <ClaimPayoutPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Claim Payout" onClose={onClose}>
+      <ClaimPayoutPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/pools/actions/joinPopup.jsx b/packages/next-common/components/staking/pools/actions/joinPopup.jsx
index 283e17b8de..81fd1de43f 100644
--- a/packages/next-common/components/staking/pools/actions/joinPopup.jsx
+++ b/packages/next-common/components/staking/pools/actions/joinPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
 import { useMinJoin } from "next-common/components/staking/pools/hooks/useMinJoin";
@@ -87,10 +86,8 @@ function JoinPopupContent() {
 
 export default function JoinPopup({ onClose, poolId }) {
   return (
-    <SignerPopupWrapper onClose={onClose} poolId={poolId}>
-      <Popup title="Join Pool" onClose={onClose}>
-        <JoinPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner onClose={onClose} poolId={poolId} title="Join Pool">
+      <JoinPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/pools/actions/unBondPopup.jsx b/packages/next-common/components/staking/pools/actions/unBondPopup.jsx
index e38c7825fa..0fd410270e 100644
--- a/packages/next-common/components/staking/pools/actions/unBondPopup.jsx
+++ b/packages/next-common/components/staking/pools/actions/unBondPopup.jsx
@@ -1,6 +1,5 @@
 import TxSubmissionButton from "next-common/components/common/tx/txSubmissionButton";
-import Popup from "next-common/components/popup/wrapper/Popup";
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import Signer from "next-common/components/popup/fields/signerField";
 import { useContextApi } from "next-common/context/api";
 import { useChainSettings } from "next-common/context/chain";
@@ -91,10 +90,8 @@ function UnBondPopupContent() {
 
 export default function UnBondPopup({ onClose }) {
   return (
-    <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Unbond Pool" onClose={onClose}>
-        <UnBondPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+    <PopupWithSigner title="Unbond Pool" onClose={onClose}>
+      <UnBondPopupContent />
+    </PopupWithSigner>
   );
 }
diff --git a/packages/next-common/components/staking/pools/actions/unbondingPopup.jsx b/packages/next-common/components/staking/pools/actions/unbondingPopup.jsx
index 148a96ce41..bbae0a06a1 100644
--- a/packages/next-common/components/staking/pools/actions/unbondingPopup.jsx
+++ b/packages/next-common/components/staking/pools/actions/unbondingPopup.jsx
@@ -1,5 +1,4 @@
-import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
-import Popup from "next-common/components/popup/wrapper/Popup";
+import PopupWithSigner from "next-common/components/popupWithSigner";
 import SummaryLayout from "next-common/components/summary/layout/layout";
 import SummaryItem from "next-common/components/summary/layout/item";
 import { useMemo } from "react";
@@ -82,15 +81,14 @@ export default function UnbondingPopup({ onClose, unbondingEras }) {
     return null;
   }
   return (
-    <SignerPopupWrapper
+    <PopupWithSigner
       onClose={onClose}
       unbondingEras={unbondingEras}
       activeEra={activeEra}
+      title="Unbonding Pool"
     >
-      <Popup title="Unbonding Pool" onClose={onClose}>
-        <UnbondingPopupContent />
-      </Popup>
-    </SignerPopupWrapper>
+      <UnbondingPopupContent />
+    </PopupWithSigner>
   );
 }