@shapeshiftoss/swap-widget 0.0.2 → 0.2.0

package/src/components/SettingsModal.tsx

@@ -1,180 +0,0 @@
-import './SettingsModal.css'
-
-import { useCallback, useEffect, useState } from 'react'
-
-const SLIPPAGE_PRESETS = ['0.1', '0.5', '1.0']
-
-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 SettingsModalProps = {
-  isOpen: boolean
-  onClose: () => void
-  slippage: string
-  onSlippageChange: (slippage: string) => void
-}
-
-export const SettingsModal = ({
-  isOpen,
-  onClose,
-  slippage,
-  onSlippageChange,
-}: SettingsModalProps) => {
-  useLockBodyScroll(isOpen)
-  const [customSlippage, setCustomSlippage] = useState('')
-  const [isCustom, setIsCustom] = useState(!SLIPPAGE_PRESETS.includes(slippage))
-
-  const handlePresetClick = useCallback(
-    (preset: string) => {
-      setIsCustom(false)
-      setCustomSlippage('')
-      onSlippageChange(preset)
-    },
-    [onSlippageChange],
-  )
-
-  const handleCustomChange = useCallback(
-    (value: string) => {
-      const sanitized = value.replace(/[^0-9.]/g, '')
-      const parts = sanitized.split('.')
-      const formatted = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join('')}` : sanitized
-
-      setCustomSlippage(formatted)
-      setIsCustom(true)
-
-      const numValue = parseFloat(formatted)
-      if (!isNaN(numValue) && numValue > 0 && numValue <= 50) {
-        onSlippageChange(formatted)
-      }
-    },
-    [onSlippageChange],
-  )
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) {
-        onClose()
-      }
-    },
-    [onClose],
-  )
-
-  if (!isOpen) return null
-
-  const currentSlippageNum = parseFloat(slippage)
-  const isHighSlippage = currentSlippageNum > 1
-  const isVeryHighSlippage = currentSlippageNum > 5
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div
-      className='ssw-modal-backdrop'
-      onClick={handleBackdropClick}
-      onKeyDown={e => e.key === 'Escape' && onClose()}
-      role='dialog'
-      aria-modal='true'
-      aria-labelledby='settings-modal-title'
-    >
-      <div className='ssw-settings-modal'>
-        <div className='ssw-modal-header'>
-          <h2 id='settings-modal-title' className='ssw-modal-title'>
-            Settings
-          </h2>
-          <button className='ssw-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-settings-content'>
-          <div className='ssw-settings-section'>
-            <div className='ssw-settings-label'>
-              <span>Slippage Tolerance</span>
-              <button
-                className='ssw-info-btn'
-                type='button'
-                title="Maximum price difference you're willing to accept"
-              >
-                <svg
-                  width='14'
-                  height='14'
-                  viewBox='0 0 24 24'
-                  fill='none'
-                  stroke='currentColor'
-                  strokeWidth='2'
-                >
-                  <circle cx='12' cy='12' r='10' />
-                  <path d='M12 16v-4M12 8h.01' />
-                </svg>
-              </button>
-            </div>
-
-            <div className='ssw-slippage-options'>
-              {SLIPPAGE_PRESETS.map(preset => (
-                <button
-                  key={preset}
-                  className={`ssw-slippage-btn ${
-                    !isCustom && slippage === preset ? 'ssw-selected' : ''
-                  }`}
-                  onClick={() => handlePresetClick(preset)}
-                  type='button'
-                >
-                  {preset}%
-                </button>
-              ))}
-              <div className={`ssw-slippage-custom ${isCustom ? 'ssw-selected' : ''}`}>
-                <input
-                  type='text'
-                  placeholder='Custom'
-                  value={isCustom ? customSlippage || slippage : ''}
-                  onChange={e => handleCustomChange(e.target.value)}
-                  onFocus={() => {
-                    setIsCustom(true)
-                    if (!customSlippage) setCustomSlippage(slippage)
-                  }}
-                />
-                <span className='ssw-slippage-suffix'>%</span>
-              </div>
-            </div>
-
-            {isHighSlippage && (
-              <div className={`ssw-slippage-warning ${isVeryHighSlippage ? 'ssw-error' : ''}`}>
-                <svg
-                  width='16'
-                  height='16'
-                  viewBox='0 0 24 24'
-                  fill='none'
-                  stroke='currentColor'
-                  strokeWidth='2'
-                >
-                  <path d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01' />
-                </svg>
-                <span>
-                  {isVeryHighSlippage
-                    ? 'Very high slippage. Your transaction may be frontrun.'
-                    : 'High slippage may result in unfavorable rates.'}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/StatusStep.tsx

@@ -1,139 +0,0 @@
-import { useMemo } from 'react'
-
-import type { SwapMachineContext, SwapMachineEvent } from '../machines/types'
-
-type StatusStepProps = {
-  context: SwapMachineContext
-  send: (event: SwapMachineEvent) => void
-  isPolling: boolean
-  isComplete: boolean
-  isError: boolean
-}
-
-const ExplorerLink = ({ url }: { url: string }) => (
-  <a href={url} target='_blank' rel='noopener noreferrer' className='ssw-step-explorer-link'>
-    View on Explorer
-    <svg
-      width='12'
-      height='12'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-    >
-      <path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3' />
-    </svg>
-  </a>
-)
-
-export const StatusStep = ({ context, send, isPolling, isComplete, isError }: StatusStepProps) => {
-  const { sellAsset, buyAsset, txHash, error, retryCount, isSellAssetUtxo, isSellAssetSolana } =
-    context
-
-  const explorerUrl = useMemo(() => {
-    if (!txHash) return undefined
-    if (isSellAssetUtxo) return `https://mempool.space/tx/${txHash}`
-    if (isSellAssetSolana) return `https://solscan.io/tx/${txHash}`
-    return `${sellAsset.explorerTxLink ?? 'https://etherscan.io/tx/'}${txHash}`
-  }, [txHash, isSellAssetUtxo, isSellAssetSolana, sellAsset.explorerTxLink])
-
-  const truncatedError = useMemo(
-    () => (error && error.length > 100 ? `${error.slice(0, 100)}…` : error),
-    [error],
-  )
-
-  return (
-    <div className='ssw-step-screen'>
-      {isPolling && (
-        <>
-          <div className='ssw-step-icon-circle ssw-ic-accent'>
-            <svg
-              className='ssw-spinner'
-              width='32'
-              height='32'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-            >
-              <circle cx='12' cy='12' r='10' opacity='0.25' />
-              <path d='M12 2a10 10 0 0 1 10 10' />
-            </svg>
-          </div>
-          <div className='ssw-step-title'>Confirming Transaction</div>
-          <div className='ssw-step-subtitle'>Your swap is being processed…</div>
-          {explorerUrl && <ExplorerLink url={explorerUrl} />}
-        </>
-      )}
-
-      {isComplete && (
-        <>
-          <div className='ssw-step-icon-circle ssw-ic-success'>
-            <svg
-              width='32'
-              height='32'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2.5'
-            >
-              <path d='M20 6L9 17l-5-5' />
-            </svg>
-          </div>
-          <div className='ssw-step-title'>Swap Complete!</div>
-          <div className='ssw-step-subtitle'>
-            Swapped {sellAsset.symbol} for {buyAsset.symbol}
-          </div>
-          {explorerUrl && <ExplorerLink url={explorerUrl} />}
-          <div className='ssw-step-actions'>
-            <button
-              className='ssw-action-btn'
-              onClick={() => send({ type: 'RESET' })}
-              type='button'
-            >
-              New Swap
-            </button>
-          </div>
-        </>
-      )}
-
-      {isError && (
-        <>
-          <div className='ssw-step-icon-circle ssw-ic-error'>
-            <svg
-              width='32'
-              height='32'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-            >
-              <circle cx='12' cy='12' r='10' />
-              <path d='M15 9l-6 6M9 9l6 6' />
-            </svg>
-          </div>
-          <div className='ssw-step-title'>Transaction Failed</div>
-          <div className='ssw-step-subtitle'>{truncatedError ?? 'Something went wrong'}</div>
-          <div className='ssw-step-actions'>
-            {retryCount < 3 && (
-              <button
-                className='ssw-action-btn'
-                onClick={() => send({ type: 'RETRY' })}
-                type='button'
-              >
-                Retry
-              </button>
-            )}
-            <button
-              className='ssw-action-btn ssw-secondary'
-              onClick={() => send({ type: 'RESET' })}
-              type='button'
-            >
-              Start Over
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}