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

package/src/views/select-token.tsx

@@ -0,0 +1,227 @@
+import { useEffect, useRef, useMemo, useState } from "react";
+import {
+  filterViewableTokens,
+  formatTokenAmount,
+  getTokenImage,
+  searchTokens,
+  useAllConnectedWalletBalances,
+  useSquidChains,
+} from "@0xsquid/react-hooks";
+import { SubNavBar } from "../components/shared/navigation/sub-navbar";
+import {
+  filterTokensByChain,
+  sortTokensByBalance,
+  type TokenWithBalance,
+} from "../services/assets-service";
+import { ViewContainer } from "../components/view-container";
+import { Button, cn, Image } from "@0xsquid/ui";
+import { TokenListItem } from "../components/token-list-item";
+import { VIEW_TRANSITION_DURATION_MS } from "../constants";
+import { useSwap } from "@0xsquid/react-hooks";
+import { useRouter } from "../store/useRouter";
+import { useDepositStore, usePaymentAmount } from "../store/use-deposit-store";
+import { List, type RowComponentProps } from "react-window";
+import { isSameAddress } from "../utils/transaction";
+
+const selectedOutline =
+  "tw-outline tw-outline-2 tw-outline-material-light-thick tw-outline-offset-2";
+
+type TokenRowProps = {
+  tokens: TokenWithBalance[];
+  chainIconMap: Record<string, string>;
+  onSelect: (token: TokenWithBalance) => void;
+  paymentAmountUsd: number | null;
+  isLoadingBalances: boolean;
+};
+
+function TokenRow({
+  index,
+  style,
+  tokens,
+  chainIconMap,
+  onSelect,
+  paymentAmountUsd,
+  isLoadingBalances,
+}: RowComponentProps<TokenRowProps>) {
+  const token = tokens[index];
+  if (!token) return null;
+
+  const balanceNum = +token.balance;
+  const balanceUsd = balanceNum * (token.usdPrice ?? 0);
+  const insufficientBalance =
+    !isLoadingBalances &&
+    paymentAmountUsd !== null &&
+    balanceUsd < paymentAmountUsd;
+
+  return (
+    <div style={style}>
+      <TokenListItem
+        balance={
+          balanceNum > 0
+            ? formatTokenAmount(token.balance, { exact: false })
+            : ""
+        }
+        icon={getTokenImage(token)}
+        chainIcon={chainIconMap[token.chainId]}
+        name={token.name}
+        price={token.usdPrice ?? 0}
+        usdValue={balanceUsd}
+        symbol={token.symbol}
+        disabled={insufficientBalance}
+        isLoadingBalance={isLoadingBalances}
+        onClick={() => !insufficientBalance && onSelect(token)}
+      />
+    </div>
+  );
+}
+
+export function SelectTokenView() {
+  const { tokens, isInitialLoading: isLoadingBalances } =
+    useAllConnectedWalletBalances();
+
+  const { chains } = useSquidChains();
+  const { onSwapChange, toToken } = useSwap();
+  const pop = useRouter((s) => s.pop);
+  const destinationToken = useDepositStore((s) => s.config?.destinationToken);
+  const paymentAmount = usePaymentAmount();
+  const paymentAmountUsd = paymentAmount
+    ? Number(paymentAmount) * (toToken?.usdPrice ?? 0)
+    : null;
+
+  const onSelect = (token: TokenWithBalance) => {
+    onSwapChange({
+      fromChainId: token.chainId,
+      fromTokenAddress: token.address,
+    });
+    pop();
+  };
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [selectedChainId, setSelectedChainId] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => searchRef.current?.focus({ preventScroll: true }),
+      VIEW_TRANSITION_DURATION_MS,
+    );
+    return () => clearTimeout(timer);
+  }, []);
+
+  const chainIconMap = useMemo(
+    () => Object.fromEntries(chains.map((c) => [c.chainId, c.chainIconURI])),
+    [chains],
+  );
+
+  const filteredTokens = useMemo(() => {
+    const viewableTokens = filterViewableTokens(tokens, {});
+    const chainFiltered = filterTokensByChain(viewableTokens, selectedChainId);
+    const withoutDestToken = destinationToken
+      ? chainFiltered.filter(
+          (t) =>
+            !(
+              t.chainId === destinationToken.chainId &&
+              isSameAddress(t.address, destinationToken.address)
+            ),
+        )
+      : chainFiltered;
+
+    const matched = search
+      ? (searchTokens(search, withoutDestToken, chains) as TokenWithBalance[])
+      : withoutDestToken;
+
+    return sortTokensByBalance(matched);
+  }, [tokens, selectedChainId, search, chains, destinationToken]);
+
+  const selectChain = (chainId: string | null) => {
+    setSelectedChainId(chainId);
+    searchRef.current?.focus();
+  };
+
+  return (
+    <>
+      <SubNavBar
+        input={{
+          ref: searchRef,
+          placeholder: "Select coin",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+        }}
+      />
+
+      <ViewContainer>
+        <div
+          role="radiogroup"
+          aria-label="Filter by chain"
+          className="tw-flex tw-h-14 tw-px-4 tw-items-center tw-justify-stretch tw-gap-3 tw-self-stretch tw-w-full tw-overflow-auto tw-min-h-14 tw-scrollbar-hidden"
+        >
+          <Button
+            role="radio"
+            aria-checked={selectedChainId === null}
+            size="sm"
+            variant="tertiary"
+            className={cn(
+              "!tw-p-3 !tw-h-8",
+              selectedChainId === null && selectedOutline,
+            )}
+            onClick={() => selectChain(null)}
+          >
+            <span className="tw-text-xs">ALL</span>
+          </Button>
+
+          {chains.map((chain) => (
+            <button
+              key={chain.chainId}
+              role="radio"
+              aria-checked={selectedChainId === chain.chainId}
+              className={cn(
+                "tw-shrink-0 tw-rounded-squid-xs",
+                selectedChainId === chain.chainId && selectedOutline,
+              )}
+              onClick={() => selectChain(chain.chainId)}
+            >
+              <Image
+                size="large"
+                rounded="xs"
+                shadow
+                style={{ width: "2rem", height: "2rem" }}
+                src={chain.chainIconURI}
+              />
+            </button>
+          ))}
+        </div>
+        {filteredTokens.length > 0 ? (
+          <List
+            tagName="ul"
+            className="tw-scrollbar-hidden tw-flex-1 tw-self-stretch"
+            style={{ flex: "1 1 0" }}
+            rowCount={filteredTokens.length}
+            rowHeight={56} // tw-h-14
+            rowComponent={TokenRow}
+            rowProps={{
+              tokens: filteredTokens,
+              chainIconMap,
+              onSelect,
+              paymentAmountUsd,
+              isLoadingBalances,
+            }}
+            overscanCount={5}
+          />
+        ) : (
+          <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-px-4">
+            <span className="tw-text-material-light-thick tw-text-lg tw-font-medium tw-text-center tw-truncate tw-max-w-full">
+              {search ? (
+                <>
+                  No tokens matching &quot;
+                  <span className="tw-text-grey-100">{search}</span>
+                  &quot;
+                </>
+              ) : (
+                "No tokens found"
+              )}
+            </span>
+          </div>
+        )}
+      </ViewContainer>
+    </>
+  );
+}

