@imtbl/checkout-widgets 2.0.0-alpha.0

package/dist/types/widgets/swap/functions/processSecondaryFees.d.ts

@@ -0,0 +1,10 @@
+import { TokenInfo } from '@imtbl/checkout-sdk';
+import { TransactionResponse } from '@imtbl/dex-sdk';
+/**
+ * Ensures that the fees token has the correct symbol. At the moment the dex quote doesn't return it.
+ * Assumes the fee token is the from token. If it's not, it will be incorrect.
+ * TODO: Fix this when the canonical tokens list comes into play so we can look up the symbol based on address
+ * @param fromToken Assumption is fees are delineated in this from token
+ * @param currentQuote
+ */
+export declare const processSecondaryFees: (fromToken: TokenInfo, currentQuote: TransactionResponse) => TransactionResponse;

package/dist/types/widgets/swap/functions/processSecondaryFees.test.d.ts

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

package/dist/types/widgets/swap/functions/swapConversionRate.d.ts

@@ -0,0 +1,4 @@
+import { TransactionResponse } from '@imtbl/dex-sdk';
+import { TFunction } from 'i18next';
+import { TokenInfo } from '@imtbl/checkout-sdk';
+export declare const formatQuoteConversionRate: (amount: string, token: TokenInfo, quote: TransactionResponse, labelKey: string, t: TFunction) => string;

package/dist/types/widgets/swap/functions/swapConversionRate.test.d.ts

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

package/dist/types/widgets/swap/functions/swapFees.d.ts

@@ -0,0 +1,18 @@
+import { Token, TransactionResponse } from '@imtbl/dex-sdk';
+import { TFunction } from 'i18next';
+import { TokenInfo } from '@imtbl/checkout-sdk';
+import { CryptoFiatState } from '../../../context/crypto-fiat-context/CryptoFiatContext';
+export type FormattedFee = {
+    label: string;
+    fiatAmount: string;
+    amount: string;
+    prefix?: string;
+    token: Token | TokenInfo;
+};
+/**
+ * Formats a quote into a list of fees for the fee drawer
+ * @param swapQuote
+ * @param cryptoFiatState
+ * @param t
+ */
+export declare const formatSwapFees: (swapQuote: TransactionResponse, cryptoFiatState: CryptoFiatState, t: TFunction) => FormattedFee[];

package/dist/types/widgets/swap/functions/swapFees.test.d.ts

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

package/dist/types/widgets/swap/helpers.d.ts

@@ -0,0 +1,10 @@
+import { TokenInfo } from '@imtbl/checkout-sdk';
+export declare const alphaSortTokensList: (tokens: TokenInfo[]) => TokenInfo[];
+export declare const topUpBridgeOption: (isBridgeEnabled: boolean, isNotPassport: boolean) => {
+    textKey: string;
+    action: () => void;
+} | undefined;
+export declare const topUpOnRampOption: (isOnRampEnabled: boolean) => {
+    textKey: string;
+    action: () => void;
+} | undefined;

