@xyo-network/react-chain-provider 1.16.2 → 1.16.4

package/dist/browser/components/account/BalanceHistoryFlexbox.d.ts

@@ -0,0 +1,11 @@
+import { type Address } from '@xylabs/hex';
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { XyoViewer } from '@xyo-network/xl1-protocol-sdk';
+import React from 'react';
+export interface AccountBalanceHistoryFlexBoxProps extends FlexBoxProps {
+    address?: Address;
+    refresh?: number;
+    viewer?: XyoViewer;
+}
+export declare const AccountBalanceHistoryFlexBox: React.FC<AccountBalanceHistoryFlexBoxProps>;
+//# sourceMappingURL=BalanceHistoryFlexbox.d.ts.map

package/dist/browser/components/account/BalanceHistoryFlexbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceHistoryFlexbox.d.ts","sourceRoot":"","sources":["../../../../src/components/account/BalanceHistoryFlexbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAKzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,iCAAkC,SAAQ,YAAY;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB;AAED,eAAO,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC,iCAAiC,CA6CpF,CAAA"}

package/dist/browser/components/account/BalanceHistoryFlexbox.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/react-vite';
+declare const _default: Meta;
+export default _default;
+declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./BalanceHistoryFlexbox.tsx").AccountBalanceHistoryFlexBoxProps>;
+export { Default };
+//# sourceMappingURL=BalanceHistoryFlexbox.stories.d.ts.map

package/dist/browser/components/account/BalanceHistoryFlexbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceHistoryFlexbox.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/account/BalanceHistoryFlexbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;wBAWrD,IAAI;AAHT,wBAGS;AAOT,QAAA,MAAM,OAAO,sKAAoB,CAAA;AAMjC,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/browser/components/account/BalanceHistoryTable.d.ts

@@ -0,0 +1,8 @@
+import type { TableProps } from '@mui/material';
+import React from 'react';
+import type { AccountBalanceHistoryItemRow } from '../../types/index.ts';
+export interface AccountBalanceHistoryTableProps extends TableProps {
+    history?: AccountBalanceHistoryItemRow[];
+}
+export declare const AccountBalanceHistoryTable: React.FC<AccountBalanceHistoryTableProps>;
+//# sourceMappingURL=BalanceHistoryTable.d.ts.map

package/dist/browser/components/account/BalanceHistoryTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceHistoryTable.d.ts","sourceRoot":"","sources":["../../../../src/components/account/BalanceHistoryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAa/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAA;AAGxE,MAAM,WAAW,+BAAgC,SAAQ,UAAU;IACjE,OAAO,CAAC,EAAE,4BAA4B,EAAE,CAAA;CACzC;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CAwDhF,CAAA"}

package/dist/browser/components/account/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BalanceHistoryFlexbox.tsx';
+export * from './BalanceHistoryTable.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/account/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/account/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA"}

package/dist/browser/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from './account/index.ts';
 export * from './connected/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA"}

package/dist/browser/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './client/index.ts';
 export * from './helpers/index.ts';
+export * from './useAccountBalanceHistory.ts';
 export * from './useAddressBalance.ts';
 export * from './useConfirmTransactionBase.ts';
 export * from './useConnectAccount.ts';

package/dist/browser/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA"}

package/dist/browser/hooks/useAccountBalanceHistory.d.ts

