@paybutton/react 4.2.0 → 5.0.1

package/dist/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/lib/components/Button/Button.stories.d.ts

@@ -1,23 +1,7 @@
-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>;
+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/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/lib/components/PaymentDialog/PaymentDialog.stories.d.ts

@@ -16,7 +16,7 @@ declare const _default: {
             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: {
@@ -42,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/lib/components/Widget/Widget.stories.d.ts

@@ -3,7 +3,7 @@ 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)[];
+    decorators: ((Story: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>) => React.ReactNode)[];
     argTypes: {
         success: {
             control: string;
@@ -26,9 +26,9 @@ declare const _default: {
     };
 };
 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>;
+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/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/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/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

@@ -1,5 +1,5 @@
 import { Socket } from 'socket.io-client';
-import { CheckSuccessInfo } from './types';
+import { CheckSuccessInfo, Transaction } from './types';
 interface AltpaymentListenerParams {
     addressType: string;
     altpaymentSocket: Socket;
@@ -35,4 +35,6 @@ interface SetupTxsSocketParams {
     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/lib/util/types.d.ts

@@ -15,6 +15,7 @@ export interface Transaction {
     address: string;
     rawMessage?: string;
     inputAddresses?: string[];
+    opReturn?: string;
 }
 export interface UtxoDetails {
     outputsList: [Output];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paybutton/react",
-  "version": "4.2.0",
+  "version": "5.0.1",
   "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": "8.6.12",
-    "@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": "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"
   }
 }