diff --git a/src/app/providers/RouterProvider.tsx b/src/app/providers/RouterProvider.tsx index f69725f..79bd560 100644 --- a/src/app/providers/RouterProvider.tsx +++ b/src/app/providers/RouterProvider.tsx @@ -26,9 +26,9 @@ export function RouterProvider() { } /> - } /> }> + } /> } /> } /> } /> diff --git a/src/widgets/send-modal/index.ts b/src/widgets/send-modal/index.ts new file mode 100644 index 0000000..84b74d5 --- /dev/null +++ b/src/widgets/send-modal/index.ts @@ -0,0 +1,2 @@ +export { SendModal } from './ui/SendModal' +export type { SendModalToken } from './ui/SendModal' diff --git a/src/widgets/send-modal/ui/SendModal.module.css b/src/widgets/send-modal/ui/SendModal.module.css new file mode 100644 index 0000000..2c34060 --- /dev/null +++ b/src/widgets/send-modal/ui/SendModal.module.css @@ -0,0 +1,370 @@ +.overlay { + position: fixed; + inset: 0; + background: rgba(10, 11, 46, 0.8); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; +} + +.dialog { + background: var(--bg-mid); + border: 1px solid var(--glass-border); + border-radius: 24px; + padding: 32px; + width: 100%; + max-width: 480px; + animation: dialogIn 0.18s ease; +} + +@keyframes dialogIn { + from { + opacity: 0; + transform: scale(0.96) translateY(10px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +/* ─── Header ────────────────────────────────── */ + +.header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 28px; +} + +.title { + font-size: 20px; + font-weight: 700; + color: var(--text-primary); +} + +.close { + width: 32px; + height: 32px; + border-radius: 8px; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + color: var(--text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.15s, color 0.15s; + flex-shrink: 0; +} + +.close:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); +} + +/* ─── Selects row ────────────────────────────── */ + +.selectsRow { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-bottom: 24px; +} + +.selectGroup { + position: relative; +} + +.selectLabel { + display: block; + font-size: 11px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; + margin-bottom: 8px; +} + +.selectTrigger { + width: 100%; + height: 48px; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: 12px; + padding: 0 12px 0 14px; + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + color: var(--text-primary); + font-size: 14px; + font-weight: 500; + font-family: inherit; + transition: border-color 0.15s, background 0.15s; +} + +.selectTrigger:hover, +.selectTriggerOpen { + border-color: rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.06); +} + +.selectValue { + flex: 1; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.chevron { + color: var(--text-secondary); + flex-shrink: 0; + transition: transform 0.15s; +} + +.chevronOpen { + transform: rotate(180deg); +} + +/* ─── Token dot ─────────────────────────────── */ + +.tokenDot { + width: 24px; + height: 24px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: 10px; + font-weight: 700; + color: #fff; +} + +.tokenDot img { + width: 18px; + height: 18px; + object-fit: contain; +} + +/* ─── Speed dot ─────────────────────────────── */ + +.speedDot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +.speedDot_slow { + background: #f3ba2f; + box-shadow: 0 0 6px rgba(243, 186, 47, 0.6); +} + +.speedDot_normal { + background: var(--interactive); + box-shadow: 0 0 6px rgba(74, 109, 255, 0.6); +} + +.speedDot_fast { + background: var(--success); + box-shadow: 0 0 6px rgba(38, 161, 123, 0.6); +} + +/* ─── Dropdown ──────────────────────────────── */ + +.dropdown { + position: absolute; + top: calc(100% + 6px); + left: 0; + right: 0; + background: #1e1a4a; + border: 1px solid var(--glass-border); + border-radius: 12px; + overflow: hidden; + z-index: 10; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); +} + +.dropdownItem { + width: 100%; + padding: 10px 14px; + display: flex; + align-items: center; + gap: 10px; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 14px; + font-family: inherit; + cursor: pointer; + transition: background 0.15s; + text-align: left; +} + +.dropdownItem:hover { + background: var(--glass-bg); +} + +.dropdownItemActive { + background: rgba(74, 109, 255, 0.15); + color: #7a9dff; +} + +.dropdownTicker { + font-weight: 600; + font-size: 14px; +} + +.dropdownName { + color: var(--text-secondary); + font-size: 12px; + flex: 1; +} + +/* ─── Fields ────────────────────────────────── */ + +.field { + margin-bottom: 20px; +} + +.fieldLabel { + display: block; + font-size: 11px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; + margin-bottom: 8px; +} + +.input { + width: 100%; + height: 52px; + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: 12px; + padding: 0 16px; + color: var(--text-primary); + font-size: 15px; + font-family: var(--font-mono); + outline: none; + transition: border-color 0.15s, background 0.15s; + box-sizing: border-box; +} + +.input::placeholder { + color: rgba(255, 255, 255, 0.2); + font-family: var(--font-sans); +} + +.input:focus { + border-color: var(--interactive); + background: rgba(74, 109, 255, 0.05); +} + +.input[type='number']::-webkit-outer-spin-button, +.input[type='number']::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +.input[type='number'] { + -moz-appearance: textfield; +} + +/* ─── Amount field ──────────────────────────── */ + +.amountWrap { + position: relative; +} + +.amountInput { + padding-right: 64px; +} + +.amountTicker { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + font-family: var(--font-mono); + font-size: 13px; + font-weight: 600; + color: var(--text-secondary); + pointer-events: none; + user-select: none; +} + +.maxHint { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; + margin-top: 6px; + font-size: 12px; + color: var(--text-secondary); +} + +.maxBtn { + background: none; + border: none; + padding: 0; + color: var(--interactive); + font-family: var(--font-mono); + font-size: 12px; + font-weight: 600; + cursor: pointer; + transition: color 0.15s; +} + +.maxBtn:hover { + color: var(--highlight); + text-decoration: underline; +} + +/* ─── Submit button ─────────────────────────── */ + +.submitBtn { + width: 100%; + height: 52px; + background: linear-gradient(135deg, #4a6dff 0%, #6b4fff 100%); + border: none; + border-radius: 12px; + color: #fff; + font-size: 16px; + font-weight: 700; + font-family: inherit; + cursor: pointer; + transition: opacity 0.15s, transform 0.1s; + margin-top: 4px; +} + +.submitBtn:hover { + opacity: 0.88; + transform: translateY(-1px); +} + +.submitBtn:active { + transform: translateY(0); + opacity: 1; +} + +/* ─── Mobile ────────────────────────────────── */ + +@media (max-width: 520px) { + .dialog { + padding: 24px 20px; + border-radius: 20px; + } + + .selectsRow { + grid-template-columns: 1fr; + gap: 10px; + } +} diff --git a/src/widgets/send-modal/ui/SendModal.tsx b/src/widgets/send-modal/ui/SendModal.tsx new file mode 100644 index 0000000..3b6aa86 --- /dev/null +++ b/src/widgets/send-modal/ui/SendModal.tsx @@ -0,0 +1,205 @@ +import { useState, useEffect } from 'react' +import styles from './SendModal.module.css' + +export interface SendModalToken { + ticker: string + name: string + logo?: string + color: string + bal: string +} + +interface Props { + open: boolean + onClose: () => void + tokens: SendModalToken[] + initialTicker?: string +} + +type Speed = 'slow' | 'normal' | 'fast' + +const SPEEDS: { value: Speed; label: string }[] = [ + { value: 'slow', label: 'Медленно' }, + { value: 'normal', label: 'Нормально' }, + { value: 'fast', label: 'Быстро' }, +] + +export function SendModal({ open, onClose, tokens, initialTicker }: Props) { + const [ticker, setTicker] = useState(initialTicker ?? tokens[0]?.ticker ?? '') + const [speed, setSpeed] = useState('normal') + const [address, setAddress] = useState('') + const [amount, setAmount] = useState('') + const [openDropdown, setOpenDropdown] = useState<'token' | 'speed' | null>(null) + + const token = tokens.find((t) => t.ticker === ticker) ?? tokens[0] + const speedLabel = SPEEDS.find((s) => s.value === speed)?.label ?? 'Нормально' + + useEffect(() => { + if (initialTicker) setTicker(initialTicker) + }, [initialTicker]) + + useEffect(() => { + if (!open) { + setAddress('') + setAmount('') + setOpenDropdown(null) + return + } + const handler = (e: KeyboardEvent) => { + if (e.key === 'Escape') onClose() + } + document.addEventListener('keydown', handler) + return () => document.removeEventListener('keydown', handler) + }, [open, onClose]) + + if (!open) return null + + function handleOverlayClick() { + if (openDropdown) { + setOpenDropdown(null) + } else { + onClose() + } + } + + return ( +
+
e.stopPropagation()}> +
+ Отправить + +
+ +
+
+ + + {openDropdown === 'token' && ( +
+ {tokens.map((t) => ( + + ))} +
+ )} +
+ +
+ + + {openDropdown === 'speed' && ( +
+ {SPEEDS.map((s) => ( + + ))} +
+ )} +
+
+ +
+ + setAddress(e.target.value)} + autoComplete="off" + spellCheck={false} + /> +
+ +
+ +
+ setAmount(e.target.value)} + min="0" + step="any" + /> + {token && {token.ticker}} +
+ {token && ( +
+ Макс:{' '} + +
+ )} +
+ + +
+
+ ) +} diff --git a/src/widgets/token-table/ui/TokenTable.tsx b/src/widgets/token-table/ui/TokenTable.tsx index 72beb88..d2edf52 100644 --- a/src/widgets/token-table/ui/TokenTable.tsx +++ b/src/widgets/token-table/ui/TokenTable.tsx @@ -1,10 +1,20 @@ import { useState } from 'react' import { useTokenRows } from '../model/useTokenRows' +import { SendModal } from '@widgets/send-modal' import styles from './TokenTable.module.css' export function TokenTable() { const { rows, isLoading } = useTokenRows() const [favs, setFavs] = useState(() => rows.map((t) => t.fav)) + const [sendModal, setSendModal] = useState<{ open: boolean; ticker: string }>({ open: false, ticker: '' }) + + function openSend(ticker: string) { + setSendModal({ open: true, ticker }) + } + + function closeSend() { + setSendModal((s) => ({ ...s, open: false })) + } function toggleFav(i: number) { setFavs((prev) => prev.map((v, idx) => (idx === i ? !v : v))) @@ -69,7 +79,11 @@ export function TokenTable() { - @@ -120,11 +134,18 @@ export function TokenTable() {
-
+ + ) } diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index a1ad639..6651967 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/guestroute.tsx","./src/app/providers/protectedroute.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/scrolltotop.tsx","./src/app/providers/index.ts","./src/features/auth/index.ts","./src/features/auth/api/profileapi.ts","./src/features/auth/api/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/auth/hooks/useme.ts","./src/features/kyc/api/kycapi.ts","./src/features/payment/index.ts","./src/features/payment/api/paymentapi.ts","./src/features/payment/hooks/usecreateorder.ts","./src/features/payment/hooks/usepaymentconfig.ts","./src/features/payment/hooks/usepaymentquote.ts","./src/features/wallet/index.ts","./src/features/wallet/api/walletapi.ts","./src/features/wallet/model/usewalletdata.ts","./src/pages/converter/index.ts","./src/pages/converter/ui/converterpage.tsx","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/kyc/index.ts","./src/pages/kyc/ui/kycpage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/csrf.ts","./src/shared/api/tokenstore.ts","./src/shared/api/types.ts","./src/shared/config/constants.ts","./src/shared/config/env.ts","./src/shared/config/routes.ts","./src/shared/lib/hooks/usedebounce.ts","./src/shared/lib/hooks/uselocalstorage.ts","./src/shared/lib/utils/cn.ts","./src/shared/types/index.ts","./src/shared/ui/index.ts","./src/shared/ui/button/button.tsx","./src/shared/ui/button/index.ts","./src/shared/ui/formfield/formfield.tsx","./src/shared/ui/formfield/index.ts","./src/shared/ui/notification/notification.tsx","./src/shared/ui/notification/index.ts","./src/shared/ui/pill/pill.tsx","./src/shared/ui/pill/index.ts","./src/shared/ui/primarybutton/primarybutton.tsx","./src/shared/ui/primarybutton/index.ts","./src/shared/ui/title/title.tsx","./src/shared/ui/tokenicon/tokenicon.tsx","./src/shared/ui/tokenicon/index.ts","./src/widgets/about/index.ts","./src/widgets/about/ui/about.tsx","./src/widgets/balance-card/index.ts","./src/widgets/balance-card/ui/balancecard.tsx","./src/widgets/converter-page/index.ts","./src/widgets/converter-page/ui/agreementcheck.tsx","./src/widgets/converter-page/ui/commissionpanel.tsx","./src/widgets/converter-page/ui/convertersection.tsx","./src/widgets/currency-converter/index.ts","./src/widgets/currency-converter/model/tiers.ts","./src/widgets/currency-converter/model/useconverter.ts","./src/widgets/currency-converter/ui/agreementcheckbox.tsx","./src/widgets/currency-converter/ui/commissiontable.tsx","./src/widgets/currency-converter/ui/converter.tsx","./src/widgets/currency-converter/ui/tiers.tsx","./src/widgets/footer/index.ts","./src/widgets/footer/ui/footer.tsx","./src/widgets/header/index.ts","./src/widgets/header/ui/header.tsx","./src/widgets/hero/index.ts","./src/widgets/hero/lib/usecountdown.ts","./src/widgets/hero/ui/conversionflow.tsx","./src/widgets/hero/ui/countdown.tsx","./src/widgets/hero/ui/exchangecard.tsx","./src/widgets/hero/ui/hero.tsx","./src/widgets/kyc-verification/index.ts","./src/widgets/kyc-verification/model/usekyc.ts","./src/widgets/kyc-verification/ui/kycmodal.tsx","./src/widgets/kyc-verification/ui/kycwidget.tsx","./src/widgets/login-form/index.ts","./src/widgets/login-form/model/useloginform.ts","./src/widgets/login-form/ui/loginform.tsx","./src/widgets/networks-table/index.ts","./src/widgets/networks-table/model/networks.ts","./src/widgets/networks-table/ui/networkstable.tsx","./src/widgets/profile/index.ts","./src/widgets/profile/ui/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.tsx","./src/widgets/swap-form/index.ts","./src/widgets/swap-form/model/useswapform.ts","./src/widgets/swap-form/ui/raterow.tsx","./src/widgets/swap-form/ui/swapcard.tsx","./src/widgets/swap-form/ui/swapdirectionbutton.tsx","./src/widgets/swap-form/ui/swapform.tsx","./src/widgets/swap-form/ui/swapinfopanel.tsx","./src/widgets/swap-form/ui/tokenselect.tsx","./src/widgets/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/model/usetokenrows.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"} \ No newline at end of file +{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/guestroute.tsx","./src/app/providers/protectedroute.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/scrolltotop.tsx","./src/app/providers/index.ts","./src/features/auth/index.ts","./src/features/auth/api/profileapi.ts","./src/features/auth/api/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/auth/hooks/useme.ts","./src/features/kyc/api/kycapi.ts","./src/features/payment/index.ts","./src/features/payment/api/paymentapi.ts","./src/features/payment/hooks/usecreateorder.ts","./src/features/payment/hooks/usepaymentconfig.ts","./src/features/payment/hooks/usepaymentquote.ts","./src/features/wallet/index.ts","./src/features/wallet/api/walletapi.ts","./src/features/wallet/model/usewalletdata.ts","./src/pages/converter/index.ts","./src/pages/converter/ui/converterpage.tsx","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/kyc/index.ts","./src/pages/kyc/ui/kycpage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/csrf.ts","./src/shared/api/tokenstore.ts","./src/shared/api/types.ts","./src/shared/config/constants.ts","./src/shared/config/env.ts","./src/shared/config/routes.ts","./src/shared/lib/hooks/usedebounce.ts","./src/shared/lib/hooks/uselocalstorage.ts","./src/shared/lib/utils/cn.ts","./src/shared/types/index.ts","./src/shared/ui/index.ts","./src/shared/ui/button/button.tsx","./src/shared/ui/button/index.ts","./src/shared/ui/formfield/formfield.tsx","./src/shared/ui/formfield/index.ts","./src/shared/ui/notification/notification.tsx","./src/shared/ui/notification/index.ts","./src/shared/ui/pill/pill.tsx","./src/shared/ui/pill/index.ts","./src/shared/ui/primarybutton/primarybutton.tsx","./src/shared/ui/primarybutton/index.ts","./src/shared/ui/title/title.tsx","./src/shared/ui/tokenicon/tokenicon.tsx","./src/shared/ui/tokenicon/index.ts","./src/widgets/about/index.ts","./src/widgets/about/ui/about.tsx","./src/widgets/balance-card/index.ts","./src/widgets/balance-card/ui/balancecard.tsx","./src/widgets/converter-page/index.ts","./src/widgets/converter-page/ui/agreementcheck.tsx","./src/widgets/converter-page/ui/commissionpanel.tsx","./src/widgets/converter-page/ui/convertersection.tsx","./src/widgets/currency-converter/index.ts","./src/widgets/currency-converter/model/tiers.ts","./src/widgets/currency-converter/model/useconverter.ts","./src/widgets/currency-converter/ui/agreementcheckbox.tsx","./src/widgets/currency-converter/ui/commissiontable.tsx","./src/widgets/currency-converter/ui/converter.tsx","./src/widgets/currency-converter/ui/tiers.tsx","./src/widgets/footer/index.ts","./src/widgets/footer/ui/footer.tsx","./src/widgets/header/index.ts","./src/widgets/header/ui/header.tsx","./src/widgets/hero/index.ts","./src/widgets/hero/lib/usecountdown.ts","./src/widgets/hero/ui/conversionflow.tsx","./src/widgets/hero/ui/countdown.tsx","./src/widgets/hero/ui/exchangecard.tsx","./src/widgets/hero/ui/hero.tsx","./src/widgets/kyc-verification/index.ts","./src/widgets/kyc-verification/model/usekyc.ts","./src/widgets/kyc-verification/ui/kycmodal.tsx","./src/widgets/kyc-verification/ui/kycwidget.tsx","./src/widgets/login-form/index.ts","./src/widgets/login-form/model/useloginform.ts","./src/widgets/login-form/ui/loginform.tsx","./src/widgets/networks-table/index.ts","./src/widgets/networks-table/model/networks.ts","./src/widgets/networks-table/ui/networkstable.tsx","./src/widgets/profile/index.ts","./src/widgets/profile/ui/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.tsx","./src/widgets/send-modal/index.ts","./src/widgets/send-modal/ui/sendmodal.tsx","./src/widgets/swap-form/index.ts","./src/widgets/swap-form/model/useswapform.ts","./src/widgets/swap-form/ui/raterow.tsx","./src/widgets/swap-form/ui/swapcard.tsx","./src/widgets/swap-form/ui/swapdirectionbutton.tsx","./src/widgets/swap-form/ui/swapform.tsx","./src/widgets/swap-form/ui/swapinfopanel.tsx","./src/widgets/swap-form/ui/tokenselect.tsx","./src/widgets/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/model/usetokenrows.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"} \ No newline at end of file