@skip-go/widget 2.3.3 → 2.3.4

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;