@ton/appkit-react 0.0.2 → 0.0.3

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.3",
   "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.2"
   },
   "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/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>;
+};

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

@@ -0,0 +1,97 @@
+/**
+ * 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 { useMemo } from 'react';
+import type { FC, ReactNode, ComponentProps } from 'react';
+import { clsx } from 'clsx';
+
+import { useI18n } from '../../../../hooks/use-i18n';
+import { TransactionProgressProvider, useTransactionProgressContext } from './transaction-progress-provider';
+import type { TransactionProgressContextValue } from './transaction-progress-provider';
+import { TransactionProgressIcon } from './transaction-progress-icons';
+import styles from './transaction-progress.module.css';
+
+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 const TransactionProgressContent: FC<Omit<TransactionProgressProps, 'boc'>> = ({
+    children,
+    className,
+    classNames = {},
+    ...props
+}) => {
+    const context = useTransactionProgressContext();
+    const { status, onchainMessages, totalMessages, error } = context;
+    const { t } = useI18n();
+
+    const texts = useMemo(
+        () => ({
+            pending: t('transaction.status.pending'),
+            completed: t('transaction.status.completed'),
+            failed: t('transaction.status.failed'),
+        }),
+        [t],
+    );
+
+    if (children) {
+        return <>{children({ ...context, texts })}</>;
+    }
+
+    const isPending = status === 'pending' && !error;
+    const isCompleted = status === 'completed';
+    const isFailed = status === 'failed' || !!error;
+
+    let messageText = texts.pending;
+    if (isCompleted) messageText = texts.completed;
+    if (isFailed) messageText = texts.failed;
+
+    let progressText = null;
+    if (isPending && totalMessages > 0) {
+        progressText = `(${onchainMessages} / ${totalMessages})`;
+    }
+
+    return (
+        <div className={clsx(styles.container, className, classNames.container)} {...props}>
+            <div className={clsx(styles.iconContainer, classNames.icon)}>
+                <TransactionProgressIcon status={status} isError={!!error} />
+            </div>
+
+            <div className={clsx(styles.message, classNames.message)}>
+                {messageText} {progressText}
+            </div>
+        </div>
+    );
+};
+
+export const TransactionProgress: FC<TransactionProgressProps> = ({ boc, ...rest }) => {
+    return (
+        <TransactionProgressProvider boc={boc}>
+            <TransactionProgressContent {...rest} />
+        </TransactionProgressProvider>
+    );
+};

package/src/features/transaction/hooks/use-transaction-status.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 { getTransactionStatusQueryOptions } from '@ton/appkit/queries';
+
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+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 const useTransactionStatus = <selectData = GetTransactionStatusData>(
+    parameters: UseTransactionStatusParameters<selectData>,
+): UseTransactionStatusReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getTransactionStatusQueryOptions(appKit, parameters));
+};

package/src/features/transaction/index.ts

@@ -8,5 +8,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';

package/src/locales/en.ts

@@ -19,6 +19,11 @@ export default {
     transaction: {
         sendTransaction: 'Send Transaction',
         processing: 'Processing...',
+        status: {
+            pending: 'Processing...',
+            completed: 'Success',
+            failed: 'Failed',
+        },
     },
 
     // Balances

package/dist/esm/components/block/block.stories.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Block } from './block';
-const meta = {
-    title: 'Private/Components/Block',
-    component: Block,
-    tags: ['autodocs'],
-    argTypes: {
-        direction: {
-            control: 'radio',
-            options: ['row', 'column'],
-        },
-    },
-};
-export default meta;
-export const Column = {
-    args: {
-        direction: 'column',
-        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '8px', background: '#0098EB', color: 'white' }, children: "Item 1" }), _jsx("div", { style: { padding: '8px', background: '#0098EB', color: 'white' }, children: "Item 2" }), _jsx("div", { style: { padding: '8px', background: '#0098EB', color: 'white' }, children: "Item 3" })] })),
-    },
-};
-export const Row = {
-    args: {
-        direction: 'row',
-        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '8px', background: '#0098EB', color: 'white' }, children: "Item 1" }), _jsx("div", { style: { padding: '8px', background: '#0098EB', color: 'white' }, children: "Item 2" }), _jsx("div", { style: { padding: '8px', background: '#0098EB', color: 'white' }, children: "Item 3" })] })),
-    },
-};
-//# sourceMappingURL=block.stories.js.map

package/dist/esm/components/block/block.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"block.stories.js","sourceRoot":"","sources":["../../../../src/components/block/block.stories.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,IAAI,GAAuB;IAC7B,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;SAC7B;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE;QACF,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,CACN,8BACI,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAc,EACnF,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAc,EACnF,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAc,IACpF,CACN;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAU;IACtB,IAAI,EAAE;QACF,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,CACN,8BACI,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAc,EACnF,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAc,EACnF,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,uBAAc,IACpF,CACN;KACJ;CACJ,CAAC"}

package/dist/esm/components/button/button.stories.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from './button';
-const meta = {
-    title: 'Public/Components/Button',
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: {
-        disabled: {
-            control: 'boolean',
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        children: 'Click me',
-    },
-};
-export const Disabled = {
-    args: {
-        children: 'Disabled Button',
-        disabled: true,
-    },
-};
-export const WithIcon = {
-    args: {
-        children: (_jsxs(_Fragment, { children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), "Add Item"] })),
-    },
-};
-//# sourceMappingURL=button.stories.js.map

package/dist/esm/components/button/button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../../src/components/button/button.stories.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAwB;IAC9B,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,OAAO,EAAE,SAAS;SACrB;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,QAAQ,EAAE,UAAU;KACvB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE;QACF,QAAQ,EAAE,iBAAiB;QAC3B,QAAQ,EAAE,IAAI;KACjB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE;QACF,QAAQ,EAAE,CACN,8BACI,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,YAC1F,eACI,CAAC,EAAC,kBAAkB,EACpB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACxB,GACA,gBAEP,CACN;KACJ;CACJ,CAAC"}