first commit

src/shared/ui/Button/Button.module.css

@@ -0,0 +1,56 @@
+.btn {
+  height: 44px;
+  padding: 0 20px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: background 0.2s, opacity 0.2s, border-color 0.2s;
+}
+
+.primary {
+  background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
+  border: none;
+  color: var(--text-primary);
+}
+
+.primary:hover {
+  opacity: 0.85;
+}
+
+.danger {
+  background: rgba(255, 77, 77, 0.1);
+  border: 1px solid rgba(255, 77, 77, 0.3);
+  color: #ff4d4d;
+}
+
+.danger:hover {
+  background: rgba(255, 77, 77, 0.2);
+}
+
+.ghost {
+  background: rgba(74, 109, 255, 0.15);
+  border: 1px solid rgba(74, 109, 255, 0.3);
+  color: var(--interactive);
+}
+
+.ghost:hover {
+  background: rgba(74, 109, 255, 0.25);
+}
+
+.outline {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+}
+
+.outline:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.25);
+}

src/shared/ui/Button/Button.tsx

@@ -0,0 +1,17 @@
+import styles from './Button.module.css'
+
+interface Props {
+  variant: 'primary' | 'danger' | 'ghost' | 'outline'
+  children: React.ReactNode
+  onClick?: () => void
+  type?: 'button' | 'submit'
+  disabled?: boolean
+}
+
+export function Button({ variant, children, onClick, type = 'button', disabled }: Props) {
+  return (
+    <button type={type} className={`${styles.btn} ${styles[variant]}`} onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  )
+}

src/shared/ui/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button'

src/shared/ui/FormField/FormField.module.css

@@ -0,0 +1,97 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+}
+
+.wrap {
+  position: relative;
+}
+
+.input {
+  width: 100%;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: var(--font-sans);
+  padding: 0 16px;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.input:focus {
+  border-color: var(--interactive);
+  box-shadow: 0 0 0 3px rgba(74, 109, 255, 0.15);
+}
+
+.readonly {
+  background: rgba(255, 255, 255, 0.03);
+  border-style: dashed;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.copied {
+  border-color: var(--success);
+  border-style: solid;
+  box-shadow: 0 0 0 3px rgba(38, 161, 123, 0.15);
+}
+
+.iconCopied {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--success);
+  font-size: 16px;
+}
+
+.iconCheck {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--success);
+  font-size: 16px;
+}
+
+.iconLock {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+}
+
+.withToggle {
+  padding-right: 48px;
+}
+
+.togglePw {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  transition: color 0.2s;
+  padding: 0;
+}
+
+.togglePw:hover {
+  color: var(--text-primary);
+}

src/shared/ui/FormField/FormField.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import styles from './FormField.module.css'
+
+interface Props {
+  label: string
+  value: string
+  placeholder?: string
+  type?: 'text' | 'email' | 'tel' | 'password'
+  onChange?: (value: string) => void
+  readOnly?: boolean
+  required?: boolean
+  icon?: 'check' | 'lock'
+}
+
+export function FormField({ label, value, placeholder, type = 'text', onChange, readOnly, required, icon }: Props) {
+  const [copied, setCopied] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
+
+  const isPassword = type === 'password'
+  const inputType = isPassword ? (isVisible ? 'text' : 'password') : type
+
+  const handleClick = () => {
+    if (!readOnly) return
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    })
+  }
+
+  return (
+    <div className={styles.field}>
+      <label className={styles.label}>{label}</label>
+      <div className={styles.wrap} onClick={handleClick}>
+        <input
+          className={`${styles.input} ${isPassword ? styles.withToggle : ''} ${readOnly ? styles.readonly : ''} ${copied ? styles.copied : ''}`}
+          type={inputType}
+          {...(onChange
+            ? { value, onChange: (e) => onChange(e.target.value) }
+            : { defaultValue: value }
+          )}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={required}
+        />
+        {isPassword && (
+          <button
+            type="button"
+            className={styles.togglePw}
+            onClick={(e) => { e.stopPropagation(); setIsVisible((v) => !v) }}
+            aria-label={isVisible ? 'Скрыть пароль' : 'Показать пароль'}
+          >
+            {isVisible ? (
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94" /><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19" /><line x1="1" y1="1" x2="23" y2="23" />
+              </svg>
+            ) : (
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z" /><circle cx="12" cy="12" r="3" />
+              </svg>
+            )}
+          </button>
+        )}
+        {icon === 'check' && <span className={styles.iconCheck}>✓</span>}
+        {icon === 'lock' && <span className={styles.iconLock}>🔒</span>}
+      </div>
+    </div>
+  )
+}

