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

package/src/components/ViewTransition.tsx

@@ -1,81 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import type { NavigationDirection } from "../store/useRouter";
-import { useRouter } from "../store/useRouter";
-import { VIEW_TRANSITION_DURATION_MS } from "../constants";
-import { cn } from "@0xsquid/ui";
-
-interface ViewTransitionProps {
-  viewId: string;
-  children: React.ReactElement;
-}
-
-const ENTER_CLASS: Record<NavigationDirection, string> = {
-  forward: "tw-animate-slide-in-right",
-  backward: "tw-animate-slide-in-left",
-};
-
-const EXIT_CLASS: Record<NavigationDirection, string> = {
-  forward: "tw-animate-slide-out-left",
-  backward: "tw-animate-slide-out-right",
-};
-
-interface ExitingSlot {
-  viewId: string;
-  element: React.ReactElement;
-}
-
-export function ViewTransition({ viewId, children }: ViewTransitionProps) {
-  const direction = useRouter((s) => s.direction);
-  const prevChildrenRef = useRef(children);
-  const [exiting, setExiting] = useState<ExitingSlot | null>(null);
-  const [activeId, setActiveId] = useState(viewId);
-
-  // Detect view change during render (React "derive state from props" pattern)
-  if (viewId !== activeId) {
-    setExiting({ viewId: activeId, element: prevChildrenRef.current });
-    setActiveId(viewId);
-  }
-
-  // Keep ref in sync with latest children for the active view
-  prevChildrenRef.current = children;
-
-  // Safety timeout: clear exiting slot if onAnimationEnd doesn't fire
-  useEffect(() => {
-    if (!exiting) return;
-    const timer = setTimeout(
-      () => setExiting(null),
-      VIEW_TRANSITION_DURATION_MS + 50,
-    );
-    return () => clearTimeout(timer);
-  }, [exiting]);
-
-  const handleAnimationEnd = (e: React.AnimationEvent) => {
-    if (e.target !== e.currentTarget) return;
-    setExiting(null);
-  };
-
-  const isAnimating = exiting !== null;
-
-  return (
-    <div className="tw-relative tw-flex-1 tw-overflow-hidden tw-w-full">
-      {exiting && direction && (
-        <div
-          key={exiting.viewId}
-          className={`tw-absolute tw-inset-0 tw-flex tw-flex-col tw-will-change-transform ${EXIT_CLASS[direction]}`}
-        >
-          {exiting.element}
-        </div>
-      )}
-      <div
-        key={viewId}
-        className={cn(
-          "tw-absolute tw-inset-0 tw-flex tw-flex-col tw-will-change-transform",
-          isAnimating && direction && ENTER_CLASS[direction],
-        )}
-        onAnimationEnd={isAnimating ? handleAnimationEnd : undefined}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/components/shared/buttons/button.tsx

@@ -1,17 +0,0 @@
-import { cn } from "@0xsquid/ui";
-
-type ButtonProps = React.ComponentProps<"button">;
-
-export function Button(props: ButtonProps) {
-  return (
-    <button
-      {...props}
-      className={cn(
-        "tw-flex tw-justify-center tw-items-center tw-flex-1 tw-self-stretch tw-rounded-2xl tw-text-lg tw-text-grey-900 tw-bg-grey-100 tw-bg-cta-button-light dark:tw-bg-cta-button-dark tw-shadow-cta-button-light dark:tw-shadow-cta-button-dark",
-        // disabled
-        "disabled:tw-cursor-not-allowed disabled:tw-bg-grey-800 disabled:tw-text-grey-600 disabled:dark:tw-bg-grey-800 disabled:dark:tw-text-grey-500",
-        props.className,
-      )}
-    />
-  );
-}

package/src/components/shared/icons/types.ts

@@ -1,3 +0,0 @@
-export interface IconProps extends React.ComponentProps<"svg"> {
-  size?: `${number}rem`;
-}

package/src/components/shared/icons/user-round.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "./types";
-
-export function UserRoundIcon({ size = "1.5rem", ...props }: IconProps) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="8" r="5" />
-      <path d="M20 21a8 8 0 0 0-16 0" />
-    </svg>
-  );
-}

