@shapeshiftoss/swap-widget 0.0.2

package/src/hooks/useStatusPolling.ts

@@ -0,0 +1,137 @@
+import { useEffect, useRef } from 'react'
+
+import { useSwapWallet } from '../contexts/SwapWalletContext'
+import { SwapMachineCtx } from '../machines/SwapMachineContext'
+import type { CheckStatusParams } from '../services/transactionStatus'
+import { checkTransactionStatus } from '../services/transactionStatus'
+import { getEvmNetworkId } from '../types'
+
+const POLL_INTERVAL_MS = 5000
+
+type UseStatusPollingParams = {
+  onSwapSuccess?: (txHash: string) => void
+  onSwapError?: (error: Error) => void
+  refetchSellBalance?: () => void
+  refetchBuyBalance?: () => void
+}
+
+export const useStatusPolling = ({
+  onSwapSuccess,
+  onSwapError,
+  refetchSellBalance,
+  refetchBuyBalance,
+}: UseStatusPollingParams) => {
+  const stateValue = SwapMachineCtx.useSelector(s => s.value)
+  const context = SwapMachineCtx.useSelector(s => s.context)
+  const actorRef = SwapMachineCtx.useActorRef()
+
+  const { solana } = useSwapWallet()
+  const solanaConnection = solana.connection
+
+  const pollingRef = useRef(false)
+  useEffect(() => {
+    const snap = actorRef.getSnapshot()
+    if (!snap.matches('polling_status')) {
+      pollingRef.current = false
+      return
+    }
+    if (pollingRef.current) return
+    pollingRef.current = true
+
+    let stopped = false
+
+    const poll = async () => {
+      if (stopped || !context.txHash) return
+
+      try {
+        let statusParams: CheckStatusParams
+
+        if (context.isSellAssetEvm) {
+          statusParams = {
+            txHash: context.txHash,
+            chainType: 'evm',
+            chainId: getEvmNetworkId(context.sellAsset.chainId),
+          }
+        } else if (context.isSellAssetUtxo) {
+          statusParams = {
+            txHash: context.txHash,
+            chainType: 'utxo',
+          }
+        } else if (context.isSellAssetSolana) {
+          statusParams = {
+            txHash: context.txHash,
+            chainType: 'solana',
+            connection: solanaConnection as CheckStatusParams['connection'],
+          }
+        } else {
+          console.warn(
+            `[swap-widget] Status polling not implemented for chainType "${context.chainType}". Auto-confirming.`,
+          )
+          actorRef.send({ type: 'STATUS_CONFIRMED' })
+          return
+        }
+
+        const result = await checkTransactionStatus(statusParams)
+
+        if (stopped) return
+
+        if (result.status === 'confirmed') {
+          actorRef.send({ type: 'STATUS_CONFIRMED' })
+          return
+        }
+
+        if (result.status === 'failed') {
+          actorRef.send({ type: 'STATUS_FAILED', error: result.error ?? 'Transaction failed' })
+          return
+        }
+
+        setTimeout(poll, POLL_INTERVAL_MS)
+      } catch (err) {
+        if (stopped) return
+        const errorMessage = err instanceof Error ? err.message : 'Unknown polling error'
+        actorRef.send({ type: 'STATUS_FAILED', error: errorMessage })
+      }
+    }
+
+    poll()
+
+    return () => {
+      stopped = true
+      pollingRef.current = false
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- stateValue is the sole trigger; other deps are stable refs or read from snapshot
+  }, [stateValue])
+
+  const completionRef = useRef(false)
+  useEffect(() => {
+    const snap = actorRef.getSnapshot()
+    if (!snap.matches('complete')) {
+      completionRef.current = false
+      return
+    }
+    if (completionRef.current) return
+    completionRef.current = true
+
+    if (context.txHash) {
+      onSwapSuccess?.(context.txHash)
+    }
+
+    refetchSellBalance?.()
+    refetchBuyBalance?.()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- stateValue is the sole trigger; callbacks are stable
+  }, [stateValue])
+
+  const errorRef = useRef(false)
+  useEffect(() => {
+    const snap = actorRef.getSnapshot()
+    if (!snap.matches('error')) {
+      errorRef.current = false
+      return
+    }
+    if (errorRef.current) return
+    errorRef.current = true
+
+    onSwapError?.(new Error(context.error ?? 'Unknown error'))
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- stateValue is the sole trigger; callbacks are stable
+  }, [stateValue])
+}

package/src/hooks/useSwapApproval.ts

@@ -0,0 +1,106 @@
+import { useEffect, useRef } from 'react'
+import type { WalletClient } from 'viem'
+import { createPublicClient, encodeFunctionData, erc20Abi, http } from 'viem'
+
+import { getBaseAsset } from '../constants/chains'
+import { switchOrAddChain, VIEM_CHAINS_BY_ID } from '../constants/viemChains'
+import { useSwapWallet } from '../contexts/SwapWalletContext'
+import { SwapMachineCtx } from '../machines/SwapMachineContext'
+import { getEvmNetworkId } from '../types'
+
+export const useSwapApproval = () => {
+  const stateValue = SwapMachineCtx.useSelector(s => s.value)
+  const context = SwapMachineCtx.useSelector(s => s.context)
+  const actorRef = SwapMachineCtx.useActorRef()
+
+  const { walletClient, walletAddress } = useSwapWallet()
+
+  const approvingRef = useRef(false)
+
+  useEffect(() => {
+    const snap = actorRef.getSnapshot()
+    if (!snap.matches('approving') || approvingRef.current) return
+    approvingRef.current = true
+
+    const executeApproval = async () => {
+      try {
+        if (!walletClient || !walletAddress) {
+          actorRef.send({ type: 'APPROVAL_ERROR', error: 'No wallet connected' })
+          return
+        }
+
+        const quote = context.quote
+        if (!quote?.approval?.spender) {
+          actorRef.send({ type: 'APPROVAL_ERROR', error: 'No approval data in quote' })
+          return
+        }
+
+        const sellAssetAddress = context.sellAsset.assetId.split('/')[1]?.split(':')[1]
+        if (!sellAssetAddress || !/^0x[a-fA-F0-9]{40}$/.test(sellAssetAddress)) {
+          actorRef.send({
+            type: 'APPROVAL_ERROR',
+            error: 'Approval not applicable for native assets',
+          })
+          return
+        }
+
+        const requiredChainId = getEvmNetworkId(context.sellAsset.chainId)
+        const client = walletClient as WalletClient
+
+        const currentChainId = await client.getChainId()
+        if (currentChainId !== requiredChainId) {
+          await switchOrAddChain(client, requiredChainId)
+        }
+
+        const baseAsset = getBaseAsset(context.sellAsset.chainId)
+        const nativeCurrency = baseAsset
+          ? { name: baseAsset.name, symbol: baseAsset.symbol, decimals: baseAsset.precision }
+          : { name: 'ETH', symbol: 'ETH', decimals: 18 }
+
+        const viemChain = VIEM_CHAINS_BY_ID[requiredChainId]
+        const chain = viemChain ?? {
+          id: requiredChainId,
+          name: baseAsset?.networkName ?? baseAsset?.name ?? 'Chain',
+          nativeCurrency,
+          rpcUrls: { default: { http: [] } },
+        }
+
+        if (!context.sellAmountBaseUnit || context.sellAmountBaseUnit === '0') {
+          actorRef.send({ type: 'APPROVAL_ERROR', error: 'No sell amount specified' })
+          return
+        }
+
+        const approvalData = encodeFunctionData({
+          abi: erc20Abi,
+          functionName: 'approve',
+          args: [quote.approval.spender as `0x${string}`, BigInt(context.sellAmountBaseUnit)],
+        })
+
+        const approvalHash = await client.sendTransaction({
+          to: sellAssetAddress as `0x${string}`,
+          data: approvalData,
+          value: BigInt(0),
+          chain,
+          account: walletAddress as `0x${string}`,
+        })
+
+        const rpcUrl = chain.rpcUrls?.default?.http?.[0]
+        const publicClient = createPublicClient({
+          chain,
+          transport: rpcUrl ? http(rpcUrl) : http(),
+        })
+        await publicClient.waitForTransactionReceipt({ hash: approvalHash })
+
+        actorRef.send({ type: 'APPROVAL_SUCCESS', txHash: approvalHash })
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Approval failed'
+        actorRef.send({ type: 'APPROVAL_ERROR', error: errorMessage })
+      } finally {
+        approvingRef.current = false
+      }
+    }
+
+    executeApproval()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- stateValue is the sole trigger; other deps are stable refs read from snapshot
+  }, [stateValue])
+}

package/src/hooks/useSwapDisplayValues.ts

@@ -0,0 +1,157 @@
+import { useMemo } from 'react'
+
+import type { ApiClient } from '../api/client'
+import { getBaseAsset } from '../constants/chains'
+import { useSwapWallet } from '../contexts/SwapWalletContext'
+import { SwapMachineCtx } from '../machines/SwapMachineContext'
+import { formatAmount, getChainType } from '../types'
+import { useChainInfo } from './useAssets'
+import { useMultiChainBalance } from './useBalances'
+import { formatUsdValue, useMarketData } from './useMarketData'
+import { useSwapRates } from './useSwapRates'
+
+type UseSwapDisplayValuesParams = {
+  apiClient: ApiClient
+}
+
+export const useSwapDisplayValues = ({ apiClient }: UseSwapDisplayValuesParams) => {
+  const sellAsset = SwapMachineCtx.useSelector(s => s.context.sellAsset)
+  const buyAsset = SwapMachineCtx.useSelector(s => s.context.buyAsset)
+  const sellAmountBaseUnit = SwapMachineCtx.useSelector(s => s.context.sellAmountBaseUnit)
+  const isSellAssetEvm = SwapMachineCtx.useSelector(s => s.context.isSellAssetEvm)
+  const isSellAssetUtxo = SwapMachineCtx.useSelector(s => s.context.isSellAssetUtxo)
+  const isSellAssetSolana = SwapMachineCtx.useSelector(s => s.context.isSellAssetSolana)
+  const selectedRate = SwapMachineCtx.useSelector(s => s.context.selectedRate)
+
+  const { walletAddress, effectiveReceiveAddress, bitcoin, solana } = useSwapWallet()
+  const bitcoinAddress = bitcoin.address
+  const solanaAddress = solana.address
+
+  const buyChainType = getChainType(buyAsset.chainId)
+
+  const {
+    data: rates,
+    isLoading: isLoadingRates,
+    error: ratesError,
+  } = useSwapRates(apiClient, {
+    sellAssetId: sellAsset.assetId,
+    buyAssetId: buyAsset.assetId,
+    sellAmountCryptoBaseUnit: sellAmountBaseUnit,
+    enabled:
+      !!sellAmountBaseUnit &&
+      sellAmountBaseUnit !== '0' &&
+      (isSellAssetEvm || isSellAssetUtxo || isSellAssetSolana),
+  })
+
+  const {
+    data: sellAssetBalance,
+    isLoading: isSellBalanceLoading,
+    refetch: refetchSellBalance,
+  } = useMultiChainBalance(
+    walletAddress,
+    bitcoinAddress,
+    solanaAddress,
+    sellAsset.assetId,
+    sellAsset.precision,
+  )
+
+  const buyAssetAddressForBalance = useMemo(() => {
+    if (buyChainType === 'evm') return effectiveReceiveAddress || walletAddress
+    if (buyChainType === 'utxo') return effectiveReceiveAddress || bitcoinAddress
+    if (buyChainType === 'solana') return effectiveReceiveAddress || solanaAddress
+    return effectiveReceiveAddress
+  }, [buyChainType, effectiveReceiveAddress, walletAddress, bitcoinAddress, solanaAddress])
+
+  const {
+    data: buyAssetBalance,
+    isLoading: isBuyBalanceLoading,
+    refetch: refetchBuyBalance,
+  } = useMultiChainBalance(
+    buyChainType === 'evm' ? buyAssetAddressForBalance : walletAddress,
+    buyChainType === 'utxo' ? buyAssetAddressForBalance : bitcoinAddress,
+    buyChainType === 'solana' ? buyAssetAddressForBalance : solanaAddress,
+    buyAsset.assetId,
+    buyAsset.precision,
+  )
+
+  const { data: sellChainInfo } = useChainInfo(sellAsset.chainId)
+  const { data: buyChainInfo } = useChainInfo(buyAsset.chainId)
+
+  const displayRate = useMemo(() => selectedRate ?? rates?.[0], [selectedRate, rates])
+  const buyAmount = displayRate?.buyAmountCryptoBaseUnit
+
+  const sellChainNativeAsset = useMemo(() => getBaseAsset(sellAsset.chainId), [sellAsset.chainId])
+
+  const assetIdsForPrices = useMemo(() => {
+    const ids = [sellAsset.assetId, buyAsset.assetId]
+    if (sellChainNativeAsset && sellChainNativeAsset.assetId !== sellAsset.assetId) {
+      ids.push(sellChainNativeAsset.assetId)
+    }
+    return ids
+  }, [sellAsset.assetId, buyAsset.assetId, sellChainNativeAsset])
+
+  const { data: marketData } = useMarketData(assetIdsForPrices)
+  const sellAssetUsdPrice = marketData?.[sellAsset.assetId]?.price
+  const buyAssetUsdPrice = marketData?.[buyAsset.assetId]?.price
+  const nativeAssetUsdPrice = sellChainNativeAsset
+    ? marketData?.[sellChainNativeAsset.assetId]?.price
+    : undefined
+
+  const networkFeeDisplay = useMemo(() => {
+    const feeBaseUnit = displayRate?.networkFeeCryptoBaseUnit
+    if (!feeBaseUnit || feeBaseUnit === '0' || !sellChainNativeAsset) return undefined
+    const formatted = formatAmount(feeBaseUnit, sellChainNativeAsset.precision, 6)
+    const cryptoPart = `${formatted} ${sellChainNativeAsset.symbol}`
+    if (!nativeAssetUsdPrice) return cryptoPart
+    const fiatValue = formatUsdValue(
+      feeBaseUnit,
+      sellChainNativeAsset.precision,
+      nativeAssetUsdPrice,
+    )
+    return `${cryptoPart} (${fiatValue})`
+  }, [displayRate?.networkFeeCryptoBaseUnit, sellChainNativeAsset, nativeAssetUsdPrice])
+
+  const sellUsdValue = useMemo(() => {
+    if (!sellAmountBaseUnit || !sellAssetUsdPrice) return '$0.00'
+    return formatUsdValue(sellAmountBaseUnit, sellAsset.precision, sellAssetUsdPrice)
+  }, [sellAmountBaseUnit, sellAsset.precision, sellAssetUsdPrice])
+
+  const buyUsdValue = useMemo(() => {
+    if (!buyAmount || !buyAssetUsdPrice) return '$0.00'
+    return formatUsdValue(buyAmount, buyAsset.precision, buyAssetUsdPrice)
+  }, [buyAmount, buyAsset.precision, buyAssetUsdPrice])
+
+  const sellBalanceFiatValue = useMemo(() => {
+    if (!sellAssetBalance?.balance || !sellAssetUsdPrice) return undefined
+    return formatUsdValue(sellAssetBalance.balance, sellAsset.precision, sellAssetUsdPrice)
+  }, [sellAssetBalance?.balance, sellAsset.precision, sellAssetUsdPrice])
+
+  const buyBalanceFiatValue = useMemo(() => {
+    if (!buyAssetBalance?.balance || !buyAssetUsdPrice) return undefined
+    return formatUsdValue(buyAssetBalance.balance, buyAsset.precision, buyAssetUsdPrice)
+  }, [buyAssetBalance?.balance, buyAsset.precision, buyAssetUsdPrice])
+
+  return {
+    rates,
+    isLoadingRates,
+    ratesError,
+    sellAssetBalance,
+    isSellBalanceLoading,
+    refetchSellBalance,
+    buyAssetBalance,
+    isBuyBalanceLoading,
+    refetchBuyBalance,
+    sellChainInfo,
+    buyChainInfo,
+    displayRate,
+    buyAmount,
+    sellChainNativeAsset,
+    networkFeeDisplay,
+    sellUsdValue,
+    buyUsdValue,
+    sellAssetUsdPrice,
+    buyAssetUsdPrice,
+    sellBalanceFiatValue,
+    buyBalanceFiatValue,
+  }
+}

package/src/hooks/useSwapExecution.ts

@@ -0,0 +1,199 @@
+import { useEffect, useRef } from 'react'
+import type { WalletClient } from 'viem'
+
+import { switchOrAddChain, VIEM_CHAINS_BY_ID } from '../constants/viemChains'
+import { useSwapWallet } from '../contexts/SwapWalletContext'
+import { SwapMachineCtx } from '../machines/SwapMachineContext'
+import { getEvmNetworkId } from '../types'
+
+export const useSwapExecution = () => {
+  const stateValue = SwapMachineCtx.useSelector(s => s.value)
+  const context = SwapMachineCtx.useSelector(s => s.context)
+  const actorRef = SwapMachineCtx.useActorRef()
+
+  const { walletClient, walletAddress, bitcoin, solana } = useSwapWallet()
+
+  const executingRef = useRef(false)
+
+  useEffect(() => {
+    const snap = actorRef.getSnapshot()
+    if (!snap.matches('executing') || executingRef.current) return
+    executingRef.current = true
+
+    const executeSwap = async () => {
+      try {
+        const quote = context.quote
+        if (!quote) {
+          actorRef.send({ type: 'EXECUTE_ERROR', error: 'No quote available' })
+          return
+        }
+
+        if (context.isSellAssetEvm) {
+          if (!walletClient || !walletAddress) {
+            actorRef.send({ type: 'EXECUTE_ERROR', error: 'No wallet connected' })
+            return
+          }
+
+          const requiredChainId = getEvmNetworkId(context.sellAsset.chainId)
+          const client = walletClient as WalletClient
+
+          const currentChainId = await client.getChainId()
+          if (currentChainId !== requiredChainId) {
+            await switchOrAddChain(client, requiredChainId)
+          }
+
+          const viemChain = VIEM_CHAINS_BY_ID[requiredChainId]
+          if (!viemChain) {
+            throw new Error(
+              `Unsupported EVM chain ID ${requiredChainId}. No RPC configuration available.`,
+            )
+          }
+          const chain = viemChain
+
+          const outerStep = quote.steps?.[0]
+          const innerStep = quote.quote?.steps?.[0]
+
+          const transactionData =
+            quote.transactionData ??
+            outerStep?.transactionData ??
+            outerStep?.relayTransactionMetadata ??
+            outerStep?.butterSwapTransactionMetadata ??
+            innerStep?.transactionData ??
+            innerStep?.relayTransactionMetadata ??
+            innerStep?.butterSwapTransactionMetadata
+
+          if (!transactionData) {
+            throw new Error(
+              `No transaction data returned. Response keys: ${Object.keys(quote).join(', ')}`,
+            )
+          }
+
+          const txData = transactionData as {
+            type?: string
+            to: string
+            data: string
+            value?: string
+            gasLimit?: string
+          }
+
+          if (txData.type && txData.type !== 'evm') {
+            throw new Error(
+              `Expected EVM transaction data but got type '${txData.type}'. Check swapper configuration.`,
+            )
+          }
+
+          if (!txData.to || !txData.data) {
+            throw new Error(`Invalid EVM transaction data: missing 'to' or 'data' fields.`)
+          }
+
+          const txHash = await client.sendTransaction({
+            to: txData.to as `0x${string}`,
+            data: txData.data as `0x${string}`,
+            value: BigInt(txData.value ?? '0'),
+            gas: txData.gasLimit ? BigInt(txData.gasLimit) : undefined,
+            chain,
+            account: walletAddress as `0x${string}`,
+          })
+
+          actorRef.send({ type: 'EXECUTE_SUCCESS', txHash })
+        } else if (context.isSellAssetUtxo) {
+          if (!bitcoin.isConnected || !bitcoin.address) {
+            actorRef.send({ type: 'EXECUTE_ERROR', error: 'Bitcoin wallet not connected' })
+            return
+          }
+
+          bitcoin.reset()
+
+          const outerStep = quote.steps?.[0]
+          const innerStep = quote.quote?.steps?.[0]
+          const transactionData =
+            quote.transactionData ?? outerStep?.transactionData ?? innerStep?.transactionData
+
+          if (!transactionData) {
+            throw new Error(
+              `No transaction data returned. Response keys: ${Object.keys(quote).join(', ')}`,
+            )
+          }
+
+          let txid: string
+
+          if (transactionData.type === 'utxo_deposit') {
+            txid = await bitcoin.sendTransfer({
+              recipientAddress: transactionData.depositAddress,
+              amount: transactionData.value,
+              memo: transactionData.memo,
+            })
+          } else {
+            throw new Error(
+              `Unsupported UTXO transaction type: ${transactionData.type}. Only utxo_deposit is supported.`,
+            )
+          }
+
+          actorRef.send({ type: 'EXECUTE_SUCCESS', txHash: txid })
+        } else if (context.isSellAssetSolana) {
+          if (!solana.isConnected || !solana.address || !solana.connection) {
+            actorRef.send({ type: 'EXECUTE_ERROR', error: 'Solana wallet not connected' })
+            return
+          }
+
+          solana.reset()
+
+          const outerStep = quote.steps?.[0]
+          const innerStep = quote.quote?.steps?.[0]
+
+          const txData = outerStep?.transactionData ?? innerStep?.transactionData
+
+          if (!txData || txData.type !== 'solana') {
+            throw new Error(
+              `No Solana transaction metadata returned. Response keys: ${Object.keys(quote).join(
+                ', ',
+              )}`,
+            )
+          }
+
+          const { Transaction, PublicKey, TransactionInstruction } = await import('@solana/web3.js')
+
+          const instructions = txData.instructions.map(ix => {
+            const keys = ix.keys.map(key => ({
+              pubkey: new PublicKey(key.pubkey),
+              isSigner: key.isSigner,
+              isWritable: key.isWritable,
+            }))
+
+            return new TransactionInstruction({
+              keys,
+              programId: new PublicKey(ix.programId),
+              data: Buffer.from(ix.data, 'base64'),
+            })
+          })
+
+          const transaction = new Transaction().add(...instructions)
+          const conn = solana.connection as {
+            getLatestBlockhash: (commitment: string) => Promise<{ blockhash: string }>
+          }
+          const { blockhash } = await conn.getLatestBlockhash('confirmed')
+          transaction.recentBlockhash = blockhash
+          transaction.feePayer = new PublicKey(solana.address)
+
+          const signature = await solana.sendTransaction({ transaction })
+          actorRef.send({ type: 'EXECUTE_SUCCESS', txHash: signature })
+        } else {
+          actorRef.send({ type: 'EXECUTE_ERROR', error: 'Unsupported chain type' })
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error
+            ? error.message
+            : typeof error === 'string'
+            ? error
+            : JSON.stringify(error) ?? 'Transaction failed'
+        actorRef.send({ type: 'EXECUTE_ERROR', error: errorMessage })
+      } finally {
+        executingRef.current = false
+      }
+    }
+
+    executeSwap()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- stateValue is the sole trigger; other deps are stable refs read from snapshot
+  }, [stateValue])
+}