@shapeshiftoss/swap-widget 0.0.2

package/src/components/QuotesModal.css

@@ -0,0 +1,250 @@
+.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

@@ -0,0 +1,182 @@
+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

@@ -0,0 +1,145 @@
+.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;
+}