package/dist/types/widgets/swap/test-components/SwapWidgetTestComponent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SwapState } from '../context/SwapContext';
+export interface TestProps {
+    children: React.ReactNode;
+    initialStateOverride?: SwapState;
+    cryptoConversionsOverride?: Map<string, number>;
+}
+export declare function SwapWidgetTestComponent({ children, initialStateOverride, cryptoConversionsOverride }: TestProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/swap/views/ApproveERC20Onboarding.d.ts

@@ -0,0 +1,5 @@
+import { ApproveERC20SwapData } from '../../../context/view-context/SwapViewContextTypes';
+export interface ApproveERC20Props {
+    data: ApproveERC20SwapData;
+}
+export declare function ApproveERC20Onboarding({ data }: ApproveERC20Props): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/swap/views/SwapCoins.d.ts

@@ -0,0 +1,11 @@
+import { WidgetTheme } from '@imtbl/checkout-sdk';
+export interface SwapCoinsProps {
+    theme: WidgetTheme;
+    cancelAutoProceed: () => void;
+    fromAmount?: string;
+    toAmount?: string;
+    fromTokenAddress?: string;
+    toTokenAddress?: string;
+    showBackButton?: boolean;
+}
+export declare function SwapCoins({ theme, cancelAutoProceed, fromAmount, toAmount, fromTokenAddress, toTokenAddress, showBackButton, }: SwapCoinsProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/swap/views/SwapInProgress.d.ts

@@ -0,0 +1,8 @@
+import { TransactionResponse } from 'ethers';
+import { PrefilledSwapForm } from '../../../context/view-context/SwapViewContextTypes';
+interface SwapInProgressProps {
+    transactionResponse: TransactionResponse;
+    swapForm: PrefilledSwapForm;
+}
+export declare function SwapInProgress({ transactionResponse, swapForm, }: SwapInProgressProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/widgets/wallet/WalletWidget.d.ts

@@ -0,0 +1,8 @@
+import { WalletWidgetParams } from '@imtbl/checkout-sdk';
+import { WalletConfiguration } from './context/WalletContext';
+import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
+export type WalletWidgetInputs = WalletWidgetParams & {
+    config: StrongCheckoutWidgetsConfig;
+    walletConfig: WalletConfiguration;
+};
+export default function WalletWidget(props: WalletWidgetInputs): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/wallet/WalletWidgetEvents.d.ts

@@ -0,0 +1,4 @@
+import { NetworkInfo, WrappedBrowserProvider } from '@imtbl/checkout-sdk';
+export declare function sendWalletWidgetCloseEvent(eventTarget: Window | EventTarget): void;
+export declare function sendNetworkSwitchEvent(eventTarget: Window | EventTarget, provider: WrappedBrowserProvider, network: NetworkInfo): void;
+export declare function sendDisconnectWalletEvent(eventTarget: Window | EventTarget): void;

package/dist/types/widgets/wallet/WalletWidgetRoot.d.ts

@@ -0,0 +1,8 @@
+import { IMTBLWidgetEvents, WalletWidgetParams, WidgetProperties, WidgetType } from '@imtbl/checkout-sdk';
+import { Base } from '../BaseWidgetRoot';
+export declare class Wallet extends Base<WidgetType.WALLET> {
+    protected eventTopic: IMTBLWidgetEvents;
+    protected getValidatedProperties({ config }: WidgetProperties<WidgetType.WALLET>): WidgetProperties<WidgetType.WALLET>;
+    protected getValidatedParameters(params: WalletWidgetParams): WalletWidgetParams;
+    protected render(): void;
+}

package/dist/types/widgets/wallet/components/BalanceItem/BalanceItem.d.ts

@@ -0,0 +1,8 @@
+import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { BalanceInfo } from '../../functions/tokenBalances';
+export interface BalanceItemProps {
+    balanceInfo: BalanceInfo;
+    theme: WidgetTheme;
+    bridgeToL2OnClick: (address?: string) => void;
+}
+export declare function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }: BalanceItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/wallet/components/BalanceItem/BalanceItemStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const ShowMenuItem: (show: boolean | undefined) => {
+    display: string;
+};

package/dist/types/widgets/wallet/components/NetworkMenu/NetworkMenu.d.ts

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

package/dist/types/widgets/wallet/components/NetworkMenu/NetworkMenuStyles.d.ts

@@ -0,0 +1,22 @@
+export declare const networkMenuStyles: {
+    display: string;
+    flexDirection: string;
+    alignItems: string;
+    paddingTop: string;
+};
+export declare const activeNetworkButtonStyle: {
+    fontWeight: string;
+    borderColor: string;
+    borderStyle: string;
+    borderWidth: string;
+};
+export declare const networkButtonStyle: {
+    fontWeight: string;
+};
+export declare const logoStyle: (isActive: boolean) => {
+    filter: string | undefined;
+};
+export declare const networkHeadingStyle: {
+    paddingX: string;
+    paddingY: string;
+};

package/dist/types/widgets/wallet/components/TokenBalanceList/TokenBalanceList.d.ts

@@ -0,0 +1,9 @@
+import { WidgetTheme } from '@imtbl/checkout-sdk';
+import { BalanceInfo } from '../../functions/tokenBalances';
+interface TokenBalanceListProps {
+    balanceInfoItems: BalanceInfo[];
+    theme: WidgetTheme;
+    bridgeToL2OnClick: (address?: string) => void;
+}
+export declare function TokenBalanceList({ balanceInfoItems, theme, bridgeToL2OnClick, }: TokenBalanceListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/widgets/wallet/components/TokenBalanceList/TokenBalanceListStyles.d.ts

@@ -0,0 +1,14 @@
+export declare const tokenBalanceListStyle: {
+    width: string;
+    height: string;
+    display: string;
+    flexDirection: string;
+    rowGap: string;
+};
+export declare const noTokensStyle: {
+    width: string;
+    height: string;
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+};

package/dist/types/widgets/wallet/components/TotalTokenBalance/TotalTokenBalance.d.ts

@@ -0,0 +1,6 @@
+interface TotalTokenBalanceProps {
+    totalBalance: number;
+    loading: boolean;
+}
+export declare function TotalTokenBalance(props: TotalTokenBalanceProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/widgets/wallet/components/TotalTokenBalance/TotalTokenBalanceStyles.d.ts

@@ -0,0 +1,20 @@
+export declare const totalTokenBalanceStyle: {
+    display: string;
+    flexDirection: string;
+    justifyContent: string;
+    paddingX: string;
+    paddingY: string;
+};
+export declare const totalTokenBalanceValueStyle: {
+    display: string;
+    direction: string;
+    columnGap: string;
+    alignItems: string;
+};
+export declare const coinInfoButtonStyle: {
+    height: string;
+    width: string;
+    minWidth: string;
+    fill: string;
+    cursor: string;
+};

package/dist/types/widgets/wallet/components/TransferAssetsL1Warning.d.ts

@@ -0,0 +1,6 @@
+import { WrappedBrowserProvider } from '@imtbl/checkout-sdk';
+export declare function TransferAssetsL1Warning({ provider, showL1Warning, setShowL1Warning, }: {
+    provider?: WrappedBrowserProvider;
+    showL1Warning: boolean;
+    setShowL1Warning: (show: boolean) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/wallet/components/WalletAddress/WalletAddress.d.ts

@@ -0,0 +1,6 @@
+import { WrappedBrowserProvider } from '@imtbl/checkout-sdk';
+export declare function WalletAddress({ provider, showL1Warning, setShowL1Warning, }: {
+    provider?: WrappedBrowserProvider;
+    showL1Warning: boolean;
+    setShowL1Warning: (show: boolean) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/wallet/context/WalletContext.d.ts

@@ -0,0 +1,54 @@
+import { WalletProviderName, NetworkInfo, GetBalanceResult } from '@imtbl/checkout-sdk';
+export type WalletConfiguration = {
+    showDisconnectButton: boolean;
+    showNetworkMenu: boolean;
+};
+export interface WalletState {
+    walletProviderName: WalletProviderName | null;
+    network: NetworkInfo | null;
+    tokenBalances: GetBalanceResult[];
+    supportedTopUps: TopUpFeature | null;
+    walletConfig: WalletConfiguration;
+}
+export interface TopUpFeature {
+    isOnRampEnabled?: boolean;
+    isSwapEnabled?: boolean;
+    isBridgeEnabled?: boolean;
+    isSwapAvailable?: boolean;
+    isAddTokensEnabled?: boolean;
+}
+export declare const initialWalletState: WalletState;
+export interface WalletContextState {
+    walletState: WalletState;
+    walletDispatch: React.Dispatch<WalletAction>;
+}
+export interface WalletAction {
+    payload: ActionPayload;
+}
+type ActionPayload = SetWalletProviderNamePayload | SetSwitchNetworkPayload | SetTokenBalancesPayload | SetSupportedTopUpPayload;
+export declare enum WalletActions {
+    SET_WALLET_PROVIDER_NAME = "SET_WALLET_PROVIDER_NAME",
+    SET_NETWORK = "SET_NETWORK",
+    SET_TOKEN_BALANCES = "SET_TOKEN_BALANCES",
+    SET_SUPPORTED_TOP_UPS = "SUPPORTED_TOP_UPS"
+}
+export interface SetWalletProviderNamePayload {
+    type: WalletActions.SET_WALLET_PROVIDER_NAME;
+    walletProviderName: WalletProviderName;
+}
+export interface SetSwitchNetworkPayload {
+    type: WalletActions.SET_NETWORK;
+    network: NetworkInfo;
+}
+export interface SetTokenBalancesPayload {
+    type: WalletActions.SET_TOKEN_BALANCES;
+    tokenBalances: GetBalanceResult[];
+}
+export interface SetSupportedTopUpPayload {
+    type: WalletActions.SET_SUPPORTED_TOP_UPS;
+    supportedTopUps: TopUpFeature;
+}
+export declare const WalletContext: import("react").Context<WalletContextState>;
+export type Reducer<S, A> = (prevState: S, action: A) => S;
+export declare const walletReducer: Reducer<WalletState, WalletAction>;
+export {};

package/dist/types/widgets/wallet/context/WalletContext.test.d.ts

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

package/dist/types/widgets/wallet/functions/tokenBalances.d.ts

@@ -0,0 +1,12 @@
+import { Checkout, ChainId, GetBalanceResult, WrappedBrowserProvider } from '@imtbl/checkout-sdk';
+export type BalanceInfo = {
+    id: string;
+    symbol: string;
+    address?: string;
+    description?: string;
+    balance: string;
+    fiatAmount: string;
+    icon?: string;
+};
+export declare const getTokenBalances: (checkout: Checkout, provider: WrappedBrowserProvider, chainId: ChainId) => Promise<GetBalanceResult[]>;
+export declare const mapTokenBalancesWithConversions: (chainId: ChainId, balances: GetBalanceResult[], conversions: Map<string, number>) => BalanceInfo[];

package/dist/types/widgets/wallet/functions/tokenBalances.test.d.ts

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

package/dist/types/widgets/wallet/test-components/WalletWidgetTestComponent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WalletState } from '../context/WalletContext';
+export interface TestProps {
+    children: React.ReactNode;
+    initialStateOverride?: WalletState;
+    cryptoConversionsOverride?: Map<string, number>;
+}
+export declare function WalletWidgetTestComponent({ children, initialStateOverride, cryptoConversionsOverride, }: TestProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/wallet/tokenDataStub.d.ts

@@ -0,0 +1,6 @@
+export declare const mainnetTokens: {
+    tokenAddress: string;
+}[];
+export declare const sepoliaTokens: {
+    tokenAddress: string;
+}[];

package/dist/types/widgets/wallet/views/CoinInfo.d.ts

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

package/dist/types/widgets/wallet/views/Settings.d.ts

@@ -0,0 +1,4 @@
+export interface SettingsProps {
+    showDisconnectButton: boolean;
+}
+export declare function Settings({ showDisconnectButton }: SettingsProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/widgets/wallet/views/SettingsStyles.d.ts

@@ -0,0 +1,9 @@
+export declare const settingsBoxStyle: {
+    display: string;
+    flexDirection: string;
+    rowGap: string;
+    paddingX: string;
+};
+export declare const settingsDisconnectButtonStyle: {
+    marginTop: string;
+};

package/dist/types/widgets/wallet/views/WalletBalances.d.ts

@@ -0,0 +1,8 @@
+import { WidgetTheme } from '@imtbl/checkout-sdk';
+type WalletBalancesProps = {
+    balancesLoading: boolean;
+    theme: WidgetTheme;
+    showNetworkMenu: boolean;
+};
+export declare function WalletBalances({ balancesLoading, theme, showNetworkMenu, }: WalletBalancesProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/widgets/wallet/views/WalletBalancesStyles.d.ts

@@ -0,0 +1,23 @@
+export declare const walletBalanceOuterContainerStyles: {
+    display: string;
+    flexDirection: string;
+    rowGap: string;
+    paddingX: string;
+    flex: number;
+};
+export declare const walletBalanceContainerStyles: {
+    backgroundColor: string;
+    paddingX: string;
+    borderRadius: string;
+    flex: number;
+};
+export declare const walletBalanceLoadingIconStyles: {
+    display: string;
+    flexDirection: string;
+    rowGap: string;
+};
+export declare const walletBalanceListContainerStyles: (showNetworkMenu: boolean, showAddCoins: boolean) => {
+    height: string;
+    overflowY: string;
+    borderRadius: string;
+};

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@imtbl/checkout-widgets",
+  "version": "2.0.0-alpha.0",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@0xsquid/sdk": "^2.8.25",
+    "@biom3/design-tokens": "^0.4.5",
+    "@biom3/react": "^0.28.13",
+    "@imtbl/bridge-sdk": "2.0.0-alpha.0",
+    "@imtbl/checkout-sdk": "2.0.0-alpha.0",
+    "@imtbl/config": "2.0.0-alpha.0",
+    "@imtbl/cryptofiat": "2.0.0-alpha.0",
+    "@imtbl/dex-sdk": "2.0.0-alpha.0",
+    "@imtbl/passport": "2.0.0-alpha.0",
+    "@imtbl/react-analytics": "0.3.2-alpha",
+    "@rive-app/react-canvas-lite": "^4.9.0",
+    "@walletconnect/ethereum-provider": "^2.11.1",
+    "@walletconnect/modal": "^2.6.2",
+    "axios": "^1.6.5",
+    "ethers": "^6.13.4",
+    "framer-motion": "^11.0.6",
+    "i18next": "^23.7.6",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "localforage": "^1.10.0",
+    "lodash.debounce": "^4.0.8",
+    "pako": "^2.1.0",
+    "pino-pretty": "^11.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0",
+    "ts-deepmerge": "^7.0.2",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@0xsquid/squid-types": "^0.1.108",
+    "@jest/globals": "^29.5.0",
+    "@segment/analytics-next": "^1.53.2",
+    "@svgr/webpack": "^8.0.1",
+    "@swc/core": "^1.3.36",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.4.3",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^18.14.2",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^8.3.4",
+    "esbuild-plugins-node-modules-polyfill": "^1.6.7",
+    "eslint": "^8.40.0",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "react-scripts": "5.0.1",
+    "rimraf": "^6.0.1",
+    "terser": "^5.34.1",
+    "ts-jest": "^29.1.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.2",
+    "web-vitals": "^2.1.4"
+  },
+  "exports": {
+    "development": {
+      "types": "./src/index.ts",
+      "browser": "./dist/browser/index.js",
+      "require": "./dist/node/index.cjs",
+      "default": "./dist/node/index.js"
+    },
+    "default": {
+      "types": "./dist/types/index.d.ts",
+      "browser": "./dist/browser/index.js",
+      "require": "./dist/node/index.cjs",
+      "default": "./dist/node/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/immutable/ts-immutable-sdk",
+  "keywords": [
+    "immutable"
+  ],
+  "license": "ISC",
+  "main": "dist/main.js",
+  "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "immutable/ts-immutable-sdk.git",
+  "type": "module",
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "build": "pnpm transpile && pnpm typegen",
+    "transpile": "tsup src/index.ts --config ./tsup.config.js",
+    "typegen": "tsc --customConditions default --emitDeclarationOnly --outDir dist/types",
+    "build:local": "pnpm build && mkdir -p ../widgets-sample-app/public/lib/js && cp dist/*.js ../widgets-sample-app/public/lib/js/",
+    "lint": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0",
+    "lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0 --fix",
+    "prepare:examplewidgets": "pnpm --filter @examples/commerce-widget-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp ./dist/*.js $(pnpm --filter @examples/commerce-widget-nextjs exec pwd)/tests/utils/local-widgets-js/",
+    "prepare:testwidgets": "pnpm --filter @tests/checkout-widgets-nextjs exec mkdir -p tests/utils/local-widgets-js/ && cp ./dist/*.js $(pnpm --filter @tests/checkout-widgets-nextjs exec pwd)/tests/utils/local-widgets-js/",
+    "start": "NODE_ENV=development tsup --config ./tsup.config.js --watch",
+    "test": "jest test --passWithNoTests",
+    "test:watch": "jest test --passWithNoTests --watch",
+    "typecheck": "tsc --customConditions default --customConditions \"default\" --noEmit"
+  }
+}