@shapeshiftoss/swap-widget 0.0.2 → 0.1.0

package/src/components/ApprovalStep.tsx

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

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

package/src/components/InputStep.tsx

@@ -1,431 +0,0 @@
-import { useMemo } from 'react'
-
-import type { SwapMachineContext, SwapMachineEvent } from '../machines/types'
-import type { TradeRate } from '../types'
-import { formatAmount, truncateAddress } from '../types'
-import { QuoteSelector } from './QuoteSelector'
-
-type InputStepProps = {
-  context: SwapMachineContext
-  send: (event: SwapMachineEvent) => void
-  rates: TradeRate[]
-  isLoadingRates: boolean
-  ratesError: Error | null
-  sellAssetBalance: { balance: string; balanceFormatted: string } | undefined
-  buyAssetBalance: { balance: string; balanceFormatted: string } | undefined
-  isSellBalanceLoading: boolean
-  isBuyBalanceLoading: boolean
-  sellUsdValue: string
-  buyUsdValue: string
-  sellChainInfo: { name: string } | undefined
-  buyChainInfo: { name: string } | undefined
-  displayRate: TradeRate | undefined
-  walletAddress: string | undefined
-  bitcoinAddress: string | undefined
-  solanaAddress: string | undefined
-  defaultReceiveAddress: string | undefined
-  buyAssetUsdPrice: string | undefined
-  onOpenTokenModal: (type: 'sell' | 'buy') => void
-  onOpenAddressModal: () => void
-  enableWalletConnection: boolean
-  onConnectWallet?: () => void
-  bitcoinState: { isLoading: boolean }
-  solanaState: { isLoading: boolean }
-  isQuoting: boolean
-  isExecuting: boolean
-  effectiveReceiveAddress: string
-  isCustomAddress: boolean
-  sellAmount: string
-  onSellAmountChange: (value: string) => void
-  onSwapTokens: () => void
-  onSelectRate: (rate: TradeRate) => void
-  onButtonClick: () => void
-  sellAmountBaseUnit: string | undefined
-  networkFeeDisplay: string | undefined
-  sellBalanceFiatValue: string | undefined
-  buyBalanceFiatValue: string | undefined
-  isBuyAssetLocked: boolean
-}
-
-export const InputStep = ({
-  context,
-  send: _send,
-  rates,
-  isLoadingRates,
-  ratesError,
-  sellAssetBalance,
-  buyAssetBalance,
-  isSellBalanceLoading,
-  isBuyBalanceLoading,
-  sellUsdValue,
-  buyUsdValue,
-  sellChainInfo,
-  buyChainInfo,
-  displayRate,
-  walletAddress,
-  bitcoinAddress,
-  solanaAddress,
-  defaultReceiveAddress,
-  buyAssetUsdPrice,
-  onOpenTokenModal,
-  onOpenAddressModal,
-  enableWalletConnection: _enableWalletConnection,
-  onConnectWallet: _onConnectWallet,
-  bitcoinState,
-  solanaState,
-  isQuoting,
-  isExecuting,
-  effectiveReceiveAddress,
-  isCustomAddress,
-  sellAmount,
-  onSellAmountChange,
-  onSwapTokens,
-  onSelectRate,
-  onButtonClick,
-  sellAmountBaseUnit,
-  networkFeeDisplay,
-  sellBalanceFiatValue,
-  buyBalanceFiatValue,
-  isBuyAssetLocked,
-}: InputStepProps) => {
-  const { sellAsset, buyAsset, selectedRate, isSellAssetEvm, isSellAssetUtxo, isSellAssetSolana } =
-    context
-
-  const canExecuteDirectly = isSellAssetEvm
-  const canExecuteUtxo = isSellAssetUtxo
-  const canExecuteSolana = isSellAssetSolana
-  const isUnsupportedChain = !isSellAssetEvm && !isSellAssetUtxo && !isSellAssetSolana
-
-  const isBitcoinConnected = !!bitcoinAddress
-  const isSolanaConnected = !!solanaAddress
-
-  const buyAmount = displayRate?.buyAmountCryptoBaseUnit
-
-  const buttonText = useMemo(() => {
-    if (isSellAssetUtxo && canExecuteUtxo) {
-      if (!sellAmount) return 'Enter an amount'
-      if (!isBitcoinConnected) return 'Connect Bitcoin Wallet'
-      if (!effectiveReceiveAddress) return 'Enter receive address'
-      if (bitcoinState.isLoading || isExecuting) return 'Executing...'
-      if (isLoadingRates) return 'Finding rates...'
-      if (ratesError) return 'No routes available'
-      if (!rates?.length) return 'No routes found'
-      return 'Swap'
-    }
-    if (isSellAssetSolana && canExecuteSolana) {
-      if (!sellAmount) return 'Enter an amount'
-      if (!isSolanaConnected) return 'Connect Solana Wallet'
-      if (!effectiveReceiveAddress) return 'Enter receive address'
-      if (solanaState.isLoading || isExecuting) return 'Executing...'
-      if (isLoadingRates) return 'Finding rates...'
-      if (ratesError) return 'No routes available'
-      if (!rates?.length) return 'No routes found'
-      return 'Swap'
-    }
-    if (!isSellAssetEvm) return 'Proceed on ShapeShift'
-    if (!sellAmount) return 'Enter an amount'
-    if (!walletAddress && canExecuteDirectly) return 'Connect Wallet'
-    if (!effectiveReceiveAddress) return 'Enter receive address'
-    if (isLoadingRates) return 'Finding rates...'
-    if (ratesError) return 'No routes available'
-    if (!rates?.length) return 'No routes found'
-    if (isExecuting) return 'Executing...'
-    return 'Swap'
-  }, [
-    walletAddress,
-    canExecuteDirectly,
-    canExecuteUtxo,
-    canExecuteSolana,
-    isSellAssetEvm,
-    isSellAssetUtxo,
-    isSellAssetSolana,
-    isBitcoinConnected,
-    isSolanaConnected,
-    bitcoinState.isLoading,
-    solanaState.isLoading,
-    sellAmount,
-    isLoadingRates,
-    ratesError,
-    rates,
-    isExecuting,
-    effectiveReceiveAddress,
-  ])
-
-  const isButtonDisabled = useMemo(() => {
-    if (isUnsupportedChain) return false
-
-    if (!sellAmount || isLoadingRates || ratesError || !rates?.length || isExecuting) {
-      return true
-    }
-
-    if (!effectiveReceiveAddress) {
-      return true
-    }
-
-    if (isSellAssetUtxo && canExecuteUtxo) {
-      return !isBitcoinConnected || bitcoinState.isLoading
-    }
-
-    if (isSellAssetSolana && canExecuteSolana) {
-      return !isSolanaConnected || solanaState.isLoading
-    }
-
-    return false
-  }, [
-    isUnsupportedChain,
-    isSellAssetUtxo,
-    isSellAssetSolana,
-    canExecuteUtxo,
-    canExecuteSolana,
-    isBitcoinConnected,
-    isSolanaConnected,
-    bitcoinState.isLoading,
-    solanaState.isLoading,
-    sellAmount,
-    isLoadingRates,
-    ratesError,
-    rates,
-    isExecuting,
-    effectiveReceiveAddress,
-  ])
-
-  return (
-    <>
-      <div className='ssw-swap-container'>
-        <div className='ssw-token-section ssw-sell'>
-          <div className='ssw-section-header'>
-            <span className='ssw-section-label'>Sell</span>
-            {walletAddress && isSellAssetEvm && (
-              <span className='ssw-wallet-badge'>{truncateAddress(walletAddress)}</span>
-            )}
-            {bitcoinAddress && isSellAssetUtxo && (
-              <span className='ssw-wallet-badge'>{truncateAddress(bitcoinAddress)}</span>
-            )}
-            {solanaAddress && isSellAssetSolana && (
-              <span className='ssw-wallet-badge'>{truncateAddress(solanaAddress)}</span>
-            )}
-          </div>
-
-          <div className='ssw-input-row'>
-            <input
-              type='text'
-              className='ssw-amount-input'
-              placeholder='0'
-              value={sellAmount}
-              onChange={e => {
-                const raw = e.target.value.replace(/[^0-9.]/g, '')
-                const parts = raw.split('.')
-                const sanitized = parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : raw
-                onSellAmountChange(sanitized)
-              }}
-            />
-            <button
-              className='ssw-token-btn'
-              onClick={() => onOpenTokenModal('sell')}
-              type='button'
-            >
-              {sellAsset.icon ? (
-                <img src={sellAsset.icon} alt={sellAsset.symbol} className='ssw-token-icon' />
-              ) : (
-                <div className='ssw-token-icon-placeholder'>{sellAsset.symbol.charAt(0)}</div>
-              )}
-              <div className='ssw-token-info'>
-                <span className='ssw-token-symbol'>{sellAsset.symbol}</span>
-                <span className='ssw-token-chain'>
-                  {sellChainInfo?.name ?? sellAsset.networkName ?? sellAsset.name}
-                </span>
-              </div>
-              <svg
-                width='16'
-                height='16'
-                viewBox='0 0 24 24'
-                fill='none'
-                stroke='currentColor'
-                strokeWidth='2'
-              >
-                <path d='M9 18l6-6-6-6' />
-              </svg>
-            </button>
-          </div>
-
-          <div className='ssw-section-footer'>
-            <span className='ssw-usd-value'>{sellUsdValue}</span>
-            {(walletAddress || bitcoinAddress || solanaAddress) &&
-              (isSellBalanceLoading ? (
-                <span className='ssw-balance-skeleton' />
-              ) : sellAssetBalance ? (
-                <span className='ssw-balance'>
-                  Balance: {sellAssetBalance.balanceFormatted}
-                  {sellBalanceFiatValue && (
-                    <span className='ssw-balance-fiat'> ({sellBalanceFiatValue})</span>
-                  )}
-                </span>
-              ) : null)}
-          </div>
-        </div>
-
-        <div className='ssw-swap-divider'>
-          <button
-            className='ssw-swap-btn'
-            onClick={isBuyAssetLocked ? undefined : onSwapTokens}
-            disabled={isBuyAssetLocked}
-            type='button'
-          >
-            <svg
-              width='16'
-              height='16'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-            >
-              <path d='M12 5v14M5 12l7 7 7-7' />
-            </svg>
-          </button>
-        </div>
-
-        <div className='ssw-token-section ssw-buy'>
-          <div className='ssw-section-header'>
-            <span className='ssw-section-label'>Buy</span>
-            {defaultReceiveAddress ? (
-              <span className='ssw-receive-address-btn ssw-receive-address-readonly'>
-                <span className='ssw-receive-address-text'>
-                  {truncateAddress(defaultReceiveAddress, 4)}
-                </span>
-              </span>
-            ) : (
-              <button
-                className={`ssw-receive-address-btn ${isCustomAddress ? 'ssw-custom' : ''}`}
-                onClick={() => onOpenAddressModal()}
-                type='button'
-              >
-                <span className='ssw-receive-address-text'>
-                  {effectiveReceiveAddress
-                    ? truncateAddress(effectiveReceiveAddress, 4)
-                    : 'Enter address'}
-                </span>
-                <svg
-                  width='12'
-                  height='12'
-                  viewBox='0 0 24 24'
-                  fill='none'
-                  stroke='currentColor'
-                  strokeWidth='2'
-                >
-                  <path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7' />
-                  <path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z' />
-                </svg>
-              </button>
-            )}
-          </div>
-
-          <div className='ssw-input-row'>
-            <input
-              type='text'
-              className='ssw-amount-input'
-              placeholder='0'
-              value={buyAmount ? formatAmount(buyAmount, buyAsset.precision) : ''}
-              readOnly
-            />
-            <button
-              className={`ssw-token-btn${isBuyAssetLocked ? ' ssw-token-btn-locked' : ''}`}
-              onClick={isBuyAssetLocked ? undefined : () => onOpenTokenModal('buy')}
-              disabled={isBuyAssetLocked}
-              type='button'
-            >
-              {buyAsset.icon ? (
-                <img src={buyAsset.icon} alt={buyAsset.symbol} className='ssw-token-icon' />
-              ) : (
-                <div className='ssw-token-icon-placeholder'>{buyAsset.symbol.charAt(0)}</div>
-              )}
-              <div className='ssw-token-info'>
-                <span className='ssw-token-symbol'>{buyAsset.symbol}</span>
-                <span className='ssw-token-chain'>
-                  {buyChainInfo?.name ?? buyAsset.networkName ?? buyAsset.name}
-                </span>
-              </div>
-              {!isBuyAssetLocked && (
-                <svg
-                  width='16'
-                  height='16'
-                  viewBox='0 0 24 24'
-                  fill='none'
-                  stroke='currentColor'
-                  strokeWidth='2'
-                >
-                  <path d='M9 18l6-6-6-6' />
-                </svg>
-              )}
-            </button>
-          </div>
-
-          <div className='ssw-section-footer'>
-            <span className='ssw-usd-value'>{buyUsdValue}</span>
-            {(walletAddress || bitcoinAddress || solanaAddress) &&
-              (isBuyBalanceLoading ? (
-                <span className='ssw-balance-skeleton' />
-              ) : buyAssetBalance ? (
-                <span className='ssw-balance'>
-                  Balance: {buyAssetBalance.balanceFormatted}
-                  {buyBalanceFiatValue && (
-                    <span className='ssw-balance-fiat'> ({buyBalanceFiatValue})</span>
-                  )}
-                </span>
-              ) : null)}
-          </div>
-        </div>
-      </div>
-
-      {sellAmountBaseUnit && sellAmountBaseUnit !== '0' && (rates?.length || isLoadingRates) && (
-        <div className='ssw-quotes'>
-          <QuoteSelector
-            rates={rates ?? []}
-            selectedRate={selectedRate}
-            onSelectRate={onSelectRate}
-            buyAsset={buyAsset}
-            sellAsset={sellAsset}
-            sellAmountBaseUnit={sellAmountBaseUnit}
-            isLoading={isLoadingRates}
-            buyAssetUsdPrice={buyAssetUsdPrice}
-          />
-        </div>
-      )}
-
-      {networkFeeDisplay && (
-        <div className='ssw-network-fee'>
-          <span className='ssw-network-fee-label'>Est. network fee</span>
-          <span className='ssw-network-fee-value'>{networkFeeDisplay}</span>
-        </div>
-      )}
-
-      <button
-        className={`ssw-action-btn ${isUnsupportedChain ? 'ssw-secondary' : ''}`}
-        disabled={isButtonDisabled || isQuoting}
-        onClick={onButtonClick}
-        type='button'
-        style={isQuoting ? { opacity: 0.7 } : undefined}
-      >
-        {isQuoting ? (
-          <>
-            <svg
-              className='ssw-spinner'
-              width='16'
-              height='16'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-              style={{ display: 'inline-block', verticalAlign: 'middle', marginRight: '6px' }}
-            >
-              <circle cx='12' cy='12' r='10' opacity='0.25' />
-              <path d='M12 2a10 10 0 0 1 10 10' />
-            </svg>
-            Fetching Quote…
-          </>
-        ) : (
-          buttonText
-        )}
-      </button>
-    </>
-  )
-}

