@ton/appkit-react 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/features/network/hooks/use-default-network.js +28 -0
- package/dist/esm/features/network/hooks/use-default-network.js.map +1 -0
- package/dist/esm/features/network/hooks/use-networks.js +10 -3
- package/dist/esm/features/network/hooks/use-networks.js.map +1 -1
- package/dist/esm/features/network/index.js +1 -0
- package/dist/esm/features/network/index.js.map +1 -1
- package/dist/esm/features/nft/hooks/use-nfts-by-address.js +1 -1
- package/dist/esm/features/nft/hooks/use-nfts.js +2 -2
- package/dist/esm/features/transaction/components/transaction-progress/index.js +10 -0
- package/dist/esm/features/transaction/components/transaction-progress/index.js.map +1 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress-icons.js +14 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress-icons.js.map +1 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress-provider.js +42 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress-provider.js.map +1 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress.js +44 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress.js.map +1 -0
- package/dist/esm/features/transaction/components/transaction-progress/transaction-progress.module.css +44 -0
- package/dist/esm/features/transaction/hooks/use-transaction-status.js +35 -0
- package/dist/esm/features/transaction/hooks/use-transaction-status.js.map +1 -0
- package/dist/esm/features/transaction/index.js +2 -0
- package/dist/esm/features/transaction/index.js.map +1 -1
- package/dist/esm/locales/en.js +5 -0
- package/dist/esm/locales/en.js.map +1 -1
- package/dist/esm/styles/index.css +1 -0
- package/dist/esm/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/features/network/hooks/use-default-network.d.ts +17 -0
- package/dist/types/features/network/hooks/use-default-network.d.ts.map +1 -0
- package/dist/types/features/network/hooks/use-networks.d.ts.map +1 -1
- package/dist/types/features/network/index.d.ts +1 -0
- package/dist/types/features/network/index.d.ts.map +1 -1
- package/dist/types/features/nft/hooks/use-nfts-by-address.d.ts +1 -1
- package/dist/types/features/transaction/components/transaction-progress/index.d.ts +10 -0
- package/dist/types/features/transaction/components/transaction-progress/index.d.ts.map +1 -0
- package/dist/types/features/transaction/components/transaction-progress/transaction-progress-icons.d.ts +15 -0
- package/dist/types/features/transaction/components/transaction-progress/transaction-progress-icons.d.ts.map +1 -0
- package/dist/types/features/transaction/components/transaction-progress/transaction-progress-provider.d.ts +23 -0
- package/dist/types/features/transaction/components/transaction-progress/transaction-progress-provider.d.ts.map +1 -0
- package/dist/types/features/transaction/components/transaction-progress/transaction-progress.d.ts +32 -0
- package/dist/types/features/transaction/components/transaction-progress/transaction-progress.d.ts.map +1 -0
- package/dist/types/features/transaction/hooks/use-transaction-status.d.ts +33 -0
- package/dist/types/features/transaction/hooks/use-transaction-status.d.ts.map +1 -0
- package/dist/types/features/transaction/index.d.ts +2 -0
- package/dist/types/features/transaction/index.d.ts.map +1 -1
- package/dist/types/libs/i18n.d.ts +5 -0
- package/dist/types/libs/i18n.d.ts.map +1 -1
- package/dist/types/locales/en.d.ts +5 -0
- package/dist/types/locales/en.d.ts.map +1 -1
- package/package.json +14 -7
- package/src/features/network/hooks/use-default-network.ts +47 -0
- package/src/features/network/hooks/use-networks.ts +14 -3
- package/src/features/network/index.ts +1 -0
- package/src/features/nft/hooks/use-nfts-by-address.ts +1 -1
- package/src/features/nft/hooks/use-nfts.ts +2 -2
- package/src/features/transaction/components/transaction-progress/index.ts +10 -0
- package/src/features/transaction/components/transaction-progress/transaction-progress-icons.tsx +80 -0
- package/src/features/transaction/components/transaction-progress/transaction-progress-provider.tsx +60 -0
- package/src/features/transaction/components/transaction-progress/transaction-progress.tsx +97 -0
- package/src/features/transaction/hooks/use-transaction-status.ts +55 -0
- package/src/features/transaction/index.ts +2 -0
- package/src/locales/en.ts +5 -0
- package/dist/esm/components/block/block.stories.js +0 -27
- package/dist/esm/components/block/block.stories.js.map +0 -1
- package/dist/esm/components/button/button.stories.js +0 -30
- package/dist/esm/components/button/button.stories.js.map +0 -1
- package/dist/esm/components/circle-icon/circle-icon.stories.js +0 -56
- package/dist/esm/components/circle-icon/circle-icon.stories.js.map +0 -1
- package/dist/esm/components/ton-icon/ton-icon.stories.js +0 -56
- package/dist/esm/components/ton-icon/ton-icon.stories.js.map +0 -1
- package/dist/esm/features/balances/components/balance-badge/balance-badge.stories.js +0 -23
- package/dist/esm/features/balances/components/balance-badge/balance-badge.stories.js.map +0 -1
- package/dist/esm/features/balances/components/currency-item/currency-item.stories.js +0 -61
- package/dist/esm/features/balances/components/currency-item/currency-item.stories.js.map +0 -1
- package/dist/esm/features/balances/components/send-jetton-button/send-jetton-button.stories.js +0 -41
- package/dist/esm/features/balances/components/send-jetton-button/send-jetton-button.stories.js.map +0 -1
- package/dist/esm/features/balances/components/send-ton-button/send-ton-button.stories.js +0 -36
- package/dist/esm/features/balances/components/send-ton-button/send-ton-button.stories.js.map +0 -1
- package/dist/esm/features/nft/components/nft-item/nft-item.stories.js +0 -52
- package/dist/esm/features/nft/components/nft-item/nft-item.stories.js.map +0 -1
- package/dist/esm/features/transaction/components/transaction/transaction.stories.js +0 -47
- package/dist/esm/features/transaction/components/transaction/transaction.stories.js.map +0 -1
- package/dist/types/components/block/block.stories.d.ts +0 -15
- package/dist/types/components/block/block.stories.d.ts.map +0 -1
- package/dist/types/components/button/button.stories.d.ts +0 -16
- package/dist/types/components/button/button.stories.d.ts.map +0 -1
- package/dist/types/components/circle-icon/circle-icon.stories.d.ts +0 -18
- package/dist/types/components/circle-icon/circle-icon.stories.d.ts.map +0 -1
- package/dist/types/components/ton-icon/ton-icon.stories.d.ts +0 -20
- package/dist/types/components/ton-icon/ton-icon.stories.d.ts.map +0 -1
- package/dist/types/features/balances/components/balance-badge/balance-badge.stories.d.ts +0 -16
- package/dist/types/features/balances/components/balance-badge/balance-badge.stories.d.ts.map +0 -1
- package/dist/types/features/balances/components/currency-item/currency-item.stories.d.ts +0 -19
- package/dist/types/features/balances/components/currency-item/currency-item.stories.d.ts.map +0 -1
- package/dist/types/features/balances/components/send-jetton-button/send-jetton-button.stories.d.ts +0 -22
- package/dist/types/features/balances/components/send-jetton-button/send-jetton-button.stories.d.ts.map +0 -1
- package/dist/types/features/balances/components/send-ton-button/send-ton-button.stories.d.ts +0 -21
- package/dist/types/features/balances/components/send-ton-button/send-ton-button.stories.d.ts.map +0 -1
- package/dist/types/features/nft/components/nft-item/nft-item.stories.d.ts +0 -25
- package/dist/types/features/nft/components/nft-item/nft-item.stories.d.ts.map +0 -1
- package/dist/types/features/transaction/components/transaction/transaction.stories.d.ts +0 -23
- package/dist/types/features/transaction/components/transaction/transaction.stories.d.ts.map +0 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) TonTech.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { useSyncExternalStore, useCallback } from 'react';
|
|
9
|
+
import { getDefaultNetwork, setDefaultNetwork, watchDefaultNetwork } from '@ton/appkit';
|
|
10
|
+
import { useAppKit } from '../../../hooks/use-app-kit';
|
|
11
|
+
/**
|
|
12
|
+
* Hook to get and set the default network for wallet connections.
|
|
13
|
+
*/
|
|
14
|
+
export const useDefaultNetwork = () => {
|
|
15
|
+
const appKit = useAppKit();
|
|
16
|
+
const subscribe = useCallback((onChange) => {
|
|
17
|
+
return watchDefaultNetwork(appKit, { onChange });
|
|
18
|
+
}, [appKit]);
|
|
19
|
+
const getSnapshot = useCallback(() => {
|
|
20
|
+
return getDefaultNetwork(appKit);
|
|
21
|
+
}, [appKit]);
|
|
22
|
+
const network = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
23
|
+
const setNetwork = useCallback((newNetwork) => {
|
|
24
|
+
setDefaultNetwork(appKit, { network: newNetwork });
|
|
25
|
+
}, [appKit]);
|
|
26
|
+
return [network, setNetwork];
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=use-default-network.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-default-network.js","sourceRoot":"","sources":["../../../../../src/features/network/hooks/use-default-network.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGxF,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAOvD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAgC,EAAE;IAC/D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,QAAoB,EAAE,EAAE;QACrB,OAAO,mBAAmB,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IACrD,CAAC,EACD,CAAC,MAAM,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,OAAO,GAAG,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;IAE1E,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,UAA+B,EAAE,EAAE;QAChC,iBAAiB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC;IACvD,CAAC,EACD,CAAC,MAAM,CAAC,CACX,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;AACjC,CAAC,CAAC"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { useSyncExternalStore, useCallback } from 'react';
|
|
8
|
+
import { useSyncExternalStore, useCallback, useRef } from 'react';
|
|
9
9
|
import { getNetworks, watchNetworks } from '@ton/appkit';
|
|
10
10
|
import { useAppKit } from '../../../hooks/use-app-kit';
|
|
11
11
|
/**
|
|
@@ -13,12 +13,19 @@ import { useAppKit } from '../../../hooks/use-app-kit';
|
|
|
13
13
|
*/
|
|
14
14
|
export const useNetworks = () => {
|
|
15
15
|
const appKit = useAppKit();
|
|
16
|
+
const cachedRef = useRef([]);
|
|
16
17
|
const subscribe = useCallback((onChange) => {
|
|
17
18
|
return watchNetworks(appKit, { onChange });
|
|
18
19
|
}, [appKit]);
|
|
19
20
|
const getSnapshot = useCallback(() => {
|
|
20
|
-
|
|
21
|
+
const networks = getNetworks(appKit);
|
|
22
|
+
if (networks.length === cachedRef.current.length &&
|
|
23
|
+
networks.every((n, i) => n.chainId === cachedRef.current[i]?.chainId)) {
|
|
24
|
+
return cachedRef.current;
|
|
25
|
+
}
|
|
26
|
+
cachedRef.current = networks;
|
|
27
|
+
return networks;
|
|
21
28
|
}, [appKit]);
|
|
22
|
-
return useSyncExternalStore(subscribe, getSnapshot,
|
|
29
|
+
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
23
30
|
};
|
|
24
31
|
//# sourceMappingURL=use-networks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-networks.js","sourceRoot":"","sources":["../../../../../src/features/network/hooks/use-networks.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-networks.js","sourceRoot":"","sources":["../../../../../src/features/network/hooks/use-networks.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAIvD;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAA0B,EAAE;IACnD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAwB,EAAE,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,QAAoB,EAAE,EAAE;QACrB,OAAO,aAAa,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,MAAM,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;QAErC,IACI,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO,CAAC,MAAM;YAC5C,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EACvE,CAAC;YACC,OAAO,SAAS,CAAC,OAAO,CAAC;QAC7B,CAAC;QAED,SAAS,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC7B,OAAO,QAAQ,CAAC;IACpB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AACrE,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/features/network/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,QAAQ;AACR,OAAO,EAAE,WAAW,EAA8B,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAA6B,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/features/network/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,QAAQ;AACR,OAAO,EAAE,WAAW,EAA8B,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAA6B,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAoC,MAAM,6BAA6B,CAAC"}
|
|
@@ -11,7 +11,7 @@ import { useQuery } from '../../../libs/query';
|
|
|
11
11
|
/**
|
|
12
12
|
* Hook to get NFTs
|
|
13
13
|
*/
|
|
14
|
-
export const
|
|
14
|
+
export const useNftsByAddress = (parameters = {}) => {
|
|
15
15
|
const appKit = useAppKit();
|
|
16
16
|
return useQuery(getNFTsQueryOptions(appKit, parameters));
|
|
17
17
|
};
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import { useAddress } from '../../wallets/hooks/use-address';
|
|
9
|
-
import {
|
|
9
|
+
import { useNftsByAddress } from './use-nfts-by-address';
|
|
10
10
|
/**
|
|
11
11
|
* Hook to get NFTs of the selected wallet
|
|
12
12
|
*/
|
|
13
13
|
export const useNfts = (parameters = {}) => {
|
|
14
14
|
const address = useAddress();
|
|
15
|
-
return
|
|
15
|
+
return useNftsByAddress({ ...parameters, address });
|
|
16
16
|
};
|
|
17
17
|
//# sourceMappingURL=use-nfts.js.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) TonTech.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
export * from './transaction-progress';
|
|
9
|
+
export * from './transaction-progress-provider';
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC"}
|
package/dist/esm/features/transaction/components/transaction-progress/transaction-progress-icons.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import styles from './transaction-progress.module.css';
|
|
4
|
+
const SpinnerIcon = ({ className }) => (_jsx("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", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
|
|
5
|
+
const SuccessIcon = ({ className }) => (_jsxs("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", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
|
|
6
|
+
const FailedIcon = ({ className }) => (_jsxs("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", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }));
|
|
7
|
+
export const TransactionProgressIcon = ({ status, isError, ...props }) => {
|
|
8
|
+
if (status === 'completed')
|
|
9
|
+
return _jsx(SuccessIcon, { ...props });
|
|
10
|
+
if (status === 'failed' || isError)
|
|
11
|
+
return _jsx(FailedIcon, { ...props });
|
|
12
|
+
return _jsx(SpinnerIcon, { ...props });
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=transaction-progress-icons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transaction-progress-icons.js","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/transaction-progress-icons.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAOvD,MAAM,WAAW,GAA8B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9D,cACI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAC1C,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,YAEtB,eAAM,CAAC,EAAC,6BAA6B,GAAG,GACtC,CACT,CAAC;AAEF,MAAM,WAAW,GAA8B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9D,eACI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAC1C,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,oCAAoC,GAAG,EAC/C,mBAAU,MAAM,EAAC,uBAAuB,GAAG,IACzC,CACT,CAAC;AAEF,MAAM,UAAU,GAA8B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC7D,eACI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EACzC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjC,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,IACpC,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAsC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxG,IAAI,MAAM,KAAK,WAAW;QAAE,OAAO,KAAC,WAAW,OAAK,KAAK,GAAI,CAAC;IAE9D,IAAI,MAAM,KAAK,QAAQ,IAAI,OAAO;QAAE,OAAO,KAAC,UAAU,OAAK,KAAK,GAAI,CAAC;IAErE,OAAO,KAAC,WAAW,OAAK,KAAK,GAAI,CAAC;AACtC,CAAC,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Copyright (c) TonTech.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
import { createContext, useContext } from 'react';
|
|
10
|
+
import { useTransactionStatus } from '../../hooks/use-transaction-status';
|
|
11
|
+
export const TransactionProgressContext = createContext(undefined);
|
|
12
|
+
export const useTransactionProgressContext = () => {
|
|
13
|
+
const context = useContext(TransactionProgressContext);
|
|
14
|
+
if (!context) {
|
|
15
|
+
throw new Error('useTransactionProgressContext must be used within a TransactionProgressProvider');
|
|
16
|
+
}
|
|
17
|
+
return context;
|
|
18
|
+
};
|
|
19
|
+
export const TransactionProgressProvider = ({ boc, children }) => {
|
|
20
|
+
const { data, isFetching, error } = useTransactionStatus({
|
|
21
|
+
boc,
|
|
22
|
+
query: {
|
|
23
|
+
refetchInterval: (query) => {
|
|
24
|
+
const status = query.state.data?.status;
|
|
25
|
+
if (status === 'completed' || status === 'failed')
|
|
26
|
+
return false;
|
|
27
|
+
return 2000;
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
const value = {
|
|
32
|
+
status: data?.status ?? 'pending',
|
|
33
|
+
totalMessages: data?.totalMessages ?? 0,
|
|
34
|
+
pendingMessages: data?.pendingMessages ?? 0,
|
|
35
|
+
onchainMessages: data?.onchainMessages ?? 0,
|
|
36
|
+
isFetching,
|
|
37
|
+
error,
|
|
38
|
+
boc,
|
|
39
|
+
};
|
|
40
|
+
return _jsx(TransactionProgressContext.Provider, { value: value, children: children });
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=transaction-progress-provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transaction-progress-provider.js","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/transaction-progress-provider.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAQ1E,MAAM,CAAC,MAAM,0BAA0B,GAAG,aAAa,CAA8C,SAAS,CAAC,CAAC;AAEhH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,0BAA0B,CAAC,CAAC;IACvD,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,iFAAiF,CAAC,CAAC;IACvG,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAC/F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,oBAAoB,CAAC;QACrD,GAAG;QACH,KAAK,EAAE;YACH,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC;gBACxC,IAAI,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,QAAQ;oBAAE,OAAO,KAAK,CAAC;gBAChE,OAAO,IAAI,CAAC;YAChB,CAAC;SACJ;KACJ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAoC;QAC3C,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,SAAS;QACjC,aAAa,EAAE,IAAI,EAAE,aAAa,IAAI,CAAC;QACvC,eAAe,EAAE,IAAI,EAAE,eAAe,IAAI,CAAC;QAC3C,eAAe,EAAE,IAAI,EAAE,eAAe,IAAI,CAAC;QAC3C,UAAU;QACV,KAAK;QACL,GAAG;KACN,CAAC;IAEF,OAAO,KAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAuC,CAAC;AAC/G,CAAC,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Copyright (c) TonTech.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
import { useMemo } from 'react';
|
|
10
|
+
import { clsx } from 'clsx';
|
|
11
|
+
import { useI18n } from '../../../../hooks/use-i18n';
|
|
12
|
+
import { TransactionProgressProvider, useTransactionProgressContext } from './transaction-progress-provider';
|
|
13
|
+
import { TransactionProgressIcon } from './transaction-progress-icons';
|
|
14
|
+
import styles from './transaction-progress.module.css';
|
|
15
|
+
export const TransactionProgressContent = ({ children, className, classNames = {}, ...props }) => {
|
|
16
|
+
const context = useTransactionProgressContext();
|
|
17
|
+
const { status, onchainMessages, totalMessages, error } = context;
|
|
18
|
+
const { t } = useI18n();
|
|
19
|
+
const texts = useMemo(() => ({
|
|
20
|
+
pending: t('transaction.status.pending'),
|
|
21
|
+
completed: t('transaction.status.completed'),
|
|
22
|
+
failed: t('transaction.status.failed'),
|
|
23
|
+
}), [t]);
|
|
24
|
+
if (children) {
|
|
25
|
+
return _jsx(_Fragment, { children: children({ ...context, texts }) });
|
|
26
|
+
}
|
|
27
|
+
const isPending = status === 'pending' && !error;
|
|
28
|
+
const isCompleted = status === 'completed';
|
|
29
|
+
const isFailed = status === 'failed' || !!error;
|
|
30
|
+
let messageText = texts.pending;
|
|
31
|
+
if (isCompleted)
|
|
32
|
+
messageText = texts.completed;
|
|
33
|
+
if (isFailed)
|
|
34
|
+
messageText = texts.failed;
|
|
35
|
+
let progressText = null;
|
|
36
|
+
if (isPending && totalMessages > 0) {
|
|
37
|
+
progressText = `(${onchainMessages} / ${totalMessages})`;
|
|
38
|
+
}
|
|
39
|
+
return (_jsxs("div", { className: clsx(styles.container, className, classNames.container), ...props, children: [_jsx("div", { className: clsx(styles.iconContainer, classNames.icon), children: _jsx(TransactionProgressIcon, { status: status, isError: !!error }) }), _jsxs("div", { className: clsx(styles.message, classNames.message), children: [messageText, " ", progressText] })] }));
|
|
40
|
+
};
|
|
41
|
+
export const TransactionProgress = ({ boc, ...rest }) => {
|
|
42
|
+
return (_jsx(TransactionProgressProvider, { boc: boc, children: _jsx(TransactionProgressContent, { ...rest }) }));
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=transaction-progress.js.map
|
package/dist/esm/features/transaction/components/transaction-progress/transaction-progress.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transaction-progress.js","sourceRoot":"","sources":["../../../../../../src/features/transaction/components/transaction-progress/transaction-progress.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAE7G,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAyBvD,MAAM,CAAC,MAAM,0BAA0B,GAA8C,CAAC,EAClF,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,EAAE,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,OAAO,GAAG,6BAA6B,EAAE,CAAC;IAChD,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IAClE,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACH,OAAO,EAAE,CAAC,CAAC,4BAA4B,CAAC;QACxC,SAAS,EAAE,CAAC,CAAC,8BAA8B,CAAC;QAC5C,MAAM,EAAE,CAAC,CAAC,2BAA2B,CAAC;KACzC,CAAC,EACF,CAAC,CAAC,CAAC,CACN,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,4BAAG,QAAQ,CAAC,EAAE,GAAG,OAAO,EAAE,KAAK,EAAE,CAAC,GAAI,CAAC;IAClD,CAAC;IAED,MAAM,SAAS,GAAG,MAAM,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC;IACjD,MAAM,WAAW,GAAG,MAAM,KAAK,WAAW,CAAC;IAC3C,MAAM,QAAQ,GAAG,MAAM,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC;IAEhD,IAAI,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC;IAChC,IAAI,WAAW;QAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/C,IAAI,QAAQ;QAAE,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IAEzC,IAAI,YAAY,GAAG,IAAI,CAAC;IACxB,IAAI,SAAS,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;QACjC,YAAY,GAAG,IAAI,eAAe,MAAM,aAAa,GAAG,CAAC;IAC7D,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,KAAM,KAAK,aAC9E,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,IAAI,CAAC,YACvD,KAAC,uBAAuB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,GAAI,GAC3D,EAEN,eAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,aACnD,WAAW,OAAG,YAAY,IACzB,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAClF,OAAO,CACH,KAAC,2BAA2B,IAAC,GAAG,EAAE,GAAG,YACjC,KAAC,0BAA0B,OAAK,IAAI,GAAI,GACd,CACjC,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: 16px;
|
|
7
|
+
padding: 24px;
|
|
8
|
+
color: var(--ta-color-text);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.iconContainer {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
color: var(--ta-color-text-secondary);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.spinner {
|
|
19
|
+
animation: transaction-status-spin 1s linear infinite;
|
|
20
|
+
color: var(--ta-color-primary);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.success {
|
|
24
|
+
color: #4caf50;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.failed {
|
|
28
|
+
color: #f44336;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.message {
|
|
32
|
+
composes: bodyLargeMedium from "../../../../styles/typography.module.css";
|
|
33
|
+
text-align: center;
|
|
34
|
+
font-family: var(--ta-font-family-mono);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes transaction-status-spin {
|
|
38
|
+
from {
|
|
39
|
+
transform: rotate(0deg);
|
|
40
|
+
}
|
|
41
|
+
to {
|
|
42
|
+
transform: rotate(360deg);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) TonTech.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { getTransactionStatusQueryOptions } from '@ton/appkit/queries';
|
|
9
|
+
import { useQuery } from '../../../libs/query';
|
|
10
|
+
import { useAppKit } from '../../../hooks/use-app-kit';
|
|
11
|
+
/**
|
|
12
|
+
* Hook to get the status of a transaction trace by BOC.
|
|
13
|
+
*
|
|
14
|
+
* This hook polls the toncenter API to track the progress of a transaction trace.
|
|
15
|
+
* It is useful for tracking complex operations like swaps or multi-step flows.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```ts
|
|
19
|
+
* const { data: status } = useTransactionStatus({
|
|
20
|
+
* boc: 'te6cc...',
|
|
21
|
+
* query: {
|
|
22
|
+
* refetchInterval: 2000, // Poll every 2 seconds
|
|
23
|
+
* }
|
|
24
|
+
* });
|
|
25
|
+
*
|
|
26
|
+
* if (status?.status === 'pending') {
|
|
27
|
+
* console.log(`Progress: ${status.completedMessages}/${status.totalMessages}`);
|
|
28
|
+
* }
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export const useTransactionStatus = (parameters) => {
|
|
32
|
+
const appKit = useAppKit();
|
|
33
|
+
return useQuery(getTransactionStatusQueryOptions(appKit, parameters));
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=use-transaction-status.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-transaction-status.js","sourceRoot":"","sources":["../../../../../src/features/transaction/hooks/use-transaction-status.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAUvD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAsD,EACZ,EAAE;IAC5C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,OAAO,QAAQ,CAAC,gCAAgC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AAC1E,CAAC,CAAC"}
|
|
@@ -7,5 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export * from './hooks/use-send-transaction';
|
|
9
9
|
export * from './hooks/use-transfer-ton';
|
|
10
|
+
export * from './hooks/use-transaction-status';
|
|
10
11
|
export * from './components/transaction';
|
|
12
|
+
export * from './components/transaction-progress';
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/features/transaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","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/esm/locales/en.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.js","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAe;IACX,oBAAoB;IACpB,MAAM,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,YAAY;QACxB,aAAa,EAAE,gBAAgB;QAC/B,cAAc,EAAE,kBAAkB;KACrC;IAED,cAAc;IACd,WAAW,EAAE;QACT,eAAe,EAAE,kBAAkB;QACnC,UAAU,EAAE,eAAe;
|
|
1
|
+
{"version":3,"file":"en.js","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAe;IACX,oBAAoB;IACpB,MAAM,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,YAAY;QACxB,aAAa,EAAE,gBAAgB;QAC/B,cAAc,EAAE,kBAAkB;KACrC;IAED,cAAc;IACd,WAAW,EAAE;QACT,eAAe,EAAE,kBAAkB;QACnC,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE;YACJ,OAAO,EAAE,eAAe;YACxB,SAAS,EAAE,SAAS;YACpB,MAAM,EAAE,QAAQ;SACnB;KACJ;IAED,WAAW;IACX,QAAQ,EAAE;QACN,OAAO,EAAE,uBAAuB;QAChC,UAAU,EAAE,uBAAuB;QACnC,oBAAoB,EAAE,gCAAgC;KACzD;IAED,MAAM;IACN,GAAG,EAAE;QACD,MAAM,EAAE,SAAS;KACpB;CACK,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* Font */
|
|
3
3
|
--ta-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, Tahoma, Verdana, sans-serif;
|
|
4
|
+
--ta-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
4
5
|
|
|
5
6
|
/* Typography */
|
|
6
7
|
/* Headings */
|