@0xsquid/deposit-widget 0.1.0 → 0.1.1-beta.1

package/src/store/useRouter.ts

@@ -1,49 +0,0 @@
-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

@@ -1,16 +0,0 @@
-@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

@@ -1,39 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,272 +0,0 @@
-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>
-  );
-}