@skip-go/widget 2.3.3 → 2.3.5

package/build/index.es.js

@@ -976,6 +976,10 @@ const StyledSearchInput = styled.input `
 
 function AssetSelectContent({ assets = [], balances, onChange, onClose, showChainInfo, isBalancesLoading, }) {
     const inputRef = useRef(null);
+    const { data: chains } = useChains();
+    const getChain = (chainID) => {
+        return chains === null || chains === void 0 ? void 0 : chains.find((chain) => chain.chainID === chainID);
+    };
     useEffect(() => {
         setTimeout(() => {
             var _a;
@@ -1019,8 +1023,9 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
     }, [searchValue, sortedAssets]);
     return (jsxs("div", { className: "isolate flex h-full flex-col p-6 pb-2 font-diatype", children: [jsxs("div", { className: "mb-4 flex items-center gap-4", children: [jsx(StyledThemedButton, { className: "flex h-8 w-8 items-center justify-center rounded-full transition-colors", onClick: onClose, children: jsx(ArrowLeftIcon, { className: "h-6 w-6" }) }), jsx("p", { className: "text-xl font-bold", children: "Select Token" }), isBalancesLoading && (jsx(SpinnerIcon, { className: "h-4 w-4 animate-spin text-neutral-400" }))] }), jsx(StyledSearchInput, { className: "z-20 w-full rounded-md border px-4 py-2", type: "text", placeholder: "Search name or paste address", onChange: (e) => setSearchValue(e.target.value), value: searchValue, ref: inputRef }), jsxs(StyledScrollAreaRoot, { className: cn('relative isolate flex-grow overflow-hidden', 'before:absolute before:inset-x-0 before:top-0 before:z-10 before:h-2', 'after:absolute after:inset-x-0 after:bottom-0 after:z-10 after:h-2'), children: [jsx(ScrollArea.Viewport, { className: "h-full w-full py-4", children: filteredAssets.map((asset) => {
                             var _a;
+                            const chain = getChain(asset.chainID);
                             return (jsxs(StyledThemedButton, { "data-testid": "asset-item", className: "flex w-full items-center gap-4 rounded-xl p-4 text-left transition-colors focus:-outline-offset-2", onClick: () => (onClose(), onChange === null || onChange === void 0 ? void 0 : onChange(asset)), children: [jsx("img", { height: 48, width: 48, alt: asset.recommendedSymbol || 'symbol', className: "h-12 w-12 rounded-full object-contain", src: asset.logoURI || 'https://api.dicebear.com/6.x/shapes/svg', onError: (e) => (e.currentTarget.src =
-                                            'https://api.dicebear.com/6.x/shapes/svg') }), jsxs("div", { className: "flex-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-lg font-semibold", children: asset.recommendedSymbol || asset.symbol }), asset.isCW20 && (jsx("p", { className: "rounded bg-yellow-600 px-1.5 text-xs font-semibold text-white", children: "CW20" }))] }), showChainInfo && (jsx("p", { className: "text-sm text-neutral-400", children: asset.chainID }))] }), jsx("div", { children: balances[asset.denom] && (jsx("p", { className: "text-sm font-medium text-neutral-400", children: parseFloat(formatUnits(BigInt(balances[asset.denom]), (_a = asset.decimals) !== null && _a !== void 0 ? _a : 6)).toLocaleString('en-US', { maximumFractionDigits: 6 }) })) })] }, `${asset.chainID}-${asset.denom}`));
+                                            'https://api.dicebear.com/6.x/shapes/svg') }), jsxs("div", { className: "flex-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-lg font-semibold", children: asset.recommendedSymbol || asset.symbol }), asset.isCW20 && (jsx("p", { className: "rounded bg-yellow-600 px-1.5 text-xs font-semibold text-white", children: "CW20" }))] }), showChainInfo && (jsx("p", { className: "text-sm text-neutral-400", children: chain === null || chain === void 0 ? void 0 : chain.prettyName }))] }), jsx("div", { children: balances[asset.denom] && (jsx("p", { className: "text-sm font-medium text-neutral-400", children: parseFloat(formatUnits(BigInt(balances[asset.denom]), (_a = asset.decimals) !== null && _a !== void 0 ? _a : 6)).toLocaleString('en-US', { maximumFractionDigits: 6 }) })) })] }, `${asset.chainID}-${asset.denom}`));
                         }) }), jsx(ScrollArea.Scrollbar, { className: "z-20 flex touch-none select-none py-4 transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col", orientation: "vertical", children: jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" }) }), jsx(ScrollArea.Corner, {})] })] }));
 }
 const StyledScrollAreaRoot = styled(ScrollArea.Root) `
