Feat connect chronik websocket directly

paybutton/package.json

@@ -26,7 +26,8 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "tslib": "^2.6.2",
-    "typescript": "^4.8.2"
+    "typescript": "^4.8.2",
+    "ecashaddrjs": "^2.0.0"
   },
   "scripts": {
     "dev": "rollup -c rollup.dev.js -w",
@@ -43,6 +44,7 @@
   "resolutions": {
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
-    "readable-stream": "^3.5.0"
+    "readable-stream": "^3.5.0",
+    "ecashaddrjs": "^2.0.0"
   }
 }

react/lib/components/PayButton/PayButton.tsx

@@ -17,7 +17,7 @@ import {
   getCurrencyObject,
   isPropsTrue,
   setupAltpaymentSocket,
-  setupTxsSocket,
+  setupChronikWebSocket,
   CryptoCurrency,
   ButtonSize
 } from '../../util';
@@ -184,7 +184,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     (async () => {
     if (txsSocket === undefined) {
       const expectedAmount = currencyObj ? currencyObj?.float : undefined
-      await setupTxsSocket({
+      await setupChronikWebSocket({
         address: to,
         txsSocket,
         apiBaseUrl,
@@ -221,10 +221,6 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     })()
 
     return () => {
-      if (txsSocket !== undefined) {
-        txsSocket.disconnect();
-        setTxsSocket(undefined);
-      }
       if (altpaymentSocket !== undefined) {
         altpaymentSocket.disconnect();
         setAltpaymentSocket(undefined);

react/lib/components/Widget/Widget.tsx

@@ -14,8 +14,8 @@ import { Theme, ThemeName, ThemeProvider, useTheme } from '../../themes';
 import { Button, animation } from '../Button/Button';
 import BarChart from '../BarChart/BarChart';
 import {
-  Currency,
   getAddressBalance,
+  Currency,
   isFiat,
   Transaction,
   openCashtabPayment,
@@ -31,7 +31,7 @@ import {
   CURRENCY_PREFIXES_MAP,
   CRYPTO_CURRENCIES,
   isPropsTrue,
-  setupTxsSocket,
+  setupChronikWebSocket,
   setupAltpaymentSocket,
   CryptoCurrency,
 } from '../../util';
@@ -357,7 +357,10 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
 
   const [internalNewTxs, setInternalNewTxs] = useState<Transaction[] | undefined>();
   const thisNewTxs = newTxs ?? internalNewTxs
-  const setThisNewTxs = setNewTxs ?? setInternalNewTxs
+  const setThisNewTxs = useCallback((txs: Transaction[]) => {
+  const setterFn = setNewTxs ?? setInternalNewTxs;
+    setterFn(txs);
+  }, [setNewTxs])
 
   const [internalAltpaymentShift, setInternalAltpaymentShift] = useState<AltpaymentShift | undefined>(undefined);
   const thisAltpaymentShift = altpaymentShift ?? internalAltpaymentShift;
@@ -478,7 +481,7 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
   useEffect(() => {
     (async () => {
       if (isChild !== true) {
-        await setupTxsSocket({
+        await setupChronikWebSocket({
           address: to,
           txsSocket: thisTxsSocket,
           apiBaseUrl,
@@ -504,10 +507,6 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
     })()
 
     return () => {
-      if (thisTxsSocket !== undefined) {
-        thisTxsSocket.disconnect();
-        setThisTxsSocket(undefined);
-      }
       if (thisAltpaymentSocket !== undefined) {
         thisAltpaymentSocket.disconnect();
         setThisAltpaymentSocket(undefined);
@@ -532,11 +531,13 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
 
   useEffect(() => {
     (async (): Promise<void> => {
-      const balance = await getAddressBalance(to, apiBaseUrl);
-      setTotalReceived(balance);
+      if(thisNewTxs === undefined || thisNewTxs.length === 0) {
+        const balance = await getAddressBalance(to, apiBaseUrl);
+        setTotalReceived(balance);
+      }
       setLoading(false);
     })();
-  }, [thisNewTxs]);
+  }, [thisNewTxs, to, apiBaseUrl]);
 
   useEffect(() => {
     const invalidAmount =

react/lib/example-config.json

@@ -1,5 +1,19 @@
 {
   "wsBaseUrl": "http://localhost:5000",
   "apiBaseUrl": "http://localhost:3000",
-  "altpaymentClient": "mocked"
+  "altpaymentClient": "mocked",
+  "networkBlockchainURLs": {
+    "ecash": [
+      "https://xec.paybutton.org",
+      "https://chronik1.alitayin.com",
+      "https://chronik2.alitayin.com",
+      "https://chronik.e.cash",
+      "https://chronik-native1.fabien.cash",
+      "https://chronik-native2.fabien.cash",
+      "https://chronik-native3.fabien.cash",
+      "https://chronik.pay2stay.com/xec",
+      "https://chronik.pay2stay.com/xec2"
+    ],
+    "bitcoincash": ["https://bch.paybutton.org", "https://chronik.pay2stay.com/bch"]
+  }
 }