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

package/dist/types/DepositWidget.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DepositConfig } from "./types";
+interface DepositWidgetProps {
+    config: DepositConfig;
+}
+export declare function DepositWidget({ config, }: DepositWidgetProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface ViewTransitionProps {
+    viewId: string;
+    children: React.ReactElement;
+}
+export declare function ViewTransition({ viewId, children }: ViewTransitionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { IconProps } from "./types";
+export declare function UserRoundIcon({ size, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+type BaseNavBarProps = React.ComponentProps<"nav">;
+export declare function BaseNavBar({ className, ...props }: BaseNavBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+interface SubNavBarProps {
+    title?: string;
+    input?: React.ComponentProps<"input">;
+}
+export declare function SubNavBar({ title, input }: SubNavBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+interface TokenBadgeIconProps {
+    tokenSrc: string;
+    chainSrc?: string;
+}
+export declare function TokenBadgeIcon({ tokenSrc, chainSrc }: TokenBadgeIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+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 declare function TokenListItem({ icon, chainIcon, symbol, name, balance, price, usdValue, disabled, isLoadingBalance, ...props }: TokenListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare function ViewContainer({ className, ...props }: React.ComponentProps<"section">): import("react/jsx-runtime").JSX.Element;

package/dist/types/constants.d.ts

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

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

@@ -0,0 +1,8 @@
+interface ButtonState {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    isLoading?: boolean;
+}
+export declare function useMainCTAButtonState(): ButtonState;
+export {};

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

@@ -0,0 +1 @@
+export declare function useAutoSelectToken(): void;

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

@@ -0,0 +1,7 @@
+import type { RouteResponse } from "@0xsquid/squid-types";
+export declare function useDepositRoute(): {
+    routeData: RouteResponse["route"] | undefined;
+    quotedSourceAmount: string | undefined;
+    showLoading: boolean;
+    routeErrorMessage: string | undefined;
+};

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

@@ -0,0 +1,5 @@
+export declare function useTokenSelection(): {
+    token: import("@0xsquid/react-hooks").Token | undefined;
+    chain: import("@0xsquid/squid-types").ChainData | undefined;
+    balance: string;
+};

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

@@ -0,0 +1,6 @@
+import { type DayGroup } from "../services/wallet-history/format";
+export declare function useTransactionHistory(): {
+    isLoading: boolean;
+    isError: boolean;
+    groups: DayGroup[];
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { DepositWidget } from "./DepositWidget";
+export type { DepositConfig, WidgetView, WidgetViewId } from "./types";
+export type { Theme, ThemeType } from "@0xsquid/ui";

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

@@ -0,0 +1,6 @@
+import type { Token } from "@0xsquid/squid-types";
+export type TokenWithBalance = Token & {
+    balance: string;
+};
+export declare function sortTokensByBalance(tokens: TokenWithBalance[]): TokenWithBalance[];
+export declare function filterTokensByChain(tokens: TokenWithBalance[], chainId: string | null): TokenWithBalance[];

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

@@ -0,0 +1,10 @@
+import { type SwapTransactionHistory } from "@0xsquid/react-hooks";
+import type { ChainData, Token } from "@0xsquid/squid-types";
+import type { FormattedTx, SquidTransaction } from "./types";
+export interface DayGroup {
+    day: string;
+    transactions: FormattedTx[];
+}
+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[];

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import type { ChainData } from "@0xsquid/squid-types";
+import type { RouteAction } from "./types";
+export interface ExplorerStatusResponse {
+    coralTransactionUrl?: string;
+    axelarTransactionUrl?: string;
+    transactionUrl?: string;
+    toChain?: {
+        transactionUrl?: string;
+    };
+}
+export interface ExplorerInput {
+    transactionId?: string;
+    routeType?: string;
+    sourceTxExplorerUrl?: string;
+    statusResponse?: ExplorerStatusResponse;
+    actions?: RouteAction[];
+    sourceChain?: ChainData | undefined;
+}
+export interface MainExplorer {
+    url: string;
+    name: string;
+}
+export declare function getMainExplorerUrl(transaction: ExplorerInput): MainExplorer | undefined;

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

@@ -0,0 +1,2 @@
+import type { SquidTransaction } from "./types";
+export declare function getWalletHistory(address: string, integratorId: string, apiUrl: string): Promise<SquidTransaction[]>;

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

@@ -0,0 +1,66 @@
+import type { isChainflipBridgeTransaction } from "@0xsquid/react-hooks";
+export type TransactionStatus = "ongoing" | "success" | "refunded";
+export type RouteAction = NonNullable<Parameters<typeof isChainflipBridgeTransaction>[0]>[number];
+export interface SquidTransactionToken {
+    address: string;
+    symbol: string;
+    decimals: number;
+    chainId: string;
+}
+export interface SquidTransaction {
+    createdAt: string;
+    fromChainId: string;
+    toChainId: string;
+    transactionId?: string;
+    routeType?: string;
+    sourceTxExplorerUrl?: string;
+    actions?: RouteAction[];
+    quote: {
+        route: {
+            params?: {
+                toAddress?: string;
+                fromAmount?: string;
+                toAmount?: string;
+            };
+            estimate: {
+                fromAmount: string;
+                fromToken: SquidTransactionToken;
+                toAmount: string;
+                toToken: SquidTransactionToken;
+            };
+        };
+    };
+    statusResponse: {
+        squidTransactionStatus: TransactionStatus;
+        coralTransactionUrl?: string;
+        axelarTransactionUrl?: string;
+        transactionUrl?: string;
+        fromChain?: {
+            transactionUrl?: string;
+        };
+        toChain?: {
+            transactionUrl?: string;
+        };
+    };
+}
+export interface FormattedTx {
+    fromToken: {
+        symbol: string;
+        logo: string;
+    };
+    fromChain: {
+        logo: string;
+    };
+    toToken: {
+        symbol: string;
+    };
+    fromAmount: string;
+    toAmount: string;
+    timestamp: string;
+    status: TransactionStatus;
+    explorer?: {
+        url: string;
+        name: string;
+    };
+    id: string;
+}

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

@@ -0,0 +1,2 @@
+import type { SquidTransaction } from "./types";
+export declare function isSquidTransaction(tx: unknown): tx is SquidTransaction;

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

@@ -0,0 +1,9 @@
+import type { DepositConfig } from "../types";
+interface DepositState {
+    config: DepositConfig | null;
+    setConfig: (config: DepositConfig) => void;
+}
+export declare const useDepositStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DepositState>>;
+export declare const useIsPaymentMode: () => boolean;
+export declare const usePaymentAmount: () => string | null;
+export {};

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

@@ -0,0 +1,5 @@
+import { UserInputType } from "@0xsquid/ui";
+export declare const useInputMode: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    mode: UserInputType;
+    setMode: (_mode: UserInputType) => void;
+}>>;

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

@@ -0,0 +1,12 @@
+import type { WidgetView } from "../types";
+export type NavigationDirection = "forward" | "backward";
+interface WidgetNavigationState {
+    stack: WidgetView[];
+    direction: NavigationDirection | null;
+    push: (_view: WidgetView) => void;
+    pop: () => void;
+    popToRoot: () => void;
+}
+export declare const selectCurrentView: (state: WidgetNavigationState) => WidgetView;
+export declare const useRouter: import("zustand").UseBoundStore<import("zustand").StoreApi<WidgetNavigationState>>;
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,43 @@
+import type { Wallet } from "@0xsquid/react-hooks";
+import type { ChainType } from "@0xsquid/squid-types";
+import type { Theme, ThemeType } from "@0xsquid/ui";
+export type WidgetView = {
+    id: "main";
+} | {
+    id: "connect-wallet";
+    chainType: ChainType | null;
+} | {
+    id: "select-chain";
+    wallet: Wallet;
+} | {
+    id: "qr-code";
+} | {
+    id: "select-token";
+} | {
+    id: "transaction-history";
+} | {
+    id: "transaction-progress";
+};
+export type WidgetViewId = WidgetView["id"];
+interface BaseDepositConfig {
+    destinationAddress: string;
+    destinationToken: {
+        address: string;
+        chainId: string;
+    };
+    integrator: {
+        id: string;
+        name: string;
+        logoUrl: string;
+    };
+    apiUrl?: string;
+    theme?: Theme;
+    themeType?: ThemeType;
+}
+export type DepositConfig = (BaseDepositConfig & {
+    mode: "deposit";
+}) | (BaseDepositConfig & {
+    mode: "payment";
+    amount: string;
+});
+export {};

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

@@ -0,0 +1,2 @@
+export declare function formatDateToHhMm(date: Date): string;
+export declare function formatDayHeader(yyyyMmDd: string): string;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import type { SwapTransactionHistory } from "@0xsquid/react-hooks";
+import { SquidTransaction } from "../services/wallet-history/types";
+import type { DepositConfig } from "../types";
+export declare function isSameTx(tx: SquidTransaction, pending: SwapTransactionHistory): boolean;
+export declare function isSameAddress(a: string, b: string): boolean;
+export declare function matchesDestinationToken(toToken: {
+    address: string;
+    chainId: string;
+}, destinationToken: DepositConfig["destinationToken"]): boolean;
+export declare function isPaymentTx(tx: SquidTransaction, paymentAmount: string, destinationTokenDecimals: number): boolean;

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

@@ -0,0 +1,6 @@
+import type { ChainType } from "@0xsquid/squid-types";
+interface ConnectWalletViewProps {
+    chainType: ChainType | null;
+}
+export declare function ConnectWalletView({ chainType }: ConnectWalletViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import type { Wallet } from "@0xsquid/react-hooks";
+interface WalletListItemProps extends React.ComponentProps<"button"> {
+    wallet: Wallet;
+    isConnecting?: boolean;
+    showAsMultiChain?: boolean;
+    parentProps?: React.ComponentProps<"li">;
+}
+export declare function WalletListItem({ wallet, isConnecting, showAsMultiChain, parentProps, ...props }: WalletListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { NumericInputProps } from "@0xsquid/ui";
+interface AmountInputProps extends NumericInputProps {
+    allowMaxButton?: boolean;
+    readOnly?: boolean;
+    errorMessage?: string;
+    loading?: boolean;
+    forcedUsdDisplay?: string;
+}
+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 {};

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

@@ -0,0 +1 @@
+export declare function ConnectPrompt(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function DepositAmountInput(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function DepositForm(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function MainCTAButton(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function MainView(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function Actions(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1 @@
+export declare function Icon(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function NavBar(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+export declare function Title(): import("react/jsx-runtime").JSX.Element;
+interface TitleLabelInput {
+    isPaymentMode: boolean;
+    paymentAmount: string | null;
+    tokenSymbol: string | undefined;
+    tokenUsdPrice: number | undefined;
+    name: string | undefined;
+}
+export declare function buildTitleLabel({ isPaymentMode, paymentAmount, tokenSymbol, tokenUsdPrice, name, }: TitleLabelInput): string;
+export {};

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

@@ -0,0 +1,14 @@
+interface AccountProps {
+    direction: "from" | "to";
+    name: string;
+    address: string;
+    icon?: string;
+    onDisconnect?: () => void;
+}
+export declare function Account({ direction, address, name, icon, onDisconnect, }: AccountProps): import("react/jsx-runtime").JSX.Element;
+interface AvatarProps {
+    icon?: string;
+    onDisconnect?: () => void;
+}
+export declare function Avatar({ icon, onDisconnect }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare function Recipient(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function TokenSelector(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function QrCodeView(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { WidgetView } from "../types";
+export declare function renderView(view: WidgetView): React.ReactElement;

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

@@ -0,0 +1,7 @@
+import { ChainType } from "@0xsquid/squid-types";
+interface ChainTypeMeta {
+    name: string;
+    icon: string;
+}
+export declare const CHAIN_TYPE_META: Record<ChainType, ChainTypeMeta>;
+export {};

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

@@ -0,0 +1,6 @@
+import type { Wallet } from "@0xsquid/react-hooks";
+interface SelectChainViewProps {
+    wallet: Wallet;
+}
+export declare function SelectChainView({ wallet }: SelectChainViewProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1 @@
+export declare function SelectTokenView(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+export declare function TransactionHistoryView(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { DepositStatus } from "./use-transaction-progress";
+export declare function getStatusTitle(status: DepositStatus, isPaymentMode: boolean): string;
+export declare function getStatusDescription(status: DepositStatus, { amount, symbol, recipientName, isPaymentMode, }: {
+    amount: string;
+    symbol: string;
+    recipientName: string;
+    isPaymentMode: boolean;
+}): string;
+export declare function getButtonLabel(status: DepositStatus): string;
+export declare function TimeDetail({ status, timer, estimatedTimeDisplay, }: {
+    status: DepositStatus;
+    timer: string;
+    estimatedTimeDisplay: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare function TransactionProgressView(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+export declare enum DepositStatus {
+    CONFIRMING = 0,
+    PROCESSING = 1,
+    COMPLETED = 2,
+    PARTIAL_SUCCESS = 3,
+    REJECTED = 4,
+    FAILED = 5
+}
+export declare function useTransactionProgress(): {
+    status: DepositStatus;
+    explorerLink: import("../../services/wallet-history/get-main-explorer-url").MainExplorer | undefined;
+    estimatedTime: string | undefined;
+    recipient: {
+        name: string;
+        address: string;
+    };
+};

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@0xsquid/deposit-widget",
+  "description": "Squid deposit widget",
+  "version": "0.1.0-beta.0",
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/0xsquid/squid-deposit-widget.git"
+  },
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "yarn build-css && rollup -c",
+    "build-css": "tailwindcss -i ./src/tailwind.css -o ./src/compiled-tailwind.css",
+    "dev": "tailwindcss -i ./src/tailwind.css -o ./src/compiled-tailwind.css --watch",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint",
+    "format": "prettier --write .",
+    "test": "vitest run",
+    "release": "release-it",
+    "release:pre": "release-it --preRelease=beta",
+    "release:ci": "release-it --ci",
+    "release:dry": "release-it --dry-run"
+  },
+  "release-it": {
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "conventionalcommits"
+        },
+        "infile": "CHANGELOG.md"
+      }
+    },
+    "github": {
+      "release": true,
+      "tokenRef": "GITHUB_AUTH"
+    },
+    "git": {
+      "tagName": "v${version}",
+      "pushRepo": "https://github.com/0xsquid/squid-deposit-widget.git",
+      "commitMessage": "chore: branch cut release for deposit-widget v${version}",
+      "requireBranch": "release/*"
+    },
+    "npm": {
+      "publish": false
+    }
+  },
+  "dependencies": {
+    "@0xsquid/react-hooks": "8.7.2-beta-interactive-to-amount.2",
+    "@0xsquid/ui": "3.4.0",
+    "fuse.js": "7.1.0",
+    "react-window": "2.2.7",
+    "zustand": "4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@0xsquid/eslint-config": "*",
+    "@0xsquid/squid-types": "0.1.220",
+    "@0xsquid/typescript-config": "*",
+    "@rollup/plugin-commonjs": "28.0.0",
+    "@rollup/plugin-node-resolve": "15.0.0",
+    "@rollup/plugin-typescript": "12.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-window": "2.0.0",
+    "@release-it/conventional-changelog": "8.0.2-next.0",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.0",
+    "postcss-nested": "6.2.0",
+    "postcss-url": "10.1.3",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "release-it": "16.3.0",
+    "rollup": "4.59.0",
+    "rollup-plugin-dts": "6.0.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "tailwindcss": "3.4.1",
+    "typescript": "5.9.2",
+    "vitest": "2.1.9"
+  }
+}