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

package/src/components/shared/button-with-connect/button-with-connect.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 } from 'react';
+
+import type { ButtonProps } from '../../ui/button';
+import { Button } from '../../ui/button';
+import { useConnectors, useConnect, useSelectedWallet } from '../../../features/wallets';
+import { useI18n } from '../../../features/settings';
+
+export const ButtonWithConnect: FC<ButtonProps> = (props) => {
+    const connectors = useConnectors();
+    const { mutate: connect, isPending: isConnecting } = useConnect();
+    const [wallet] = useSelectedWallet();
+    const isWalletConnected = wallet !== null;
+
+    const { t } = useI18n();
+
+    if (!isWalletConnected) {
+        return (
+            <Button
+                {...props}
+                disabled={isConnecting || connectors.length === 0}
+                onClick={() => connectors[0] && connect({ connectorId: connectors[0].id })}
+            >
+                {t('wallet.connectWallet')}
+            </Button>
+        );
+    }
+
+    return <Button {...props} />;
+};

package/src/components/shared/button-with-connect/index.ts

@@ -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';

package/src/components/shared/low-balance-modal/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 { LowBalanceModal } from './low-balance-modal';
+export type { LowBalanceModalProps, LowBalanceMode } from './low-balance-modal';

package/src/components/shared/low-balance-modal/low-balance-modal.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 } from 'react';
+
+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 type LowBalanceMode = 'reduce' | 'topup';
+
+export interface LowBalanceModalProps {
+    open: boolean;
+    /**
+     * `reduce` — user can fix it by reducing the amount (shows Change/Cancel).
+     * `topup`  — reducing doesn't help, user must top up TON (shows Close only).
+     */
+    mode: LowBalanceMode;
+    /** Required amount in TON, formatted as a decimal string (e.g. "0.423"). */
+    requiredTon: string;
+    onChange: () => void;
+    onCancel: () => void;
+}
+
+export const LowBalanceModal: FC<LowBalanceModalProps> = ({ open, mode, requiredTon, onChange, onCancel }) => {
+    const { t } = useI18n();
+
+    const messageKey = mode === 'reduce' ? 'lowBalance.messageReduce' : 'lowBalance.messageTopup';
+
+    return (
+        <Modal open={open} onOpenChange={(isOpen) => !isOpen && onCancel()} title={t('lowBalance.title')}>
+            <p className={styles.message}>{t(messageKey, { amount: requiredTon })}</p>
+
+            <div className={styles.actions}>
+                {mode === 'reduce' ? (
+                    <>
+                        <Button variant="secondary" size="l" fullWidth onClick={onCancel}>
+                            {t('lowBalance.cancel')}
+                        </Button>
+                        <Button variant="fill" size="l" fullWidth onClick={onChange}>
+                            {t('lowBalance.change')}
+                        </Button>
+                    </>
+                ) : (
+                    <Button variant="fill" size="l" fullWidth onClick={onCancel}>
+                        {t('lowBalance.close')}
+                    </Button>
+                )}
+            </div>
+        </Modal>
+    );
+};

package/src/components/{button → shared/option-switcher}/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { Button } from './button';
+export * from './option-switcher';

package/src/components/shared/option-switcher/option-switcher.tsx

