0xtrails 0.0.1 → 0.0.2

package/dist/widget/hooks/useTokenList.d.ts

@@ -0,0 +1,52 @@
+import type { SequenceIndexerGateway } from "@0xsequence/indexer";
+import type { TokenBalanceExtended } from "../../tokenBalances.js";
+export interface Token {
+    id: number;
+    name: string;
+    symbol: string;
+    balance: string;
+    imageUrl: string;
+    chainId: number;
+    contractAddress: string;
+    balanceUsdFormatted: string;
+    tokenPriceUsd: number;
+    contractInfo?: {
+        decimals: number;
+        symbol: string;
+        name: string;
+    };
+}
+export type TokenFormatted = Token & TokenBalanceExtended & {
+    balanceFormatted: string;
+    tokenPriceUsd: number;
+    balanceUsdFormatted: string;
+    isNative: boolean;
+    tokenName: string;
+    priceUsd: number;
+    isSufficientBalance: boolean;
+    chainName: string;
+};
+export type UseTokenListProps = {
+    onContinue: (selectedToken: Token) => void;
+    targetAmountUsd?: number | null;
+    indexerGatewayClient: SequenceIndexerGateway;
+    onError: (error: Error | string | null) => void;
+};
+export type UseTokenListReturn = {
+    selectedToken: Token | null;
+    searchQuery: string;
+    handleTokenSelect: (token: TokenFormatted) => void;
+    filteredTokens: TokenBalanceExtended[];
+    isLoadingSortedTokens: boolean;
+    balanceError: Error | null;
+    showContinueButton: boolean;
+    isTokenSelected: (token: TokenBalanceExtended) => boolean;
+    setSearchQuery: (query: string) => void;
+    filteredTokensFormatted: TokenFormatted[];
+    totalBalanceUsd: number;
+    totalBalanceUsdFormatted: string;
+    isLoadingTotalBalanceUsd: boolean;
+    showInsufficientBalance: boolean;
+};
+export declare function useTokenList({ onContinue, targetAmountUsd, indexerGatewayClient, onError, }: UseTokenListProps): UseTokenListReturn;
+//# sourceMappingURL=useTokenList.d.ts.map

package/dist/widget/hooks/useTokenList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTokenList.d.ts","sourceRoot":"","sources":["../../../src/widget/hooks/useTokenList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAOjE,OAAO,KAAK,EACV,oBAAoB,EAErB,MAAM,wBAAwB,CAAA;AAS/B,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE;QACb,QAAQ,EAAE,MAAM,CAAA;QAChB,MAAM,EAAE,MAAM,CAAA;QACd,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;CACF;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,GAChC,oBAAoB,GAAG;IACrB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,CAAA;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,oBAAoB,EAAE,sBAAsB,CAAA;IAC5C,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,EAAE,KAAK,GAAG,IAAI,CAAA;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IAClD,cAAc,EAAE,oBAAoB,EAAE,CAAA;IACtC,qBAAqB,EAAE,OAAO,CAAA;IAC9B,YAAY,EAAE,KAAK,GAAG,IAAI,CAAA;IAC1B,kBAAkB,EAAE,OAAO,CAAA;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,OAAO,CAAA;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,uBAAuB,EAAE,cAAc,EAAE,CAAA;IACzC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,EAAE,MAAM,CAAA;IAChC,wBAAwB,EAAE,OAAO,CAAA;IACjC,uBAAuB,EAAE,OAAO,CAAA;CACjC,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,OAAO,GACR,EAAE,iBAAiB,GAAG,kBAAkB,CA+TxC"}

package/dist/widget/hooks/useTokenList.js

