@shapeshiftoss/swap-widget 0.0.2

package/src/components/InputStep.tsx

@@ -0,0 +1,431 @@
+import { useMemo } from 'react'
+
+import type { SwapMachineContext, SwapMachineEvent } from '../machines/types'
+import type { TradeRate } from '../types'
+import { formatAmount, truncateAddress } from '../types'
+import { QuoteSelector } from './QuoteSelector'
+
+type InputStepProps = {
+  context: SwapMachineContext
+  send: (event: SwapMachineEvent) => void
+  rates: TradeRate[]
+  isLoadingRates: boolean
+  ratesError: Error | null
+  sellAssetBalance: { balance: string; balanceFormatted: string } | undefined
+  buyAssetBalance: { balance: string; balanceFormatted: string } | undefined
+  isSellBalanceLoading: boolean
+  isBuyBalanceLoading: boolean
+  sellUsdValue: string
+  buyUsdValue: string
+  sellChainInfo: { name: string } | undefined
+  buyChainInfo: { name: string } | undefined
+  displayRate: TradeRate | undefined
+  walletAddress: string | undefined
+  bitcoinAddress: string | undefined
+  solanaAddress: string | undefined
+  defaultReceiveAddress: string | undefined
+  buyAssetUsdPrice: string | undefined
+  onOpenTokenModal: (type: 'sell' | 'buy') => void
+  onOpenAddressModal: () => void
+  enableWalletConnection: boolean
+  onConnectWallet?: () => void
+  bitcoinState: { isLoading: boolean }
+  solanaState: { isLoading: boolean }
+  isQuoting: boolean
+  isExecuting: boolean
+  effectiveReceiveAddress: string
+  isCustomAddress: boolean
+  sellAmount: string
+  onSellAmountChange: (value: string) => void
+  onSwapTokens: () => void
+  onSelectRate: (rate: TradeRate) => void
+  onButtonClick: () => void
+  sellAmountBaseUnit: string | undefined
+  networkFeeDisplay: string | undefined
+  sellBalanceFiatValue: string | undefined
+  buyBalanceFiatValue: string | undefined
+  isBuyAssetLocked: boolean
+}
+
+export const InputStep = ({
+  context,
+  send: _send,
+  rates,
+  isLoadingRates,
+  ratesError,
+  sellAssetBalance,
+  buyAssetBalance,
+  isSellBalanceLoading,
+  isBuyBalanceLoading,
+  sellUsdValue,
+  buyUsdValue,
+  sellChainInfo,
+  buyChainInfo,
+  displayRate,
+  walletAddress,
+  bitcoinAddress,
+  solanaAddress,
+  defaultReceiveAddress,
+  buyAssetUsdPrice,
+  onOpenTokenModal,
+  onOpenAddressModal,
+  enableWalletConnection: _enableWalletConnection,
+  onConnectWallet: _onConnectWallet,
+  bitcoinState,
+  solanaState,
+  isQuoting,
+  isExecuting,
+  effectiveReceiveAddress,
+  isCustomAddress,
+  sellAmount,
+  onSellAmountChange,
+  onSwapTokens,
+  onSelectRate,
+  onButtonClick,
+  sellAmountBaseUnit,
+  networkFeeDisplay,
+  sellBalanceFiatValue,
+  buyBalanceFiatValue,
+  isBuyAssetLocked,
+}: InputStepProps) => {
+  const { sellAsset, buyAsset, selectedRate, isSellAssetEvm, isSellAssetUtxo, isSellAssetSolana } =
+    context
+
+  const canExecuteDirectly = isSellAssetEvm
+  const canExecuteUtxo = isSellAssetUtxo
+  const canExecuteSolana = isSellAssetSolana
+  const isUnsupportedChain = !isSellAssetEvm && !isSellAssetUtxo && !isSellAssetSolana
+
+  const isBitcoinConnected = !!bitcoinAddress
+  const isSolanaConnected = !!solanaAddress
+
+  const buyAmount = displayRate?.buyAmountCryptoBaseUnit
+
+  const buttonText = useMemo(() => {
+    if (isSellAssetUtxo && canExecuteUtxo) {
+      if (!sellAmount) return 'Enter an amount'
+      if (!isBitcoinConnected) return 'Connect Bitcoin Wallet'
+      if (!effectiveReceiveAddress) return 'Enter receive address'
+      if (bitcoinState.isLoading || isExecuting) return 'Executing...'
+      if (isLoadingRates) return 'Finding rates...'
+      if (ratesError) return 'No routes available'
+      if (!rates?.length) return 'No routes found'
+      return 'Swap'
+    }
+    if (isSellAssetSolana && canExecuteSolana) {
+      if (!sellAmount) return 'Enter an amount'
+      if (!isSolanaConnected) return 'Connect Solana Wallet'
+      if (!effectiveReceiveAddress) return 'Enter receive address'
+      if (solanaState.isLoading || isExecuting) return 'Executing...'
+      if (isLoadingRates) return 'Finding rates...'
+      if (ratesError) return 'No routes available'
+      if (!rates?.length) return 'No routes found'
+      return 'Swap'
+    }
+    if (!isSellAssetEvm) return 'Proceed on ShapeShift'
+    if (!sellAmount) return 'Enter an amount'
+    if (!walletAddress && canExecuteDirectly) return 'Connect Wallet'
+    if (!effectiveReceiveAddress) return 'Enter receive address'
+    if (isLoadingRates) return 'Finding rates...'
+    if (ratesError) return 'No routes available'
+    if (!rates?.length) return 'No routes found'
+    if (isExecuting) return 'Executing...'
+    return 'Swap'
+  }, [
+    walletAddress,
+    canExecuteDirectly,
+    canExecuteUtxo,
+    canExecuteSolana,
+    isSellAssetEvm,
+    isSellAssetUtxo,
+    isSellAssetSolana,
+    isBitcoinConnected,
+    isSolanaConnected,
+    bitcoinState.isLoading,
+    solanaState.isLoading,
+    sellAmount,
+    isLoadingRates,
+    ratesError,
+    rates,
+    isExecuting,
+    effectiveReceiveAddress,
+  ])
+
+  const isButtonDisabled = useMemo(() => {
+    if (isUnsupportedChain) return false
+
+    if (!sellAmount || isLoadingRates || ratesError || !rates?.length || isExecuting) {
+      return true
+    }
+
+    if (!effectiveReceiveAddress) {
+      return true
+    }
+
+    if (isSellAssetUtxo && canExecuteUtxo) {
+      return !isBitcoinConnected || bitcoinState.isLoading
+    }
+
+    if (isSellAssetSolana && canExecuteSolana) {
+      return !isSolanaConnected || solanaState.isLoading
+    }
+
+    return false
+  }, [
+    isUnsupportedChain,
+    isSellAssetUtxo,
+    isSellAssetSolana,
+    canExecuteUtxo,
+    canExecuteSolana,
+    isBitcoinConnected,
+    isSolanaConnected,
+    bitcoinState.isLoading,
+    solanaState.isLoading,
+    sellAmount,
+    isLoadingRates,
+    ratesError,
+    rates,
+    isExecuting,
+    effectiveReceiveAddress,
+  ])
+
+  return (
+    <>
+      <div className='ssw-swap-container'>
+        <div className='ssw-token-section ssw-sell'>
+          <div className='ssw-section-header'>
+            <span className='ssw-section-label'>Sell</span>
+            {walletAddress && isSellAssetEvm && (
+              <span className='ssw-wallet-badge'>{truncateAddress(walletAddress)}</span>
+            )}
+            {bitcoinAddress && isSellAssetUtxo && (
+              <span className='ssw-wallet-badge'>{truncateAddress(bitcoinAddress)}</span>
+            )}
+            {solanaAddress && isSellAssetSolana && (
+              <span className='ssw-wallet-badge'>{truncateAddress(solanaAddress)}</span>
+            )}
+          </div>
+
+          <div className='ssw-input-row'>
+            <input
+              type='text'
+              className='ssw-amount-input'
+              placeholder='0'
+              value={sellAmount}
+              onChange={e => {
+                const raw = e.target.value.replace(/[^0-9.]/g, '')
+                const parts = raw.split('.')
+                const sanitized = parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : raw
+                onSellAmountChange(sanitized)
+              }}
+            />
+            <button
+              className='ssw-token-btn'
+              onClick={() => onOpenTokenModal('sell')}
+              type='button'
+            >
+              {sellAsset.icon ? (
+                <img src={sellAsset.icon} alt={sellAsset.symbol} className='ssw-token-icon' />
+              ) : (
+                <div className='ssw-token-icon-placeholder'>{sellAsset.symbol.charAt(0)}</div>
+              )}
+              <div className='ssw-token-info'>
+                <span className='ssw-token-symbol'>{sellAsset.symbol}</span>
+                <span className='ssw-token-chain'>
+                  {sellChainInfo?.name ?? sellAsset.networkName ?? sellAsset.name}
+                </span>
+              </div>
+              <svg
+                width='16'
+                height='16'
+                viewBox='0 0 24 24'
+                fill='none'
+                stroke='currentColor'
+                strokeWidth='2'
+              >
+                <path d='M9 18l6-6-6-6' />
+              </svg>
+            </button>
+          </div>
+
+          <div className='ssw-section-footer'>
+            <span className='ssw-usd-value'>{sellUsdValue}</span>
+            {(walletAddress || bitcoinAddress || solanaAddress) &&
+              (isSellBalanceLoading ? (
+                <span className='ssw-balance-skeleton' />
+              ) : sellAssetBalance ? (
+                <span className='ssw-balance'>
+                  Balance: {sellAssetBalance.balanceFormatted}
+                  {sellBalanceFiatValue && (
+                    <span className='ssw-balance-fiat'> ({sellBalanceFiatValue})</span>
+                  )}
+                </span>
+              ) : null)}
+          </div>
+        </div>
+
+        <div className='ssw-swap-divider'>
+          <button
+            className='ssw-swap-btn'
+            onClick={isBuyAssetLocked ? undefined : onSwapTokens}
+            disabled={isBuyAssetLocked}
+            type='button'
+          >
+            <svg
+              width='16'
+              height='16'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              strokeWidth='2'
+            >
+              <path d='M12 5v14M5 12l7 7 7-7' />
+            </svg>
+          </button>
+        </div>
+
+        <div className='ssw-token-section ssw-buy'>
+          <div className='ssw-section-header'>
+            <span className='ssw-section-label'>Buy</span>
+            {defaultReceiveAddress ? (
+              <span className='ssw-receive-address-btn ssw-receive-address-readonly'>
+                <span className='ssw-receive-address-text'>
+                  {truncateAddress(defaultReceiveAddress, 4)}
+                </span>
+              </span>
+            ) : (
+              <button
+                className={`ssw-receive-address-btn ${isCustomAddress ? 'ssw-custom' : ''}`}
+                onClick={() => onOpenAddressModal()}
+                type='button'
+              >
+                <span className='ssw-receive-address-text'>
+                  {effectiveReceiveAddress
+                    ? truncateAddress(effectiveReceiveAddress, 4)
+                    : 'Enter address'}
+                </span>
+                <svg
+                  width='12'
+                  height='12'
+                  viewBox='0 0 24 24'
+                  fill='none'
+                  stroke='currentColor'
+                  strokeWidth='2'
+                >
+                  <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7' />
+                  <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z' />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          <div className='ssw-input-row'>
+            <input
+              type='text'
+              className='ssw-amount-input'
+              placeholder='0'
+              value={buyAmount ? formatAmount(buyAmount, buyAsset.precision) : ''}
+              readOnly
+            />
+            <button
+              className={`ssw-token-btn${isBuyAssetLocked ? ' ssw-token-btn-locked' : ''}`}
+              onClick={isBuyAssetLocked ? undefined : () => onOpenTokenModal('buy')}
+              disabled={isBuyAssetLocked}
+              type='button'
+            >
+              {buyAsset.icon ? (
+                <img src={buyAsset.icon} alt={buyAsset.symbol} className='ssw-token-icon' />
+              ) : (
+                <div className='ssw-token-icon-placeholder'>{buyAsset.symbol.charAt(0)}</div>
+              )}
+              <div className='ssw-token-info'>
+                <span className='ssw-token-symbol'>{buyAsset.symbol}</span>
+                <span className='ssw-token-chain'>
+                  {buyChainInfo?.name ?? buyAsset.networkName ?? buyAsset.name}
+                </span>
+              </div>
+              {!isBuyAssetLocked && (
+                <svg
+                  width='16'
+                  height='16'
+                  viewBox='0 0 24 24'
+                  fill='none'
+                  stroke='currentColor'
+                  strokeWidth='2'
+                >
+                  <path d='M9 18l6-6-6-6' />
+                </svg>
+              )}
+            </button>
+          </div>
+
+          <div className='ssw-section-footer'>
+            <span className='ssw-usd-value'>{buyUsdValue}</span>
+            {(walletAddress || bitcoinAddress || solanaAddress) &&
+              (isBuyBalanceLoading ? (
+                <span className='ssw-balance-skeleton' />
+              ) : buyAssetBalance ? (
+                <span className='ssw-balance'>
+                  Balance: {buyAssetBalance.balanceFormatted}
+                  {buyBalanceFiatValue && (
+                    <span className='ssw-balance-fiat'> ({buyBalanceFiatValue})</span>
+                  )}
+                </span>
+              ) : null)}
+          </div>
+        </div>
+      </div>
+
+      {sellAmountBaseUnit && sellAmountBaseUnit !== '0' && (rates?.length || isLoadingRates) && (
+        <div className='ssw-quotes'>
+          <QuoteSelector
+            rates={rates ?? []}
+            selectedRate={selectedRate}
+            onSelectRate={onSelectRate}
+            buyAsset={buyAsset}
+            sellAsset={sellAsset}
+            sellAmountBaseUnit={sellAmountBaseUnit}
+            isLoading={isLoadingRates}
+            buyAssetUsdPrice={buyAssetUsdPrice}
+          />
+        </div>
+      )}
+
+      {networkFeeDisplay && (
+        <div className='ssw-network-fee'>
+          <span className='ssw-network-fee-label'>Est. network fee</span>
+          <span className='ssw-network-fee-value'>{networkFeeDisplay}</span>
+        </div>
+      )}
+
+      <button
+        className={`ssw-action-btn ${isUnsupportedChain ? 'ssw-secondary' : ''}`}
+        disabled={isButtonDisabled || isQuoting}
+        onClick={onButtonClick}
+        type='button'
+        style={isQuoting ? { opacity: 0.7 } : undefined}
+      >
+        {isQuoting ? (
+          <>
+            <svg
+              className='ssw-spinner'
+              width='16'
+              height='16'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              strokeWidth='2'
+              style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: '6px' }}
+            >
+              <circle cx='12' cy='12' r='10' opacity='0.25' />
+              <path d='M12 2a10 10 0 0 1 10 10' />
+            </svg>
+            Fetching Quote…
+          </>
+        ) : (
+          buttonText
+        )}
+      </button>
+    </>
+  )
+}

