@ton/appkit-react 0.0.2 → 0.0.4

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/dist/types/features/transaction/components/transaction-progress/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+export * from './transaction-progress';
+export * from './transaction-progress-provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/features/transaction/components/transaction-progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC"}

package/dist/types/features/transaction/components/transaction-progress/transaction-progress-icons.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+import type { TransactionStatus } from '@ton/appkit';
+export interface TransactionProgressIconsProps extends ComponentProps<'svg'> {
+    status: TransactionStatus;
+    isError: boolean;
+}
+export declare const TransactionProgressIcon: FC<TransactionProgressIconsProps>;
+//# sourceMappingURL=transaction-progress-icons.d.ts.map

package/dist/types/features/transaction/components/transaction-progress/transaction-progress-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transaction-progress-icons.d.ts","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/transaction-progress-icons.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIrD,MAAM,WAAW,6BAA8B,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxE,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CACpB;AAwDD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,6BAA6B,CAMrE,CAAC"}

package/dist/types/features/transaction/components/transaction-progress/transaction-progress-provider.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { ReactNode } from 'react';
+import type { GetTransactionStatusReturnType } from '@ton/appkit';
+import type { GetTransactionStatusErrorType } from '@ton/appkit/queries';
+export interface TransactionProgressContextValue extends GetTransactionStatusReturnType {
+    isFetching: boolean;
+    error: GetTransactionStatusErrorType | null;
+    boc: string;
+}
+export declare const TransactionProgressContext: import("react").Context<TransactionProgressContextValue | undefined>;
+export declare const useTransactionProgressContext: () => TransactionProgressContextValue;
+export interface TransactionProgressProviderProps {
+    boc: string;
+    children: ReactNode;
+}
+export declare const TransactionProgressProvider: ({ boc, children }: TransactionProgressProviderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transaction-progress-provider.d.ts.map

package/dist/types/features/transaction/components/transaction-progress/transaction-progress-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transaction-progress-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/transaction-progress-provider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AAIzE,MAAM,WAAW,+BAAgC,SAAQ,8BAA8B;IACnF,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,6BAA6B,GAAG,IAAI,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,0BAA0B,sEAAwE,CAAC;AAEhH,eAAO,MAAM,6BAA6B,uCAMzC,CAAC;AAEF,MAAM,WAAW,gCAAgC;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,2BAA2B,GAAI,mBAAmB,gCAAgC,4CAuB9F,CAAC"}

package/dist/types/features/transaction/components/transaction-progress/transaction-progress.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { FC, ReactNode, ComponentProps } from 'react';
+import type { TransactionProgressContextValue } from './transaction-progress-provider';
+export interface TransactionProgressTexts {
+    pending: string;
+    completed: string;
+    failed: string;
+}
+export interface TransactionProgressRenderProps extends TransactionProgressContextValue {
+    texts: TransactionProgressTexts;
+}
+export interface TransactionProgressProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** BOC of the transaction to strictly track status */
+    boc: string;
+    /** Render props function for full control over rendering */
+    children?: (props: TransactionProgressRenderProps) => ReactNode;
+    /** Allows targeting specific internal elements for styling */
+    classNames?: {
+        container?: string;
+        icon?: string;
+        message?: string;
+    };
+}
+export declare const TransactionProgressContent: FC<Omit<TransactionProgressProps, 'boc'>>;
+export declare const TransactionProgress: FC<TransactionProgressProps>;
+//# sourceMappingURL=transaction-progress.d.ts.map

package/dist/types/features/transaction/components/transaction-progress/transaction-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transaction-progress.d.ts","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/transaction-progress.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,iCAAiC,CAAC;AAIvF,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,8BAA+B,SAAQ,+BAA+B;IACnF,KAAK,EAAE,wBAAwB,CAAC;CACnC;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACrF,sDAAsD;IACtD,GAAG,EAAE,MAAM,CAAC;IACZ,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,8BAA8B,KAAK,SAAS,CAAC;IAChE,8DAA8D;IAC9D,UAAU,CAAC,EAAE;QACT,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACL;AAED,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,KAAK,CAAC,CA+ChF,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAM5D,CAAC"}