package/src/views/transaction-history/activity-list-item.tsx

@@ -0,0 +1,87 @@
+import {
+  BodyText,
+  CaptionText,
+  cn,
+  Loader,
+  SquareArrowTopRightIcon,
+} from "@0xsquid/ui";
+import { TokenBadgeIcon } from "../../components/token-badge-icon";
+import type { FormattedTx } from "../../services/wallet-history/types";
+import { useIsPaymentMode } from "../../store/use-deposit-store";
+import { formatDateToHhMm } from "../../utils/format-date";
+
+type Props = FormattedTx;
+
+export function ActivityListItem({
+  fromAmount,
+  fromToken,
+  fromChain,
+  toAmount,
+  toToken,
+  timestamp,
+  status,
+  explorer,
+}: Props) {
+  const isPaymentMode = useIsPaymentMode();
+
+  return (
+    <li>
+      <a
+        href={explorer?.url}
+        target={explorer ? "_blank" : undefined}
+        rel={explorer ? "noopener noreferrer" : undefined}
+        title={explorer ? `View on ${explorer.name}` : undefined}
+        className={cn(
+          "tw-flex tw-h-[4.5rem] tw-px-4 tw-items-center tw-gap-3 tw-shrink-0",
+          explorer && "hover:tw-bg-material-light-thin",
+        )}
+      >
+        <TokenBadgeIcon tokenSrc={fromToken.logo} chainSrc={fromChain.logo} />
+
+        <div className="tw-flex tw-flex-col tw-items-start tw-gap-0.5 tw-flex-1 tw-min-w-0">
+          <div className="tw-flex tw-items-center tw-gap-1 tw-self-stretch">
+            <BodyText size="small">
+              {isPaymentMode ? "Payment" : "Deposit"}
+            </BodyText>
+            {explorer && (
+              <SquareArrowTopRightIcon
+                size="0.875rem"
+                className="tw-text-grey-500"
+              />
+            )}
+            <BodyText size="small" className="tw-ml-auto">
+              {toAmount}
+            </BodyText>
+            <BodyText size="small" className="tw-text-grey-400">
+              {toToken.symbol}
+            </BodyText>
+          </div>
+
+          <div className="tw-flex tw-justify-between tw-items-center tw-self-stretch">
+            <div className="tw-flex tw-items-center tw-gap-1">
+              <CaptionText className="tw-text-grey-500">
+                Paid {fromAmount} {fromToken.symbol}
+              </CaptionText>
+            </div>
+
+            {status === "ongoing" ? (
+              <Loader
+                size="1rem"
+                strokeWidth="4"
+                className="tw-text-royal-500"
+              />
+            ) : status === "refunded" ? (
+              <CaptionText className="tw-text-status-negative">
+                Refunded
+              </CaptionText>
+            ) : (
+              <CaptionText className="tw-text-grey-500">
+                {formatDateToHhMm(new Date(timestamp))}
+              </CaptionText>
+            )}
+          </div>
+        </div>
+      </a>
+    </li>
+  );
+}

