@shapeshiftoss/swap-widget 0.0.2

package/src/constants/chains.ts

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

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

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

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

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

@@ -0,0 +1,458 @@
+* {
+  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;
+  }
+}