@shapeshiftoss/swap-widget 0.0.2 → 0.2.0

package/src/demo/App.tsx

@@ -1,481 +0,0 @@
-import './App.css'
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { useCallback, useMemo, useState } from 'react'
-
-import { SwapWidget } from '../components/SwapWidget'
-import type { ThemeConfig } from '../types'
-
-const PROJECT_ID = 'f58c0242def84c3b9befe9b1e6086bbd'
-
-const queryClient = new QueryClient()
-
-type ThemeColors = {
-  bg: string
-  card: string
-  accent: string
-  borderColor?: string
-  borderRadius?: string
-  buttonVariant?: 'filled' | 'outline'
-}
-
-const THEME_PRESETS: {
-  name: string
-  dark: ThemeColors
-  light: ThemeColors
-}[] = [
-  {
-    name: 'Blue',
-    dark: { bg: '#0a0a14', card: '#12121c', accent: '#3861fb' },
-    light: { bg: '#f8f9fc', card: '#ffffff', accent: '#3861fb' },
-  },
-  {
-    name: 'Rose',
-    dark: { bg: '#140a0f', card: '#1c1218', accent: '#f43f5e' },
-    light: { bg: '#fef2f4', card: '#ffffff', accent: '#f43f5e' },
-  },
-  {
-    name: 'Purple',
-    dark: { bg: '#0e0a14', card: '#1a1424', accent: '#a855f7' },
-    light: { bg: '#faf5ff', card: '#ffffff', accent: '#a855f7' },
-  },
-  {
-    name: 'Cyan',
-    dark: { bg: '#0a1214', card: '#141d20', accent: '#06b6d4' },
-    light: { bg: '#f0fdff', card: '#ffffff', accent: '#06b6d4' },
-  },
-  {
-    name: 'Green',
-    dark: { bg: '#0a140e', card: '#141c18', accent: '#10b981' },
-    light: { bg: '#f0fdf6', card: '#ffffff', accent: '#10b981' },
-  },
-  {
-    name: 'Orange',
-    dark: { bg: '#14100a', card: '#1c1814', accent: '#f97316' },
-    light: { bg: '#fff8f3', card: '#ffffff', accent: '#f97316' },
-  },
-  {
-    name: 'Stucco',
-    dark: {
-      bg: '#0d1117',
-      card: '#0d1117',
-      accent: '#bea989',
-      borderColor: '#2a2520',
-      borderRadius: '6',
-      buttonVariant: 'outline' as const,
-    },
-    light: {
-      bg: '#f5f3ee',
-      card: '#f5f3ee',
-      accent: '#b8941f',
-      borderColor: '#d4cfc7',
-      borderRadius: '6',
-      buttonVariant: 'outline' as const,
-    },
-  },
-]
-
-type DemoContentProps = {
-  theme: 'light' | 'dark'
-  setTheme: (theme: 'light' | 'dark') => void
-}
-
-const DemoContent = ({ theme, setTheme }: DemoContentProps) => {
-  const [showCustomizer, setShowCustomizer] = useState(true)
-
-  const [darkColors, setDarkColors] = useState<ThemeColors>({
-    bg: '#0a0a14',
-    card: '#12121c',
-    accent: '#3861fb',
-  })
-
-  const [lightColors, setLightColors] = useState<ThemeColors>({
-    bg: '#f8f9fc',
-    card: '#ffffff',
-    accent: '#3861fb',
-  })
-
-  const currentColors = theme === 'dark' ? darkColors : lightColors
-  const setCurrentColors = theme === 'dark' ? setDarkColors : setLightColors
-
-  const themeConfig: ThemeConfig = useMemo(
-    () => ({
-      mode: theme,
-      accentColor: currentColors.accent,
-      backgroundColor: currentColors.bg,
-      cardColor: currentColors.card,
-      borderColor: currentColors.borderColor,
-      borderRadius: currentColors.borderRadius,
-      buttonVariant: currentColors.buttonVariant,
-    }),
-    [theme, currentColors],
-  )
-
-  const applyPreset = (preset: (typeof THEME_PRESETS)[0]) => {
-    setDarkColors(preset.dark)
-    setLightColors(preset.light)
-  }
-
-  const [copied, setCopied] = useState(false)
-
-  const copyConfig = useCallback(() => {
-    const formatColors = (colors: ThemeColors, mode: string) => {
-      const lines = [
-        `    mode: "${mode}",`,
-        `    backgroundColor: "${colors.bg}",`,
-        `    cardColor: "${colors.card}",`,
-        `    accentColor: "${colors.accent}",`,
-      ]
-      if (colors.borderColor) lines.push(`    borderColor: "${colors.borderColor}",`)
-      if (colors.borderRadius) lines.push(`    borderRadius: "${colors.borderRadius}",`)
-      if (colors.buttonVariant) lines.push(`    buttonVariant: "${colors.buttonVariant}",`)
-      return lines.join('\n')
-    }
-
-    const code = `const themeConfig = {
-  dark: {
-${formatColors(darkColors, 'dark')}
-  },
-  light: {
-${formatColors(lightColors, 'light')}
-  },
-};
-
-// Usage:
-<SwapWidget theme={themeConfig.dark} />
-// or
-<SwapWidget theme={themeConfig.light} />`
-
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    })
-  }, [darkColors, lightColors])
-
-  const handleSwapSuccess = (txHash: string) => {
-    console.log('Swap successful:', txHash)
-  }
-
-  const handleSwapError = (error: Error) => {
-    console.error('Swap failed:', error)
-  }
-
-  const demoStyle = useMemo(
-    () =>
-      ({
-        '--demo-page-bg': currentColors.bg,
-        '--demo-page-accent': currentColors.accent,
-      }) as React.CSSProperties,
-    [currentColors],
-  )
-
-  return (
-    <div className={`demo-app ${theme}`} style={demoStyle}>
-      <header className='demo-header'>
-        <a
-          href='https://shapeshift.com'
-          className='demo-logo'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <svg width='28' height='28' viewBox='0 0 57 62' fill='currentColor'>
-            <path d='M51.67 5.1L48.97 21.3L39.37 10L51.67 5.1ZM49.03 28.27L51.43 37.14L33.06 42.2L49.03 28.27ZM9.03 23.8L18.88 10.93H35.99L46.92 23.8H9.03ZM45.66 26.99L27.85 42.53L9.7 26.99H45.66ZM15.58 10.01L6.78 21.51L4.08 5.17L15.58 10.01ZM22.57 42.2L4.02 37.15L6.56 28.48L22.57 42.2ZM25.99 46.43L22.49 50.28C19.53 47.46 16.26 44.96 12.78 42.83L25.99 46.43ZM42.98 42.77C39.5 44.94 36.24 47.47 33.29 50.32L29.72 46.42L42.98 42.77ZM55.73 0.06L36.42 7.75H18.42L0 0L4.18 25.3L0.17 38.99L10.65 45.26C15.61 48.23 20.06 51.94 23.86 56.3L27.94 60.97L32.23 56.06C35.9 51.84 40.18 48.22 44.95 45.29L55.23 38.99L51.52 25.31L55.73 0.06Z' />
-          </svg>
-          <span className='demo-logo-text'>ShapeShift</span>
-        </a>
-
-        <div className='demo-header-actions'>
-          <button
-            className='demo-customize-btn'
-            onClick={() => setShowCustomizer(!showCustomizer)}
-            type='button'
-          >
-            <svg
-              width='18'
-              height='18'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-            >
-              <circle cx='12' cy='12' r='3' />
-              <path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z' />
-            </svg>
-            Customize
-          </button>
-        </div>
-      </header>
-
-      <main className='demo-main'>
-        <div className='demo-content'>
-          <div className='demo-hero'>
-            <h1 className='demo-title'>Swap Widget</h1>
-            <p className='demo-subtitle'>
-              Embeddable multi-chain swap widget powered by ShapeShift
-            </p>
-          </div>
-
-          <div className='demo-layout'>
-            {showCustomizer && (
-              <div className='demo-customizer'>
-                <h3 className='demo-customizer-title'>Customize Widget</h3>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Presets</span>
-                  <div className='demo-preset-grid'>
-                    {THEME_PRESETS.map(preset => {
-                      const previewColors = theme === 'dark' ? preset.dark : preset.light
-                      return (
-                        <button
-                          key={preset.name}
-                          className='demo-preset-btn'
-                          onClick={() => applyPreset(preset)}
-                          title={preset.name}
-                          type='button'
-                        >
-                          <div
-                            className='demo-preset-preview'
-                            style={{ background: previewColors.bg }}
-                          >
-                            <div
-                              className='demo-preset-card'
-                              style={{ background: previewColors.card }}
-                            />
-                            <div
-                              className='demo-preset-accent'
-                              style={{ background: previewColors.accent }}
-                            />
-                          </div>
-                          <span className='demo-preset-name'>{preset.name}</span>
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Theme</span>
-                  <div className='demo-theme-toggle'>
-                    <button
-                      className={`demo-theme-btn ${theme === 'light' ? 'active' : ''}`}
-                      onClick={() => setTheme('light')}
-                      type='button'
-                    >
-                      <svg
-                        width='16'
-                        height='16'
-                        viewBox='0 0 24 24'
-                        fill='none'
-                        stroke='currentColor'
-                        strokeWidth='2'
-                      >
-                        <circle cx='12' cy='12' r='5' />
-                        <path d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42' />
-                      </svg>
-                      Light
-                    </button>
-                    <button
-                      className={`demo-theme-btn ${theme === 'dark' ? 'active' : ''}`}
-                      onClick={() => setTheme('dark')}
-                      type='button'
-                    >
-                      <svg
-                        width='16'
-                        height='16'
-                        viewBox='0 0 24 24'
-                        fill='none'
-                        stroke='currentColor'
-                        strokeWidth='2'
-                      >
-                        <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' />
-                      </svg>
-                      Dark
-                    </button>
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Background Color</span>
-                  <div className='demo-color-input-row'>
-                    <input
-                      type='color'
-                      value={currentColors.bg}
-                      onChange={e => setCurrentColors(c => ({ ...c, bg: e.target.value }))}
-                      className='demo-color-picker'
-                    />
-                    <input
-                      type='text'
-                      value={currentColors.bg}
-                      onChange={e => setCurrentColors(c => ({ ...c, bg: e.target.value }))}
-                      className='demo-color-text'
-                    />
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Card Color</span>
-                  <div className='demo-color-input-row'>
-                    <input
-                      type='color'
-                      value={currentColors.card}
-                      onChange={e =>
-                        setCurrentColors(c => ({
-                          ...c,
-                          card: e.target.value,
-                        }))
-                      }
-                      className='demo-color-picker'
-                    />
-                    <input
-                      type='text'
-                      value={currentColors.card}
-                      onChange={e =>
-                        setCurrentColors(c => ({
-                          ...c,
-                          card: e.target.value,
-                        }))
-                      }
-                      className='demo-color-text'
-                    />
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Accent Color</span>
-                  <div className='demo-color-input-row'>
-                    <input
-                      type='color'
-                      value={currentColors.accent}
-                      onChange={e =>
-                        setCurrentColors(c => ({
-                          ...c,
-                          accent: e.target.value,
-                        }))
-                      }
-                      className='demo-color-picker'
-                    />
-                    <input
-                      type='text'
-                      value={currentColors.accent}
-                      onChange={e =>
-                        setCurrentColors(c => ({
-                          ...c,
-                          accent: e.target.value,
-                        }))
-                      }
-                      className='demo-color-text'
-                    />
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Border Radius</span>
-                  <div className='demo-color-input-row'>
-                    <input
-                      type='range'
-                      min='0'
-                      max='20'
-                      value={currentColors.borderRadius ?? '16'}
-                      onChange={e =>
-                        setCurrentColors(c => ({ ...c, borderRadius: e.target.value }))
-                      }
-                      className='demo-range-input'
-                    />
-                    <input
-                      type='text'
-                      value={`${currentColors.borderRadius ?? '16'}px`}
-                      readOnly
-                      className='demo-color-text'
-                      style={{ width: 60 }}
-                    />
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <span className='demo-customizer-label'>Button Style</span>
-                  <div className='demo-theme-toggle'>
-                    <button
-                      className={`demo-theme-btn ${
-                        currentColors.buttonVariant !== 'outline' ? 'active' : ''
-                      }`}
-                      onClick={() => setCurrentColors(c => ({ ...c, buttonVariant: 'filled' }))}
-                      type='button'
-                    >
-                      Filled
-                    </button>
-                    <button
-                      className={`demo-theme-btn ${
-                        currentColors.buttonVariant === 'outline' ? 'active' : ''
-                      }`}
-                      onClick={() => setCurrentColors(c => ({ ...c, buttonVariant: 'outline' }))}
-                      type='button'
-                    >
-                      Outline
-                    </button>
-                  </div>
-                </div>
-
-                <div className='demo-customizer-section'>
-                  <button className='demo-copy-btn' onClick={copyConfig} type='button'>
-                    {copied ? (
-                      <>
-                        <svg
-                          width='16'
-                          height='16'
-                          viewBox='0 0 24 24'
-                          fill='none'
-                          stroke='currentColor'
-                          strokeWidth='2'
-                        >
-                          <path d='M20 6L9 17l-5-5' />
-                        </svg>
-                        Copied!
-                      </>
-                    ) : (
-                      <>
-                        <svg
-                          width='16'
-                          height='16'
-                          viewBox='0 0 24 24'
-                          fill='none'
-                          stroke='currentColor'
-                          strokeWidth='2'
-                        >
-                          <rect x='9' y='9' width='13' height='13' rx='2' ry='2' />
-                          <path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' />
-                        </svg>
-                        Copy Theme Config
-                      </>
-                    )}
-                  </button>
-                </div>
-              </div>
-            )}
-
-            <div className='demo-widget-container'>
-              <SwapWidget
-                affiliateAddress='0x0000000000000000000000000000000000000001'
-                theme={themeConfig}
-                onSwapSuccess={handleSwapSuccess}
-                onSwapError={handleSwapError}
-                showPoweredBy={true}
-                enableWalletConnection={true}
-                walletConnectProjectId={PROJECT_ID}
-              />
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
-
-export const App = () => {
-  const [theme, setTheme] = useState<'light' | 'dark'>('dark')
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <DemoContent theme={theme} setTheme={setTheme} />
-    </QueryClientProvider>
-  )
-}

package/src/demo/main.tsx

@@ -1,25 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import { App } from './App'
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 30_000,
-      refetchOnWindowFocus: false,
-    },
-  },
-})
-
-const rootElement = document.getElementById('root')
-if (!rootElement) throw new Error('Root element not found')
-
-ReactDOM.createRoot(rootElement).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>,
-)

