refactor(task-fetcher): implement hoc to redirect user from mainnet

Author: gratestas

src/pages/RequesterDashboard/RequesterDashboard.jsx

@@ -3,7 +3,6 @@ import { Titled } from 'react-titled';
 import styled, { css } from 'styled-components';
 import { Divider } from 'antd';
 import AffixContainer from '~/shared/AffixContainer';
-import RequiredWalletGateway from '~/components/RequiredWalletGateway';
 import MultiCardLayout from '../../layout/MultiCardLayout';
 import TaskListFetcher from './TaskListFetcher';
 import { TasksFilterProvider } from '~/context/TasksFilterProvider';
@@ -42,9 +41,7 @@ function RequesterDashboard() {
           </AffixContainer>
           <StyledDivider />
           <StyledContentWrapper>
-            <RequiredWalletGateway message="To view your requested translation tasks you need an Ethereum Wallet.">
-              <TaskListFetcher />
-            </RequiredWalletGateway>
+            <TaskListFetcher />
           </StyledContentWrapper>
         </TasksFilterProvider>
       </MultiCardLayout>

src/pages/RequesterDashboard/TaskListFetcher.jsx

@@ -14,8 +14,10 @@ import { useTasksByRequesterQuery } from '~/hooks/queries/useTasksByRequesterQue
 
 import { statusFilters } from '~/consts/statusFilters';
 import { getTasksByFilters, USER_TYPE } from '~/utils/getTasksByFilters';
+import { withRedirectFromMainnet } from '~/components/withRedirectFromMainnet';
+import { withRequiredWalletGateway } from '~/components/RequiredWalletGateway';
 
-export default function TaskListFetcher() {
+const WrappedTaskListFetcher = () => {
   const { account } = useWeb3();
   const { filters } = useTasksFilter();
 
@@ -40,7 +42,14 @@ export default function TaskListFetcher() {
       </Spin>
     </>
   );
-}
+};
+
+const TaskListFetcher = withRedirectFromMainnet(
+  withRequiredWalletGateway({ message: 'To view your requested translation tasks you need an Ethereum Wallet.' })(
+    WrappedTaskListFetcher
+  )
+);
+export default TaskListFetcher;
 
 const StyledDismissableAlert = styled(DismissableAlert)`
   margin-bottom: 1rem;

src/pages/TranslatorDashboard/TaskListFetcher.jsx

@@ -16,8 +16,9 @@ import { useTasksFilter } from '~/context/TasksFilterProvider';
 
 import { statusFilters } from '~/consts/statusFilters';
 import { getTasksByFilters, USER_TYPE } from '~/utils/getTasksByFilters';
+import { withRedirectFromMainnet } from '~/components/withRedirectFromMainnet';
 
-export default function TaskListFetcher() {
+const WrappedTaskListFetcher = () => {
   const { account } = useWeb3();
   const { filters } = useTasksFilter();
 
@@ -42,7 +43,10 @@ export default function TaskListFetcher() {
       </Spin>
     </>
   );
-}
+};
+
+const TaskListFetcher = withRedirectFromMainnet(WrappedTaskListFetcher);
+export default TaskListFetcher;
 
 const StyledDismissableAlert = styled(DismissableAlert)`
   margin-bottom: 1rem;