@@ -0,0 +1,11 @@
+import { type Address } from '@xylabs/hex';
+import type { AttoXL1 } from '@xyo-network/xl1-protocol';
+import type { AccountBalanceHistoryItem, XyoViewer } from '@xyo-network/xl1-protocol-sdk';
+import type { AccountBalanceHistoryItemRow } from '../types/index.ts';
+export declare const formatAccountBalanceHistory: (address: Address, history: AccountBalanceHistoryItem[]) => AccountBalanceHistoryItemRow[];
+export declare const useAccountBalanceHistory: (address?: Address, viewer?: XyoViewer, refresh?: number) => [{
+    history: AccountBalanceHistoryItemRow[];
+    balance: [AttoXL1, AttoXL1];
+    truncated: boolean;
+} | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
+//# sourceMappingURL=useAccountBalanceHistory.d.ts.map

package/dist/browser/hooks/useAccountBalanceHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccountBalanceHistory.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccountBalanceHistory.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EAGb,MAAM,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAA;AACvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAEzF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAA;AAErE,eAAO,MAAM,2BAA2B,GAAI,SAAS,OAAO,EAAE,SAAS,yBAAyB,EAAE,KAAG,4BAA4B,EAiChI,CAAA;AAqBD,eAAO,MAAM,wBAAwB,GAAI,UAAU,OAAO,EAAE,SAAS,SAAS,EAAE,UAAU,MAAM;;;;8FAqC/F,CAAA"}

package/dist/browser/hooks/viewer/useViewerFromWallet.d.ts

@@ -5,5 +5,5 @@ import type { GatewayName } from '@xyo-network/xl1-protocol';
  * @returns An instance of XyoViewer if the networkId is found in wallet gateways
  * otherwise undefined.
  */
-export declare const useViewerFromWallet: (networkId?: GatewayName) => import("@xyo-network/xl1-protocol-sdk").XyoViewer | null | undefined;
+export declare const useViewerFromWallet: (networkId?: GatewayName) => [import("@xyo-network/xl1-protocol-sdk").XyoViewer | null | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
 //# sourceMappingURL=useViewerFromWallet.d.ts.map

package/dist/browser/hooks/viewer/useViewerFromWallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewerFromWallet.d.ts","sourceRoot":"","sources":["../../../../src/hooks/viewer/useViewerFromWallet.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAI5D;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,YAAY,WAAW,yEAW1D,CAAA"}
+{"version":3,"file":"useViewerFromWallet.d.ts","sourceRoot":"","sources":["../../../../src/hooks/viewer/useViewerFromWallet.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAI5D;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,YAAY,WAAW,2JAa1D,CAAA"}

package/dist/browser/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/index.ts';
 export * from './hooks/index.ts';
+export * from './types/index.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA"}

package/dist/browser/index.mjs

@@ -1,35 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// src/components/connected/account/Connected.tsx
-import { Stack, Tooltip, Typography } from "@mui/material";
-import { EthAddressWrapper } from "@xylabs/eth-address";
-import { BlockiesAvatarAddress } from "@xyo-network/react-chain-blockies";
-import React from "react";
-var ConnectedAccount = /* @__PURE__ */ __name(({ address }) => {
-  const shortenedAddress = `${EthAddressWrapper.fromString(address)?.toShortString(4)}`;
-  return /* @__PURE__ */ React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    spacing: 1
-  }, /* @__PURE__ */ React.createElement(BlockiesAvatarAddress, {
-    address,
-    size: 21
-  }), /* @__PURE__ */ React.createElement(Tooltip, {
-    title: address
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    color: "textSecondary",
-    variant: "caption",
-    fontFamily: "monospace"
-  }, shortenedAddress)));
-}, "ConnectedAccount");
-
-// src/components/connected/ConnectAccountsStack.tsx
-import { Alert, AlertTitle, Button, Stack as Stack2, Typography as Typography2 } from "@mui/material";
-import { ButtonEx } from "@xylabs/react-button";
-import { isDefined as isDefined7, isUndefined as isUndefined6 } from "@xylabs/typeof";
+// src/components/account/BalanceHistoryFlexbox.tsx
+import { Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { isDefined as isDefined8 } from "@xylabs/typeof";
 import { ErrorRender } from "@xyo-network/react-error";
-import React2, { useEffect as useEffect3 } from "react";
+import { AttoXL1, XL1Amount as XL1Amount2 } from "@xyo-network/xl1-protocol";
+import React2 from "react";
 
 // src/hooks/client/useClient.ts
 import { useSyncExternalStore } from "react";
@@ -299,9 +277,100 @@ var useGateway = /* @__PURE__ */ __name((gatewayName, timeout) => {
   };
 }, "useGateway");
 