package/src/components/shared/navigation/base-navbar.tsx

@@ -1,15 +0,0 @@
-import { cn } from "@0xsquid/ui";
-
-type BaseNavBarProps = React.ComponentProps<"nav">;
-
-export function BaseNavBar({ className, ...props }: BaseNavBarProps) {
-  return (
-    <nav
-      {...props}
-      className={cn(
-        "tw-flex tw-py-3 tw-px-4 tw-items-center tw-self-stretch tw-h-16",
-        className,
-      )}
-    />
-  );
-}

package/src/components/shared/navigation/sub-navbar.tsx

@@ -1,46 +0,0 @@
-import { ArrowLeftIcon, IconButton, SearchIcon } from "@0xsquid/ui";
-import { useRouter } from "../../../store/useRouter";
-import { BaseNavBar } from "./base-navbar";
-
-interface SubNavBarProps {
-  title?: string;
-  input?: React.ComponentProps<"input">;
-}
-
-export function SubNavBar({ title, input }: SubNavBarProps) {
-  const pop = useRouter((s) => s.pop);
-
-  return (
-    <BaseNavBar className="tw-gap-2">
-      <IconButton
-        onClick={pop}
-        icon={
-          <ArrowLeftIcon
-            className="tw-text-grey-100 [&>path]:tw-stroke-[3]"
-            size="1.5rem"
-          />
-        }
-      />
-
-      {input ? (
-        <div className="tw-flex tw-relative tw-flex-1 tw-items-center">
-          <SearchIcon
-            size="1rem"
-            className="tw-absolute tw-left-0 tw-top-1/2 -tw-translate-y-1/2 tw-text-material-light-average tw-pl-2 tw-w-fit"
-          />
-
-          <input
-            className="tw-flex tw-h-8 tw-text-grey-100 tw-py-1 tw-pl-7 tw-pr-2 tw-items-center tw-gap-1 tw-flex-1 tw-rounded-squid-s tw-border tw-border-material-light-thin tw-bg-grey-800 placeholder:tw-text-lg tw-placeholder-material-light-average"
-            {...input}
-          />
-
-          <span className="tw-size-squid-xl" />
-        </div>
-      ) : title ? (
-        <span className="tw-text-grey-100 tw-text-lg tw-font-squid-main tw-font-medium">
-          {title}
-        </span>
-      ) : null}
-    </BaseNavBar>
-  );
-}

package/src/components/token-badge-icon.tsx

@@ -1,31 +0,0 @@
-import { Image } from "@0xsquid/ui";
-
-interface TokenBadgeIconProps {
-  tokenSrc: string;
-  chainSrc?: string;
-}
-
-export function TokenBadgeIcon({ tokenSrc, chainSrc }: TokenBadgeIconProps) {
-  return (
-    <div className="tw-size-squid-xl tw-rounded-full tw-relative tw-shrink-0">
-      <Image
-        src={tokenSrc}
-        size="xlarge"
-        rounded="full"
-        shadow
-        border="inset"
-      />
-      {chainSrc && (
-        <span className="tw-absolute -tw-bottom-1 -tw-left-1">
-          <Image
-            src={chainSrc}
-            size="small"
-            rounded="xxs"
-            style={{ width: "1rem", height: "1rem" }}
-            border="outline-sm"
-          />
-        </span>
-      )}
-    </div>
-  );
-}

package/src/components/token-list-item.tsx