@@ -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 { FC } from 'react';
+import clsx from 'clsx';
+
+import { ChevronsIcon } from '../../ui/icons';
+import { Select } from '../../ui/select';
+import styles from './option-switcher.module.css';
+
+export interface OptionSwitcherOption {
+    value: string;
+    label: string;
+}
+
+export interface OptionSwitcherProps {
+    /** Currently selected option value. */
+    value: string | undefined;
+    /** Available options. */
+    options: OptionSwitcherOption[];
+    /** Called when the user picks an option. */
+    onChange: (value: string) => void;
+    /** When true, the trigger is non-interactive and dimmed. */
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * Compact selector used inside settings modals next to a label.
+ */
+export const OptionSwitcher: FC<OptionSwitcherProps> = ({ value, options, onChange, disabled, className }) => {
+    const current = options.find((option) => option.value === value);
+    const currentLabel = current?.label ?? value ?? '—';
+
+    return (
+        <Select.Root value={value} onValueChange={onChange} disabled={disabled}>
+            <Select.Trigger variant="unstyled" size="unset" className={clsx(styles.button, className)}>
+                {currentLabel}
+                <ChevronsIcon size={20} />
+            </Select.Trigger>
+            <Select.Content align="end">
+                {options.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                        {option.label}
+                    </Select.Item>
+                ))}
+            </Select.Content>
+        </Select.Root>
+    );
+};

package/src/components/{ton-icon → shared/settings-button}/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { TonIcon, TonIconCircle } from './ton-icon';
+export * from './settings-button';

package/src/components/shared/settings-button/settings-button.tsx

