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

package/src/components/ViewTransition.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/css.d.ts

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

package/src/hooks/ui/useMainCTAButtonState.ts

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

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

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

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