chore: set of changes from review session

lifinance · Aug 6, 2024 · 56eb8fa · 56eb8fa
1 parent a33f1de
commit 56eb8fa
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 69 deletions.
diff --git a/...s/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/...s/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx
@@ -100,6 +100,31 @@ export const TabCustomInput = styled(InputBase)<TabButtonProps>(({
   };
 });
 
+export const Input = styled(InputBase)(({ theme }) => {
+  return {
+    minHeight: 56,
+    width: '100%',
+
+    [`.${inputBaseClasses.input}`]: {
+      minHeight: 56,
+      width: '100%',
+      padding: 0,
+      textAlign: 'center',
+      '&::placeholder': {
+        fontSize: '1rem',
+        fontWeight: 700,
+        opacity: 1,
+      },
+      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+        display: 'none',
+      },
+    },
+    backgroundColor: getCardFieldsetBackgroundColor(theme),
+    borderRadius: theme.shape.borderRadiusSecondary,
+    boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+  };
+});
+
 export const ColorSwatches = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'flex-end',

diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx
@@ -1,30 +1,39 @@
 import { MenuItem, type SelectChangeEvent } from '@mui/material';
 import { useState } from 'react';
-import { CardValue, ExpandableCard } from '../../Card';
+import { CardRowContainer, CardValue, ExpandableCard } from '../../Card';
 import { popperZIndex } from '../DrawerControls.style';
-import { Select } from './DesignControls.style';
+import { Input, Select } from './DesignControls.style';
 
 interface LayoutOption {
   id: string;
   name: string;
 }
 
