diff --git a/package.json b/package.json
index bf7e1680..c240ec13 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,9 @@
     "@masa-finance/masa-sdk": "^3.2.1",
     "@metamask/providers": "^11.0.0",
     "@rainbow-me/rainbowkit": "0.12.14",
+    "@tanstack/query-sync-storage-persister": "^4.27.1",
+    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query-persist-client": "^4.28.0",
     "@wagmi/core": "0.10.11",
     "babel-loader": "^9.1.2",
     "babel-plugin-import": "^1.13.6",
@@ -76,6 +79,7 @@
     "@storybook/addons": "^7.0.2",
     "@storybook/react": "^7.0.18",
     "@storybook/react-webpack5": "^7.0.12",
+    "@tanstack/react-query-devtools": "^4.29.12",
     "@types/jest": "^29.5.0",
     "@types/mocha": "^10.0.1",
     "@types/node": "^20.1.5",
diff --git a/src/refactor/masa-client/use-masa-sdk.ts b/src/refactor/masa-client/use-masa-sdk.ts
index e7d52fc3..e77dc8aa 100644
--- a/src/refactor/masa-client/use-masa-sdk.ts
+++ b/src/refactor/masa-client/use-masa-sdk.ts
@@ -1,10 +1,15 @@
 import { Masa } from '@masa-finance/masa-sdk';
+import { Signer } from 'ethers';
 import { useMemo } from 'react';
 