@@ -2820,7 +2825,7 @@ function AssetInput({ amount, amountUSD, diffPercentage = 0, onAmountChange, onA
         return parseFloat(selectedAssetBalance) <= 0;
     }, [selectedAssetBalance]);
     return (jsxs(StyledBorderDiv, { className: cn('rounded-lg border p-4 transition-[border,shadow]', 'focus-within:border-neutral-300 focus-within:shadow-sm', 'hover:border-neutral-300 hover:shadow-sm', !!isError &&
-            'border-red-400 focus-within:border-red-500 hover:border-red-500'), children: [jsxs("div", { className: "mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4", children: [jsx("div", { children: jsx(ChainSelect, { chain: chain, chains: chains, onChange: onChainChange }) }), jsx("div", { children: jsx(AssetSelect, { asset: asset, assets: assets, balances: balances, onChange: onAssetChange, showChainInfo: !!chain, isBalancesLoading: isBalancesLoading }) })] }), jsxs("div", { className: "relative isolate", children: [isLoading && (jsx(SpinnerIcon, { className: "absolute right-2 top-2 z-10 h-4 w-4 animate-spin text-neutral-300" })), amount && !isLoading && (jsx("button", { className: "absolute right-2 top-2 z-10", children: jsx(BackspaceIcon, { className: "h-4 w-4 text-neutral-300 transition-colors hover:text-neutral-400", onClick: () => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange('') }) })), jsx(StyledThemedDiv, { as: "input", "data-testid": "amount", className: cn('h-10 w-full text-3xl font-medium tabular-nums', 'placeholder:text-neutral-300 focus:outline-none', isLoading && 'animate-pulse text-neutral-500'), type: "text", placeholder: "0", value: formatNumberWithCommas(amount), inputMode: "numeric", onChange: (e) => {
+            'border-red-400 focus-within:border-red-500 hover:border-red-500'), children: [jsxs("div", { className: "mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4", children: [jsx("div", { children: jsx(ChainSelect, { chain: chain, chains: chains, onChange: onChainChange }) }), jsx("div", { children: jsx(AssetSelect, { asset: asset, assets: assets, balances: balances, onChange: onAssetChange, showChainInfo: true, isBalancesLoading: isBalancesLoading }) })] }), jsxs("div", { className: "relative isolate", children: [isLoading && (jsx(SpinnerIcon, { className: "absolute right-2 top-2 z-10 h-4 w-4 animate-spin text-neutral-300" })), amount && !isLoading && (jsx("button", { className: "absolute right-2 top-2 z-10", children: jsx(BackspaceIcon, { className: "h-4 w-4 text-neutral-300 transition-colors hover:text-neutral-400", onClick: () => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange('') }) })), jsx(StyledThemedDiv, { as: "input", "data-testid": "amount", className: cn('h-10 w-full text-3xl font-medium tabular-nums', 'placeholder:text-neutral-300 focus:outline-none', isLoading && 'animate-pulse text-neutral-500'), type: "text", placeholder: "0", value: formatNumberWithCommas(amount), inputMode: "numeric", onChange: (e) => {
                             if (!onAmountChange)
                                 return;
                             let latest = e.target.value;
@@ -4942,7 +4947,7 @@ const PreviewRoute = ({ route, disclosure, isAmountError, }) => {
                             isPending: submitMutation.isPending,
                         }, setShowLedgerWarning: setShowLedgerWarning, setIsAddressDialogOpen: (v) => setIndexIsSetAddressDialogOpen(v), isSetAddressDialogOpen: indexSetAddressDialogOpen === index, isExpanded: isExpanded, setIsExpanded: setIsExpanded, isOpen: isOpen, chainAddresses: chainAddresses, setChainAddresses: setChainAddresses }, `${index}-${chainID}`))) }), jsxs("div", { className: "flex-1 space-y-4", children: [(statusData === null || statusData === void 0 ? void 0 : statusData.isSuccess) && submitMutation.isSuccess ? (jsxs("div", { className: "flex flex-row items-center space-x-2 font-semibold", children: [jsx(CheckCircleIcon, { className: "h-8 w-8 text-green-500" }), jsxs("p", { children: [route.doesSwap &&
                                             `Successfully swapped ${(_b = (_a = getAsset(route.sourceAssetDenom, route.sourceAssetChainID)) === null || _a === void 0 ? void 0 : _a.recommendedSymbol) !== null && _b !== void 0 ? _b : route.sourceAssetDenom} for ${(_d = (_c = getAsset(route.destAssetDenom, route.destAssetChainID)) === null || _c === void 0 ? void 0 : _c.recommendedSymbol) !== null && _d !== void 0 ? _d : route.destAssetDenom}`, !route.doesSwap &&
-                                            `Successfully transfered ${(_f = (_e = getAsset(route.sourceAssetDenom, route.sourceAssetChainID)) === null || _e === void 0 ? void 0 : _e.recommendedSymbol) !== null && _f !== void 0 ? _f : route.sourceAssetDenom} from ${(_g = chains === null || chains === void 0 ? void 0 : chains.find((c) => c.chainID === route.sourceAssetChainID)) === null || _g === void 0 ? void 0 : _g.prettyName} to ${(_h = chains === null || chains === void 0 ? void 0 : chains.find((c) => c.chainID === route.destAssetChainID)) === null || _h === void 0 ? void 0 : _h.prettyName}`] })] })) : route.txsRequired === broadcastedTxs.length ? (jsxs("div", { className: "flex w-full items-center justify-center space-x-2 text-sm font-medium", children: [jsx(CheckCircleIcon, { className: "h-8 w-8 text-green-500" }), jsx("p", { className: "text-sm font-semibold", children: "You can safely navigate away from this page while your transaction is pending" })] })) : null, estimatedFinalityTime !== '' && (jsxs(Root, { type: "info", children: [jsxs(Trigger, { children: ["EVM bridging finality time is ", estimatedFinalityTime] }), jsx(Content, { children: jsxs("p", { children: ["This swap contains at least one EVM chain, so it might take longer. Read more about", ' ', jsx("a", { href: HREF_COMMON_FINALITY_TIMES, className: "underline", target: "_blank", rel: "noopener noreferrer", children: "common finality times" }), "."] }) })] })), _showLedgerWarning.cctp && (jsx(Root, { type: "warning", initialOpen: true, children: jsx(Content, { children: jsxs("p", { children: [jsx("b", { children: "WARNING: " }), "go.skip.build does not support signing with Ledger when transferring over CCTP to the Ethereum/Solana ecosystems. We're actively working on fixing this with the Noble/Circle teams. We apologize for the inconvenience"] }) }) })), _showLedgerWarning.ethermint && (jsx(Root, { type: "warning", initialOpen: true, children: jsx(Content, { children: jsxs("p", { children: [jsx("b", { children: "WARNING: " }), "go.skip.build does not support signing with Ledger on Ethermint-like chains (e.g. Injective, Dymension, EVMOS, etc...). We're actively working on fixing this with the Ledger team. We apologize for the inconvenience."] }) }) })), isAmountError &&
+                                            `Successfully transfered ${(_f = (_e = getAsset(route.sourceAssetDenom, route.sourceAssetChainID)) === null || _e === void 0 ? void 0 : _e.recommendedSymbol) !== null && _f !== void 0 ? _f : route.sourceAssetDenom} from ${(_g = chains === null || chains === void 0 ? void 0 : chains.find((c) => c.chainID === route.sourceAssetChainID)) === null || _g === void 0 ? void 0 : _g.prettyName} to ${(_h = chains === null || chains === void 0 ? void 0 : chains.find((c) => c.chainID === route.destAssetChainID)) === null || _h === void 0 ? void 0 : _h.prettyName}`] })] })) : route.txsRequired === broadcastedTxs.length ? (jsxs("div", { className: "flex w-full items-center justify-center space-x-2 text-sm font-medium", children: [jsx(CheckCircleIcon, { className: "h-8 w-8 text-green-500" }), jsx("p", { className: "text-sm font-semibold", children: "You can safely navigate away from this page while your transaction is pending" })] })) : null, estimatedFinalityTime !== '' && (jsxs(Root, { type: "info", children: [jsxs(Trigger, { children: ["EVM bridging finality time is ", estimatedFinalityTime] }), jsx(Content, { children: jsxs("p", { children: ["This swap contains at least one EVM chain, so it might take longer. Read more about", ' ', jsx("a", { href: HREF_COMMON_FINALITY_TIMES, className: "underline", target: "_blank", rel: "noopener noreferrer", children: "common finality times" }), "."] }) })] })), _showLedgerWarning.cctp && (jsx(Root, { type: "warning", initialOpen: true, children: jsx(Content, { children: jsxs("p", { children: [jsx("b", { children: "WARNING: " }), "Due to a limitation of the Noble chain, signing with Ledger when transferring over CCTP to the Ethereum/Solana ecosystems is not supported. We're actively working on fixing this issue with the Noble team. We apologize for the inconvenience."] }) }) })), _showLedgerWarning.ethermint && (jsx(Root, { type: "warning", initialOpen: true, children: jsx(Content, { children: jsxs("p", { children: [jsx("b", { children: "WARNING: " }), "go.skip.build does not support signing with Ledger on Ethermint-like chains (e.g. Injective, Dymension, EVMOS, etc...). We're actively working on fixing this with the Ledger team. We apologize for the inconvenience."] }) }) })), isAmountError &&
                             !submitMutation.isPending &&
                             !submitMutation.isSuccess && (jsx("p", { className: "text-balance text-center text-sm font-medium text-red-500", children: typeof isAmountError === 'string'
                                 ? isAmountError