@shapeshiftoss/swap-widget 0.0.2 → 0.2.0

package/src/constants/chains.ts

@@ -1,72 +0,0 @@
-import type { Asset } from '@shapeshiftoss/types'
-import {
-  arbitrum,
-  atom,
-  avax,
-  base,
-  bitcoin,
-  bitcoincash,
-  bnbsmartchain,
-  dogecoin,
-  ethereum,
-  gnosis,
-  hyperevm,
-  katana,
-  litecoin,
-  mayachain,
-  monad,
-  optimism,
-  plasma,
-  polygon,
-  solana,
-  thorchain,
-  worldchain,
-} from '@shapeshiftoss/utils'
-
-import type { ChainId } from '../types'
-
-const BASE_ASSETS_BY_CHAIN_ID: Record<ChainId, Asset> = {
-  [ethereum.chainId]: ethereum,
-  [arbitrum.chainId]: arbitrum,
-  [optimism.chainId]: optimism,
-  [polygon.chainId]: polygon,
-  [base.chainId]: base,
-  [avax.chainId]: avax,
-  [bnbsmartchain.chainId]: bnbsmartchain,
-  [gnosis.chainId]: gnosis,
-  [monad.chainId]: monad,
-  [hyperevm.chainId]: hyperevm,
-  [plasma.chainId]: plasma,
-  [worldchain.chainId]: worldchain,
-  [katana.chainId]: katana,
-  [bitcoin.chainId]: bitcoin,
-  [bitcoincash.chainId]: bitcoincash,
-  [dogecoin.chainId]: dogecoin,
-  [litecoin.chainId]: litecoin,
-  [atom.chainId]: atom,
-  [thorchain.chainId]: thorchain,
-  [mayachain.chainId]: mayachain,
-  [solana.chainId]: solana,
-}
-
-export const getBaseAsset = (chainId: ChainId): Asset | undefined => {
-  return BASE_ASSETS_BY_CHAIN_ID[chainId]
-}
-
-export const getChainName = (chainId: ChainId): string => {
-  return BASE_ASSETS_BY_CHAIN_ID[chainId]?.networkName ?? chainId
-}
-
-export const getChainIcon = (chainId: ChainId): string | undefined => {
-  const asset = BASE_ASSETS_BY_CHAIN_ID[chainId]
-  return asset?.networkIcon ?? asset?.icon
-}
-
-export const getChainColor = (chainId: ChainId): string => {
-  const asset = BASE_ASSETS_BY_CHAIN_ID[chainId]
-  return (asset as Asset & { networkColor?: string })?.networkColor ?? asset?.color ?? '#888888'
-}
-
-export const getExplorerTxLink = (chainId: ChainId): string => {
-  return BASE_ASSETS_BY_CHAIN_ID[chainId]?.explorerTxLink ?? 'https://etherscan.io/tx/'
-}

package/src/constants/defaults.ts

@@ -1,28 +0,0 @@
-import { ethChainId, usdcAssetId } from '@shapeshiftoss/caip'
-import { ethereum } from '@shapeshiftoss/utils'
-
-import type { Asset } from '../types'
-
-export const DEFAULT_SELL_ASSET: Asset = {
-  assetId: ethereum.assetId,
-  chainId: ethereum.chainId,
-  symbol: ethereum.symbol,
-  name: ethereum.name,
-  precision: ethereum.precision,
-  icon: ethereum.icon,
-  networkName: ethereum.networkName,
-  explorer: ethereum.explorer,
-  explorerTxLink: ethereum.explorerTxLink,
-  explorerAddressLink: ethereum.explorerAddressLink,
-}
-
-export const DEFAULT_BUY_ASSET: Asset = {
-  assetId: usdcAssetId,
-  chainId: ethChainId,
-  symbol: 'USDC',
-  name: 'USD Coin',
-  precision: 6,
-  icon: 'https://assets.coingecko.com/coins/images/6319/standard/usdc.png',
-}
-
-export const POLL_INTERVAL_MS = 5000

package/src/constants/swappers.ts