package/src/views/transaction-history/transaction-history-view.tsx

@@ -0,0 +1,58 @@
+import { BodyText, Loader, SectionTitle } from "@0xsquid/ui";
+import { SubNavBar } from "../../components/shared/navigation/sub-navbar";
+import { ViewContainer } from "../../components/view-container";
+import { useTransactionHistory } from "../../hooks/use-transaction-history";
+import { useIsPaymentMode } from "../../store/use-deposit-store";
+import { formatDayHeader } from "../../utils/format-date";
+import { ActivityListItem } from "./activity-list-item";
+
+export function TransactionHistoryView() {
+  const { isLoading, isError, groups } = useTransactionHistory();
+  const isPaymentMode = useIsPaymentMode();
+
+  return (
+    <>
+      <SubNavBar title="Activity" />
+
+      <ViewContainer>
+        {isLoading ? (
+          <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center">
+            <Loader size="2rem" className="tw-text-royal-500" />
+          </div>
+        ) : isError ? (
+          <Message>Error loading transactions</Message>
+        ) : groups.length === 0 ? (
+          <Message>
+            Your {isPaymentMode ? "payments" : "deposits"} will appear here
+          </Message>
+        ) : (
+          <div className="tw-flex tw-flex-col tw-w-full">
+            {groups.map((group) => (
+              <section key={group.day} className="tw-flex tw-flex-col">
+                <SectionTitle
+                  title={formatDayHeader(group.day)}
+                  className="tw-bg-transparent"
+                />
+                <ul className="tw-flex tw-flex-col">
+                  {group.transactions.map((tx) => (
+                    <ActivityListItem key={tx.id} {...tx} />
+                  ))}
+                </ul>
+              </section>
+            ))}
+          </div>
+        )}
+      </ViewContainer>
+    </>
+  );
+}
+
+function Message({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center tw-px-4 tw-text-center">
+      <BodyText size="small" className="tw-text-material-light-thick">
+        {children}
+      </BodyText>
+    </div>
+  );
+}

