@shapeshiftoss/swap-widget 0.0.2

package/src/hooks/useSwapHandlers.ts

@@ -0,0 +1,119 @@
+import { useCallback } from 'react'
+
+import { useSwapWallet } from '../contexts/SwapWalletContext'
+import { SwapMachineCtx } from '../machines/SwapMachineContext'
+import type { Asset, TradeRate } from '../types'
+import { parseAmount } from '../types'
+
+type UseSwapHandlersParams = {
+  onConnectWallet?: () => void
+  onAssetSelect?: (type: 'sell' | 'buy', asset: Asset) => void
+}
+
+export const useSwapHandlers = ({ onConnectWallet, onAssetSelect }: UseSwapHandlersParams) => {
+  const actorRef = SwapMachineCtx.useActorRef()
+  const { walletClient, bitcoin, solana } = useSwapWallet()
+
+  const handleSwapTokens = useCallback(() => {
+    const snap = actorRef.getSnapshot()
+    actorRef.send({ type: 'SET_SELL_ASSET', asset: snap.context.buyAsset })
+    actorRef.send({ type: 'SET_BUY_ASSET', asset: snap.context.sellAsset })
+    actorRef.send({ type: 'SET_SELL_AMOUNT', amount: '', amountBaseUnit: undefined })
+  }, [actorRef])
+
+  const handleSellAssetSelect = useCallback(
+    (asset: Asset) => {
+      actorRef.send({ type: 'SET_SELL_ASSET', asset })
+      onAssetSelect?.('sell', asset)
+    },
+    [actorRef, onAssetSelect],
+  )
+
+  const handleBuyAssetSelect = useCallback(
+    (asset: Asset) => {
+      actorRef.send({ type: 'SET_BUY_ASSET', asset })
+      onAssetSelect?.('buy', asset)
+    },
+    [actorRef, onAssetSelect],
+  )
+
+  const handleSellAmountChange = useCallback(
+    (value: string) => {
+      const snap = actorRef.getSnapshot()
+      const baseUnit = value ? parseAmount(value, snap.context.sellAsset.precision) : undefined
+      actorRef.send({ type: 'SET_SELL_AMOUNT', amount: value, amountBaseUnit: baseUnit })
+    },
+    [actorRef],
+  )
+
+  const handleSelectRate = useCallback(
+    (rate: TradeRate) => {
+      actorRef.send({ type: 'SELECT_RATE', rate })
+    },
+    [actorRef],
+  )
+
+  const handleSlippageChange = useCallback(
+    (value: string) => {
+      actorRef.send({ type: 'SET_SLIPPAGE', slippage: value })
+    },
+    [actorRef],
+  )
+
+  const redirectToShapeShift = useCallback(() => {
+    const snap = actorRef.getSnapshot()
+    const params = new URLSearchParams({
+      sellAssetId: snap.context.sellAsset.assetId,
+      buyAssetId: snap.context.buyAsset.assetId,
+      sellAmount: snap.context.sellAmount,
+    })
+    window.open(
+      `https://app.shapeshift.com/trade?${params.toString()}`,
+      '_blank',
+      'noopener,noreferrer',
+    )
+  }, [actorRef])
+
+  const handleButtonClick = useCallback(() => {
+    const snap = actorRef.getSnapshot()
+    if (snap.context.isSellAssetUtxo && !bitcoin.isConnected) {
+      return
+    }
+    if (snap.context.isSellAssetSolana && !solana.isConnected) {
+      return
+    }
+    if (!walletClient && snap.context.isSellAssetEvm && onConnectWallet) {
+      onConnectWallet()
+      return
+    }
+    if (
+      !snap.context.isSellAssetEvm &&
+      !snap.context.isSellAssetUtxo &&
+      !snap.context.isSellAssetSolana
+    ) {
+      const params = new URLSearchParams({
+        sellAssetId: snap.context.sellAsset.assetId,
+        buyAssetId: snap.context.buyAsset.assetId,
+        sellAmount: snap.context.sellAmount,
+      })
+      window.open(
+        `https://app.shapeshift.com/trade?${params.toString()}`,
+        '_blank',
+        'noopener,noreferrer',
+      )
+      return
+    }
+    actorRef.send({ type: 'FETCH_QUOTE' })
+  }, [actorRef, bitcoin.isConnected, solana.isConnected, walletClient, onConnectWallet])
+
+  return {
+    handleSwapTokens,
+    handleSellAssetSelect,
+    handleBuyAssetSelect,
+    handleSellAmountChange,
+    handleSelectRate,
+    handleSlippageChange,
+    redirectToShapeShift,
+    handleButtonClick,
+  }
+}

