Remove unnecessary imports and changes

Cleanup this implementation by removing unused imports, changes, and delta not
relevant to the upgrade.

Author: rohit-nair

app/src/components/common/PageHeader.tsx

@@ -1,10 +1,9 @@
-import React, { ReactNode, useCallback } from 'react';
+import React, { ReactNode } from 'react';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { ArrowLeft, Download, HeaderThree, HelpCircle } from '../base';
 import Tip from './Tip';
-import { useStore } from 'store';
 
 const Styled = {
   Wrapper: styled.div`
@@ -45,7 +44,7 @@ const Styled = {
 
 interface Props {
   title: ReactNode;
-  showBackButton?: boolean;
+  onBackClick?: () => void;
   backText?: string;
   onHelpClick?: () => void;
   exportTip?: string;
@@ -54,22 +53,20 @@ interface Props {
 
 const PageHeader: React.FC<Props> = ({
   title,
-  showBackButton,
+  onBackClick,
   backText,
   onHelpClick,
   exportTip,
   onExportClick,
 }) => {
   const { l } = usePrefixedTranslation('cmps.common.PageHeader');
-  const { appView } = useStore();
-  const handleBack = useCallback(() => appView.showSettings(''), [appView]);
 
   const { Wrapper, Left, Center, Right, BackLink } = Styled;
   return (
     <Wrapper>
       <Left>
-        {showBackButton && (
-          <BackLink onClick={handleBack}>
+        {onBackClick && (
+          <BackLink onClick={onBackClick}>
             <ArrowLeft />
             {backText}
           </BackLink>

app/src/components/layout/Layout.tsx

@@ -5,7 +5,6 @@ import styled from '@emotion/styled';
 import { useStore } from 'store';
 import { Background, Menu } from 'components/base';
 import Sidebar from './Sidebar';
-import { useLocation } from 'react-router-dom';
 
 interface CollapsedProps {
   collapsed: boolean;

app/src/components/settings/BalanceSettings.tsx

@@ -36,11 +36,18 @@ const BalanceModeItem: React.FC<{ mode: BalanceMode }> = observer(({ mode }) =>
 
 const BalanceSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.BalanceSettings');
+  const { appView } = useStore();
+
+  const handleBack = useCallback(() => appView.showSettings(''), [appView]);
 
   const { Wrapper, Content } = Styled;
   return (
     <Wrapper>
-      <PageHeader title={l('pageTitle')} backText={l('backText')} showBackButton />
+      <PageHeader
+        title={l('pageTitle')}
+        backText={l('backText')}
+        onBackClick={handleBack}
+      />
       <Content>
         <HeaderFour>{l('title')}</HeaderFour>
         <BalanceModeItem mode={BalanceMode.receive} />

app/src/components/settings/ExplorerSettings.tsx

@@ -98,7 +98,11 @@ const ExplorerSettings: React.FC = () => {
   const { Wrapper, Content, Actions } = Styled;
   return (
     <Wrapper>
-      <PageHeader title={l('pageTitle')} backText={l('backText')} showBackButton />
+      <PageHeader
+        title={l('pageTitle')}
+        backText={l('backText')}
+        onBackClick={handleBack}
+      />
       <Content>
         <ExplorerField
           label={l('bitcoinTxUrl')}

app/src/components/settings/GeneralSettings.tsx

@@ -18,7 +18,7 @@ const Styled = {
 
 const GeneralSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.GeneralSettings');
-  const { appView, nodeStore, settingsStore } = useStore();
+  const { appView, settingsStore, nodeStore } = useStore();
 
   const handleUnit = useCallback(() => appView.showSettings('unit'), [appView]);
   const handleBalance = useCallback(() => appView.showSettings('balance'), [appView]);

app/src/components/settings/UnitSettings.tsx

@@ -37,10 +37,16 @@ const UnitSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.UnitSettings');
   const { appView } = useStore();
 
+  const handleBack = useCallback(() => appView.showSettings(''), [appView]);
+
   const { Wrapper, Content } = Styled;
   return (
     <Wrapper>
-      <PageHeader title={l('pageTitle')} backText={l('backText')} showBackButton />
+      <PageHeader
+        title={l('pageTitle')}
+        backText={l('backText')}
+        onBackClick={handleBack}
+      />
       <Content>
         <UnitItem unit={Unit.sats} />
         <UnitItem unit={Unit.bits} />

app/src/store/views/appView.ts

@@ -31,7 +31,7 @@ export default class AppView {
   get fullWidth() {
     return this._store.router.location.pathname === `${PUBLIC_URL}/pool`;
   }
-  
+
   /** navigate to the specified route */
   goTo(route: string) {
     if (this._store.router.location.pathname !== route) {