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

package/src/components/ui/collapsible/collapsible.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 { useRef, useLayoutEffect, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+
+import styles from './collapsible.module.css';
+
+export interface CollapsibleProps extends ComponentProps<'div'> {
+    open: boolean;
+}
+
+export const Collapsible: FC<CollapsibleProps> = ({ open, children, ...props }) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [height, setHeight] = useState<number | undefined>(open ? undefined : 0);
+
+    useLayoutEffect(() => {
+        const el = contentRef.current;
+        if (!el) return undefined;
+
+        if (open) {
+            setHeight(el.scrollHeight);
+
+            const onEnd = () => setHeight(undefined);
+            el.addEventListener('transitionend', onEnd, { once: true });
+            return () => el.removeEventListener('transitionend', onEnd);
+        }
+
+        setHeight(el.scrollHeight);
+        const id = requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setHeight(0);
+            });
+        });
+        return () => cancelAnimationFrame(id);
+    }, [open]);
+
+    return (
+        <div
+            ref={contentRef}
+            className={styles.collapsible}
+            style={{ height: height !== undefined ? `${height}px` : undefined }}
+            aria-hidden={!open}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/ui/collapsible/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 { Collapsible } from './collapsible';
+export type { CollapsibleProps } from './collapsible';

package/src/components/ui/dialog/dialog.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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, useCallback, useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
+import type { ComponentPropsWithoutRef, ComponentRef, FC, ReactNode } from 'react';
+
+import { DialogContext, useDialogContext } from './use-dialog-context';
+
+interface DialogRootProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+const DialogRoot: FC<DialogRootProps> = ({ children, open = false, onOpenChange }) => {
+    const titleId = useId();
+    const handleOpenChange = useCallback((value: boolean) => onOpenChange?.(value), [onOpenChange]);
+
+    return (
+        <DialogContext.Provider value={{ open, onOpenChange: handleOpenChange, titleId }}>
+            {children}
+        </DialogContext.Provider>
+    );
+};
+
+interface DialogPortalProps {
+    children: ReactNode;
+    container?: Element | null;
+}
+
+const DialogPortal: FC<DialogPortalProps> = ({ children, container }) => {
+    const { open } = useDialogContext();
+    if (!open || typeof document === 'undefined') return null;
+    return createPortal(children, container ?? document.body);
+};
+
+const DialogOverlay = forwardRef<ComponentRef<'div'>, ComponentPropsWithoutRef<'div'>>((props, ref) => {
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+
+    return <div {...props} ref={ref} />;
+});
+
+DialogOverlay.displayName = 'DialogOverlay';
+
+const DialogContent = forwardRef<ComponentRef<'div'>, ComponentPropsWithoutRef<'div'>>((props, ref) => {
+    const { onOpenChange, titleId } = useDialogContext();
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onOpenChange(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onOpenChange]);
+
+    return <div role="dialog" aria-modal="true" aria-labelledby={titleId} {...props} ref={ref} />;
+});
+
+DialogContent.displayName = 'DialogContent';
+
+const DialogTitle = forwardRef<ComponentRef<'h2'>, ComponentPropsWithoutRef<'h2'>>((props, ref) => {
+    const { titleId } = useDialogContext();
+    return <h2 id={titleId} {...props} ref={ref} />;
+});
+
+DialogTitle.displayName = 'DialogTitle';
+
+const DialogClose = forwardRef<ComponentRef<'button'>, ComponentPropsWithoutRef<'button'>>(
+    ({ onClick, ...props }, ref) => {
+        const { onOpenChange } = useDialogContext();
+        return (
+            <button
+                type="button"
+                {...props}
+                ref={ref}
+                onClick={(e) => {
+                    onClick?.(e);
+                    onOpenChange(false);
+                }}
+            />
+        );
+    },
+);
+
+DialogClose.displayName = 'DialogClose';
+
+export const Dialog = {
+    Root: DialogRoot,
+    Portal: DialogPortal,
+    Overlay: DialogOverlay,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Close: DialogClose,
+};

package/src/components/{circle-icon → ui/dialog}/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export * from './circle-icon';
+export * from './dialog';

package/src/components/ui/dialog/use-dialog-context.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, useContext } from 'react';
+
+export interface DialogContextValue {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    titleId: string;
+}
+
+export const DialogContext = createContext<DialogContextValue | null>(null);
+
+export const useDialogContext = (): DialogContextValue => {
+    const ctx = useContext(DialogContext);
+    if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root');
+    return ctx;
+};

package/src/components/ui/icons/chevron-down-icon.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const ChevronDownIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/components/ui/icons/chevrons-icon.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const ChevronsIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            d="M6 13L9.29289 16.2929C9.68342 16.6834 10.3166 16.6834 10.7071 16.2929L14 13"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M14 6.58578L10.7071 3.29289C10.3166 2.90237 9.68342 2.90237 9.29289 3.29289L6 6.58578"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);

package/src/components/ui/icons/close-icon.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { FC } from 'react';
+
+import { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const CloseIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            d="M1 1L11 11M1 11L11 1"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);

package/src/components/ui/icons/failed-icon.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { FC } from 'react';
+
+import { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const FailedIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+);

package/src/components/ui/icons/flip-icon.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const FlipIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            d="M7 19V4M7 4L3.5 7.5M7 4L10.5 7.5"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M17 5V20M17 20L13.5 16.5M17 20L20.5 16.5"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);

