diff --git a/frontend/src/components/NewDashboardChart.js b/frontend/src/components/NewDashboardChart.js
index bd9ddcf0..40ae86fd 100644
--- a/frontend/src/components/NewDashboardChart.js
+++ b/frontend/src/components/NewDashboardChart.js
@@ -14,6 +14,7 @@ import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 import CheckboxABI from "./CheckboxABI";
 import AutoCompleter from "./AutoCompleter";
 import CheckboxGrouped from "./CheckboxGrouped";
+import { emptySubscriptionSettingItem } from "../core/utils/massageAbi";
 
 const NewDashboardChart = ({ drawerState, setDrawerState }) => {
   const overlay = useContext(OverlayContext);
@@ -73,36 +74,8 @@ const NewDashboardChart = ({ drawerState, setDrawerState }) => {
                   setDrawerState((currentValue) => {
                     const newValue = [...currentValue];
                     newValue[idx] = {
+                      ...emptySubscriptionSettingItem,
                       subscription: selectedItem,
-                      generic: {
-                        transactions_in: {
-                          value: "transactions_in",
-                          name: "transactions in",
-                          checked: false,
-                        },
-                        transactions_out: {
-                          value: "transactions_out",
-                          name: "transactions out",
-                          checked: false,
-                        },
-                        value_in: {
-                          value: "value_in",
-                          name: "value in",
-                          checked: false,
-                        },
-                        value_out: {
-                          value: "value_out",
-                          name: "value out",
-                          checked: false,
-                        },
-                        balance: {
-                          value: "balance",
-                          name: "balance",
-                          checked: false,
-                        },
-                      },
-                      events: {},
-                      methods: {},
                     };
 
                     return newValue;
diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js
index fc713a02..a4251a78 100644
--- a/frontend/src/core/providers/OverlayProvider/index.js
+++ b/frontend/src/core/providers/OverlayProvider/index.js
@@ -38,6 +38,7 @@ import useDashboard from "../../hooks/useDashboard";
 import SignUp from "../../../components/SignUp";
 import NewDashboardChart from "../../../components/NewDashboardChart";
 import { useRouter } from "../../hooks";
+import { emptySubscriptionSettingItem } from "../../utils/massageAbi";
 const NewDashboardName = React.lazy(() =>
   import("../../../components/NewDashboardName")
 );
@@ -75,26 +76,7 @@ const OverlayProvider = ({ children }) => {
   const modalDisclosure = useDisclosure();
   const alertDisclosure = useDisclosure();
   const [drawerState, setDrawerState] = useState([
-    {
-      subscription: undefined,
-      generic: {
-        transactions_in: {
-          value: "transactions_in",
-          name: "transactions in",
-          checked: false,
-        },
-        transactions_out: {
-          value: "transactions_out",
-          name: "transactions out",
-          checked: false,
-        },
-        value_in: { value: "value_in", name: "value in", checked: false },
-        value_out: { value: "value_out", name: "value out", checked: false },
-        balance: { value: "balance", name: "balance", checked: false },
-      },
-      events: {},
-      methods: {},
-    },
+    emptySubscriptionSettingItem,
   ]);
 
   useLayoutEffect(() => {
@@ -287,71 +269,13 @@ const OverlayProvider = ({ children }) => {
       createDashboard.isSuccess &&
       drawer.type === DRAWER_TYPES.NEW_DASHBOARD_ITEM
     ) {
-      setDrawerState([
-        {
-          subscription: undefined,
-          generic: {
-            transactions_in: {
-              value: "transactions_in",
-              name: "transactions in",
-              checked: false,
-            },
-            transactions_out: {
-              value: "transactions_out",
-              name: "transactions out",
-              checked: false,
-            },
-            value_in: { value: "value_in", name: "value in", checked: false },
-            value_out: {
-              value: "value_out",
-              name: "value out",
-              checked: false,
-            },
-            balance: { value: "balance", name: "balance", checked: false },
-          },
-          events: {},
-          methods: {},
-        },
-      ]);
+      setDrawerState([emptySubscriptionSettingItem]);
       toggleDrawer({ type: DRAWER_TYPES.OFF, props: undefined });
     }
   }, [createDashboard.isSuccess, drawer.type]);
 
   const cancelDashboardItem = () => {
-    setDrawerState([
-      {
-        subscription: undefined,
-        generic: {
-          transactions_in: {
-            value: "transactions_in",
-            name: "transactions in",
-            checked: false,
-          },
-          transactions_out: {
-            value: "transactions_out",
-            name: "transactions out",
-            checked: false,
-          },
-          value_in: {
-            value: "value_in",
-            name: "value in",
-            checked: false,
-          },
-          value_out: {
-            value: "value_out",
-            name: "value out",
-            checked: false,
-          },
-          balance: {
-            value: "balance",
-            name: "balance",
-            checked: false,
-          },
-        },
-        events: {},
-        functions: {},
-      },
-    ]);
+    setDrawerState([emptySubscriptionSettingItem]);
     toggleDrawer({ type: DRAWER_TYPES.OFF, props: undefined });
   };
   return (
diff --git a/frontend/src/core/utils/massageAbi.js b/frontend/src/core/utils/massageAbi.js
index 7c9689e9..1e4b33a7 100644
--- a/frontend/src/core/utils/massageAbi.js
+++ b/frontend/src/core/utils/massageAbi.js
@@ -48,4 +48,27 @@ const massageAbi = (abi) => {
   return { fnsObj, eventsObj };
 };
 
+export const emptySubscriptionSettingItem = {
+  all_methods: false,
+  all_events: false,
+  subscription: undefined,
+  generic: {
+    transactions_in: {
+      value: "transactions_in",
+      name: "transactions in",
+      checked: false,
+    },
+    transactions_out: {
+      value: "transactions_out",
+      name: "transactions out",
+      checked: false,
+    },
+    value_in: { value: "value_in", name: "value in", checked: false },
+    value_out: { value: "value_out", name: "value out", checked: false },
+    balance: { value: "balance", name: "balance", checked: false },
+  },
+  events: {},
+  methods: {},
+};
+
 export default massageAbi;