@@ -1,84 +0,0 @@
-import { formatUsdAmount } from "@0xsquid/react-hooks";
-import { cn, TextSkeleton } from "@0xsquid/ui";
-import { TokenBadgeIcon } from "./token-badge-icon";
-
-interface TokenListItemProps extends React.ComponentProps<"button"> {
-  icon: string;
-  chainIcon?: string;
-  symbol: string;
-  name: string;
-  balance?: string;
-  price: number;
-  usdValue?: number;
-  disabled?: boolean;
-  isLoadingBalance?: boolean;
-}
-
-export function TokenListItem({
-  icon,
-  chainIcon,
-  symbol,
-  name,
-  balance,
-  price,
-  usdValue,
-  disabled,
-  isLoadingBalance,
-  ...props
-}: TokenListItemProps) {
-  const showUsdOnHover = (usdValue ?? 0) > 0;
-
-  return (
-    <li className="tw-self-stretch">
-      <button
-        aria-disabled={disabled}
-        tabIndex={disabled ? -1 : undefined}
-        title={disabled ? "Insufficient balance" : undefined}
-        className={cn(
-          "tw-group/token-item tw-flex tw-h-14 tw-px-4 tw-items-center tw-gap-2 tw-self-stretch tw-w-full hover:tw-bg-material-light-thin",
-          disabled && "tw-opacity-40 tw-cursor-not-allowed",
-        )}
-        {...props}
-      >
-        <TokenBadgeIcon tokenSrc={icon} chainSrc={chainIcon} />
-
-        <div className="tw-flex tw-flex-col tw-justify-center tw-gap-0.5 tw-items-start tw-flex-1 tw-self-stretch tw-overflow-hidden -tw-mt-2">
-          <span className="tw-text-grey-100 tw-text-lg tw-truncate tw-max-w-full">
-            {name}
-          </span>
-
-          <div className="tw-flex tw-justify-center tw-items-center tw-gap-1 tw-leading-[0.7]">
-            {isLoadingBalance ? (
-              <TextSkeleton width="3em" className="tw-h-3" isLoading />
-            ) : showUsdOnHover ? (
-              <>
-                {balance && (
-                  <span className="tw-text-sm tw-text-material-light-thick tw-leading-[inherit] group-hover/token-item:tw-hidden">
-                    {balance}
-                  </span>
-                )}
-                <span className="tw-text-sm tw-text-material-light-thick tw-leading-[inherit] tw-hidden group-hover/token-item:tw-inline">
-                  {formatUsdAmount(usdValue)}
-                </span>
-              </>
-            ) : (
-              balance && (
-                <span className="tw-text-sm tw-text-material-light-thick tw-leading-[inherit]">
-                  {balance}
-                </span>
-              )
-            )}
-
-            <span className="tw-text-sm tw-text-material-light-average tw-leading-[inherit]">
-              {symbol}
-            </span>
-          </div>
-        </div>
-
-        <div className="tw-flex tw-items-start tw-justify-center tw-text-material-light-thick">
-          {formatUsdAmount(price)}
-        </div>
-      </button>
-    </li>
-  );
-}

package/src/components/view-container.tsx

@@ -1,16 +0,0 @@
-import { cn } from "@0xsquid/ui";
-
-export function ViewContainer({
-  className,
-  ...props
-}: React.ComponentProps<"section">) {
-  return (
-    <section
-      {...props}
-      className={cn(
-        "tw-flex tw-flex-col tw-items-center tw-flex-1 tw-self-stretch tw-border-t tw-border-grey-800 tw-py-1 tw-overflow-auto tw-h-full tw-scrollbar-hidden",
-        className,
-      )}
-    />
-  );
-}

package/src/constants.ts

@@ -1 +0,0 @@
-export const VIEW_TRANSITION_DURATION_MS = 250;

package/src/css.d.ts

@@ -1,4 +0,0 @@
-declare module "*.css" {
-  const content: string;
-  export default content;
-}

package/src/hooks/ui/useMainCTAButtonState.ts