package/dist/types/features/transaction/hooks/use-transaction-status.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { GetTransactionStatusData, GetTransactionStatusErrorType, GetTransactionStatusParameters, GetTransactionStatusQueryConfig } from '@ton/appkit/queries';
+import type { UseQueryReturnType } from '../../../libs/query';
+export type UseTransactionStatusParameters<selectData = GetTransactionStatusData> = GetTransactionStatusParameters & GetTransactionStatusQueryConfig<selectData>;
+export type UseTransactionStatusReturnType<selectData = GetTransactionStatusData> = UseQueryReturnType<selectData, GetTransactionStatusErrorType>;
+/**
+ * Hook to get the status of a transaction trace by BOC.
+ *
+ * This hook polls the toncenter API to track the progress of a transaction trace.
+ * It is useful for tracking complex operations like swaps or multi-step flows.
+ *
+ * @example
+ * ```ts
+ * const { data: status } = useTransactionStatus({
+ *   boc: 'te6cc...',
+ *   query: {
+ *     refetchInterval: 2000, // Poll every 2 seconds
+ *   }
+ * });
+ *
+ * if (status?.status === 'pending') {
+ *   console.log(`Progress: ${status.completedMessages}/${status.totalMessages}`);
+ * }
+ * ```
+ */
+export declare const useTransactionStatus: <selectData = GetTransactionStatusData>(parameters: UseTransactionStatusParameters<selectData>) => UseTransactionStatusReturnType<selectData>;
+//# sourceMappingURL=use-transaction-status.d.ts.map

package/dist/types/features/transaction/hooks/use-transaction-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transaction-status.d.ts","sourceRoot":"","sources":["../../../../../src/features/transaction/hooks/use-transaction-status.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EACR,wBAAwB,EACxB,6BAA6B,EAC7B,8BAA8B,EAC9B,+BAA+B,EAClC,MAAM,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,MAAM,MAAM,8BAA8B,CAAC,UAAU,GAAG,wBAAwB,IAAI,8BAA8B,GAC9G,+BAA+B,CAAC,UAAU,CAAC,CAAC;AAEhD,MAAM,MAAM,8BAA8B,CAAC,UAAU,GAAG,wBAAwB,IAAI,kBAAkB,CAClG,UAAU,EACV,6BAA6B,CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,GAAI,UAAU,GAAG,wBAAwB,EACtE,YAAY,8BAA8B,CAAC,UAAU,CAAC,KACvD,8BAA8B,CAAC,UAAU,CAI3C,CAAC"}

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

@@ -7,5 +7,7 @@
  */
 export * from './hooks/use-send-transaction';
 export * from './hooks/use-transfer-ton';
+export * from './hooks/use-transaction-status';
 export * from './components/transaction';
+export * from './components/transaction-progress';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/transaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AAEzC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/features/transaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAE/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mCAAmC,CAAC"}

package/dist/types/libs/i18n.d.ts

@@ -17,6 +17,11 @@ export declare const i18n: rosetta.Rosetta<{
     readonly transaction: {
         readonly sendTransaction: "Send Transaction";
         readonly processing: "Processing...";
+        readonly status: {
+            readonly pending: "Processing...";
+            readonly completed: "Success";
+            readonly failed: "Failed";
+        };
     };
     readonly balances: {
         readonly sendTon: "Send {{ amount }} TON";

package/dist/types/libs/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/libs/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;EAAkB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,CAAC;AACd,eAAO,MAAM,eAAe,OAAO,CAAC;AAIpC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC;AAC/B,MAAM,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/libs/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;EAAkB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,CAAC;AACd,eAAO,MAAM,eAAe,OAAO,CAAC;AAIpC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC;AAC/B,MAAM,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC"}

package/dist/types/locales/en.d.ts

@@ -15,6 +15,11 @@ declare const _default: {
     readonly transaction: {
         readonly sendTransaction: "Send Transaction";
         readonly processing: "Processing...";
+        readonly status: {
+            readonly pending: "Processing...";
+            readonly completed: "Success";
+            readonly failed: "Failed";
+        };
     };
     readonly balances: {
         readonly sendTon: "Send {{ amount }} TON";

package/dist/types/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;;;;;;;;;;;;;;;AAEH,wBA0BW"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBA+BW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ton/appkit-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "repository": {
     "type": "git",
@@ -25,11 +25,18 @@
     },
     "./styles.css": "./dist/esm/styles/index.css"
   },
+  "typesVersions": {
+    "*": {
+      "styles.css": [
+        "./dist/esm/styles/index.css"
+      ]
+    }
+  },
   "dependencies": {
     "clsx": "2.1.1",
     "radix-ui": "^1.4.3",
     "rosetta": "1.1.0",
-    "@ton/appkit": "0.0.1"
+    "@ton/appkit": "0.0.3"
   },
   "devDependencies": {
     "@storybook/addon-docs": "10.2.8",
@@ -40,10 +47,10 @@
     "@tonconnect/ui-react": "2.4.1",
     "@types/react": "19.2.8",
     "@types/react-dom": "19.2.3",
+    "copyfiles": "2.4.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "storybook": "10.2.8",
-    "tsup": "^8.5.1",
     "typescript": "^5.9.2",
     "vite": "^7.3.1",
     "vite-plugin-node-polyfills": "^0.25.0"
@@ -67,10 +74,10 @@
     "*.css"
   ],
   "scripts": {
-    "build": "pnpm run build:esm+types && pnpm run copy:css",
-    "build:esm+types": "tsc --project tsconfig.build.json --outDir dist/esm --declarationDir dist/types",
-    "copy:css": "rsync -zarv --include='*/' --include='*.css' --exclude='*' src/ dist/esm/",
-    "dev": "tsup --watch",
+    "build": "pnpm run build:esm && pnpm run copy:css",
+    "build:esm": "tsc --project tsconfig.build.json --outDir dist/esm --declarationDir dist/types",
+    "dev": "pnpm run copy:css && pnpm run build:esm --watch",
+    "copy:css": "copyfiles -u 1 \"src/**/*.css\" dist/esm",
     "clean": "git clean -xdf .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",

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 });
 };