package/src/views/transaction-progress/helpers.tsx

@@ -0,0 +1,93 @@
+import { CaptionText, Transfer } from "@0xsquid/ui";
+import { DepositStatus } from "./use-transaction-progress";
+
+export function getStatusTitle(
+  status: DepositStatus,
+  isPaymentMode: boolean,
+): string {
+  const action = isPaymentMode ? "Payment" : "Deposit";
+  switch (status) {
+    case DepositStatus.CONFIRMING:
+      return "Confirm transaction";
+    case DepositStatus.PROCESSING:
+      return `${action} in progress`;
+    case DepositStatus.COMPLETED:
+      return `${action} complete`;
+    case DepositStatus.PARTIAL_SUCCESS:
+      return `${action} failed to complete`;
+    case DepositStatus.REJECTED:
+      return `${action} rejected`;
+    case DepositStatus.FAILED:
+      return `${action} failed`;
+  }
+}
+
+export function getStatusDescription(
+  status: DepositStatus,
+  {
+    amount,
+    symbol,
+    recipientName,
+    isPaymentMode,
+  }: {
+    amount: string;
+    symbol: string;
+    recipientName: string;
+    isPaymentMode: boolean;
+  },
+): string {
+  const verb = isPaymentMode ? "paid" : "deposited";
+  switch (status) {
+    case DepositStatus.CONFIRMING:
+      return "Authenticate the transaction in your wallet.";
+    case DepositStatus.PROCESSING:
+      return "Feel free to dismiss this dialog.";
+    case DepositStatus.COMPLETED:
+      return `You ${verb} ${amount} ${symbol} to ${recipientName} successfully.`;
+    case DepositStatus.PARTIAL_SUCCESS:
+      return "You received a refund to your wallet.";
+    case DepositStatus.REJECTED:
+      return "You declined the transaction in your wallet.";
+    case DepositStatus.FAILED:
+      return "Your tokens were safely returned to your wallet.";
+  }
+}
+
+export function getButtonLabel(status: DepositStatus): string {
+  switch (status) {
+    case DepositStatus.CONFIRMING:
+      return "Cancel";
+    case DepositStatus.PROCESSING:
+    case DepositStatus.COMPLETED:
+      return "Ok, done";
+    case DepositStatus.PARTIAL_SUCCESS:
+      return "Ok, go back";
+    case DepositStatus.REJECTED:
+    case DepositStatus.FAILED:
+      return "Ok, go back";
+  }
+}
+
+export function TimeDetail({
+  status,
+  timer,
+  estimatedTimeDisplay,
+}: {
+  status: DepositStatus;
+  timer: string;
+  estimatedTimeDisplay: string | undefined;
+}) {
+  switch (status) {
+    case DepositStatus.PROCESSING:
+      return estimatedTimeDisplay ? (
+        <Transfer from={timer} to={estimatedTimeDisplay} />
+      ) : (
+        <CaptionText>{timer}</CaptionText>
+      );
+    case DepositStatus.COMPLETED:
+    case DepositStatus.PARTIAL_SUCCESS:
+      return <CaptionText>{timer}</CaptionText>;
+    default:
+      return <CaptionText>{estimatedTimeDisplay ?? "—"}</CaptionText>;
+  }
+}