@@ -1,48 +0,0 @@
-import { SwapperName } from '../types'
-
-export const SWAPPER_ICONS: Partial<Record<SwapperName, string>> = {
-  [SwapperName.Thorchain]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/thorchain-icon.png',
-  [SwapperName.Mayachain]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/maya_logo.png',
-  [SwapperName.CowSwap]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/cow-icon.png',
-  [SwapperName.Zrx]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/0x-icon.png',
-  [SwapperName.Portals]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/portals-icon.png',
-  [SwapperName.Chainflip]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/chainflip-icon.png',
-  [SwapperName.Relay]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/relay-icon.svg',
-  [SwapperName.Bebop]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/bebop-icon.png',
-  [SwapperName.Jupiter]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/jupiter-icon.svg',
-  [SwapperName.ButterSwap]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/butterswap.png',
-  [SwapperName.ArbitrumBridge]:
-    'https://raw.githubusercontent.com/shapeshift/web/develop/src/components/MultiHopTrade/components/TradeInput/components/SwapperIcon/arbitrum-bridge-icon.png',
-}
-
-export const SWAPPER_COLORS: Partial<Record<SwapperName, string>> = {
-  [SwapperName.Thorchain]: '#00CCFF',
-  [SwapperName.Mayachain]: '#4169E1',
-  [SwapperName.CowSwap]: '#012d73',
-  [SwapperName.Zrx]: '#000000',
-  [SwapperName.Portals]: '#8B5CF6',
-  [SwapperName.Chainflip]: '#FF4081',
-  [SwapperName.Relay]: '#6366F1',
-  [SwapperName.Bebop]: '#E91E63',
-  [SwapperName.Jupiter]: '#C4A962',
-  [SwapperName.ButterSwap]: '#FFD700',
-  [SwapperName.ArbitrumBridge]: '#28A0F0',
-}
-
-export const getSwapperIcon = (swapperName: SwapperName): string | undefined => {
-  return SWAPPER_ICONS[swapperName]
-}
-
-export const getSwapperColor = (swapperName: SwapperName): string => {
-  return SWAPPER_COLORS[swapperName] ?? '#6366F1'
-}

package/src/constants/viemChains.ts

@@ -1,69 +0,0 @@
-import type { Chain, WalletClient } from 'viem'
-import {
-  arbitrum,
-  avalanche,
-  base,
-  bsc,
-  gnosis,
-  hyperEvm,
-  katana,
-  mainnet,
-  monad,
-  optimism,
-  plasma,
-  polygon,
-} from 'viem/chains'
-
-export const VIEM_CHAINS_BY_ID: Record<number, Chain> = {
-  1: mainnet,
-  10: optimism,
-  56: bsc,
-  100: gnosis,
-  137: polygon,
-  143: monad,
-  999: hyperEvm,
-  8453: base,
-  9745: plasma,
-  42161: arbitrum,
-  43114: avalanche,
-  747474: katana,
-}
-
-export const addChainToWallet = async (client: WalletClient, chain: Chain): Promise<void> => {
-  const { id, name, nativeCurrency, rpcUrls, blockExplorers } = chain
-
-  await client.request({
-    method: 'wallet_addEthereumChain',
-    params: [
-      {
-        chainId: `0x${id.toString(16)}`,
-        chainName: name,
-        nativeCurrency,
-        rpcUrls: rpcUrls.default.http,
-        blockExplorerUrls: blockExplorers?.default ? [blockExplorers.default.url] : undefined,
-      },
-    ],
-  })
-}
-
-export const switchOrAddChain = async (client: WalletClient, chainId: number): Promise<void> => {
-  const chain = VIEM_CHAINS_BY_ID[chainId]
-
-  try {
-    await client.switchChain({ id: chainId })
-  } catch (error) {
-    const switchError = error as { code?: number; message?: string }
-    const isChainNotAddedError =
-      switchError.code === 4902 ||
-      switchError.message?.toLowerCase().includes('unrecognized chain') ||
-      switchError.message?.toLowerCase().includes('chain not added') ||
-      switchError.message?.toLowerCase().includes('try adding the chain')
-
-    if (isChainNotAddedError && chain) {
-      await addChainToWallet(client, chain)
-      await client.switchChain({ id: chainId })
-    } else {
-      throw error
-    }
-  }
-}

package/src/contexts/SwapWalletContext.tsx

