From 2aad949299f2a7684bab5b14670a8cec008cace5 Mon Sep 17 00:00:00 2001
From: Yaki <shibatales@gmail.com>
Date: Fri, 2 Feb 2024 17:50:19 -0800
Subject: [PATCH 1/5] Fix disableClaiming logic in Staking component

---
 src/routes/staking.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/staking.tsx b/src/routes/staking.tsx
index 9f1d851..7670955 100644
--- a/src/routes/staking.tsx
+++ b/src/routes/staking.tsx
@@ -468,7 +468,7 @@ const Staking = () => {
   };
 
   const disableClaiming = useMemo(() => {
-    return isWaiting || unclaimedEras.total === 0 && totalUnclaimed.toNumber() > 0;
+    return isWaiting || unclaimedEras.total === 0 && totalUnclaimed.toNumber() === 0;
   }, [isWaiting, unclaimedEras, totalUnclaimed]);
 
   useEffect(() => {

From d746f802d5a3a5608554d0ac85065fe2e2e1b290 Mon Sep 17 00:00:00 2001
From: Yaki <shibatales@gmail.com>
Date: Fri, 2 Feb 2024 18:33:10 -0800
Subject: [PATCH 2/5] Update Avatar component, set local host for RPC, add
 BalanceProvider, and format balance safely

---
 src/components/Avatar.tsx        |  2 +-
 src/components/DaoList.tsx       | 18 +++-----------
 src/components/LoginButton.tsx   | 33 ++++++-------------------
 src/main.tsx                     | 34 ++++++++++++++------------
 src/modals/ManageStaking.tsx     | 33 +++++++++----------------
 src/providers/balance.tsx        | 42 ++++++++++++++++++++++++++++++++
 src/stores/rpc.tsx               |  4 +--
 src/utils/formatBalanceSafely.ts | 37 ++++++++++++++++++++++++++++
 src/utils/vestingServices.ts     | 16 ++++++++----
 9 files changed, 134 insertions(+), 85 deletions(-)
 create mode 100644 src/providers/balance.tsx
 create mode 100644 src/utils/formatBalanceSafely.ts

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index b19f43b..d72fc85 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -13,7 +13,7 @@ const Avatar = (props: AvatarProps) => {
   const handleError = () => {
     setHasError(true);
   };
-  console.log('Avatar', src);
+
   return (
     <div className="flex flex-shrink-0">
       {src === undefined || hasError ? (
diff --git a/src/components/DaoList.tsx b/src/components/DaoList.tsx
index 94a31b0..b0f2167 100644
--- a/src/components/DaoList.tsx
+++ b/src/components/DaoList.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ProjectCard from './ProjectCard';
 import LoadingSpinner from './LoadingSpinner';
-import { BalanceType, ChainPropertiesType, CoreEraStakeInfoType, CoreIndexedRewardsType, LockedType, StakingCore, TotalRewardsCoreClaimedQuery, TotalUserStakedData, UserStakedInfoType, getTotalUserStaked } from '../routes/staking';
+import { ChainPropertiesType, CoreEraStakeInfoType, CoreIndexedRewardsType, StakingCore, TotalRewardsCoreClaimedQuery, TotalUserStakedData, UserStakedInfoType, getTotalUserStaked } from '../routes/staking';
 import { AnyJson, Codec } from '@polkadot/types/types';
 import { StakedDaoType } from '../routes/overview';
 import BigNumber from 'bignumber.js';
@@ -17,6 +17,7 @@ import Input from './Input';
 import FilterIcon from '../assets/filter-icon.svg';
 import { CHOOSE_ONE, FilterStates, OrderByOption } from '../modals/DaoListFilters';
 import { clearFiltersFromLocalStorage } from '../utils/filterStorage';
+import { useBalance } from '../providers/balance';
 
 interface DaoListProps { mini: boolean; isOverview: boolean; }
 
@@ -27,12 +28,12 @@ const DaoList = (props: DaoListProps) => {
   const descriptionRef = useRef<HTMLDivElement | null>(null);
   const projectCardRef = useRef<HTMLDivElement | null>(null);
   const setOpenModal = useModal((state) => state.setOpenModal);
+  const { availableBalance } = useBalance();
   const selectedAccount = useAccount((state) => state.selectedAccount);
   const [isLoading, setLoading] = useState(true);
   const [isDataLoaded, setDataLoaded] = useState(false);
   const [stakedDaos, setStakedDaos] = useState<StakedDaoType[]>([]);
   const [stakingCores, setStakingCores] = useState<StakingCore[]>([]);
-  const [availableBalance, setAvailableBalance] = useState<BigNumber>();
   const [chainProperties, setChainProperties] = useState<ChainPropertiesType>();
   const [coreEraStakeInfo, setCoreEraStakeInfo] = useState<CoreEraStakeInfoType[]>([]);
   const [coreIndexedRewards, setCoreIndexedRewards] = useState<CoreIndexedRewardsType[]>([]);
@@ -269,16 +270,6 @@ const DaoList = (props: DaoListProps) => {
     });
   }, [stakingCores, coreEraStakeInfo, userStakedInfo]);
 
-  const loadAccountInfo = useCallback(async () => {
-    if (!selectedAccount) return;
-    const account = await api.query.system.account(selectedAccount.address);
-    const balance = account.toPrimitive() as BalanceType;
-    const locked = (await api.query.ocifStaking.ledger(selectedAccount.address)).toPrimitive() as LockedType;
-    const currentBalance = new BigNumber(balance.data.free).minus(new BigNumber(locked.locked));
-
-    setAvailableBalance(currentBalance);
-  }, [api, selectedAccount]);
-
   const loadStakingConstants = useCallback(async () => {
     const maxStakersPerCore = api.consts.ocifStaking.maxStakersPerCore.toPrimitive() as number;
     const inflationErasPerYear = api.consts.checkedInflation.erasPerYear.toPrimitive() as number;
@@ -325,7 +316,6 @@ const DaoList = (props: DaoListProps) => {
     try {
       if (selectedAccount) {
         clearFiltersFromLocalStorage();
-        await loadAccountInfo();
         await loadCores();
         await loadStakingConstants();
         await loadCoreEraStake();
@@ -338,7 +328,7 @@ const DaoList = (props: DaoListProps) => {
       setLoading(false);
       setDataLoaded(true);
     }
-  }, [loadAccountInfo, loadCores, loadStakingConstants, loadCoreEraStake, loadStakeRewardMinimum]);
+  }, [loadCores, loadStakingConstants, loadCoreEraStake, loadStakeRewardMinimum]);
 
   const setupSubscriptions = useCallback(async () => {
     if (!selectedAccount) {
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
index 09d9f32..78988e3 100644
--- a/src/components/LoginButton.tsx
+++ b/src/components/LoginButton.tsx
@@ -2,21 +2,19 @@ import Button from "./Button";
 import DisconnectIcon from "../assets/disconnect-icon.svg";
 import TinkerYellowIcon from "../assets/tinker-yellow-icon.svg";
 import TinkerBlackIcon from "../assets/tinker-black-icon.svg";
-import { useCallback, useEffect, useState } from "react";
-import BigNumber from "bignumber.js";
+import { useEffect, useState } from "react";
 import { shallow } from "zustand/shallow";
-import useApi from "../hooks/useApi";
 import useConnect from "../hooks/useConnect";
 import useAccount from "../stores/account";
 import useModal from "../stores/modals";
 import { formatBalanceToTwoDecimals } from "../utils/formatNumber";
+import { useBalance } from "../providers/balance";
 
 const LoginButton = () => {
-  const [balance, setBalance] = useState<BigNumber>();
+  const { availableBalance, reloadAccountInfo } = useBalance();
   const [isHovered, setIsHovered] = useState(false);
   const [showFirstSpan, setShowFirstSpan] = useState(true);
   const { handleConnect } = useConnect();
-  const api = useApi();
   const closeCurrentModal = useModal((state) => state.closeCurrentModal);
   const { selectedAccount, setSelectedAccount } = useAccount(
     (state) => ({
@@ -31,21 +29,6 @@ const LoginButton = () => {
     closeCurrentModal();
   };
 
-  const loadBalance = useCallback(async () => {
-    if (!selectedAccount) return;
-
-    await api.query.system.account(selectedAccount.address, ({ data }) => {
-      const balance = data.toPrimitive() as {
-        free: string;
-        reserved: string;
-        miscFrozen: string;
-        feeFrozen: string;
-      };
-
-      setBalance(new BigNumber(balance.free));
-    });
-  }, [selectedAccount, api]);
-
   useEffect(() => {
     const handleResize = () => {
       setIsHovered(false);
@@ -63,10 +46,6 @@ const LoginButton = () => {
     };
   }, []);
 
-  useEffect(() => {
-    loadBalance();
-  }, [loadBalance]);
-
   useEffect(() => {
     const intervalId = setInterval(() => {
       setShowFirstSpan(prev => !prev);
@@ -75,7 +54,11 @@ const LoginButton = () => {
     return () => clearInterval(intervalId);
   }, []);
 
-  const formattedBalance = balance ? formatBalanceToTwoDecimals(balance) : 0;
+  useEffect(() => {
+    reloadAccountInfo();
+  }, [reloadAccountInfo]);
+
+  const formattedBalance = availableBalance ? formatBalanceToTwoDecimals(availableBalance) : 0;
 
   return <Button
     mini
diff --git a/src/main.tsx b/src/main.tsx
index d8c2c7b..8df8e1a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,7 +10,6 @@ import {
 } from "urql";
 import { createClient as createWSClient } from "graphql-ws";
 import Claim from "./routes/claim";
-import Transfer from "./routes/xtransfer";
 import Staking from "./routes/staking";
 import NotFound from "./routes/not-found";
 import "./index.css";
@@ -19,6 +18,7 @@ import ApiProvider from "./providers/api";
 import Layout from "./components/Layout";
 import Modals from "./modals";
 import Overview from "./routes/overview";
+import { BalanceProvider } from "./providers/balance";
 
 const wsClient = createWSClient({
   url: "wss://squid.subsquid.io/ocif-squid/v/v4/graphql",
@@ -51,28 +51,30 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <Toaster position="bottom-right" />
     <BrowserRouter>
       <ApiProvider>
-        <URQLProvider value={client}>
-          <Modals />
+        <BalanceProvider>
+          <URQLProvider value={client}>
+            <Modals />
 
-          <Routes>
-            <Route index element={<Navigate to="overview" replace={true} />} />
+            <Routes>
+              <Route index element={<Navigate to="overview" replace={true} />} />
 
-            <Route path="/" element={<Layout />}>
-              <Route path="overview" element={<Overview />} />
+              <Route path="/" element={<Layout />}>
+                <Route path="overview" element={<Overview />} />
 
-              <Route path="claim" element={<Claim />} />
+                <Route path="claim" element={<Claim />} />
 
-              {/* Disabled temporarily */}
-              {/* <Route path="transfer" element={<Transfer />} /> */}
+                {/* Disabled temporarily */}
+                {/* <Route path="transfer" element={<Transfer />} /> */}
 
-              <Route path="staking" element={<Staking />} />
+                <Route path="staking" element={<Staking />} />
 
-              <Route path="404" element={<NotFound />} />
+                <Route path="404" element={<NotFound />} />
 
-              <Route path="*" element={<Navigate to="/404" replace={true} />} />
-            </Route>
-          </Routes>
-        </URQLProvider>
+                <Route path="*" element={<Navigate to="/404" replace={true} />} />
+              </Route>
+            </Routes>
+          </URQLProvider>
+        </BalanceProvider>
       </ApiProvider>
     </BrowserRouter>
   </>
diff --git a/src/modals/ManageStaking.tsx b/src/modals/ManageStaking.tsx
index c3710ed..94875b9 100644
--- a/src/modals/ManageStaking.tsx
+++ b/src/modals/ManageStaking.tsx
@@ -2,7 +2,6 @@ import { Dialog, Tab } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { web3Enable, web3FromAddress } from "@polkadot/extension-dapp";
-import { formatBalance } from "@polkadot/util";
 import BigNumber from "bignumber.js";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -19,6 +18,8 @@ import Button from "../components/Button";
 import { StakingCore, TotalUserStakedData } from "../routes/staking";
 import Dropdown from "../components/Dropdown";
 import { BG_GRADIENT } from "../utils/consts";
+import { formatBalanceSafely } from "../utils/formatBalanceSafely";
+import { useBalance } from "../providers/balance";
 
 export interface SelectedCoreInfo extends Metadata {
   id: number;
@@ -42,6 +43,7 @@ const schema = z.object({
 
 const ManageStaking = (props: { isOpen: boolean; }) => {
   const { isOpen } = props;
+  const { reloadAccountInfo } = useBalance();
   const [stakingCores, setStakingCores] = useState<StakingCore[]>([]);
   const [selectedCore, setSelectedCore] = useState<StakingCore | null>(null);
   const [totalUserStakedData, setTotalUserStakedData] = useState<TotalUserStakedData>({});
@@ -154,6 +156,7 @@ const ManageStaking = (props: { isOpen: boolean; }) => {
         onSuccess: () => {
           toast.dismiss();
           toast.success("Staked successfully");
+          reloadAccountInfo();
         },
         onDropped: () => {
           toast.dismiss();
@@ -250,6 +253,7 @@ const ManageStaking = (props: { isOpen: boolean; }) => {
             onSuccess: () => {
               toast.dismiss();
               toast.success("Unstaked successfully");
+              reloadAccountInfo();
             },
             onDropped: () => {
               toast.dismiss();
@@ -364,11 +368,7 @@ const ManageStaking = (props: { isOpen: boolean; }) => {
       isAltBalance(true);
 
       if (selectedCoreInfo?.userStaked) {
-        const stakedBalance = formatBalance(selectedCoreInfo?.userStaked?.toString(), {
-          decimals: 12,
-          withUnit: false,
-          forceUnit: "-",
-        }).slice(0, -2) || "0";
+        const stakedBalance = formatBalanceSafely(selectedCoreInfo?.userStaked?.toString());
         setCoreStakedBalance(stakedBalance);
       }
       return;
@@ -428,17 +428,10 @@ const ManageStaking = (props: { isOpen: boolean; }) => {
               <div className="flex flex-row justify-around gap-4 sm:flex-auto mb-4">
                 <div className="text-sm text-white text-center">
                   <div className="font-bold">
-                    {formatBalance(
+                    {formatBalanceSafely(
                       metadata?.availableBalance
                         ? metadata.availableBalance.toString()
-                        : "0",
-                      {
-                        decimals: 12,
-                        withUnit: false,
-                        forceUnit: "-",
-                      }
-                    ).slice(0, -2) || "0"}{" "}
-                    TNKR
+                        : "0")}
                   </div>
                   <div className="text-xxs/none">Available Balance</div>
                 </div>
@@ -447,11 +440,7 @@ const ManageStaking = (props: { isOpen: boolean; }) => {
                   metadata?.totalUserStaked.toString() !== "0" ? (
                   <div className="text-sm text-white text-center">
                     <div className="font-bold">
-                      {formatBalance(metadata?.totalUserStaked?.toString(), {
-                        decimals: 12,
-                        withUnit: false,
-                        forceUnit: "-",
-                      }).slice(0, -2) || "0"} TNKR
+                      {formatBalanceSafely(metadata?.totalUserStaked?.toString())}
                     </div>
                     <div className="text-xxs/none">Currently Staked</div>
                   </div>
@@ -512,12 +501,12 @@ const ManageStaking = (props: { isOpen: boolean; }) => {
                           <div className="flex-grow">
                             <label
                               htmlFor="stakeAmount"
-                              className="block text-xxs font-medium text-white mb-1"
+                              className="block text-xxs font-medium text-white mb-1 truncate"
                             >
                               <span>Stake Amount</span>
                               {altBalance ?
                                 <span className="float-right">
-                                  Balance: <span className="font-bold">{coreStakedBalance}</span> TNKR
+                                  Balance: <span className="font-bold">{coreStakedBalance}</span>
                                 </span> : null}
                             </label>
                             <div className="relative flex flex-row items-center">
diff --git a/src/providers/balance.tsx b/src/providers/balance.tsx
new file mode 100644
index 0000000..5a5654e
--- /dev/null
+++ b/src/providers/balance.tsx
@@ -0,0 +1,42 @@
+import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import BigNumber from 'bignumber.js';
+import useApi from '../hooks/useApi';
+import useAccount from '../stores/account';
+
+interface BalanceContextType {
+  availableBalance: BigNumber;
+  reloadAccountInfo: () => void;
+}
+
+const BalanceContext = createContext<BalanceContextType>({
+  availableBalance: new BigNumber(0),
+  reloadAccountInfo: () => { },
+});
+
+export const BalanceProvider = ({ children }: { children: ReactNode; }) => {
+  const [availableBalance, setAvailableBalance] = useState(new BigNumber(0));
+  const api = useApi();
+  const { selectedAccount } = useAccount();
+
+  const loadAccountInfo = useCallback(async () => {
+    if (!selectedAccount || !api) return;
+    const account = await api.query.system.account(selectedAccount.address);
+    const balance = account.toPrimitive() as { data: { free: string; }; };
+    const locked = (await api.query.ocifStaking.ledger(selectedAccount.address)).toPrimitive() as { locked: string; };
+    const currentBalance = new BigNumber(balance.data.free).minus(new BigNumber(locked.locked));
+
+    setAvailableBalance(currentBalance);
+  }, [api, selectedAccount]);
+
+  useEffect(() => {
+    loadAccountInfo();
+  }, [selectedAccount, api, loadAccountInfo]);
+
+  return (
+    <BalanceContext.Provider value={{ availableBalance, reloadAccountInfo: loadAccountInfo }}>
+      {children}
+    </BalanceContext.Provider>
+  );
+};
+
+export const useBalance = () => useContext(BalanceContext);
\ No newline at end of file
diff --git a/src/stores/rpc.tsx b/src/stores/rpc.tsx
index 5410bcc..4bf0a8d 100644
--- a/src/stores/rpc.tsx
+++ b/src/stores/rpc.tsx
@@ -18,8 +18,8 @@ type RPCState = {
 };
 
 const useRPC = createWithEqualityFn<RPCState>()((set, get) => ({
-  host: host.REMOTE,
-  // host: host.LOCAL,
+  // host: host.REMOTE,
+  host: host.LOCAL,
   setHost: (host: Host) => set(() => ({ host })),
   error: null,
   createApi: async (options) => {
diff --git a/src/utils/formatBalanceSafely.ts b/src/utils/formatBalanceSafely.ts
new file mode 100644
index 0000000..bb960b7
--- /dev/null
+++ b/src/utils/formatBalanceSafely.ts
@@ -0,0 +1,37 @@
+import { formatBalance } from "@polkadot/util";
+import BigNumber from "bignumber.js";
+
+export const formatBalanceSafely = (value: string | BigNumber) => {
+  try {
+    let valueAsBigNumber;
+    if (BigNumber.isBigNumber(value)) {
+      valueAsBigNumber = value;
+    } else {
+      // Convert string to BigNumber
+      valueAsBigNumber = new BigNumber(value);
+    }
+
+    // Scale the BigNumber value by 10^12 to avoid scientific notation for large/small numbers
+    const scaledValue = valueAsBigNumber.multipliedBy(new BigNumber(10).pow(12));
+    let valueAsString = scaledValue.toString(10);
+    // Check if the value is in scientific notation, even after scaling
+    if (/^(\d+(\.\d+)?)(e[+-]\d+)$/.test(valueAsString)) {
+      const numParts = valueAsString.split('e');
+      valueAsString = new BigNumber(numParts[0]).multipliedBy(new BigNumber(10).pow(numParts[1])).toString(10);
+    }
+    // Adjust the string back by dividing the scale, ensuring integer division
+    valueAsString = new BigNumber(valueAsString).dividedBy(new BigNumber(10).pow(12)).toString(10);
+
+    // Validate that the value is a string containing only digits and optionally a single dot for decimal values
+    if (!/^\d*\.?\d*$/.test(valueAsString)) {
+      console.error("Invalid value for formatting, contains non-numeric characters:", value);
+      return "Invalid Input"; // Return a placeholder or handle the error as appropriate
+    }
+
+    // If the value is valid, call formatBalance
+    return formatBalance(valueAsString, { decimals: 12, withUnit: "TNKR", forceUnit: "-" });
+  } catch (error) {
+    console.error("Error formatting balance:", error);
+    return "Error"; // Error or fallback value
+  }
+};
\ No newline at end of file
diff --git a/src/utils/vestingServices.ts b/src/utils/vestingServices.ts
index 8ee6acf..0c46e51 100644
--- a/src/utils/vestingServices.ts
+++ b/src/utils/vestingServices.ts
@@ -1,8 +1,8 @@
-import { formatBalance } from "@polkadot/util";
 import BigNumber from "bignumber.js";
 import { VestingScheduleLineItem, DataResultType, LockType, SystemAccount, VestingSchedule } from "../routes/claim";
 import { ApiPromise } from "@polkadot/api";
 import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
+import { formatBalanceSafely } from "./formatBalanceSafely";
 
 export const fetchSystemData = async (selectedAccount: InjectedAccountWithMeta, api: ApiPromise): Promise<DataResultType> => {
   if (!selectedAccount || !api) {
@@ -129,11 +129,17 @@ export const calculateVestingData = (results: DataResultType, vestingSchedules:
   // Calculate the end of the vesting period
   const endOfVestingPeriod = new Date(currentDate.getTime() + remainingVestingPeriodInSeconds * 1000);
 
+  // Use formatBalanceSafely instead of formatBalance in your calculations
+  const vestedClaimable = formatBalanceSafely(unlockedClaimableTokens);
+  const vestedRemaining = formatBalanceSafely(totalFutureLockedTokens);
+  const frozenFormatted = formatBalanceSafely(frozen);
+  const availableFormatted = formatBalanceSafely(available);
+
   return {
-    vestedClaimable: formatBalance(unlockedClaimableTokens.toString(), { decimals: 12, withUnit: "TNKR", forceUnit: "-" }),
-    vestedRemaining: formatBalance(totalFutureLockedTokens.toString(), { decimals: 12, withUnit: "TNKR", forceUnit: "-" }),
-    frozen: formatBalance(frozen.toString(), { decimals: 12, withUnit: "TNKR", forceUnit: "-" }),
-    available: formatBalance(available.toString(), { decimals: 12, withUnit: "TNKR", forceUnit: "-" }),
+    vestedClaimable,
+    vestedRemaining,
+    frozen: frozenFormatted,
+    available: availableFormatted,
     remainingVestingPeriod: new Intl.NumberFormat("en-US", {}).format(remainingVestingPeriod),
     endOfVestingPeriod
   };

From 9a83c239e2c36f00c4afba6354dadfe8262d22b0 Mon Sep 17 00:00:00 2001
From: Yaki <shibatales@gmail.com>
Date: Fri, 2 Feb 2024 18:39:31 -0800
Subject: [PATCH 3/5] Remove unnecessary code in LoginButton component

---
 src/components/LoginButton.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
index 78988e3..bd038fa 100644
--- a/src/components/LoginButton.tsx
+++ b/src/components/LoginButton.tsx
@@ -11,7 +11,7 @@ import { formatBalanceToTwoDecimals } from "../utils/formatNumber";
 import { useBalance } from "../providers/balance";
 
 const LoginButton = () => {
-  const { availableBalance, reloadAccountInfo } = useBalance();
+  const { availableBalance } = useBalance();
   const [isHovered, setIsHovered] = useState(false);
   const [showFirstSpan, setShowFirstSpan] = useState(true);
   const { handleConnect } = useConnect();
@@ -54,10 +54,6 @@ const LoginButton = () => {
     return () => clearInterval(intervalId);
   }, []);
 
-  useEffect(() => {
-    reloadAccountInfo();
-  }, [reloadAccountInfo]);
-
   const formattedBalance = availableBalance ? formatBalanceToTwoDecimals(availableBalance) : 0;
 
   return <Button

From cfa3c3d417dc1f8bcc7645c0ae0f89fa40e01306 Mon Sep 17 00:00:00 2001
From: Yaki <shibatales@gmail.com>
Date: Fri, 2 Feb 2024 18:58:12 -0800
Subject: [PATCH 4/5] Fix claimAllSuccess bug and switch to remote host

---
 src/routes/staking.tsx    | 8 ++++----
 src/stores/rpc.tsx        | 4 ++--
 src/utils/restakeClaim.ts | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/staking.tsx b/src/routes/staking.tsx
index 7670955..9f55166 100644
--- a/src/routes/staking.tsx
+++ b/src/routes/staking.tsx
@@ -456,16 +456,16 @@ const Staking = () => {
 
     setTotalUnclaimed(new BigNumber(0));
     setUnclaimedEras({ cores: [], total: 0 });
-    setClaimAllSuccess(result);
+    setClaimAllSuccess(true);
     refreshQuery();
   };
 
-  const refreshQuery = () => {
+  const refreshQuery = useCallback(() => {
     if (!claimAllSuccess) return;
     reexecuteQuery({ requestPolicy: 'network-only' });
     reexecuteCoreQuery({ requestPolicy: 'network-only' });
     setClaimAllSuccess(false);
-  };
+  }, [claimAllSuccess, reexecuteQuery, reexecuteCoreQuery]);
 
   const disableClaiming = useMemo(() => {
     return isWaiting || unclaimedEras.total === 0 && totalUnclaimed.toNumber() === 0;
@@ -525,7 +525,7 @@ const Staking = () => {
     if (initialUnclaimed.current === null) {
       initialUnclaimed.current = totalUnclaimed;
     }
-  }, [selectedAccount, rewardsUserClaimedQuery.fetching, rewardsUserClaimedQuery.data, claimAllSuccess]);
+  }, [selectedAccount, rewardsUserClaimedQuery.fetching, rewardsUserClaimedQuery.data, claimAllSuccess, refreshQuery]);
 
   useEffect(() => {
     if (rewardsCoreClaimedQuery.fetching || !rewardsCoreClaimedQuery.data?.cores?.length || !selectedAccount) return;
diff --git a/src/stores/rpc.tsx b/src/stores/rpc.tsx
index 4bf0a8d..5410bcc 100644
--- a/src/stores/rpc.tsx
+++ b/src/stores/rpc.tsx
@@ -18,8 +18,8 @@ type RPCState = {
 };
 
 const useRPC = createWithEqualityFn<RPCState>()((set, get) => ({
-  // host: host.REMOTE,
-  host: host.LOCAL,
+  host: host.REMOTE,
+  // host: host.LOCAL,
   setHost: (host: Host) => set(() => ({ host })),
   error: null,
   createApi: async (options) => {
diff --git a/src/utils/restakeClaim.ts b/src/utils/restakeClaim.ts
index 5518fbe..9a0e685 100644
--- a/src/utils/restakeClaim.ts
+++ b/src/utils/restakeClaim.ts
@@ -61,7 +61,7 @@ export const restakeClaim = async ({
       uniqueCores.forEach(core => {
         if (!core?.earliestEra) return;
         const restakeUnclaimedAmount = handleRestakingLogic(undefined, uniqueCores.length);
-        if (restakeUnclaimedAmount && !restakeUnclaimedAmount.isZero()) {
+        if (restakeUnclaimedAmount && restakeUnclaimedAmount.isGreaterThan(0)) {
           const restakeAmountInteger = restakeUnclaimedAmount.integerValue().toString();
           batch.push(api.tx.ocifStaking.stake(core.coreId, restakeAmountInteger));
         }
@@ -110,7 +110,7 @@ export const restakeClaim = async ({
     // Send the transaction batch
     // Casting batch to the correct type to satisfy the linting error
     const castedBatch = rebuildBatch as Vec<Call>;
-    
+
     // FIX: Changed the batchAll to batch to solve the claim issues.
     // Issue is caused by batchAll failing when trying to claim an era where stake == 0, prob due to stake being moved to another core.
     // TODO: Proper solution is to still use batchAll but not attempt to claim eras where stake == 0

From caac4935ef863bb656bc5304f638d8bb69540bf6 Mon Sep 17 00:00:00 2001
From: Yaki <shibatales@gmail.com>
Date: Fri, 2 Feb 2024 19:00:17 -0800
Subject: [PATCH 5/5] Fix background color issue in ProjectCard component

---
 src/components/ProjectCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 384e72d..32799cc 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -133,7 +133,7 @@ const ProjectCard = (props: ProjectCardProps) => {
         htmlElement.style.backgroundColor = '';
       }
     });
-  }, []);
+  }, [mini]);
 
   useEffect(() => {
     loadAggregateStaked();