src/shared/ui/FormField/index.ts

@@ -0,0 +1 @@
+export { FormField } from './FormField'

src/shared/ui/Pill/Pill.module.css

@@ -0,0 +1,11 @@
+.pill {
+  display: inline-block;
+  background: rgba(74, 109, 255, 0.12);
+  border: 1px solid rgba(74, 109, 255, 0.3);
+  color: var(--interactive);
+  border-radius: 999px;
+  font-size: 14px;
+  font-variant: all-small-caps;
+  letter-spacing: 2px;
+  padding: 4px 14px;
+}

src/shared/ui/Pill/Pill.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+import styles from './Pill.module.css'
+
+interface Props {
+  children: ReactNode
+}
+
+export function Pill({ children }: Props) {
+  return <span className={styles.pill}>{children}</span>
+}

src/shared/ui/Pill/index.ts

@@ -0,0 +1 @@
+export { Pill } from './Pill'

src/shared/ui/PrimaryButton/PrimaryButton.module.css

@@ -0,0 +1,19 @@
+.btn {
+  width: 100%;
+  height: 56px;
+  background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
+  border: none;
+  border-radius: 14px;
+  color: var(--text-primary);
+  font-size: 17px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  letter-spacing: 0.3px;
+  transition: filter 0.25s, box-shadow 0.25s;
+}
+
+.btn:hover {
+  filter: brightness(1.15);
+  box-shadow: 0 0 24px rgba(91, 61, 184, 0.5);
+}

src/shared/ui/PrimaryButton/PrimaryButton.tsx

@@ -0,0 +1,16 @@
+import styles from './PrimaryButton.module.css'
+
+interface Props {
+  label?: string
+  onClick?: () => void
+  type?: 'button' | 'submit'
+  disabled?: boolean
+}
+
+export function PrimaryButton({ label = 'Подтвердить своп', onClick, type = 'submit', disabled }: Props) {
+  return (
+    <button type={type} className={styles.btn} onClick={onClick} disabled={disabled}>
+      {label}
+    </button>
+  )
+}

src/shared/ui/PrimaryButton/index.ts

@@ -0,0 +1 @@
+export { PrimaryButton } from './PrimaryButton'

src/shared/ui/Title/Title.module.css

@@ -0,0 +1,6 @@
+.title {
+    color: var(--text-primary);
+    font-weight: 700;
+    font-size: 48px;
+    margin-top: 16px;
+}

src/shared/ui/Title/Title.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import styles from './Title.module.css'
+
+interface Props {
+
+    children: ReactNode
+}
+
+export function Title({ children }: Props) {
+    return <h2 className={styles.title}>{children}</h2>
+}

src/shared/ui/TokenIcon/TokenIcon.module.css

@@ -0,0 +1,9 @@
+.icon {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  color: #fff;
+  flex-shrink: 0;
+}

src/shared/ui/TokenIcon/TokenIcon.tsx

@@ -0,0 +1,22 @@
+import styles from './TokenIcon.module.css'
+
+interface Props {
+  letter: string
+  color: string
+  logo?: string
+  size?: number
+}
+
+export function TokenIcon({ letter, color, logo, size = 40 }: Props) {
+  return (
+    <div
+      className={styles.icon}
+      style={{ background: logo ? 'transparent' : color, width: size, height: size, fontSize: size * 0.45 }}
+    >
+      {logo
+        ? <img src={logo} alt={letter} style={{ width: size * 0.7, height: size * 0.7 }} />
+        : letter
+      }
+    </div>
+  )
+}

src/shared/ui/TokenIcon/index.ts

@@ -0,0 +1 @@
+export { TokenIcon } from './TokenIcon'

src/shared/ui/index.ts

@@ -0,0 +1,5 @@
+export { Button } from './Button'
+export { FormField } from './FormField'
+export { Pill } from './Pill'
+export { PrimaryButton } from './PrimaryButton'
+export { TokenIcon } from './TokenIcon'