@@ -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 { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+
+import { Button } from '../../ui/button';
+import { SlidersIcon } from '../../ui/icons';
+import styles from './settings-button.module.css';
+
+export interface SettingsButtonProps extends ComponentProps<typeof Button> {
+    onClick?: () => void;
+}
+
+export const SettingsButton: FC<SettingsButtonProps> = ({ onClick, className, ...props }) => {
+    return (
+        <Button
+            className={clsx(styles.settingsButton, className)}
+            variant="secondary"
+            size="l"
+            borderRadius="l"
+            onClick={onClick}
+            {...props}
+        >
+            <SlidersIcon />
+        </Button>
+    );
+};

package/src/components/shared/token-select-modal/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 { TokenSelectModal } from './token-select-modal';
+export type { TokenSelectModalProps } from './token-select-modal';

package/src/components/shared/token-select-modal/token-select-modal.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 type { FC } 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 type { AppkitUIToken } from '../../../types/appkit-ui-token';
+import styles from './token-select-modal.module.css';
+
+export interface TokenSelectModalProps {
+    open: boolean;
+    onClose: () => void;
+    tokens: AppkitUIToken[];
+    onSelect: (token: AppkitUIToken) => void;
+    title: string;
+    searchPlaceholder?: string;
+}
+
+export const TokenSelectModal: FC<TokenSelectModalProps> = ({
+    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: AppkitUIToken) => () => {
+        onSelect(token);
+        onClose();
+        setSearch('');
+    };
+
+    const handleOpenChange = (isOpen: boolean) => {
+        if (!isOpen) {
+            onClose();
+            setSearch('');
+        }
+    };
+
+    return (
+        <Modal open={open} onOpenChange={handleOpenChange} title={title}>
+            <Input.Container className={styles.searchWrapper} size="s">
+                <Input.Field>
+                    <Input.Slot>
+                        <SearchIcon size={24} />
+                    </Input.Slot>
+                    <Input.Input
+                        placeholder={searchPlaceholder}
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        autoFocus
+                    />
+                </Input.Field>
+            </Input.Container>
+
+            <div className={styles.list}>
+                {tokens.length === 0 ? (
+                    <div className={styles.empty}>
+                        <p className={styles.emptyText}>{t('tokenSelect.emptyForNetwork')}</p>
+                    </div>
+                ) : filtered.length === 0 ? (
+                    <div className={styles.empty}>
+                        <p className={styles.emptyText}>{t('tokenSelect.emptyNoMatch')}</p>
+                        <p className={styles.emptyText}>{t('tokenSelect.emptyTryAddress')}</p>
+                    </div>
+                ) : (
+                    <ul className={styles.list}>
+                        {filtered.map((token) => (
+                            <CurrencyItem
+                                key={token.address}
+                                icon={token.logo}
+                                name={token.name}
+                                ticker={token.symbol}
+                                onClick={handleSelect(token)}
+                            />
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </Modal>
+    );
+};

package/src/components/ui/amount-reversed/amount-reversed.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 { formatLargeValue } from '@ton/appkit';
+import clsx from 'clsx';
+
+import styles from './amount-reversed.module.css';
+import { Skeleton } from '../skeleton';
+import { FlipIcon } from '../icons';
+
+export interface AmountReversedProps extends ComponentProps<'div'> {
+    value: string;
+    onChangeDirection?: () => void;
+    ticker?: string;
+    symbol?: string;
+    decimals?: number;
+    errorMessage?: string;
+    isLoading?: boolean;
+}
+
+export const AmountReversed: FC<AmountReversedProps> = ({
+    value,
+    onChangeDirection,
+    ticker,
+    symbol,
+    decimals,
+    errorMessage,
+    className,
+    isLoading,
+    ...props
+}) => {
+    if (errorMessage) {
+        return (
+            <div className={clsx(styles.container, className)} {...props}>
+                {errorMessage}
+            </div>
+        );
+    }
+
+    return (
+        <div className={clsx(styles.container, className)} {...props}>
+            {isLoading ? (
+                <Skeleton className={styles.skeleton} />
+            ) : (
+                <span>
+                    {symbol}
+                    {value ? formatLargeValue(value, decimals) : '0'}
+                    {ticker ? ` ${ticker}` : ''}
+                </span>
+            )}
+
+            {onChangeDirection && (
+                <button type="button" className={styles.changeDirection} onClick={onChangeDirection}>
+                    <FlipIcon size={16} />
+                </button>
+            )}
+        </div>
+    );
+};

package/src/components/ui/amount-reversed/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 { AmountReversed } from './amount-reversed';
+export type { AmountReversedProps } from './amount-reversed';

package/src/components/ui/button/button.tsx

@@ -0,0 +1,100 @@
+/**
+ * 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 type { ComponentProps, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import styles from './button.module.css';
+
+export type ButtonSize = 's' | 'm' | 'l' | 'icon' | 'unset';
+export type ButtonBorderRadius = 's' | 'm' | 'l' | 'xl' | '2xl' | 'full';
+export type ButtonVariant = 'fill' | 'secondary' | 'bezeled' | 'gray' | 'ghost' | 'unstyled';
+
+export interface ButtonProps extends ComponentProps<'button'> {
+    /**
+     * Size class applied to the button. Pass `'unset'` to skip the size class
+     * entirely (no padding, no typography) — useful with `variant="unstyled"`.
+     */
+    size?: ButtonSize;
+    borderRadius?: ButtonBorderRadius;
+    /**
+     * Visual variant. Use `'unstyled'` to opt out of all built-in styling —
+     * the consumer is fully responsible for visuals via `className`. The
+     * Button still provides ref forwarding, `disabled`/`loading` plumbing,
+     * and `icon`/`children` rendering.
+     */
+    variant?: ButtonVariant;
+    loading?: boolean;
+    fullWidth?: boolean;
+    icon?: ReactNode;
+}
+
+const SIZE_DEFAULT_RADIUS: Record<Exclude<ButtonSize, 'unset'>, ButtonBorderRadius> = {
+    s: '2xl',
+    m: 'l',
+    l: 'xl',
+    icon: 'full',
+};
+
+const RADIUS_CLASS: Record<ButtonBorderRadius, string> = {
+    s: 'radiusS',
+    m: 'radiusM',
+    l: 'radiusL',
+    xl: 'radiusXl',
+    '2xl': 'radius2xl',
+    full: 'radiusFull',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+        {
+            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 (
+            <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}
+            >
+                {loading ? (
+                    <span className={styles.spinner} />
+                ) : (
+                    <>
+                        {icon && <span className={styles.innerIcon}>{icon}</span>}
+                        {children}
+                    </>
+                )}
+            </button>
+        );
+    },
+);
+
+Button.displayName = 'Button';

package/{dist/types/components/button/index.d.ts → src/components/ui/button/index.ts}

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 export { Button } from './button';
-//# sourceMappingURL=index.d.ts.map
+export type { ButtonProps } from './button';

package/src/components/ui/centered-amount-input/centered-amount-input.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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 { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import styles from './centered-amount-input.module.css';
+
+const MIN_FONT_SCALE = 0.5;
+
+export interface CenteredAmountInputProps extends ComponentProps<'div'> {
+    value: string;
+    onValueChange: (value: string) => void;
+    ticker?: string;
+    symbol?: string;
+    placeholder?: string;
+}
+
+export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
+    value,
+    onValueChange,
+    ticker,
+    symbol,
+    placeholder = '0',
+    className,
+    ...props
+}) => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const measureRowRef = useRef<HTMLDivElement>(null);
+    const mirrorRef = useRef<HTMLSpanElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [inputWidth, setInputWidth] = useState<number | undefined>(undefined);
+    const [fontScale, setFontScale] = useState(1);
+
+    const adjustSize = useCallback(() => {
+        const wrapper = wrapperRef.current;
+        const measureRow = measureRowRef.current;
+        const mirror = mirrorRef.current;
+
+        if (!wrapper || !measureRow || !mirror) return;
+
+        const contentWidth = measureRow.offsetWidth;
+        const availableWidth = wrapper.clientWidth - 4;
+
+        let scale = 1;
+        if (contentWidth > 0 && contentWidth > availableWidth) {
+            scale = Math.max(MIN_FONT_SCALE, availableWidth / contentWidth);
+        }
+
+        setFontScale(scale);
+        setInputWidth(mirror.offsetWidth * scale + 4);
+    }, []);
+
+    useLayoutEffect(adjustSize, [value, placeholder, symbol, ticker, adjustSize]);
+
+    useLayoutEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) return;
+
+        const observer = new ResizeObserver(adjustSize);
+        observer.observe(wrapper);
+        return () => observer.disconnect();
+    }, [adjustSize]);
+
+    const scaledInputFontSize = fontScale < 1 ? `calc(var(--ta-input-xl-size) * ${fontScale})` : undefined;
+    const scaledTickerFontSize = fontScale < 1 ? `calc(var(--ta-input-xl-symbol-size) * ${fontScale})` : undefined;
+
+    return (
+        <div
+            ref={wrapperRef}
+            className={clsx(styles.wrapper, className)}
+            onClick={() => inputRef.current?.focus()}
+            {...props}
+        >
+            <div ref={measureRowRef} className={styles.measureRow} aria-hidden="true">
+                {symbol && <span className={styles.symbol}>{symbol}</span>}
+                <span className={styles.measureText}>{value || placeholder}</span>
+                {ticker && <span className={styles.ticker}>{ticker}</span>}
+            </div>
+
+            <div className={styles.row}>
+                {symbol && (
+                    <span className={styles.symbol} style={{ fontSize: scaledInputFontSize }}>
+                        {symbol}
+                    </span>
+                )}
+                <input
+                    ref={inputRef}
+                    className={styles.input}
+                    type="text"
+                    inputMode="decimal"
+                    placeholder={placeholder}
+                    value={value}
+                    onChange={(e) => onValueChange(e.target.value)}
+                    style={{
+                        width: inputWidth ? `${inputWidth}px` : undefined,
+                        fontSize: scaledInputFontSize,
+                    }}
+                />
+                {ticker && (
+                    <span className={styles.ticker} style={{ fontSize: scaledTickerFontSize }}>
+                        {ticker}
+                    </span>
+                )}
+            </div>
+
+            <span ref={mirrorRef} className={styles.mirror} aria-hidden="true">
+                {value || placeholder}
+            </span>
+        </div>
+    );
+};

package/src/components/ui/centered-amount-input/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 { CenteredAmountInput } from './centered-amount-input';
+export type { CenteredAmountInputProps } from './centered-amount-input';