package/src/hooks/useSwapQuote.ts

@@ -0,0 +1,71 @@
+import { useQuery } from '@tanstack/react-query'
+
+import type { ApiClient } from '../api/client'
+import type { AssetId, QuoteResponse, SwapperName } from '../types'
+
+export type UseSwapQuoteParams = {
+  sellAssetId: AssetId | undefined
+  buyAssetId: AssetId | undefined
+  sellAmountCryptoBaseUnit: string | undefined
+  sendAddress: string | undefined
+  receiveAddress: string | undefined
+  swapperName: SwapperName | undefined
+  slippageTolerancePercentageDecimal?: string
+  enabled?: boolean
+}
+
+export const useSwapQuote = (apiClient: ApiClient, params: UseSwapQuoteParams) => {
+  const {
+    sellAssetId,
+    buyAssetId,
+    sellAmountCryptoBaseUnit,
+    sendAddress,
+    receiveAddress,
+    swapperName,
+    slippageTolerancePercentageDecimal,
+    enabled = true,
+  } = params
+
+  return useQuery({
+    queryKey: [
+      'swapQuote',
+      sellAssetId,
+      buyAssetId,
+      sellAmountCryptoBaseUnit,
+      sendAddress,
+      receiveAddress,
+      swapperName,
+      slippageTolerancePercentageDecimal,
+    ],
+    queryFn: (): Promise<QuoteResponse | null> => {
+      if (
+        !sellAssetId ||
+        !buyAssetId ||
+        !sellAmountCryptoBaseUnit ||
+        !sendAddress ||
+        !receiveAddress ||
+        !swapperName
+      ) {
+        return Promise.resolve(null)
+      }
+      return apiClient.getQuote({
+        sellAssetId,
+        buyAssetId,
+        sellAmountCryptoBaseUnit,
+        sendAddress,
+        receiveAddress,
+        swapperName,
+        slippageTolerancePercentageDecimal,
+      })
+    },
+    enabled:
+      enabled &&
+      !!sellAssetId &&
+      !!buyAssetId &&
+      !!sellAmountCryptoBaseUnit &&
+      !!sendAddress &&
+      !!receiveAddress &&
+      !!swapperName,
+    staleTime: 30_000,
+  })
+}

package/src/hooks/useSwapQuoting.ts

