feat: похуйу

src/widgets/converter-page/ui/ConverterSection.module.css

@@ -1,6 +1,4 @@
 .wrap {
-  border-radius: 24px;
-  padding: 32px;
   position: relative;
   overflow: hidden;
 }
@@ -168,12 +166,6 @@
   color: var(--text-secondary);
 }
 
-.swapBtn:hover {
-  border-color: var(--highlight);
-  color: var(--highlight);
-  transform: rotate(180deg);
-}
-
 .bottom {
   display: flex;
   justify-content: center;

src/widgets/converter-page/ui/ConverterSection.tsx

@@ -1,11 +1,23 @@
 import { useConverter } from '@widgets/currency-converter'
-import { GAS_PRICE, USDT_RATE } from '@shared/config/constants'
+import { USDT_RATE, GAS_PRICE } from '@shared/config/constants'
+import { useDebounce } from '@shared/lib/hooks/useDebounce'
+import { usePaymentConfig, usePaymentQuote } from '@features/payment'
 import { CommissionPanel } from './CommissionPanel'
 import { AgreementCheck } from './AgreementCheck'
 import styles from './ConverterSection.module.css'
 
 export function ConverterSection() {
-  const c = useConverter({ usdtRate: USDT_RATE })
+  const { data: config } = usePaymentConfig()
+
+  const usdtRate = config ? Number(config.usdt_exchange_rate) || USDT_RATE : USDT_RATE
+  const gasPrice = config ? Number(config.gas_fee) || GAS_PRICE : GAS_PRICE
+
+  const c = useConverter({ usdtRate })
+
+  const debouncedRub = useDebounce(c.numRub, 400)
+  const { data: quote } = usePaymentQuote(debouncedRub)
+
+  const usdtVal = quote ? quote.usdt_amount : c.usdtVal
 
   return (
     <div className={styles.wrap}>
@@ -16,10 +28,10 @@ export function ConverterSection() {
         </div>
         <div className={styles.pills}>
           <div className={styles.pill}>
-            Цена газа в RUB <span className={styles.pillValue}>{GAS_PRICE.toFixed(2)} RUB</span>
+            Цена газа в RUB <span className={styles.pillValue}>{gasPrice.toFixed(2)} RUB</span>
           </div>
           <div className={styles.pill}>
-            USDT/RUB <span className={styles.pillValue}>{USDT_RATE.toFixed(2)} ₽</span>
+            USDT/RUB <span className={styles.pillValue}>{usdtRate.toFixed(2)} ₽</span>
           </div>
         </div>
       </div>
@@ -46,18 +58,12 @@ export function ConverterSection() {
           </div>
 
           <div className={styles.field}>
-            <div className={styles.fieldLabel}>Конвертируете</div>
+            <div className={styles.fieldLabel}>Получаете</div>
             <div className={styles.fieldInput}>
-              <input
-                type="text"
-                value={c.rubVal}
-                onChange={(e) => c.updateRub(e.target.value)}
-                placeholder="0"
-                inputMode="decimal"
-              />
+              <input type="text" value={usdtVal} readOnly />
               <div className={styles.currency}>
-                <span className={`${styles.currencyIcon} ${styles.currencyRub}`}>₽</span>
-                RUB
+                <span className={`${styles.currencyIcon} ${styles.currencyUsdt}`}>₮</span>
+                USDT
               </div>
             </div>
           </div>
@@ -66,8 +72,6 @@ export function ConverterSection() {
             <button
               type="button"
               className={styles.swapBtn}
-              onClick={c.toggleMode}
-              aria-label="Поменять направление"
             >
               <svg width={16} height={16} viewBox="0 0 16 16" fill="none">
                 <path
@@ -82,12 +86,18 @@ export function ConverterSection() {
           </div>
 
           <div className={styles.field}>
-            <div className={styles.fieldLabel}>Получаете</div>
+            <div className={styles.fieldLabel}>Платите</div>
             <div className={styles.fieldInput}>
-              <input type="text" value={c.usdtVal} readOnly />
+              <input
+                type="text"
+                value={c.rubVal}
+                onChange={(e) => c.updateRub(e.target.value)}
+                placeholder="0"
+                inputMode="decimal"
+              />
               <div className={styles.currency}>
-                <span className={`${styles.currencyIcon} ${styles.currencyUsdt}`}>₮</span>
-                USDT
+                <span className={`${styles.currencyIcon} ${styles.currencyRub}`}>₽</span>
+                RUB
               </div>
             </div>
           </div>