move vault refresh button to settings page

client/src/platforms/desktop/components/navigation/index.tsx

@@ -14,7 +14,6 @@ import {
   OptionsIcon,
   OptionsList,
   OptionsSVG,
-  Scan,
 } from "./styles";
 
 import { closeWallet } from "shared/actions/walletSession";
@@ -33,8 +32,6 @@ import Cell from "./cell";
 import Link from "./link";
 import Tab from "./tab";
 
-import { showModal } from "shared/actions/modal";
-import { MODAL_TYPE } from "shared/reducers/modal";
 import { isConnected } from "shared/core/havend";
 
 interface NavigationProps {
@@ -49,7 +46,6 @@ interface NavigationProps {
   basicActive: boolean;
   advancedActive: boolean;
   startedResync: boolean;
-  showModal: (modalType: MODAL_TYPE) => void;
   syncState: SyncState;
   connected: boolean;
   restoreHeight: number;
@@ -137,10 +133,6 @@ class Navigation extends Component<NavigationProps, any> {
     });
   };
 
-  refreshVault = () => {
-    this.props.showModal(MODAL_TYPE.RescanBC);
-  };
-
   render() {
     const auth = this.props.isLoggedIn;
     const { current_network } = this.state;
@@ -253,7 +245,6 @@ class Navigation extends Component<NavigationProps, any> {
                         body="Refresh Height"
                         label={this.props.restoreHeight}
                       />
-                      <Scan onClick={this.refreshVault}>Refresh Vault</Scan>
                     </>
                   )}
                 </>
@@ -278,6 +269,5 @@ const mapStateToProps = (state: DesktopAppState) => ({
 });
 
 export const NavigationDesktop = connect(mapStateToProps, {
-  logout: closeWallet,
-  showModal,
+  logout: closeWallet
 })(Navigation);

client/src/platforms/desktop/components/navigation/styles.js

@@ -22,22 +22,6 @@ export const Container = styled.header`
   border-bottom: 1px solid ${(props) => props.theme.body.border};
 `;
 
-export const Scan = styled.div`
-  font-size: 13px;
-  border-radius: 4px;
-  margin: 8px;
-  height: 36px;
-  background: ${(props) => props.theme.button.primary};
-  color: ${(props) => props.theme.button.primary_label};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
 export const Haven = styled.div`
   color: ${(props) => props.theme.type.primary};
   font-size: 20px;

client/src/platforms/desktop/pages/_wallet/settings/index.tsx

@@ -8,6 +8,8 @@ import Body from "shared/components/_layout/body";
 import Header from "shared/components/_layout/header";
 import Form from "shared/components/_inputs/form";
 import Theme from "shared/components/_inputs/theme";
+import { showModal } from "shared/actions/modal";
+import { MODAL_TYPE } from "shared/reducers/modal";
 // For the miner
 import { selectisLocalNode } from "platforms/desktop/reducers/selectedNode";
 import { DesktopAppState } from "platforms/desktop/reducers";
