@ton/appkit-react 0.0.6-alpha.3 → 1.0.0-alpha.1

package/README.md

@@ -1,9 +1,3 @@
-<!--
-This file is auto-generated. Do not edit manually.
-Changes will be overwritten when running the docs update script.
-Source template: template/packages/appkit-react/README.md
--->
-
 # @ton/appkit-react
 
 React components and hooks for AppKit.
@@ -216,11 +210,11 @@ const appKit = new AppKit({
         },
     },
     providers: [
-        new OmnistonSwapProvider({
+        createOmnistonProvider({
             apiUrl: 'https://api.ston.fi',
             defaultSlippageBps: 100, // 1%
         }),
-        new DeDustSwapProvider({
+        createDeDustProvider({
             defaultSlippageBps: 100,
             referralAddress: 'EQ...', // Optional
         }),
@@ -240,24 +234,55 @@ AppKit supports staking through various providers (e.g., Tonstakers). The stakin
 
 ### Hooks
 
-Use `useStakingQuote` to get a staking/unstaking quote and `useBuildStakeTransaction` or `useBuildUnstakeTransaction` to build the transaction.
+Use `useStakingQuote` to get a staking/unstaking quote and `useBuildStakeTransaction` to build the transaction.
 
 [Read more about Staking](https://github.com/ton-connect/kit/tree/main/packages/appkit/docs/staking.md)
 
 ```tsx
-const { data: quote } = useStakingQuote({
-    amount: '1000000000',
+const {
+    data: quote,
+    isLoading,
+    error,
+} = useStakingQuote({
+    amount: '10',
     direction: 'stake',
 });
 
-const { data: balance } = useStakedBalance({
-    userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+if (isLoading) return <div>Loading quote...</div>;
+if (error) return <div>Error: {error.message}</div>;
+
+return <div>Expected Output: {quote?.amountOut}</div>;
+```
+
+```tsx
+const { data: quote } = useStakingQuote({
+    amount: '10',
+    direction: 'stake',
 });
 
+const { mutateAsync: buildTx, isPending: isBuilding } = useBuildStakeTransaction();
+const { mutateAsync: sendTx, isPending: isSending } = useSendTransaction();
+
+const handleStake = async () => {
+    if (!quote) return;
+    try {
+        const transaction = await buildTx({
+            quote,
+            userAddress: 'EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c',
+        });
+        await sendTx(transaction);
+    } catch (e) {
+        console.error(e);
+    }
+};
+
+const isPending = isBuilding || isSending;
+
 return (
     <div>
-        <div>Staking Quote: {quote?.amountOut}</div>
-        <div>Staked Balance: {balance?.stakedBalance}</div>
+        <button onClick={handleStake} disabled={!quote || isPending}>
+            {isPending ? 'Processing...' : 'Stake'}
+        </button>
     </div>
 );
 ```
@@ -281,3 +306,10 @@ export const AppContent: FC = () => {
 ## License
 
 MIT
+
+<!--
+This file is auto-generated. Do not edit manually.
+Changes will be overwritten when running the docs update script.
+Source template: template/packages/appkit-react/README.md
+-->
+

package/dist/esm/components/shared/amount-presets/amount-presets.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button } from '../../ui/button';
+import styles from './amount-presets.module.css';
+export const AmountPresets = ({ presets, currencySymbol, onPresetSelect, className, ...props }) => {
+    return (_jsx("div", { className: clsx(styles.container, className), ...props, children: presets.map((preset) => (_jsxs(Button, { size: "s", variant: "secondary", className: styles.preset, onClick: () => (preset.onSelect ? preset.onSelect() : onPresetSelect(preset.amount)), children: [currencySymbol, preset.label] }, preset.label))) }));
+};
+//# sourceMappingURL=amount-presets.js.map

package/dist/esm/components/shared/amount-presets/amount-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amount-presets.js","sourceRoot":"","sources":["../../../../../src/components/shared/amount-presets/amount-presets.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAcjD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAClD,OAAO,EACP,cAAc,EACd,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,EAAE;IACD,OAAO,CACH,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,YACvD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACrB,MAAC,MAAM,IAEH,IAAI,EAAC,GAAG,EACR,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,aAEnF,cAAc,EACd,MAAM,CAAC,KAAK,KAPR,MAAM,CAAC,KAAK,CAQZ,CACZ,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/shared/amount-presets/amount-presets.module.css

@@ -0,0 +1,20 @@
+.container {
+    width: 100%;
+    display: grid;
+    gap: 8px;
+    justify-content: center;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    margin: 0 auto;
+}
+
+.preset {
+    width: 100%;
+    padding: 8px 16px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.preset:hover {
+    background: var(--ta-color-background-secondary);
+    border-color: var(--ta-color-text-secondary);
+}

package/dist/esm/{features/balances/components/balance-badge → components/shared/amount-presets}/index.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { BalanceBadge } from './balance-badge';
+export { AmountPresets } from './amount-presets';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/shared/amount-presets/index.js.map

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

package/dist/esm/components/shared/button-with-connect/button-with-connect.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../ui/button';
+import { useConnectors, useConnect, useSelectedWallet } from '../../../features/wallets';
+import { useI18n } from '../../../features/settings';
+export const ButtonWithConnect = (props) => {
+    const connectors = useConnectors();
+    const { mutate: connect, isPending: isConnecting } = useConnect();
+    const [wallet] = useSelectedWallet();
+    const isWalletConnected = wallet !== null;
+    const { t } = useI18n();
+    if (!isWalletConnected) {
+        return (_jsx(Button, { ...props, disabled: isConnecting || connectors.length === 0, onClick: () => connectors[0] && connect({ connectorId: connectors[0].id }), children: t('wallet.connectWallet') }));
+    }
+    return _jsx(Button, { ...props });
+};
+//# sourceMappingURL=button-with-connect.js.map

package/dist/esm/components/shared/button-with-connect/button-with-connect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-with-connect.js","sourceRoot":"","sources":["../../../../../src/components/shared/button-with-connect/button-with-connect.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAoB,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,CAAC;IAClE,MAAM,CAAC,MAAM,CAAC,GAAG,iBAAiB,EAAE,CAAC;IACrC,MAAM,iBAAiB,GAAG,MAAM,KAAK,IAAI,CAAC;IAE1C,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACrB,OAAO,CACH,KAAC,MAAM,OACC,KAAK,EACT,QAAQ,EAAE,YAAY,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAEzE,CAAC,CAAC,sBAAsB,CAAC,GACrB,CACZ,CAAC;IACN,CAAC;IAED,OAAO,KAAC,MAAM,OAAK,KAAK,GAAI,CAAC;AACjC,CAAC,CAAC"}

package/dist/esm/components/shared/button-with-connect/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 { ButtonWithConnect } from './button-with-connect';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/button-with-connect/index.js.map

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

package/dist/esm/components/{ton-icon → shared/low-balance-modal}/index.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { TonIcon, TonIconCircle } from './ton-icon';
+export { LowBalanceModal } from './low-balance-modal';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/shared/low-balance-modal/index.js.map

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

package/dist/esm/components/shared/low-balance-modal/low-balance-modal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '../../ui/modal/modal';
+import { Button } from '../../ui/button';
+import { useI18n } from '../../../features/settings/hooks/use-i18n';
+import styles from './low-balance-modal.module.css';
+export const LowBalanceModal = ({ open, mode, requiredTon, onChange, onCancel }) => {
+    const { t } = useI18n();
+    const messageKey = mode === 'reduce' ? 'lowBalance.messageReduce' : 'lowBalance.messageTopup';
+    return (_jsxs(Modal, { open: open, onOpenChange: (isOpen) => !isOpen && onCancel(), title: t('lowBalance.title'), children: [_jsx("p", { className: styles.message, children: t(messageKey, { amount: requiredTon }) }), _jsx("div", { className: styles.actions, children: mode === 'reduce' ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", size: "l", fullWidth: true, onClick: onCancel, children: t('lowBalance.cancel') }), _jsx(Button, { variant: "fill", size: "l", fullWidth: true, onClick: onChange, children: t('lowBalance.change') })] })) : (_jsx(Button, { variant: "fill", size: "l", fullWidth: true, onClick: onCancel, children: t('lowBalance.close') })) })] }));
+};
+//# sourceMappingURL=low-balance-modal.js.map

package/dist/esm/components/shared/low-balance-modal/low-balance-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"low-balance-modal.js","sourceRoot":"","sources":["../../../../../src/components/shared/low-balance-modal/low-balance-modal.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AACpE,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAiBpD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzG,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,UAAU,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,yBAAyB,CAAC;IAE9F,OAAO,CACH,MAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,kBAAkB,CAAC,aAC5F,YAAG,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,CAAC,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,GAAK,EAE1E,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YACzB,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACjB,8BACI,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,GAAG,EAAC,SAAS,QAAC,OAAO,EAAE,QAAQ,YAC3D,CAAC,CAAC,mBAAmB,CAAC,GAClB,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAC,SAAS,QAAC,OAAO,EAAE,QAAQ,YACtD,CAAC,CAAC,mBAAmB,CAAC,GAClB,IACV,CACN,CAAC,CAAC,CAAC,CACA,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAC,SAAS,QAAC,OAAO,EAAE,QAAQ,YACtD,CAAC,CAAC,kBAAkB,CAAC,GACjB,CACZ,GACC,IACF,CACX,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/shared/low-balance-modal/low-balance-modal.module.css

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ */
+
+.message {
+  margin: 0 0 16px;
+  padding: 0 4px;
+  color: var(--ta-color-text-secondary);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

package/dist/esm/components/shared/option-switcher/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 './option-switcher';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/option-switcher/index.js.map

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

package/dist/esm/components/shared/option-switcher/option-switcher.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ChevronsIcon } from '../../ui/icons';
+import { Select } from '../../ui/select';
+import styles from './option-switcher.module.css';
+/**
+ * Compact selector used inside settings modals next to a label.
+ */
+export const OptionSwitcher = ({ value, options, onChange, disabled, className }) => {
+    const current = options.find((option) => option.value === value);
+    const currentLabel = current?.label ?? value ?? '—';
+    return (_jsxs(Select.Root, { value: value, onValueChange: onChange, disabled: disabled, children: [_jsxs(Select.Trigger, { variant: "unstyled", size: "unset", className: clsx(styles.button, className), children: [currentLabel, _jsx(ChevronsIcon, { size: 20 })] }), _jsx(Select.Content, { align: "end", children: options.map((option) => (_jsx(Select.Item, { value: option.value, children: option.label }, option.value))) })] }));
+};
+//# sourceMappingURL=option-switcher.js.map

package/dist/esm/components/shared/option-switcher/option-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-switcher.js","sourceRoot":"","sources":["../../../../../src/components/shared/option-switcher/option-switcher.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAmBlD;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACzG,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,OAAO,EAAE,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC;IAEpD,OAAO,CACH,MAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aAClE,MAAC,MAAM,CAAC,OAAO,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,aACpF,YAAY,EACb,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,IACb,EACjB,KAAC,MAAM,CAAC,OAAO,IAAC,KAAK,EAAC,KAAK,YACtB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACrB,KAAC,MAAM,CAAC,IAAI,IAAoB,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9C,MAAM,CAAC,KAAK,IADC,MAAM,CAAC,KAAK,CAEhB,CACjB,CAAC,GACW,IACP,CACjB,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/shared/option-switcher/option-switcher.module.css

@@ -0,0 +1,18 @@
+.button {
+  composes: bodyMedium from "../../../styles/typography.module.css";
+
+  display: inline-flex;
+  height: 20px;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--ta-color-text);
+  cursor: pointer;
+}
+
+.button:disabled {
+  cursor: default;
+  color: var(--ta-color-text-secondary);
+}

package/dist/esm/components/shared/settings-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 * from './settings-button';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/settings-button/index.js.map

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

package/dist/esm/components/shared/settings-button/settings-button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button } from '../../ui/button';
+import { SlidersIcon } from '../../ui/icons';
+import styles from './settings-button.module.css';
+export const SettingsButton = ({ onClick, className, ...props }) => {
+    return (_jsx(Button, { className: clsx(styles.settingsButton, className), variant: "gray", size: "l", borderRadius: "l", onClick: onClick, ...props, children: _jsx(SlidersIcon, {}) }));
+};
+//# sourceMappingURL=settings-button.js.map

package/dist/esm/components/shared/settings-button/settings-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-button.js","sourceRoot":"","sources":["../../../../../src/components/shared/settings-button/settings-button.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAMlD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,CACH,KAAC,MAAM,IACH,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,EACjD,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,GAAG,EACR,YAAY,EAAC,GAAG,EAChB,OAAO,EAAE,OAAO,KACZ,KAAK,YAET,KAAC,WAAW,KAAG,GACV,CACZ,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/shared/settings-button/settings-button.module.css

@@ -0,0 +1,11 @@
+.settingsButton {
+  flex-shrink: 0;
+  width: 50px;
+  height: 50px;
+  aspect-ratio: 1 / 1;
+}
+
+.settingsButton svg {
+  width: 24px;
+  height: 24px;
+}

package/dist/esm/components/shared/token-select-modal/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 { TokenSelectModal } from './token-select-modal';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/token-select-modal/index.js.map

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

package/dist/esm/components/shared/token-select-modal/token-select-modal.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { useState } from 'react';
+import { compareAddress } from '@ton/appkit';
+import { Input } from '../../ui/input/input';
+import { Modal } from '../../ui/modal/modal';
+import { SearchIcon } from '../../ui/icons';
+import { CurrencyItem } from '../../../features/balances';
+import { useI18n } from '../../../features/settings/hooks/use-i18n';
+import styles from './token-select-modal.module.css';
+export const TokenSelectModal = ({ open, onClose, tokens, onSelect, title, searchPlaceholder, }) => {
+    const { t } = useI18n();
+    const [search, setSearch] = useState('');
+    const filtered = tokens.filter((token) => token.symbol.toLowerCase().includes(search.toLowerCase()) ||
+        token.name.toLowerCase().includes(search.toLowerCase()) ||
+        compareAddress(token.address, search));
+    const handleSelect = (token) => () => {
+        onSelect(token);
+        onClose();
+        setSearch('');
+    };
+    const handleOpenChange = (isOpen) => {
+        if (!isOpen) {
+            onClose();
+            setSearch('');
+        }
+    };
+    return (_jsxs(Modal, { open: open, onOpenChange: handleOpenChange, title: title, children: [_jsx(Input.Container, { className: styles.searchWrapper, size: "s", children: _jsxs(Input.Field, { children: [_jsx(Input.Slot, { children: _jsx(SearchIcon, { size: 24 }) }), _jsx(Input.Input, { placeholder: searchPlaceholder, value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true })] }) }), _jsx("div", { className: styles.list, children: tokens.length === 0 ? (_jsx("div", { className: styles.empty, children: _jsx("p", { className: styles.emptyText, children: t('tokenSelect.emptyForNetwork') }) })) : filtered.length === 0 ? (_jsxs("div", { className: styles.empty, children: [_jsx("p", { className: styles.emptyText, children: t('tokenSelect.emptyNoMatch') }), _jsx("p", { className: styles.emptyText, children: t('tokenSelect.emptyTryAddress') })] })) : (_jsx("ul", { className: styles.list, children: filtered.map((token) => (_jsx(CurrencyItem, { icon: token.logo, name: token.name, ticker: token.symbol, onClick: handleSelect(token) }, token.address))) })) })] }));
+};
+//# sourceMappingURL=token-select-modal.js.map

package/dist/esm/components/shared/token-select-modal/token-select-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-select-modal.js","sourceRoot":"","sources":["../../../../../src/components/shared/token-select-modal/token-select-modal.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/shared/token-select-modal/token-select-modal.module.css

@@ -0,0 +1,27 @@
+.searchWrapper {
+  margin-bottom: 16px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 400px;
+  max-height: 100%;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.empty {
+  padding: 32px 0;
+}
+
+.emptyText {
+  composes: bodyRegular from "../../../styles/typography.module.css";
+  margin: 0;
+  color: var(--ta-color-text-secondary);
+  text-align: center;
+}

package/dist/esm/components/ui/amount-reversed/amount-reversed.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatLargeValue } from '@ton/appkit';
+import clsx from 'clsx';
+import styles from './amount-reversed.module.css';
+import { Skeleton } from '../skeleton';
+import { FlipIcon } from '../icons';
+export const AmountReversed = ({ value, onChangeDirection, ticker, symbol, decimals, errorMessage, className, isLoading, ...props }) => {
+    if (errorMessage) {
+        return (_jsx("div", { className: clsx(styles.container, className), ...props, children: errorMessage }));
+    }
+    return (_jsxs("div", { className: clsx(styles.container, className), ...props, children: [isLoading ? (_jsx(Skeleton, { className: styles.skeleton })) : (_jsxs("span", { children: [symbol, value ? formatLargeValue(value, decimals) : '0', ticker ? ` ${ticker}` : ''] })), onChangeDirection && (_jsx("button", { type: "button", className: styles.changeDirection, onClick: onChangeDirection, children: _jsx(FlipIcon, { size: 16 }) }))] }));
+};
+//# sourceMappingURL=amount-reversed.js.map

package/dist/esm/components/ui/amount-reversed/amount-reversed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amount-reversed.js","sourceRoot":"","sources":["../../../../../src/components/ui/amount-reversed/amount-reversed.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAYpC,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACpD,KAAK,EACL,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACX,EAAE,EAAE;IACD,IAAI,YAAY,EAAE,CAAC;QACf,OAAO,CACH,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,YACvD,YAAY,GACX,CACT,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,aACvD,SAAS,CAAC,CAAC,CAAC,CACT,KAAC,QAAQ,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAC3C,CAAC,CAAC,CAAC,CACA,2BACK,MAAM,EACN,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,EAC/C,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IACxB,CACV,EAEA,iBAAiB,IAAI,CAClB,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,EAAE,OAAO,EAAE,iBAAiB,YAC/E,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GACjB,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/ui/amount-reversed/amount-reversed.module.css

@@ -0,0 +1,34 @@
+.container {
+    composes: bodySemibold from '../../../styles/typography.module.css';
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: text;
+    width: 100%;
+    overflow: hidden;
+    color: var(--ta-color-text-secondary);
+    gap: 8px;
+}
+
+.skeleton {
+    width: 70px;
+    height: calc(var(--ta-body-regular-line-height) - 4px);
+    margin: 2px 0;
+}
+
+.changeDirection {
+    width: 14px;
+    height: 14px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+    color: var(--ta-color-text);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.changeDirection:hover {
+    opacity: 0.8;
+}

package/dist/esm/components/ui/amount-reversed/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 { AmountReversed } from './amount-reversed';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ui/amount-reversed/index.js.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"block.js","sourceRoot":"","sources":["../../../../../src/components/ui/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 → ui/block}/block.module.css

@@ -4,7 +4,7 @@
   box-sizing: border-box;
   padding: 16px;
   border-radius: var(--ta-border-radius-l);
-  background-color: var(--ta-color-block);
+  background-color: var(--ta-color-background-secondary);
 }
 
 .row {

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from './button.module.css';
+const SIZE_DEFAULT_RADIUS = {
+    s: '2xl',
+    m: 'l',
+    l: 'xl',
+    icon: 'full',
+};
+const RADIUS_CLASS = {
+    s: 'radiusS',
+    m: 'radiusM',
+    l: 'radiusL',
+    xl: 'radiusXl',
+    '2xl': 'radius2xl',
+    full: 'radiusFull',
+};
+export const Button = forwardRef(({ className, size = 'm', borderRadius, variant = 'fill', loading = false, fullWidth = false, disabled, icon, children, ...props }, ref) => {
+    const radius = borderRadius ?? (size === 'unset' ? undefined : SIZE_DEFAULT_RADIUS[size]);
+    return (_jsx("button", { ref: ref, disabled: disabled || loading, className: clsx(styles.button, size !== 'unset' && styles[size], radius && styles[RADIUS_CLASS[radius]], variant !== 'unstyled' && styles[variant], fullWidth && styles.fullWidth, loading && styles.loading, className), ...props, children: loading ? (_jsx("span", { className: styles.spinner })) : (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: styles.innerIcon, children: icon }), children] })) }));
+});
+Button.displayName = 'Button';
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAyBzC,MAAM,mBAAmB,GAA6D;IAClF,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,IAAI,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,YAAY,GAAuC;IACrD,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,EAAE,EAAE,UAAU;IACd,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,YAAY;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC5B,CACI,EACI,SAAS,EACT,IAAI,GAAG,GAAG,EACV,YAAY,EACZ,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACX,EACD,GAAG,EACL,EAAE;IACA,MAAM,MAAM,GAAG,YAAY,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1F,OAAO,CACH,iBACI,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,SAAS,EAAE,IAAI,CACX,MAAM,CAAC,MAAM,EACb,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,EAChC,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EACtC,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,OAAO,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,SAAS,EAC7B,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,SAAS,CACZ,KACG,KAAK,YAER,OAAO,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CACtC,CAAC,CAAC,CAAC,CACA,8BACK,IAAI,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,IAAI,GAAQ,EACxD,QAAQ,IACV,CACN,GACI,CACZ,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}