Currently, Cashtab updates the wallet every 10 seconds

• Cashtab makes an api call to retrieve the utxos set of the active wallet.
• If the utxos set has changed since last update, Cashtab will retrieve the latest 10 transactions of the active wallet.
• These 10 transactions will be shown in the Transaction History section

This approach has a few problem

• Transaction details will never change. When there is a new transaction, Cashtab should only retrieve

the new transaction from api server. The other 9 transactions are already stored in Cashtab,
we should not have to retrieve those details again from api server

• If we increase the number of transactions from 10 to say 100 (user should be able to view all the transactions),

we will likely reach the rate-limits imposed by the api server. Every 10s, Cashtab makes 100 api calls.
If these 100 api calls are completed before the next update, everything will be fine.
However, if it takes more than 10s, the next update will start and make another 100 api calls.
And it continues making another 100 api calls every 10s, causing rate-limits error. (adding a check
to make sure the next update will not run before the previous update has completed would fix this.)

This Diff adds caching with Service Worker to reduce the number of api calls that hit the api server.

With Service Worker and Caching

• we can potentially reduce the update cycle from 10s.
• add Push Notification

1. First Visit - when user first visits cashtab.com, static assets will be cached
2. cd web/cashtab
3. npm install
4. npm start
5. make sure no error
6. clt + c to kill the server
7. npm run build
8. npm install -g serve
9. serve -s build (intead of npm start, due to file size of the main js chunk procuded by the dev server being >= 4MB, prevent it from being cached)
10. open localhost:3000 on browser
11. check that the following caches are created + cashtab-static-assets-v1.0.0 + cashtab-tx-data-v1.0.0 + cashtab-slp-tx-data-v1.0.0 + cashtab-slp-token-stats-v1.0.0
12. check that everything works as expected

2. Subsequent Visit - after caches are created, static assets and existing transaction details will be served by the caches
3. refresh localhost:3000
4. make sure that all static assets are served from caches (inspect Developer Tools / Network Tab)
5. make sure everything works as expected

3. New transaction
4. send / receive xec with the wallet
5. make sure that only the new transaction request is served by the api server, the rest is served from caches

4. Update patches - caches will serve up the latest update patches
5. make some changes to the code + change primary colour in src/assets/styles/themes.js to #00AB7E + change txHistoryCount in src/components/Common/Tickers.js from 10 to 20
6. npm run build
7. serve -s build
8. open localhost:3000
9. check that the primary colour has been changed
10. send / recieve xec with this wallet
11. make sure that the Transaction History is now showing 20 transactions