feat: clear cache button (#4912)

src/assets/translations/en/main.json

@@ -1065,6 +1065,8 @@
       "loadingText": "Pairing Wallet"
     },
     "settings": {
+      "clearCache": "Clear cache",
+      "clearCacheTooltip": "Clear cache and reload app",
       "settings": "Settings",
       "currency": "Currency",
       "clearWalletAccountData": "Delete all accounts & wallet data",

src/components/Modals/Settings/SettingsList.tsx

@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react'
 import type { FC } from 'react'
 import { useCallback, useState } from 'react'
-import { FaCoins, FaDollarSign, FaGreaterThanEqual, FaTrash } from 'react-icons/fa'
+import { FaBroom, FaCoins, FaDollarSign, FaGreaterThanEqual, FaTrash } from 'react-icons/fa'
 import { IoDocumentTextOutline, IoLockClosed } from 'react-icons/io5'
 import { MdChevronRight, MdLanguage } from 'react-icons/md'
 import { useTranslate } from 'react-polyglot'
@@ -22,7 +22,10 @@ import { useHistory } from 'react-router-dom'
 import { getLocaleLabel } from 'assets/translations/utils'
 import { SlideTransition } from 'components/SlideTransition'
 import { RawText } from 'components/Text'
-import { deleteWallet } from 'context/WalletProvider/MobileWallet/mobileMessageHandlers'
+import {
+  deleteWallet,
+  reloadWebview,
+} from 'context/WalletProvider/MobileWallet/mobileMessageHandlers'
 import { useModal } from 'hooks/useModal/useModal'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { isMobile as isMobileApp } from 'lib/globals'
@@ -31,7 +34,7 @@ import {
   selectSelectedCurrency,
   selectSelectedLocale,
 } from 'state/slices/selectors'
-import { useAppSelector } from 'state/store'
+import { persistor, useAppSelector } from 'state/store'
 
 import { BalanceThresholdInput } from './BalanceThresholdInput'
 import { currencyFormatsRepresenter, SettingsRoutes } from './SettingsCommon'
@@ -86,6 +89,17 @@ export const SettingsList: FC<SettingsListProps> = ({ appHistory }) => {
     }
   }
 
+  const handleClearCacheClick = useCallback(async () => {
+    try {
+      // clear store
+      await persistor.purge()
+      // send them back to dashboard in case the bug was something to do with the current page
+      appHistory.replace('/')
+      // reload the page
+      isMobileApp ? reloadWebview() : window.location.reload()
+    } catch (e) {}
+  }, [appHistory])
+
   return (
     <SlideTransition>
       <ModalHeader textAlign='center' userSelect='none' onClick={handleHeaderClick}>
@@ -152,6 +166,13 @@ export const SettingsList: FC<SettingsListProps> = ({ appHistory }) => {
             <BalanceThresholdInput />
           </SettingsListItem>
           <Divider my={1} />
+          <SettingsListItem
+            label='modals.settings.clearCache'
+            icon={<Icon as={FaBroom} color='gray.500' />}
+            tooltipText='modals.settings.clearCacheTooltip'
+            onClick={handleClearCacheClick}
+          />
+          <Divider my={1} />
           <SettingsListItem
             label='common.terms'
             onClick={() => closeModalAndNavigateTo('/legal/terms-of-service')}

src/context/WalletProvider/MobileWallet/mobileMessageHandlers.ts

@@ -13,6 +13,7 @@ type Command =
   | 'addWallet'
   | 'listWallets'
   | 'getWalletCount'
+  | 'reloadWebview'
 
 type Message =
   | {
@@ -47,6 +48,9 @@ type Message =
       cmd: 'showDeveloperModal'
       key: string
     }
+  | {
+      cmd: 'reloadWebview'
+    }
 
 export type MessageFromMobileApp = {
   id: number
@@ -175,6 +179,13 @@ export const deleteWallet = (key: string): Promise<boolean> => {
   return postMessage<boolean>({ cmd: 'deleteWallet', key })
 }
 
+/**
+ * Ask the mobile app to reload the webview.
+ */
+export const reloadWebview = (): Promise<boolean> => {
+  return postMessage<boolean>({ cmd: 'reloadWebview' })
+}
+
 /**
  * Get a password hash for logging into legacy ShapeShift
  */