@paybutton/react 5.0.3 → 5.1.1

package/dist/lib/altpayment/index.d.ts

@@ -10,12 +10,12 @@ export declare const SOCKET_MESSAGES: {
     ERROR_WHEN_CREATING_QUOTE: string;
     ERROR_WHEN_CREATING_SHIFT: string;
 };
-export declare type AltpaymentClientOptions = 'sideshift' | 'mocked';
-export declare type AltpaymentCoin = SideshiftCoin;
-export declare type AltpaymentQuote = SideshiftQuote;
-export declare type AltpaymentPair = SideshiftPair;
-export declare type AltpaymentShift = SideshiftShift;
-export declare type AltpaymentError = SideshiftError;
+export type AltpaymentClientOptions = 'sideshift' | 'mocked';
+export type AltpaymentCoin = SideshiftCoin;
+export type AltpaymentQuote = SideshiftQuote;
+export type AltpaymentPair = SideshiftPair;
+export type AltpaymentShift = SideshiftShift;
+export type AltpaymentError = SideshiftError;
 export interface AltpaymentClient {
     getPaymentStatus: (id: string) => Promise<AltpaymentShift>;
 }

package/dist/lib/altpayment/sideshift.d.ts

@@ -59,7 +59,7 @@ export interface SideshiftShift {
     status: string;
     type: string;
 }
