14.05.2026 rip

src/widgets/swap-form/ui/SwapForm.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { PrimaryButton } from '@shared/ui'
-import { useWalletBalance, useWalletAddresses, useTokensList, useRelayQuote, type Chain } from '@features/wallet'
+import { useWalletBalance, useWalletAddresses, useTokensList, useRelayQuote, useExecuteRelaySwap, type Chain } from '@features/wallet'
 import { useDebounce } from '@shared/lib/hooks/useDebounce'
 import { TOKENS_LIST, buildTokensFromBalance, useSwapForm } from '../model/useSwapForm'
 import { SwapCard } from './SwapCard'
@@ -61,11 +61,17 @@ export function SwapForm() {
     : null
 
   const { data: quoteData } = useRelayQuote(quotePayload)
+  const { mutate: executeSwap, isPending: isSwapping } = useExecuteRelaySwap()
 
   const displayToAmount = quoteData?.details.currencyOut.amountFormatted ?? '0'
   const displayToUsd = quoteData?.details.currencyOut.amountUsd
   const gasFee = quoteData?.fees.gas.amountUsd
 
+  function handleSwap() {
+    if (!quotePayload) return
+    executeSwap(quotePayload)
+  }
+
   return (
     <div className={styles.form}>
       <SwapCard
@@ -94,7 +100,7 @@ export function SwapForm() {
 
       <SwapInfoPanel gasFee={gasFee} />
 
-      <PrimaryButton />
+      <PrimaryButton onClick={handleSwap} disabled={!quotePayload || isSwapping} />
     </div>
   )
 }

src/widgets/swap-form/ui/SwapInfoPanel.module.css

@@ -4,6 +4,7 @@
   border-radius: 20px;
   padding: 4px 24px;
   margin-bottom: 24px;
+  margin-top: 24px;
 }
 
 .row {
@@ -39,4 +40,4 @@
 
 .link:hover {
   text-decoration: underline;
-}
+}