Merge branch 'insightImprovements' of https://github.com/kajoseph/bit…

…core

packages/insight/src/api/api.ts

@@ -1,7 +1,7 @@
 import useSWR from 'swr';
 import {urlSafetyCheck} from '../utilities/helper-methods';
-import axios from 'axios';
+import axios, { AxiosRequestConfig } from 'axios';
 
-export const fetcher = (url: string) => axios.get(url).then(res => res.data);
+export const fetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then(res => res.data);
 export const useApi = (url: string, options?: object) =>
   useSWR(urlSafetyCheck(url), fetcher, options);

packages/insight/src/components/coin-list.tsx

@@ -58,26 +58,25 @@ const ToUiFriendlyEthCoin = (coin: TransactionEth, blockTipHeight: number) => {
 
 const ProcessData = (data: any, blockTipHeight: number) => {
   const txs: any = [];
-  data.map((tx: any) => {
+  for (const tx of data) {
     const {mintHeight, mintTxid, value, spentHeight, spentTxid} = tx;
     if (spentHeight >= -1) {
       txs.push({
         height: spentHeight,
         spentTxid,
         value,
-        confirmations: blockTipHeight - spentHeight + 1,
+        confirmations: spentHeight > -1 ? (blockTipHeight - spentHeight + 1) : spentHeight,
       });
     }
     if (mintHeight >= -1) {
       txs.push({
         height: mintHeight,
         mintTxid,
         value,
-        confirmations: blockTipHeight - mintHeight + 1,
+        confirmations: mintHeight > -1 ? (blockTipHeight - mintHeight + 1) : mintHeight,
       });
     }
-    return tx;
-  });
+  }
 
   return txs;
 };
@@ -105,14 +104,14 @@ const CoinList: FC<CoinListProps> = ({txs, currency, network, tip, transactionsL
 
   useEffect(() => {
     setIsLoading(true);
-    transactionsLength(txs.length);
 
     let _txs;
     if (currency === 'ETH') {
       _txs = txs.map((tx: any) => ToUiFriendlyEthCoin(tx, height));
     } else {
       _txs = ProcessData(txs, height);
     }
+    transactionsLength(_txs.length);
     _txs = _txs.sort((a: any, b: any) => b.height - a.height);
     setTxsCopy(_txs);
     const _transactions = _txs.slice(0, limit);

packages/insight/src/components/coin.tsx

@@ -83,7 +83,7 @@ const Coin: FC<CoinProps> = ({transaction, currency, network, order}) => {
             {showTimer ? (
               <TileDescription value width='auto'>
                 {' '}
-                Mined on {getFormattedDate(time)}{' '}
+                {confirmations > 0 ? 'Mined' : 'Seen'} on {getFormattedDate(time)}{' '}
               </TileDescription>
             ) : (
               <TileLink value width='auto' onClick={() => getTxData(mintTxid)}>
@@ -134,7 +134,7 @@ const Coin: FC<CoinProps> = ({transaction, currency, network, order}) => {
             {showTimer ? (
               <TileDescription value width='auto'>
                 {' '}
-                Mined on {getFormattedDate(time)}{' '}
+                {confirmations > 0 ? 'Mined' : 'Seen'} on {getFormattedDate(time)}{' '}
               </TileDescription>
             ) : (
               <TileLink value width='auto' onClick={() => getTxData(spentTxid)}>

packages/insight/src/pages/address.tsx

@@ -39,7 +39,7 @@ const Address: React.FC = () => {
   const {address} = params;
   let {currency, network} = params;
   const dispatch = useAppDispatch();
-  const [nroTransactionsLength, setNroTransactionsLength] = useState(0);
+  const [numTransactions, setNumTransactions] = useState(0);
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [balance, setBalance] = useState<any>();
@@ -85,20 +85,14 @@ const Address: React.FC = () => {
           {currency && balance && tip && txs && address && network ? (
             <motion.div variants={routerFadeIn} animate='animate' initial='initial'>
               <MainTitle>
-                Summary
+                Address
                 <SupCurrencyLogo currency={currency} />
               </MainTitle>
 
+              <SecondaryTitle>{address} <CopyText text={address}></CopyText></SecondaryTitle>
+
               <TransactionTileBody>
                 <TransactionBodyCol type='Nine' backgroundColor='transparent' padding='1rem 0'>
-                  <Tile withBorderBottom>
-                    <TileDescription margin='0 1rem 0 0'>Address</TileDescription>
-                    <TileDescription value textAlign='right'>
-                      <CopyText text={address}></CopyText>
-
-                      {address}
-                    </TileDescription>
-                  </Tile>
 
                   <Tile withBorderBottom>
                     <TileDescription margin='0 1rem 0 0'>Confirmed Balance</TileDescription>
@@ -117,9 +111,9 @@ const Address: React.FC = () => {
                   )}
 
                   <Tile withBorderBottom>
-                    <TileDescription margin='0 1rem 0 0'>Nro. Transactions</TileDescription>
+                    <TileDescription margin='0 1rem 0 0'>No. Transactions</TileDescription>
                     <TileDescription value textAlign='right'>
-                      {nroTransactionsLength || 0}
+                      {numTransactions || 0}
                     </TileDescription>
                   </Tile>
                 </TransactionBodyCol>
@@ -143,7 +137,7 @@ const Address: React.FC = () => {
                 currency={currency}
                 network={network}
                 tip={tip}
-                transactionsLength={setNroTransactionsLength}
+                transactionsLength={setNumTransactions}
               />
             </motion.div>
           ) : null}

packages/insight/src/pages/transaction.tsx

@@ -14,18 +14,15 @@ import {DisplayFlex, ConfirmationLabel} from '../assets/styles/global';
 import {TransactionBodyCol, TransactionTileBody} from '../assets/styles/transaction';
 import {motion} from 'framer-motion';
 import {routerFadeIn} from '../utilities/animations';
-import {Link, useLocation, useNavigate, useParams, useSearchParams} from 'react-router-dom';
+import {Link, useNavigate, useParams, useSearchParams} from 'react-router-dom';
 import {useAppDispatch} from '../utilities/hooks';
 import React, {useEffect, useState} from 'react';
 import {changeCurrency, changeNetwork} from '../store/app.actions';
 import nProgress from 'nprogress';
+import ConfirmedWav from '../assets/sounds/confirmed.wav';
+import NotConfirmedWav from '../assets/sounds/notConfirmed.wav';
+import {playSoundEffect} from 'src/utilities/sound';
 
-const getTxData = (state: any): Promise<any> => {
-  // Tx data from search
-  return new Promise(resolve => {
-    resolve(state.transactionData);
-  });
-};
 
 const TransactionHash: React.FC = () => {
   const navigate = useNavigate();
@@ -39,9 +36,9 @@ const TransactionHash: React.FC = () => {
   const [transaction, setTransaction] = useState<any>();
   const dispatch = useAppDispatch();
   const [error, setError] = useState('');
-  const {state} = useLocation();
   const [refTxid, setRefTxid] = useState<string | undefined>();
   const [refVout, setRefVout] = useState<number | undefined>();
+  let confInterval: number;
 
   useEffect(() => {
     if (reftxidParam != null && reftxidParam !== '') {
@@ -70,8 +67,7 @@ const TransactionHash: React.FC = () => {
     dispatch(changeNetwork(network));
 
     Promise.all([
-      // @ts-ignore
-      state?.transactionData ? getTxData(state) : fetcher(`${baseUrl}/tx/${tx}`),
+      fetcher(`${baseUrl}/tx/${tx}`),
       fetcher(`${baseUrl}/block/tip`),
       fetcher(`${baseUrl}/tx/${tx}/coins`),
     ])
@@ -86,6 +82,10 @@ const TransactionHash: React.FC = () => {
         _transaction.confirmations = blockHeight > 0 ? height - blockHeight + 1 : blockHeight;
 
         setTransaction(_transaction);
+
+        if (_transaction.confirmations === -1) { // unconfirmed
+          listenForConfs(baseUrl, _transaction);
+        }
       })
       .catch((e: any) => {
         setError(e.message || 'Error getting transaction.');
@@ -94,6 +94,12 @@ const TransactionHash: React.FC = () => {
         setIsLoading(false);
         nProgress.done();
       });
+
+    // clear interval on nav to new tx or unmount
+    return () => {
+      clearInterval(confInterval);
+      confInterval = 0;
+    };  
   }, [network, currency, tx]);
 
   const goToTx = (tx: any) => {
@@ -103,6 +109,45 @@ const TransactionHash: React.FC = () => {
     });
   };
 
+  const listenForConfs = (baseUrl: string, transaction: any) => {
+    if (confInterval) {
+      // already listening for confs
+      return;
+    }
+    confInterval = setInterval(() => {
+      Promise.all([
+        fetcher(`${baseUrl}/tx/${tx}`),
+        fetcher(`${baseUrl}/block/tip`)
+      ])
+        .then(([_txRefresh, _newTip]) => {
+          const {blockHeight} = _txRefresh;
+          const {height} = _newTip;
+          const confirmations = blockHeight > 0 ? height - blockHeight + 1 : blockHeight;
+          if (confirmations !== -1) { // conf status has changed from unconfirmed
+            clearInterval(confInterval);
+            transaction.confirmations = confirmations;
+            if (confirmations > -1) { // if confirmed
+              transaction.blockHash = _txRefresh.blockHash;
+              transaction.blockTime = _txRefresh.blockTime;
+              playSoundEffect(ConfirmedWav);
+            } else if (confirmations < -1) { // if invalid
+              transaction.replacedByTxid = _txRefresh.replacedByTxid;
+              playSoundEffect(NotConfirmedWav);
+            }
+            setIsLoading(true);
+            nProgress.start();
+            setTransaction(transaction);
+          }
+        })
+        .catch(() => {/**/})
+        .finally(() => {
+          setIsLoading(false);
+          nProgress.done();
+        })
+    }, 10000);
+  };
+
+
   return (
     <>
       {!isLoading ? (
@@ -141,7 +186,7 @@ const TransactionHash: React.FC = () => {
                     message={`This transaction was replaced by another transaction that ${
                       transaction.chain === 'ETH'
                         ? 'used the same nonce'
-                        : "spent some of it's inputs"
+                        : 'spent some of it\'s inputs'
                     }.`}
                     type={'error'}
                   />

packages/insight/src/react-app-env.d.ts

@@ -1 +1,5 @@
 // / <reference types="react-scripts" />
+declare module '*.wav' {
+  const src: string;
+  export default src;
+}

packages/insight/src/utilities/sound.ts

@@ -0,0 +1,14 @@
+import {fetcher} from 'src/api/api';
+
+export function playSoundEffect(soundFile: any) {
+  const context = new (window.AudioContext || (window as any).webkitAudioContext)();
+  fetcher(soundFile, { responseType: 'arraybuffer' })
+    .then(response => context.decodeAudioData(response))
+    .then(audioBuffer => {
+      const source = context.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(context.destination);
+      source.start();
+    })
+    .catch(e => console.log('error loading sound', e));
+};