-declare type ErrorType = 'quote-error' | 'shift-error';
+type ErrorType = 'quote-error' | 'shift-error';
 export interface SideshiftError {
     errorType: ErrorType;
     errorMessage: string;

package/dist/lib/components/BarChart/BarChart.d.ts

@@ -1,14 +1,8 @@
 import React from 'react';
 export interface BarChartProps {
-    value: number;
-    color: string;
-    disabled: boolean;
+    value?: number;
+    color?: string;
+    disabled?: boolean;
 }
-export declare const BarChart: {
-    (props: BarChartProps): React.ReactElement;
-    defaultProps: {
-        value: number;
-        color: string;
-    };
-};
+export declare const BarChart: ({ value, color, disabled, }: BarChartProps) => React.ReactElement;
 export default BarChart;

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

@@ -2,13 +2,7 @@ import React from 'react';
 import { BarChartProps } from './BarChart';
 declare const _default: {
     title: string;
-    component: {
-        (props: BarChartProps): 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: {
-            value: number;
-            color: string;
-        };
-    };
+    component: ({ value, color, disabled, }: BarChartProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => React.ReactNode)[];
     argTypes: {
         onClick: {

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

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

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

@@ -2,6 +2,6 @@ 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>;
+type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const OrangeTheme: Story;

package/dist/lib/components/PayButton/PayButton.d.ts

@@ -26,14 +26,13 @@ export interface PayButtonProps extends ButtonProps {
     apiBaseUrl?: string;
     transactionText?: string;
     disableSound?: boolean;
-    autoClose?: boolean;
+    autoClose?: boolean | number | string;
     disableAltpayment?: boolean;
     contributionOffset?: number;
-    size: ButtonSize;
-    sizeScaleAlreadyApplied: boolean;
+    size?: ButtonSize;
+    sizeScaleAlreadyApplied?: boolean;
+    donationAddress?: string;
+    donationRate?: number;
 }
-export declare const PayButton: {
-    (props: PayButtonProps): React.ReactElement;
-    defaultProps: PayButtonProps;
-};
+export declare const PayButton: ({ to, amount: initialAmount, opReturn, disablePaymentId, currency, theme: themeProp, text, hoverText, successText, animation, randomSatoshis, hideToasts, disabled: disabledProp, goalAmount, disableEnforceFocus, editable, onSuccess, onTransaction, onOpen, onClose, wsBaseUrl, apiBaseUrl, transactionText, disableSound, autoClose, disableAltpayment, contributionOffset, size, sizeScaleAlreadyApplied, donationRate, donationAddress }: PayButtonProps) => React.ReactElement;
 export default PayButton;

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

@@ -2,10 +2,7 @@ import React from 'react';
 import { PayButtonProps } from './PayButton';
 declare const _default: {
     title: string;
-    component: {
-        (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;
-    };
+    component: ({ to, amount: initialAmount, opReturn, disablePaymentId, currency, theme: themeProp, text, hoverText, successText, animation, randomSatoshis, hideToasts, disabled: disabledProp, goalAmount, disableEnforceFocus, editable, onSuccess, onTransaction, onOpen, onClose, wsBaseUrl, apiBaseUrl, transactionText, disableSound, autoClose, disableAltpayment, contributionOffset, size, sizeScaleAlreadyApplied, donationRate, donationAddress }: PayButtonProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => JSX.Element)[];
     argTypes: {
         onClick: {

package/dist/lib/components/PaymentDialog/PaymentDialog.d.ts

@@ -58,22 +58,13 @@ export interface PaymentDialogProps extends ButtonProps {
     setAddressType: Function;
     setNewTxs: Function;
     newTxs?: Transaction[];
-    autoClose?: boolean;
+    autoClose?: boolean | number | string;
     disableSound?: boolean;
+    donationAddress?: string;
+    donationRate?: number;
     transactionText?: string;
+    convertedCurrencyObj?: CurrencyObject;
+    setConvertedCurrencyObj?: Function;
 }
-export declare const PaymentDialog: {
-    (props: PaymentDialogProps): React.ReactElement;
-    defaultProps: {
-        animation: string;
-        hideToasts: boolean;
-        randomSatoshis: boolean;
-        successText: string;
-        disableEnforceFocus: boolean;
-        disabled: boolean;
-        editable: boolean;
-        dialogOpen: boolean;
-        autoClose: boolean;
-    };
-};
+export declare const PaymentDialog: ({ to, amount, setAmount, opReturn, paymentId, disablePaymentId, currency, currencyObj, setCurrencyObj, cryptoAmount, price, successText, animation, randomSatoshis, hideToasts, onClose, onSuccess, onTransaction, goalAmount, disableEnforceFocus, editable, dialogOpen, setDialogOpen, container, wsBaseUrl, apiBaseUrl, hoverText, disableAltpayment, contributionOffset, autoClose, useAltpayment, setUseAltpayment, setTxsSocket, txsSocket, setAltpaymentSocket, altpaymentSocket, setCoins, coins, setCoinPair, coinPair, setLoadingPair, loadingPair, setAltpaymentShift, altpaymentShift, setLoadingShift, loadingShift, setAltpaymentError, altpaymentError, addressType, newTxs, setNewTxs, setAddressType, disableSound, transactionText, disabled, convertedCurrencyObj, setConvertedCurrencyObj, theme: themeProp, donationAddress, donationRate }: PaymentDialogProps) => React.ReactElement;
 export default PaymentDialog;

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

@@ -2,20 +2,7 @@ import React from 'react';
 import { PaymentDialogProps } from './PaymentDialog';
 declare const _default: {
     title: string;
-    component: {
-        (props: PaymentDialogProps): 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: {
-            animation: string;
-            hideToasts: boolean;
-            randomSatoshis: boolean;
-            successText: string;
-            disableEnforceFocus: boolean;
-            disabled: boolean;
-            editable: boolean;
-            dialogOpen: boolean;
-            autoClose: boolean;
-        };
-    };
+    component: ({ to, amount, setAmount, opReturn, paymentId, disablePaymentId, currency, currencyObj, setCurrencyObj, cryptoAmount, price, successText, animation, randomSatoshis, hideToasts, onClose, onSuccess, onTransaction, goalAmount, disableEnforceFocus, editable, dialogOpen, setDialogOpen, container, wsBaseUrl, apiBaseUrl, hoverText, disableAltpayment, contributionOffset, autoClose, useAltpayment, setUseAltpayment, setTxsSocket, txsSocket, setAltpaymentSocket, altpaymentSocket, setCoins, coins, setCoinPair, coinPair, setLoadingPair, loadingPair, setAltpaymentShift, altpaymentShift, setLoadingShift, loadingShift, setAltpaymentError, altpaymentError, addressType, newTxs, setNewTxs, setAddressType, disableSound, transactionText, disabled, convertedCurrencyObj, setConvertedCurrencyObj, theme: themeProp, donationAddress, donationRate }: PaymentDialogProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => JSX.Element)[];
     argTypes: {
         onClick: {

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

@@ -28,7 +28,7 @@ export interface WidgetProps {
     price?: number | undefined;
     usdPrice?: number | undefined;
     editable?: boolean;
-    setNewTxs: Function;
+    setNewTxs?: Function;
     newTxs?: Transaction[];
     wsBaseUrl?: string;
     apiBaseUrl?: string;
@@ -45,6 +45,8 @@ export interface WidgetProps {
     altpaymentSocket?: Socket;
     setAltpaymentSocket?: Function;
     shiftCompleted?: boolean;
+    donationAddress?: string;
+    donationRate?: number;
     setShiftCompleted?: Function;
     setCoins?: Function;
     coins?: AltpaymentCoin[];
@@ -60,6 +62,9 @@ export interface WidgetProps {
     setAddressType?: Function;
     newTxText?: string;
     transactionText?: string;
+    convertedCurrencyObj?: CurrencyObject;
+    setConvertedCurrencyObj?: Function;
+    setPaymentId?: Function;
 }
 export declare const Widget: React.FunctionComponent<WidgetProps>;
 export default Widget;

package/dist/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' | 'setCurrencyObject' | 'shiftCompleted' | 'setShiftCompleted'> {
+export interface WidgetContainerProps extends Omit<WidgetProps, 'success' | 'setCurrencyObject' | 'shiftCompleted' | 'setShiftCompleted' | 'setPaymentId'> {
     active?: boolean;
     amount?: number;
     opReturn?: string;
@@ -28,6 +28,9 @@ export interface WidgetContainerProps extends Omit<WidgetProps, 'success' | 'set
     setNewTxs: Function;
     disableSound?: boolean;
     transactionText?: string;
+    donationAddress?: string;
+    donationRate?: number;
+    convertedCurrencyObj?: CurrencyObject;
 }
 export interface Output {
     index: number;

package/dist/lib/themes/index.d.ts

@@ -10,4 +10,4 @@ export declare enum ThemeName {
 }
 export declare const getTheme: (name?: ThemeName) => Theme;
 export declare const ThemeProvider: React.Provider<Theme | undefined>;
-export declare const useTheme: (defaultTheme?: ThemeName | Theme | undefined, isXec?: boolean | undefined) => Theme;
+export declare const useTheme: (defaultTheme?: ThemeName | Theme, isXec?: boolean) => Theme;

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

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

package/dist/lib/util/api-client.d.ts

@@ -4,8 +4,9 @@ export declare const getAddressBalance: (address: string, rootUrl?: string) => P
 export declare const getUTXOs: (address: string, rootUrl?: string) => Promise<UtxoDetails>;
 export declare const getBchFiatPrice: (currency: Currency, rootUrl?: string) => Promise<PriceData>;
 export declare const getXecFiatPrice: (currency: Currency, rootUrl?: string) => Promise<PriceData>;
-export declare const getFiatPrice: (currency: string, to: string, apiBaseUrl?: string | undefined) => Promise<number | null>;
+export declare const getFiatPrice: (currency: string, to: string, apiBaseUrl?: string) => Promise<number | null>;
 export declare const getTransactionDetails: (txid: string, rootUrl?: string) => Promise<TransactionDetails>;
+export declare const createPayment: (amount: string | number | undefined, address: string, rootUrl?: string) => Promise<string | undefined>;
 declare const _default: {
     getAddressDetails: (address: string, rootUrl?: string) => Promise<Transaction[]>;
     getTransactionDetails: (txid: string, rootUrl?: string) => Promise<TransactionDetails>;

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

@@ -0,0 +1,10 @@
+export type AutoCloseValue = boolean | number | string | undefined;
+/**
+ * Determine auto-close delay (ms) from a variety of allowed input types.
+ * Rules:
+ * - undefined -> default enabled delay
+ * - boolean -> true: default delay; false: disabled (undefined)
+ * - number -> >0 seconds: round to nearest ms; <=0: disabled
+ * - string -> 'true': default; 'false': disabled; numeric string parsed like number; other strings: default
+ */
+export declare function getAutoCloseDelay(value: AutoCloseValue): number | undefined;

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

@@ -10,7 +10,7 @@ export declare const getCashtabProviderStatus: () => Promise<boolean>;
  */
 export declare const clearCashtabStatusCache: () => void;
 export declare const initializeCashtabStatus: () => Promise<boolean>;
-export declare const waitForCashtabExtension: (timeout?: number | undefined) => Promise<void>;
+export declare const waitForCashtabExtension: (timeout?: number) => Promise<void>;
 /**
  * Request the user's eCash address from their Cashtab wallet
  * @returns Promise<string> - The user's address
@@ -25,5 +25,5 @@ export declare const sendXecWithCashtab: (address: string, amount: string | numb
  * @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 declare const openCashtabPayment: (bip21Url: string, fallbackUrl?: string) => Promise<void>;
 export { CashtabExtensionUnavailableError, CashtabAddressDeniedError, CashtabTimeoutError };

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

@@ -3,5 +3,16 @@ export declare const CRYPTO_CURRENCIES: string[];
 export declare const DECIMALS: {
     [key: string]: number;
 };
+export declare const MAX_AMOUNT: {
+    [key: string]: number;
+};
+export declare const AUTO_CLOSE_DEFAULT_MS = 2000;
 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;
+export declare const CURRENCY_TYPES_MAP: Record<typeof CRYPTO_CURRENCIES[number], string>;
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "extrasmall" | "small" | "medium" | "large" | "extralarge" | undefined;
+export declare const DEFAULT_DONATION_RATE = 2;
+export declare const DONATION_RATE_STORAGE_KEY = "paybutton_donation_rate";
+export declare const DONATION_RATE_FIAT_THRESHOLD = 5;
+export declare const DEFAULT_MINIMUM_DONATION_AMOUNT: {
+    [key: string]: number;
+};

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

@@ -1,10 +1,10 @@
 import { Currency } from './types';
-export declare const amount: (x?: number | null | undefined) => string | undefined;
+export declare const amount: (x?: number | null) => string | undefined;
 export declare const formatPrice: (price: number, currencyType: Currency, precision?: number) => string;
 export declare const formatComma: (number: number) => string;
 export declare const formatBCH: (bch: string) => string;
 export declare const formatXEC: (xec: string) => string;
-export declare const isPropsTrue: (value?: string | boolean | undefined) => boolean;
+export declare const isPropsTrue: (value?: string | boolean) => boolean;
 declare const _default: {
     amount: (x?: number | null | undefined) => string | undefined;
     formatPrice: (price: number, currencyType: string, precision?: number) => string;

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

@@ -11,3 +11,4 @@ export * from './types';
 export * from './number';
 export * from './currency';
 export * from './validate';
+export * from './autoClose';

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

@@ -36,5 +36,5 @@ interface SetupTxsSocketParams {
 }
 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 declare const onMessage: (transactions: Transaction[], setNewTxs: Function, setDialogOpen?: Function, checkSuccessInfo?: CheckSuccessInfo) => void;
 export {};

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

@@ -1,6 +1,6 @@
 import BigNumber from "bignumber.js";
 import { CRYPTO_CURRENCIES, FIAT_CURRENCIES } from "./constants";
-export declare type CurrencyObject = {
+export type CurrencyObject = {
     float: number;
     string: string;
     currency: string;
@@ -123,12 +123,12 @@ export interface TransactionDetails {
         };
     };
 }
-declare type FiatCurrenciesTuple = typeof FIAT_CURRENCIES;
-declare type CyptoCurrenciesTuple = typeof CRYPTO_CURRENCIES;
-declare type TxBroadcast = 'NewTx' | 'OldTx';
-export declare type CryptoCurrency = FiatCurrenciesTuple[number];
-export declare type FiatCurrency = CyptoCurrenciesTuple[number];
-export declare type Currency = CryptoCurrency | FiatCurrency;
+type FiatCurrenciesTuple = typeof FIAT_CURRENCIES;
+type CyptoCurrenciesTuple = typeof CRYPTO_CURRENCIES;
+type TxBroadcast = 'NewTx' | 'OldTx';
+export type CryptoCurrency = FiatCurrenciesTuple[number];
+export type FiatCurrency = CyptoCurrenciesTuple[number];
+export type Currency = CryptoCurrency | FiatCurrency;
 export interface BroadcastTxData {
     address: string;
     txs: Transaction[];
@@ -143,5 +143,6 @@ export interface CheckSuccessInfo {
     expectedAmount?: BigNumber | number;
     expectedOpReturn?: string;
     currencyObj?: CurrencyObject;
+    donationRate?: number;
 }
 export {};

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

@@ -1,3 +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;
+export declare const shouldTriggerOnSuccess: (transaction: Transaction, currency: string, price: number, randomSatoshis: number | boolean, disablePaymentId?: boolean, expectedPaymentId?: string, expectedAmount?: BigNumber | number, expectedOpReturn?: string, currencyObject?: CurrencyObject) => boolean;

package/dist/src/App.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare function App(): JSX.Element;
+import React from "react";
+declare function App(): React.JSX.Element;
 export default App;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paybutton/react",
-  "version": "5.0.3",
+  "version": "5.1.1",
   "description": "The easiest way to accept eCash online",
   "author": "Blockchain Ventures Corp.",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.9",
@@ -41,14 +41,16 @@
     "@storybook/cli": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@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",
+    "@types/react": "18.3.26",
+    "@types/react-dom": "18.0.0",
     "@typescript-eslint/eslint-plugin": "8.39.1",
     "@typescript-eslint/parser": "8.39.1",
     "@vitejs/plugin-react": "^4.6.0",
@@ -70,11 +72,12 @@
     "eslint-plugin-standard": "4.1.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "4.3.8",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "10.5.4",
-    "microbundle": "0.12.4",
+    "microbundle": "^0.15.1",
     "prettier": "2.7.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "18",
+    "react-dom": "18",
     "react-is": "16.13.1",
     "react-scripts": "5.0.1",
     "storybook": "^7.6.17",
@@ -83,12 +86,13 @@
     "yarn-run-all": "^3.1.1"
   },
   "dependencies": {
-    "@material-ui/core": "4.12.4",
-    "@material-ui/lab": "4.0.0-alpha.61",
-    "@material-ui/styles": "4.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/lab": "^7.0.1-beta.18",
+    "@mui/material": "^7.3.4",
     "@types/crypto-js": "^4.2.1",
     "@types/jest": "^29.5.11",
-    "axios": "1.6.5",
+    "axios": "1.12.0",
     "bignumber.js": "9.0.2",
     "cashtab-connect": "^1.1.0",
     "chronik-client-cashtokens": "^3.4.0",
@@ -98,11 +102,12 @@
     "ecashaddrjs": "^2.0.0",
     "jest": "^29.7.0",
     "lodash": "4.17.21",
-    "notistack": "1.0.10",
-    "qrcode.react": "1.0.1",
+    "notistack": "3.0.0",
+    "qrcode.react": "3",
     "react-jss": "10.10.0",
+    "react-number-format": "^5.4.4",
     "socket.io-client": "4.7.4",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.4.5",
     "xecaddrjs": "^0.0.1"
   },
   "lint-staged": {
@@ -112,8 +117,12 @@
     ]
   },
   "resolutions": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "chronik-client-cashtokens/ecashaddrjs": "^2.0.0"
+    "@types/react": "18.3.26",
+    "@types/react-dom": "18.3.0",
+    "chronik-client-cashtokens/ecashaddrjs": "^2.0.0",
+    "webpack": "^5.0.0",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "jsdom": "20.0.3"
   }
 }