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

package/src/DepositWidget.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useMemo } from "react";
+import {
+  SquidProvider,
+  useAllConnectedWalletBalances,
+  useAllTransactionsStatus,
+  useSwap,
+} from "@0xsquid/react-hooks";
+import { darkTheme, lightTheme, ThemeProvider } from "@0xsquid/ui";
+import type { Theme, ThemeType } from "@0xsquid/ui";
+import compiledCss from "./compiled-tailwind.css";
+import { selectCurrentView, useRouter } from "./store/useRouter";
+import { ViewTransition } from "./components/ViewTransition";
+import { renderView } from "./views/render-view";
+import { useAutoSelectToken } from "./hooks/use-auto-select-token";
+import { useDepositStore, usePaymentAmount } from "./store/use-deposit-store";
+import type { DepositConfig } from "./types";
+
+interface DepositWidgetProps {
+  config: DepositConfig;
+}
+
+export function DepositWidget({
+  config,
+}: DepositWidgetProps): React.ReactElement {
+  const { theme, themeType } = config;
+  return (
+    <SquidProvider
+      config={{ integratorId: config.integrator.id, apiUrl: config.apiUrl }}
+      placeholder={
+        <WidgetLayout theme={theme} themeType={themeType}>
+          <WidgetSkeleton />
+        </WidgetLayout>
+      }
+    >
+      <WidgetLayout theme={theme} themeType={themeType}>
+        <DepositWidgetContent config={config} />
+      </WidgetLayout>
+    </SquidProvider>
+  );
+}
+
+function DepositWidgetContent({
+  config,
+}: {
+  config: DepositConfig;
+}): React.ReactElement {
+  const currentView = useRouter(selectCurrentView);
+  const setConfig = useDepositStore((s) => s.setConfig);
+  const { onSwapChange, toAmountChanged, fromAmountChanged } = useSwap();
+
+  useEffect(() => {
+    setConfig(config);
+  }, [config, setConfig]);
+
+  useEffect(() => {
+    onSwapChange({
+      toChainId: config.destinationToken.chainId,
+      toTokenAddress: config.destinationToken.address,
+      destinationAddress: { address: config.destinationAddress },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    config.destinationAddress,
+    config.destinationToken.chainId,
+    config.destinationToken.address,
+  ]);
+
+  const paymentAmount = usePaymentAmount();
+  useEffect(() => {
+    if (paymentAmount) {
+      fromAmountChanged("");
+      toAmountChanged(paymentAmount);
+    } else {
+      toAmountChanged("");
+      fromAmountChanged("");
+    }
+  }, [paymentAmount, toAmountChanged, fromAmountChanged]);
+
+  useAutoSelectToken();
+  useAllConnectedWalletBalances(); // Pre-warm balance cache
+  // Polls /v2/status for pending txs — also what registers them with Squid's backend for /history/wallet
+  useAllTransactionsStatus({ enabled: true });
+
+  return (
+    <ViewTransition viewId={currentView.id}>
+      {renderView(currentView)}
+    </ViewTransition>
+  );
+}
+
+interface WidgetLayoutProps {
+  theme?: Theme;
+  themeType?: ThemeType;
+  children: React.ReactNode;
+}
+
+function WidgetLayout({
+  theme,
+  themeType,
+  children,
+}: WidgetLayoutProps): React.ReactElement {
+  const mergedTheme = useMemo<Theme>(() => {
+    const base = themeType === "dark" ? darkTheme : lightTheme;
+    const merged = { ...base.color, ...theme?.color };
+    return {
+      ...base,
+      ...theme,
+      fontFamily: {
+        ...base.fontFamily,
+        "squid-main": '"DMSansVariable", sans-serif',
+        // Integrator override wins.
+        ...theme?.fontFamily,
+      },
+      color: {
+        ...merged,
+        "animation-bg": merged["grey-900"],
+        "animation-text": merged["animation-bg"] ?? merged["grey-900"],
+      },
+    };
+  }, [theme, themeType]);
+
+  return (
+    <ThemeProvider theme={mergedTheme} themeType={themeType}>
+      <style
+        id="squid-deposit-widget-inline-style"
+        dangerouslySetInnerHTML={{ __html: compiledCss }}
+      />
+      <div className="squid-style-container--preflight tw-bg-grey-900 tw-text-grey-100 tw-flex tw-w-widget-card tw-h-widget-card tw-flex-col tw-items-center tw-shrink-0 tw-rounded-3xl tw-border tw-border-grey-900 dark:tw-shadow-widget-card-dark tw-shadow-widget-card-light tw-font-medium">
+        {children}
+      </div>
+    </ThemeProvider>
+  );
+}
+
+function WidgetSkeleton(): React.ReactElement {
+  return (
+    <div className="tw-flex tw-flex-col tw-flex-1 tw-w-full tw-animate-pulse">
+      {/* Connect-wallet content: logo + heading + description */}
+      <div className="tw-flex tw-pt-3 tw-pb-8 tw-px-4 tw-flex-col tw-justify-end tw-items-center tw-gap-4 tw-flex-1">
+        <div className="tw-w-32 tw-h-32 tw-rounded-full tw-bg-grey-800" />
+
+        <div className="tw-flex tw-pt-2 tw-pb-4 tw-flex-col tw-items-center tw-gap-4">
+          <div className="tw-h-6 tw-w-48 tw-rounded tw-bg-grey-800" />
+          <div className="tw-flex tw-flex-col tw-items-center tw-gap-2">
+            <div className="tw-h-4 tw-w-56 tw-rounded tw-bg-grey-800" />
+            <div className="tw-h-4 tw-w-40 tw-rounded tw-bg-grey-800" />
+          </div>
+          <div className="tw-h-4 tw-w-20 tw-rounded tw-bg-grey-800" />
+        </div>
+      </div>
+
+      {/* CTA button */}
+      <div className="tw-px-4 tw-pb-4">
+        <div className="tw-h-12 tw-w-full tw-rounded-full tw-bg-grey-800" />
+      </div>
+    </div>
+  );
+}