@0xsquid/deposit-widget 0.1.0-beta.0

package/src/store/useRouter.ts

@@ -0,0 +1,49 @@
+import { create } from "zustand";
+import type { WidgetView } from "../types";
+
+const INITIAL_VIEW: WidgetView = { id: "main" };
+
+export type NavigationDirection = "forward" | "backward";
+
+interface WidgetNavigationState {
+  stack: WidgetView[];
+  direction: NavigationDirection | null;
+  push: (_view: WidgetView) => void;
+  pop: () => void;
+  popToRoot: () => void;
+}
+
+export const selectCurrentView = (state: WidgetNavigationState): WidgetView =>
+  state.stack[state.stack.length - 1] ?? INITIAL_VIEW;
+
+export const useRouter = create<WidgetNavigationState>((set) => ({
+  stack: [INITIAL_VIEW],
+  direction: null,
+
+  push: (view: WidgetView): void =>
+    set((state) => {
+      if (selectCurrentView(state).id === view.id) return state;
+      return {
+        stack: [...state.stack, view],
+        direction: "forward",
+      };
+    }),
+
+  pop: (): void =>
+    set((state) => {
+      if (state.stack.length <= 1) return state;
+      return {
+        stack: state.stack.slice(0, -1),
+        direction: "backward",
+      };
+    }),
+
+  popToRoot: (): void =>
+    set((state) => {
+      if (state.stack.length <= 1) return state;
+      return {
+        stack: [INITIAL_VIEW],
+        direction: "backward",
+      };
+    }),
+}));

package/src/tailwind.css

@@ -0,0 +1,16 @@
+@import "@0xsquid/ui/dist/custom-styles.css";
+
+@font-face {
+  font-family: "DMSansVariable";
+  src:
+    local("DMSansVariable"),
+    url("./fonts/DMSans-Variable.woff2") format("woff2");
+  font-display: swap;
+}
+
+.squid-style-container--preflight {
+  @tailwind base;
+}
+
+@tailwind components;
+@tailwind utilities;

package/src/types.ts

@@ -0,0 +1,39 @@
+import type { Wallet } from "@0xsquid/react-hooks";
+import type { ChainType } from "@0xsquid/squid-types";
+import type { Theme, ThemeType } from "@0xsquid/ui";
+
+// View definitions — discriminated union so params are typed per view
+export type WidgetView =
+  | { id: "main" }
+  | { id: "connect-wallet"; chainType: ChainType | null }
+  | { id: "select-chain"; wallet: Wallet }
+  | { id: "qr-code" }
+  | { id: "select-token" }
+  | { id: "transaction-history" }
+  | { id: "transaction-progress" };
+
+export type WidgetViewId = WidgetView["id"];
+
+interface BaseDepositConfig {
+  destinationAddress: string;
+
+  destinationToken: {
+    address: string;
+    chainId: string;
+  };
+
+  integrator: {
+    id: string;
+    name: string;
+    logoUrl: string;
+  };
+
+  apiUrl?: string;
+
+  theme?: Theme;
+  themeType?: ThemeType;
+}
+
+export type DepositConfig =
+  | (BaseDepositConfig & { mode: "deposit" })
+  | (BaseDepositConfig & { mode: "payment"; amount: string });

package/src/utils/format-date.test.ts

@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { formatDayHeader, formatDateToHhMm } from "./format-date";
+
+describe("formatDayHeader", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 3, 14));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("omits the year when the date is in the current year", () => {
+    expect(formatDayHeader("2026-01-05")).toBe("January 5");
+  });
+
+  it("includes the year when the date is not in the current year", () => {
+    expect(formatDayHeader("2024-12-31")).toBe("December 31, 2024");
+  });
+
+  it("handles single-digit months and days", () => {
+    expect(formatDayHeader("2026-03-07")).toBe("March 7");
+  });
+});
+
+describe("formatDateToHhMm", () => {
+  it("formats a date to a 2-digit hour and minute string", () => {
+    const date = new Date(2026, 3, 14, 9, 5);
+    expect(formatDateToHhMm(date)).toMatch(/09:05/);
+  });
+});

