0xtrails 0.0.1 → 0.0.2

package/src/widget/components/TokenImage.tsx

@@ -0,0 +1,37 @@
+import { TokenImage as SeqTokenImage } from "@0xsequence/design-system"
+import type React from "react"
+
+interface TokenImageProps {
+  imageUrl?: string
+  symbol?: string
+  chainId?: number
+  size?: number
+}
+
+export const TokenImage: React.FC<TokenImageProps> = ({
+  imageUrl,
+  symbol,
+  chainId,
+  size = 24,
+}) => {
+  imageUrl = imageUrl?.replace("/small/", "/large/")
+  symbol = imageUrl ? symbol : symbol?.[0]
+
+  return (
+    <div
+      className={`rounded-full flex items-center justify-center text-sm relative bg-black-100 bg-opacity-90`}
+      style={{ width: size, height: size }}
+    >
+      <SeqTokenImage
+        src={imageUrl}
+        symbol={symbol}
+        withNetwork={chainId}
+        size="xl"
+        className="absolute w-full h-full text-white"
+        disableAnimation={true}
+      />
+    </div>
+  )
+}
+
+export default TokenImage

package/src/widget/components/TokenList.tsx

@@ -0,0 +1,287 @@
+import type { SequenceIndexerGateway } from "@0xsequence/indexer"
+import { ChevronLeft, Search } from "lucide-react"
+import type React from "react"
+import type { ActiveTheme } from "../../theme.js"
+import type { Token, TokenFormatted } from "../hooks/useTokenList.js"
+import { useTokenList } from "../hooks/useTokenList.js"
+import { TokenImage } from "./TokenImage.js"
+
+interface TokenListProps {
+  onContinue: (selectedToken: Token) => void
+  onBack: () => void
+  indexerGatewayClient: SequenceIndexerGateway
+  theme?: ActiveTheme
+  targetAmountUsd?: number | null
+  targetAmountUsdFormatted?: string | null
+  onError: (error: Error | string | null) => void
+}
+
+export const TokenList: React.FC<TokenListProps> = ({
+  onContinue,
+  onBack,
+  indexerGatewayClient,
+  theme = "light",
+  targetAmountUsd,
+  targetAmountUsdFormatted,
+  onError,
+}) => {
+  const {
+    searchQuery,
+    setSearchQuery,
+    handleTokenSelect,
+    filteredTokens,
+    isLoadingSortedTokens,
+    isTokenSelected,
+    selectedToken,
+    showContinueButton,
+    filteredTokensFormatted,
+    totalBalanceUsd,
+    totalBalanceUsdFormatted,
+    showInsufficientBalance,
+    balanceError,
+  } = useTokenList({
+    onContinue,
+    targetAmountUsd,
+    indexerGatewayClient,
+    onError,
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between relative">
+        <div className="flex items-center">
+          {!targetAmountUsd && (
+            <button
+              type="button"
+              onClick={onBack}
+              className={`p-2 rounded-full transition-colors cursor-pointer ${
+                theme === "dark"
+                  ? "hover:bg-gray-800 text-gray-400"
+                  : "hover:bg-gray-100 text-gray-600"
+              }`}
+            >
+              <ChevronLeft className="h-6 w-6" />
+            </button>
+          )}
+
+          <h2
+            className={`text-lg font-semibold ${targetAmountUsd ? "text-left" : "text-center"} ${theme === "dark" ? "text-white" : "text-gray-900"}`}
+          >
+            {targetAmountUsd
+              ? `Pay ${targetAmountUsdFormatted} with:`
+              : "Select Token"}
+          </h2>
+        </div>
+
+        {totalBalanceUsd > 0 && (
+          <p
+            className={`text-xs mr-8 ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`}
+          >
+            Total balance: {totalBalanceUsdFormatted}
+          </p>
+        )}
+      </div>
+
+      {/* Search Field */}
+      <div className="relative">
+        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <Search
+            className={`h-5 w-5 ${theme === "dark" ? "text-gray-500" : "text-gray-400"}`}
+          />
+        </div>
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search tokens"
+          className={`block w-full pl-10 pr-3 py-2 border rounded-[24px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+            theme === "dark"
+              ? "bg-gray-800 border-gray-700 text-white placeholder-gray-500"
+              : "bg-white border-gray-300 text-gray-900 placeholder-gray-500"
+          }`}
+        />
+      </div>
+
+      {isLoadingSortedTokens && (
+        <div className="text-center py-4">
+          <div
+            className={`animate-spin rounded-full h-8 w-8 border-b-2 mx-auto ${
+              theme === "dark" ? "border-white" : "border-black"
+            }`}
+          ></div>
+          <p
+            className={`mt-2 ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`}
+          >
+            Loading your token balances...
+          </p>
+        </div>
+      )}
+
+      {!isLoadingSortedTokens &&
+        !balanceError &&
+        filteredTokens.length === 0 && (
+          <div
+            className={`text-center py-4 rounded-lg ${theme === "dark" ? "bg-gray-800" : "bg-gray-50"}`}
+          >
+            <p className={theme === "dark" ? "text-gray-400" : "text-gray-500"}>
+              {searchQuery.trim()
+                ? "No tokens found matching your search."
+                : "No tokens found with balance greater than 0."}
+            </p>
+          </div>
+        )}
+
+      {/* Token List */}
+      <div
+        className={`divide-y ${
+          theme === "dark" ? "divide-gray-700/50" : "divide-gray-200"
+        } max-h-[35vh] overflow-y-auto rounded-[16px] ${theme === "dark" ? "bg-gray-800/50" : "bg-white"}`}
+      >
+        {filteredTokensFormatted.map((token: TokenFormatted) => {
+          const {
+            symbol,
+            imageUrl,
+            chainId,
+            contractAddress,
+            balanceUsdFormatted,
+            tokenName,
+            priceUsd,
+            balanceFormatted,
+            isSufficientBalance,
+          } = token
+
+          return (
+            <button
+              key={`${chainId}-${contractAddress}`}
+              type="button"
+              onClick={() => handleTokenSelect(token)}
+              title={
+                !isSufficientBalance
+                  ? "Insufficient balance for this token"
+                  : undefined
+              }
+              className={`w-full py-2.5 px-3 flex items-center space-x-3 transition-colors ${
+                theme === "dark"
+                  ? isTokenSelected(token)
+                    ? "bg-gray-800"
+                    : "hover:bg-gray-800/80"
+                  : isTokenSelected(token)
+                    ? "bg-gray-100"
+                    : "hover:bg-gray-50"
+              } ${!isSufficientBalance ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+            >
+              <div className="relative flex-shrink-0">
+                <div
+                  className={`rounded-full flex items-center justify-center ${
+                    theme === "dark" ? "bg-gray-700" : "bg-gray-100"
+                  }`}
+                >
+                  {contractAddress ? (
+                    <TokenImage
+                      symbol={symbol[0]}
+                      imageUrl={imageUrl}
+                      chainId={chainId}
+                      size={32}
+                    />
+                  ) : (
+                    <span
+                      className={`text-base font-medium ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`}
+                    >
+                      {symbol}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex-1 min-w-0 text-left">
+                <h3
+                  className={`text-sm font-medium truncate ${
+                    theme === "dark" ? "text-white" : "text-gray-900"
+                  } ${!isSufficientBalance ? (theme === "dark" ? "text-gray-500" : "text-gray-400") : ""}`}
+                >
+                  {tokenName}
+                </h3>
+                <p
+                  className={`text-xs ${
+                    theme === "dark" ? "text-gray-400" : "text-gray-500"
+                  } ${!isSufficientBalance ? (theme === "dark" ? "text-gray-600" : "text-gray-400") : ""}`}
+                >
+                  {symbol}
+                </p>
+              </div>
+
+              <div className="text-right flex-shrink-0">
+                {priceUsd > 0 ? (
+                  <>
+                    <p
+                      className={`text-sm font-medium ${
+                        theme === "dark" ? "text-white" : "text-gray-900"
+                      } ${!isSufficientBalance ? (theme === "dark" ? "text-gray-500" : "text-gray-400") : ""}`}
+                    >
+                      {balanceUsdFormatted}
+                    </p>
+                    <p
+                      className={`text-xs ${
+                        theme === "dark" ? "text-gray-400" : "text-gray-500"
+                      } ${!isSufficientBalance ? (theme === "dark" ? "text-gray-600" : "text-gray-400") : ""}`}
+                    >
+                      {balanceFormatted}
+                    </p>
+                  </>
+                ) : (
+                  <p
+                    className={`text-sm font-medium ${
+                      theme === "dark" ? "text-white" : "text-gray-900"
+                    } ${!isSufficientBalance ? (theme === "dark" ? "text-gray-500" : "text-gray-400") : ""}`}
+                  >
+                    {balanceFormatted}
+                  </p>
+                )}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      {showInsufficientBalance && (
+        <div
+          className={`text-left py-3 px-4 rounded-lg ${
+            theme === "dark"
+              ? "bg-amber-500/10 border border-amber-500/30"
+              : "bg-amber-50 border border-amber-200"
+          }`}
+        >
+          <p
+            className={`text-xs font-medium ${theme === "dark" ? "text-amber-400" : "text-amber-700"}`}
+          >
+            Insufficient balance
+          </p>
+          <p
+            className={`text-xs mt-1 ${theme === "dark" ? "text-amber-300" : "text-amber-600"}`}
+          >
+            You do not have enough funds to reach the target amount
+          </p>
+        </div>
+      )}
+
+      {showContinueButton && (
+        <div className="space-y-4">
+          <button
+            type="button"
+            onClick={() => selectedToken && onContinue(selectedToken)}
+            disabled={!selectedToken}
+            className={`w-full font-semibold py-3 px-4 rounded-[24px] transition-colors ${
+              theme === "dark"
+                ? "bg-blue-600 disabled:bg-gray-700 text-white disabled:text-gray-400 enabled:hover:bg-blue-700"
+                : "bg-blue-500 disabled:bg-gray-300 text-white disabled:text-gray-500 enabled:hover:bg-blue-600"
+            } disabled:cursor-not-allowed cursor-pointer`}
+          >
+            Continue
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TokenList

package/src/widget/components/TransferPending.tsx

@@ -0,0 +1,204 @@
+import { ExternalLink } from "lucide-react"
+import React, { useEffect } from "react"
+import type { TransactionState } from "../../prepareSend.js"
+import type { ActiveTheme } from "../../theme.js"
+
+interface TransferPendingProps {
+  onComplete: () => void
+  theme?: ActiveTheme
+  transactionStates: TransactionState[]
+}
+
+const _truncateHash = (hash: string) => {
+  return `${hash.slice(0, 6)}...${hash.slice(-4)}`
+}
+
+export const TransferPending: React.FC<TransferPendingProps> = ({
+  onComplete,
+  theme = "light",
+  transactionStates,
+}) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onComplete()
+    }, 5000)
+
+    return () => clearTimeout(timer)
+  }, [onComplete])
+
+  // Find the first pending transaction index
+  const activePendingIndex = transactionStates.findIndex(
+    (tx) => tx.state === "pending",
+  )
+
+  const renderStep = (tx: TransactionState, index: number) => {
+    const isPending = tx.state === "pending"
+    const isActivePending = index === activePendingIndex
+    const isAfterPending =
+      activePendingIndex !== -1 && index > activePendingIndex
+
+    const dotClasses = `relative w-3 h-3 rounded-full transition-colors ${
+      isAfterPending
+        ? theme === "dark"
+          ? "bg-gray-700"
+          : "bg-gray-300"
+        : tx.state === "confirmed"
+          ? theme === "dark"
+            ? "bg-green-500"
+            : "bg-green-600"
+          : tx.state === "failed"
+            ? theme === "dark"
+              ? "bg-red-500"
+              : "bg-red-600"
+            : theme === "dark"
+              ? "bg-blue-500"
+              : "bg-blue-600"
+    } ${isActivePending ? "animate-[pulse_1.5s_ease-in-out_infinite]" : ""}`
+
+    const labelClasses = `mt-2 text-xs transition-colors text-center whitespace-nowrap flex items-center gap-1 ${
+      isPending || isAfterPending
+        ? theme === "dark"
+          ? "text-gray-400 font-medium"
+          : "text-gray-500 font-medium"
+        : theme === "dark"
+          ? "text-gray-100 font-semibold hover:underline"
+          : "text-gray-900 font-semibold hover:underline"
+    }`
+
+    const content = (
+      <>
+        <div className="relative">
+          <div className={dotClasses}>
+            {isActivePending && (
+              <div
+                className={`absolute inset-0 rounded-full ${
+                  theme === "dark" ? "bg-blue-500" : "bg-blue-600"
+                } animate-[pulseRing_2s_cubic-bezier(0.4,0,0.6,1)_infinite]`}
+              />
+            )}
+          </div>
+        </div>
+        <div className="mt-2 flex justify-center">
+          <div className={labelClasses}>
+            {tx.label}
+            {!isPending && !isAfterPending && (
+              <ExternalLink className="w-3 h-3" />
+            )}
+          </div>
+        </div>
+      </>
+    )
+
+    if (isPending || isAfterPending) {
+      return (
+        <div className="flex flex-col items-center relative">{content}</div>
+      )
+    }
+
+    return (
+      <a
+        href={tx.explorerUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex flex-col items-center relative"
+      >
+        {content}
+      </a>
+    )
+  }
+
+  const renderDots = (index: number) => {
+    const isActiveDots = index === activePendingIndex - 1
+
+    return (
+      <div className="flex-1 flex items-center justify-center mx-4">
+        <div className="flex items-center space-x-2">
+          {[...Array(3)].map((_, i) => (
+            <div
+              key={i}
+              className={`w-1 h-1 rounded-full ${
+                theme === "dark"
+                  ? index >= activePendingIndex
+                    ? "bg-gray-700"
+                    : "bg-gray-600"
+                  : index >= activePendingIndex
+                    ? "bg-gray-300"
+                    : "bg-gray-400"
+              } ${isActiveDots ? "animate-[dotFadeIn_1.5s_ease-in-out_infinite]" : ""}`}
+              style={{
+                animationDelay: isActiveDots ? `${i * 0.2}s` : "0s",
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes dotFadeIn {
+            0% { opacity: 0.3; transform: scale(0.8); }
+            50% { opacity: 1; transform: scale(1.2); }
+            100% { opacity: 0.3; transform: scale(0.8); }
+          }
+          @keyframes pulseRing {
+            0% { transform: scale(0.7); opacity: 0; }
+            50% { opacity: 0.3; }
+            100% { transform: scale(2); opacity: 0; }
+          }
+        `}
+      </style>
+      <div className="space-y-8 flex flex-col items-center justify-center py-8">
+        <h2
+          className={`text-2xl font-bold ${theme === "dark" ? "text-white" : "text-gray-900"}`}
+        >
+          Transfer Pending
+        </h2>
+
+        {/* Large Spinner */}
+        <div
+          className={`animate-spin rounded-full h-16 w-16 border-b-2 ${
+            theme === "dark" ? "border-blue-400" : "border-blue-500"
+          }`}
+          style={{ borderTopWidth: "2px", borderBottomWidth: "2px" }}
+        />
+
+        <div className="w-full max-w-2xl">
+          <div className="relative flex items-center justify-center pb-8">
+            <div
+              className={`flex items-center ${
+                transactionStates.length === 1
+                  ? "w-auto"
+                  : transactionStates.length === 2
+                    ? "w-[200px]"
+                    : "w-full justify-between"
+              }`}
+            >
+              {/* Steps with dotted lines */}
+              {transactionStates.map((tx, index) => (
+                <React.Fragment key={`${tx.transactionHash}-${index}`}>
+                  {/* Step */}
+                  <div className="flex flex-col items-center">
+                    {renderStep(tx, index)}
+                  </div>
+
+                  {/* Dotted line after each dot except the last one */}
+                  {index < transactionStates.length - 1 && renderDots(index)}
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <p className={theme === "dark" ? "text-gray-400" : "text-gray-500"}>
+          Waiting for confirmation...
+        </p>
+      </div>
+    </>
+  )
+}
+
+export default TransferPending