@skip-go/widget 2.3.8 → 2.4.0

package/README.md

@@ -134,6 +134,33 @@ interface SwapWidgetProps {
     highlightColor: string; // color used when hovering over buttons, and in select chain/asset dropdown
   };
   persistSwapWidgetState?: boolean; // whether or not swap widget state should persist after refresh. Defaults to true
+
+  // Pass in callback functions to handle events in the widget.
+  onWalletConnected?: ({
+    walletName: string,
+    chainId: string,
+    address?: string,
+  }) => void;
+
+  onWalletDisconnected?: ({
+    chainType?: string
+  }) => void;
+
+  onTransactionBroadcasted?: ({
+    txHash: string,
+    chainId: string,
+    explorerLink: string,
+  }) => void;
+
+  onTransactionComplete?: ({
+    txHash: string,
+    chainId: string,
+    explorerLink: string,
+  }) => void;
+
+  onTransactionFailed?: ({
+  error: string;
+  }) => void;
 }
 ````
 
@@ -166,8 +193,8 @@ are passed to the web-component via attributes in kebab-case as strings or strin
   <SwapWidget
     className="test-class"
     onlyTestnet={true}
-    colors={{
-      primary: '#FF4FFF',
+    theme={{
+      brandColor: '#FF4FFF',
     }}
     defaultRoute={{
       srcChainID: 'osmosis-1',
@@ -185,7 +212,7 @@ becomes
   <swap-widget
     class-name="test-class"
     onlyTestnet="true"
-    colors='{"primary":"#FF4FFF"}'
+    theme='{"brandColor":"#FF4FFF"}'
     default-route={JSON.stringify({
       srcChainID: 'osmosis-1',
       srcAssetDenom:

package/build/hooks/use-assets.d.ts

@@ -1,4 +1,4 @@
 import { AssetsRequest } from '@skip-go/client';
 export declare function useAssets(options?: AssetsRequest): import("@tanstack/react-query/build/legacy/types").UseQueryResult<{
-    [k: string]: import("@skip-go/client/dist/shared-CvoSvr3u").a[];
+    [k: string]: import("@skip-go/client/dist/shared-CpfDn0H3").b[];
 }, Error>;

package/build/hooks/use-route.d.ts

@@ -16,5 +16,5 @@ interface UseRouteArgs extends RouteConfig {
     destinationAssetChainID?: string;
     enabled?: boolean;
 }
-export declare function useRoute({ direction, amount, sourceAsset, sourceAssetChainID, destinationAsset, destinationAssetChainID, enabled, swapVenues, bridges, experimentalFeatures, allowMultiTx, allowUnsafe, smartSwapOptions, }: UseRouteArgs): import("@tanstack/react-query/build/legacy/types").UseQueryResult<import("@skip-go/client/dist/shared-CvoSvr3u").R | undefined, Error>;
+export declare function useRoute({ direction, amount, sourceAsset, sourceAssetChainID, destinationAsset, destinationAssetChainID, enabled, swapVenues, bridges, experimentalFeatures, allowMultiTx, allowUnsafe, smartSwapOptions, }: UseRouteArgs): import("@tanstack/react-query/build/legacy/types").UseQueryResult<import("@skip-go/client/dist/shared-CpfDn0H3").R | undefined, Error>;
 export {};

package/build/hooks/use-swap-widget.d.ts

@@ -31,7 +31,7 @@ export declare function useSwapWidget(persistSwapWidgetState?: boolean): {
     onSourceAssetChange: (asset: Asset) => void;
     onSourceChainChange: (chain: Chain, injectAsset?: Asset) => Promise<void>;
     priceImpactThresholdReached: boolean;
-    route: import("@skip-go/client/dist/shared-CvoSvr3u").R | undefined;
+    route: import("@skip-go/client/dist/shared-CpfDn0H3").R | undefined;
     routeError: string;
     routeLoading: boolean;
     routeWarningMessage: string | undefined;

package/build/index.es.js

@@ -210,12 +210,12 @@ const SolanaProvider = ({ children }) => {
     return (jsx(WalletProvider$1, { wallets: solanaWallets, localStorageKey: "ibc-fun-solana-wallet", autoConnect: true, children: children }, "skip-widget-solana-wallet"));
 };
 
-const defaultValues$4 = {
+const defaultValues$5 = {
     evm: undefined,
     cosmos: undefined,
     svm: undefined,
 };
-const useStore$1 = create(subscribeWithSelector(persist(() => defaultValues$4, {
+const useStore$1 = create(subscribeWithSelector(persist(() => defaultValues$5, {
     name: 'TrackWalletState',
     version: 2,
     storage: createJSONStorage(() => window.sessionStorage),
@@ -308,10 +308,11 @@ function isReadyToCheckLedger(walletClient) {
 }
 
 const SkipContext = createContext(undefined);
-function SkipProvider({ children, apiURL, endpointOptions, makeDestinationWallets, }) {
+function SkipProvider({ children, apiURL, endpointOptions, makeDestinationWallets, chainIDsToAffiliates, }) {
     const { getWalletRepo } = useManager();
     const { wallets } = useWallet();
     const skipClient = new SkipRouter({
+        chainIDsToAffiliates,
         getCosmosSigner: async (chainID) => {
             var _a, _b;
             const chainName = chainIdToName(chainID);
@@ -429,11 +430,11 @@ function isChainIdEvmos(chainID) {
     return chainID === 'evmos_9001-2' || chainID.includes('evmos');
 }
 
-const defaultValues$3 = {
+const defaultValues$4 = {
     customGasAmount: DEFAULT_GAS_AMOUNT,
     slippage: (3).toString(),
 };
-const useSettingsStore = create()(persist(() => defaultValues$3, {
+const useSettingsStore = create()(persist(() => defaultValues$4, {
     name: 'SettingsState',
     version: 4,
 }));
@@ -720,8 +721,12 @@ const PenumbraWalletListItem = ({ children, walletName, ...props }) => {
     return jsx("div", { ...props, children: children });
 };
 
+const defaultValues$3 = {};
+const useCallbackStore = create()(() => defaultValues$3);
+
 const useMakeWallets = () => {
     const { data: chains } = useChains();
+    const { onWalletConnected, onWalletDisconnected } = useCallbackStore.getState();
     const getChain = (_chainID) => chains === null || chains === void 0 ? void 0 : chains.find((chain) => chain.chainID === _chainID);
     const { connector: currentConnector, address: evmAddress, isConnected: isEvmConnected, } = useAccount$1();
     const { disconnectAsync } = useDisconnect();
@@ -754,6 +759,11 @@ const useMakeWallets = () => {
                     try {
                         await gracefullyConnect(wallet);
                         trackWallet.track('cosmos', wallet.walletName, chainType);
+                        onWalletConnected === null || onWalletConnected === void 0 ? void 0 : onWalletConnected({
+                            walletName: wallet.walletPrettyName,
+                            chainId: chainID,
+                            address: wallet.address,
+                        });
                     }
                     catch (error) {
                         console.error(error);
@@ -794,6 +804,7 @@ const useMakeWallets = () => {
                 disconnect: async () => {
                     await wallet.disconnect();
                     trackWallet.untrack('cosmos');
+                    onWalletDisconnected === null || onWalletDisconnected === void 0 ? void 0 : onWalletDisconnected({ chainType });
                 },
                 isWalletConnected: wallet.isWalletConnected,
             }));
@@ -816,6 +827,11 @@ const useMakeWallets = () => {
                         try {
                             await connectAsync({ connector, chainId: Number(chainID) });
                             trackWallet.track('evm', connector.id, chainType);
+                            onWalletConnected === null || onWalletConnected === void 0 ? void 0 : onWalletConnected({
+                                walletName: connector.name,
+                                chainId: chainID,
+                                address: evmAddress,
+                            });
                         }
                         catch (error) {
                             console.error(error);
@@ -853,6 +869,7 @@ const useMakeWallets = () => {
                     disconnect: async () => {
                         await disconnectAsync();
                         trackWallet.untrack('evm');
+                        onWalletDisconnected === null || onWalletDisconnected === void 0 ? void 0 : onWalletDisconnected({ chainType });
                     },
                     isWalletConnected: connector.id === (currentConnector === null || currentConnector === void 0 ? void 0 : currentConnector.id),
                 };
@@ -868,9 +885,15 @@ const useMakeWallets = () => {
                         logo: wallet.adapter.icon,
                     },
                     connect: async () => {
+                        var _a;
                         try {
                             await wallet.adapter.connect();
                             trackWallet.track('svm', wallet.adapter.name, chainType);
+                            onWalletConnected === null || onWalletConnected === void 0 ? void 0 : onWalletConnected({
+                                walletName: wallet.adapter.name,
+                                chainId: chainID,
+                                address: (_a = wallet.adapter.publicKey) === null || _a === void 0 ? void 0 : _a.toBase58(),
+                            });
                         }
                         catch (error) {
                             console.error(error);
@@ -903,6 +926,7 @@ const useMakeWallets = () => {
                     disconnect: async () => {
                         await wallet.adapter.disconnect();
                         trackWallet.untrack('svm');
+                        onWalletDisconnected === null || onWalletDisconnected === void 0 ? void 0 : onWalletDisconnected({ chainType });
                     },
                     isWalletConnected: wallet.adapter.connected,
                     isAvailable: wallet.readyState === 'Installed',
@@ -1095,8 +1119,8 @@ const apiURL = `${appUrl}/api/widget/skip`;
 const WalletProvider = ({ children }) => {
     return (jsx(SolanaProvider, { children: jsx(CosmosProvider, { children: jsx(EVMProvider, { children: jsx(WalletModalProvider, { children: children }) }) }) }));
 };
-const SkipAPIProvider = ({ children, endpointOptions: endpointOptions$1 = endpointOptions, apiURL: apiURL$1 = apiURL, makeDestinationWallets, }) => {
-    return (jsx(SkipProvider, { apiURL: apiURL$1, endpointOptions: endpointOptions$1, makeDestinationWallets: makeDestinationWallets, children: jsx(AssetsProvider, { children: children }) }));
+const SkipAPIProvider = ({ children, endpointOptions: endpointOptions$1 = endpointOptions, apiURL: apiURL$1 = apiURL, makeDestinationWallets, chainIDsToAffiliates, }) => {
+    return (jsx(SkipProvider, { apiURL: apiURL$1, endpointOptions: endpointOptions$1, makeDestinationWallets: makeDestinationWallets, chainIDsToAffiliates: chainIDsToAffiliates, children: jsx(AssetsProvider, { children: children }) }));
 };
 const SwapWidgetProvider = ({ children, ...skipApiProviderProps }) => {
     return (jsx(WalletProvider, { children: jsx(SkipAPIProvider, { ...skipApiProviderProps, children: children }) }));
@@ -4712,6 +4736,7 @@ const PreviewRoute = ({ route, disclosure, isAmountError, }) => {
     const { data: chains } = useChains();
     const getChain = (chainID) => chains === null || chains === void 0 ? void 0 : chains.find((chain) => chain.chainID === chainID);
     const { makeWallets } = useMakeWallets();
+    const { onTransactionBroadcasted, onTransactionComplete, onTransactionFailed } = useCallbackStore.getState();
     const [isExpanded, setIsExpanded] = useState(() => route.chainIDs.length === 2 ? true : false);
     const [isOpen, control] = disclosure;
     const [indexSetAddressDialogOpen, setIndexIsSetAddressDialogOpen] = useState();
@@ -4844,6 +4869,11 @@ const PreviewRoute = ({ route, disclosure, isAmountError, }) => {
                                 explorerLink: txStatus.explorerLink,
                             },
                         ];
+                        onTransactionBroadcasted === null || onTransactionBroadcasted === void 0 ? void 0 : onTransactionBroadcasted({
+                            chainId: txStatus.chainID,
+                            txHash: txStatus.txHash,
+                            explorerLink: txStatus.explorerLink,
+                        });
                         if (route.txsRequired === txs.length) {
                             toast.success(jsx("p", { children: "You can safely navigate away from this page while your transaction is pending" }), {
                                 icon: (jsx(InformationCircleIcon, { className: "h-10 w-10 text-blue-500" })),
@@ -4859,6 +4889,11 @@ const PreviewRoute = ({ route, disclosure, isAmountError, }) => {
             if (isUserRejectedRequestError(err)) {
                 throw new Error('User rejected request');
             }
+            onTransactionFailed === null || onTransactionFailed === void 0 ? void 0 : onTransactionFailed({
+                error: err instanceof Error
+                    ? `${err.name}: ${err.message}`
+                    : String(err)
+            });
             throw err;
         }
     }
@@ -4870,6 +4905,11 @@ const PreviewRoute = ({ route, disclosure, isAmountError, }) => {
         },
         onError: (err) => {
             console.error(err);
+            onTransactionFailed === null || onTransactionFailed === void 0 ? void 0 : onTransactionFailed({
+                error: err instanceof Error
+                    ? `${err.name}: ${err.message}`
+                    : String(err)
+            });
             toast(({ createdAt, id }) => (jsxs("div", { className: "flex flex-col", children: [jsx("h4", { className: "mb-2 font-bold", children: "Transaction Failed!" }), jsxs(StyledBorderDiv, { as: "pre", className: "mb-4 overflow-auto whitespace-pre-wrap break-all rounded border p-2 font-diatypeMono text-xs", children: [err instanceof Error
                                 ? `${err.name}: ${err.message}`
                                 : String(err), jsx("br", {}), jsx("br", {}), new Date(createdAt).toISOString()] }), jsx("button", { className: "self-end text-sm font-medium text-red-500 hover:underline", onClick: () => toast.dismiss(id), children: "Clear Notification \u00D7" })] })), {
@@ -4881,6 +4921,16 @@ const PreviewRoute = ({ route, disclosure, isAmountError, }) => {
             });
         },
     });
+    useEffect(() => {
+        var _a, _b, _c;
+        if ((statusData === null || statusData === void 0 ? void 0 : statusData.isSuccess) && submitMutation.isSuccess) {
+            onTransactionComplete === null || onTransactionComplete === void 0 ? void 0 : onTransactionComplete({
+                txHash: (_a = broadcastedTxs === null || broadcastedTxs === void 0 ? void 0 : broadcastedTxs[0]) === null || _a === void 0 ? void 0 : _a.txHash,
+                chainId: (_b = broadcastedTxs === null || broadcastedTxs === void 0 ? void 0 : broadcastedTxs[0]) === null || _b === void 0 ? void 0 : _b.chainID,
+                explorerLink: (_c = broadcastedTxs === null || broadcastedTxs === void 0 ? void 0 : broadcastedTxs[0]) === null || _c === void 0 ? void 0 : _c.explorerLink,
+            });
+        }
+    }, [statusData === null || statusData === void 0 ? void 0 : statusData.isSuccess, submitMutation.isSuccess]);
     const SubmitButton = () => {
         if (allAddressFilled) {
             return (jsx(StyledBrandDiv, { as: "button", className: cn('w-full rounded-md py-4 font-semibold text-white', 'outline-none transition-transform', 'enabled:hover:rotate-1 enabled:hover:scale-102', 'disabled:cursor-not-allowed disabled:opacity-75'), onClick: () => submitMutation.mutate(), disabled: submitMutation.isPending ||
@@ -5203,7 +5253,7 @@ const WithStyledShadowDom = ({ children }) => {
     return isClient ? (jsxs(Scope, { stylesheets: [css_248z, css_248z$2, css_248z$1], ref: onShadowDomLoaded, children: [jsx("div", { ref: onStyledComponentContainerLoaded }), jsx(StyleSheetManager, { target: styledComponentContainer, children: children })] })) : null;
 };
 
-const SwapWidgetWithoutProviders = ({ settings, onlyTestnet, defaultRoute, routeConfig, theme, filter, ...swapWidgetUIProps }) => {
+const SwapWidgetWithoutProviders = ({ settings, onlyTestnet, defaultRoute, routeConfig, theme, filter, onWalletConnected, onWalletDisconnected, onTransactionBroadcasted, onTransactionComplete, onTransactionFailed, ...swapWidgetUIProps }) => {
     useEffect(() => {
         configureSwapWidget({
             onlyTestnet,
@@ -5212,7 +5262,24 @@ const SwapWidgetWithoutProviders = ({ settings, onlyTestnet, defaultRoute, route
             routeConfig,
             filter,
         });
-    }, [onlyTestnet, settings, defaultRoute, routeConfig]);
+        useCallbackStore.setState({
+            onWalletConnected,
+            onWalletDisconnected,
+            onTransactionBroadcasted,
+            onTransactionComplete,
+            onTransactionFailed,
+        });
+    }, [
+        onlyTestnet,
+        settings,
+        defaultRoute,
+        routeConfig,
+        onWalletConnected,
+        onWalletDisconnected,
+        onTransactionBroadcasted,
+        onTransactionComplete,
+        onTransactionFailed,
+    ]);
     const mergedThemes = useMemo(() => {
         return {
             ...defaultTheme,
@@ -5221,7 +5288,7 @@ const SwapWidgetWithoutProviders = ({ settings, onlyTestnet, defaultRoute, route
     }, [defaultTheme, theme]);
     return (jsx(WithStyledShadowDom, { children: jsx(ThemeProvider, { theme: mergedThemes, children: jsx(SwapWidgetUI, { ...swapWidgetUIProps }) }) }));
 };
-const SwapWidget = ({ settings, onlyTestnet, defaultRoute, routeConfig, theme, className, style, filter, toasterProps, persistSwapWidgetState, ...swapWidgetProviderProps }) => {
+const SwapWidget = ({ settings, onlyTestnet, defaultRoute, routeConfig, theme, className, style, filter, toasterProps, persistSwapWidgetState, onWalletConnected, onWalletDisconnected, onTransactionBroadcasted, onTransactionComplete, onTransactionFailed, ...swapWidgetProviderProps }) => {
     useEffect(() => {
         configureSwapWidget({
             onlyTestnet,
@@ -5230,7 +5297,24 @@ const SwapWidget = ({ settings, onlyTestnet, defaultRoute, routeConfig, theme, c
             routeConfig,
             filter,
         });
-    }, [onlyTestnet, settings, defaultRoute, routeConfig]);
+        useCallbackStore.setState({
+            onWalletConnected,
+            onWalletDisconnected,
+            onTransactionBroadcasted,
+            onTransactionComplete,
+            onTransactionFailed,
+        });
+    }, [
+        onlyTestnet,
+        settings,
+        defaultRoute,
+        routeConfig,
+        onWalletConnected,
+        onWalletDisconnected,
+        onTransactionBroadcasted,
+        onTransactionComplete,
+        onTransactionFailed,
+    ]);
     const mergedThemes = useMemo(() => {
         return {
             ...defaultTheme,