package/src/utils/format-date.ts

@@ -0,0 +1,25 @@
+export function formatDateToHhMm(date: Date): string {
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function formatDayHeader(yyyyMmDd: string): string {
+  const [year = 0, month = 0, day] = yyyyMmDd.split("-").map(Number);
+  const date = new Date(year, month - 1, day);
+  const currentYear = new Date().getFullYear();
+
+  if (year === currentYear) {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "long",
+      day: "numeric",
+    }).format(date);
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+}

package/src/utils/transaction.ts

@@ -0,0 +1,39 @@
+import { parseToBigInt } from "@0xsquid/react-hooks";
+import type { SwapTransactionHistory } from "@0xsquid/react-hooks";
+import { SquidTransaction } from "../services/wallet-history/types";
+import type { DepositConfig } from "../types";
+
+export function isSameTx(
+  tx: SquidTransaction,
+  pending: SwapTransactionHistory,
+): boolean {
+  if (!tx.transactionId || !pending.transactionId) return false;
+  return tx.transactionId.toLowerCase() === pending.transactionId.toLowerCase();
+}
+
+export function isSameAddress(a: string, b: string): boolean {
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+
+export function matchesDestinationToken(
+  toToken: { address: string; chainId: string },
+  destinationToken: DepositConfig["destinationToken"],
+): boolean {
+  return (
+    toToken.chainId === destinationToken.chainId &&
+    isSameAddress(toToken.address, destinationToken.address)
+  );
+}
+
+export function isPaymentTx(
+  tx: SquidTransaction,
+  paymentAmount: string,
+  destinationTokenDecimals: number,
+): boolean {
+  try {
+    const expected = parseToBigInt(paymentAmount, destinationTokenDecimals);
+    return tx.quote.route.estimate.toAmount === expected.toString();
+  } catch {
+    return false;
+  }
+}

package/src/views/connect-wallet/connect-wallet-view.tsx

@@ -0,0 +1,147 @@
+import { useCallback, useMemo, useState } from "react";
+import {
+  ConnectingWalletStatus,
+  useWallet,
+  useWallets,
+  sortWallets,
+} from "@0xsquid/react-hooks";
+import type { ConnectorID, Wallet } from "@0xsquid/react-hooks";
+import type { ChainType } from "@0xsquid/squid-types";
+import Fuse from "fuse.js";
+import { SubNavBar } from "../../components/shared/navigation/sub-navbar";
+import { useRouter } from "../../store/useRouter";
+import { WalletListItem } from "./wallet-list-item";
+import { ViewContainer } from "../../components/view-container";
+import { CHAIN_TYPE_META } from "../select-chain/chain-type-meta";
+
+const WALLET_PRIORITY_LIST: ConnectorID[] = [
+  "walletConnect",
+  "metamask",
+  "phantom",
+  "rabby",
+  "trustwallet",
+];
+
+function walletSupportsChainType(wallet: Wallet, chainType: ChainType) {
+  if (wallet.isMultiChain) {
+    return wallet.supportedNetworks.some((n) => n.chainType === chainType);
+  }
+  return wallet.type === chainType;
+}
+
+interface ConnectWalletViewProps {
+  chainType: ChainType | null;
+}
+
+export function ConnectWalletView({ chainType }: ConnectWalletViewProps) {
+  const { wallets } = useWallets();
+  const { connectWallet, connectingWalletState } = useWallet();
+  const pop = useRouter((s) => s.pop);
+  const push = useRouter((s) => s.push);
+  const [search, setSearch] = useState("");
+
+  const requiredChainType = chainType;
+
+  const connectingConnectorId =
+    connectingWalletState.status === ConnectingWalletStatus.CONNECTING
+      ? connectingWalletState.wallet?.connectorId
+      : undefined;
+
+  const isMultiChainWallet = useCallback(
+    (wallet: Wallet) =>
+      !requiredChainType &&
+      wallet.isMultiChain &&
+      wallet.supportedNetworks.length > 1 &&
+      !!wallet.isInstalled?.(),
+    [requiredChainType],
+  );
+
+  const onWalletClicked = async (wallet: Wallet) => {
+    if (isMultiChainWallet(wallet)) {
+      push({ id: "select-chain", wallet });
+      return;
+    }
+
+    try {
+      const selectedChainTypes = requiredChainType
+        ? [requiredChainType]
+        : undefined;
+      const connected = await connectWallet({ wallet, selectedChainTypes });
+      if (connected) {
+        pop();
+      }
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+    }
+  };
+
+  const sortedWallets = useMemo(
+    () =>
+      wallets.toSorted((a, b) => {
+        if (requiredChainType) {
+          const aSupports = walletSupportsChainType(a, requiredChainType);
+          const bSupports = walletSupportsChainType(b, requiredChainType);
+          if (aSupports !== bSupports) return aSupports ? -1 : 1;
+        }
+        return sortWallets(a, b, {
+          isMobile: false,
+          priorityList: WALLET_PRIORITY_LIST,
+        });
+      }),
+    [wallets, requiredChainType],
+  );
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(sortedWallets, {
+        isCaseSensitive: false,
+        includeScore: false,
+        minMatchCharLength: 1,
+        threshold: 0.4,
+        keys: ["name"],
+      }),
+    [sortedWallets],
+  );
+
+  const walletsToDisplay = useMemo(() => {
+    if (search.length === 0) return sortedWallets;
+    return fuse.search(search).map((result) => result.item);
+  }, [fuse, search, sortedWallets]);
+
+  const chainTypeWallets = useMemo(() => {
+    if (!requiredChainType) return walletsToDisplay;
+    return walletsToDisplay.filter((w) =>
+      walletSupportsChainType(w, requiredChainType),
+    );
+  }, [walletsToDisplay, requiredChainType]);
+
+  return (
+    <>
+      <SubNavBar
+        input={{
+          placeholder: requiredChainType
+            ? `Select ${CHAIN_TYPE_META[requiredChainType].name} wallet`
+            : "Select wallet",
+          onChange: (e) => setSearch(e.target.value),
+          autoComplete: "off",
+          autoCorrect: "off",
+          spellCheck: false,
+        }}
+      />
+
+      <ViewContainer>
+        <ul className="tw-flex tw-flex-col tw-items-start tw-flex-1 tw-self-stretch">
+          {chainTypeWallets.map((wallet) => (
+            <WalletListItem
+              key={wallet.connectorId}
+              wallet={wallet}
+              isConnecting={wallet.connectorId === connectingConnectorId}
+              showAsMultiChain={isMultiChainWallet(wallet)}
+              onClick={() => onWalletClicked(wallet)}
+            />
+          ))}
+        </ul>
+      </ViewContainer>
+    </>
+  );
+}