package/src/components/ui/icons/image-icon.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { FC } from 'react';
+
+import { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const ImageIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+    </svg>
+);

package/src/components/ui/icons/index.ts

@@ -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.
+ *
+ */
+
+export * from './types';
+export * from './chevrons-icon';
+export * from './chevron-down-icon';
+export * from './close-icon';
+export * from './failed-icon';
+export * from './flip-icon';
+export * from './image-icon';
+export * from './search-icon';
+export * from './sliders-icon';
+export * from './spinner-icon';
+export * from './success-icon';
+export * from './ton-icon';
+export * from './verified-icon';

package/src/components/ui/icons/search-icon.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const SearchIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            d="M3.21973 10.4735C3.21973 9.47253 3.40778 8.53529 3.78389 7.66175C4.16 6.78214 4.6817 6.00868 5.34899 5.34139C6.01628 4.6741 6.7867 4.1524 7.66024 3.77629C8.53986 3.40018 9.48013 3.21213 10.4811 3.21213C11.482 3.21213 12.4192 3.40018 13.2928 3.77629C14.1724 4.1524 14.9459 4.6741 15.6131 5.34139C16.2804 6.00868 16.8021 6.78214 17.1782 7.66175C17.5544 8.53529 17.7424 9.47253 17.7424 10.4735C17.7424 11.3045 17.6089 12.0932 17.342 12.8393C17.0812 13.5855 16.7172 14.2619 16.2501 14.8685L20.6997 19.3454C20.7968 19.4425 20.8696 19.5547 20.9181 19.6821C20.9727 19.8095 21 19.946 21 20.0916C21 20.2917 20.9545 20.4737 20.8635 20.6375C20.7786 20.8013 20.6573 20.9287 20.4995 21.0197C20.3418 21.1168 20.1598 21.1653 19.9536 21.1653C19.808 21.1653 19.6685 21.138 19.535 21.0834C19.4076 21.0349 19.2893 20.959 19.1801 20.8559L14.7032 16.3699C14.1087 16.7945 13.4535 17.1282 12.7377 17.3708C12.0219 17.6135 11.2697 17.7348 10.4811 17.7348C9.48013 17.7348 8.53986 17.5468 7.66024 17.1706C6.7867 16.7945 6.01628 16.2728 5.34899 15.6055C4.6817 14.9383 4.16 14.1678 3.78389 13.2943C3.40778 12.4147 3.21973 11.4744 3.21973 10.4735ZM4.77573 10.4735C4.77573 11.2621 4.92132 12.0022 5.2125 12.6937C5.50975 13.3792 5.91922 13.9828 6.44092 14.5045C6.96869 15.0262 7.57532 15.4357 8.26081 15.7329C8.95236 16.0302 9.69245 16.1788 10.4811 16.1788C11.2697 16.1788 12.0067 16.0302 12.6922 15.7329C13.3838 15.4357 13.9904 15.0262 14.5121 14.5045C15.0338 13.9828 15.4433 13.3792 15.7405 12.6937C16.0378 12.0022 16.1864 11.2621 16.1864 10.4735C16.1864 9.68485 16.0378 8.9478 15.7405 8.26231C15.4433 7.57075 15.0338 6.96412 14.5121 6.44242C13.9904 5.91466 13.3838 5.50518 12.6922 5.214C12.0067 4.91675 11.2697 4.76813 10.4811 4.76813C9.69245 4.76813 8.95236 4.91675 8.26081 5.214C7.57532 5.50518 6.96869 5.91466 6.44092 6.44242C5.91922 6.96412 5.50975 7.57075 5.2125 8.26231C4.92132 8.9478 4.77573 9.68485 4.77573 10.4735Z"
+            fill="currentColor"
+        />
+    </svg>
+);

package/src/components/ui/icons/sliders-icon.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const SlidersIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path d="M4 7H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M12 7H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8 10V4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 17H12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M17 17H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M16 20V14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+);

package/src/components/ui/icons/spinner-icon.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const SpinnerIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+);

package/src/components/ui/icons/success-icon.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const SuccessIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+);

package/src/components/ui/icons/ton-icon.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const TonIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 29 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <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"
+        />
+    </svg>
+);
+
+export const TonIconCircle: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 56 56"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <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="var(--ta-color-ton)"
+        />
+        <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="var(--ta-color-white)"
+        />
+    </svg>
+);

package/src/components/ui/icons/types.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 } from 'react';
+
+/**
+ * Standard props for all icon components.
+ *
+ * Icons render an `<svg>` whose dimensions are controlled by `size`. Color is
+ * inherited from `currentColor`, so style icons by setting `color` on a parent.
+ */
+export interface IconProps extends Omit<ComponentProps<'svg'>, 'width' | 'height'> {
+    size?: number;
+}
+
+/** Default size in pixels for all icons. Override via the `size` prop. */
+export const DEFAULT_ICON_SIZE = 24;

package/src/components/ui/icons/verified-icon.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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 { DEFAULT_ICON_SIZE } from './types';
+import type { IconProps } from './types';
+
+export const VerifiedIcon: FC<IconProps> = ({ size = DEFAULT_ICON_SIZE, ...props }) => (
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+            clipRule="evenodd"
+        />
+    </svg>
+);

package/src/components/ui/info-block/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 * from './info-block';