@ton/appkit-react 0.0.3 → 0.0.5-alpha.0

package/dist/types/features/network/hooks/use-default-network.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { GetDefaultNetworkReturnType, Network } from '@ton/appkit';
+export type UseDefaultNetworkReturnType = [
+    network: GetDefaultNetworkReturnType,
+    setNetwork: (network: Network | undefined) => void
+];
+/**
+ * Hook to get and set the default network for wallet connections.
+ */
+export declare const useDefaultNetwork: () => UseDefaultNetworkReturnType;
+//# sourceMappingURL=use-default-network.d.ts.map

package/dist/types/features/network/hooks/use-default-network.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-default-network.d.ts","sourceRoot":"","sources":["../../../../../src/features/network/hooks/use-default-network.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,2BAA2B,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIxE,MAAM,MAAM,2BAA2B,GAAG;IACtC,OAAO,EAAE,2BAA2B;IACpC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI;CACrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,QAAO,2BAwBpC,CAAC"}

package/dist/types/features/network/hooks/use-networks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-networks.d.ts","sourceRoot":"","sources":["../../../../../src/features/network/hooks/use-networks.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAIzD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,qBAe9B,CAAC"}
+{"version":3,"file":"use-networks.d.ts","sourceRoot":"","sources":["../../../../../src/features/network/hooks/use-networks.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAIzD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,qBA0B9B,CAAC"}

package/dist/types/features/network/index.d.ts

@@ -7,4 +7,5 @@
  */
 export { useNetworks, type UseNetworksReturnType } from './hooks/use-networks';
 export { useNetwork, type UseNetworkReturnType } from './hooks/use-network';
+export { useDefaultNetwork, type UseDefaultNetworkReturnType } from './hooks/use-default-network';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/features/network/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/network/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/network/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,KAAK,2BAA2B,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/types/features/nft/hooks/use-nfts-by-address.d.ts

@@ -12,5 +12,5 @@ export type UseNFTsByAddressReturnType<selectData = GetNFTsData> = UseQueryRetur
 /**
  * Hook to get NFTs
  */
-export declare const useNFTsByAddress: <selectData = GetNFTsData>(parameters?: UseNFTsByAddressParameters<selectData>) => UseNFTsByAddressReturnType<selectData>;
+export declare const useNftsByAddress: <selectData = GetNFTsData>(parameters?: UseNFTsByAddressParameters<selectData>) => UseNFTsByAddressReturnType<selectData>;
 //# sourceMappingURL=use-nfts-by-address.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ton/appkit-react",
-  "version": "0.0.3",
+  "version": "0.0.5-alpha.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "clsx": "2.1.1",
     "radix-ui": "^1.4.3",
     "rosetta": "1.1.0",
-    "@ton/appkit": "0.0.2"
+    "@ton/appkit": "0.0.4-alpha.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "10.2.8",

package/src/features/network/hooks/use-default-network.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useSyncExternalStore, useCallback } from 'react';
+import { getDefaultNetwork, setDefaultNetwork, watchDefaultNetwork } from '@ton/appkit';
+import type { GetDefaultNetworkReturnType, Network } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseDefaultNetworkReturnType = [
+    network: GetDefaultNetworkReturnType,
+    setNetwork: (network: Network | undefined) => void,
+];
+
+/**
+ * Hook to get and set the default network for wallet connections.
+ */
+export const useDefaultNetwork = (): UseDefaultNetworkReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchDefaultNetwork(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getDefaultNetwork(appKit);
+    }, [appKit]);
+
+    const network = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    const setNetwork = useCallback(
+        (newNetwork: Network | undefined) => {
+            setDefaultNetwork(appKit, { network: newNetwork });
+        },
+        [appKit],
+    );
+
+    return [network, setNetwork];
+};

package/src/features/network/hooks/use-networks.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { useSyncExternalStore, useCallback } from 'react';
+import { useSyncExternalStore, useCallback, useRef } from 'react';
 import { getNetworks, watchNetworks } from '@ton/appkit';
 import type { GetNetworksReturnType } from '@ton/appkit';
 
@@ -19,6 +19,7 @@ export type UseNetworksReturnType = GetNetworksReturnType;
  */
 export const useNetworks = (): UseNetworksReturnType => {
     const appKit = useAppKit();
+    const cachedRef = useRef<GetNetworksReturnType>([]);
 
     const subscribe = useCallback(
         (onChange: () => void) => {
@@ -28,8 +29,18 @@ export const useNetworks = (): UseNetworksReturnType => {
     );
 
     const getSnapshot = useCallback(() => {
-        return getNetworks(appKit);
+        const networks = getNetworks(appKit);
+
+        if (
+            networks.length === cachedRef.current.length &&
+            networks.every((n, i) => n.chainId === cachedRef.current[i]?.chainId)
+        ) {
+            return cachedRef.current;
+        }
+
+        cachedRef.current = networks;
+        return networks;
     }, [appKit]);
 
-    return useSyncExternalStore(subscribe, getSnapshot, () => []);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };

package/src/features/network/index.ts

@@ -9,3 +9,4 @@
 // Hooks
 export { useNetworks, type UseNetworksReturnType } from './hooks/use-networks';
 export { useNetwork, type UseNetworkReturnType } from './hooks/use-network';
+export { useDefaultNetwork, type UseDefaultNetworkReturnType } from './hooks/use-default-network';

package/src/features/nft/hooks/use-nfts-by-address.ts

@@ -20,7 +20,7 @@ export type UseNFTsByAddressReturnType<selectData = GetNFTsData> = UseQueryRetur
 /**
  * Hook to get NFTs
  */
-export const useNFTsByAddress = <selectData = GetNFTsData>(
+export const useNftsByAddress = <selectData = GetNFTsData>(
     parameters: UseNFTsByAddressParameters<selectData> = {},
 ): UseNFTsByAddressReturnType<selectData> => {
     const appKit = useAppKit();

package/src/features/nft/hooks/use-nfts.ts

@@ -9,7 +9,7 @@
 import type { GetNFTsData } from '@ton/appkit/queries';
 
 import { useAddress } from '../../wallets/hooks/use-address';
-import { useNFTsByAddress } from './use-nfts-by-address';
+import { useNftsByAddress } from './use-nfts-by-address';
 import type { UseNFTsByAddressParameters, UseNFTsByAddressReturnType } from './use-nfts-by-address';
 
 export type UseNFTsParameters<selectData = GetNFTsData> = UseNFTsByAddressParameters<selectData>;
@@ -24,5 +24,5 @@ export const useNfts = <selectData = GetNFTsData>(
 ): UseNFTsReturnType<selectData> => {
     const address = useAddress();
 
-    return useNFTsByAddress({ ...parameters, address });
+    return useNftsByAddress({ ...parameters, address });
 };