@@ -24,6 +26,7 @@ import {
 import { HavenNodeSetting } from "platforms/desktop/pages/_wallet/settings/node/nodeSetting";
 import { Container } from "./styles";
 import DoubleFooter from "shared/components/_inputs/double_footer";
+import Footer from "shared/components/_inputs/footer";
 
 type ThemeOption = { theme: string; value: string };
 type BalanceOption = { ticker: string; value: string; code: string };
@@ -46,6 +49,7 @@ interface SettingsProps {
   title: string;
   description: string;
   localNode: boolean;
+  showModal: (modalType: MODAL_TYPE) => void;
 }
 
 const options: ThemeOption[] = [
@@ -131,6 +135,10 @@ class SettingsDesktopPage extends Component<SettingsProps, any> {
     this.props.downloadTransfers("csv");
   };
 
+  refreshVault = () => {
+    this.props.showModal(MODAL_TYPE.RescanBC);
+  };
+
   handleChange = (event: any) => {
     const name = event.target.name;
     const value = event.target.value;
@@ -185,6 +193,18 @@ class SettingsDesktopPage extends Component<SettingsProps, any> {
               rightOnClick={this.downloadTxCsv}
             />
           </Container>
+        <Header
+          title="Refresh Vault"
+          description="Use this option to resolve issues with transactions not displaying correctly in the vault"
+        />
+        <Container>
+            <Footer
+              label={"Refresh Vault"}
+              disabled={false}
+              loading={false}
+              onClick={this.refreshVault}
+            />
+        </Container>
       </Body>
     );
   }
@@ -201,5 +221,6 @@ export const SettingsDesktop = connect(mapStateToProps, {
   startMining,
   stopMining,
   miningStatus,
-  downloadTransfers
+  downloadTransfers,
+  showModal
 })(SettingsDesktopPage);

client/src/platforms/web/components/navigation/index.tsx

@@ -15,7 +15,6 @@ import {
   OptionsList,
   OptionsSVG,
   Arr,
-  Scan,
   Arrow,
 } from "./styles.js";
 import Buttons from "./buttons/index.js";
@@ -28,8 +27,6 @@ import { HavenAppState } from "platforms/desktop/reducers/index.js";
 import Cell from "./cell";
 import Link from "./link";
 import Tab from "./tab";
-import { showModal } from "shared/actions/modal";
-import { MODAL_TYPE } from "shared/reducers/modal";
 import { closeWallet } from "shared/actions/walletSession";
 import { XBalances } from "shared/reducers/xBalance";
 import Search from "../../../../shared/components/search/index.js";
@@ -48,7 +45,6 @@ interface NavigationProps {
   activeWallet: string | undefined;
   startedResync: boolean;
   balances: XBalances;
-  showModal: (modalType: MODAL_TYPE) => void;
 }
 
 class Navigation extends Component<NavigationProps, {}> {
@@ -119,10 +115,6 @@ class Navigation extends Component<NavigationProps, {}> {
     });
   };
 
-  refreshVault = () => {
-    this.props.showModal(MODAL_TYPE.RescanBC);
-  };
-
   render() {
     const auth = this.props.isLoggedIn;
     // @ts-ignore
@@ -232,7 +224,6 @@ class Navigation extends Component<NavigationProps, {}> {
                         body="Refresh Height"
                         label={this.props.restoreHeight}
                       />
-                      <Scan onClick={this.refreshVault}>Refresh Vault</Scan>
                     </>
                   )}
                 </>
@@ -256,6 +247,5 @@ const mapStateToProps = (state: WebAppState) => ({
 });
 
 export const NavigationWeb = connect(mapStateToProps, {
-  logout: closeWallet,
-  showModal,
+  logout: closeWallet
 })(Navigation);

client/src/platforms/web/components/navigation/styles.js

@@ -24,23 +24,6 @@ export const Container = styled.header`
   border-bottom: 1px solid ${(props) => props.theme.body.border};
 `;
 
-export const Scan = styled.div`
-  font-size: 13px;
-  border-radius: 4px;
-  margin: 8px;
-  height: 36px;
-  background: ${(props) => props.theme.button.primary};
-  color: ${(props) => props.theme.button.primary_label};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: Inter-Regular;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
 export const Label = styled.div`
   font-family: Inter-Regular;
   text-align: center;

client/src/shared/pages/_wallet/settings/index.tsx

@@ -10,21 +10,22 @@ import RevealSeed from "../../../components/_inputs/revealSeed";
 import Form from "../../../components/_inputs/form";
 import Theme from "../../../components/_inputs/theme";
 import DoubleFooter from "../../../components/_inputs/double_footer";
+import Footer from "../../../components/_inputs/footer";
 import { Container } from "./styles";
 import { storeKeyFileToDisk } from "platforms/web/actions/storage";
 import { HavenAppState } from "platforms/desktop/reducers";
 import { IKeys } from "typings";
 import { isTemporaryWallet as selectIsTemporaryWallet } from "shared/reducers/walletSession";
 import { selectSyncState } from "shared/reducers/chain";
 import { SyncState } from "shared/types/types";
+import { showModal } from "shared/actions/modal";
+import { MODAL_TYPE } from "shared/reducers/modal";
 
 import {downloadTransfers} from "shared/actions/transferHistory";
 
 // Address parts
 import { AddressEntry } from "shared/reducers/address";
 import { writeText } from "vendor/clipboard/clipboard-polyfill";
-import { showModal } from "../../../actions/modal";
-import { MODAL_TYPE } from "../../../reducers/modal";
 import { selectSelectedAddress } from "../../../reducers/address";
 import { setSelectedAddress } from "shared/actions/address";
 import AddressDropdown from "../../../components/_inputs/addresses_dropdown/index.js";
@@ -326,6 +327,18 @@ class SettingsPage extends Component<SettingsProps, SettingsState> {
             rightOnClick={this.toggleVisibility}
           />
         </Container>
+        <Header
+          title="Refresh Vault"
+          description="Use this option to resolve issues with transactions not displaying correctly in the vault"
+        />
+        <Container>
+            <Footer
+              label={"Refresh Vault"}
+              disabled={false}
+              loading={false}
+              onClick={this.refreshVault}
+            />
+        </Container>
       </Body>
     );
   }