@skip-go/widget 2.3.8 → 2.4.1-alpha.0

package/build/index.es.js

@@ -14,7 +14,7 @@ import { arbitrum, avalanche, base, bsc, celo, fantom, filecoin, kava, linea, ma
 import { QueryClient, QueryClientProvider, useQuery, useMutation } from '@tanstack/react-query';
 import { WalletProvider as WalletProvider$1, useWallet } from '@solana/wallet-adapter-react';
 import { PhantomWalletAdapter, SolflareWalletAdapter, CoinbaseWalletAdapter, TrustWalletAdapter, LedgerWalletAdapter } from '@solana/wallet-adapter-wallets';
-import { SkipRouter } from '@skip-go/client';
+import { SkipClient } from '@skip-go/client';
 import { getWalletClient } from '@wagmi/core';
 import { createContext, useContext, useMemo, useCallback, useRef, useState, useEffect, forwardRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
@@ -24,6 +24,10 @@ import { ArrowTopRightOnSquareIcon, ArrowLeftIcon as ArrowLeftIcon$1, ChevronDow
 import { ArrowLeftIcon, FaceFrownIcon, ChevronDownIcon, BackspaceIcon, TrashIcon, CubeIcon, ArrowRightIcon, ArrowTopRightOnSquareIcon as ArrowTopRightOnSquareIcon$1, CheckCircleIcon, ArrowPathIcon, XCircleIcon, CheckIcon, ClipboardDocumentIcon, ChevronRightIcon, ExclamationTriangleIcon, InformationCircleIcon, PencilSquareIcon as PencilSquareIcon$1, FingerPrintIcon, ArrowsUpDownIcon } from '@heroicons/react/20/solid';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import toast, { Toaster } from 'react-hot-toast';
+import { createPenumbraClient } from '@penumbra-zone/client';
+import { ViewService } from '@penumbra-zone/protobuf';
+import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
+import { bech32CompatAddress } from '@penumbra-zone/bech32m/penumbracompat1';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { styled, useTheme, StyleSheetManager, ThemeProvider } from 'styled-components';
@@ -210,12 +214,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 +312,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({
+    const skipClient = new SkipClient({
+        chainIDsToAffiliates,
         getCosmosSigner: async (chainID) => {
             var _a, _b;
             const chainName = chainIdToName(chainID);
@@ -429,11 +434,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 +725,21 @@ const PenumbraWalletListItem = ({ children, walletName, ...props }) => {
     return jsx("div", { ...props, children: children });
 };
 
+const defaultValues$3 = {};
+const useCallbackStore = create()(() => defaultValues$3);
+
+const penumbraBech32ChainIDs = ['noble-1', 'grand-1'];
+const getPenumbraCompatibleAddress = ({ chainID, address, }) => {
+    if (!chainID)
+        return bech32mAddress(address);
+    return penumbraBech32ChainIDs.includes(chainID)
+        ? bech32CompatAddress(address)
+        : bech32mAddress(address);
+};
+
 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();
@@ -742,6 +760,55 @@ const useMakeWallets = () => {
         const chainType = (_a = getChain(chainID)) === null || _a === void 0 ? void 0 : _a.chainType;
         let wallets = [];
         if (chainType === 'cosmos') {
+            if (chainID.includes('penumbra')) {
+                const praxWallet = {
+                    walletName: 'prax',
+                    walletPrettyName: 'Prax Wallet',
+                    walletInfo: {
+                        logo: 'https://raw.githubusercontent.com/prax-wallet/web/e8b18f9b997708eab04f57e7a6c44f18b3cf13a8/apps/extension/public/prax-white-vertical.svg',
+                    },
+                    connect: async () => {
+                        console.error('Prax wallet is not supported for connect');
+                        toast.error('Prax wallet is not supported for connect');
+                    },
+                    getAddress: async ({ praxWallet }) => {
+                        console.log('praxWallet', praxWallet);
+                        const penumbraWalletIndex = praxWallet === null || praxWallet === void 0 ? void 0 : praxWallet.index;
+                        const sourceChainID = praxWallet === null || praxWallet === void 0 ? void 0 : praxWallet.sourceChainID;
+                        const prax_id = 'lkpmkhpnhknhmibgnmmhdhgdilepfghe';
+                        const prax_origin = `chrome-extension://${prax_id}`;
+                        const client = createPenumbraClient(prax_origin);
+                        console.log(penumbraWalletIndex);
+                        try {
+                            await client.connect();
+                            const viewService = client.service(ViewService);
+                            const address = await viewService.addressByIndex({
+                                addressIndex: {
+                                    account: penumbraWalletIndex ? penumbraWalletIndex : 0,
+                                },
+                            });
+                            if (!address.address)
+                                throw new Error('No address found');
+                            const bech32Address = getPenumbraCompatibleAddress({
+                                address: address.address,
+                                chainID: sourceChainID,
+                            });
+                            return bech32Address;
+                        }
+                        catch (error) {
+                            console.error(error);
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-expect-error
+                            toast.error(error === null || error === void 0 ? void 0 : error.message);
+                        }
+                    },
+                    disconnect: async () => {
+                        console.error('Prax wallet is not supported');
+                    },
+                    isWalletConnected: false,
+                };
+                return [praxWallet];
+            }
             const chainName = chainIdToName(chainID);
             const walletRepo = getWalletRepo(chainName);
             wallets = walletRepo.wallets.map((wallet) => ({
@@ -754,6 +821,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 +866,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 +889,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 +931,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 +947,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 +988,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 +1181,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 }) }));
@@ -3949,8 +4035,9 @@ const PraxWalletIndex = ({ praxWalletIndex, setPraxWalletIndex, }) => {
         setPraxWalletIndex(Number(input));
         setEditing(false);
     };
-    return isEditing ? (jsxs("div", { className: "flex items-center space-x-1 py-2 px-1", children: [jsx(StyledBorderDiv, { as: "input", type: "number", className: cn(`w-16 h-5.5 rounded-md border px-2 text-xs`), value: Number(input), onChange: (e) => {
+    return isEditing ? (jsxs("div", { className: "flex items-center space-x-1 py-2 px-1", children: [jsx(StyledBorderDiv, { as: "input", type: "number", className: cn(`w-16 h-5.5 rounded-md border px-2 text-xs`), value: Number(input), onClick: (e) => {
                     e.stopPropagation();
+                }, onChange: (e) => {
                     if (Number(e.target.value) < 0) {
                         setInput(0);
                         return;
@@ -4043,6 +4130,7 @@ const SetAddressDialog = ({ open, onOpen, chain, index, signRequired, isDestinat
                                             // currently only svm chainType that have isAvailable
                                             return (jsxs(WalletListItem, { chainType: chainType, walletName: wallet.walletName, className: cn('group relative mb-2 data-[unsupported=true]:opacity-30', 'data-[unsupported=true]:before:absolute data-[unsupported=true]:before:inset-0 data-[unsupported=true]:before:cursor-not-allowed'), children: [jsxs(StyledThemedButton, { className: cn('flex w-full items-center gap-2 rounded-lg p-2 transition-colors focus:-outline-offset-2'), onClick: async () => {
                                                             var _a, _b;
+                                                            console.log('walletclicked', praxWalletIndex);
                                                             const resAddress = await ((_a = wallet.getAddress) === null || _a === void 0 ? void 0 : _a.call(wallet, {
                                                                 signRequired,
                                                                 context: isDestination ? 'destination' : 'recovery',
@@ -4138,7 +4226,8 @@ const useAutoSetAddress = ({ chain, chainID, index, enabled, signRequired, chain
                 if (index !== 0 &&
                     signRequired &&
                     (source === null || source === void 0 ? void 0 : source.chainType) === 'cosmos' &&
-                    cosmos) {
+                    cosmos &&
+                    !chain.chainID.includes('penumbra')) {
                     const walletSelected = wallets.find((wallet) => wallet.walletName === (cosmos === null || cosmos === void 0 ? void 0 : cosmos.walletName));
                     const address = await ((_a = walletSelected === null || walletSelected === void 0 ? void 0 : walletSelected.getAddress) === null || _a === void 0 ? void 0 : _a.call(walletSelected, { signRequired }));
                     if (walletSelected && address) {
@@ -4156,7 +4245,8 @@ const useAutoSetAddress = ({ chain, chainID, index, enabled, signRequired, chain
                     (destination === null || destination === void 0 ? void 0 : destination.chainType) === 'cosmos' &&
                     (destination === null || destination === void 0 ? void 0 : destination.source) !== 'input' &&
                     index !== 0 &&
-                    !signRequired) {
+                    !signRequired &&
+                    !chain.chainID.includes('penumbra')) {
                     const walletName = (_b = destination.source) === null || _b === void 0 ? void 0 : _b.walletName;
                     const walletSelected = wallets.find((wallet) => wallet.walletName === walletName);
                     const address = await ((_c = walletSelected === null || walletSelected === void 0 ? void 0 : walletSelected.getAddress) === null || _c === void 0 ? void 0 : _c.call(walletSelected, {}));
@@ -4712,6 +4802,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 +4935,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 +4955,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 +4971,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 +4987,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 +5319,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 +5328,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 +5354,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 +5363,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,