From d03c4c8dc46fb2c233ef833b7a8bc962f0cedd0b Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Thu, 6 Oct 2022 16:14:16 +0100
Subject: [PATCH] fix: disable expandable variant on small devices

---
 packages/widget/src/App.tsx                       |  6 +++---
 packages/widget/src/components/AppContainer.tsx   |  8 +-------
 packages/widget/src/hooks/index.ts                |  1 +
 packages/widget/src/hooks/useExpandableVariant.ts | 13 +++++++++++++
 packages/widget/src/pages/MainPage/MainPage.tsx   |  6 +++---
 5 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 packages/widget/src/hooks/useExpandableVariant.ts

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
index 0d39072bb..0550717b5 100644
--- a/packages/widget/src/App.tsx
+++ b/packages/widget/src/App.tsx
@@ -10,7 +10,7 @@ import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
-import { useWidgetConfig } from './providers';
+import { useExpandableVariant } from './hooks';
 
 export const App: React.FC<AppProps> = ({ config }) => {
   return (
@@ -21,7 +21,7 @@ export const App: React.FC<AppProps> = ({ config }) => {
 };
 
 export const AppDefault = () => {
-  const { variant } = useWidgetConfig();
+  const expandable = useExpandableVariant();
   return (
     <AppExpandedContainer>
       <AppContainer>
@@ -32,7 +32,7 @@ export const AppDefault = () => {
         <PoweredBy />
         <Initializer />
       </AppContainer>
-      {variant === 'expandable' ? <SwapRoutesExpanded /> : null}
+      {expandable ? <SwapRoutesExpanded /> : null}
     </AppExpandedContainer>
   );
 };
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
index ed0665384..a28dbdd37 100644
--- a/packages/widget/src/components/AppContainer.tsx
+++ b/packages/widget/src/components/AppContainer.tsx
@@ -7,7 +7,7 @@ import { ElementId } from '../utils';
 
 export const maxHeight = 680;
 
-const ExpandedContainer = styled(Box, {
+export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ variant }) => ({
   display: 'flex',
@@ -70,12 +70,6 @@ export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   );
 };
 
-export const AppExpandedContainer: React.FC<PropsWithChildren<{}>> = ({
-  children,
-}) => {
-  return <ExpandedContainer>{children}</ExpandedContainer>;
-};
-
 // export const ScrollToLocation: React.FC<{
 //   elementRef: RefObject<HTMLElement>;
 // }> = ({ elementRef }) => {
diff --git a/packages/widget/src/hooks/index.ts b/packages/widget/src/hooks/index.ts
index 5e7ba5038..5357970d6 100644
--- a/packages/widget/src/hooks/index.ts
+++ b/packages/widget/src/hooks/index.ts
@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
diff --git a/packages/widget/src/hooks/useExpandableVariant.ts b/packages/widget/src/hooks/useExpandableVariant.ts
new file mode 100644
index 000000000..e0495c74b
--- /dev/null
+++ b/packages/widget/src/hooks/useExpandableVariant.ts
@@ -0,0 +1,13 @@
+import type { Theme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { useWidgetConfig } from '../providers';
+
+const defaultExpandableWidth = 852;
+
+export const useExpandableVariant = () => {
+  const { variant } = useWidgetConfig();
+  const expandableAllowed = useMediaQuery((theme: Theme) => {
+    return theme.breakpoints.up(defaultExpandableWidth);
+  });
+  return variant === 'expandable' && expandableAllowed;
+};
diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx
index 158ef18be..b610c3014 100644
--- a/packages/widget/src/pages/MainPage/MainPage.tsx
+++ b/packages/widget/src/pages/MainPage/MainPage.tsx
@@ -8,12 +8,12 @@ import {
 } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
-import { useWidgetConfig } from '../../providers';
+import { useExpandableVariant } from '../../hooks';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
 
 export const MainPage: React.FC = () => {
-  const { variant } = useWidgetConfig();
+  const expandable = useExpandableVariant();
   return (
     <FormContainer disableGutters>
       <ActiveSwaps mx={3} mt={1} mb={2} />
@@ -21,7 +21,7 @@ export const MainPage: React.FC = () => {
       <Box mx={3} mb={3}>
         <SwapInput formType="from" />
       </Box>
-      {variant !== 'expandable' ? <SwapRoutes mx={3} mb={3} /> : null}
+      {!expandable ? <SwapRoutes mx={3} mb={3} /> : null}
       <GasSufficiencyMessage mx={3} mb={3} />
       <Box mx={3} mb={1}>
         <SendToWallet mb={3} />