@ton/appkit-react 0.0.1-alpha.2 → 0.0.2

package/README.md

@@ -1 +1,211 @@
--- placeholder for now --
+# @ton/appkit-react
+
+React components and hooks for AppKit.
+
+## Overview
+
+- [Initialization](#initialization)
+- [Basic Usage](#basic-usage)
+- [Swap](#swap)
+- [Creating a Swap Provider](./docs/creating-swap-provider.md): Implement your own swap provider for any DEX or protocol.
+- [Hooks](./docs/hooks.md): React hooks for wallet connection, state, and data fetching.
+- [Components](./docs/components.md): UI components for AppKit.
+
+## Installation
+
+```bash
+npm install @ton/appkit-react @tanstack/react-query @tonconnect/ui-react @ton/core @ton/crypto
+```
+
+## Dependencies
+
+`@ton/appkit-react` requires the following peer dependencies:
+
+-   `react` (>= 18.0.0)
+-   `react-dom` (>= 18.0.0)
+-   `@tanstack/react-query` (>= 5.0.0)
+-   `@tonconnect/ui-react` (>= 2.4.1)
+
+## Initialization
+
+Initialize `QueryClient` and `AppKit`, then wrap your application in `QueryClientProvider` and `AppKitProvider`.
+
+> [!NOTE]
+> Don't forget to import styles from `@ton/appkit-react/styles.css`.
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AppKit, Network, TonConnectConnector } from '@ton/appkit';
+import { AppKitProvider } from '@ton/appkit-react';
+import type { FC } from 'react';
+
+// Import styles
+import '@ton/appkit-react/styles.css';
+
+// Initialize QueryClient
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+
+// Initialize AppKit
+const appKit = new AppKit({
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: {
+                url: 'https://toncenter.com',
+                key: 'your-key',
+            },
+        },
+        // Optional: add testnet
+        // [Network.testnet().chainId]: {
+        //     apiClient: {
+        //         url: 'https://testnet.toncenter.com',
+        //         key: 'your-key',
+        //     },
+        // },
+    },
+    connectors: [
+        new TonConnectConnector({
+            tonConnectOptions: {
+                manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
+            },
+        }),
+    ],
+});
+
+export const App: FC = () => {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <AppKitProvider appKit={appKit}>{/* <AppContent /> */}</AppKitProvider>
+        </QueryClientProvider>
+    );
+};
+```
+[Read more about TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
+
+### TonConnect Configuration
+
+When using `TonConnectConnector`, you can pass `tonConnectOptions` which accepts standard [TonConnectUI options](https://github.com/ton-connect/sdk/tree/main/packages/ui-react#parameters), including `manifestUrl`, `uiOptions`, etc.
+
+## Basic Usage
+
+### Connect Wallet
+
+Use `TonConnectButton` to allow users to connect their wallets. It handles the connection flow and UI.
+
+```tsx
+import { TonConnectButton } from '@ton/appkit-react';
+
+export const Header = () => {
+    return (
+        <header>
+            <TonConnectButton />
+        </header>
+    );
+};
+```
+
+### Get Wallet Address
+
+Use `useAddress` to get the currently connected wallet address.
+
+```tsx
+import { useAddress } from '@ton/appkit-react';
+
+export const AddressBlock = () => {
+    const address = useAddress();
+
+    if (!address) {
+        return <div>Wallet not connected</div>;
+    }
+
+    return <div>Address: {address}</div>;
+};
+```
+
+### Get Balance
+
+Use `useBalance` to fetch the TON balance of the connected wallet.
+
+```tsx
+import { useBalance } from '@ton/appkit-react';
+
+export const Balance = () => {
+    const { data: balance, isLoading } = useBalance();
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    return <div>Balance: {balance?.toString()} TON</div>;
+};
+```
+
+> See [Hooks Documentation](./docs/hooks.md) for all available hooks and [Components Documentation](./docs/components.md) for UI components.
+
+## Swap
+
+AppKit uses a provider-based architecture for swaps. Any DEX or protocol can implement a swap provider by extending the `SwapProvider` class — AppKit handles routing, hooks, and transaction building through a unified interface.
+
+`OmnistonSwapProvider` is an available provider. You can use it, replace it, or run multiple providers side by side. To implement your own, see [Creating a Swap Provider](./docs/creating-swap-provider.md).
+
+### Installation
+
+```bash
+npm install @ston-fi/omniston-sdk
+```
+
+### Setup
+
+Initialize `AppKit` with `OmnistonSwapProvider`:
+
+```ts
+// Initialize AppKit with swap provider
+const appKit = new AppKit({
+    networks: {
+        [Network.mainnet().chainId]: {
+            apiClient: {
+                url: 'https://toncenter.com',
+                key: 'your-key',
+            },
+        },
+    },
+    providers: [
+        new OmnistonSwapProvider({
+            // Optional configuration
+            apiUrl: 'https://api.ston.fi',
+            defaultSlippageBps: 100, // 1%
+        }),
+    ],
+});
+```
+
+### Hooks
+
+Use `useSwapQuote` to get a quote and `useBuildSwapTransaction` to build the transaction.
+
+See [Swap Hooks](./docs/hooks.md#swap) for usage examples.
+
+## Migration from TonConnect UI
+
+`AppKitProvider` automatically bridges TonConnect if a `TonConnectConnector` is configured, so `@tonconnect/ui-react` hooks (like `useTonAddress`, `useTonWallet`, etc.) work out of the box inside `AppKitProvider`.
+
+You can use standard TonConnect hooks in your components:
+
+```tsx
+import { useTonAddress } from '@tonconnect/ui-react';
+
+export const AppContent: FC = () => {
+    const address = useTonAddress();
+
+    return <p>Address: {address}</p>;
+};
+```
+
+## License
+
+MIT

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './block.module.css';
+export const Block = ({ className, direction = 'column', ...props }) => {
+    return _jsx("div", { className: clsx(styles.block, direction === 'row' && styles.row, className), ...props });
+};
+//# sourceMappingURL=block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"block.js","sourceRoot":"","sources":["../../../../src/components/block/block.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAMxC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnF,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,IAAI,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC3G,CAAC,CAAC"}

package/dist/esm/components/block/block.module.css

@@ -0,0 +1,13 @@
+.block {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: var(--ta-border-radius-l);
+  background-color: var(--ta-color-block);
+}
+
+.row {
+  flex-direction: row;
+  align-items: center;
+}

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1 @@
+{"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/block/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 './block';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/block/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './button.module.css';
+export const Button = ({ className, ...props }) => {
+    return _jsx("button", { className: clsx(styles.button, className), ...props });
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAiC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5E,OAAO,iBAAQ,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC5E,CAAC,CAAC"}

package/dist/esm/components/button/button.module.css

@@ -0,0 +1,38 @@
+.button {
+  composes: bodyMedium from "../../styles/typography.module.css";
+  appearance: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  border-radius: 20px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  background-color: var(--ta-color-primary); 
+  color: var(--ta-color-primary-foreground);
+  transition: transform 0.125s ease-in-out, background-color 0.2s ease;
+  will-change: transform;
+}
+
+.button:hover {
+  transform: scale(1.02);
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button:disabled:hover,
+.button:disabled:active {
+  transform: none;
+}

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1 @@
+{"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"}

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

@@ -0,0 +1,9 @@
+/**
+ * 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 { Button } from './button';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/esm/components/circle-icon/circle-icon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Avatar } from 'radix-ui';
+import styles from './circle-icon.module.css';
+export const CircleIcon = ({ className, size = 30, src, alt, fallback, ...props }) => {
+    return (_jsxs(Avatar.Root, { className: clsx(styles.avatarRoot, className), style: { width: size, height: size }, ...props, children: [_jsx(Avatar.Image, { className: styles.avatarImage, src: src, alt: alt }), (fallback || alt) && (_jsx(Avatar.Fallback, { className: styles.avatarFallback, delayMs: 600, children: fallback ? fallback : alt?.[0] }))] }));
+};
+//# sourceMappingURL=circle-icon.js.map

package/dist/esm/components/circle-icon/circle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-icon.js","sourceRoot":"","sources":["../../../../src/components/circle-icon/circle-icon.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAS9C,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtG,OAAO,CACH,MAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAM,KAAK,aACvG,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,EAElE,CAAC,QAAQ,IAAI,GAAG,CAAC,IAAI,CAClB,KAAC,MAAM,CAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,GAAG,YAC1D,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GACjB,CACrB,IACS,CACjB,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/circle-icon/circle-icon.module.css

@@ -0,0 +1,32 @@
+.avatarRoot {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	vertical-align: middle;
+	overflow: hidden;
+	user-select: none;
+	width: 45px;
+	height: 45px;
+	border-radius: 100%;
+	background-color: var(--ta-color-block);
+}
+
+.avatarImage {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+}
+
+.avatarFallback {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+	color: var(--ta-color-block-foreground);
+	font-size: 15px;
+	line-height: 1;
+	font-weight: 500;
+}

package/dist/esm/components/circle-icon/circle-icon.stories.js

@@ -0,0 +1,56 @@
+/**
+ * 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 { CircleIcon } from './circle-icon';
+const meta = {
+    title: 'Private/Components/CircleIcon',
+    component: CircleIcon,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'range', min: 20, max: 100, step: 5 },
+        },
+    },
+};
+export default meta;
+export const WithImage = {
+    args: {
+        size: 48,
+        src: 'https://ton.org/download/ton_symbol.png',
+        alt: 'TON',
+    },
+};
+export const WithFallback = {
+    args: {
+        size: 48,
+        fallback: 'T',
+        alt: 'TON',
+    },
+};
+export const WithInvalidImage = {
+    args: {
+        size: 48,
+        src: 'https://invalid-url.com/image.png',
+        alt: 'Fallback',
+        fallback: 'F',
+    },
+};
+export const SmallSize = {
+    args: {
+        size: 24,
+        src: 'https://ton.org/download/ton_symbol.png',
+        alt: 'TON',
+    },
+};
+export const LargeSize = {
+    args: {
+        size: 80,
+        src: 'https://ton.org/download/ton_symbol.png',
+        alt: 'TON',
+    },
+};
+//# sourceMappingURL=circle-icon.stories.js.map

package/dist/esm/components/circle-icon/circle-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-icon.stories.js","sourceRoot":"","sources":["../../../../src/components/circle-icon/circle-icon.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,IAAI,GAA4B;IAClC,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE;SACzD;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,yCAAyC;QAC9C,GAAG,EAAE,KAAK;KACb;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAC/B,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,GAAG;QACb,GAAG,EAAE,KAAK;KACb;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACnC,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,mCAAmC;QACxC,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,GAAG;KAChB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,yCAAyC;QAC9C,GAAG,EAAE,KAAK;KACb;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,yCAAyC;QAC9C,GAAG,EAAE,KAAK;KACb;CACJ,CAAC"}

package/dist/esm/components/circle-icon/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 './circle-icon';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/circle-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/circle-icon/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,eAAe,CAAC"}

package/dist/esm/components/ton-icon/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 { TonIcon, TonIconCircle } from './ton-icon';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ton-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ton-icon/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/components/ton-icon/ton-icon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TonIcon = ({ size = 16, ...props }) => {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 29 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M23.7861 0H4.58614C1.08614 0 -1.11386 3.8 0.586136 6.9L12.3861 27.4C13.1861 28.7 15.0861 28.7 15.8861 27.4L27.6861 6.9C29.4861 3.8 27.2861 0 23.7861 0ZM12.4861 21.2L9.88614 16.2L3.68614 5.1C3.28614 4.4 3.78614 3.5 4.68614 3.5H12.4861V21.2ZM24.6861 5.1L18.4861 16.2L15.8861 21.2V3.5H23.6861C24.5861 3.5 25.0861 4.4 24.6861 5.1Z", fill: "currentColor" }) }));
+};
+export const TonIconCircle = ({ size = 16, ...props }) => {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_2906_144)", children: [_jsx("path", { d: "M28 56C43.5 56 56 43.5 56 28C56 12.5 43.5 0 28 0C12.5 0 0 12.5 0 28C0 43.5 12.5 56 28 56Z", fill: "#0098EA" }), _jsx("path", { d: "M37.5996 15.6H18.3996C14.8996 15.6 12.6996 19.4 14.3996 22.5L26.1996 43C26.9996 44.3 28.8996 44.3 29.6996 43L41.4996 22.5C43.2996 19.4 41.0996 15.6 37.5996 15.6ZM26.2996 36.8L23.6996 31.8L17.4996 20.7C17.0996 20 17.5996 19.1 18.4996 19.1H26.2996V36.8ZM38.4996 20.7L32.2996 31.8L29.6996 36.8V19.1H37.4996C38.3996 19.1 38.8996 20 38.4996 20.7Z", fill: "white" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2906_144", children: _jsx("rect", { width: "56", height: "56", fill: "white" }) }) })] }));
+};
+//# sourceMappingURL=ton-icon.js.map

package/dist/esm/components/ton-icon/ton-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ton-icon.js","sourceRoot":"","sources":["../../../../src/components/ton-icon/ton-icon.tsx"],"names":[],"mappings":";AAcA,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,CACH,cAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,KAAK,KAAK,YACxG,eACI,CAAC,EAAC,wUAAwU,EAC1U,IAAI,EAAC,cAAc,GACrB,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAqB,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,CACH,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,KAAK,KAAK,aACxG,aAAG,QAAQ,EAAC,sBAAsB,aAC9B,eACI,CAAC,EAAC,2FAA2F,EAC7F,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,uVAAuV,EACzV,IAAI,EAAC,OAAO,GACd,IACF,EACJ,yBACI,mBAAU,EAAE,EAAC,gBAAgB,YACzB,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,GACrC,GACR,IACL,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/ton-icon/ton-icon.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TonIcon, TonIconCircle } from './ton-icon';
+const meta = {
+    title: 'Private/Components/TonIcon',
+    component: TonIcon,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'range', min: 12, max: 64, step: 4 },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { color: 'white' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 24,
+    },
+};
+export const Small = {
+    args: {
+        size: 16,
+    },
+};
+export const Large = {
+    args: {
+        size: 48,
+    },
+};
+export const CustomColor = {
+    args: {
+        size: 32,
+        style: { color: '#0098EB' },
+    },
+};
+export const Circle = {
+    render: (args) => _jsx(TonIconCircle, { ...args }),
+    args: {
+        size: 48,
+    },
+};
+export const CircleSmall = {
+    render: (args) => _jsx(TonIconCircle, { ...args }),
+    args: {
+        size: 24,
+    },
+};
+export const CircleLarge = {
+    render: (args) => _jsx(TonIconCircle, { ...args }),
+    args: {
+        size: 72,
+    },
+};
+//# sourceMappingURL=ton-icon.stories.js.map

package/dist/esm/components/ton-icon/ton-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ton-icon.stories.js","sourceRoot":"","sources":["../../../../src/components/ton-icon/ton-icon.stories.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,IAAI,GAAyB;IAC/B,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;SACxD;KACJ;IACD,UAAU,EAAE;QACR,CAAC,KAAK,EAAE,EAAE,CAAC,CACP,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAC1B,KAAC,KAAK,KAAG,GACP,CACT;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;KACX;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IACxB,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;KACX;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IACxB,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;KACX;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;KAC9B;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAmC;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI;IAC7C,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;KACX;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAmC;IACvD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI;IAC7C,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;KACX;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAmC;IACvD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,IAAI,GAAI;IAC7C,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;KACX;CACJ,CAAC"}

package/dist/esm/features/balances/components/balance-badge/balance-badge.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { formatUnits } from '@ton/appkit';
+import clsx from 'clsx';
+import { Block } from '../../../../components/block';
+import styles from './balance-badge.module.css';
+import { CircleIcon } from '../../../../components/circle-icon';
+const BalanceBadgeContainer = ({ className, ...props }) => {
+    return _jsx(Block, { direction: "row", className: clsx(styles.balance, className), ...props });
+};
+const BalanceBlock = ({ className, ...props }) => {
+    return _jsx("div", { className: clsx(styles.balanceContainer, className), ...props });
+};
+const Balance = ({ balance, decimals, ...props }) => {
+    return _jsx("span", { ...props, children: balance ? formatUnits(balance, decimals) : '0' });
+};
+const BalanceSymbol = ({ className, symbol, ...props }) => {
+    return (_jsx("span", { className: clsx(styles.ticker, className), ...props, children: symbol }));
+};
+export const BalanceBadge = {
+    Container: BalanceBadgeContainer,
+    Icon: CircleIcon,
+    BalanceBlock: BalanceBlock,
+    Symbol: BalanceSymbol,
+    Balance: Balance,
+};
+//# sourceMappingURL=balance-badge.js.map

package/dist/esm/features/balances/components/balance-badge/balance-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"balance-badge.js","sourceRoot":"","sources":["../../../../../../src/features/balances/components/balance-badge/balance-badge.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,MAAM,qBAAqB,GAA8B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,KAAC,KAAK,IAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC5F,CAAC,CAAC;AAEF,MAAM,YAAY,GAA8B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxE,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACnF,CAAC,CAAC;AAEF,MAAM,OAAO,GAAuE,CAAC,EACjF,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,EAAE;IACD,OAAO,kBAAU,KAAK,YAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,GAAQ,CAAC;AACpF,CAAC,CAAC;AAEF,MAAM,aAAa,GAAoD,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvG,OAAO,CACH,eAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAM,KAAK,YACrD,MAAM,GACJ,CACV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,UAAU;IAChB,YAAY,EAAE,YAAY;IAC1B,MAAM,EAAE,aAAa;IACrB,OAAO,EAAE,OAAO;CACnB,CAAC"}