@shapeshiftoss/swap-widget 0.0.2 → 0.2.0

package/src/components/QuoteSelector.tsx

@@ -1,137 +0,0 @@
-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}
-      />
-    </>
-  )
-}

package/src/components/QuotesModal.css

@@ -1,250 +0,0 @@
-.ssw-quotes-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.75);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 20px;
-  animation: ssw-fade-in 0.15s ease;
-}
-
-@keyframes ssw-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.ssw-quotes-modal {
-  width: 100%;
-  max-width: 400px;
-  max-height: 70vh;
-  background: var(--ssw-bg-secondary, #12121c);
-  border-radius: var(--ssw-radius-widget);
-  border: 1px solid var(--ssw-border, rgba(255, 255, 255, 0.08));
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: ssw-slide-up 0.2s ease;
-}
-
-@keyframes ssw-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ssw-quotes-modal-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 20px 20px 16px;
-  flex-shrink: 0;
-}
-
-.ssw-quotes-header-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ssw-quotes-modal-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--ssw-text-primary, #ffffff);
-  margin: 0;
-}
-
-.ssw-quotes-modal-subtitle {
-  font-size: 13px;
-  color: var(--ssw-text-secondary, #a0a0b0);
-}
-
-.ssw-quotes-modal-close {
-  padding: 6px;
-  border: none;
-  background: none;
-  border-radius: var(--ssw-radius-xs);
-  color: var(--ssw-text-muted, #6b6b80);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: -2px -6px 0 0;
-}
-
-.ssw-quotes-modal-close:hover {
-  color: var(--ssw-text-primary, #ffffff);
-  background: var(--ssw-bg-hover, rgba(255, 255, 255, 0.05));
-}
-
-.ssw-quotes-modal-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 12px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ssw-border) transparent;
-}
-
-.ssw-quotes-modal-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.ssw-quotes-modal-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.ssw-quotes-modal-list::-webkit-scrollbar-thumb {
-  background: var(--ssw-border);
-  border-radius: 3px;
-}
-
-.ssw-quotes-modal-list::-webkit-scrollbar-thumb:hover {
-  background: var(--ssw-border-hover);
-}
-
-.ssw-quote-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border: 1px solid transparent;
-  border-radius: var(--ssw-radius-md);
-  background: var(--ssw-bg-tertiary, #1a1a2e);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  text-align: left;
-  width: 100%;
-  gap: 12px;
-}
-
-.ssw-quote-row:hover {
-  background: var(--ssw-bg-hover, rgba(255, 255, 255, 0.05));
-}
-
-.ssw-quote-row.ssw-best {
-  border-color: var(--ssw-accent, #3861fb);
-  background: color-mix(in srgb, var(--ssw-accent, #3861fb) 6%, transparent);
-}
-
-.ssw-quote-row.ssw-best:hover {
-  background: color-mix(in srgb, var(--ssw-accent, #3861fb) 12%, transparent);
-}
-
-.ssw-quote-row.ssw-selected {
-  border-color: var(--ssw-success, #00d395);
-  background: rgba(0, 211, 149, 0.06);
-}
-
-.ssw-quote-row-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-
-.ssw-quote-row-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--ssw-radius-sm);
-  object-fit: contain;
-  background: var(--ssw-bg-secondary, #12121c);
-  flex-shrink: 0;
-}
-
-.ssw-quote-row-icon-placeholder {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--ssw-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  font-weight: 600;
-  color: white;
-  flex-shrink: 0;
-}
-
-.ssw-quote-row-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.ssw-quote-row-name-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.ssw-quote-row-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ssw-text-primary, #ffffff);
-}
-
-.ssw-quote-row-best {
-  padding: 2px 6px;
-  border-radius: var(--ssw-radius-2xs);
-  background: var(--ssw-accent, #3861fb);
-  color: white;
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.ssw-quote-row-diff {
-  padding: 2px 6px;
-  border-radius: var(--ssw-radius-2xs);
-  background: rgba(239, 68, 68, 0.12);
-  color: #ef4444;
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.ssw-quote-row-time {
-  font-size: 12px;
-  color: var(--ssw-text-muted, #6b6b80);
-}
-
-.ssw-quote-row-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.ssw-quote-row-amount {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--ssw-text-primary, #ffffff);
-}
-
-.ssw-quote-row-symbol {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--ssw-text-secondary, #a0a0b0);
-}
-
-.ssw-quote-row-usd {
-  font-size: 12px;
-  color: var(--ssw-text-muted, #6b6b80);
-}

package/src/components/QuotesModal.tsx

@@ -1,182 +0,0 @@
-import './QuotesModal.css'
-
-import { bnOrZero } from '@shapeshiftoss/utils'
-import { useCallback, useEffect, useMemo } from 'react'
-
-import { getSwapperColor, getSwapperIcon } from '../constants/swappers'
-import { formatUsdValue } from '../hooks/useMarketData'
-import type { Asset, TradeRate } from '../types'
-import { formatAmount } from '../types'
-
-const useLockBodyScroll = (isLocked: boolean) => {
-  useEffect(() => {
-    if (!isLocked) return
-    const originalOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = originalOverflow
-    }
-  }, [isLocked])
-}
-
-type QuotesModalProps = {
-  isOpen: boolean
-  onClose: () => void
-  rates: TradeRate[]
-  selectedRate: TradeRate | null
-  onSelectRate: (rate: TradeRate) => void
-  buyAsset: Asset
-  sellAsset: Asset
-  sellAmountBaseUnit: string
-  buyAssetUsdPrice?: string
-}
-
-const calculateSavingsPercent = (bestAmount: string, currentAmount: string): string | null => {
-  const best = bnOrZero(bestAmount)
-  const current = bnOrZero(currentAmount)
-  if (best.isZero()) return null
-  const diff = best.minus(current).div(best).times(100)
-  return diff.gt(0.1) ? diff.toFixed(2) : null
-}
-
-export const QuotesModal = ({
-  isOpen,
-  onClose,
-  rates,
-  selectedRate,
-  onSelectRate,
-  buyAsset,
-  sellAsset,
-  sellAmountBaseUnit,
-  buyAssetUsdPrice,
-}: QuotesModalProps) => {
-  useLockBodyScroll(isOpen)
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) {
-        onClose()
-      }
-    },
-    [onClose],
-  )
-
-  const handleSelectRate = useCallback(
-    (rate: TradeRate) => {
-      onSelectRate(rate)
-      onClose()
-    },
-    [onSelectRate, onClose],
-  )
-
-  const sortedRates = useMemo(() => {
-    return [...rates]
-      .filter(r => !r.error && r.buyAmountCryptoBaseUnit !== '0')
-      .sort((a, b) => {
-        const aAmount = bnOrZero(a.buyAmountCryptoBaseUnit)
-        const bAmount = bnOrZero(b.buyAmountCryptoBaseUnit)
-        return bAmount.minus(aAmount).toNumber()
-      })
-  }, [rates])
-
-  const bestRate = useMemo(() => sortedRates[0], [sortedRates])
-  const bestBuyAmount = bestRate?.buyAmountCryptoBaseUnit ?? '0'
-
-  if (!isOpen) return null
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div
-      className='ssw-quotes-modal-backdrop'
-      onClick={handleBackdropClick}
-      onKeyDown={e => e.key === 'Escape' && onClose()}
-      role='dialog'
-      aria-modal='true'
-      aria-labelledby='quotes-modal-title'
-    >
-      <div className='ssw-quotes-modal'>
-        <div className='ssw-quotes-modal-header'>
-          <div className='ssw-quotes-header-content'>
-            <h2 id='quotes-modal-title' className='ssw-quotes-modal-title'>
-              Select Route
-            </h2>
-            <span className='ssw-quotes-modal-subtitle'>
-              {formatAmount(sellAmountBaseUnit, sellAsset.precision)} {sellAsset.symbol} →{' '}
-              {buyAsset.symbol}
-            </span>
-          </div>
-          <button className='ssw-quotes-modal-close' onClick={onClose} type='button'>
-            <svg
-              width='20'
-              height='20'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-            >
-              <path d='M18 6L6 18M6 6l12 12' />
-            </svg>
-          </button>
-        </div>
-
-        <div className='ssw-quotes-modal-list'>
-          {sortedRates.map((rate, index) => {
-            const buyAmount = rate.buyAmountCryptoBaseUnit ?? '0'
-            const estimatedTime = rate.estimatedExecutionTimeMs
-            const isBest = index === 0
-            const isSelected = selectedRate?.id === rate.id
-            const swapperIcon = getSwapperIcon(rate.swapperName)
-            const swapperColor = getSwapperColor(rate.swapperName)
-            const formattedBuyAmount = formatAmount(buyAmount, buyAsset.precision)
-            const usdValue = formatUsdValue(buyAmount, buyAsset.precision, buyAssetUsdPrice)
-            const savingsPercent = isBest ? null : calculateSavingsPercent(bestBuyAmount, buyAmount)
-            const estimatedSeconds = estimatedTime ? Math.round(estimatedTime / 1000) : 0
-            const hasTime = estimatedSeconds > 0
-
-            return (
-              <button
-                key={rate.id}
-                className={`ssw-quote-row ${isSelected ? 'ssw-selected' : ''} ${
-                  isBest ? 'ssw-best' : ''
-                }`}
-                onClick={() => handleSelectRate(rate)}
-                type='button'
-              >
-                <div className='ssw-quote-row-left'>
-                  {swapperIcon ? (
-                    <img src={swapperIcon} alt={rate.swapperName} className='ssw-quote-row-icon' />
-                  ) : (
-                    <div
-                      className='ssw-quote-row-icon-placeholder'
-                      style={{ backgroundColor: swapperColor }}
-                    >
-                      {rate.swapperName.charAt(0)}
-                    </div>
-                  )}
-                  <div className='ssw-quote-row-info'>
-                    <div className='ssw-quote-row-name-row'>
-                      <span className='ssw-quote-row-name'>{rate.swapperName}</span>
-                      {isBest && <span className='ssw-quote-row-best'>Best</span>}
-                      {savingsPercent && (
-                        <span className='ssw-quote-row-diff'>-{savingsPercent}%</span>
-                      )}
-                    </div>
-                    {hasTime && <span className='ssw-quote-row-time'>~{estimatedSeconds}s</span>}
-                  </div>
-                </div>
-
-                <div className='ssw-quote-row-right'>
-                  <span className='ssw-quote-row-amount'>
-                    {formattedBuyAmount}{' '}
-                    <span className='ssw-quote-row-symbol'>{buyAsset.symbol}</span>
-                  </span>
-                  <span className='ssw-quote-row-usd'>{usdValue}</span>
-                </div>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/SettingsModal.css

@@ -1,145 +0,0 @@
-.ssw-settings-modal {
-  background: var(--ssw-bg-secondary);
-  border-radius: var(--ssw-radius-lg);
-  width: 100%;
-  max-width: 400px;
-  overflow: hidden;
-  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
-  animation: ssw-settings-slide-up 0.2s ease;
-}
-
-@keyframes ssw-settings-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ssw-settings-content {
-  padding: 20px 24px 24px;
-}
-
-.ssw-settings-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.ssw-settings-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ssw-text-secondary);
-}
-
-.ssw-info-btn {
-  background: none;
-  border: none;
-  padding: 2px;
-  cursor: pointer;
-  color: var(--ssw-text-muted);
-  border-radius: 50%;
-  transition: color 0.15s ease;
-}
-
-.ssw-info-btn:hover {
-  color: var(--ssw-text-secondary);
-}
-
-.ssw-slippage-options {
-  display: flex;
-  gap: 8px;
-}
-
-.ssw-slippage-btn {
-  flex: 1;
-  padding: 10px 12px;
-  border: 1px solid var(--ssw-border);
-  border-radius: var(--ssw-radius-sm);
-  background: var(--ssw-bg-tertiary);
-  color: var(--ssw-text-primary);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.ssw-slippage-btn:hover {
-  border-color: var(--ssw-accent);
-}
-
-.ssw-slippage-btn.ssw-selected {
-  background: var(--ssw-accent-light);
-  border-color: var(--ssw-accent);
-  color: var(--ssw-accent);
-}
-
-.ssw-slippage-custom {
-  flex: 1.2;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.ssw-slippage-custom input {
-  width: 100%;
-  padding: 10px 28px 10px 12px;
-  border: 1px solid var(--ssw-border);
-  border-radius: var(--ssw-radius-sm);
-  background: var(--ssw-bg-tertiary);
-  color: var(--ssw-text-primary);
-  font-size: 14px;
-  font-weight: 500;
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-
-.ssw-slippage-custom input:focus {
-  border-color: var(--ssw-accent);
-}
-
-.ssw-slippage-custom input::placeholder {
-  color: var(--ssw-text-muted);
-  font-weight: 400;
-}
-
-.ssw-slippage-custom.ssw-selected input {
-  background: var(--ssw-accent-light);
-  border-color: var(--ssw-accent);
-}
-
-.ssw-slippage-suffix {
-  position: absolute;
-  right: 12px;
-  color: var(--ssw-text-secondary);
-  font-size: 14px;
-  pointer-events: none;
-}
-
-.ssw-slippage-warning {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px;
-  border-radius: var(--ssw-radius-sm);
-  background: rgba(255, 193, 7, 0.1);
-  color: #ffc107;
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.ssw-slippage-warning svg {
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.ssw-slippage-warning.ssw-error {
-  background: rgba(244, 67, 54, 0.1);
-  color: #f44336;
-}