package/src/components/QuoteSelector.css

@@ -0,0 +1,146 @@
+.ssw-quote-selector {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ssw-radius-md);
+  background: var(--ssw-bg-tertiary);
+  border: 1px solid var(--ssw-border);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ssw-quote-selector:hover {
+  border-color: var(--ssw-border-hover);
+  background: var(--ssw-bg-hover);
+}
+
+.ssw-quote-selector.ssw-loading {
+  cursor: default;
+  justify-content: center;
+}
+
+.ssw-quote-selector.ssw-loading:hover {
+  border-color: var(--ssw-border);
+  background: var(--ssw-bg-tertiary);
+}
+
+.ssw-quote-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: var(--ssw-text-secondary);
+  font-size: 14px;
+}
+
+.ssw-spinner-small {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--ssw-border);
+  border-top-color: var(--ssw-accent);
+  border-radius: 50%;
+  animation: ssw-spin 0.8s linear infinite;
+}
+
+@keyframes ssw-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ssw-quote-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+
+.ssw-quote-provider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ssw-quote-provider-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ssw-radius-xs);
+  object-fit: contain;
+  background: var(--ssw-bg-secondary);
+}
+
+.ssw-quote-provider-icon-placeholder {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ssw-radius-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+}
+
+.ssw-quote-provider-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ssw-text-primary);
+}
+
+.ssw-quote-best-tag {
+  padding: 3px 7px;
+  border-radius: var(--ssw-radius-xs);
+  background: var(--ssw-accent);
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.ssw-quote-usd {
+  font-size: 13px;
+  color: var(--ssw-text-secondary);
+  padding-left: 38px;
+}
+
+.ssw-quote-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.ssw-quote-amount-row {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+
+.ssw-quote-amount {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--ssw-text-primary);
+}
+
+.ssw-quote-symbol {
+  font-size: 13px;
+  color: var(--ssw-text-secondary);
+  font-weight: 500;
+}
+
+.ssw-quote-more {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 12px;
+  color: var(--ssw-accent);
+  font-weight: 500;
+}
+
+.ssw-quote-more svg {
+  opacity: 0.9;
+}

package/src/components/QuoteSelector.tsx

@@ -0,0 +1,137 @@
+import './QuoteSelector.css'
+
+import { useCallback, useMemo, useState } from 'react'
+
+import { getSwapperColor, getSwapperIcon } from '../constants/swappers'
+import { formatUsdValue } from '../hooks/useMarketData'
+import type { Asset, TradeRate } from '../types'
+import { formatAmount } from '../types'
+import { QuotesModal } from './QuotesModal'
+
+type QuoteSelectorProps = {
+  rates: TradeRate[]
+  selectedRate: TradeRate | null
+  onSelectRate: (rate: TradeRate) => void
+  buyAsset: Asset
+  sellAsset: Asset
+  sellAmountBaseUnit: string
+  isLoading: boolean
+  buyAssetUsdPrice?: string
+}
+
+export const QuoteSelector = ({
+  rates,
+  selectedRate,
+  onSelectRate,
+  buyAsset,
+  sellAsset,
+  sellAmountBaseUnit,
+  isLoading,
+  buyAssetUsdPrice,
+}: QuoteSelectorProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const bestRate = useMemo(() => rates[0], [rates])
+  const alternativeRatesCount = useMemo(() => Math.max(0, rates.length - 1), [rates])
+
+  const handleOpenModal = useCallback(() => {
+    if (rates.length > 0) {
+      setIsModalOpen(true)
+    }
+  }, [rates.length])
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false)
+  }, [])
+
+  const handleSelectRate = useCallback(
+    (rate: TradeRate) => {
+      onSelectRate(rate)
+    },
+    [onSelectRate],
+  )
+
+  if (isLoading) {
+    return (
+      <div className='ssw-quote-selector ssw-loading'>
+        <div className='ssw-quote-loading'>
+          <div className='ssw-spinner-small' />
+          <span>Finding best rates...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (!bestRate) {
+    return null
+  }
+
+  const displayRate = selectedRate ?? bestRate
+  const buyAmount = displayRate.buyAmountCryptoBaseUnit ?? '0'
+  const swapperIcon = getSwapperIcon(displayRate.swapperName)
+  const swapperColor = getSwapperColor(displayRate.swapperName)
+  const formattedBuyAmount = formatAmount(buyAmount, buyAsset.precision)
+  const usdValue = formatUsdValue(buyAmount, buyAsset.precision, buyAssetUsdPrice)
+
+  return (
+    <>
+      <button className='ssw-quote-selector' onClick={handleOpenModal} type='button'>
+        <div className='ssw-quote-left'>
+          <div className='ssw-quote-provider'>
+            {swapperIcon ? (
+              <img
+                src={swapperIcon}
+                alt={displayRate.swapperName}
+                className='ssw-quote-provider-icon'
+              />
+            ) : (
+              <div
+                className='ssw-quote-provider-icon-placeholder'
+                style={{ backgroundColor: swapperColor }}
+              >
+                {displayRate.swapperName.charAt(0)}
+              </div>
+            )}
+            <span className='ssw-quote-provider-name'>{displayRate.swapperName}</span>
+            {displayRate === bestRate && <span className='ssw-quote-best-tag'>Best</span>}
+          </div>
+          <span className='ssw-quote-usd'>{usdValue}</span>
+        </div>
+
+        <div className='ssw-quote-right'>
+          <div className='ssw-quote-amount-row'>
+            <span className='ssw-quote-amount'>{formattedBuyAmount}</span>
+            <span className='ssw-quote-symbol'>{buyAsset.symbol}</span>
+          </div>
+          {alternativeRatesCount > 0 && (
+            <span className='ssw-quote-more'>
+              +{alternativeRatesCount} more
+              <svg
+                width='12'
+                height='12'
+                viewBox='0 0 24 24'
+                fill='none'
+                stroke='currentColor'
+                strokeWidth='2.5'
+              >
+                <path d='M9 18l6-6-6-6' />
+              </svg>
+            </span>
+          )}
+        </div>
+      </button>
+
+      <QuotesModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        rates={rates}
+        selectedRate={selectedRate}
+        onSelectRate={handleSelectRate}
+        buyAsset={buyAsset}
+        sellAsset={sellAsset}
+        sellAmountBaseUnit={sellAmountBaseUnit}
+        buyAssetUsdPrice={buyAssetUsdPrice}
+      />
+    </>
+  )
+}