@shapeshiftoss/swap-widget 0.0.2

package/src/components/SettingsModal.tsx

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

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