@sundaeswap/wallet-lite 0.0.97 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sundaeswap/wallet-lite",
-  "version": "0.0.97",
+  "version": "0.0.98",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/react-components/WalletObserverProvider/WalletObserverProvider.tsx

@@ -7,7 +7,7 @@ import {
   WalletObserverContext,
 } from "../contexts/observer/index.js";
 import { useDerivedState } from "./hooks/effects/useDerivedState.js";
-import { useProviderRefreshInterval } from "./hooks/effects/useProviderRefreshInterval.js";
+import { useSyncWalletWithInterval } from "./hooks/effects/useSyncWalletWithInterval.js";
 import { useProviderWalletObserverRef } from "./hooks/useProviderWalletObserverRef.js";
 import { useWalletObserverState } from "./hooks/useWalletObserverState.js";
 
@@ -30,11 +30,8 @@ const WalletObserverProvider: FC<
   } = useProviderWalletObserverRef(options?.observerOptions, options?.hooks);
   const state = useWalletObserverState(observerRef.current);
 
-  useProviderRefreshInterval(
-    observerRef.current,
-    state.syncWallet,
-    options?.refreshInterval,
-  );
+  // Enable syncing.
+  useSyncWalletWithInterval(state.syncWallet, options?.refreshInterval);
 
   const derivedState = useDerivedState(observerRef.current, {
     usedAddresses: state.usedAddresses,

package/src/react-components/WalletObserverProvider/hooks/effects/useSyncWalletWithInterval.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+
+/**
+ * This hook is responsible for attaching
+ * calling the sync function on an interval.
+ * If set to 0, then the refresh interval is not attached.
+ *
+ * @param syncWalletFn
+ * @param refreshInterval
+ */
+export const useSyncWalletWithInterval = (
+  syncWalletFn: () => Promise<void>,
+  refreshInterval?: number,
+) => {
+  useQuery({
+    queryKey: [refreshInterval, syncWalletFn],
+    queryFn: syncWalletFn,
+    refetchInterval: refreshInterval,
+    enabled: refreshInterval ? refreshInterval > 0 : false,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+};

package/src/react-components/__tests__/RenderWallet.test.tsx

@@ -1,14 +1,21 @@
+import { IAssetAmountMetadata } from "@sundaeswap/asset";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { describe, expect, it } from "bun:test";
+import { FC, PropsWithChildren } from "react";
 
-import { IAssetAmountMetadata } from "@sundaeswap/asset";
 import {
   RenderWallet,
   TUseWalletObserverState,
   WalletObserverProvider,
 } from "../../index.js";
 
+const client = new QueryClient();
+const QueryProvider: FC<PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={client}>{children}</QueryClientProvider>
+);
+
 const TestComponent = (
   state: Omit<
     TUseWalletObserverState<IAssetAmountMetadata>,
@@ -40,7 +47,11 @@ describe("RenderWallet", () => {
       <RenderWallet render={TestComponent} />,
       {
         wrapper(props) {
-          return <WalletObserverProvider {...props} />;
+          return (
+            <QueryProvider>
+              <WalletObserverProvider {...props} />
+            </QueryProvider>
+          );
         },
       },
     );

package/src/react-components/__tests__/hooks/useAvailableExtensions.test.tsx

@@ -3,6 +3,8 @@ import { act } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks";
 import { describe, expect, it } from "bun:test";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { FC, PropsWithChildren } from "react";
 import { mockedEternlWallet } from "../../../../../setup-tests.js";
 import {
   IWalletObserverProviderProps,
@@ -12,13 +14,22 @@ import {
 
 const INTERVAL_AMOUNT = 10;
 
+const client = new QueryClient();
+const QueryProvider: FC<PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={client}>{children}</QueryClientProvider>
+);
+
 describe("useAvailableExtensions", () => {
   it("should correctly retrieve the instance", async () => {
     const { result } = renderHook<
       IWalletObserverProviderProps,
       ReturnType<typeof useAvailableExtensions>
     >(() => useAvailableExtensions(INTERVAL_AMOUNT), {
-      wrapper: (props) => <WalletObserverProvider {...props} />,
+      wrapper: (props) => (
+        <QueryProvider>
+          <WalletObserverProvider {...props} />
+        </QueryProvider>
+      ),
     });
 
     act(() => {

package/src/react-components/__tests__/hooks/useWalletObserver.test.tsx

@@ -1,7 +1,9 @@
+import { Cardano } from "@cardano-sdk/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook } from "@testing-library/react-hooks";
 import { describe, expect, it } from "bun:test";
+import { FC, PropsWithChildren } from "react";
 
-import { Cardano } from "@cardano-sdk/core";
 import { mockWalletAssetIds } from "../../../__data__/assets.js";
 import {
   mockNetwork,
@@ -15,6 +17,11 @@ import {
   useWalletObserver,
 } from "../../../index.js";
 
+const client = new QueryClient();
+const QueryProvider: FC<PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={client}>{children}</QueryClientProvider>
+);
+
 describe("useWalletObserver", () => {
   it("should correctly retrieve the context", async () => {
     const { result } = renderHook<
@@ -22,16 +29,18 @@ describe("useWalletObserver", () => {
       ReturnType<typeof useWalletObserver>
     >(() => useWalletObserver(), {
       wrapper: (props) => (
-        <WalletObserverProvider
-          {...{
-            ...props,
-            observerOptions: {
-              ...props.options?.observerOptions,
-              // Quick resolve time for tests.
-              connectTimeout: 10,
-            },
-          }}
-        />
+        <QueryProvider>
+          <WalletObserverProvider
+            {...{
+              ...props,
+              observerOptions: {
+                ...props.options?.observerOptions,
+                // Quick resolve time for tests.
+                connectTimeout: 10,
+              },
+            }}
+          />
+        </QueryProvider>
       ),
     });
 

package/src/react-components/__tests__/hooks/useWalletObserverRef.test.tsx

@@ -1,5 +1,7 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook } from "@testing-library/react-hooks";
 import { describe, expect, it } from "bun:test";
+import { FC, PropsWithChildren } from "react";
 
 import { WalletObserver } from "../../../classes/WalletObserver.class.js";
 import {
@@ -8,6 +10,11 @@ import {
 } from "../../../index.js";
 import { useProviderWalletObserverRef } from "../../WalletObserverProvider/hooks/useProviderWalletObserverRef.js";
 
+const client = new QueryClient();
+const QueryProvider: FC<PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={client}>{children}</QueryClientProvider>
+);
+
 describe("useWalletObserverRef", () => {
   it("should correctly retrieve the instance", async () => {
     const { result } = renderHook<
@@ -15,16 +22,18 @@ describe("useWalletObserverRef", () => {
       ReturnType<typeof useProviderWalletObserverRef>
     >(() => useProviderWalletObserverRef(), {
       wrapper: (props) => (
-        <WalletObserverProvider
-          {...{
-            ...props,
-            observerOptions: {
-              ...props.options?.observerOptions,
-              // Quick resolve time for tests.
-              connectTimeout: 10,
-            },
-          }}
-        />
+        <QueryProvider>
+          <WalletObserverProvider
+            {...{
+              ...props,
+              observerOptions: {
+                ...props.options?.observerOptions,
+                // Quick resolve time for tests.
+                connectTimeout: 10,
+              },
+            }}
+          />
+        </QueryProvider>
       ),
     });
 

package/dist/cjs/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useProviderRefreshInterval = void 0;
-var _react = require("react");
-/**
- * Internal use only. This hook is responsible for attaching
- * a refresh interval to the WalletObserver. If set to 0, then
- * the refresh interval is not attached.
- *
- * @param observer
- * @param refreshInterval
- * @param syncWallet
- */
-var useProviderRefreshInterval = exports.useProviderRefreshInterval = function useProviderRefreshInterval(observer, syncWallet, refreshInterval) {
-  (0, _react.useEffect)(function () {
-    if (!refreshInterval) {
-      return;
-    }
-    var interval = setInterval(syncWallet, refreshInterval);
-    return function () {
-      clearInterval(interval);
-    };
-  }, [refreshInterval, syncWallet, observer]);
-};
-//# sourceMappingURL=useProviderRefreshInterval.js.map

package/dist/cjs/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProviderRefreshInterval.js","names":["_react","require","useProviderRefreshInterval","exports","observer","syncWallet","refreshInterval","useEffect","interval","setInterval","clearInterval"],"sources":["../../../../../../src/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { WalletObserver } from \"../../../../classes/WalletObserver.class.js\";\n\n/**\n * Internal use only. This hook is responsible for attaching\n * a refresh interval to the WalletObserver. If set to 0, then\n * the refresh interval is not attached.\n *\n * @param observer\n * @param refreshInterval\n * @param syncWallet\n */\nexport const useProviderRefreshInterval = (\n  observer: WalletObserver,\n  syncWallet: () => Promise<void>,\n  refreshInterval?: number,\n) => {\n  useEffect(() => {\n    if (!refreshInterval) {\n      return;\n    }\n\n    const interval = setInterval(syncWallet, refreshInterval);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [refreshInterval, syncWallet, observer]);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG,SAA7BA,0BAA0BA,CACrCE,QAAwB,EACxBC,UAA+B,EAC/BC,eAAwB,EACrB;EACH,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAI,CAACD,eAAe,EAAE;MACpB;IACF;IAEA,IAAME,QAAQ,GAAGC,WAAW,CAACJ,UAAU,EAAEC,eAAe,CAAC;IAEzD,OAAO,YAAM;MACXI,aAAa,CAACF,QAAQ,CAAC;IACzB,CAAC;EACH,CAAC,EAAE,CAACF,eAAe,EAAED,UAAU,EAAED,QAAQ,CAAC,CAAC;AAC7C,CAAC","ignoreList":[]}

package/dist/esm/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.js

@@ -1,22 +0,0 @@
-import { useEffect } from "react";
-/**
- * Internal use only. This hook is responsible for attaching
- * a refresh interval to the WalletObserver. If set to 0, then
- * the refresh interval is not attached.
- *
- * @param observer
- * @param refreshInterval
- * @param syncWallet
- */
-export const useProviderRefreshInterval = (observer, syncWallet, refreshInterval) => {
-  useEffect(() => {
-    if (!refreshInterval) {
-      return;
-    }
-    const interval = setInterval(syncWallet, refreshInterval);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [refreshInterval, syncWallet, observer]);
-};
-//# sourceMappingURL=useProviderRefreshInterval.js.map

package/dist/esm/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProviderRefreshInterval.js","names":["useEffect","useProviderRefreshInterval","observer","syncWallet","refreshInterval","interval","setInterval","clearInterval"],"sources":["../../../../../../src/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { WalletObserver } from \"../../../../classes/WalletObserver.class.js\";\n\n/**\n * Internal use only. This hook is responsible for attaching\n * a refresh interval to the WalletObserver. If set to 0, then\n * the refresh interval is not attached.\n *\n * @param observer\n * @param refreshInterval\n * @param syncWallet\n */\nexport const useProviderRefreshInterval = (\n  observer: WalletObserver,\n  syncWallet: () => Promise<void>,\n  refreshInterval?: number,\n) => {\n  useEffect(() => {\n    if (!refreshInterval) {\n      return;\n    }\n\n    const interval = setInterval(syncWallet, refreshInterval);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [refreshInterval, syncWallet, observer]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAIjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGA,CACxCC,QAAwB,EACxBC,UAA+B,EAC/BC,eAAwB,KACrB;EACHJ,SAAS,CAAC,MAAM;IACd,IAAI,CAACI,eAAe,EAAE;MACpB;IACF;IAEA,MAAMC,QAAQ,GAAGC,WAAW,CAACH,UAAU,EAAEC,eAAe,CAAC;IAEzD,OAAO,MAAM;MACXG,aAAa,CAACF,QAAQ,CAAC;IACzB,CAAC;EACH,CAAC,EAAE,CAACD,eAAe,EAAED,UAAU,EAAED,QAAQ,CAAC,CAAC;AAC7C,CAAC","ignoreList":[]}

package/dist/types/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.d.ts

@@ -1,12 +0,0 @@
-import { WalletObserver } from "../../../../classes/WalletObserver.class.js";
-/**
- * Internal use only. This hook is responsible for attaching
- * a refresh interval to the WalletObserver. If set to 0, then
- * the refresh interval is not attached.
- *
- * @param observer
- * @param refreshInterval
- * @param syncWallet
- */
-export declare const useProviderRefreshInterval: (observer: WalletObserver, syncWallet: () => Promise<void>, refreshInterval?: number) => void;
-//# sourceMappingURL=useProviderRefreshInterval.d.ts.map

package/dist/types/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProviderRefreshInterval.d.ts","sourceRoot":"","sources":["../../../../../../src/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,aAC3B,cAAc,cACZ,MAAM,QAAQ,IAAI,CAAC,oBACb,MAAM,SAazB,CAAC"}

package/src/react-components/WalletObserverProvider/hooks/effects/useProviderRefreshInterval.ts

@@ -1,30 +0,0 @@
-import { useEffect } from "react";
-
-import { WalletObserver } from "../../../../classes/WalletObserver.class.js";
-
-/**
- * Internal use only. This hook is responsible for attaching
- * a refresh interval to the WalletObserver. If set to 0, then
- * the refresh interval is not attached.
- *
- * @param observer
- * @param refreshInterval
- * @param syncWallet
- */
-export const useProviderRefreshInterval = (
-  observer: WalletObserver,
-  syncWallet: () => Promise<void>,
-  refreshInterval?: number,
-) => {
-  useEffect(() => {
-    if (!refreshInterval) {
-      return;
-    }
-
-    const interval = setInterval(syncWallet, refreshInterval);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [refreshInterval, syncWallet, observer]);
-};