Merge pull request #23 from Propy/dev

dev -> main

src/components/App.tsx

@@ -11,7 +11,7 @@ import '../styles/App.scss';
 import { PropsFromRedux } from '../containers/AppContainer';
 
 import BlockNumberIndicator from './BlockNumberIndicator';
-import PageContainer from './PageContainer';
+import PageContainerContainer from '../containers/PageContainerContainer';
 
 import { useWindowSize } from '../hooks';
 
@@ -114,7 +114,7 @@ const App = (props: PropsFromRedux) => {
           <ThemeProvider theme={theme}>
             <CssBaseline/>
             <Toaster richColors position="bottom-right" />
-            <PageContainer/>
+            <PageContainerContainer/>
             <BlockNumberIndicator/>
           </ThemeProvider>
         </StyledEngineProvider>

src/components/DappProvider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChainId, DAppProvider } from '@usedapp/core'
+import { ChainId, DAppProvider, MetamaskConnector, CoinbaseWalletConnector } from '@usedapp/core'
 
 import DappReactiveConfigContainer from '../containers/DappReactiveConfigContainer';
 
@@ -43,6 +43,11 @@ const DappProvider = (props: PropsFromRedux) => {
       [ChainId.Arbitrum]: arbitrumReadOnlyUrl(),
     },
     autoConnect: true,
+    // noMetamaskDeactivate: true,
+    connectors: {
+      metamask: new MetamaskConnector(),
+      coinbase: new CoinbaseWalletConnector(),
+    },
   }
 
   return (

src/components/DappReactiveConfig.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { ChainId, useEthers, useUpdateConfig } from '@usedapp/core'
+import { ChainId, useEthers, useUpdateConfig, MetamaskConnector, CoinbaseWalletConnector } from '@usedapp/core'
 
 import AppContainer from '../containers/AppContainer';
 
@@ -69,6 +69,11 @@ const DappReactiveConfig = (props: PropsFromRedux) => {
           [ChainId.Arbitrum]: arbitrumReadOnlyUrl(),
         },
         autoConnect: true,
+        // noMetamaskDeactivate: true,
+        connectors: {
+          metamask: new MetamaskConnector(),
+          coinbase: new CoinbaseWalletConnector(),
+        },
       });
     } else {
       handleConnectedAccountNetworkSwitch(activeNetwork);

src/components/PageContainer.tsx

@@ -17,15 +17,24 @@ import CollectionsPage from '../pages/CollectionsPage';
 
 import useWindowSize from '../hooks/useWindowSize';
 
+import { PropsFromRedux } from '../containers/PageContainerContainer';
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: 'flex',
     },
+    rootMobile: {
+      marginBottom: 50,
+    }
   }),
 );
 
-const PageContainer = () => {
+const PageContainer = (props: PropsFromRedux) => {
+
+    const {
+      isConsideredMobile,
+    } = props;
 
     const classes = useStyles();
 
@@ -44,7 +53,7 @@ const PageContainer = () => {
 
     return (
         <Navigation>
-            <div className={classes.root}>
+            <div className={[classes.root, isConsideredMobile ? classes.rootMobile : ""].join(" ")}>
                 {showDesktopMenu && <NavigationLeftSideBarDesktopContainer/>}
                 <Routes>
                     <Route path="/" element={<HomePage/>} />

src/containers/PageContainerContainer.tsx

@@ -0,0 +1,19 @@
+import { connect, ConnectedProps } from 'react-redux';
+
+import PageContainer from '../components/PageContainer';
+
+interface RootState {
+  isConsideredMobile: boolean
+  isConsideredMedium: boolean
+}
+
+const mapStateToProps = (state: RootState) => ({
+  isConsideredMobile: state.isConsideredMobile,
+  isConsideredMedium: state.isConsideredMedium,
+})
+
+const connector = connect(mapStateToProps, {})
+
+export type PropsFromRedux = ConnectedProps<typeof connector>
+
+export default connector(PageContainer)