@shapeshiftoss/swap-widget 0.0.2

package/src/demo/App.tsx

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

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

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