@shapeshiftoss/swap-widget 0.1.0 → 0.2.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 ShapeShift
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -18,7 +18,7 @@ An embeddable React widget that enables multi-chain token swaps using ShapeShift
 ## Installation
 
 ```bash
-yarn add @shapeshiftoss/swap-widget
+pnpm add @shapeshiftoss/swap-widget
 # or
 npm install @shapeshiftoss/swap-widget
 ```
@@ -44,7 +44,7 @@ import { SwapWidget } from "@shapeshiftoss/swap-widget";
 function App() {
   return (
     <SwapWidget
-      affiliateAddress="0xYourArbitrumAddress"
+      partnerCode="your-partner-code"
       theme="dark"
       onSwapSuccess={(txHash) => console.log("Success:", txHash)}
       onSwapError={(error) => console.error("Error:", error)}
@@ -59,7 +59,7 @@ function App() {
 
 | Prop                     | Type                                            | Default          | Description                                                                                                |
 | ------------------------ | ----------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
-| `affiliateAddress`       | `string`                                        | -                | Your Arbitrum address for affiliate fee attribution. Optional — the widget works without it.               |
+| `partnerCode`            | `string`                                        | -                | Your registered partner code for affiliate fee attribution. Register at the affiliate dashboard.            |
 | `apiBaseUrl`             | `string`                                        | -                | Custom API base URL. Useful for testing or custom deployments.                                             |
 | `defaultSellAsset`       | `Asset`                                         | ETH on Ethereum  | Initial asset to sell.                                                                                     |
 | `defaultBuyAsset`        | `Asset`                                         | USDC on Ethereum | Initial asset to buy.                                                                                      |
@@ -132,7 +132,7 @@ function App() {
 import { SwapWidget } from "@shapeshiftoss/swap-widget";
 
 function App() {
-  return <SwapWidget affiliateAddress="0xYourArbitrumAddress" theme="dark" />;
+  return <SwapWidget partnerCode="your-partner-code" theme="dark" />;
 }
 ```
 
@@ -149,7 +149,7 @@ function App() {
 
   return (
     <SwapWidget
-      affiliateAddress="0xYourArbitrumAddress"
+      partnerCode="your-partner-code"
       walletClient={walletClient}
       onConnectWallet={() => {
         // Your custom wallet connection logic
@@ -198,7 +198,7 @@ const defaultBuyAsset: Asset = {
 function App() {
   return (
     <SwapWidget
-      affiliateAddress="0xYourArbitrumAddress"
+      partnerCode="your-partner-code"
       defaultSellAsset={defaultSellAsset}
       defaultBuyAsset={defaultBuyAsset}
       theme="dark"
@@ -217,7 +217,7 @@ import { SwapWidget, EVM_CHAIN_IDS } from "@shapeshiftoss/swap-widget";
 function App() {
   return (
     <SwapWidget
-      affiliateAddress="0xYourArbitrumAddress"
+      partnerCode="your-partner-code"
       allowedChainIds={[
         EVM_CHAIN_IDS.ethereum,
         EVM_CHAIN_IDS.polygon,
@@ -242,7 +242,7 @@ import { SwapWidget } from "@shapeshiftoss/swap-widget";
 function App() {
   return (
     <SwapWidget
-      affiliateAddress="0xYourArbitrumAddress"
+      partnerCode="your-partner-code"
       enableWalletConnection={true}
       walletConnectProjectId="your-walletconnect-project-id"
       theme="dark"
@@ -267,7 +267,7 @@ import { SwapWidget } from "@shapeshiftoss/swap-widget";
 function App() {
   return (
     <SwapWidget
-      affiliateAddress="0xYourArbitrumAddress"
+      partnerCode="your-partner-code"
       defaultReceiveAddress="0x1234567890abcdef1234567890abcdef12345678"
       theme="dark"
     />
@@ -481,9 +481,16 @@ The widget supports swaps across multiple blockchain types:
 - **Solana swaps** - Solana transactions can be signed via Phantom, Solflare, or other Solana wallets when using the built-in wallet connection.
 - **Unsupported chains** - Swaps involving chains without wallet support will redirect to [app.shapeshift.com](https://app.shapeshift.com) to complete the transaction.
 
-### Affiliate Address
+### Partner Codes
 
-An affiliate address is optional. Pass your Arbitrum address via the `affiliateAddress` prop to attribute swaps for affiliate fee tracking. The widget works without it — no registration or approval required.
+Register an affiliate account at the affiliate dashboard and claim a partner code (e.g. `vultisig`, `venice`). Pass it via the `partnerCode` prop on the widget, or the `X-Partner-Code` header when using the REST API directly:
+
+```
+GET /v1/swap/rates?...
+X-Partner-Code: your-partner-code
+```
+
+The API resolves the partner code to the registered affiliate address and BPS automatically.
 
 ### Internal QueryClient
 

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@shapeshiftoss/swap-widget",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Embeddable swap widget using ShapeShift API",
+  "repository": "https://github.com/shapeshift/web",
+  "license": "MIT",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "style": "dist/style.css",
+  "style": "dist/index.css",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./style.css": "./dist/style.css",
-    "./dist/style.css": "./dist/style.css"
+    "./style.css": "./dist/index.css"
   },
   "sideEffects": [
     "*.css"
@@ -23,28 +22,20 @@
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "dev": "BUILD_DEMO=true vite",
-    "build": "vite build",
-    "build:demo": "BUILD_DEMO=true vite build",
-    "preview": "vite preview",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "type-check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "dependencies": {
-    "@shapeshiftoss/caip": "^8.0.0",
-    "@shapeshiftoss/types": "^8.0.0",
-    "@shapeshiftoss/utils": "^1.0.0",
     "@xstate/react": "5.0.5",
     "bech32": "^2.0.0",
+    "bs58check": "^4.0.0",
+    "cashaddrjs": "^0.3.12",
     "p-queue": "^8.0.1",
     "react-virtuoso": "^4.7.11",
-    "xstate": "5.28.0"
+    "xstate": "5.28.0",
+    "@shapeshiftoss/caip": "^8.16.7",
+    "@shapeshiftoss/utils": "^1.0.5",
+    "@shapeshiftoss/types": "^8.6.7"
   },
   "peerDependencies": {
+    "@wagmi/core": "^2.0.0",
     "@reown/appkit": "^1.8.17",
     "@reown/appkit-adapter-bitcoin": "^1.8.17",
     "@reown/appkit-adapter-solana": "^1.8.17",
@@ -52,9 +43,9 @@
     "@solana/wallet-adapter-wallets": "^0.19.32",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.69.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "viem": "^2.40.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "viem": "^2.43.5",
     "wagmi": "^3.3.0"
   },
   "peerDependenciesMeta": {
@@ -78,33 +69,40 @@
     }
   },
   "devDependencies": {
+    "@wagmi/core": "^2.0.0",
     "@reown/appkit": "^1.8.17",
     "@reown/appkit-adapter-bitcoin": "^1.8.17",
     "@reown/appkit-adapter-solana": "^1.8.17",
     "@reown/appkit-adapter-wagmi": "^1.8.17",
-    "@shapeshiftoss/caip": "^8.16.7",
-    "@shapeshiftoss/types": "^8.6.7",
-    "@shapeshiftoss/utils": "^1.0.6",
     "@solana/wallet-adapter-wallets": "^0.19.32",
     "@solana/web3.js": "1.98.0",
     "@tanstack/react-query": "^5.69.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
+    "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.2.0",
     "jsdom": "28.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tsup": "^8.5.1",
     "typescript": "~5.2.2",
-    "viem": "2.40.3",
+    "viem": "2.43.5",
     "vite": "^5.0.0",
-    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-node-polyfills": "0.23.0",
     "vitest": "4.0.18",
     "wagmi": "3.3.2"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist node_modules",
+    "build": "rm -rf dist && tsc && tsup",
+    "build:demo": "rm -rf dist && vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest run"
   }
 }

package/dist/index.d.ts

@@ -1,233 +0,0 @@
-import { Asset as Asset_2 } from '@shapeshiftoss/types';
-import { AssetId } from '@shapeshiftoss/caip';
-import { ChainId } from '@shapeshiftoss/caip';
-import { JSX } from 'react/jsx-runtime';
-import { UseQueryResult } from '@tanstack/react-query';
-import { WalletClient } from 'viem';
-
-export declare type Asset = {
-    assetId: AssetId;
-    chainId: ChainId;
-    symbol: string;
-    name: string;
-    precision: number;
-    icon?: string;
-    color?: string;
-    networkName?: string;
-    networkIcon?: string;
-    explorer?: string;
-    explorerTxLink?: string;
-    explorerAddressLink?: string;
-    relatedAssetKey?: AssetId | null;
-};
-
-export { AssetId }
-
-declare type AssetQueryResult<TData> = Omit<UseQueryResult<RawAssetData>, 'data'> & {
-    data: TData;
-};
-
-export declare type Chain = {
-    chainId: ChainId;
-    name: string;
-    icon: string;
-    color: string;
-    nativeAssetId: AssetId;
-};
-
-export { ChainId }
-
-declare type ChainInfo = {
-    chainId: ChainId;
-    name: string;
-    icon?: string;
-    color?: string;
-    nativeAsset: Asset;
-};
-
-export declare const COSMOS_CHAIN_IDS: {
-    readonly cosmos: ChainId;
-    readonly thorchain: ChainId;
-    readonly mayachain: ChainId;
-};
-
-export declare const EVM_CHAIN_IDS: {
-    readonly ethereum: ChainId;
-    readonly arbitrum: ChainId;
-    readonly optimism: ChainId;
-    readonly polygon: ChainId;
-    readonly base: ChainId;
-    readonly avalanche: ChainId;
-    readonly bsc: ChainId;
-    readonly gnosis: ChainId;
-    readonly monad: ChainId;
-    readonly hyperEvm: ChainId;
-    readonly plasma: ChainId;
-    readonly worldChain: ChainId;
-    readonly katana: ChainId;
-};
-
-export declare const formatAmount: (amount: string, decimals: number, maxDecimals?: number) => string;
-
-export declare const getBaseAsset: (chainId: ChainId) => Asset_2 | undefined;
-
-export declare const getChainColor: (chainId: ChainId) => string;
-
-export declare const getChainIcon: (chainId: ChainId) => string | undefined;
-
-export declare const getChainName: (chainId: ChainId) => string;
-
-export declare const getChainType: (chainId: string) => 'evm' | 'utxo' | 'cosmos' | 'solana' | 'other';
-
-export declare const getEvmNetworkId: (chainId: string) => number;
-
-export declare const getExplorerTxLink: (chainId: ChainId) => string;
-
-export declare const isEvmChainId: (chainId: string) => boolean;
-
-export declare const OTHER_CHAIN_IDS: {
-    readonly solana: ChainId;
-};
-
-export declare const parseAmount: (amount: string, decimals: number) => string;
-
-declare type RawAssetData = {
-    byId: Record<AssetId, Asset>;
-    ids: AssetId[];
-};
-
-export declare enum SwapperName {
-    Thorchain = "THORChain",
-    Mayachain = "MAYAChain",
-    CowSwap = "CoW Swap",
-    Zrx = "0x",
-    ArbitrumBridge = "Arbitrum Bridge",
-    Portals = "Portals",
-    Chainflip = "Chainflip",
-    Jupiter = "Jupiter",
-    Relay = "Relay",
-    ButterSwap = "ButterSwap",
-    Bebop = "Bebop",
-    NearIntents = "NEAR Intents",
-    Cetus = "Cetus",
-    Sunio = "Sun.io",
-    Avnu = "AVNU"
-}
-
-export declare const SwapWidget: (props: SwapWidgetProps) => JSX.Element;
-
-export declare type SwapWidgetProps = {
-    affiliateAddress?: string;
-    affiliateBps?: string;
-    apiBaseUrl?: string;
-    defaultSellAsset?: Asset;
-    defaultBuyAsset?: Asset;
-    disabledChainIds?: ChainId[];
-    disabledAssetIds?: AssetId[];
-    allowedChainIds?: ChainId[];
-    sellDisabledChainIds?: ChainId[];
-    buyDisabledChainIds?: ChainId[];
-    sellDisabledAssetIds?: AssetId[];
-    buyDisabledAssetIds?: AssetId[];
-    sellAllowedChainIds?: ChainId[];
-    buyAllowedChainIds?: ChainId[];
-    sellAllowedAssetIds?: AssetId[];
-    buyAllowedAssetIds?: AssetId[];
-    allowedSwapperNames?: SwapperName[];
-    walletClient?: WalletClient;
-    onConnectWallet?: () => void;
-    onSwapSuccess?: (txHash: string) => void;
-    onSwapError?: (error: Error) => void;
-    onAssetSelect?: (type: 'sell' | 'buy', asset: Asset) => void;
-    theme?: ThemeMode | ThemeConfig;
-    defaultSlippage?: string;
-    showPoweredBy?: boolean;
-    enableWalletConnection?: boolean;
-    walletConnectProjectId?: string;
-    defaultReceiveAddress?: string;
-    ratesRefetchInterval?: number;
-    isBuyAssetLocked?: boolean;
-};
-
-export declare type ThemeConfig = {
-    mode: ThemeMode;
-    accentColor?: string;
-    backgroundColor?: string;
-    cardColor?: string;
-    textColor?: string;
-    borderRadius?: string;
-    fontFamily?: string;
-    borderColor?: string;
-    secondaryTextColor?: string;
-    mutedTextColor?: string;
-    inputColor?: string;
-    hoverColor?: string;
-    buttonVariant?: 'filled' | 'outline';
-};
-
-export declare type ThemeMode = 'light' | 'dark';
-
-export declare type TradeQuote = {
-    id: string;
-    rate: string;
-    swapperName: SwapperName;
-    steps: TradeQuoteStep[];
-    receiveAddress: string;
-    affiliateBps: string;
-    slippageTolerancePercentageDecimal?: string;
-    isStreaming?: boolean;
-};
-
-declare type TradeQuoteStep = {
-    sellAsset: Asset;
-    buyAsset: Asset;
-    sellAmountCryptoBaseUnit: string;
-    buyAmountCryptoBaseUnit: string;
-    rate: string;
-    source: SwapperName;
-    feeData: {
-        networkFeeCryptoBaseUnit: string;
-        protocolFees?: Record<AssetId, {
-            amountCryptoBaseUnit: string;
-        }>;
-    };
-    allowanceContract?: string;
-    estimatedExecutionTimeMs?: number;
-};
-
-export declare type TradeRate = {
-    swapperName: SwapperName;
-    rate: string;
-    buyAmountCryptoBaseUnit: string;
-    sellAmountCryptoBaseUnit: string;
-    steps: number;
-    estimatedExecutionTimeMs?: number;
-    affiliateBps: string;
-    networkFeeCryptoBaseUnit?: string;
-    error?: {
-        code: string;
-        message: string;
-    };
-    id?: string;
-};
-
-export declare const truncateAddress: (address: string, chars?: number) => string;
-
-export declare const useAssetById: (assetId: AssetId | undefined) => AssetQueryResult<Asset | undefined>;
-
-export declare const useAssets: () => AssetQueryResult<Asset[]>;
-
-export declare const useAssetsByChainId: (chainId: ChainId | undefined) => AssetQueryResult<Asset[]>;
-
-export declare const useAssetSearch: (query: string, chainId?: ChainId) => AssetQueryResult<Asset[]>;
-
-export declare const useChains: () => AssetQueryResult<ChainInfo[]>;
-
-export declare const UTXO_CHAIN_IDS: {
-    readonly bitcoin: ChainId;
-    readonly bitcoinCash: ChainId;
-    readonly dogecoin: ChainId;
-    readonly litecoin: ChainId;
-};
-
-export { }