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

package/dist/types/DepositWidget.d.ts

@@ -5,3 +5,4 @@ interface DepositWidgetProps {
 }
 export declare function DepositWidget({ config, }: DepositWidgetProps): React.ReactElement;
 export {};
+//# sourceMappingURL=DepositWidget.d.ts.map

package/dist/types/components/ViewTransition.d.ts

@@ -5,3 +5,4 @@ interface ViewTransitionProps {
 }
 export declare function ViewTransition({ viewId, children }: ViewTransitionProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=ViewTransition.d.ts.map

package/dist/types/components/shared/buttons/button.d.ts

@@ -1,3 +1,4 @@
 type ButtonProps = React.ComponentProps<"button">;
 export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/types/components/shared/icons/types.d.ts

@@ -1,3 +1,4 @@
 export interface IconProps extends React.ComponentProps<"svg"> {
     size?: `${number}rem`;
 }
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/shared/icons/user-round.d.ts

@@ -1,2 +1,3 @@
 import type { IconProps } from "./types";
 export declare function UserRoundIcon({ size, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=user-round.d.ts.map

package/dist/types/components/shared/navigation/base-navbar.d.ts

@@ -1,3 +1,4 @@
 type BaseNavBarProps = React.ComponentProps<"nav">;
 export declare function BaseNavBar({ className, ...props }: BaseNavBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=base-navbar.d.ts.map

package/dist/types/components/shared/navigation/sub-navbar.d.ts

@@ -4,3 +4,4 @@ interface SubNavBarProps {
 }
 export declare function SubNavBar({ title, input }: SubNavBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=sub-navbar.d.ts.map

package/dist/types/components/token-badge-icon.d.ts

@@ -4,3 +4,4 @@ interface TokenBadgeIconProps {
 }
 export declare function TokenBadgeIcon({ tokenSrc, chainSrc }: TokenBadgeIconProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=token-badge-icon.d.ts.map

package/dist/types/components/token-list-item.d.ts

@@ -11,3 +11,4 @@ interface TokenListItemProps extends React.ComponentProps<"button"> {
 }
 export declare function TokenListItem({ icon, chainIcon, symbol, name, balance, price, usdValue, disabled, isLoadingBalance, ...props }: TokenListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=token-list-item.d.ts.map

package/dist/types/components/view-container.d.ts

@@ -1 +1,2 @@
 export declare function ViewContainer({ className, ...props }: React.ComponentProps<"section">): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=view-container.d.ts.map

package/dist/types/constants.d.ts

@@ -1 +1,2 @@
 export declare const VIEW_TRANSITION_DURATION_MS = 250;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/hooks/ui/useMainCTAButtonState.d.ts

@@ -6,3 +6,4 @@ interface ButtonState {
 }
 export declare function useMainCTAButtonState(): ButtonState;
 export {};
+//# sourceMappingURL=useMainCTAButtonState.d.ts.map

package/dist/types/hooks/use-auto-select-token.d.ts

@@ -1 +1,2 @@
 export declare function useAutoSelectToken(): void;
+//# sourceMappingURL=use-auto-select-token.d.ts.map

package/dist/types/hooks/use-deposit-route.d.ts

@@ -5,3 +5,4 @@ export declare function useDepositRoute(): {
     showLoading: boolean;
     routeErrorMessage: string | undefined;
 };
+//# sourceMappingURL=use-deposit-route.d.ts.map

package/dist/types/hooks/use-token-selection.d.ts

@@ -3,3 +3,4 @@ export declare function useTokenSelection(): {
     chain: import("@0xsquid/squid-types").ChainData | undefined;
     balance: string;
 };
+//# sourceMappingURL=use-token-selection.d.ts.map

package/dist/types/hooks/use-transaction-history.d.ts

@@ -4,3 +4,4 @@ export declare function useTransactionHistory(): {
     isError: boolean;
     groups: DayGroup[];
 };
+//# sourceMappingURL=use-transaction-history.d.ts.map

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { DepositWidget } from "./DepositWidget";
 export type { DepositConfig, WidgetView, WidgetViewId } from "./types";
 export type { Theme, ThemeType } from "@0xsquid/ui";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/services/assets-service.d.ts

@@ -4,3 +4,4 @@ export type TokenWithBalance = Token & {
 };
 export declare function sortTokensByBalance(tokens: TokenWithBalance[]): TokenWithBalance[];
 export declare function filterTokensByChain(tokens: TokenWithBalance[], chainId: string | null): TokenWithBalance[];
+//# sourceMappingURL=assets-service.d.ts.map

package/dist/types/services/wallet-history/format.d.ts

@@ -8,3 +8,4 @@ export interface DayGroup {
 export declare function toFormattedTx(tx: SquidTransaction, sourceChain: ChainData | undefined): FormattedTx;
 export declare function pendingSwapToFormattedTx(pending: SwapTransactionHistory, findToken: (address?: string, chainId?: string) => Token | undefined, findChain: (chainId: string | undefined) => ChainData | undefined): FormattedTx;
 export declare function groupAndSortByDay(txs: FormattedTx[]): DayGroup[];
+//# sourceMappingURL=format.d.ts.map

package/dist/types/services/wallet-history/format.test.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=format.test.d.ts.map

package/dist/types/services/wallet-history/get-main-explorer-url.d.ts

@@ -21,3 +21,4 @@ export interface MainExplorer {
     name: string;
 }
 export declare function getMainExplorerUrl(transaction: ExplorerInput): MainExplorer | undefined;
+//# sourceMappingURL=get-main-explorer-url.d.ts.map

package/dist/types/services/wallet-history/get-wallet-history.d.ts

@@ -1,2 +1,3 @@
 import type { SquidTransaction } from "./types";
 export declare function getWalletHistory(address: string, integratorId: string, apiUrl: string): Promise<SquidTransaction[]>;
+//# sourceMappingURL=get-wallet-history.d.ts.map

package/dist/types/services/wallet-history/types.d.ts

@@ -64,3 +64,4 @@ export interface FormattedTx {
     };
     id: string;
 }
+//# sourceMappingURL=types.d.ts.map

package/dist/types/services/wallet-history/validation.d.ts

@@ -1,2 +1,3 @@
 import type { SquidTransaction } from "./types";
 export declare function isSquidTransaction(tx: unknown): tx is SquidTransaction;
+//# sourceMappingURL=validation.d.ts.map

package/dist/types/store/use-deposit-store.d.ts

@@ -7,3 +7,4 @@ export declare const useDepositStore: import("zustand").UseBoundStore<import("zu
 export declare const useIsPaymentMode: () => boolean;
 export declare const usePaymentAmount: () => string | null;
 export {};
+//# sourceMappingURL=use-deposit-store.d.ts.map

package/dist/types/store/use-input-mode.d.ts

@@ -3,3 +3,4 @@ export declare const useInputMode: import("zustand").UseBoundStore<import("zusta
     mode: UserInputType;
     setMode: (_mode: UserInputType) => void;
 }>>;
+//# sourceMappingURL=use-input-mode.d.ts.map

package/dist/types/store/useRouter.d.ts

@@ -10,3 +10,4 @@ interface WidgetNavigationState {
 export declare const selectCurrentView: (state: WidgetNavigationState) => WidgetView;
 export declare const useRouter: import("zustand").UseBoundStore<import("zustand").StoreApi<WidgetNavigationState>>;
 export {};
+//# sourceMappingURL=useRouter.d.ts.map

package/dist/types/types.d.ts

@@ -41,3 +41,4 @@ export type DepositConfig = (BaseDepositConfig & {
     amount: string;
 });
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/utils/format-date.d.ts

@@ -1,2 +1,3 @@
 export declare function formatDateToHhMm(date: Date): string;
 export declare function formatDayHeader(yyyyMmDd: string): string;
+//# sourceMappingURL=format-date.d.ts.map

package/dist/types/utils/format-date.test.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=format-date.test.d.ts.map

package/dist/types/utils/transaction.d.ts

@@ -8,3 +8,4 @@ export declare function matchesDestinationToken(toToken: {
     chainId: string;
 }, destinationToken: DepositConfig["destinationToken"]): boolean;
 export declare function isPaymentTx(tx: SquidTransaction, paymentAmount: string, destinationTokenDecimals: number): boolean;
+//# sourceMappingURL=transaction.d.ts.map

package/dist/types/views/connect-wallet/connect-wallet-view.d.ts

@@ -4,3 +4,4 @@ interface ConnectWalletViewProps {
 }
 export declare function ConnectWalletView({ chainType }: ConnectWalletViewProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=connect-wallet-view.d.ts.map

package/dist/types/views/connect-wallet/wallet-list-item.d.ts

@@ -7,3 +7,4 @@ interface WalletListItemProps extends React.ComponentProps<"button"> {
 }
 export declare function WalletListItem({ wallet, isConnecting, showAsMultiChain, parentProps, ...props }: WalletListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=wallet-list-item.d.ts.map

package/dist/types/views/main/amount-input.d.ts

@@ -8,3 +8,4 @@ interface AmountInputProps extends NumericInputProps {
 }
 export declare function AmountInput({ balance, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, inputModeButton, debounceInput, allowMaxButton, readOnly, errorMessage, loading, forcedUsdDisplay, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=amount-input.d.ts.map

package/dist/types/views/main/connect-prompt.d.ts

@@ -1 +1,2 @@
 export declare function ConnectPrompt(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=connect-prompt.d.ts.map

package/dist/types/views/main/deposit-amount-input.d.ts

@@ -1 +1,2 @@
 export declare function DepositAmountInput(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=deposit-amount-input.d.ts.map

package/dist/types/views/main/deposit-form.d.ts

@@ -1 +1,2 @@
 export declare function DepositForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=deposit-form.d.ts.map

package/dist/types/views/main/main-cta-button.d.ts

@@ -1 +1,2 @@
 export declare function MainCTAButton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=main-cta-button.d.ts.map

package/dist/types/views/main/main-view.d.ts

@@ -1 +1,2 @@
 export declare function MainView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=main-view.d.ts.map

package/dist/types/views/main/navbar/actions.d.ts

@@ -1 +1,2 @@
 export declare function Actions(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=actions.d.ts.map

package/dist/types/views/main/navbar/icon.d.ts

@@ -1 +1,2 @@
 export declare function Icon(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/dist/types/views/main/navbar/navbar.d.ts

@@ -1 +1,2 @@
 export declare function NavBar(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=navbar.d.ts.map

package/dist/types/views/main/navbar/title.d.ts

@@ -8,3 +8,4 @@ interface TitleLabelInput {
 }
 export declare function buildTitleLabel({ isPaymentMode, paymentAmount, tokenSymbol, tokenUsdPrice, name, }: TitleLabelInput): string;
 export {};
+//# sourceMappingURL=title.d.ts.map

package/dist/types/views/main/recipient/account.d.ts

@@ -12,3 +12,4 @@ interface AvatarProps {
 }
 export declare function Avatar({ icon, onDisconnect }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=account.d.ts.map

package/dist/types/views/main/recipient/recipient.d.ts

@@ -1 +1,2 @@
 export declare function Recipient(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=recipient.d.ts.map

package/dist/types/views/main/token-selector.d.ts

@@ -1 +1,2 @@
 export declare function TokenSelector(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=token-selector.d.ts.map

package/dist/types/views/qr-code.d.ts

@@ -1 +1,2 @@
 export declare function QrCodeView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/types/views/render-view.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 import type { WidgetView } from "../types";
 export declare function renderView(view: WidgetView): React.ReactElement;
+//# sourceMappingURL=render-view.d.ts.map

package/dist/types/views/select-chain/chain-type-meta.d.ts

@@ -5,3 +5,4 @@ interface ChainTypeMeta {
 }
 export declare const CHAIN_TYPE_META: Record<ChainType, ChainTypeMeta>;
 export {};
+//# sourceMappingURL=chain-type-meta.d.ts.map

package/dist/types/views/select-chain/select-chain-view.d.ts

@@ -4,3 +4,4 @@ interface SelectChainViewProps {
 }
 export declare function SelectChainView({ wallet }: SelectChainViewProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
+//# sourceMappingURL=select-chain-view.d.ts.map

package/dist/types/views/select-token.d.ts

@@ -1 +1,2 @@
 export declare function SelectTokenView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select-token.d.ts.map

package/dist/types/views/transaction-history/activity-list-item.d.ts

@@ -2,3 +2,4 @@ import type { FormattedTx } from "../../services/wallet-history/types";
 type Props = FormattedTx;
 export declare function ActivityListItem({ fromAmount, fromToken, fromChain, toAmount, toToken, timestamp, status, explorer, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=activity-list-item.d.ts.map

package/dist/types/views/transaction-history/transaction-history-view.d.ts

@@ -1 +1,2 @@
 export declare function TransactionHistoryView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transaction-history-view.d.ts.map

package/dist/types/views/transaction-progress/helpers.d.ts

@@ -12,3 +12,4 @@ export declare function TimeDetail({ status, timer, estimatedTimeDisplay, }: {
     timer: string;
     estimatedTimeDisplay: string | undefined;
 }): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/types/views/transaction-progress/transaction-progress-view.d.ts

@@ -1 +1,2 @@
 export declare function TransactionProgressView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transaction-progress-view.d.ts.map

package/dist/types/views/transaction-progress/use-transaction-progress.d.ts

@@ -15,3 +15,4 @@ export declare function useTransactionProgress(): {
         address: string;
     };
 };
+//# sourceMappingURL=use-transaction-progress.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@0xsquid/deposit-widget",
   "description": "Squid deposit widget",
-  "version": "0.1.0",
+  "version": "0.1.1-beta.1",
   "author": "",
   "license": "MIT",
   "type": "module",
@@ -11,21 +11,21 @@
   },
   "main": "dist/cjs/index.cjs",
   "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/cjs/index.cjs"
     }
   },
-  "files": [
-    "dist",
-    "src"
-  ],
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "!dist/**/*.d.ts.map"
+  ],
   "scripts": {
     "build": "yarn build-css && rollup -c",
     "build-css": "tailwindcss -i ./src/tailwind.css -o ./src/compiled-tailwind.css",

package/src/DepositWidget.tsx

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