package/src/views/connect-wallet/wallet-list-item.tsx

@@ -0,0 +1,69 @@
+import type { Wallet } from "@0xsquid/react-hooks";
+import { ChevronLargeRightIcon, Loader, cn } from "@0xsquid/ui";
+
+interface WalletListItemProps extends React.ComponentProps<"button"> {
+  wallet: Wallet;
+  isConnecting?: boolean;
+  showAsMultiChain?: boolean;
+  parentProps?: React.ComponentProps<"li">;
+}
+
+export function WalletListItem({
+  wallet,
+  isConnecting,
+  showAsMultiChain,
+  parentProps,
+  ...props
+}: WalletListItemProps) {
+  const isInstalled = wallet.isInstalled?.();
+
+  return (
+    <li className="tw-self-stretch" {...parentProps}>
+      <button
+        className="tw-group/wallet tw-flex tw-min-h-14 tw-h-14 tw-px-4 tw-items-center tw-gap-3 tw-self-stretch tw-w-full hover:tw-bg-material-light-thin"
+        disabled={isConnecting}
+        {...props}
+      >
+        {/* icon */}
+        <div className="tw-flex tw-size-squid-xl tw-justify-center tw-items-center tw-aspect-square tw-rounded-xl tw-shadow-icon-light dark:tw-shadow-icon-dark">
+          {wallet.icon && (
+            <img
+              src={wallet.icon}
+              alt={wallet.name}
+              className="tw-size-full tw-rounded-xl"
+            />
+          )}
+        </div>
+
+        {/* label */}
+        <span className="tw-flex tw-flex-col tw-justify-center tw-items-start tw-gap-2 tw-flex-1 tw-self-stretch tw-text-grey-200 tw-text-lg">
+          {wallet.name}
+        </span>
+
+        {/* detail */}
+        {isConnecting ? (
+          <Loader size="20" className="tw-text-grey-100" />
+        ) : (
+          <div className="tw-flex tw-items-center">
+            {isInstalled && (
+              <div
+                className={cn(
+                  "tw-flex tw-py-squid-s tw-flex-col tw-justify-center tw-items-end tw-self-stretch tw-text-material-light-thick tw-text-base tw-transition-transform tw-duration-200",
+                  showAsMultiChain && "group-hover/wallet:-tw-translate-x-1",
+                )}
+              >
+                Installed
+              </div>
+            )}
+            {showAsMultiChain && (
+              <ChevronLargeRightIcon
+                className="tw-text-material-light-thick tw-transition-all tw-duration-200 tw-w-0 tw-opacity-0 group-hover/wallet:tw-w-4 group-hover/wallet:tw-opacity-100"
+                size="0.75rem"
+              />
+            )}
+          </div>
+        )}
+      </button>
+    </li>
+  );
+}