package/src/features/transaction/components/transaction-progress/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './transaction-progress';
+export * from './transaction-progress-provider';

package/src/features/transaction/components/transaction-progress/transaction-progress-icons.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+import type { TransactionStatus } from '@ton/appkit';
+
+import styles from './transaction-progress.module.css';
+
+export interface TransactionProgressIconsProps extends ComponentProps<'svg'> {
+    status: TransactionStatus;
+    isError: boolean;
+}
+
+const SpinnerIcon: FC<ComponentProps<'svg'>> = ({ className }) => (
+    <svg
+        className={clsx(styles.spinner, className)}
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+);
+
+const SuccessIcon: FC<ComponentProps<'svg'>> = ({ className }) => (
+    <svg
+        className={clsx(styles.success, className)}
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+);
+
+const FailedIcon: FC<ComponentProps<'svg'>> = ({ className }) => (
+    <svg
+        className={clsx(styles.failed, className)}
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+);
+
+export const TransactionProgressIcon: FC<TransactionProgressIconsProps> = ({ status, isError, ...props }) => {
+    if (status === 'completed') return <SuccessIcon {...props} />;
+
+    if (status === 'failed' || isError) return <FailedIcon {...props} />;
+
+    return <SpinnerIcon {...props} />;
+};

package/src/features/transaction/components/transaction-progress/transaction-progress-provider.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+import type { GetTransactionStatusReturnType } from '@ton/appkit';
+import type { GetTransactionStatusErrorType } from '@ton/appkit/queries';
+
+import { useTransactionStatus } from '../../hooks/use-transaction-status';
+
+export interface TransactionProgressContextValue extends GetTransactionStatusReturnType {
+    isFetching: boolean;
+    error: GetTransactionStatusErrorType | null;
+    boc: string;
+}
+
+export const TransactionProgressContext = createContext<TransactionProgressContextValue | undefined>(undefined);
+
+export const useTransactionProgressContext = () => {
+    const context = useContext(TransactionProgressContext);
+    if (!context) {
+        throw new Error('useTransactionProgressContext must be used within a TransactionProgressProvider');
+    }
+    return context;
+};
+
+export interface TransactionProgressProviderProps {
+    boc: string;
+    children: ReactNode;
+}
+
+export const TransactionProgressProvider = ({ boc, children }: TransactionProgressProviderProps) => {
+    const { data, isFetching, error } = useTransactionStatus({
+        boc,
+        query: {
+            refetchInterval: (query) => {
+                const status = query.state.data?.status;
+                if (status === 'completed' || status === 'failed') return false;
+                return 2000;
+            },
+        },
+    });
+
+    const value: TransactionProgressContextValue = {
+        status: data?.status ?? 'pending',
+        totalMessages: data?.totalMessages ?? 0,
+        pendingMessages: data?.pendingMessages ?? 0,
+        onchainMessages: data?.onchainMessages ?? 0,
+        isFetching,
+        error,
+        boc,
+    };
+
+    return <TransactionProgressContext.Provider value={value}>{children}</TransactionProgressContext.Provider>;
+};