-// src/hooks/useAddressBalance.ts
+// src/hooks/useAccountBalanceHistory.ts
+import { hexToBigInt, toHex } from "@xylabs/hex";
 import { usePromise as usePromise2 } from "@xylabs/react-promise";
-import { isUndefined, isUndefinedOrNull } from "@xylabs/typeof";
+import { isUndefined } from "@xylabs/typeof";
+var formatAccountBalanceHistory = /* @__PURE__ */ __name((address, history) => {
+  let results = [];
+  for (const item of history) {
+    const [blockBw, txBw, transfer] = item;
+    if (address === transfer.from) {
+      for (const [to, amount] of Object.entries(transfer.transfers)) {
+        results.push({
+          amount: hexToBigInt(amount),
+          blockNumber: blockBw.block,
+          from: transfer.from,
+          timestamp: blockBw.$epoch,
+          key: globalThis.crypto.randomUUID(),
+          to,
+          txHash: txBw?._hash,
+          debug: item,
+          type: "send"
+        });
+      }
+    } else {
+      results.push({
+        amount: hexToBigInt(transfer.transfers[address]),
+        blockNumber: blockBw.block,
+        from: transfer.from,
+        key: globalThis.crypto.randomUUID(),
+        timestamp: blockBw.$epoch,
+        to: address,
+        txHash: txBw?._hash,
+        debug: item,
+        type: "receive"
+      });
+    }
+  }
+  return results;
+}, "formatAccountBalanceHistory");
+var findMinimumBlock = /* @__PURE__ */ __name((history) => {
+  if (history.length === 0) return 0;
+  const blockNumbers = history.map(([blockBw]) => blockBw.block);
+  const min = Math.min(...blockNumbers);
+  return Math.max(min - 1, 0);
+}, "findMinimumBlock");
+var balanceForRange = /* @__PURE__ */ __name((address, results) => {
+  const totalReceivedBalance = results?.reduce((a, [_block, _tx, transfer]) => {
+    return a + hexToBigInt(transfer.transfers[address] ?? toHex(0));
+  }, 0n);
+  const totalSentBalance = results?.reduce((a, [_block, _tx, transfer]) => {
+    return transfer.from === address ? a + Object.values(transfer.transfers).reduce((a2, v) => a2 + (v ? hexToBigInt(v) : 0n), 0n) : a;
+  }, 0n);
+  return [
+    totalReceivedBalance,
+    totalSentBalance
+  ];
+}, "balanceForRange");
+var useAccountBalanceHistory = /* @__PURE__ */ __name((address, viewer, refresh) => {
+  return usePromise2(async () => {
+    if (isUndefined(viewer) || isUndefined(address)) return;
+    let page = 1;
+    let lastBlock;
+    const maxPage = 10;
+    const pagedHistory = [];
+    const history = await viewer.accountBalanceHistory(address);
+    if (history.length > 0) {
+      pagedHistory.push(...history);
+      lastBlock = findMinimumBlock(history);
+      while (page < maxPage) {
+        const nextHistory = await viewer.accountBalanceHistory(address, [
+          0,
+          lastBlock
+        ]);
+        if (nextHistory.length === 0) break;
+        lastBlock = findMinimumBlock(nextHistory);
+        pagedHistory.push(...nextHistory);
+        page++;
+      }
+    }
+    const formattedHistory = formatAccountBalanceHistory(address, pagedHistory);
+    return {
+      history: formattedHistory,
+      balance: balanceForRange(address, pagedHistory),
+      truncated: page >= maxPage
+    };
+  }, [
+    address,
+    viewer,
+    refresh
+  ]);
+}, "useAccountBalanceHistory");
+
+// src/hooks/useAddressBalance.ts
+import { usePromise as usePromise3 } from "@xylabs/react-promise";
+import { isUndefined as isUndefined2, isUndefinedOrNull } from "@xylabs/typeof";
 import { ShiftedBigInt } from "@xyo-network/xl1-protocol";
 import { useMemo, useRef, useState } from "react";
 var useAddressBalance = /* @__PURE__ */ __name((address, viewer, refresh) => {
@@ -309,8 +378,8 @@ var useAddressBalance = /* @__PURE__ */ __name((address, viewer, refresh) => {
   const [loading, setLoading] = useState(false);
   const [balancesError, setBalancesError] = useState();
   const balancePromiseRef = useRef(null);
-  usePromise2(async () => {
-    if (isUndefined(viewer) || isUndefined(address)) return;
+  usePromise3(async () => {
+    if (isUndefined2(viewer) || isUndefined2(address)) return;
     setLoading(true);
     setBalancesError(void 0);
     const currentPromise = viewer.accountBalance(address);
@@ -376,7 +445,7 @@ var useAddressBalance = /* @__PURE__ */ __name((address, viewer, refresh) => {
 // src/hooks/useConfirmTransactionBase.ts
 import { forget as forget2 } from "@xylabs/forget";
 import { isHash } from "@xylabs/hex";
-import { usePromise as usePromise3 } from "@xylabs/react-promise";
+import { usePromise as usePromise4 } from "@xylabs/react-promise";
 import { isDefined as isDefined4 } from "@xylabs/typeof";
 import { PayloadBuilder } from "@xyo-network/payload-builder";
 import { useEffect, useState as useState2 } from "react";
@@ -386,7 +455,7 @@ var useConfirmTransactionBase = /* @__PURE__ */ __name((transaction, onBroadcast
     setStatus(newStatus);
     onStatusUpdate?.(newStatus);
   }, "onStatusUpdateLocal");
-  const [transactionConfirmationStatus, transactionConfirmationError] = usePromise3(async () => {
+  const [transactionConfirmationStatus, transactionConfirmationError] = usePromise4(async () => {
     const hasRunner = isDefined4(runner);
     if (transaction && viewer) {
       const hash = hasRunner ? await runner.broadcastTransaction(transaction) : await PayloadBuilder.hash(transaction[0]);
@@ -438,7 +507,7 @@ var useConnectAccount = /* @__PURE__ */ __name((gatewayName = MainNetwork.id, ti
   const connectSigner = useCallback(async () => {
     try {
       const assertedGateway = assertEx2(gateway, () => `Gateway ${gatewayName} is not available`);
-      const signer = await assertedGateway.signer;
+      const signer = await assertedGateway.signer();
       const address2 = await signer.address();
       setAddress(address2);
       return address2;
@@ -459,10 +528,10 @@ var useConnectAccount = /* @__PURE__ */ __name((gatewayName = MainNetwork.id, ti
 }, "useConnectAccount");
 
 // src/hooks/useCurrentBlock.ts
-import { usePromise as usePromise4 } from "@xylabs/react-promise";
+import { usePromise as usePromise5 } from "@xylabs/react-promise";
 import { isDefinedNotNull as isDefinedNotNull2 } from "@xylabs/typeof";
 var useCurrentBlock = /* @__PURE__ */ __name((refresh = 1, viewer) => {
-  return usePromise4(async () => {
+  return usePromise5(async () => {
     if (isDefinedNotNull2(viewer) && refresh > 0) {
       const block = await viewer.currentBlock();
       return block;
@@ -474,12 +543,12 @@ var useCurrentBlock = /* @__PURE__ */ __name((refresh = 1, viewer) => {
 }, "useCurrentBlock");
 
 // src/hooks/useHttpRpcRunner.ts
-import { isUndefined as isUndefined2 } from "@xylabs/typeof";
+import { isUndefined as isUndefined3 } from "@xylabs/typeof";
 import { AllRpcSchemas, HttpRpcTransport, JsonRpcXyoRunner } from "@xyo-network/xl1-rpc";
 import { useMemo as useMemo2 } from "react";
 var useHttpRpcRunner = /* @__PURE__ */ __name((url) => {
   return useMemo2(() => {
-    if (isUndefined2(url)) {
+    if (isUndefined3(url)) {
       return;
     }
     const transport = new HttpRpcTransport(`${url}/rpc`, AllRpcSchemas);
@@ -490,12 +559,12 @@ var useHttpRpcRunner = /* @__PURE__ */ __name((url) => {
 }, "useHttpRpcRunner");
 
 // src/hooks/useNetwork.ts
-import { isUndefined as isUndefined3 } from "@xylabs/typeof";
+import { isUndefined as isUndefined4 } from "@xylabs/typeof";
 import { SimpleXyoNetwork } from "@xyo-network/xl1-protocol-sdk";
 import { useMemo as useMemo3 } from "react";
 var useNetwork = /* @__PURE__ */ __name((id) => {
   const network = useMemo3(() => {
-    if (isUndefined3(id)) return;
+    if (isUndefined4(id)) return;
     return new SimpleXyoNetwork(id);
   }, [
     id
@@ -514,7 +583,7 @@ var useSigner = /* @__PURE__ */ __name((_provider, account) => {
 
 // src/hooks/viewer/useCheckRpc.ts
 import { delay as delay2 } from "@xylabs/delay";
-import { isDefined as isDefined5, isUndefined as isUndefined4 } from "@xylabs/typeof";
+import { isDefined as isDefined5, isUndefined as isUndefined5 } from "@xylabs/typeof";
 import { LocalNetwork, SequenceNetwork } from "@xyo-network/chain-network-model";
 import { HttpRpcTransport as HttpRpcTransport2, JsonRpcNetworkStakeViewer, JsonRpcXyoViewer, NetworkStakeViewerRpcSchemas, XyoViewerRpcSchemas } from "@xyo-network/xl1-rpc";
 import { useEffect as useEffect2, useMemo as useMemo5, useState as useState4 } from "react";
@@ -533,7 +602,7 @@ var useCheckRpc = /* @__PURE__ */ __name((endpoint) => {
   const [isLocalProducer, setIsLocalProducer] = useState4(false);
   const [error, setError] = useState4();
   const viewer = useMemo5(() => {
-    if (isUndefined4(endpoint)) return;
+    if (isUndefined5(endpoint)) return;
     const transport = new HttpRpcTransport2(endpoint, {
       ...XyoViewerRpcSchemas,
       ...NetworkStakeViewerRpcSchemas
@@ -547,7 +616,7 @@ var useCheckRpc = /* @__PURE__ */ __name((endpoint) => {
     endpoint
   ]);
   useEffect2(() => {
-    if (isUndefined4(viewer)) return;
+    if (isUndefined5(viewer)) return;
     void (async () => {
       setError(void 0);
       while (!isLocalProducer) {
@@ -571,12 +640,12 @@ var useCheckRpc = /* @__PURE__ */ __name((endpoint) => {
 }, "useCheckRpc");
 
 // src/hooks/viewer/useHttpRpcViewer.ts
-import { isUndefined as isUndefined5 } from "@xylabs/typeof";
+import { isUndefined as isUndefined6 } from "@xylabs/typeof";
 import { HttpRpcTransport as HttpRpcTransport3, JsonRpcNetworkStakeViewer as JsonRpcNetworkStakeViewer2, JsonRpcXyoViewer as JsonRpcXyoViewer2, NetworkStakeViewerRpcSchemas as NetworkStakeViewerRpcSchemas2, XyoViewerRpcSchemas as XyoViewerRpcSchemas2 } from "@xyo-network/xl1-rpc";
 import { useMemo as useMemo6 } from "react";
 var useHttpRpcViewer = /* @__PURE__ */ __name((url) => {
   const resolvedViewer = useMemo6(() => {
-    if (isUndefined5(url)) {
+    if (isUndefined6(url)) {
       return;
     }
     const transport = new HttpRpcTransport3(`${url}/rpc`, {
@@ -593,28 +662,160 @@ var useHttpRpcViewer = /* @__PURE__ */ __name((url) => {
 }, "useHttpRpcViewer");
 
 // src/hooks/viewer/useViewerFromWallet.ts
+import { usePromise as usePromise6 } from "@xylabs/react-promise";
 import { isDefined as isDefined6, isDefinedNotNull as isDefinedNotNull3 } from "@xylabs/typeof";
 var useViewerFromWallet = /* @__PURE__ */ __name((networkId) => {
   const { gateway, error, isLoading } = useGateway(networkId);
-  if (isDefinedNotNull3(error)) return null;
-  if (isLoading) return;
-  if (isDefined6(gateway) && isDefined6(networkId)) {
-    const connection = gateway?.connection;
-    return connection?.viewer;
-  }
+  return usePromise6(async () => {
+    if (isDefinedNotNull3(error)) return null;
+    if (isLoading) return;
+    if (isDefined6(gateway) && isDefined6(networkId)) {
+      const connection = await gateway?.connection();
+      return connection?.viewer;
+    }
+  }, [
+    gateway,
+    networkId
+  ]);
 }, "useViewerFromWallet");
 
+// src/components/account/BalanceHistoryTable.tsx
+import { Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from "@mui/material";
+import { isDefined as isDefined7 } from "@xylabs/typeof";
+import { BlockAddressChip, BlockEpochTableCellInner, BlockNumberTableCellInner } from "@xyo-network/react-chain-blockchain";
+import { RawInfoIconButton } from "@xyo-network/react-payload-raw-info";
+import { XL1Amount } from "@xyo-network/xl1-protocol";
+import React from "react";
+
+// src/types/account/Table.ts
+var TableHeadingLabels = [
+  "Tx Hash",
+  "BlockNumber",
+  "Timestamp",
+  "From",
+  "To",
+  "Amount",
+  "Debug"
+];
+
+// src/components/account/BalanceHistoryTable.tsx
+var AccountBalanceHistoryTable = /* @__PURE__ */ __name(({ history, ...props }) => {
+  const formatAmount = /* @__PURE__ */ __name((amount) => {
+    if (!isDefined7(amount)) {
+      return "N/A";
+    }
+    const xl1Amount = new XL1Amount(amount);
+    return xl1Amount.toString(void 0, {
+      places: 18,
+      maxDecimal: 12,
+      maxCharacters: 12,
+      minDecimals: 1,
+      locale: navigator.language
+    });
+  }, "formatAmount");
+  return isDefined7(history) ? /* @__PURE__ */ React.createElement(Table, props, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, TableHeadingLabels.map((heading) => /* @__PURE__ */ React.createElement(TableCell, {
+    key: heading
+  }, heading)))), /* @__PURE__ */ React.createElement(TableBody, null, history?.map(({ amount, blockNumber, debug, from, key, timestamp, to, type, txHash }) => /* @__PURE__ */ React.createElement(TableRow, {
+    key
+  }, /* @__PURE__ */ React.createElement(TableCell, null, txHash || "N/A"), /* @__PURE__ */ React.createElement(BlockNumberTableCellInner, {
+    blockNumber
+  }), /* @__PURE__ */ React.createElement(BlockEpochTableCellInner, {
+    epoch: timestamp
+  }), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(Tooltip, {
+    title: `From Address: ${from}`
+  }, /* @__PURE__ */ React.createElement(BlockAddressChip, {
+    address: from,
+    toolTipTitle: `From: ${from}`
+  }))), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(Tooltip, {
+    title: `To Address: ${to}`
+  }, /* @__PURE__ */ React.createElement(BlockAddressChip, {
+    address: to,
+    toolTipTitle: `To: ${to}`
+  }))), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(Tooltip, {
+    title: `Raw Amount: ${amount}`
+  }, /* @__PURE__ */ React.createElement("span", null, type === "send" ? "-" : "", formatAmount(amount)))), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(RawInfoIconButton, {
+    rawValue: debug
+  })))))) : null;
+}, "AccountBalanceHistoryTable");
+
+// src/components/account/BalanceHistoryFlexbox.tsx
+var AccountBalanceHistoryFlexBox = /* @__PURE__ */ __name(({ address, refresh, viewer, ...props }) => {
+  const [results, error] = useAccountBalanceHistory(address, viewer, refresh);
+  const { history, balance, truncated } = results || {
+    balance: [
+      AttoXL1(0n),
+      AttoXL1(0n)
+    ],
+    history: void 0
+  };
+  const formatBalance = /* @__PURE__ */ __name((balance2) => {
+    const xl1Amount = new XL1Amount2(balance2);
+    return xl1Amount.toString(void 0, {
+      places: 18,
+      maxDecimal: 12,
+      maxCharacters: 12,
+      minDecimals: 1,
+      locale: navigator.language
+    });
+  }, "formatBalance");
+  const formatBalanceMagnitude = /* @__PURE__ */ __name((set) => {
+    const [received, sent] = set;
+    const netBalance = received - sent;
+    return netBalance < 0n ? `-${formatBalance(sent - received)}` : formatBalance(netBalance);
+  }, "formatBalanceMagnitude");
+  return isDefined8(history) && isDefined8(address) ? /* @__PURE__ */ React2.createElement(FlexCol, props, /* @__PURE__ */ React2.createElement(ErrorRender, {
+    error,
+    scope: "AccountBalanceHistoryTable"
+  }), /* @__PURE__ */ React2.createElement(Typography, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatBalanceMagnitude(balance)), truncated ? /* @__PURE__ */ React2.createElement(Typography, {
+    variant: "caption",
+    gutterBottom: true
+  }, "Ranged Balance from", " ", history.at(-1).blockNumber, " ", "-", " ", history[0].blockNumber) : null, /* @__PURE__ */ React2.createElement(AccountBalanceHistoryTable, {
+    history
+  })) : null;
+}, "AccountBalanceHistoryFlexBox");
+
+// src/components/connected/account/Connected.tsx
+import { Stack, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import { EthAddressWrapper } from "@xylabs/eth-address";
+import { BlockiesAvatarAddress } from "@xyo-network/react-chain-blockies";
+import React3 from "react";
+var ConnectedAccount = /* @__PURE__ */ __name(({ address }) => {
+  const shortenedAddress = `${EthAddressWrapper.fromString(address)?.toShortString(4)}`;
+  return /* @__PURE__ */ React3.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1
+  }, /* @__PURE__ */ React3.createElement(BlockiesAvatarAddress, {
+    address,
+    size: 21
+  }), /* @__PURE__ */ React3.createElement(Tooltip2, {
+    title: address
+  }, /* @__PURE__ */ React3.createElement(Typography2, {
+    color: "textSecondary",
+    variant: "caption",
+    fontFamily: "monospace"
+  }, shortenedAddress)));
+}, "ConnectedAccount");
+
 // src/components/connected/ConnectAccountsStack.tsx
-var DefaultConnectComponent = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React2.createElement(ButtonEx, {
+import { Alert, AlertTitle, Button, Stack as Stack2, Typography as Typography3 } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { isDefined as isDefined9, isUndefined as isUndefined7 } from "@xylabs/typeof";
+import { ErrorRender as ErrorRender2 } from "@xyo-network/react-error";
+import React4, { useEffect as useEffect3 } from "react";
+var DefaultConnectComponent = /* @__PURE__ */ __name((props) => /* @__PURE__ */ React4.createElement(ButtonEx, {
   variant: "contained",
   size: "small",
   ...props
 }), "DefaultConnectComponent");
-var DefaultNoWalletInstalledComponent = /* @__PURE__ */ __name(() => /* @__PURE__ */ React2.createElement(Alert, {
+var DefaultNoWalletInstalledComponent = /* @__PURE__ */ __name(() => /* @__PURE__ */ React4.createElement(Alert, {
   severity: "warning"
-}, /* @__PURE__ */ React2.createElement(AlertTitle, null, "XL1 Wallet Not Found"), /* @__PURE__ */ React2.createElement(Typography2, {
+}, /* @__PURE__ */ React4.createElement(AlertTitle, null, "XL1 Wallet Not Found"), /* @__PURE__ */ React4.createElement(Typography3, {
   gutterBottom: true
-}, "Please ensure that your XL1 Wallet is installed to connect your account."), /* @__PURE__ */ React2.createElement(Button, {
+}, "Please ensure that your XL1 Wallet is installed to connect your account."), /* @__PURE__ */ React4.createElement(Button, {
   sx: {
     display: "flex",
     justifySelf: "end"
@@ -628,7 +829,7 @@ var DefaultNoWalletInstalledComponent = /* @__PURE__ */ __name(() => /* @__PURE_
 var ConnectAccountsStack = /* @__PURE__ */ __name(({ AccountComponent = ConnectedAccount, ConnectComponent = DefaultConnectComponent, NoWalletInstalledComponent = DefaultNoWalletInstalledComponent, onAccountConnected, onCancel, timeout, ...props }) => {
   const { address, connectSigner, error, timedout } = useConnectAccount(void 0, timeout);
   useEffect3(() => {
-    if (isDefined7(error) && isDefined7(onCancel)) {
+    if (isDefined9(error) && isDefined9(onCancel)) {
       onCancel();
     }
   }, [
@@ -636,33 +837,38 @@ var ConnectAccountsStack = /* @__PURE__ */ __name(({ AccountComponent = Connecte
     onCancel
   ]);
   useEffect3(() => {
-    if (isDefined7(address) && isDefined7(onAccountConnected)) {
+    if (isDefined9(address) && isDefined9(onAccountConnected)) {
       onAccountConnected(address);
     }
   }, [
     address,
     onAccountConnected
   ]);
-  return /* @__PURE__ */ React2.createElement(Stack2, {
+  return /* @__PURE__ */ React4.createElement(Stack2, {
     direction: "row",
     alignItems: "start",
     spacing: 2,
     ...props
-  }, isDefined7(address) ? /* @__PURE__ */ React2.createElement(AccountComponent, {
+  }, isDefined9(address) ? /* @__PURE__ */ React4.createElement(AccountComponent, {
     address
-  }) : null, isUndefined6(address) && !timedout ? /* @__PURE__ */ React2.createElement(ConnectComponent, {
+  }) : null, isUndefined7(address) && !timedout ? /* @__PURE__ */ React4.createElement(ConnectComponent, {
     onClick: /* @__PURE__ */ __name(() => void connectSigner(), "onClick")
-  }, "Connect") : null, isUndefined6(address) && timedout ? /* @__PURE__ */ React2.createElement(NoWalletInstalledComponent, null) : null, /* @__PURE__ */ React2.createElement(ErrorRender, {
+  }, "Connect") : null, isUndefined7(address) && timedout ? /* @__PURE__ */ React4.createElement(NoWalletInstalledComponent, null) : null, /* @__PURE__ */ React4.createElement(ErrorRender2, {
     error,
     scope: "ConnectSigner:error"
   }));
 }, "ConnectAccountsStack");
 export {
+  AccountBalanceHistoryFlexBox,
+  AccountBalanceHistoryTable,
   ConnectAccountsStack,
   ConnectedAccount,
+  TableHeadingLabels,
   TransactionConfirmationStatus,
+  formatAccountBalanceHistory,
   getXyoClient,
   listenForClientInjection,
+  useAccountBalanceHistory,
   useAccountPermissions,
   useAddressBalance,
   useCheckLocalRpc,