put breakout and bridge logic to be a context

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.7.22",
+  "version": "0.7.23",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/hooks/breakoutModal/index.jsx

@@ -0,0 +1,68 @@
+import { createContext, useContext, useState, useMemo } from "react";
+import { claim } from "../../hooks/staking";
+
+const emptyFunction = () => {};
+const BreakoutModalContext = createContext();
+export const useBreakoutModal = () => useContext(BreakoutModalContext);
+
+export const BreakoutModalProvider = ({ children }) => {
+    const [isStakingOpened, setIsStakingOpened] = useState(false);
+    const [isClaimBondOpened, setIsClaimBondOpened] = useState(false);
+    const [activeTxIndex, setActiveTxIndexInner] = useState(-1);
+    const [warmupPeriod, setWarmupPeriod] = useState(0);
+    const [estimatedAmount, setEstimatedAmount] = useState(0);
+    const [defaultFunction, setDefaultFunction] = useState(emptyFunction);
+    const [executableFunction, setExecutableFunction] = useState(emptyFunction);
+
+    const breakoutFromStaking = ({ defaultFunction, toExecute, amount, warmupLeft }) => {
+        setIsStakingOpened(true);
+        setWarmupPeriod(warmupLeft);
+        setEstimatedAmount(amount);
+        setExecutableFunction(() => () => toExecute);
+        setDefaultFunction(() => () => defaultFunction);
+    }
+
+    const breakoutFromBonding = ({ defaultFunction, toExecute, amount, warmupLeft }) => {
+        setIsClaimBondOpened(true);
+        setWarmupPeriod(warmupLeft);
+        setEstimatedAmount(amount);
+        setExecutableFunction(() => () => toExecute);
+        setDefaultFunction(() => () => defaultFunction);
+    }
+
+    const isOpened = useMemo(() =>
+        isStakingOpened || isClaimBondOpened,
+    [isStakingOpened, isClaimBondOpened]);
+
+    const closeModal = () => {
+        setIsStakingOpened(false);
+        setIsClaimBondOpened(false);
+        setWarmupPeriod(0);
+        setDefaultFunction(emptyFunction);
+        setExecutableFunction(emptyFunction);
+    }
+
+    const setActiveTxIndex = (v) => {
+        console.log("here", v)
+        setActiveTxIndexInner(v)
+    }
+
+    return (
+        <BreakoutModalContext.Provider value={{
+            isStakingOpened,
+            isClaimBondOpened,
+            activeTxIndex,
+            setActiveTxIndex,
+            warmupPeriod,
+            isOpened,
+            closeModal,
+            breakoutFromStaking,
+            breakoutFromBonding,
+            defaultFunction,
+            estimatedAmount,
+            executableFunction
+        }}>
+            {children}
+        </BreakoutModalContext.Provider>
+    )
+}