@@ -0,0 +1,252 @@
+import { ResourceStatus } from "@0xsequence/indexer";
+import { Address } from "ox";
+import { useEffect, useMemo, useState } from "react";
+import { isAddressEqual, zeroAddress } from "viem";
+import { useAccount } from "wagmi";
+import { getChainInfo, useSupportedChains } from "../../chains.js";
+import { formatBalance, useAccountTotalBalanceUsd, useHasSufficientBalanceUsd, useTokenBalances, } from "../../tokenBalances.js";
+import { getFormatttedTokenName, useSourceTokenList } from "../../tokens.js";
+export function useTokenList({ onContinue, targetAmountUsd, indexerGatewayClient, onError, }) {
+    const [selectedToken, setSelectedToken] = useState(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const { address } = useAccount();
+    const { sortedTokens: allSortedTokens, isLoadingSortedTokens, balanceError, } = useTokenBalances(address, indexerGatewayClient);
+    const { totalBalanceUsd, totalBalanceUsdFormatted, isLoadingTotalBalanceUsd, } = useAccountTotalBalanceUsd(address);
+    const { hasSufficientBalanceUsd, isLoadingHasSufficientBalanceUsd, hasSufficientBalanceUsdError, } = useHasSufficientBalanceUsd(address, targetAmountUsd);
+    const showContinueButton = false;
+    const sourceTokenList = useSourceTokenList();
+    const { supportedChains: supportedToChains } = useSupportedChains();
+    const supportedChainIds = useMemo(() => {
+        return new Set(supportedToChains.map((c) => c.id));
+    }, [supportedToChains]);
+    const sortedTokens = useMemo(() => {
+        return allSortedTokens.filter((token) => {
+            if (!supportedChainIds.has(token.chainId)) {
+                return false;
+            }
+            return (!token.contractAddress ||
+                sourceTokenList.includes(token.contractInfo?.symbol || ""));
+        });
+    }, [allSortedTokens, sourceTokenList, supportedChainIds]);
+    useEffect(() => {
+        if (onError) {
+            onError(balanceError);
+        }
+    }, [balanceError, onError]);
+    const handleTokenSelect = (token) => {
+        const isNative = !("contractAddress" in token);
+        const chainInfo = getChainInfo(token.chainId);
+        const imageUrl = token.imageUrl;
+        let formattedToken;
+        if (isNative) {
+            formattedToken = {
+                id: token.chainId,
+                name: chainInfo?.nativeCurrency.name || "Native Token",
+                symbol: chainInfo?.nativeCurrency.symbol || "ETH",
+                balance: token.balance,
+                imageUrl,
+                chainId: token.chainId,
+                contractAddress: zeroAddress,
+                balanceUsdFormatted: token.balanceUsdFormatted ?? "",
+                tokenPriceUsd: token.price?.value ?? 0,
+                contractInfo: {
+                    decimals: 18,
+                    symbol: chainInfo?.nativeCurrency.symbol || "ETH",
+                    name: chainInfo?.nativeCurrency.name || "Native Token",
+                },
+            };
+        }
+        else {
+            formattedToken = {
+                id: token.chainId,
+                name: token.contractInfo?.name || "Unknown Token",
+                symbol: token.contractInfo?.symbol || "???",
+                balance: token.balance,
+                imageUrl,
+                chainId: token.chainId,
+                contractAddress: token.contractAddress,
+                contractInfo: {
+                    ...token.contractInfo,
+                    name: token.contractInfo?.name ?? "Unknown Token",
+                    symbol: token.contractInfo?.symbol ?? "???",
+                    decimals: token.contractInfo?.decimals ?? 18,
+                },
+                balanceUsdFormatted: token.balanceUsdFormatted ?? "",
+                tokenPriceUsd: token.price?.value ?? 0,
+            };
+        }
+        setSelectedToken(formattedToken);
+        const canContinue = (!targetAmountUsd || (targetAmountUsd && hasSufficientBalanceUsd)) &&
+            token.isSufficientBalance;
+        if (!canContinue) {
+            console.warn("[trails-sdk] Cannot continue with token selection", {
+                token: formattedToken,
+                targetAmountUsd,
+                hasSufficientBalanceUsd,
+                isSufficientBalance: token.isSufficientBalance,
+            });
+        }
+        onContinue(formattedToken);
+    };
+    const isTokenSelected = (token) => {
+        if (!selectedToken)
+            return false;
+        const isNative = !("contractAddress" in token);
+        return (selectedToken.chainId === token.chainId &&
+            (isNative
+                ? selectedToken.contractAddress === zeroAddress
+                : isAddressEqual(Address.from(selectedToken.contractAddress), Address.from(token.contractAddress))));
+    };
+    const filteredTokens = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return sortedTokens;
+        }
+        const query = searchQuery.toLowerCase().trim();
+        const queryParts = query.split(/\s+/).filter((part) => part.length > 0);
+        return sortedTokens.filter((token) => {
+            const isNative = !("contractAddress" in token);
+            const chainInfo = getChainInfo(token.chainId);
+            const chainName = chainInfo?.name || "";
+            const chainNameLower = chainName.toLowerCase();
+            if (isNative) {
+                const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH";
+                const nativeName = chainInfo?.nativeCurrency.name || "Native Token";
+                const nativeSymbolLower = nativeSymbol.toLowerCase();
+                const nativeNameLower = nativeName.toLowerCase();
+                // If multiple query parts, check if they match chain + token combination
+                if (queryParts.length > 1) {
+                    const matchesChain = queryParts.some((part) => chainNameLower.includes(part));
+                    const matchesToken = queryParts.some((part) => nativeSymbolLower.includes(part) ||
+                        nativeNameLower.includes(part));
+                    return matchesChain && matchesToken;
+                }
+                // Single query part - match against any field
+                return queryParts.some((part) => nativeSymbolLower.includes(part) ||
+                    nativeNameLower.includes(part) ||
+                    chainNameLower.includes(part));
+            }
+            const tokenSymbol = token.contractInfo?.symbol || "???";
+            const tokenName = token.contractInfo?.name || "Unknown Token";
+            const tokenSymbolLower = tokenSymbol.toLowerCase();
+            const tokenNameLower = tokenName.toLowerCase();
+            // If multiple query parts, check if they match chain + token combination
+            if (queryParts.length > 1) {
+                const matchesChain = queryParts.some((part) => chainNameLower.includes(part));
+                const matchesToken = queryParts.some((part) => tokenSymbolLower.includes(part) || tokenNameLower.includes(part));
+                return matchesChain && matchesToken;
+            }
+            // Single query part - match against any field
+            return queryParts.some((part) => tokenSymbolLower.includes(part) ||
+                tokenNameLower.includes(part) ||
+                chainNameLower.includes(part));
+        });
+    }, [sortedTokens, searchQuery]);
+    const filteredTokensFormatted = useMemo(() => {
+        return filteredTokens.map((token) => {
+            const isNative = !("contractAddress" in token);
+            const chainInfo = getChainInfo(token.chainId);
+            const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH";
+            const tokenSymbol = isNative
+                ? nativeSymbol
+                : token.contractInfo?.symbol || "???";
+            const contractAddress = isNative ? zeroAddress : token.contractAddress;
+            let imageContractAddress = contractAddress;
+            if (tokenSymbol === "WETH") {
+                imageContractAddress = zeroAddress;
+            }
+            const imageUrl = `https://assets.sequence.info/images/tokens/small/${token.chainId}/${imageContractAddress}.webp`;
+            const currentTokenName = token.contractInfo?.name || "";
+            const tokenName = getFormatttedTokenName(currentTokenName, tokenSymbol, token.chainId);
+            const formattedBalance = formatBalance(token.balance, isNative ? 18 : token.contractInfo?.decimals);
+            const priceUsd = Number(token.price?.value) ?? 0;
+            const balanceUsdFormatted = token.balanceUsdFormatted ?? "";
+            const decimals = isNative ? 18 : (token.contractInfo?.decimals ?? 18);
+            let isSufficientBalance = true;
+            if (targetAmountUsd) {
+                isSufficientBalance = (token.balanceUsd ?? 0) >= targetAmountUsd;
+            }
+            const chainName = chainInfo?.name || "";
+            return {
+                ...token,
+                id: token.chainId,
+                contractInfo: {
+                    ...token.contractInfo,
+                    chainId: Number(token.chainId),
+                    source: token.contractInfo?.source || "",
+                    type: token.contractInfo?.type || "",
+                    logoURI: token.contractInfo?.logoURI || "",
+                    deployed: token.contractInfo?.deployed || false,
+                    bytecodeHash: token.contractInfo?.bytecodeHash || "",
+                    updatedAt: token.contractInfo?.updatedAt || "",
+                    queuedAt: token.contractInfo?.queuedAt || "",
+                    extensions: token.contractInfo
+                        ?.extensions || {
+                        link: "",
+                        description: "",
+                        categories: [],
+                        ogImage: "",
+                        ogName: "",
+                        originChainId: 0,
+                        originAddress: "",
+                        blacklist: false,
+                        verified: false,
+                        featureIndex: 0,
+                        verifiedBy: "",
+                        featured: false,
+                    },
+                    status: token.contractInfo?.status ||
+                        ResourceStatus.NOT_AVAILABLE,
+                    address: contractAddress,
+                    name: tokenName,
+                    symbol: tokenSymbol,
+                    decimals: decimals,
+                },
+                name: tokenName,
+                symbol: tokenSymbol,
+                balanceFormatted: formattedBalance,
+                imageUrl,
+                chainId: token.chainId,
+                contractAddress: contractAddress,
+                balanceUsdFormatted,
+                tokenPriceUsd: priceUsd,
+                isNative: isNative,
+                tokenName: tokenName,
+                priceUsd: priceUsd,
+                isSufficientBalance,
+                chainName,
+            };
+        });
+    }, [filteredTokens, targetAmountUsd]);
+    const showInsufficientBalance = useMemo(() => {
+        return ((totalBalanceUsd &&
+            targetAmountUsd &&
+            !hasSufficientBalanceUsd &&
+            !isLoadingHasSufficientBalanceUsd &&
+            !hasSufficientBalanceUsdError) ||
+            (filteredTokensFormatted?.length > 0 &&
+                !filteredTokensFormatted.some((token) => token.isSufficientBalance)));
+    }, [
+        targetAmountUsd,
+        hasSufficientBalanceUsd,
+        isLoadingHasSufficientBalanceUsd,
+        hasSufficientBalanceUsdError,
+        filteredTokensFormatted,
+        totalBalanceUsd,
+    ]);
+    return {
+        selectedToken,
+        searchQuery,
+        handleTokenSelect,
+        filteredTokens,
+        isLoadingSortedTokens,
+        balanceError,
+        showContinueButton,
+        isTokenSelected,
+        setSearchQuery,
+        filteredTokensFormatted,
+        totalBalanceUsd,
+        totalBalanceUsdFormatted,
+        isLoadingTotalBalanceUsd,
+        showInsufficientBalance,
+    };
+}

