feat: added reusable back button

src/renderer/components/blocks/buttons/BackButton/BackButton.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import {useNavigate} from "react-router-dom";
+import {FormattedMessage} from "react-intl";
+import {Button} from "flowbite-react";
+
+const BackButton: React.FC = () => {
+  const navigate = useNavigate();
+  return(
+    <Button size={'sm'} onClick={() => navigate(-1)}>
+      <FormattedMessage id={'back'}/>
+    </Button>
+  );
+}
+
+export { BackButton };

src/renderer/components/blocks/buttons/BackButton/index.ts

@@ -0,0 +1 @@
+export * from './BackButton';

src/renderer/components/blocks/buttons/index.tsx

@@ -1,3 +1,4 @@
 export * from './CreateStoreButton';
 export * from './OwnedStoresDropDown';
-export * from './FauxLinkButton';
+export * from './FauxLinkButton';
+export * from './BackButton';

src/renderer/pages/EditStore/EditStore.tsx

@@ -10,12 +10,12 @@ import {
   SetStoreLabel,
   Spacer,
   XTerm,
-  FolderSelector
+  FolderSelector, BackButton
 } from '@/components';
 import React, { useCallback, useState, useEffect } from 'react';
 import {useSelector} from 'react-redux';
 import { deployStore } from '@/utils/os';
-import {useLocation, useNavigate} from "react-router-dom";
+import {useLocation} from "react-router-dom";
 import {SpendableCoinsInsufficientErrorModal} from "@/components";
 import {SpendableCoinRequest} from "chia-wallet";
 import {useGetSpendableCoinsImmediateMutation} from "@/api/ipc/wallet";
@@ -36,7 +36,6 @@ const EditStore: React.FC = () => {
   const [log, setLog] = useState<string>('Waiting To Deploy...');
   const [deployMode, setDeployMode] = useState<string>('replace');
   const [deploying, setDeploying] = useState<boolean>(false);
-  const navigate = useNavigate();
   const location = useLocation();
   const storeId = location.state?.storeId;
 
@@ -65,10 +64,6 @@ const EditStore: React.FC = () => {
     };
   }, [deploying]);
 
-  const handleBackButton = useCallback(() => {
-    navigate(-1);
-  }, [navigate]);
-
   const handleDeploy = useCallback(async () => {
 
     const spendableCoinRequest: SpendableCoinRequest = {wallet_id: 1};
@@ -99,9 +94,7 @@ const EditStore: React.FC = () => {
   return (
     <>
       <div className={'flex flex-start mb-2'}>
-        <Button size={'sm'} onClick={handleBackButton}>
-          <FormattedMessage id={'back'}/>
-        </Button>
+        <BackButton/>
       </div>
       <Card>
         <SetStoreLabel storeId={storeId}/>

src/renderer/pages/ViewStore/ViewStore.tsx

@@ -1,11 +1,9 @@
 import React, {useCallback, useEffect, useState} from "react";
-import {DatalayerStoreKeysTable, InvalidStoreIdErrorModal, SetStoreLabel, Spacer} from "@/components";
+import {BackButton, DatalayerStoreKeysTable, InvalidStoreIdErrorModal, SetStoreLabel, Spacer} from "@/components";
 import {visitPage} from "@/store/slices/browser";
 import {useGetOwnedStoresQuery} from "@/api/ipc/datalayer";
 import {useDispatch, useSelector} from "react-redux";
 import {useLocation, useNavigate} from "react-router-dom";
-import {FormattedMessage} from "react-intl";
-import {Button} from "flowbite-react";
 
 const ViewStore: React.FC = () => {
 
@@ -23,10 +21,6 @@ const ViewStore: React.FC = () => {
     }
   }, [storeId]);
 
-  const handleBackButton = useCallback(() => {
-    navigate(-1);
-  }, [navigate]);
-
   const handleModalClose = useCallback(() => {
     navigate(-1);
   }, [navigate]);
@@ -48,9 +42,7 @@ const ViewStore: React.FC = () => {
   return (
     <>
       <div className={'flex flex-start mb-2'}>
-        <Button size={'sm'} onClick={handleBackButton}>
-          <FormattedMessage id={'back'}/>
-        </Button>
+        <BackButton/>
       </div>
       <SetStoreLabel storeId={storeId} />
       <Spacer size={10} />