@shapeshiftoss/swap-widget 0.0.2 → 0.1.0

package/src/components/SwapWidget.tsx

@@ -1,607 +0,0 @@
-import './SwapWidget.css'
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { WalletClient } from 'viem'
-
-import { createApiClient } from '../api/client'
-import { DEFAULT_BUY_ASSET, DEFAULT_SELL_ASSET } from '../constants/defaults'
-import type { SwapWalletContextValue } from '../contexts/SwapWalletContext'
-import { SwapWalletProvider, useSwapWallet } from '../contexts/SwapWalletContext'
-import { useBitcoinSigning } from '../hooks/useBitcoinSigning'
-import { useSolanaSigning } from '../hooks/useSolanaSigning'
-import { useStatusPolling } from '../hooks/useStatusPolling'
-import { useSwapApproval } from '../hooks/useSwapApproval'
-import { useSwapDisplayValues } from '../hooks/useSwapDisplayValues'
-import { useSwapExecution } from '../hooks/useSwapExecution'
-import { useSwapHandlers } from '../hooks/useSwapHandlers'
-import { useSwapQuoting } from '../hooks/useSwapQuoting'
-import { SwapMachineCtx } from '../machines/SwapMachineContext'
-import type { Asset, SwapWidgetProps, ThemeMode } from '../types'
-import { getChainType } from '../types'
-import { AddressInputModal } from './AddressInputModal'
-import { ApprovalStep } from './ApprovalStep'
-import { ExecutionStep } from './ExecutionStep'
-import { InputStep } from './InputStep'
-import { SettingsModal } from './SettingsModal'
-import { StatusStep } from './StatusStep'
-import { TokenSelectModal } from './TokenSelectModal'
-import { ConnectWalletButton, InternalWalletProvider } from './WalletProvider'
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      staleTime: 30_000,
-    },
-  },
-})
-
-type SwapWidgetContentProps = {
-  apiClient: ReturnType<typeof createApiClient>
-  theme: SwapWidgetProps['theme']
-  showPoweredBy: boolean
-  defaultReceiveAddress?: string
-  enableWalletConnection: boolean
-  isBuyAssetLocked: boolean
-  onConnectWallet?: () => void
-  onSwapSuccess?: (txHash: string) => void
-  onSwapError?: (error: Error) => void
-  onAssetSelect?: (type: 'sell' | 'buy', asset: Asset) => void
-  sellDisabledAssetIds: string[]
-  buyDisabledAssetIds: string[]
-  sellDisabledChainIds: string[]
-  buyDisabledChainIds: string[]
-  sellAllowedChainIds?: string[]
-  buyAllowedChainIds?: string[]
-  sellAllowedAssetIds?: string[]
-  buyAllowedAssetIds?: string[]
-}
-
-const SwapWidgetContent = ({
-  apiClient,
-  theme = 'dark',
-  showPoweredBy,
-  defaultReceiveAddress,
-  enableWalletConnection,
-  isBuyAssetLocked,
-  onConnectWallet,
-  onSwapSuccess,
-  onSwapError,
-  onAssetSelect,
-  sellDisabledAssetIds,
-  buyDisabledAssetIds,
-  sellDisabledChainIds,
-  buyDisabledChainIds,
-  sellAllowedChainIds,
-  buyAllowedChainIds,
-  sellAllowedAssetIds,
-  buyAllowedAssetIds,
-}: SwapWidgetContentProps) => {
-  const state = SwapMachineCtx.useSelector(s => s)
-  const actorRef = SwapMachineCtx.useActorRef()
-
-  const {
-    walletAddress,
-    effectiveReceiveAddress,
-    isCustomAddress,
-    customReceiveAddress,
-    setCustomReceiveAddress,
-    bitcoin,
-    solana,
-  } = useSwapWallet()
-
-  const [tokenModalType, setTokenModalType] = useState<'sell' | 'buy' | null>(null)
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
-  const [isAddressModalOpen, setIsAddressModalOpen] = useState(false)
-
-  const themeMode: ThemeMode = typeof theme === 'string' ? theme : theme.mode
-  const themeConfig = typeof theme === 'object' ? theme : undefined
-
-  const buyChainType = getChainType(state.context.buyAsset.chainId)
-
-  const {
-    rates,
-    isLoadingRates,
-    ratesError,
-    sellAssetBalance,
-    isSellBalanceLoading,
-    refetchSellBalance,
-    buyAssetBalance,
-    isBuyBalanceLoading,
-    refetchBuyBalance,
-    sellChainInfo,
-    buyChainInfo,
-    displayRate,
-    networkFeeDisplay,
-    sellUsdValue,
-    buyUsdValue,
-    buyAssetUsdPrice,
-    sellBalanceFiatValue,
-    buyBalanceFiatValue,
-  } = useSwapDisplayValues({ apiClient })
-
-  const {
-    handleSwapTokens,
-    handleSellAssetSelect,
-    handleBuyAssetSelect,
-    handleSellAmountChange,
-    handleSelectRate,
-    handleSlippageChange,
-    handleButtonClick,
-  } = useSwapHandlers({ onConnectWallet, onAssetSelect })
-
-  useSwapQuoting({ apiClient, rates, sellAssetBalance })
-
-  useSwapApproval()
-
-  useSwapExecution()
-
-  useStatusPolling({ onSwapSuccess, onSwapError, refetchSellBalance, refetchBuyBalance })
-
-  const widgetStyle = useMemo(() => {
-    if (!themeConfig) return undefined
-    const style: Record<string, string> = {}
-    if (themeConfig.accentColor) {
-      style['--ssw-accent'] = themeConfig.accentColor
-      style['--ssw-accent-light'] = `${themeConfig.accentColor}1a`
-    }
-    if (themeConfig.backgroundColor) {
-      style['--ssw-bg-secondary'] = themeConfig.backgroundColor
-      style['--ssw-bg-primary'] = themeConfig.backgroundColor
-    }
-    if (themeConfig.cardColor) {
-      style['--ssw-bg-tertiary'] = themeConfig.cardColor
-    }
-    if (themeConfig.textColor) {
-      style['--ssw-text-primary'] = themeConfig.textColor
-    }
-    if (themeConfig.borderRadius) {
-      const base = parseFloat(themeConfig.borderRadius) || 0
-      style['--ssw-radius-widget'] = `${base * 1.25}px`
-      style['--ssw-radius-lg'] = `${base}px`
-      style['--ssw-radius-md'] = `${Math.round(base * 0.875)}px`
-      style['--ssw-radius-sm'] = `${Math.round(base * 0.625)}px`
-      style['--ssw-radius-xs'] = `${Math.round(base * 0.375)}px`
-      style['--ssw-radius-2xs'] = `${Math.round(base * 0.25)}px`
-    }
-    if (themeConfig.fontFamily) {
-      style['--ssw-font-family'] = themeConfig.fontFamily
-    }
-    if (themeConfig.borderColor) {
-      style['--ssw-border'] = themeConfig.borderColor
-      style['--ssw-border-hover'] = themeConfig.borderColor
-    }
-    if (themeConfig.secondaryTextColor) {
-      style['--ssw-text-secondary'] = themeConfig.secondaryTextColor
-    }
-    if (themeConfig.mutedTextColor) {
-      style['--ssw-text-muted'] = themeConfig.mutedTextColor
-    }
-    if (themeConfig.inputColor) {
-      style['--ssw-bg-input'] = themeConfig.inputColor
-    }
-    if (themeConfig.hoverColor) {
-      style['--ssw-bg-hover'] = themeConfig.hoverColor
-    }
-    return Object.keys(style).length > 0 ? (style as React.CSSProperties) : undefined
-  }, [themeConfig])
-
-  const openAddressModal = useCallback(() => setIsAddressModalOpen(true), [])
-
-  return (
-    <div
-      className={`ssw-widget ${themeMode === 'light' ? 'ssw-light' : 'ssw-dark'}${
-        themeConfig?.buttonVariant === 'outline' ? ' ssw-btn-outline' : ''
-      }`}
-      style={widgetStyle}
-    >
-      <div className='ssw-header'>
-        <span className='ssw-header-title'>Swap</span>
-        <div className='ssw-header-actions'>
-          {enableWalletConnection && <ConnectWalletButton />}
-          <button
-            className='ssw-settings-btn'
-            onClick={() => setIsSettingsOpen(true)}
-            type='button'
-            title='Settings'
-          >
-            <svg
-              width='20'
-              height='20'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-            >
-              <circle cx='12' cy='12' r='3' />
-              <path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z' />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div className='ssw-step-container'>
-        {(state.matches('idle') || state.matches('input') || state.matches('quoting')) && (
-          <InputStep
-            context={state.context}
-            send={actorRef.send}
-            rates={rates ?? []}
-            isLoadingRates={isLoadingRates}
-            ratesError={ratesError}
-            sellAssetBalance={sellAssetBalance}
-            buyAssetBalance={buyAssetBalance}
-            isSellBalanceLoading={isSellBalanceLoading}
-            isBuyBalanceLoading={isBuyBalanceLoading}
-            sellUsdValue={sellUsdValue}
-            buyUsdValue={buyUsdValue}
-            sellChainInfo={sellChainInfo}
-            buyChainInfo={buyChainInfo}
-            displayRate={displayRate}
-            walletAddress={walletAddress}
-            bitcoinAddress={bitcoin.address}
-            solanaAddress={solana.address}
-            defaultReceiveAddress={defaultReceiveAddress}
-            buyAssetUsdPrice={buyAssetUsdPrice}
-            onOpenTokenModal={setTokenModalType}
-            onOpenAddressModal={openAddressModal}
-            enableWalletConnection={enableWalletConnection}
-            onConnectWallet={onConnectWallet}
-            bitcoinState={bitcoin.state}
-            solanaState={solana.state}
-            isQuoting={state.matches('quoting')}
-            isExecuting={false}
-            effectiveReceiveAddress={effectiveReceiveAddress}
-            isCustomAddress={isCustomAddress}
-            sellAmount={state.context.sellAmount}
-            onSellAmountChange={handleSellAmountChange}
-            onSwapTokens={handleSwapTokens}
-            onSelectRate={handleSelectRate}
-            onButtonClick={handleButtonClick}
-            sellAmountBaseUnit={state.context.sellAmountBaseUnit}
-            networkFeeDisplay={networkFeeDisplay}
-            sellBalanceFiatValue={sellBalanceFiatValue}
-            buyBalanceFiatValue={buyBalanceFiatValue}
-            isBuyAssetLocked={isBuyAssetLocked}
-          />
-        )}
-
-        {(state.matches('approval_needed') || state.matches('approving')) && (
-          <ApprovalStep
-            context={state.context}
-            send={actorRef.send}
-            isApproving={state.matches('approving')}
-          />
-        )}
-
-        {state.matches('executing') && (
-          <ExecutionStep context={state.context} send={actorRef.send} />
-        )}
-
-        {(state.matches('polling_status') ||
-          state.matches('complete') ||
-          state.matches('error')) && (
-          <StatusStep
-            context={state.context}
-            send={actorRef.send}
-            isPolling={state.matches('polling_status')}
-            isComplete={state.matches('complete')}
-            isError={state.matches('error')}
-          />
-        )}
-      </div>
-
-      {showPoweredBy && (
-        <div className='ssw-powered-by'>
-          Powered by{' '}
-          <a
-            href='https://shapeshift.com'
-            target='_blank'
-            rel='noopener noreferrer'
-            className='ssw-powered-by-link'
-          >
-            <svg width='16' height='16' viewBox='0 0 57 62' fill='currentColor'>
-              <path d='M51.67 5.1L48.97 21.3L39.37 10L51.67 5.1ZM49.03 28.27L51.43 37.14L33.06 42.2L49.03 28.27ZM9.03 23.8L18.88 10.93H35.99L46.92 23.8H9.03ZM45.66 26.99L27.85 42.53L9.7 26.99H45.66ZM15.58 10.01L6.78 21.51L4.08 5.17L15.58 10.01ZM22.57 42.2L4.02 37.15L6.56 28.48L22.57 42.2ZM25.99 46.43L22.49 50.28C19.53 47.46 16.26 44.96 12.78 42.83L25.99 46.43ZM42.98 42.77C39.5 44.94 36.24 47.47 33.29 50.32L29.72 46.42L42.98 42.77ZM55.73 0.06L36.42 7.75H18.42L0 0L4.18 25.3L0.17 38.99L10.65 45.26C15.61 48.23 20.06 51.94 23.86 56.3L27.94 60.97L32.23 56.06C35.9 51.84 40.18 48.22 44.95 45.29L55.23 38.99L51.52 25.31L55.73 0.06Z' />
-            </svg>
-            ShapeShift
-          </a>
-        </div>
-      )}
-
-      <TokenSelectModal
-        isOpen={tokenModalType !== null}
-        onClose={() => setTokenModalType(null)}
-        onSelect={tokenModalType === 'sell' ? handleSellAssetSelect : handleBuyAssetSelect}
-        disabledAssetIds={tokenModalType === 'buy' ? buyDisabledAssetIds : sellDisabledAssetIds}
-        disabledChainIds={tokenModalType === 'buy' ? buyDisabledChainIds : sellDisabledChainIds}
-        allowedChainIds={tokenModalType === 'buy' ? buyAllowedChainIds : sellAllowedChainIds}
-        allowedAssetIds={tokenModalType === 'buy' ? buyAllowedAssetIds : sellAllowedAssetIds}
-        walletAddress={walletAddress}
-        currentAssetIds={[state.context.sellAsset.assetId, state.context.buyAsset.assetId]}
-      />
-
-      <SettingsModal
-        isOpen={isSettingsOpen}
-        onClose={() => setIsSettingsOpen(false)}
-        slippage={state.context.slippage}
-        onSlippageChange={handleSlippageChange}
-      />
-
-      <AddressInputModal
-        isOpen={isAddressModalOpen}
-        onClose={() => setIsAddressModalOpen(false)}
-        chainId={state.context.buyAsset.chainId}
-        chainName={
-          buyChainInfo?.name ?? state.context.buyAsset.networkName ?? state.context.buyAsset.name
-        }
-        currentAddress={customReceiveAddress || effectiveReceiveAddress || ''}
-        onAddressChange={setCustomReceiveAddress}
-        walletAddress={
-          buyChainType === 'evm'
-            ? walletAddress
-            : buyChainType === 'utxo'
-            ? bitcoin.address
-            : buyChainType === 'solana'
-            ? solana.address
-            : undefined
-        }
-      />
-    </div>
-  )
-}
-
-type SwapWidgetCoreProps = {
-  walletClient: unknown
-  defaultSellAsset: Asset
-  defaultBuyAsset: Asset
-  defaultSlippage: string
-  defaultReceiveAddress?: string
-  apiClient: ReturnType<typeof createApiClient>
-  theme: SwapWidgetProps['theme']
-  showPoweredBy: boolean
-  enableWalletConnection: boolean
-  isBuyAssetLocked: boolean
-  onConnectWallet?: () => void
-  onSwapSuccess?: (txHash: string) => void
-  onSwapError?: (error: Error) => void
-  onAssetSelect?: (type: 'sell' | 'buy', asset: Asset) => void
-  sellDisabledAssetIds: string[]
-  buyDisabledAssetIds: string[]
-  sellDisabledChainIds: string[]
-  buyDisabledChainIds: string[]
-  sellAllowedChainIds?: string[]
-  buyAllowedChainIds?: string[]
-  sellAllowedAssetIds?: string[]
-  buyAllowedAssetIds?: string[]
-}
-
-const SwapWidgetCore = ({
-  walletClient,
-  defaultSellAsset,
-  defaultBuyAsset,
-  defaultSlippage,
-  defaultReceiveAddress,
-  apiClient,
-  theme,
-  showPoweredBy,
-  enableWalletConnection,
-  isBuyAssetLocked,
-  onConnectWallet,
-  onSwapSuccess,
-  onSwapError,
-  onAssetSelect,
-  sellDisabledAssetIds,
-  buyDisabledAssetIds,
-  sellDisabledChainIds,
-  buyDisabledChainIds,
-  sellAllowedChainIds,
-  buyAllowedChainIds,
-  sellAllowedAssetIds,
-  buyAllowedAssetIds,
-}: SwapWidgetCoreProps) => {
-  const actorRef = SwapMachineCtx.useActorRef()
-
-  const bitcoin = useBitcoinSigning()
-  const solana = useSolanaSigning()
-
-  const [customReceiveAddress, setCustomReceiveAddress] = useState<string>('')
-
-  const walletAddress = useMemo(() => {
-    if (!walletClient) return undefined
-    return (walletClient as WalletClient).account?.address
-  }, [walletClient])
-
-  const buyChainId = SwapMachineCtx.useSelector(s => s.context.buyAsset.chainId)
-  const buyChainType = getChainType(buyChainId)
-
-  const effectiveReceiveAddress = useMemo(() => {
-    if (customReceiveAddress) return customReceiveAddress
-    if (defaultReceiveAddress) return defaultReceiveAddress
-
-    if (buyChainType === 'utxo') return bitcoin.address ?? ''
-    if (buyChainType === 'solana') return solana.address ?? ''
-    if (buyChainType === 'evm') return walletAddress ?? ''
-
-    return ''
-  }, [
-    customReceiveAddress,
-    defaultReceiveAddress,
-    buyChainType,
-    bitcoin.address,
-    solana.address,
-    walletAddress,
-  ])
-
-  const isCustomAddress = useMemo(
-    () => !!customReceiveAddress && customReceiveAddress !== walletAddress,
-    [customReceiveAddress, walletAddress],
-  )
-
-  const initialSyncRef = useRef(false)
-  useEffect(() => {
-    if (initialSyncRef.current) return
-    initialSyncRef.current = true
-    actorRef.send({ type: 'SET_SELL_ASSET', asset: defaultSellAsset })
-    actorRef.send({ type: 'SET_BUY_ASSET', asset: defaultBuyAsset })
-    actorRef.send({ type: 'SET_SLIPPAGE', slippage: defaultSlippage })
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- defaults are initial-only, ref guard ensures single execution
-  }, [actorRef])
-
-  useEffect(() => {
-    actorRef.send({ type: 'SET_WALLET_ADDRESS', address: walletAddress })
-  }, [walletAddress, actorRef])
-
-  useEffect(() => {
-    actorRef.send({ type: 'SET_RECEIVE_ADDRESS', address: effectiveReceiveAddress })
-  }, [effectiveReceiveAddress, actorRef])
-
-  const walletValue: SwapWalletContextValue = useMemo(
-    () => ({
-      walletClient,
-      walletAddress,
-      effectiveReceiveAddress,
-      isCustomAddress,
-      customReceiveAddress,
-      setCustomReceiveAddress,
-      bitcoin,
-      solana,
-    }),
-    [
-      walletClient,
-      walletAddress,
-      effectiveReceiveAddress,
-      isCustomAddress,
-      customReceiveAddress,
-      bitcoin,
-      solana,
-    ],
-  )
-
-  return (
-    <SwapWalletProvider value={walletValue}>
-      <SwapWidgetContent
-        apiClient={apiClient}
-        theme={theme}
-        showPoweredBy={showPoweredBy}
-        defaultReceiveAddress={defaultReceiveAddress}
-        enableWalletConnection={enableWalletConnection}
-        isBuyAssetLocked={isBuyAssetLocked}
-        onConnectWallet={onConnectWallet}
-        onSwapSuccess={onSwapSuccess}
-        onSwapError={onSwapError}
-        onAssetSelect={onAssetSelect}
-        sellDisabledAssetIds={sellDisabledAssetIds}
-        buyDisabledAssetIds={buyDisabledAssetIds}
-        sellDisabledChainIds={sellDisabledChainIds}
-        buyDisabledChainIds={buyDisabledChainIds}
-        sellAllowedChainIds={sellAllowedChainIds}
-        buyAllowedChainIds={buyAllowedChainIds}
-        sellAllowedAssetIds={sellAllowedAssetIds}
-        buyAllowedAssetIds={buyAllowedAssetIds}
-      />
-    </SwapWalletProvider>
-  )
-}
-
-const SwapWidgetWithExternalWallet = (props: SwapWidgetProps) => {
-  const apiClient = useMemo(
-    () =>
-      createApiClient({
-        baseUrl: props.apiBaseUrl,
-        affiliateAddress: props.affiliateAddress,
-      }),
-    [props.apiBaseUrl, props.affiliateAddress],
-  )
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <SwapMachineCtx.Provider>
-        <SwapWidgetCore
-          walletClient={props.walletClient}
-          defaultSellAsset={props.defaultSellAsset ?? DEFAULT_SELL_ASSET}
-          defaultBuyAsset={props.defaultBuyAsset ?? DEFAULT_BUY_ASSET}
-          defaultSlippage={props.defaultSlippage ?? '0.5'}
-          defaultReceiveAddress={props.defaultReceiveAddress}
-          apiClient={apiClient}
-          theme={props.theme}
-          showPoweredBy={props.showPoweredBy ?? true}
-          enableWalletConnection={false}
-          isBuyAssetLocked={props.isBuyAssetLocked ?? false}
-          onConnectWallet={props.onConnectWallet}
-          onSwapSuccess={props.onSwapSuccess}
-          onSwapError={props.onSwapError}
-          onAssetSelect={props.onAssetSelect}
-          sellDisabledAssetIds={props.sellDisabledAssetIds ?? props.disabledAssetIds ?? []}
-          buyDisabledAssetIds={props.buyDisabledAssetIds ?? props.disabledAssetIds ?? []}
-          sellDisabledChainIds={props.sellDisabledChainIds ?? props.disabledChainIds ?? []}
-          buyDisabledChainIds={props.buyDisabledChainIds ?? props.disabledChainIds ?? []}
-          sellAllowedChainIds={props.sellAllowedChainIds ?? props.allowedChainIds}
-          buyAllowedChainIds={props.buyAllowedChainIds ?? props.allowedChainIds}
-          sellAllowedAssetIds={props.sellAllowedAssetIds}
-          buyAllowedAssetIds={props.buyAllowedAssetIds}
-        />
-      </SwapMachineCtx.Provider>
-    </QueryClientProvider>
-  )
-}
-
-const SwapWidgetWithInternalWallet = (
-  props: SwapWidgetProps & { walletConnectProjectId: string },
-) => {
-  const apiClient = useMemo(
-    () =>
-      createApiClient({
-        baseUrl: props.apiBaseUrl,
-        affiliateAddress: props.affiliateAddress,
-      }),
-    [props.apiBaseUrl, props.affiliateAddress],
-  )
-
-  return (
-    <InternalWalletProvider projectId={props.walletConnectProjectId}>
-      {walletClient => (
-        <QueryClientProvider client={queryClient}>
-          <SwapMachineCtx.Provider>
-            <SwapWidgetCore
-              walletClient={walletClient}
-              defaultSellAsset={props.defaultSellAsset ?? DEFAULT_SELL_ASSET}
-              defaultBuyAsset={props.defaultBuyAsset ?? DEFAULT_BUY_ASSET}
-              defaultSlippage={props.defaultSlippage ?? '0.5'}
-              defaultReceiveAddress={props.defaultReceiveAddress}
-              apiClient={apiClient}
-              theme={props.theme}
-              showPoweredBy={props.showPoweredBy ?? true}
-              enableWalletConnection={true}
-              onConnectWallet={props.onConnectWallet}
-              onSwapSuccess={props.onSwapSuccess}
-              onSwapError={props.onSwapError}
-              onAssetSelect={props.onAssetSelect}
-              sellDisabledAssetIds={props.sellDisabledAssetIds ?? props.disabledAssetIds ?? []}
-              buyDisabledAssetIds={props.buyDisabledAssetIds ?? props.disabledAssetIds ?? []}
-              sellDisabledChainIds={props.sellDisabledChainIds ?? props.disabledChainIds ?? []}
-              buyDisabledChainIds={props.buyDisabledChainIds ?? props.disabledChainIds ?? []}
-              sellAllowedChainIds={props.sellAllowedChainIds ?? props.allowedChainIds}
-              buyAllowedChainIds={props.buyAllowedChainIds ?? props.allowedChainIds}
-              sellAllowedAssetIds={props.sellAllowedAssetIds}
-              buyAllowedAssetIds={props.buyAllowedAssetIds}
-              isBuyAssetLocked={props.isBuyAssetLocked ?? false}
-            />
-          </SwapMachineCtx.Provider>
-        </QueryClientProvider>
-      )}
-    </InternalWalletProvider>
-  )
-}
-
-export const SwapWidget = (props: SwapWidgetProps) => {
-  if (props.enableWalletConnection && props.walletConnectProjectId) {
-    return (
-      <SwapWidgetWithInternalWallet
-        {...props}
-        walletConnectProjectId={props.walletConnectProjectId}
-      />
-    )
-  }
-
-  return <SwapWidgetWithExternalWallet {...props} />
-}