package/dist/widget/id-ByYSrwsd.js

@@ -0,0 +1,17 @@
+import "./index-CK94R-H7.js";
+import { b as c } from "./lit-html-BRjl1r6K.js";
+const e = c`<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="28"
+ height="28"
+ viewBox="0 0 28 28"
+ fill="none">
+  <path
+    fill="#949E9E"
+    fill-rule="evenodd"
+    d="M7.974 2.975h12.052c1.248 0 2.296 0 3.143.092.89.096 1.723.307 2.461.844a4.9 4.9 0 0 1 1.084 1.084c.537.738.748 1.57.844 2.461.092.847.092 1.895.092 3.143v6.802c0 1.248 0 2.296-.092 3.143-.096.89-.307 1.723-.844 2.461a4.9 4.9 0 0 1-1.084 1.084c-.738.537-1.57.748-2.461.844-.847.092-1.895.092-3.143.092H7.974c-1.247 0-2.296 0-3.143-.092-.89-.096-1.723-.307-2.461-.844a4.901 4.901 0 0 1-1.084-1.084c-.537-.738-.748-1.571-.844-2.461C.35 19.697.35 18.649.35 17.4v-6.802c0-1.248 0-2.296.092-3.143.096-.89.307-1.723.844-2.461A4.9 4.9 0 0 1 2.37 3.91c.738-.537 1.571-.748 2.461-.844.847-.092 1.895-.092 3.143-.092ZM5.133 5.85c-.652.071-.936.194-1.117.326a2.1 2.1 0 0 0-.465.465c-.132.181-.255.465-.325 1.117-.074.678-.076 1.573-.076 2.917v6.65c0 1.344.002 2.239.076 2.917.07.652.193.936.325 1.117a2.1 2.1 0 0 0 .465.465c.181.132.465.255 1.117.326.678.073 1.574.075 2.917.075h11.9c1.344 0 2.239-.002 2.917-.075.652-.071.936-.194 1.117-.326.179-.13.335-.286.465-.465.132-.181.255-.465.326-1.117.073-.678.075-1.573.075-2.917v-6.65c0-1.344-.002-2.239-.075-2.917-.071-.652-.194-.936-.326-1.117a2.1 2.1 0 0 0-.465-.465c-.181-.132-.465-.255-1.117-.326-.678-.073-1.573-.075-2.917-.075H8.05c-1.343 0-2.239.002-2.917.075Zm.467 7.275a3.15 3.15 0 1 1 6.3 0 3.15 3.15 0 0 1-6.3 0Zm8.75-1.75a1.4 1.4 0 0 1 1.4-1.4h3.5a1.4 1.4 0 0 1 0 2.8h-3.5a1.4 1.4 0 0 1-1.4-1.4Zm0 5.25a1.4 1.4 0 0 1 1.4-1.4H21a1.4 1.4 0 1 1 0 2.8h-5.25a1.4 1.4 0 0 1-1.4-1.4Z"
+    clip-rule="evenodd"/>
+</svg>`;
+export {
+  e as idSvg
+};