@paybutton/react 4.1.0 → 5.0.0

package/dist/{react/lib → lib}/altpayment/index.d.ts

@@ -1,5 +1,6 @@
 import { SideshiftCoin, SideshiftError, SideshiftPair, SideshiftQuote, SideshiftShift } from "./sideshift";
 export declare const MINIMUM_ALTPAYMENT_DOLLAR_AMOUNT = 10;
+export declare const MINIMUM_ALTPAYMENT_CAD_AMOUNT = 15;
 export declare const SOCKET_MESSAGES: {
     GET_ALTPAYMENT_RATE: string;
     SEND_ALTPAYMENT_RATE: string;

package/dist/{react/lib → lib}/components/BarChart/BarChart.stories.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
             color: string;
         };
     };
-    decorators: ((Story: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>) => React.ReactNode)[];
+    decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => React.ReactNode)[];
     argTypes: {
         onClick: {
             table: {
@@ -22,4 +22,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, BarChartProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, BarChartProps>;

package/dist/{react/lib → lib}/components/Button/Button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Theme, ThemeName } from '../../themes';
+import { ButtonSize } from '../../util';
 export declare type animation = 'slide' | 'invert' | 'none' | undefined;
 export interface ButtonProps {
     animation?: animation;
@@ -8,6 +9,8 @@ export interface ButtonProps {
     theme?: ThemeName | Theme;
     disabled?: boolean;
     onClick?: () => void;
+    size?: ButtonSize;
+    sizeScaleAlreadyApplied?: boolean;
 }
 export declare const Button: {
     (props: ButtonProps): React.ReactElement;

package/dist/lib/components/Button/Button.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+declare type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const OrangeTheme: Story;

package/dist/{react/lib → lib}/components/PayButton/PayButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Theme, ThemeName } from '../../themes';
 import { ButtonProps } from '../Button/Button';
-import { Transaction, Currency } from '../../util';
+import { Transaction, Currency, ButtonSize } from '../../util';
 export interface PayButtonProps extends ButtonProps {
     to: string;
     amount?: number | string;
@@ -24,8 +24,13 @@ export interface PayButtonProps extends ButtonProps {
     onClose?: (success?: boolean, paymentId?: string) => void;
     wsBaseUrl?: string;
     apiBaseUrl?: string;
+    transactionText?: string;
+    disableSound?: boolean;
+    autoClose?: boolean;
     disableAltpayment?: boolean;
     contributionOffset?: number;
+    size: ButtonSize;
+    sizeScaleAlreadyApplied: boolean;
 }
 export declare const PayButton: {
     (props: PayButtonProps): React.ReactElement;

package/dist/{react/lib → lib}/components/PayButton/PayButton.stories.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
         (props: PayButtonProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
         defaultProps: PayButtonProps;
     };
-    decorators: ((Story: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>) => JSX.Element)[];
+    decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => JSX.Element)[];
     argTypes: {
         onClick: {
             table: {
@@ -42,8 +42,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PayButtonProps>;
-export declare const OrangeTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PayButtonProps>;
-export declare const UsdAmount: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PayButtonProps>;
-export declare const withGoal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PayButtonProps>;
-export declare const withUSDGoalCurrency: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PayButtonProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PayButtonProps>;
+export declare const OrangeTheme: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PayButtonProps>;
+export declare const UsdAmount: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PayButtonProps>;
+export declare const withGoal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PayButtonProps>;
+export declare const withUSDGoalCurrency: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PayButtonProps>;

package/dist/{react/lib → lib}/components/PaymentDialog/PaymentDialog.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { Theme, ThemeName } from '../../themes';
 import { ButtonProps } from '../Button/Button';
 import { Currency, CurrencyObject, Transaction } from '../../util';
+import { Socket } from 'socket.io-client';
+import { AltpaymentCoin, AltpaymentPair, AltpaymentShift, AltpaymentError } from '../../altpayment';
 export interface PaymentDialogProps extends ButtonProps {
     to: string;
     amount?: number | string;
@@ -23,6 +25,7 @@ export interface PaymentDialogProps extends ButtonProps {
     disableEnforceFocus?: boolean;
     editable?: boolean;
     dialogOpen: boolean;
+    setDialogOpen: Function;
     disableScrollLock?: boolean;
     active?: boolean;
     container?: HTMLElement;
@@ -33,6 +36,31 @@ export interface PaymentDialogProps extends ButtonProps {
     apiBaseUrl?: string;
     disableAltpayment?: boolean;
     contributionOffset?: number;
+    useAltpayment: boolean;
+    setUseAltpayment: Function;
+    txsSocket?: Socket;
+    setTxsSocket: Function;
+    altpaymentSocket?: Socket;
+    setAltpaymentSocket: Function;
+    setCoins: Function;
+    coins: AltpaymentCoin[];
+    setCoinPair: Function;
+    coinPair?: AltpaymentPair;
+    setLoadingPair: Function;
+    loadingPair: boolean;
+    setAltpaymentShift: Function;
+    altpaymentShift?: AltpaymentShift;
+    setLoadingShift: Function;
+    loadingShift: boolean;
+    setAltpaymentError: Function;
+    altpaymentError?: AltpaymentError;
+    addressType: Currency;
+    setAddressType: Function;
+    setNewTxs: Function;
+    newTxs?: Transaction[];
+    autoClose?: boolean;
+    disableSound?: boolean;
+    transactionText?: string;
 }
 export declare const PaymentDialog: {
     (props: PaymentDialogProps): React.ReactElement;
@@ -45,6 +73,7 @@ export declare const PaymentDialog: {
         disabled: boolean;
         editable: boolean;
         dialogOpen: boolean;
+        autoClose: boolean;
     };
 };
 export default PaymentDialog;

package/dist/{react/lib → lib}/components/PaymentDialog/PaymentDialog.stories.d.ts

@@ -13,9 +13,10 @@ declare const _default: {
             disabled: boolean;
             editable: boolean;
             dialogOpen: boolean;
+            autoClose: boolean;
         };
     };
-    decorators: ((Story: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>) => JSX.Element)[];
+    decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => JSX.Element)[];
     argTypes: {
         onClick: {
             table: {
@@ -41,8 +42,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PaymentDialogProps>;
-export declare const OrangeTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PaymentDialogProps>;
-export declare const UsdAmount: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PaymentDialogProps>;
-export declare const withGoal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PaymentDialogProps>;
-export declare const withUSDGoalCurrency: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PaymentDialogProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PaymentDialogProps>;
+export declare const OrangeTheme: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PaymentDialogProps>;
+export declare const UsdAmount: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PaymentDialogProps>;
+export declare const withGoal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PaymentDialogProps>;
+export declare const withUSDGoalCurrency: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, PaymentDialogProps>;

package/dist/{react/lib → lib}/components/Widget/Widget.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { Socket } from 'socket.io-client';
 import { Theme, ThemeName } from '../../themes';
 import { animation } from '../Button/Button';
 import { Currency, Transaction, CurrencyObject } from '../../util';
-import { AltpaymentShift } from '../../altpayment';
+import { AltpaymentPair, AltpaymentShift, AltpaymentError, AltpaymentCoin } from '../../altpayment';
 export interface WidgetProps {
     to: string;
+    isChild?: boolean;
     amount?: number | null | string;
     setAmount?: Function;
     opReturn?: string;
@@ -32,14 +34,32 @@ export interface WidgetProps {
     apiBaseUrl?: string;
     loading?: boolean;
     hoverText?: string;
-    setAltpaymentShift: Function;
-    altpaymentShift?: AltpaymentShift | undefined;
-    useAltpayment: boolean;
-    setUseAltpayment: Function;
-    shiftCompleted: boolean;
-    setShiftCompleted: Function;
     disableAltpayment?: boolean;
     contributionOffset?: number;
+    setAltpaymentShift?: Function;
+    altpaymentShift?: AltpaymentShift | undefined;
+    useAltpayment?: boolean;
+    setUseAltpayment?: Function;
+    txsSocket?: Socket;
+    setTxsSocket?: Function;
+    altpaymentSocket?: Socket;
+    setAltpaymentSocket?: Function;
+    shiftCompleted?: boolean;
+    setShiftCompleted?: Function;
+    setCoins?: Function;
+    coins?: AltpaymentCoin[];
+    setCoinPair?: Function;
+    coinPair?: AltpaymentPair;
+    setLoadingPair?: Function;
+    loadingPair?: boolean;
+    setLoadingShift?: Function;
+    loadingShift?: boolean;
+    setAltpaymentError?: Function;
+    altpaymentError?: AltpaymentError;
+    addressType?: Currency;
+    setAddressType?: Function;
+    newTxText?: string;
+    transactionText?: string;
 }
 export declare const Widget: React.FunctionComponent<WidgetProps>;
 export default Widget;

package/dist/lib/components/Widget/Widget.stories.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { WidgetProps } from './Widget';
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<WidgetProps>;
+    decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => React.ReactNode)[];
+    argTypes: {
+        success: {
+            control: string;
+        };
+        ButtonComponent: {
+            table: {
+                disable: boolean;
+            };
+        };
+        foot: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+    args: {
+        to: string;
+        loading: boolean;
+        success: boolean;
+    };
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, WidgetProps>;
+export declare const Success: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, WidgetProps>;
+export declare const Loading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, WidgetProps>;
+export declare const OrangeTheme: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, WidgetProps>;
+export declare const CustomTheme: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, WidgetProps>;
+export declare const WithGoal: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, WidgetProps>;

package/dist/{react/lib → lib}/components/Widget/WidgetContainer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Currency, CurrencyObject, Transaction } from '../../util';
 import { WidgetProps } from './Widget';
-export interface WidgetContainerProps extends Omit<WidgetProps, 'success' | 'setNewTxs' | 'setCurrencyObject' | 'setAltpaymentShift' | 'useAltpayment' | 'setUseAltpayment' | 'shiftCompleted' | 'setShiftCompleted'> {
+export interface WidgetContainerProps extends Omit<WidgetProps, 'success' | 'setCurrencyObject' | 'shiftCompleted' | 'setShiftCompleted'> {
     active?: boolean;
     amount?: number;
     opReturn?: string;
@@ -25,6 +25,9 @@ export interface WidgetContainerProps extends Omit<WidgetProps, 'success' | 'set
     successText?: string;
     disableAltpayment?: boolean;
     contributionOffset?: number;
+    setNewTxs: Function;
+    disableSound?: boolean;
+    transactionText?: string;
 }
 export interface Output {
     index: number;

package/dist/{react/lib → lib}/util/address.d.ts

@@ -8,3 +8,6 @@ declare const _default: {
     getCurrencyTypeFromAddress: (address: string) => string;
 };
 export default _default;
+declare type NetworkSlugsType = 'ecash' | 'bitcoincash';
+export declare const getAddressPrefix: (addressString: string) => NetworkSlugsType;
+export declare const getAddressPrefixed: (addressString: string) => string;

package/dist/{react/lib → lib}/util/api-client.d.ts

@@ -14,4 +14,3 @@ declare const _default: {
     getAddressBalance: (address: string, rootUrl?: string) => Promise<number | undefined>;
 };
 export default _default;
-export declare const getCashtabProviderStatus: () => boolean;

package/dist/lib/util/cashtab.d.ts

@@ -0,0 +1,29 @@
+import { CashtabExtensionUnavailableError, CashtabAddressDeniedError, CashtabTimeoutError } from 'cashtab-connect';
+/**
+ * Check if the Cashtab extension is available (with caching)
+ * This function caches the result to avoid multiple extension checks per page load
+ * @returns Promise<boolean> - true if extension is available, false otherwise
+ */
+export declare const getCashtabProviderStatus: () => Promise<boolean>;
+/**
+ * Clear the cached extension status (useful for testing or if extension state changes)
+ */
+export declare const clearCashtabStatusCache: () => void;
+export declare const initializeCashtabStatus: () => Promise<boolean>;
+export declare const waitForCashtabExtension: (timeout?: number | undefined) => Promise<void>;
+/**
+ * Request the user's eCash address from their Cashtab wallet
+ * @returns Promise<string> - The user's address
+ * @throws {CashtabExtensionUnavailableError} When the Cashtab extension is not available
+ * @throws {CashtabAddressDeniedError} When the user denies the address request
+ * @throws {CashtabTimeoutError} When the request times out
+ */
+export declare const requestCashtabAddress: () => Promise<string>;
+export declare const sendXecWithCashtab: (address: string, amount: string | number) => Promise<any>;
+/**
+ * Open Cashtab with a BIP21 payment URL
+ * @param bip21Url - The BIP21 formatted payment URL
+ * @param fallbackUrl - Optional fallback URL if extension is not available
+ */
+export declare const openCashtabPayment: (bip21Url: string, fallbackUrl?: string | undefined) => Promise<void>;
+export { CashtabExtensionUnavailableError, CashtabAddressDeniedError, CashtabTimeoutError };

package/dist/lib/util/chronik.d.ts

@@ -0,0 +1,17 @@
+import { ChronikClient, WsEndpoint } from 'chronik-client-cashtokens';
+import { AddressType } from 'ecashaddrjs/dist/types';
+export interface OpReturnData {
+    rawMessage: string;
+    message: string;
+    paymentId: string;
+}
+export declare function getNullDataScriptData(outputScript: string): OpReturnData | null;
+export declare function toHash160(address: string): {
+    type: AddressType;
+    hash160: string;
+};
+export declare function satoshisToUnit(satoshis: bigint, networkFormat: string): Promise<string>;
+export declare const fromHash160: (networkSlug: string, type: AddressType, hash160: string) => string;
+export declare function outputScriptToAddress(networkSlug: string, outputScript: string | undefined): string | undefined;
+export declare const parseWebsocketMessage: (wsMsg: any, setNewTx: Function, chronik: ChronikClient, address: string) => Promise<void>;
+export declare const initializeChronikWebsocket: (address: string, setNewTx: Function) => Promise<WsEndpoint>;

package/dist/{react/lib → lib}/util/constants.d.ts

@@ -4,3 +4,4 @@ export declare const DECIMALS: {
     [key: string]: number;
 };
 export declare const CURRENCY_PREFIXES_MAP: Record<typeof CRYPTO_CURRENCIES[number], string>;
+export declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "extrasmall" | "small" | "medium" | "large" | "extralarge" | undefined;

package/dist/{react/lib → lib}/util/index.d.ts

@@ -1,5 +1,6 @@
 export * from './address';
 export * from './api-client';
+export * from './cashtab';
 export * from './constants';
 export * from './format';
 export * from './opReturn';

package/dist/{react/lib → lib}/util/opReturn.d.ts

@@ -13,6 +13,8 @@ export interface EncodeOpReturnParams {
     paymentId?: string;
 }
 export declare function encodeOpReturnProps({ opReturn, disablePaymentId, paymentId }: EncodeOpReturnParams): string;
+export declare function parseStringToArray(str: string): string | string[];
+export declare function parseOpReturnData(opReturnData: string): any;
 export declare const exportedForTesting: {
     prependPaymentIdWithPushdata: typeof prependPaymentIdWithPushdata;
     generatePaymentId: typeof generatePaymentId;

package/dist/lib/util/socket.d.ts

@@ -0,0 +1,40 @@
+import { Socket } from 'socket.io-client';
+import { CheckSuccessInfo, Transaction } from './types';
+interface AltpaymentListenerParams {
+    addressType: string;
+    altpaymentSocket: Socket;
+    setCoins: Function;
+    setCoinPair: Function;
+    setLoadingPair: Function;
+    setAltpaymentShift: Function;
+    setLoadingShift: Function;
+    setAltpaymentError: Function;
+}
+export declare const altpaymentListener: (params: AltpaymentListenerParams) => void;
+interface SetupAltpaymentSocketParams {
+    addressType: string;
+    altpaymentSocket?: Socket;
+    wsBaseUrl?: string;
+    setAltpaymentSocket: Function;
+    setCoins: Function;
+    setCoinPair: Function;
+    setLoadingPair: Function;
+    setAltpaymentShift: Function;
+    setLoadingShift: Function;
+    setAltpaymentError: Function;
+}
+export declare const setupAltpaymentSocket: (params: SetupAltpaymentSocketParams) => Promise<void>;
+interface SetupTxsSocketParams {
+    address: string;
+    txsSocket?: Socket;
+    apiBaseUrl?: string;
+    wsBaseUrl?: string;
+    setTxsSocket: Function;
+    setNewTxs: Function;
+    setDialogOpen?: Function;
+    checkSuccessInfo?: CheckSuccessInfo;
+}
+export declare const setupTxsSocket: (params: SetupTxsSocketParams) => Promise<void>;
+export declare const setupChronikWebSocket: (params: SetupTxsSocketParams) => Promise<void>;
+export declare const onMessage: (transactions: Transaction[], setNewTxs: Function, setDialogOpen?: Function | undefined, checkSuccessInfo?: CheckSuccessInfo | undefined) => void;
+export {};

package/dist/{react/lib → lib}/util/types.d.ts

@@ -1,3 +1,4 @@
+import BigNumber from "bignumber.js";
 import { CRYPTO_CURRENCIES, FIAT_CURRENCIES } from "./constants";
 export declare type CurrencyObject = {
     float: number;
@@ -14,6 +15,7 @@ export interface Transaction {
     address: string;
     rawMessage?: string;
     inputAddresses?: string[];
+    opReturn?: string;
 }
 export interface UtxoDetails {
     outputsList: [Output];
@@ -132,4 +134,14 @@ export interface BroadcastTxData {
     txs: Transaction[];
     messageType: TxBroadcast;
 }
+export interface CheckSuccessInfo {
+    currency: Currency;
+    price: number;
+    randomSatoshis: number | boolean;
+    disablePaymentId?: boolean;
+    expectedPaymentId?: string;
+    expectedAmount?: BigNumber | number;
+    expectedOpReturn?: string;
+    currencyObj?: CurrencyObject;
+}
 export {};

package/dist/lib/util/validate.d.ts

@@ -0,0 +1,3 @@
+import BigNumber from "bignumber.js";
+import { CurrencyObject, Transaction } from "./types";
+export declare const shouldTriggerOnSuccess: (transaction: Transaction, currency: string, price: number, randomSatoshis: number | boolean, disablePaymentId?: boolean | undefined, expectedPaymentId?: string | undefined, expectedAmount?: number | BigNumber | undefined, expectedOpReturn?: string | undefined, currencyObject?: CurrencyObject | undefined) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paybutton/react",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "The easiest way to accept eCash online",
   "author": "Blockchain Ventures Corp.",
   "license": "MIT",
@@ -22,39 +22,42 @@
     "lint": "eslint 'lib/**/*.{ts,tsx}' --fix",
     "prettier": "prettier --write 'lib/**/*.ts'",
     "dev": "concurrently yarn:watch yarn:storybook",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "watch": "microbundle watch --jsx React.createElement --no-compress --format modern,cjs",
     "test": "jest",
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "react": "17.0.0",
-    "react-dom": "17.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.9",
     "@popperjs/core": "2.11.5",
-    "@storybook/addon-a11y": "6.5.9",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/node-logger": "6.5.9",
-    "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.5.9",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/cli": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@types/currency-formatter": "1.5.1",
+    "@types/decimal.js": "^7.4.3",
     "@types/lodash": "4.14.182",
+    "@types/minimatch": "^6.0.0",
     "@types/node": "17.0.41",
     "@types/qrcode.react": "1.0.2",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
-    "@typescript-eslint/eslint-plugin": "2.34.0",
-    "@typescript-eslint/parser": "2.34.0",
+    "@typescript-eslint/eslint-plugin": "8.39.1",
+    "@typescript-eslint/parser": "8.39.1",
+    "@vitejs/plugin-react": "^4.6.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.5",
     "concurrently": "5.3.0",
     "cross-env": "7.0.3",
     "currency-formatter": "1.5.9",
-    "eslint": "6.8.0",
+    "eslint": "9.33.0",
     "eslint-config-prettier": "6.15.0",
     "eslint-config-standard": "14.1.1",
     "eslint-config-standard-react": "9.2.0",
@@ -70,9 +73,13 @@
     "lint-staged": "10.5.4",
     "microbundle": "0.12.4",
     "prettier": "2.7.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-is": "16.13.1",
-    "react-scripts": "3.4.4",
+    "react-scripts": "5.0.1",
+    "storybook": "^7.6.17",
     "typescript": "^4.8.2",
+    "vite": "^4.4.5",
     "yarn-run-all": "^3.1.1"
   },
   "dependencies": {
@@ -83,8 +90,12 @@
     "@types/jest": "^29.5.11",
     "axios": "1.6.5",
     "bignumber.js": "9.0.2",
+    "cashtab-connect": "^1.1.0",
+    "chronik-client-cashtokens": "^3.1.1-rc0",
     "copy-to-clipboard": "3.3.3",
     "crypto-js": "^4.2.0",
+    "decimal.js": "^10.6.0",
+    "ecashaddrjs": "^2.0.0",
     "jest": "^29.7.0",
     "lodash": "4.17.21",
     "notistack": "1.0.10",
@@ -102,6 +113,7 @@
   },
   "resolutions": {
     "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0"
+    "@types/react-dom": "17.0.0",
+    "chronik-client-cashtokens/ecashaddrjs": "^2.0.0"
   }
 }

package/dist/react/lib/components/Button/Button.stories.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { ButtonProps } from './Button';
-declare const _default: {
-    title: string;
-    component: {
-        (props: ButtonProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-        defaultProps: ButtonProps;
-    };
-    decorators: ((Story: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>) => React.ReactNode)[];
-    argTypes: {
-        onClick: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-    parameters: {
-        jest: string[];
-    };
-};
-export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps>;
-export declare const OrangeTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps>;

package/dist/react/lib/components/Widget/Widget.stories.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { WidgetProps } from './Widget';
-declare const _default: {
-    title: string;
-    component: React.FunctionComponent<WidgetProps>;
-    decorators: ((Story: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>) => React.ReactNode)[];
-    argTypes: {
-        success: {
-            control: string;
-        };
-        ButtonComponent: {
-            table: {
-                disable: boolean;
-            };
-        };
-        foot: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-    args: {
-        to: string;
-        loading: boolean;
-        success: boolean;
-    };
-};
-export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, WidgetProps>;
-export declare const Success: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, WidgetProps>;
-export declare const Loading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, WidgetProps>;
-export declare const OrangeTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, WidgetProps>;
-export declare const CustomTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, WidgetProps>;
-export declare const WithGoal: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, WidgetProps>;

package/dist/react/lib/util/socket.d.ts

@@ -1,14 +0,0 @@
-import { Socket } from 'socket.io-client';
-export declare const txsListener: (socket: Socket, setNewTxs: Function) => void;
-interface AltpaymentListenerParams {
-    addressType: string;
-    socket: Socket;
-    setCoins: Function;
-    setCoinPair: Function;
-    setLoadingPair: Function;
-    setAltpaymentShift: Function;
-    setLoadingShift: Function;
-    setAltpaymentError: Function;
-}
-export declare const altpaymentListener: (params: AltpaymentListenerParams) => void;
-export {};

package/dist/react/lib/util/validate.d.ts

@@ -1,3 +0,0 @@
-import BigNumber from "bignumber.js";
-import { CurrencyObject, Transaction } from "./types";
-export declare const shouldTriggerOnSuccess: (transaction: Transaction, currency: string, price: number, disablePaymentId?: boolean | undefined, expectedPaymentId?: string | undefined, expectedAmount?: BigNumber | undefined, expectedOpReturn?: string | undefined, currencyObject?: CurrencyObject | undefined) => Promise<boolean>;