@@ -1,143 +0,0 @@
-import {
-  useApproval,
-  useEstimate,
-  useExecuteTransaction,
-  useSwap,
-  useWallet,
-} from "@0xsquid/react-hooks";
-import { useRouter } from "../../store/useRouter";
-import { useIsPaymentMode } from "../../store/use-deposit-store";
-import { useDepositRoute } from "../use-deposit-route";
-import { useTokenSelection } from "../use-token-selection";
-
-interface ButtonState {
-  label: string;
-  onClick?: () => void;
-  disabled?: boolean;
-  isLoading?: boolean;
-}
-
-export function useMainCTAButtonState(): ButtonState {
-  const push = useRouter((store) => store.push);
-  const { connectedWallets, isChainTypeConnected } = useWallet();
-  const { token, chain, balance } = useTokenSelection();
-  const { fromAmount: typedAmount, fromAmountChanged } = useSwap();
-  const isPaymentMode = useIsPaymentMode();
-  const isConnected = connectedWallets.length > 0;
-
-  const {
-    routeData,
-    quotedSourceAmount,
-    showLoading: isRouteLoading,
-  } = useDepositRoute();
-
-  const amount = isPaymentMode ? quotedSourceAmount : typedAmount;
-  const { routeApproved, approveRoute } = useApproval({
-    squidRoute: routeData,
-  });
-  const { executeSwap, isLoading: isExecuting } =
-    useExecuteTransaction(routeData);
-  const { minAmountValueWarnMsg, fromTokenPaysGasFees, isGasBalanceEnough } =
-    useEstimate(routeData);
-
-  if (!isConnected) {
-    return {
-      label: "Connect wallet",
-      onClick: () => push({ id: "connect-wallet", chainType: null }),
-    };
-  }
-
-  if (chain && !isChainTypeConnected(chain.chainType)) {
-    return {
-      label: "Connect wallet",
-      onClick: () => push({ id: "connect-wallet", chainType: chain.chainType }),
-    };
-  }
-
-  if (!token) {
-    return {
-      label: "Select a token",
-      disabled: true,
-    };
-  }
-
-  if (!amount || amount === "0") {
-    return {
-      label: "Enter amount",
-      disabled: true,
-    };
-  }
-
-  if (!balance || Number(amount) > Number(balance)) {
-    return {
-      label: "Insufficient balance",
-      disabled: true,
-    };
-  }
-
-  if (isRouteLoading) {
-    return {
-      label: "Getting quotes...",
-      disabled: true,
-      isLoading: true,
-    };
-  }
-
-  if (!routeData) {
-    return {
-      label: "No route available",
-      disabled: true,
-    };
-  }
-
-  if (
-    fromTokenPaysGasFees &&
-    !isGasBalanceEnough &&
-    minAmountValueWarnMsg !== undefined &&
-    Number(minAmountValueWarnMsg) > 0
-  ) {
-    return {
-      label: "Fit gas",
-      onClick: () => fromAmountChanged(minAmountValueWarnMsg),
-    };
-  }
-
-  if (routeApproved.isLoading) {
-    return {
-      label: "Checking approval...",
-      disabled: true,
-      isLoading: true,
-    };
-  }
-
-  if (routeApproved.data === false) {
-    if (approveRoute.isLoading) {
-      return {
-        label: "Approving...",
-        disabled: true,
-        isLoading: true,
-      };
-    }
-
-    return {
-      label: `Approve ${token.symbol}`,
-      onClick: () => approveRoute.mutate(),
-    };
-  }
-
-  if (isExecuting) {
-    return {
-      label: isPaymentMode ? "Paying..." : "Depositing...",
-      disabled: true,
-      isLoading: true,
-    };
-  }
-
-  return {
-    label: isPaymentMode ? "Pay" : "Deposit",
-    onClick: () => {
-      void executeSwap();
-      push({ id: "transaction-progress" });
-    },
-  };
-}

package/src/hooks/use-auto-select-token.ts

