@skip-go/widget 1.2.0 → 1.2.1-alpha.1

package/README.md

@@ -39,7 +39,7 @@ const SwapPage = () => {
 
 The `SwapWidget` component accepts the following props:
 
-```tsx
+````tsx
 interface SwapWidgetProps {
   colors?: {
     primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
@@ -63,6 +63,33 @@ interface SwapWidgetProps {
       chainID: string;
     }[];
   };
+  /**
+   * Filter chains and assets in selection
+   *
+   * Record<chainID, assetDenoms>
+   * if assetDenoms is undefined, all assets are allowed
+   * @example
+   * ```ts
+   * {
+   * source: {
+   *   'noble-1': undefined,
+   * },
+   * destination: {
+   *   'cosmoshub-4': [
+   *     'uatom',
+   *     'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86',
+   *   ],
+   *   'agoric-3': [
+   *     'ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9',
+   *   ],
+   *   'osmosis-1': undefined,
+   * }
+   * ```
+   */
+  filter?: {
+    source?: Record<string, string[] | undefined>;
+    destination?: Record<string, string[] | undefined>;
+  };
   className?: string;
   style?: React.CSSProperties;
   settings?: {
@@ -88,7 +115,9 @@ interface SwapWidgetProps {
   };
   apiURL?: string; // Custom API URL to override Skip API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted.
 }
-```
+````
+
+# Experimental features (still in development)
 
 ## Web Component usage
 
@@ -104,29 +133,35 @@ initializeSwapWidget();
 
 et voilà! you can now use the `swap-widget` web-component as `<swap-widget></swap-widget>`
 
-The props for the web component are the same as `SwapWidgetProps` except that
-they are sent to the web-component as attributes in kebab-case as strings or stringified objects ie.
+The props for the web component are the same as `SwapWidgetProps` except that all props
+are passed to the web-component via attributes in kebab-case as strings or stringified objects ie.
 
 ```tsx
-interface SwapWidgetProps {
-  colors
-  defaultRoute
-  routeConfig
+<SwapWidget
+  className="test-class"
+  onlyTestnet={true}
+  colors={{
+    primary: '#FF4FFF',
+  }}
+  defaultRoute={{
+    srcChainID: 'osmosis-1',
+    srcAssetDenom:
+      'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+  }}
+/>
 ```
 
 becomes
 
 ```tsx
 <swap-widget
-  class-name="classname"
+  class-name="test-class"
+  onlyTestnet="true"
   colors='{"primary":"#FF4FFF"}'
   default-route={JSON.stringify({
     srcChainID: 'osmosis-1',
     srcAssetDenom:
       'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
   })}
-  toaster-props=""
-  endpoint-options=""
-  api-url=""
 ></swap-widget>
 ```

package/build/index.es.js

@@ -453,6 +453,7 @@ const swapWidgetDefaultValues = {
             evmSwaps: true,
         },
     },
+    filter: undefined,
 };
 const sessionOptions = {
     name: 'skip-go-widget',
@@ -475,6 +476,7 @@ const configureSwapWidget = (args) => {
                 ...prev.routeConfig,
                 ...args.routeConfig,
             },
+            filter: args.filter || prev.filter,
         });
     });
     useSettingsStore.setState((prev) => {
@@ -583,8 +585,11 @@ const AssetsProvider = ({ children }) => {
     const { data: assets = {} } = useAssets$1({
         onlyTestnets: useSwapWidgetUIStore.getState().onlyTestnet,
     });
-    const assetsByChainID = useCallback((chainID) => {
+    const assetsByChainID = useCallback((chainID, filterDenoms) => {
         const chainAssets = chainID ? assets[chainID] || [] : [];
+        if (filterDenoms && filterDenoms.length > 0) {
+            return chainAssets.filter((asset) => filterDenoms.includes(asset.denom));
+        }
         return /* console.log(chainAssets), */ chainAssets;
     }, [assets]);
     const getAsset = useCallback((denom, chainID) => {
@@ -1871,8 +1876,26 @@ function useSwapWidget() {
     // #region -- core states
     const { routeConfig, defaultRoute } = useSwapWidgetUIStore();
     const skipClient = useSkipClient();
+    const filter = useSwapWidgetUIStore((state) => state.filter);
+    const sourceChainIDs = (filter === null || filter === void 0 ? void 0 : filter.source)
+        ? Object.keys(filter.source)
+        : undefined;
+    const destinationChainIDs = (filter === null || filter === void 0 ? void 0 : filter.destination)
+        ? Object.keys(filter.destination)
+        : undefined;
+    const allChainIDs = useMemo(() => {
+        return [...(sourceChainIDs !== null && sourceChainIDs !== void 0 ? sourceChainIDs : []), ...(destinationChainIDs !== null && destinationChainIDs !== void 0 ? destinationChainIDs : [])];
+    }, [sourceChainIDs, destinationChainIDs]);
     const { assetsByChainID, getFeeAsset, isReady: isAssetsReady, getAsset, } = useAssets();
-    const { data: chains } = useChains();
+    const { data: chains } = useChains({
+        select: (chains) => {
+            if (!allChainIDs)
+                return chains;
+            return chains === null || chains === void 0 ? void 0 : chains.filter(({ chainID }) => {
+                return allChainIDs.includes(chainID);
+            });
+        },
+    });
     const { getWalletRepo } = useManager();
     const { connector, chain: evmChain } = useAccount$1();
     const { switchChainAsync: switchNetworkAsync } = useSwitchChain({
@@ -2042,13 +2065,14 @@ function useSwapWidget() {
      * - if not, select first available asset
      */
     const onSourceChainChange = useCallback(async (chain, injectAsset) => {
+        var _a, _b;
         let feeAsset = undefined;
-        if (chain.chainType === 'cosmos') {
+        if (chain.chainType === 'cosmos' && !((_a = filter === null || filter === void 0 ? void 0 : filter.source) === null || _a === void 0 ? void 0 : _a[chain.chainID])) {
             feeAsset = await getFeeAsset(chain.chainID);
         }
         let asset = feeAsset;
         if (!asset) {
-            const assets = assetsByChainID(chain.chainID);
+            const assets = assetsByChainID(chain.chainID, (_b = filter === null || filter === void 0 ? void 0 : filter.source) === null || _b === void 0 ? void 0 : _b[chain.chainID]);
             if (chain.chainType === 'evm') {
                 asset = assets.find((x) => {
                     var _a, _b;
@@ -2090,15 +2114,17 @@ function useSwapWidget() {
      * - if not, select first available asset
      */
     const onDestinationChainChange = useCallback(async (chain, injectAsset) => {
+        var _a, _b, _c;
         const { destinationAsset: currentDstAsset } = useSwapWidgetStore.getState();
-        const assets = assetsByChainID(chain.chainID);
+        const assets = assetsByChainID(chain.chainID, (_a = filter === null || filter === void 0 ? void 0 : filter.destination) === null || _a === void 0 ? void 0 : _a[chain.chainID]);
         let feeAsset = undefined;
-        if (chain.chainType === 'cosmos') {
+        if (chain.chainType === 'cosmos' &&
+            !((_b = filter === null || filter === void 0 ? void 0 : filter.destination) === null || _b === void 0 ? void 0 : _b[chain.chainID])) {
             feeAsset = await getFeeAsset(chain.chainID);
         }
         let asset = feeAsset;
         if (!asset) {
-            const assets = assetsByChainID(chain.chainID);
+            const assets = assetsByChainID(chain.chainID, (_c = filter === null || filter === void 0 ? void 0 : filter.destination) === null || _c === void 0 ? void 0 : _c[chain.chainID]);
             if (chain.chainType === 'evm') {
                 asset = assets.find((x) => {
                     var _a, _b;
@@ -2413,6 +2439,7 @@ function useSwapWidget() {
         wallets,
     ]);
     // #endregion
+    // #region -- Default Route
     const shareable = useMemo(() => {
         const params = new URLSearchParams();
         if (srcChain) {
@@ -2444,13 +2471,16 @@ function useSwapWidget() {
     const defaultAmountIn = defaultRoute === null || defaultRoute === void 0 ? void 0 : defaultRoute.amountIn;
     const defaultAmountOut = defaultRoute === null || defaultRoute === void 0 ? void 0 : defaultRoute.amountOut;
     useEffect(() => {
+        var _a;
         if (!chains || !isAssetsReady || srcChain)
             return;
         if (defaultSourceChain) {
-            const findChain = chains.find((x) => x.chainID.toLowerCase() === defaultSourceChain.toLowerCase());
+            const findChain = chains
+                .filter((c) => sourceChainIDs === null || sourceChainIDs === void 0 ? void 0 : sourceChainIDs.includes(c.chainID))
+                .find((x) => x.chainID.toLowerCase() === defaultSourceChain.toLowerCase());
             if (findChain) {
                 if (defaultSourceAsset) {
-                    const assets = assetsByChainID(findChain.chainID);
+                    const assets = assetsByChainID(findChain.chainID, (_a = filter === null || filter === void 0 ? void 0 : filter.source) === null || _a === void 0 ? void 0 : _a[findChain.chainID]);
                     const findAsset = assets.find((x) => x.denom.toLowerCase() === defaultSourceAsset.toLowerCase());
                     if (findAsset) {
                         onSourceChainChange(findChain, findAsset);
@@ -2468,13 +2498,16 @@ function useSwapWidget() {
         }
     }, [srcChain, chains, isAssetsReady, defaultSourceChain, defaultSourceAsset]);
     useEffect(() => {
+        var _a;
         if (!chains || !isAssetsReady || dstChain)
             return;
         if (defaultDestinationChain) {
-            const findChain = chains.find((x) => x.chainID.toLowerCase() === defaultDestinationChain.toLowerCase());
+            const findChain = chains
+                .filter((c) => destinationChainIDs === null || destinationChainIDs === void 0 ? void 0 : destinationChainIDs.includes(c.chainID))
+                .find((x) => x.chainID.toLowerCase() === defaultDestinationChain.toLowerCase());
             if (findChain) {
                 if (defaultDestinationAsset) {
-                    const assets = assetsByChainID(findChain.chainID);
+                    const assets = assetsByChainID(findChain.chainID, (_a = filter === null || filter === void 0 ? void 0 : filter.destination) === null || _a === void 0 ? void 0 : _a[findChain.chainID]);
                     const findAsset = assets.find((x) => x.denom.toLowerCase() === defaultDestinationAsset.toLowerCase());
                     if (findAsset) {
                         onDestinationChainChange(findChain, findAsset);
@@ -2512,6 +2545,7 @@ function useSwapWidget() {
             });
         }
     }, [defaultAmountIn, defaultAmountOut]);
+    // #endregion
     /////////////////////////////////////////////////////////////////////////////
     return {
         amountIn,
@@ -2713,11 +2747,20 @@ const usdFormatter = new Intl.NumberFormat("en-US", {
 
 function AssetInput({ amount, amountUSD, diffPercentage = 0, onAmountChange, onAmountMax, asset, onAssetChange, chain, chains, onChainChange, context, isError, isLoading, }) {
     const { assetsByChainID, getNativeAssets } = useAssets();
+    const filter = useSwapWidgetUIStore((state) => state.filter);
     const assets = useMemo(() => {
+        var _a;
+        if (!chain && filter && (filter === null || filter === void 0 ? void 0 : filter[context])) {
+            return [];
+        }
         if (!chain)
             return getNativeAssets();
-        return assetsByChainID(chain.chainID);
-    }, [assetsByChainID, chain, getNativeAssets]);
+        const _assets = assetsByChainID(chain.chainID);
+        if (filter && (filter === null || filter === void 0 ? void 0 : filter[context]) && ((_a = filter[context]) === null || _a === void 0 ? void 0 : _a[chain.chainID])) {
+            return _assets.filter((asset) => { var _a, _b; return (_b = (_a = filter[context]) === null || _a === void 0 ? void 0 : _a[chain.chainID]) === null || _b === void 0 ? void 0 : _b.includes(asset.denom); });
+        }
+        return _assets;
+    }, [assetsByChainID, chain, getNativeAssets, filter]);
     const account = useAccount(chain === null || chain === void 0 ? void 0 : chain.chainID);
     const isAnyDisclosureOpen = useAnyDisclosureOpen();
     const { data: balances, isLoading: isBalancesLoading } = useBalancesByChain({
@@ -4952,7 +4995,31 @@ const SwapWidgetUI = ({ className, style, }) => {
     useFixRadixUiWheelEvent();
     useEffect(() => void disclosure.rehydrate(), []);
     const { openWalletModal } = useWalletModal();
-    const { data: chains } = useChains();
+    const filter = useSwapWidgetUIStore((state) => state.filter);
+    const sourceChainIDs = (filter === null || filter === void 0 ? void 0 : filter.source)
+        ? Object.keys(filter.source)
+        : undefined;
+    const destinationChainIDs = (filter === null || filter === void 0 ? void 0 : filter.destination)
+        ? Object.keys(filter.destination)
+        : undefined;
+    const { data: sourceChains } = useChains({
+        select: (chains) => {
+            if (!sourceChainIDs)
+                return chains;
+            return chains === null || chains === void 0 ? void 0 : chains.filter((chain) => {
+                return sourceChainIDs === null || sourceChainIDs === void 0 ? void 0 : sourceChainIDs.includes(chain.chainID);
+            });
+        },
+    });
+    const { data: destinationChains } = useChains({
+        select: (chains) => {
+            if (!destinationChainIDs)
+                return chains;
+            return chains === null || chains === void 0 ? void 0 : chains.filter((chain) => {
+                return destinationChainIDs === null || destinationChainIDs === void 0 ? void 0 : destinationChainIDs.includes(chain.chainID);
+            });
+        },
+    });
     const { amountIn, amountOut, bridges, destinationAsset, destinationChain, direction, isAmountError, numberOfTransactions, onAllTransactionComplete, onBridgeChange, onDestinationAmountChange, onDestinationAssetChange, onDestinationChainChange, onInvertDirection, onSourceAmountChange, onSourceAmountMax, onSourceAssetChange, onSourceChainChange, priceImpactThresholdReached, route, routeError, routeLoading, routeWarningMessage, routeWarningTitle, sourceAsset, sourceChain, sourceFeeAmount, sourceFeeAsset, swapPriceImpactPercent, usdDiffPercent, shareable, } = useSwapWidget();
     const srcAccount = useAccount(sourceChain === null || sourceChain === void 0 ? void 0 : sourceChain.chainID);
     const isWalletConnected = srcAccount === null || srcAccount === void 0 ? void 0 : srcAccount.isWalletConnected;
@@ -4975,12 +5042,12 @@ const SwapWidgetUI = ({ className, style, }) => {
                                                     ? srcAccount.wallet.walletInfo.logo
                                                     : ((_b = srcAccount.wallet.walletInfo.logo) === null || _b === void 0 ? void 0 : _b.major) ||
                                                         ((_c = srcAccount.wallet.walletInfo.logo) === null || _c === void 0 ? void 0 : _c.minor)
-                                                : '', className: "animate-slide-left-and-fade" }, srcAccount.address) })) : null] }), jsx("div", { "data-testid": "source", children: jsx(AssetInput, { amount: amountIn, amountUSD: route === null || route === void 0 ? void 0 : route.usdAmountIn, asset: sourceAsset, chain: sourceChain, chains: chains !== null && chains !== void 0 ? chains : [], onAmountChange: onSourceAmountChange, onAmountMax: onSourceAmountMax, onAssetChange: onSourceAssetChange, onChainChange: onSourceChainChange, context: "source", isLoading: direction === 'swap-out' && routeLoading, isError: isAmountError }) }), jsxs("div", { className: "relative", children: [jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: jsx("button", { className: cn('pointer-events-auto flex h-8 w-8 items-center justify-center rounded-md bg-neutral-900 text-white', 'transition-transform enabled:hover:rotate-3 enabled:hover:scale-105', 'disabled:cursor-not-allowed disabled:bg-neutral-500 disabled:hover:scale-100', 'data-[swap=true]:pointer-events-none data-[swap=true]:animate-spin-swap'), disabled: !destinationChain, onClick: async () => {
+                                                : '', className: "animate-slide-left-and-fade" }, srcAccount.address) })) : null] }), jsx("div", { "data-testid": "source", children: jsx(AssetInput, { amount: amountIn, amountUSD: route === null || route === void 0 ? void 0 : route.usdAmountIn, asset: sourceAsset, chain: sourceChain, chains: sourceChains !== null && sourceChains !== void 0 ? sourceChains : [], onAmountChange: onSourceAmountChange, onAmountMax: onSourceAmountMax, onAssetChange: onSourceAssetChange, onChainChange: onSourceChainChange, context: "source", isLoading: direction === 'swap-out' && routeLoading, isError: isAmountError }) }), jsxs("div", { className: "relative", children: [jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: jsx("button", { className: cn('pointer-events-auto flex h-8 w-8 items-center justify-center rounded-md bg-neutral-900 text-white', 'transition-transform enabled:hover:rotate-3 enabled:hover:scale-105', 'disabled:cursor-not-allowed disabled:bg-neutral-500 disabled:hover:scale-100', 'data-[swap=true]:pointer-events-none data-[swap=true]:animate-spin-swap'), disabled: !destinationChain, onClick: async () => {
                                                 if (!destinationChain || !invertButtonRef.current)
                                                     return;
                                                 invertButtonRef.current.setAttribute('data-swap', 'true');
                                                 await onInvertDirection();
-                                            }, "data-testid": "swap-button", ref: invertButtonRef, children: jsx(ArrowsUpDownIcon, { className: "h-4 w-4" }) }) }), jsx("p", { className: "text-2xl font-semibold", children: "To" })] }), jsx("div", { "data-testid": "destination", children: jsx(AssetInput, { amount: amountOut, amountUSD: route === null || route === void 0 ? void 0 : route.usdAmountOut, diffPercentage: usdDiffPercent, asset: destinationAsset, chain: destinationChain, chains: chains !== null && chains !== void 0 ? chains : [], onAmountChange: onDestinationAmountChange, onAssetChange: onDestinationAssetChange, onChainChange: onDestinationChainChange, context: "destination", isLoading: direction === 'swap-in' && routeLoading }) }), route && (jsx(SwapDetails, { amountIn: amountIn, amountOut: amountOut, bridges: bridges, destinationAsset: destinationAsset, destinationChain: destinationChain, direction: direction, gasRequired: sourceFeeAmount, onBridgesChange: onBridgeChange, priceImpactPercent: swapPriceImpactPercent !== null && swapPriceImpactPercent !== void 0 ? swapPriceImpactPercent : 0, priceImpactThresholdReached: priceImpactThresholdReached, route: route, sourceAsset: sourceAsset, sourceFeeAsset: sourceFeeAsset, sourceChain: sourceChain })), routeLoading && (jsxs("div", { className: "flex w-full items-center justify-between space-x-2 text-sm font-medium uppercase", children: [jsx("p", { className: "text-neutral-400", children: "Finding best route..." }), jsx(SpinnerIcon, { className: "h-5 w-5 text-neutral-200 animate-spin" })] })), route && !routeLoading && numberOfTransactions > 1 && (jsxs("div", { className: "flex w-full items-center justify-center space-x-2 text-sm font-medium uppercase", children: [jsxs("div", { className: cn('relative rounded-full p-[4px]'), style: {
+                                            }, "data-testid": "swap-button", ref: invertButtonRef, children: jsx(ArrowsUpDownIcon, { className: "h-4 w-4" }) }) }), jsx("p", { className: "text-2xl font-semibold", children: "To" })] }), jsx("div", { "data-testid": "destination", children: jsx(AssetInput, { amount: amountOut, amountUSD: route === null || route === void 0 ? void 0 : route.usdAmountOut, diffPercentage: usdDiffPercent, asset: destinationAsset, chain: destinationChain, chains: destinationChains !== null && destinationChains !== void 0 ? destinationChains : [], onAmountChange: onDestinationAmountChange, onAssetChange: onDestinationAssetChange, onChainChange: onDestinationChainChange, context: "destination", isLoading: direction === 'swap-in' && routeLoading }) }), route && (jsx(SwapDetails, { amountIn: amountIn, amountOut: amountOut, bridges: bridges, destinationAsset: destinationAsset, destinationChain: destinationChain, direction: direction, gasRequired: sourceFeeAmount, onBridgesChange: onBridgeChange, priceImpactPercent: swapPriceImpactPercent !== null && swapPriceImpactPercent !== void 0 ? swapPriceImpactPercent : 0, priceImpactThresholdReached: priceImpactThresholdReached, route: route, sourceAsset: sourceAsset, sourceFeeAsset: sourceFeeAsset, sourceChain: sourceChain })), routeLoading && (jsxs("div", { className: "flex w-full items-center justify-between space-x-2 text-sm font-medium uppercase", children: [jsx("p", { className: "text-neutral-400", children: "Finding best route..." }), jsx(SpinnerIcon, { className: "h-5 w-5 text-neutral-200 animate-spin" })] })), route && !routeLoading && numberOfTransactions > 1 && (jsxs("div", { className: "flex w-full items-center justify-center space-x-2 text-sm font-medium uppercase", children: [jsxs("div", { className: cn('relative rounded-full p-[4px]'), style: {
                                             backgroundColor: useSwapWidgetUIStore.getState().colors.primary,
                                         }, children: [jsx("div", { className: cn('absolute h-6 w-6 animate-ping rounded-full', css `
                       background-color: ${useSwapWidgetUIStore.getState().colors
@@ -5076,7 +5143,7 @@ const useInjectFontsToDocumentHead = () => {
     }, []);
 };
 
-const SwapWidget = ({ colors, settings, onlyTestnet, defaultRoute, routeConfig, className, style, ...swapWidgetProviderProps }) => {
+const SwapWidget = ({ colors, settings, onlyTestnet, defaultRoute, routeConfig, className, style, filter, ...swapWidgetProviderProps }) => {
     useInjectFontsToDocumentHead();
     useEffect(() => {
         configureSwapWidget({
@@ -5085,6 +5152,7 @@ const SwapWidget = ({ colors, settings, onlyTestnet, defaultRoute, routeConfig,
             settings,
             defaultRoute,
             routeConfig,
+            filter,
         });
     }, [colors, onlyTestnet, settings, defaultRoute, routeConfig]);
     return (jsx(Scope, { stylesheets: [css_248z, css_248z$1], config: { dsd: 'emulated' }, children: jsx(SwapWidgetProvider, { ...swapWidgetProviderProps, children: jsx(SwapWidgetUI, { className: className, style: style }) }) }));