package/src/hooks/useAssets.ts

@@ -1,180 +0,0 @@
-import { ASSET_NAMESPACE, fromAssetId } from '@shapeshiftoss/caip'
-import { useQuery } from '@tanstack/react-query'
-
-import type { Asset, AssetId, ChainId } from '../types'
-
-const SHAPESHIFT_ASSET_CDN = 'https://app.shapeshift.com'
-const ASSET_QUERY_STALE_TIME = 5 * 60 * 1000
-
-type AssetManifest = {
-  assetData: string
-  relatedAssetIndex: string
-}
-
-type RawAssetData = {
-  byId: Record<AssetId, Asset>
-  ids: AssetId[]
-}
-
-const fetchAssetManifest = async (): Promise<AssetManifest> => {
-  const response = await fetch(`${SHAPESHIFT_ASSET_CDN}/generated/asset-manifest.json`)
-  if (!response.ok) {
-    return { assetData: Date.now().toString(), relatedAssetIndex: '' }
-  }
-  return response.json()
-}
-
-const fetchAssetData = async (): Promise<RawAssetData> => {
-  const manifest = await fetchAssetManifest()
-  const response = await fetch(
-    `${SHAPESHIFT_ASSET_CDN}/generated/generatedAssetData.json?v=${manifest.assetData}`,
-  )
-
-  if (!response.ok) {
-    throw new Error('Failed to fetch asset data')
-  }
-
-  return response.json()
-}
-
-export const useAssetData = () => {
-  return useQuery({
-    queryKey: ['assetData'],
-    queryFn: fetchAssetData,
-    staleTime: ASSET_QUERY_STALE_TIME,
-    gcTime: 30 * 60 * 1000,
-  })
-}
-
-export const useAssets = () => {
-  const { data, ...rest } = useAssetData()
-
-  const assets = data ? data.ids.map(id => data.byId[id]).filter(Boolean) : []
-
-  return { data: assets, ...rest }
-}
-
-export const useAssetsById = () => {
-  const { data, ...rest } = useAssetData()
-  return { data: data?.byId ?? {}, ...rest }
-}
-
-export const useAssetById = (assetId: AssetId | undefined) => {
-  const { data: assetsById, ...rest } = useAssetsById()
-  return {
-    data: assetId ? assetsById[assetId] : undefined,
-    ...rest,
-  }
-}
-
-export type ChainInfo = {
-  chainId: ChainId
-  name: string
-  icon?: string
-  color?: string
-  nativeAsset: Asset
-}
-
-const isNativeAsset = (assetId: string): boolean => {
-  try {
-    const { assetNamespace } = fromAssetId(assetId)
-    return assetNamespace === ASSET_NAMESPACE.slip44
-  } catch {
-    return false
-  }
-}
-
-export const useChains = () => {
-  const { data: assets, ...rest } = useAssets()
-
-  const chains = (() => {
-    if (!assets.length) return []
-
-    const chainMap = new Map<ChainId, ChainInfo>()
-
-    for (const asset of assets) {
-      if (chainMap.has(asset.chainId)) continue
-
-      if (isNativeAsset(asset.assetId)) {
-        chainMap.set(asset.chainId, {
-          chainId: asset.chainId,
-          name: asset.networkName ?? asset.name,
-          icon: (asset as Asset & { networkIcon?: string }).networkIcon ?? asset.icon,
-          color: (asset as Asset & { networkColor?: string }).networkColor ?? asset.color,
-          nativeAsset: asset,
-        })
-      }
-    }
-
-    return Array.from(chainMap.values()).sort((a, b) => a.name.localeCompare(b.name))
-  })()
-
-  return { data: chains, ...rest }
-}
-
-export const useChainInfo = (chainId: ChainId | undefined) => {
-  const { data: chains, ...rest } = useChains()
-  const chainInfo = chainId ? chains.find(c => c.chainId === chainId) : undefined
-  return { data: chainInfo, ...rest }
-}
-
-export const useAssetsByChainId = (chainId: ChainId | undefined) => {
-  const { data: assets, ...rest } = useAssets()
-
-  const filteredAssets = chainId ? assets.filter(asset => asset.chainId === chainId) : assets
-
-  return { data: filteredAssets, ...rest }
-}
-
-const scoreAsset = (asset: Asset, query: string): number => {
-  const lowerQuery = query.toLowerCase()
-  const symbolLower = asset.symbol.toLowerCase()
-  const nameLower = asset.name.toLowerCase()
-
-  let score = 0
-
-  if (symbolLower === lowerQuery) score += 1000
-  else if (symbolLower.startsWith(lowerQuery)) score += 500
-  else if (symbolLower.includes(lowerQuery)) score += 100
-
-  if (nameLower === lowerQuery) score += 800
-  else if (nameLower.startsWith(lowerQuery)) score += 300
-  else if (nameLower.includes(lowerQuery)) score += 50
-
-  if (isNativeAsset(asset.assetId)) score += 200
-
-  return score
-}
-
-export const useAssetSearch = (query: string, chainId?: ChainId) => {
-  const { data: assets, ...rest } = useAssets()
-
-  const searchResults = (() => {
-    let filtered = chainId ? assets.filter(a => a.chainId === chainId) : assets
-
-    if (!query.trim()) {
-      const natives = filtered.filter(a => isNativeAsset(a.assetId))
-      const others = filtered.filter(a => !isNativeAsset(a.assetId)).slice(0, 50 - natives.length)
-      return [...natives, ...others]
-    }
-
-    const lowerQuery = query.toLowerCase()
-
-    const matched = filtered
-      .filter(asset => {
-        return (
-          asset.symbol.toLowerCase().includes(lowerQuery) ||
-          asset.name.toLowerCase().includes(lowerQuery) ||
-          asset.assetId.toLowerCase().includes(lowerQuery)
-        )
-      })
-      .map(asset => ({ asset, score: scoreAsset(asset, query) }))
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 100)
-      .map(item => item.asset)
-
-    return matched
-  })()
-
-  return { data: searchResults, ...rest }
-}