-export const useMasa = ({ signer }) => {
-  const masa = useMemo(() => new Masa({
-      signer,
-    }), [signer]);
+export const useMasaSDK = ({ signer }: { signer: Signer }) => {
+  const masa = useMemo(
+    () =>
+      new Masa({
+        signer,
+      }),
+    [signer]
+  );
 
   return masa;
 };
diff --git a/src/refactor/masanew.stories.tsx b/src/refactor/masanew.stories.tsx
index 7fc35678..e3da341b 100644
--- a/src/refactor/masanew.stories.tsx
+++ b/src/refactor/masanew.stories.tsx
@@ -1,3 +1,5 @@
+import * as buffer from 'buffer';
+
 import type { Args, Meta } from '@storybook/react';
 import type { Chain } from 'wagmi';
 import React from 'react';
@@ -9,6 +11,12 @@ import MasaProvider from './masa-provider';
 import { useWallet } from './wallet-client/wallet/use-wallet';
 import { useNetwork } from './wallet-client/network/use-network';
 
+// * nextjs fix
+// * TODO: move this to index.ts file at some point
+if (typeof window !== 'undefined') {
+  window.Buffer = buffer.Buffer;
+}
+
 const meta: Meta = {
   title: 'Refactor Test',
   component: () => <div />,
@@ -37,6 +45,7 @@ const NetworkInfo = () => {
     <ul>
       <h3>Chain / Network</h3>
       <li>Chain: {activeChain?.name}</li>
+      <li>chain-id: {activeChain?.id}</li>
       <li>isSwitchingChain: {String(isSwitchingChain)}</li>
       <li>switchingToChain: {String(switchingToChain)}</li>
       <li>
@@ -44,21 +53,61 @@ const NetworkInfo = () => {
         {String(canProgramaticallySwitchNetwork)}
       </li>
       <li>isActiveChainUnsupported: {String(isActiveChainUnsupported)}</li>
-      <li>
-        <ul style={{ flexDirection: 'row' }}>
+      <li style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
+        <ul
+          className="width-50"
+          style={{
+            flexDirection: 'row',
+            width: '50%',
+            alignItems: 'center',
+            justifyContent: 'center',
+
+            flexWrap: 'wrap',
+          }}
+        >
+          <h3 className="flex-100">Switch Network</h3>
           {chains.map((chain: Chain) => (
-            <li key={chain.name}>
+            <li
+              style={{
+                fontSize: '10px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              key={chain.name}
+            >
               <Button
-                style={{ maxWidth: '48px', fontSize: '10px' }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+
+                  fontSize: '16px',
+                }}
                 disabled={!canProgramaticallySwitchNetwork}
                 type="button"
-                onClick={() => switchNetwork?.(chain.id)}
+                onClick={() => {
+                  console.log({ chain });
+                  try {
+                    switchNetwork?.(chain.id);
+                  } catch (error: unknown) {
+                    console.log({ e: error });
+                  }
+                }}
               >
-                Switch to {chain.name}
+                Switch to {chain.testnet ? 'Testnet' : ''} {chain.name}
               </Button>
             </li>
           ))}
         </ul>
+        <ul className="width-50">
+          <h3>Availible Chains</h3>
+          {chains.map((chain) => (
+            <li key={chain.name}>
+              <span>{chain.name}</span>
+            </li>
+          ))}
+        </ul>
       </li>
     </ul>
   );
@@ -79,27 +128,40 @@ const WalletInfo = () => {
     disconnect,
     // disconnectAsync,
     isLoadingSigner,
+    isLoadingBalance,
+    balance,
   } = useWallet();
 
   return (
-    <ul>
-      <h3>Wallet</h3>
-      <li>address: {address}</li>
-      <li>isConnected: {String(isConnected)}</li>
-      <li>isConnecting: {String(isConnecting)}</li>
-      <li>isDisconnected: {String(isDisconnected)}</li>
-      <li>isLoadingSigner: {String(isLoadingSigner)}</li>
-      <li>activeConnector: {connector?.name}</li>
+    <ul className="row wrap">
+      <li className="flex-50">
+        <ul>
+          <h3>Wallet</h3>
+          <li>address: {address}</li>
+          <li>activeConnector: {connector?.name}</li>
+          <li>isConnected: {String(isConnected)}</li>
+          <li>isConnecting: {String(isConnecting)}</li>
+          <li>isDisconnected: {String(isDisconnected)}</li>
+          <li>isLoadingSigner: {String(isLoadingSigner)}</li>
+          <li>isLoadingBalance: {String(isLoadingBalance)}</li>
+          <li>balance: {balance}</li>
+        </ul>
+      </li>
       <li>
-        <Button
-          type="button"
-          disabled={isDisconnected}
-          onClick={() => {
-            disconnect?.();
-          }}
-        >
-          Disconnect
-        </Button>
+        <ul>
+          <h3>Wagmi Functions</h3>
+          <li>
+            <Button
+              type="button"
+              disabled={isDisconnected}
+              onClick={() => {
+                disconnect?.();
+              }}
+            >
+              Disconnect
+            </Button>
+          </li>
+        </ul>
       </li>
 
       <li>
diff --git a/src/refactor/ui/styles.scss b/src/refactor/ui/styles.scss
index 76a55e37..4b38a77f 100644
--- a/src/refactor/ui/styles.scss
+++ b/src/refactor/ui/styles.scss
@@ -6,8 +6,23 @@
   --z-index-front: 1000;
   --color-secondary: black;
   --color-primary: white;
+  --base-padding: 8px;
+  --base-margin: 8px;
 }
 
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.wrap {
+  flex-wrap: wrap;
+}
+.column {
+  display: flex;
+  flex-direction: column;
+}
 * {
   box-sizing: border-box;
   margin: 0;
@@ -25,20 +40,32 @@ h3 {
 }
 
 section {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  align-items: start;
+  flex-wrap: wrap;
+
   justify-content: center;
 }
+
 ul {
-  margin: 8px;
-  padding: 8px;
+  width: 100%;
+  margin: var(--base-margin);
+  padding: var(--base-padding);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  ul {
+    &:nth-child(3n) {
+      flex-basis: 100%;
+    }
+  }
+
   h3 {
     text-decoration: underline;
+    text-align: center;
   }
   list-style: none;
   border: 1px solid black;
@@ -48,5 +75,15 @@ ul {
   }
 }
 
+.flex-100 {
+  flex-basis: 100%;
+}
+.flex-50 {
+  flex-basis: 50%;
+}
+.width-50 {
+  width: calc(50% - 32px);
+}
+
 @import '~@rainbow-me/rainbowkit/styles.css';
 @import '~react-phone-number-input/style.css';
diff --git a/src/refactor/wallet-client/network/index.ts b/src/refactor/wallet-client/network/index.ts
new file mode 100644
index 00000000..3de1011c
--- /dev/null
+++ b/src/refactor/wallet-client/network/index.ts
@@ -0,0 +1 @@
+export * from './use-network';
diff --git a/src/refactor/wallet-client/network/use-network.ts b/src/refactor/wallet-client/network/use-network.ts
index 41850599..74b37d8a 100644
--- a/src/refactor/wallet-client/network/use-network.ts
+++ b/src/refactor/wallet-client/network/use-network.ts
@@ -4,15 +4,22 @@ import {
   useSwitchNetwork,
   useNetwork as useNetworkWagmi,
   useAccount,
+  useConnect,
 } from 'wagmi';
 
 export const useNetwork = () => {
   const { switchNetwork: switchNetworkWagmi, error: networkError } =
     useSwitchNetwork();
   const { connector: activeConnector } = useAccount();
+  const { connectors, pendingConnector } = useConnect();
   const { chains, chain: activeChain } = useNetworkWagmi();
   const [switchingToChain, setSwitchingToChain] = useState<number | null>();
-  console.log({ switchingToChain });
+
+  const availibleConnectors = useMemo(
+    () => connectors.map((c) => c.chains),
+    [connectors]
+  );
+  console.log({ pendingConnector, connectors, availibleConnectors });
   const isSwitchingChain = useMemo(
     () => !!switchingToChain,
     [switchingToChain]
diff --git a/src/refactor/wallet-client/wallet-client-provider.tsx b/src/refactor/wallet-client/wallet-client-provider.tsx
index bc120356..d2d5500c 100644
--- a/src/refactor/wallet-client/wallet-client-provider.tsx
+++ b/src/refactor/wallet-client/wallet-client-provider.tsx
@@ -29,9 +29,13 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
     isConnecting,
     isDisconnected,
     openConnectModal,
+    openChainModal,
+    openAccountModal,
     disconnect,
     disconnectAsync,
     isLoadingSigner,
+    isLoadingBalance,
+    balance,
   } = useWallet();
   const {
     switchNetwork,
@@ -63,9 +67,13 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
         isConnecting,
         isDisconnected,
         openConnectModal,
+        openChainModal,
+        openAccountModal,
         disconnect,
         disconnectAsync,
         isLoadingSigner,
+        isLoadingBalance,
+        balance,
 
         // network
         switchNetwork,
@@ -86,9 +94,13 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
       isConnecting,
       isDisconnected,
       openConnectModal,
+      openChainModal,
+      openAccountModal,
       disconnect,
       disconnectAsync,
       isLoadingSigner,
+      isLoadingBalance,
+      balance,
 
       // network
       switchNetwork,
diff --git a/src/refactor/wallet-client/wallet/types.d.ts b/src/refactor/wallet-client/wallet/types.d.ts
new file mode 100644
index 00000000..d3bfa7fd
--- /dev/null
+++ b/src/refactor/wallet-client/wallet/types.d.ts
@@ -0,0 +1,8 @@
+import type { Provider } from '@wagmi/core';
+import type { Signer } from 'ethers';
+
+export type UseWalletReturnType = {
+  address: `0x${string}` | undefined;
+  provider: Provider;
+  signer: Signer | undefined;
+};
diff --git a/src/refactor/wallet-client/wallet/use-wallet.ts b/src/refactor/wallet-client/wallet/use-wallet.ts
index 1ee4d585..8e5e683a 100644
--- a/src/refactor/wallet-client/wallet/use-wallet.ts
+++ b/src/refactor/wallet-client/wallet/use-wallet.ts
@@ -5,7 +5,13 @@ import {
 } from '@rainbow-me/rainbowkit';
 import { useMemo } from 'react';
 
-import { useAccount, useDisconnect, useProvider, useSigner } from 'wagmi';
+import {
+  useAccount,
+  useBalance,
+  useDisconnect,
+  useProvider,
+  useSigner,
+} from 'wagmi';
 
 const useWallet = () => {
   const { openConnectModal } = useConnectModal();
@@ -16,6 +22,21 @@ const useWallet = () => {
   const provider = useProvider();
   const { data: signer, isLoading: isLoadingSigner } = useSigner();
   const { disconnect, disconnectAsync } = useDisconnect();
+  const {
+    data: balanceResult,
+    // isError: isErrorBalance,
+    isLoading: isLoadingBalance,
+  } = useBalance({
+    address,
+  });
+
+  const balance = useMemo(
+    () =>
+      `${balanceResult?.formatted as string} ${
+        balanceResult?.symbol as string
+      }`,
+    [balanceResult]
+  );
 
   const useWalletValue = useMemo(
     () => ({
@@ -32,6 +53,8 @@ const useWallet = () => {
       disconnect,
       disconnectAsync,
       isLoadingSigner,
+      isLoadingBalance,
+      balance,
     }),
     [
       address,
@@ -47,6 +70,8 @@ const useWallet = () => {
       disconnect,
       disconnectAsync,
       isLoadingSigner,
+      isLoadingBalance,
+      balance,
     ]
   );
 
diff --git a/stories/unused.tsx b/stories/masa.stories.tsx
similarity index 100%
rename from stories/unused.tsx
rename to stories/masa.stories.tsx
diff --git a/yarn.lock b/yarn.lock
index 97e4e5d6..c031ffc9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4257,6 +4257,13 @@
     "@types/express" "^4.7.0"
     file-system-cache "^2.0.0"
 
+"@tanstack/match-sorter-utils@^8.7.0":
+  version "8.8.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
+  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
+  dependencies:
+    remove-accents "0.4.2"
+
 "@tanstack/query-core@4.29.7":
   version "4.29.7"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.7.tgz#9fe4587e23cb9566b937c518ffa44226041d388d"
@@ -4276,6 +4283,15 @@
   dependencies:
     "@tanstack/query-persist-client-core" "4.29.7"
 
+"@tanstack/react-query-devtools@^4.29.12":
+  version "4.29.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.29.12.tgz#a5180bbd850dde6c81f87296acba1ac94302f936"
+  integrity sha512-ug4YGQhMhh6QI8/sWJhjXxuvdeehxf1cyxpTifGMH5qreQ5ECHT6vzqG/aKvADQDzqLBGrF0q4wTDnRRYvvtrA==
+  dependencies:
+    "@tanstack/match-sorter-utils" "^8.7.0"
+    superjson "^1.10.0"
+    use-sync-external-store "^1.2.0"
+
 "@tanstack/react-query-persist-client@^4.28.0":
   version "4.29.7"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-4.29.7.tgz#b62f4aca83d6c89ed78acd524a376b3892b7347f"
@@ -7155,6 +7171,13 @@ cookie@0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+copy-anything@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
+  integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
+  dependencies:
+    is-what "^4.1.8"
+
 copy-to-clipboard@^3.3.1, copy-to-clipboard@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
@@ -10323,6 +10346,11 @@ is-weakset@^2.0.1:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+is-what@^4.1.8:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
+  integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
+
 is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -15205,6 +15233,13 @@ stylis@^4.0.6:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
+superjson@^1.10.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.12.3.tgz#383aacfd795c6eef24c383c70154c6cbbcbfb31a"
+  integrity sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==
+  dependencies:
+    copy-anything "^3.0.2"
+
 superstruct@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b"