@@ -1,25 +0,0 @@
-import { createContext, useContext } from 'react'
-
-import type { UseBitcoinSigningResult } from '../hooks/useBitcoinSigning'
-import type { UseSolanaSigningResult } from '../hooks/useSolanaSigning'
-
-export type SwapWalletContextValue = {
-  walletClient: unknown
-  walletAddress: string | undefined
-  effectiveReceiveAddress: string
-  isCustomAddress: boolean
-  customReceiveAddress: string
-  setCustomReceiveAddress: (address: string) => void
-  bitcoin: UseBitcoinSigningResult
-  solana: UseSolanaSigningResult
-}
-
-const SwapWalletContext = createContext<SwapWalletContextValue | null>(null)
-
-export const SwapWalletProvider = SwapWalletContext.Provider
-
-export const useSwapWallet = (): SwapWalletContextValue => {
-  const ctx = useContext(SwapWalletContext)
-  if (!ctx) throw new Error('useSwapWallet must be used within SwapWalletProvider')
-  return ctx
-}

package/src/demo/App.css

@@ -1,458 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  width: 100%;
-  min-height: 100vh;
-}
-
-.demo-app {
-  width: 100%;
-  min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
-  display: flex;
-  flex-direction: column;
-}
-
-.demo-app.dark {
-  --demo-bg: var(--demo-page-bg, #09090f);
-  --demo-bg-secondary: color-mix(
-    in srgb,
-    var(--demo-page-bg, #09090f),
-    white 5%
-  );
-  --demo-text: #ffffff;
-  --demo-text-secondary: #a0a0b0;
-  --demo-text-muted: #6b6b80;
-  --demo-border: rgba(255, 255, 255, 0.08);
-  --demo-accent: var(--demo-page-accent, #3861fb);
-
-  background: var(--demo-bg);
-  background-image: radial-gradient(
-      ellipse 80% 50% at 50% -20%,
-      color-mix(in srgb, var(--demo-page-accent, #3861fb), transparent 88%),
-      transparent
-    ),
-    radial-gradient(
-      ellipse 60% 40% at 80% 100%,
-      color-mix(in srgb, var(--demo-page-accent, #6366f1), transparent 92%),
-      transparent
-    );
-  color: var(--demo-text);
-}
-
-.demo-app.light {
-  --demo-bg: #f5f5f7;
-  --demo-bg-secondary: #ffffff;
-  --demo-text: #1a1a2e;
-  --demo-text-secondary: #5c5c70;
-  --demo-text-muted: #9090a0;
-  --demo-border: rgba(0, 0, 0, 0.08);
-  --demo-accent: #3861fb;
-
-  background: var(--demo-bg);
-  color: var(--demo-text);
-}
-
-.demo-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--demo-border);
-  background: var(--demo-bg-secondary);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.demo-logo {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--demo-text);
-  text-decoration: none;
-  transition: opacity 0.15s ease;
-}
-
-.demo-logo:hover {
-  opacity: 0.8;
-}
-
-.demo-logo-text {
-  font-size: 17px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-
-.demo-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.demo-customize-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 14px;
-  border: 1px solid var(--demo-border);
-  border-radius: 12px;
-  background: transparent;
-  color: var(--demo-text-secondary);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.demo-customize-btn:hover {
-  border-color: var(--demo-accent);
-  color: var(--demo-text);
-}
-
-.demo-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48px 24px;
-}
-
-.demo-content {
-  width: 100%;
-  max-width: 1100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 40px;
-}
-
-.demo-hero {
-  text-align: center;
-  max-width: 500px;
-}
-
-.demo-title {
-  font-size: 42px;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  margin-bottom: 12px;
-  color: var(--demo-accent);
-}
-
-.demo-subtitle {
-  font-size: 16px;
-  color: var(--demo-text-secondary);
-  line-height: 1.5;
-}
-
-.demo-layout {
-  display: flex;
-  gap: 24px;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-}
-
-.demo-customizer {
-  width: 280px;
-  padding: 20px;
-  background: var(--demo-bg-secondary);
-  border: 1px solid var(--demo-border);
-  border-radius: 16px;
-  flex-shrink: 0;
-}
-
-.demo-customizer-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--demo-text);
-  margin-bottom: 20px;
-}
-
-.demo-customizer-section {
-  margin-bottom: 20px;
-}
-
-.demo-customizer-section:last-child {
-  margin-bottom: 0;
-}
-
-.demo-customizer-label {
-  display: block;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--demo-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 10px;
-}
-
-.demo-theme-toggle {
-  display: flex;
-  gap: 8px;
-}
-
-.demo-theme-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 10px;
-  border: 1px solid var(--demo-border);
-  border-radius: 10px;
-  background: transparent;
-  color: var(--demo-text-secondary);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.demo-theme-btn:hover {
-  border-color: var(--demo-text-muted);
-}
-
-.demo-theme-btn.active {
-  border-color: var(--demo-accent);
-  background: color-mix(in srgb, var(--demo-accent), transparent 90%);
-  color: var(--demo-accent);
-}
-
-.demo-color-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 8px;
-}
-
-.demo-color-btn {
-  width: 100%;
-  aspect-ratio: 1;
-  border: 2px solid transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.demo-color-btn:hover {
-  transform: scale(1.1);
-}
-
-.demo-color-btn.active {
-  border-color: var(--demo-text);
-  box-shadow: 0 0 0 2px var(--demo-bg);
-}
-
-.demo-preset-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-}
-
-.demo-preset-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 8px;
-  border: 1px solid var(--demo-border);
-  border-radius: 10px;
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.demo-preset-btn:hover {
-  border-color: var(--demo-accent);
-  transform: translateY(-1px);
-}
-
-.demo-preset-preview {
-  width: 100%;
-  aspect-ratio: 1.2;
-  border-radius: 6px;
-  position: relative;
-  overflow: hidden;
-}
-
-.demo-preset-card {
-  position: absolute;
-  inset: 20%;
-  border-radius: 4px;
-}
-
-.demo-preset-accent {
-  position: absolute;
-  bottom: 15%;
-  left: 25%;
-  right: 25%;
-  height: 12%;
-  border-radius: 2px;
-}
-
-.demo-preset-name {
-  font-size: 10px;
-  font-weight: 500;
-  color: var(--demo-text-secondary);
-}
-
-.demo-color-input-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.demo-color-picker {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border: 1px solid var(--demo-border);
-  border-radius: 8px;
-  cursor: pointer;
-  background: transparent;
-}
-
-.demo-color-picker::-webkit-color-swatch-wrapper {
-  padding: 2px;
-}
-
-.demo-color-picker::-webkit-color-swatch {
-  border-radius: 6px;
-  border: none;
-}
-
-.demo-color-text {
-  flex: 1;
-  padding: 10px 12px;
-  border: 1px solid var(--demo-border);
-  border-radius: 8px;
-  background: var(--demo-bg);
-  color: var(--demo-text);
-  font-size: 13px;
-  font-family: monospace;
-}
-
-.demo-color-text:focus {
-  outline: none;
-  border-color: var(--demo-accent);
-}
-
-.demo-range-input {
-  flex: 1;
-  height: 4px;
-  accent-color: var(--demo-accent);
-  cursor: pointer;
-}
-
-.demo-copy-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid var(--demo-accent);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--demo-accent), transparent 90%);
-  color: var(--demo-accent);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.demo-copy-btn:hover {
-  background: color-mix(in srgb, var(--demo-accent), transparent 80%);
-}
-
-.demo-copy-btn:active {
-  transform: scale(0.98);
-}
-
-.demo-connection-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.demo-connected-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 8px;
-  background: rgba(16, 185, 129, 0.1);
-  color: #10b981;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  width: fit-content;
-}
-
-.demo-address {
-  font-size: 13px;
-  color: var(--demo-text-secondary);
-  font-family: monospace;
-}
-
-.demo-disconnected {
-  font-size: 13px;
-  color: var(--demo-text-muted);
-}
-
-.demo-widget-container {
-  display: flex;
-  justify-content: center;
-}
-
-.demo-footer {
-  padding: 20px;
-  text-align: center;
-  border-top: 1px solid var(--demo-border);
-  color: var(--demo-text-muted);
-  font-size: 13px;
-}
-
-@media (max-width: 768px) {
-  .demo-header {
-    padding: 12px 16px;
-    flex-wrap: wrap;
-    gap: 12px;
-  }
-
-  .demo-customize-btn span {
-    display: none;
-  }
-
-  .demo-customize-btn {
-    padding: 10px;
-  }
-
-  .demo-title {
-    font-size: 32px;
-  }
-
-  .demo-subtitle {
-    font-size: 14px;
-  }
-
-  .demo-layout {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .demo-customizer {
-    width: 100%;
-    max-width: 420px;
-  }
-
-  .demo-main {
-    padding: 32px 16px;
-  }
-}