package/src/views/main/amount-input.tsx

@@ -0,0 +1,272 @@
+import {
+  AnimateNumber,
+  CaptionText,
+  ChevronTopSmallIcon,
+  cn,
+  NumericInputProps,
+  Tooltip,
+  useNumericInput,
+  UserInputType,
+} from "@0xsquid/ui";
+import { useEffect, useRef } from "react";
+import { useInputMode } from "../../store/use-input-mode";
+
+const placeholder = "0";
+const BASE_FONT_PX = 48; // tw-text-5xl = 3rem
+const WRAPPER_PAD_X = 20; // tw-px-squid-xs = 0.625rem × 2
+const MIN_SCALE = 0.5;
+
+interface AmountInputProps extends NumericInputProps {
+  allowMaxButton?: boolean;
+  readOnly?: boolean;
+  errorMessage?: string;
+  loading?: boolean;
+  forcedUsdDisplay?: string;
+}
+
+export function AmountInput({
+  balance = "0",
+  token,
+  onAmountChange,
+  forcedAmount,
+  maxUsdDecimals = 2,
+  formatIfVerySmall = {
+    token: "0.001",
+    usd: "0.01",
+  },
+  inputModeButton,
+  debounceInput = true,
+  allowMaxButton = true,
+  readOnly = false,
+  errorMessage,
+  loading = false,
+  forcedUsdDisplay,
+}: AmountInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputValueSpyRef = useRef<HTMLSpanElement>(null);
+  const inputWidthSpyRef = useRef<HTMLSpanElement>(null);
+  const wrapperRef = useRef<HTMLLabelElement & HTMLDivElement>(null);
+  const {
+    userInputType,
+    inputValue,
+    handleInputChange,
+    handleSwitchInputMode,
+    isTokenAmountVerySmall,
+    isUsdAmountVerySmall,
+    amountFormatted,
+    onBalanceButtonClick,
+  } = useNumericInput({
+    onAmountChange,
+    token,
+    balance,
+    debounceInput,
+    forcedAmount,
+    formatIfVerySmall,
+    inputModeButton,
+    maxUsdDecimals,
+    direction: "from",
+    initialInputMode: UserInputType.USD,
+  });
+
+  const setInputMode = useInputMode((s) => s.setMode);
+  useEffect(() => {
+    setInputMode(userInputType);
+  }, [userInputType, setInputMode]);
+
+  const displayedNumber =
+    userInputType === UserInputType.USD && forcedUsdDisplay && !inputValue
+      ? forcedUsdDisplay
+      : inputValue || placeholder;
+  const fullDisplayedNumber =
+    userInputType === UserInputType.USD
+      ? `$${displayedNumber}`
+      : displayedNumber;
+
+  useEffect(() => {
+    const spy = inputValueSpyRef.current;
+    const wrapper = wrapperRef.current;
+    const row = wrapper?.parentElement;
+    if (!spy || !wrapper || !row) return;
+
+    const apply = () => {
+      const containerWidth = row.clientWidth - WRAPPER_PAD_X;
+      const spyWidth = spy.getBoundingClientRect().width;
+      if (containerWidth === 0 || spyWidth === 0) return;
+
+      // Scale against the full visible value, including the "$" prefix in USD
+      // mode, so read-only/payment values don't overflow by the prefix width.
+      const scale = Math.min(1, Math.max(MIN_SCALE, containerWidth / spyWidth));
+      wrapper.style.fontSize = `${BASE_FONT_PX * scale}px`;
+      if (inputRef.current) {
+        const inputWidthSpy = inputWidthSpyRef.current;
+        // Editable USD renders "$" beside the input, so the input itself must
+        // be sized from the number-only spy. Token mode can reuse full width.
+        const inputWidth =
+          userInputType === UserInputType.USD && inputWidthSpy
+            ? inputWidthSpy.getBoundingClientRect().width
+            : spyWidth;
+
+        inputRef.current.style.width = `${inputWidth * scale}px`;
+      }
+    };
+
+    const observer = new ResizeObserver(apply);
+    observer.observe(spy);
+    observer.observe(row);
+    apply();
+
+    return () => observer.disconnect();
+  }, [readOnly, displayedNumber, fullDisplayedNumber, userInputType]);
+  const wrapperClassName = cn(
+    "tw-text-grey-100 tw-flex tw-items-center tw-overflow-hidden tw-px-squid-xs",
+    readOnly
+      ? "tw-cursor-default"
+      : "tw-cursor-text focus-within:tw-bg-material-light-thin hover:tw-bg-material-light-thin group-focus-within/amount-input:tw-text-royal-500",
+  );
+
+  // em so the radius scales with the wrapper's font-size (which the
+  // auto-shrink effect mutates) — keeps the corner proportional to the
+  // shrunk height instead of looking pill-like at small font sizes.
+  const wrapperStyle = { borderRadius: "0.4em" };
+
+  const inputContent = (
+    <>
+      {/* Hidden full visible value, fixed at base font size, for wrapper scaling. */}
+      <span
+        ref={inputValueSpyRef}
+        className="tw-pointer-events-none tw-absolute tw-opacity-0 tw-text-5xl"
+      >
+        {fullDisplayedNumber}
+      </span>
+      {/* Hidden number-only value for editable USD input width. */}
+      <span
+        ref={inputWidthSpyRef}
+        className="tw-pointer-events-none tw-absolute tw-opacity-0 tw-text-5xl"
+      >
+        {displayedNumber}
+      </span>
+
+      {readOnly ? (
+        <span className="tw-relative tw-py-2 tw-flex tw-items-center">
+          {userInputType === UserInputType.USD && <span>$</span>}
+          <AnimateNumber
+            isLoading={loading}
+            number={displayedNumber}
+            showMask
+          />
+          {loading && (
+            <span className="tw-pointer-events-none tw-absolute tw-inset-0 tw-z-10 tw-overflow-hidden">
+              <span className="tw-absolute tw-inset-0 tw-animate-shimmer tw-bg-[length:200%_100%] tw-bg-shimmer-overlay-light dark:tw-bg-shimmer-overlay-dark" />
+            </span>
+          )}
+        </span>
+      ) : (
+        <>
+          {userInputType === UserInputType.USD && <span>$</span>}
+          <input
+            inputMode="decimal"
+            pattern="[0-9.,]*"
+            ref={inputRef}
+            value={inputValue}
+            onChange={handleInputChange}
+            className="tw-bg-transparent tw-placeholder-grey-100 tw-outline-none focus:tw-outline-none focus:tw-placeholder-royal-500"
+            placeholder={placeholder}
+          />
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <section className="tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-gap-1 tw-relative tw-overflow-hidden">
+      <div className="tw-flex tw-w-full tw-items-center tw-justify-center tw-self-stretch tw-text-5xl tw-group/amount-input">
+        {readOnly ? (
+          <div
+            ref={wrapperRef}
+            className={wrapperClassName}
+            style={wrapperStyle}
+          >
+            {inputContent}
+          </div>
+        ) : (
+          <label
+            ref={wrapperRef}
+            className={wrapperClassName}
+            style={wrapperStyle}
+          >
+            {inputContent}
+          </label>
+        )}
+      </div>
+
+      <div className="tw-relative tw-flex tw-justify-center tw-self-stretch">
+        <footer className="tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-text-sm tw-text-material-light-thick tw-w-fit">
+          <Tooltip
+            {...(userInputType === UserInputType.TOKEN
+              ? inputModeButton?.tokenModeTooltip
+              : inputModeButton?.usdModeTooltip)}
+            tooltipWidth="max"
+            childrenClassName="tw-rounded-squid-s"
+            containerClassName="tw-rounded-squid-s tw-w-fit"
+          >
+            <button
+              onClick={() => {
+                handleSwitchInputMode();
+                inputRef.current?.focus();
+              }}
+              className="tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-3 tw-py-0.5 hover:tw-bg-material-light-thin"
+            >
+              {userInputType === UserInputType.TOKEN ? (
+                <span className="tw-flex tw-items-center tw-justify-center">
+                  <CaptionText>{isUsdAmountVerySmall ? "<" : ""}$</CaptionText>
+                  <CaptionText>
+                    {forcedUsdDisplay && !inputValue
+                      ? forcedUsdDisplay
+                      : isUsdAmountVerySmall
+                        ? formatIfVerySmall.token
+                        : amountFormatted}
+                  </CaptionText>
+                </span>
+              ) : (
+                <>
+                  <CaptionText>
+                    {isTokenAmountVerySmall ? "<" : ""}
+                    {isTokenAmountVerySmall
+                      ? formatIfVerySmall.token
+                      : amountFormatted}
+                  </CaptionText>{" "}
+                  <CaptionText>{token.symbol}</CaptionText>
+                </>
+              )}
+
+              <span className="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-size-3 tw-bg-material-light-thin tw-aspect-square">
+                <ChevronTopSmallIcon />
+              </span>
+            </button>
+          </Tooltip>
+
+          {allowMaxButton && Number(balance) > 0 && (
+            <button
+              onClick={() => {
+                onBalanceButtonClick();
+                inputRef.current?.focus();
+              }}
+              className="tw-rounded-squid-s tw-px-3 tw-py-0.5 hover:tw-bg-material-light-thin"
+            >
+              <CaptionText>MAX</CaptionText>
+            </button>
+          )}
+        </footer>
+
+        {/* Anchored to the footer via top-full so it sits just below the
+            input + balance row regardless of the section's flex-1 height;
+            absolute so toggling it never reflows the input. */}
+        {errorMessage && (
+          <CaptionText className="tw-text-status-negative tw-text-center tw-absolute tw-top-full tw-mt-2 tw-left-0 tw-right-0 tw-px-4 [text-wrap:pretty]">
+            {errorMessage}
+          </CaptionText>
+        )}
+      </div>
+    </section>
+  );
+}