@@ -1,65 +0,0 @@
-import { useEffect, useRef } from "react";
-import {
-  CHAIN_IDS,
-  chainTypeToNativeTokenAddressMap,
-  useSquidTokens,
-  useSwap,
-  useWallet,
-} from "@0xsquid/react-hooks";
-import { ChainType } from "@0xsquid/squid-types";
-
-const CHAIN_TYPE_PRIORITY: ChainType[] = [
-  ChainType.EVM,
-  ChainType.SOLANA,
-  ChainType.COSMOS,
-  ChainType.SUI,
-  ChainType.BTC,
-  ChainType.XRPL,
-  ChainType.STELLAR,
-];
-
-const DEFAULT_CHAIN_ID_BY_TYPE: Record<ChainType, string> = {
-  [ChainType.EVM]: CHAIN_IDS.ETHEREUM,
-  [ChainType.COSMOS]: CHAIN_IDS.OSMOSIS,
-  [ChainType.BTC]: CHAIN_IDS.BITCOIN,
-  [ChainType.SOLANA]: CHAIN_IDS.SOLANA,
-  [ChainType.SUI]: CHAIN_IDS.SUI,
-  [ChainType.XRPL]: CHAIN_IDS.XRPL,
-  [ChainType.STELLAR]: CHAIN_IDS.STELLAR,
-};
-
-export function useAutoSelectToken() {
-  const { fromToken: token, onSwapChange } = useSwap();
-  const { connectedWalletsByChainType } = useWallet();
-  const { findToken, tokens } = useSquidTokens();
-  const hasAutoSelected = useRef(false);
-
-  useEffect(() => {
-    if (token != null) {
-      hasAutoSelected.current = false;
-      return;
-    }
-
-    if (hasAutoSelected.current) return;
-    if (tokens.length === 0) return;
-
-    const connectedChainType = CHAIN_TYPE_PRIORITY.find((ct) => {
-      const walletState = connectedWalletsByChainType[ct];
-      return !!walletState?.wallet && !!walletState?.address;
-    });
-
-    if (!connectedChainType) return;
-
-    const nativeAddress = chainTypeToNativeTokenAddressMap[connectedChainType];
-    const defaultChainId = DEFAULT_CHAIN_ID_BY_TYPE[connectedChainType];
-    const nativeToken = findToken(nativeAddress, defaultChainId);
-
-    if (nativeToken) {
-      onSwapChange({
-        fromChainId: nativeToken.chainId,
-        fromTokenAddress: nativeToken.address,
-      });
-      hasAutoSelected.current = true;
-    }
-  }, [token, connectedWalletsByChainType, tokens, findToken, onSwapChange]);
-}

package/src/hooks/use-deposit-route.ts

@@ -1,58 +0,0 @@
-import {
-  formatBNToReadable,
-  getSquidRouteErrorMessage,
-  useGetRouteWrapper,
-  useMultiChainWallet,
-  useSwap,
-} from "@0xsquid/react-hooks";
-import type { RouteResponse } from "@0xsquid/squid-types";
-import { useDepositStore } from "../store/use-deposit-store";
-import { selectCurrentView, useRouter } from "../store/useRouter";
-
-function formatRouteError(message: string): string {
-  if (message === "Low liquidity, please reduce swap amount and try again") {
-    return "Low liquidity, select a different token or reduce the amount";
-  }
-  return message;
-}
-
-export function useDepositRoute(): {
-  routeData: RouteResponse["route"] | undefined;
-  quotedSourceAmount: string | undefined;
-  showLoading: boolean;
-  routeErrorMessage: string | undefined;
-} {
-  const config = useDepositStore((s) => s.config);
-  const { fromChain, fromToken, toChain, toToken, fromAmount, toAmount } =
-    useSwap();
-  const { connectedAddress } = useMultiChainWallet(fromChain);
-  const sourceAddress = connectedAddress.address;
-  const currentView = useRouter(selectCurrentView);
-
-  const quoteOnly = !sourceAddress || !config?.destinationAddress;
-
-  const enabled =
-    currentView.id === "main" &&
-    Boolean(
-      fromChain && fromToken && toChain && toToken && (fromAmount || toAmount),
-    );
-
-  const { routeData, showLoading, squidRouteError } = useGetRouteWrapper({
-    quoteOnly,
-    enabled,
-  });
-
-  const quotedSourceAmount =
-    routeData && fromToken
-      ? formatBNToReadable(routeData.estimate.fromAmount, fromToken.decimals)
-      : undefined;
-
-  return {
-    routeData,
-    quotedSourceAmount,
-    showLoading,
-    routeErrorMessage: squidRouteError
-      ? formatRouteError(getSquidRouteErrorMessage(squidRouteError))
-      : undefined,
-  };
-}

package/src/hooks/use-token-selection.ts

@@ -1,17 +0,0 @@
-import {
-  useMultiChainBalance,
-  useMultiChainWallet,
-  useSwap,
-} from "@0xsquid/react-hooks";
-
-export function useTokenSelection() {
-  const { fromToken: token, fromChain: chain } = useSwap();
-  const { connectedAddress } = useMultiChainWallet(chain);
-  const { balance } = useMultiChainBalance({
-    chain,
-    token: token ?? undefined,
-    userAddress: connectedAddress.address,
-  });
-
-  return { token, chain, balance };
-}