package/src/views/transaction-progress/transaction-progress-view.tsx

@@ -0,0 +1,217 @@
+import {
+  formatHash,
+  formatTokenAmount,
+  getTokenImage,
+  useEstimate,
+  useExecuteTransaction,
+  useSwap,
+} from "@0xsquid/react-hooks";
+import {
+  AnimationWrapper,
+  ArrowRightDownCircleIcon,
+  ArrowRightUpCircleIcon,
+  BodyText,
+  CaptionText,
+  IconLabel,
+  Image,
+  PropertyListItem,
+  SquareArrowTopRightIcon,
+  TimeFliesIcon,
+  transactionFailureAnimation,
+  transactionHalfSuccessAnimation,
+  transactionPendingAnimation,
+  transactionProcessingAnimation,
+  transactionRejectedAnimation,
+  transactionSuccessAnimation,
+  useTimer,
+  WalletFilledIcon,
+} from "@0xsquid/ui";
+import { useEffect } from "react";
+import { Button } from "../../components/shared/buttons/button";
+import { SubNavBar } from "../../components/shared/navigation/sub-navbar";
+import { ViewContainer } from "../../components/view-container";
+import { useDepositRoute } from "../../hooks/use-deposit-route";
+import {
+  useDepositStore,
+  useIsPaymentMode,
+} from "../../store/use-deposit-store";
+import { useRouter } from "../../store/useRouter";
+import {
+  getButtonLabel,
+  getStatusDescription,
+  getStatusTitle,
+  TimeDetail,
+} from "./helpers";
+import {
+  DepositStatus,
+  useTransactionProgress,
+} from "./use-transaction-progress";
+
+const progressAnimations: Record<DepositStatus, object> = {
+  [DepositStatus.CONFIRMING]: transactionPendingAnimation,
+  [DepositStatus.PROCESSING]: transactionProcessingAnimation,
+  [DepositStatus.COMPLETED]: transactionSuccessAnimation,
+  [DepositStatus.PARTIAL_SUCCESS]: transactionHalfSuccessAnimation,
+  [DepositStatus.REJECTED]: transactionRejectedAnimation,
+  [DepositStatus.FAILED]: transactionFailureAnimation,
+};
+
+export function TransactionProgressView() {
+  const popToRoot = useRouter((s) => s.popToRoot);
+  const isPaymentMode = useIsPaymentMode();
+  const config = useDepositStore((s) => s.config);
+  const { fromToken, toToken } = useSwap();
+
+  const { routeData } = useDepositRoute();
+  const { fromAmountFormatted: rawFromAmount, toAmount } =
+    useEstimate(routeData);
+  const { cancelSwap } = useExecuteTransaction(routeData);
+
+  const { status, estimatedTime, recipient, explorerLink } =
+    useTransactionProgress();
+
+  const { timer, startTimer, stopTimer } = useTimer({ immediateStart: false });
+
+  useEffect(() => {
+    if (status === DepositStatus.PROCESSING) {
+      startTimer();
+    } else if (
+      status === DepositStatus.COMPLETED ||
+      status === DepositStatus.PARTIAL_SUCCESS ||
+      status === DepositStatus.REJECTED ||
+      status === DepositStatus.FAILED
+    ) {
+      stopTimer();
+    }
+  }, [status, startTimer, stopTimer]);
+
+  const actionLabel = isPaymentMode ? "Payment" : "Deposit";
+  const fromAmountFormatted = formatTokenAmount(rawFromAmount ?? "0", {
+    exact: false,
+  });
+  const toAmountFormatted = formatTokenAmount(toAmount ?? "0", {
+    exact: false,
+  });
+
+  const handleClose = () => {
+    if (status === DepositStatus.CONFIRMING) {
+      cancelSwap();
+    }
+    popToRoot();
+  };
+
+  const title = getStatusTitle(status, isPaymentMode);
+  const description = getStatusDescription(status, {
+    amount: toAmountFormatted,
+    symbol: toToken?.symbol ?? "",
+    recipientName: recipient.name,
+    isPaymentMode,
+  });
+
+  return (
+    <>
+      <SubNavBar title={actionLabel} />
+
+      <ViewContainer className="!tw-py-0">
+        <div className="tw-flex tw-h-20 tw-w-full tw-items-center tw-justify-center tw-bg-animation-bg [&_svg_path]:tw-stroke-[6]">
+          <AnimationWrapper
+            style={{ height: "100%", maxHeight: "100%", width: "auto" }}
+            autoplay
+            loop
+            src={progressAnimations[status]}
+          />
+        </div>
+
+        <header className="tw-flex tw-w-full tw-flex-col tw-gap-squid-xs tw-px-squid-m tw-py-squid-s">
+          <div className="tw-flex tw-items-center tw-gap-2">
+            <BodyText size="large" className="tw-text-grey-300">
+              {title}
+            </BodyText>
+          </div>
+          <CaptionText className="tw-text-grey-500">{description}</CaptionText>
+        </header>
+
+        <ul className="tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs tw-squid-property-gradient-bg-odd-container">
+          <PropertyListItem
+            icon={<ArrowRightUpCircleIcon />}
+            label="You send"
+            detail={
+              <IconLabel src={getTokenImage(fromToken) ?? ""} rounded="full">
+                {fromAmountFormatted} {fromToken?.symbol}
+              </IconLabel>
+            }
+          />
+
+          <PropertyListItem
+            icon={<ArrowRightDownCircleIcon />}
+            label={`${actionLabel} amount`}
+            detail={
+              <IconLabel src={getTokenImage(toToken) ?? ""} rounded="full">
+                {toAmountFormatted} {toToken?.symbol}
+              </IconLabel>
+            }
+          />
+
+          <PropertyListItem
+            icon={<WalletFilledIcon size="24" />}
+            label="Recipient"
+            detail={
+              <span className="tw-flex tw-items-center tw-gap-squid-xxs">
+                {config?.integrator.logoUrl && (
+                  <Image
+                    src={config.integrator.logoUrl}
+                    size="medium"
+                    rounded="full"
+                  />
+                )}
+                {recipient.name}
+
+                <span className="tw-text-material-light-thick">
+                  (
+                  {formatHash({
+                    hash: recipient.address,
+                    chainType: toToken?.type,
+                  })}
+                  )
+                </span>
+              </span>
+            }
+          />
+
+          <PropertyListItem
+            icon={<TimeFliesIcon />}
+            label="Time"
+            detail={
+              <TimeDetail
+                status={status}
+                timer={timer}
+                estimatedTimeDisplay={estimatedTime}
+              />
+            }
+          />
+        </ul>
+
+        <footer className="tw-relative tw-flex tw-flex-col tw-p-2 tw-shrink-0 tw-self-stretch tw-mt-auto">
+          {explorerLink && (
+            <a
+              href={explorerLink.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="tw-group/explorer tw-w-fit tw-mx-auto tw-absolute tw-inset-x-0 tw-bottom-full tw-flex tw-justify-center tw-items-center tw-gap-1 tw-py-2 tw-text-sm tw-text-grey-300 hover:tw-text-grey-100 tw-transition-colors"
+            >
+              View on {explorerLink.name}
+              <SquareArrowTopRightIcon
+                size="0.75rem"
+                className="tw-transition-all tw-duration-200 tw-w-0 tw-opacity-0 group-hover/explorer:tw-w-4 group-hover/explorer:tw-opacity-100"
+              />
+            </a>
+          )}
+
+          <Button className="tw-min-h-12" onClick={handleClose}>
+            {getButtonLabel(status)}
+          </Button>
+        </footer>
+      </ViewContainer>
+    </>
+  );
+}