@shapeshiftoss/swap-widget 0.0.2

package/src/components/AddressInputModal.tsx

@@ -0,0 +1,250 @@
+import './AddressInputModal.css'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import type { ChainId } from '../types'
+import { getAddressFormatHint, validateAddress } from '../utils/addressValidation'
+
+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 AddressInputModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  chainId: ChainId
+  chainName: string
+  currentAddress: string
+  onAddressChange: (address: string) => void
+  walletAddress?: string
+}
+
+export const AddressInputModal = ({
+  isOpen,
+  onClose,
+  chainId,
+  chainName,
+  currentAddress,
+  onAddressChange,
+  walletAddress,
+}: AddressInputModalProps) => {
+  useLockBodyScroll(isOpen)
+  const [inputValue, setInputValue] = useState(currentAddress)
+  const [hasInteracted, setHasInteracted] = useState(false)
+  const backdropRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isOpen) {
+      setInputValue(currentAddress)
+      setHasInteracted(false)
+      backdropRef.current?.focus()
+    }
+  }, [isOpen, currentAddress])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  const validation = useMemo(() => {
+    if (!inputValue || !hasInteracted) {
+      return { valid: true, error: undefined }
+    }
+    return validateAddress(inputValue, chainId)
+  }, [inputValue, chainId, hasInteracted])
+
+  const formatHint = useMemo(() => getAddressFormatHint(chainId), [chainId])
+
+  const handleInputChange = useCallback((value: string) => {
+    setInputValue(value)
+    setHasInteracted(true)
+  }, [])
+
+  const handleUseWalletAddress = useCallback(() => {
+    if (walletAddress) {
+      setInputValue(walletAddress)
+      setHasInteracted(true)
+    }
+  }, [walletAddress])
+
+  const handleConfirm = useCallback(() => {
+    const result = validateAddress(inputValue, chainId)
+    if (result.valid) {
+      onAddressChange(inputValue)
+      onClose()
+    }
+  }, [inputValue, chainId, onAddressChange, onClose])
+
+  const handleClear = useCallback(() => {
+    setInputValue('')
+    setHasInteracted(false)
+    onAddressChange('')
+    onClose()
+  }, [onAddressChange, onClose])
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        onClose()
+      }
+    },
+    [onClose],
+  )
+
+  const handleBackdropKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    },
+    [onClose],
+  )
+
+  const isConfirmDisabled = useMemo(() => {
+    if (!inputValue) return true
+    return !validateAddress(inputValue, chainId).valid
+  }, [inputValue, chainId])
+
+  if (!isOpen) return null
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <div
+      ref={backdropRef}
+      className='ssw-modal-backdrop'
+      onClick={handleBackdropClick}
+      onKeyDown={handleBackdropKeyDown}
+      role='dialog'
+      aria-modal='true'
+      aria-labelledby='address-modal-title'
+      tabIndex={-1}
+    >
+      <div className='ssw-address-modal'>
+        <div className='ssw-modal-header'>
+          <h2 id='address-modal-title' className='ssw-modal-title'>
+            Receive Address
+          </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-address-content'>
+          <div className='ssw-address-label'>
+            <span>Enter {chainName} address</span>
+          </div>
+
+          <div
+            className={`ssw-address-input-wrapper ${
+              !validation.valid && hasInteracted ? 'ssw-invalid' : ''
+            }`}
+          >
+            <input
+              type='text'
+              className='ssw-address-input'
+              placeholder={formatHint}
+              value={inputValue}
+              onChange={e => handleInputChange(e.target.value)}
+              autoFocus
+              spellCheck={false}
+              autoComplete='off'
+            />
+            {inputValue && (
+              <button
+                className='ssw-address-clear-btn'
+                onClick={() => {
+                  setInputValue('')
+                  setHasInteracted(false)
+                }}
+                type='button'
+              >
+                <svg
+                  width='16'
+                  height='16'
+                  viewBox='0 0 24 24'
+                  fill='none'
+                  stroke='currentColor'
+                  strokeWidth='2'
+                >
+                  <path d='M18 6L6 18M6 6l12 12' />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          {!validation.valid && hasInteracted && validation.error && (
+            <div className='ssw-address-error'>
+              <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 8v4M12 16h.01' />
+              </svg>
+              <span>{validation.error}</span>
+            </div>
+          )}
+
+          {walletAddress && (
+            <button className='ssw-use-wallet-btn' onClick={handleUseWalletAddress} type='button'>
+              <svg
+                width='16'
+                height='16'
+                viewBox='0 0 24 24'
+                fill='none'
+                stroke='currentColor'
+                strokeWidth='2'
+              >
+                <path d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' />
+                <path d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' />
+              </svg>
+              <span>Use connected wallet</span>
+            </button>
+          )}
+
+          <div className='ssw-address-actions'>
+            <button
+              className='ssw-address-btn ssw-address-btn-secondary'
+              onClick={handleClear}
+              type='button'
+            >
+              Reset to Wallet
+            </button>
+            <button
+              className='ssw-address-btn ssw-address-btn-primary'
+              onClick={handleConfirm}
+              disabled={isConfirmDisabled}
+              type='button'
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ApprovalStep.tsx

@@ -0,0 +1,92 @@
+import type { SwapMachineContext, SwapMachineEvent } from '../machines/types'
+
+type ApprovalStepProps = {
+  context: SwapMachineContext
+  send: (event: SwapMachineEvent) => void
+  isApproving: boolean
+}
+
+export const ApprovalStep = ({ context, send, isApproving }: ApprovalStepProps) => {
+  const { sellAsset, approvalTxHash } = context
+
+  const explorerUrl = approvalTxHash
+    ? `${sellAsset.explorerTxLink ?? 'https://etherscan.io/tx/'}${approvalTxHash}`
+    : undefined
+
+  if (isApproving) {
+    return (
+      <div className='ssw-step-screen'>
+        <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'>Approving {sellAsset.symbol}…</div>
+        <div className='ssw-step-subtitle'>Waiting for wallet confirmation</div>
+        {explorerUrl && (
+          <a
+            href={explorerUrl}
+            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>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className='ssw-step-screen'>
+      <div className='ssw-step-icon-circle ssw-ic-accent'>
+        <svg
+          width='32'
+          height='32'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth='2'
+        >
+          <rect x='3' y='11' width='18' height='11' rx='2' ry='2' />
+          <path d='M7 11V7a5 5 0 0 1 10 0v4' />
+        </svg>
+      </div>
+      <div className='ssw-step-title'>Token Approval Required</div>
+      <div className='ssw-step-subtitle'>
+        Allow the swap contract to use your {sellAsset.symbol}
+      </div>
+      <div className='ssw-step-actions'>
+        <button className='ssw-action-btn' onClick={() => send({ type: 'APPROVE' })} type='button'>
+          Approve {sellAsset.symbol}
+        </button>
+        <button
+          className='ssw-action-btn ssw-secondary'
+          onClick={() => send({ type: 'RESET' })}
+          type='button'
+        >
+          Back
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/ExecutionStep.tsx

@@ -0,0 +1,27 @@
+import type { SwapMachineContext, SwapMachineEvent } from '../machines/types'
+
+type ExecutionStepProps = {
+  context: SwapMachineContext
+  send: (event: SwapMachineEvent) => void
+}
+
+export const ExecutionStep = ({ context: _context, send: _send }: ExecutionStepProps) => (
+  <div className='ssw-step-screen'>
+    <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'>Confirm in Wallet</div>
+    <div className='ssw-step-subtitle'>Please sign the transaction in your wallet</div>
+  </div>
+)