@@ -0,0 +1,102 @@
+import { useEffect, useRef } from 'react'
+
+import type { ApiClient } from '../api/client'
+import { useSwapWallet } from '../contexts/SwapWalletContext'
+import { SwapMachineCtx } from '../machines/SwapMachineContext'
+import type { TradeRate } from '../types'
+
+type BalanceData =
+  | {
+      balance: string
+      balanceFormatted: string
+    }
+  | undefined
+
+type UseSwapQuotingParams = {
+  apiClient: ApiClient
+  rates: TradeRate[] | undefined
+  sellAssetBalance: BalanceData
+}
+
+export const useSwapQuoting = ({ apiClient, rates, sellAssetBalance }: UseSwapQuotingParams) => {
+  const stateValue = SwapMachineCtx.useSelector(s => s.value)
+  const context = SwapMachineCtx.useSelector(s => s.context)
+  const actorRef = SwapMachineCtx.useActorRef()
+
+  const { walletAddress, effectiveReceiveAddress, bitcoin, solana } = useSwapWallet()
+  const bitcoinAddress = bitcoin.address
+  const solanaAddress = solana.address
+
+  const quotingRef = useRef(false)
+
+  useEffect(() => {
+    const snap = actorRef.getSnapshot()
+    if (!snap.matches('quoting') || quotingRef.current) return
+    quotingRef.current = true
+
+    const fetchQuote = async () => {
+      try {
+        if (sellAssetBalance?.balance && context.sellAmountBaseUnit) {
+          const balanceBigInt = BigInt(sellAssetBalance.balance)
+          const amountBigInt = BigInt(context.sellAmountBaseUnit)
+          if (amountBigInt > balanceBigInt) {
+            actorRef.send({ type: 'QUOTE_ERROR', error: 'Insufficient balance' })
+            return
+          }
+        }
+
+        const parsedSlippage = parseFloat(context.slippage)
+        if (isNaN(parsedSlippage) || parsedSlippage < 0) {
+          actorRef.send({ type: 'QUOTE_ERROR', error: 'Invalid slippage value' })
+          return
+        }
+        const slippageDecimal = (parsedSlippage / 100).toString()
+        const rateToUse = context.selectedRate ?? rates?.[0]
+        if (!rateToUse || !context.sellAmountBaseUnit) {
+          actorRef.send({ type: 'QUOTE_ERROR', error: 'No rate or amount available' })
+          return
+        }
+
+        const sendAddress = context.isSellAssetEvm
+          ? walletAddress
+          : context.isSellAssetUtxo
+          ? bitcoinAddress
+          : context.isSellAssetSolana
+          ? solanaAddress
+          : undefined
+
+        if (!sendAddress) {
+          actorRef.send({ type: 'QUOTE_ERROR', error: 'No wallet address available' })
+          return
+        }
+
+        const receiveAddr = effectiveReceiveAddress || sendAddress
+
+        if (!receiveAddr) {
+          actorRef.send({ type: 'QUOTE_ERROR', error: 'No receive address available' })
+          return
+        }
+
+        const response = await apiClient.getQuote({
+          sellAssetId: context.sellAsset.assetId,
+          buyAssetId: context.buyAsset.assetId,
+          sellAmountCryptoBaseUnit: context.sellAmountBaseUnit,
+          sendAddress,
+          receiveAddress: receiveAddr,
+          swapperName: rateToUse.swapperName,
+          slippageTolerancePercentageDecimal: slippageDecimal,
+        })
+
+        actorRef.send({ type: 'QUOTE_SUCCESS', quote: response })
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to get quote'
+        actorRef.send({ type: 'QUOTE_ERROR', error: errorMessage })
+      } finally {
+        quotingRef.current = false
+      }
+    }
+
+    fetchQuote()
+    // 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/useSwapRates.ts

@@ -0,0 +1,61 @@
+import { bnOrZero } from '@shapeshiftoss/utils'
+import { useQuery } from '@tanstack/react-query'
+
+import type { ApiClient } from '../api/client'
+import type { AssetId, SwapperName, TradeRate } from '../types'
+
+export type UseSwapRatesParams = {
+  sellAssetId: AssetId | undefined
+  buyAssetId: AssetId | undefined
+  sellAmountCryptoBaseUnit: string | undefined
+  enabled?: boolean
+  allowedSwapperNames?: SwapperName[]
+  refetchInterval?: number
+}
+
+export const useSwapRates = (apiClient: ApiClient, params: UseSwapRatesParams) => {
+  const {
+    sellAssetId,
+    buyAssetId,
+    sellAmountCryptoBaseUnit,
+    enabled = true,
+    allowedSwapperNames,
+    refetchInterval = 15_000,
+  } = params
+
+  return useQuery({
+    queryKey: ['swapRates', sellAssetId, buyAssetId, sellAmountCryptoBaseUnit, allowedSwapperNames],
+    queryFn: async (): Promise<TradeRate[]> => {
+      if (!sellAssetId || !buyAssetId || !sellAmountCryptoBaseUnit) {
+        return []
+      }
+      const response = await apiClient.getRates({
+        sellAssetId,
+        buyAssetId,
+        sellAmountCryptoBaseUnit,
+      })
+
+      let filteredRates = response.rates.filter(
+        rate => !rate.error && rate.buyAmountCryptoBaseUnit !== '0',
+      )
+
+      if (allowedSwapperNames?.length) {
+        filteredRates = filteredRates.filter(rate => allowedSwapperNames.includes(rate.swapperName))
+      }
+
+      return filteredRates
+        .map((rate, index) => ({
+          ...rate,
+          id: rate.id ?? `${rate.swapperName}-${index}`,
+        }))
+        .sort((a, b) => {
+          const aAmount = bnOrZero(a.buyAmountCryptoBaseUnit)
+          const bAmount = bnOrZero(b.buyAmountCryptoBaseUnit)
+          return bAmount.minus(aAmount).toNumber()
+        })
+    },
+    enabled: enabled && !!sellAssetId && !!buyAssetId && !!sellAmountCryptoBaseUnit,
+    staleTime: 10_000,
+    refetchInterval,
+  })
+}

package/src/index.ts

@@ -0,0 +1,43 @@
+export { SwapWidget } from './components/SwapWidget'
+
+export type {
+  Asset,
+  AssetId,
+  ChainId,
+  Chain,
+  TradeRate,
+  TradeQuote,
+  SwapWidgetProps,
+  ThemeMode,
+  ThemeConfig,
+} from './types'
+
+export {
+  SwapperName,
+  isEvmChainId,
+  getEvmNetworkId,
+  getChainType,
+  formatAmount,
+  parseAmount,
+  truncateAddress,
+  EVM_CHAIN_IDS,
+  UTXO_CHAIN_IDS,
+  COSMOS_CHAIN_IDS,
+  OTHER_CHAIN_IDS,
+} from './types'
+
+export {
+  getBaseAsset,
+  getChainName,
+  getChainIcon,
+  getChainColor,
+  getExplorerTxLink,
+} from './constants/chains'
+
+export {
+  useAssets,
+  useAssetById,
+  useChains,
+  useAssetsByChainId,
+  useAssetSearch,
+} from './hooks/useAssets'

package/src/machines/SwapMachineContext.ts

@@ -0,0 +1,5 @@
+import { createActorContext } from '@xstate/react'
+
+import { swapMachine } from './swapMachine'
+
+export const SwapMachineCtx = createActorContext(swapMachine)

package/src/machines/__tests__/guards.test.ts

@@ -0,0 +1,228 @@
+import { describe, expect, it } from 'vitest'
+
+import type { QuoteResponse } from '../../types'
+import {
+  canRetry,
+  hasQuote,
+  hasReceiveAddress,
+  hasValidInput,
+  hasWallet,
+  isApprovalRequired,
+  isEvmChain,
+  isSolanaChain,
+  isUtxoChain,
+} from '../guards'
+import type { SwapMachineContext } from '../types'
+
+const createTestContext = (overrides?: Partial<SwapMachineContext>): SwapMachineContext => ({
+  sellAsset: {
+    assetId: 'eip155:1/slip44:60',
+    chainId: 'eip155:1',
+    symbol: 'ETH',
+    name: 'Ethereum',
+    precision: 18,
+  },
+  buyAsset: {
+    assetId: 'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+    chainId: 'eip155:1',
+    symbol: 'USDC',
+    name: 'USD Coin',
+    precision: 6,
+  },
+  sellAmount: '1.0',
+  sellAmountBaseUnit: '1000000000000000000',
+  selectedRate: null,
+  quote: null,
+  txHash: null,
+  approvalTxHash: null,
+  error: null,
+  errorSource: null,
+  retryCount: 0,
+  chainType: 'evm',
+  slippage: '0.5',
+  walletAddress: '0x1234567890abcdef1234567890abcdef12345678',
+  effectiveReceiveAddress: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
+  isSellAssetEvm: true,
+  isSellAssetUtxo: false,
+  isSellAssetSolana: false,
+  isBuyAssetEvm: true,
+  ...overrides,
+})
+
+describe('guards', () => {
+  describe('hasValidInput', () => {
+    it('returns true when all required fields are present', () => {
+      expect(hasValidInput(createTestContext())).toBe(true)
+    })
+
+    it('returns false when sellAmountBaseUnit is undefined', () => {
+      expect(hasValidInput(createTestContext({ sellAmountBaseUnit: undefined }))).toBe(false)
+    })
+
+    it('returns false when sellAmountBaseUnit is "0"', () => {
+      expect(hasValidInput(createTestContext({ sellAmountBaseUnit: '0' }))).toBe(false)
+    })
+
+    it('returns false when sellAmountBaseUnit is empty string', () => {
+      expect(hasValidInput(createTestContext({ sellAmountBaseUnit: '' }))).toBe(false)
+    })
+  })
+
+  describe('hasQuote', () => {
+    it('returns false when quote is null', () => {
+      expect(hasQuote(createTestContext())).toBe(false)
+    })
+
+    it('returns true when quote is present', () => {
+      expect(hasQuote(createTestContext({ quote: {} as QuoteResponse }))).toBe(true)
+    })
+
+    it('returns true when quote has approval data', () => {
+      expect(
+        hasQuote(
+          createTestContext({
+            quote: { approval: { isRequired: true, spender: '0xSpender' } } as QuoteResponse,
+          }),
+        ),
+      ).toBe(true)
+    })
+  })
+
+  describe('isApprovalRequired', () => {
+    it('returns false when quote is null', () => {
+      expect(isApprovalRequired(createTestContext())).toBe(false)
+    })
+
+    it('returns false when approval is not required', () => {
+      expect(
+        isApprovalRequired(
+          createTestContext({
+            quote: { approval: { isRequired: false, spender: '0xSpender' } } as QuoteResponse,
+          }),
+        ),
+      ).toBe(false)
+    })
+
+    it('returns true when approval is required for ERC20 on EVM chain', () => {
+      expect(
+        isApprovalRequired(
+          createTestContext({
+            sellAsset: {
+              assetId: 'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              chainId: 'eip155:1',
+              symbol: 'USDC',
+              name: 'USD Coin',
+              precision: 6,
+            },
+            chainType: 'evm',
+            quote: { approval: { isRequired: true, spender: '0xSpender' } } as QuoteResponse,
+          }),
+        ),
+      ).toBe(true)
+    })
+
+    it('returns false when approval is required but sell asset is native (slip44)', () => {
+      expect(
+        isApprovalRequired(
+          createTestContext({
+            chainType: 'evm',
+            quote: { approval: { isRequired: true, spender: '0xSpender' } } as QuoteResponse,
+          }),
+        ),
+      ).toBe(false)
+    })
+
+    it('returns false when approval is required but chain is not EVM', () => {
+      expect(
+        isApprovalRequired(
+          createTestContext({
+            chainType: 'utxo',
+            quote: { approval: { isRequired: true, spender: '0xSpender' } } as QuoteResponse,
+          }),
+        ),
+      ).toBe(false)
+    })
+
+    it('returns false when quote has no approval field', () => {
+      expect(
+        isApprovalRequired(
+          createTestContext({
+            quote: {} as QuoteResponse,
+          }),
+        ),
+      ).toBe(false)
+    })
+  })
+
+  describe('canRetry', () => {
+    it('returns true when retryCount is 0', () => {
+      expect(canRetry(createTestContext({ retryCount: 0 }))).toBe(true)
+    })
+
+    it('returns true when retryCount is 2', () => {
+      expect(canRetry(createTestContext({ retryCount: 2 }))).toBe(true)
+    })
+
+    it('returns false when retryCount is 3', () => {
+      expect(canRetry(createTestContext({ retryCount: 3 }))).toBe(false)
+    })
+
+    it('returns false when retryCount is greater than 3', () => {
+      expect(canRetry(createTestContext({ retryCount: 5 }))).toBe(false)
+    })
+  })
+
+  describe('isEvmChain', () => {
+    it('returns true for evm chain', () => {
+      expect(isEvmChain(createTestContext({ chainType: 'evm' }))).toBe(true)
+    })
+
+    it('returns false for utxo chain', () => {
+      expect(isEvmChain(createTestContext({ chainType: 'utxo' }))).toBe(false)
+    })
+  })
+
+  describe('isUtxoChain', () => {
+    it('returns true for utxo chain', () => {
+      expect(isUtxoChain(createTestContext({ chainType: 'utxo' }))).toBe(true)
+    })
+
+    it('returns false for evm chain', () => {
+      expect(isUtxoChain(createTestContext({ chainType: 'evm' }))).toBe(false)
+    })
+  })
+
+  describe('isSolanaChain', () => {
+    it('returns true for solana chain', () => {
+      expect(isSolanaChain(createTestContext({ chainType: 'solana' }))).toBe(true)
+    })
+
+    it('returns false for evm chain', () => {
+      expect(isSolanaChain(createTestContext({ chainType: 'evm' }))).toBe(false)
+    })
+  })
+
+  describe('hasWallet', () => {
+    it('returns true when walletAddress is set', () => {
+      expect(hasWallet(createTestContext())).toBe(true)
+    })
+
+    it('returns false when walletAddress is undefined', () => {
+      expect(hasWallet(createTestContext({ walletAddress: undefined }))).toBe(false)
+    })
+
+    it('returns false when walletAddress is empty string', () => {
+      expect(hasWallet(createTestContext({ walletAddress: '' }))).toBe(false)
+    })
+  })
+
+  describe('hasReceiveAddress', () => {
+    it('returns true when effectiveReceiveAddress is set', () => {
+      expect(hasReceiveAddress(createTestContext())).toBe(true)
+    })
+
+    it('returns false when effectiveReceiveAddress is empty', () => {
+      expect(hasReceiveAddress(createTestContext({ effectiveReceiveAddress: '' }))).toBe(false)
+    })
+  })
+})

package/src/machines/__tests__/setup.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('test infrastructure', () => {
+  it('should work', () => {
+    expect(true).toBe(true)
+  })
+})