-export const LayoutControls = () => {
-  const layoutOptions = [
-    {
-      id: 'restricted-height',
-      name: 'Restricted Height',
-    },
-    {
-      id: 'restrict-height',
-      name: 'Restrict with container',
-    },
-    {
-      id: 'mobile-height',
-      name: 'Mobile optimised',
-    },
-  ];
+const layoutOptions = [
+  {
+    id: 'restricted-height',
+    name: 'Restricted Height',
+  },
+  {
+    id: 'restricted-max-height',
+    name: 'Restricted Max Height',
+  },
+  {
+    id: 'full-height',
+    name: 'Full Height',
+  },
+];
+
+interface InputLabel {
+  [key: string]: string;
+}
 
+const inputLabel: InputLabel = {
+  'restricted-height': 'Set height',
+  'restricted-max-height': 'Set max height',
+};
+
+export const LayoutControls = () => {
   const [selectedLayoutId, setSelectedLayoutId] = useState('restricted-height');
   const handleChange = (event: SelectChangeEvent<any>) => {
     setSelectedLayoutId(event.target.value);
@@ -35,24 +44,43 @@ export const LayoutControls = () => {
       title="Layout"
       value={
         <CardValue sx={{ textTransform: 'capitalize' }}>
-          selected layout
+          {layoutOptions.find((option) => option.id === selectedLayoutId)
+            ?.name || ''}
         </CardValue>
       }
     >
-      <Select
-        value={selectedLayoutId}
-        onChange={handleChange}
-        aria-label="Layout"
-        MenuProps={{ sx: { zIndex: popperZIndex } }}
+      <CardRowContainer
+        sx={
+          selectedLayoutId !== 'full-height' ? { paddingBottom: 0 } : undefined
+        }
       >
-        {layoutOptions?.map(({ name, id }: LayoutOption) => {
-          return (
-            <MenuItem value={id} key={id}>
-              {name}
-            </MenuItem>
-          );
-        })}
-      </Select>
+        <Select
+          value={selectedLayoutId}
+          onChange={handleChange}
+          aria-label="Layout"
+          MenuProps={{ sx: { zIndex: popperZIndex } }}
+        >
+          {layoutOptions?.map(({ name, id }: LayoutOption) => {
+            return (
+              <MenuItem value={id} key={id}>
+                {name}
+              </MenuItem>
+            );
+          })}
+        </Select>
+      </CardRowContainer>
+      {selectedLayoutId !== 'full-height' ? (
+        <CardRowContainer>
+          <CardRowContainer
+            sx={{
+              flexGrow: 3,
+            }}
+          >
+            <label htmlFor="height-input">{inputLabel[selectedLayoutId]}</label>
+          </CardRowContainer>
+          <Input id="height-input" type="number" />
+        </CardRowContainer>
+      ) : null}
     </ExpandableCard>
   );
 };
diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
@@ -66,7 +66,7 @@ export function WidgetViewContainer({
             </MockElement>
           ) : null}
           <WidgetContainerRow
-            // sx={{ maxHeight: 900 }} // for sticky headers to work there needs to be an ancester with fixed height
+            // sx={{ maxHeight: 682 }} // for sticky headers to work there needs to be an ancester with fixed height
             alignTop={config?.theme?.container?.display === 'flex'}
           >
             {children}

diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
-import { MobileChainSelect } from '../../components/ChainSelect/MobileChainSelect.js';
 import { PageContainer } from '../../components/PageContainer.js';
 import { TokenList } from '../../components/TokenList/TokenList.js';
 import { useHeader } from '../../hooks/useHeader.js';
@@ -24,7 +23,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   const swapOnly = useSwapOnly();
 
-  const { subvariant, mobileLayout } = useWidgetConfig();
+  const { subvariant } = useWidgetConfig();
   const { t } = useTranslation();
   const title =
     formType === 'from'
@@ -40,13 +39,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   return (
     <PageContainer disableGutters>
       <Box pb={2} px={3} ref={headerRef}>
-        {!hideChainSelect ? (
-          mobileLayout ? (
-            <MobileChainSelect formType={formType} />
-          ) : (
-            <ChainSelect formType={formType} />
-          )
-        ) : null}
+        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
         <Box mt={!hideChainSelect ? 2 : 0}>
           <SearchTokenInput />
         </Box>

diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx
@@ -35,8 +35,7 @@ export const TransactionPage: React.FC = () => {
   const { setFieldValue } = useFieldActions();
   const emitter = useWidgetEvents();
   const { navigateBack } = useNavigateBack();
-  const { subvariant, contractSecondaryComponent, mobileLayout } =
-    useWidgetConfig();
+  const { subvariant, contractSecondaryComponent } = useWidgetConfig();
   const { state }: any = useLocation();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
@@ -176,33 +175,17 @@ export const TransactionPage: React.FC = () => {
   };
 
   return (
-    <PageContainer
-      bottomGutters
-      sx={mobileLayout ? { justifyContent: 'space-between' } : undefined}
-    >
-      <Box>
-        {getStepList(route, subvariant)}
-        {subvariant === 'custom' && contractSecondaryComponent ? (
-          <ContractComponent sx={{ marginTop: 2 }}>
-            {contractSecondaryComponent}
-          </ContractComponent>
-        ) : null}
-        <TransactionDetails route={route} sx={{ marginTop: 2 }} />
-      </Box>
+    <PageContainer bottomGutters>
+      {getStepList(route, subvariant)}
+      {subvariant === 'custom' && contractSecondaryComponent ? (
+        <ContractComponent sx={{ marginTop: 2 }}>
+          {contractSecondaryComponent}
+        </ContractComponent>
+      ) : null}
+      <TransactionDetails route={route} sx={{ marginTop: 2 }} />
       {status === RouteExecutionStatus.Idle ||
       status === RouteExecutionStatus.Failed ? (
-        <Box
-          sx={
-            !mobileLayout
-              ? {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'space-between',
-                  flex: 1,
-                }
-              : undefined
-          }
-        >
+        <>
           <GasMessage mt={2} route={route} />
           <Box mt={2} display="flex">
             <StartTransactionButton
@@ -228,7 +211,7 @@ export const TransactionPage: React.FC = () => {
               </Tooltip>
             ) : null}
           </Box>
-        </Box>
+        </>
       ) : null}
       {status ? <StatusBottomSheet status={status} route={route} /> : null}
       {subvariant !== 'custom' ? (