package/src/components/QuoteSelector.css

@@ -1,146 +0,0 @@
-.ssw-quote-selector {
-  width: 100%;
-  padding: 14px 16px;
-  border-radius: var(--ssw-radius-md);
-  background: var(--ssw-bg-tertiary);
-  border: 1px solid var(--ssw-border);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.ssw-quote-selector:hover {
-  border-color: var(--ssw-border-hover);
-  background: var(--ssw-bg-hover);
-}
-
-.ssw-quote-selector.ssw-loading {
-  cursor: default;
-  justify-content: center;
-}
-
-.ssw-quote-selector.ssw-loading:hover {
-  border-color: var(--ssw-border);
-  background: var(--ssw-bg-tertiary);
-}
-
-.ssw-quote-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  color: var(--ssw-text-secondary);
-  font-size: 14px;
-}
-
-.ssw-spinner-small {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--ssw-border);
-  border-top-color: var(--ssw-accent);
-  border-radius: 50%;
-  animation: ssw-spin 0.8s linear infinite;
-}
-
-@keyframes ssw-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.ssw-quote-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: flex-start;
-}
-
-.ssw-quote-provider {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.ssw-quote-provider-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: var(--ssw-radius-xs);
-  object-fit: contain;
-  background: var(--ssw-bg-secondary);
-}
-
-.ssw-quote-provider-icon-placeholder {
-  width: 20px;
-  height: 20px;
-  border-radius: var(--ssw-radius-xs);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  color: white;
-}
-
-.ssw-quote-provider-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ssw-text-primary);
-}
-
-.ssw-quote-best-tag {
-  padding: 3px 7px;
-  border-radius: var(--ssw-radius-xs);
-  background: var(--ssw-accent);
-  color: white;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.ssw-quote-usd {
-  font-size: 13px;
-  color: var(--ssw-text-secondary);
-  padding-left: 38px;
-}
-
-.ssw-quote-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.ssw-quote-amount-row {
-  display: flex;
-  align-items: baseline;
-  gap: 5px;
-}
-
-.ssw-quote-amount {
-  font-size: 17px;
-  font-weight: 600;
-  color: var(--ssw-text-primary);
-}
-
-.ssw-quote-symbol {
-  font-size: 13px;
-  color: var(--ssw-text-secondary);
-  font-weight: 500;
-}
-
-.ssw-quote-more {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 12px;
-  color: var(--ssw-accent);
-  font-weight: 500;
-}
-
-.ssw-quote-more svg {
-  opacity: 0.9;
-}