feat: add different layout presentations

lifinance · May 30, 2022 · e7c495e · e7c495e
1 parent 05cbcb6
commit e7c495e
Showing 1 changed file with 115 additions and 34 deletions.
diff --git a/packages/widget-embedded/src/index.tsx b/packages/widget-embedded/src/index.tsx
@@ -1,4 +1,15 @@
-import { LiFiWidget, WidgetConfig } from '@lifinance/widget';
+import { LiFiWidget, LiFiWidgetDrawer, WidgetConfig } from '@lifinance/widget';
+import {
+  Box,
+  CssBaseline,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Switch,
+  TextField,
+  useMediaQuery,
+} from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
@@ -10,15 +21,19 @@ if (!rootElement) {
 }
 const root = createRoot(rootElement);
 
-const widgetConfig: WidgetConfig = {
+const widgetDrawerConfig: WidgetConfig = {
   enabledChains: JSON.parse(process.env.LIFI_ENABLED_CHAINS_JSON!),
   fromChain: 'pol',
   toChain: 'bsc',
   // fromToken: '0x0000000000000000000000000000000000000000',
   // toToken: '0xcc42724c6683b7e57334c4e856f4c9965ed682bd',
   useInternalWalletManagement: true,
+};
+
+const widgetConfig: WidgetConfig = {
+  ...widgetDrawerConfig,
   containerStyle: {
-    width: 480,
+    width: 392,
     height: 640,
     border: `1px solid ${
       window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -27,45 +42,111 @@ const widgetConfig: WidgetConfig = {
     }`,
     borderRadius: '16px',
     display: 'flex',
-    maxWidth: '480px',
-    flex: 1,
-  },
-  baselineStyle: {
-    borderRadius: '16px',
+    maxWidth: 392,
   },
 };
 
 const App = () => {
+  const [drawer, setDrawer] = useState(false);
+  const [primary, setPrimaryColor] = useState('#3F49E1');
   const [config, setConfig] = useState(widgetConfig);
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [theme, setTheme] = useState(() =>
+    createTheme({
+      palette: {
+        mode: prefersDarkMode ? 'dark' : 'light',
+        primary: {
+          main: '#3F49E1',
+        },
+      },
+    }),
+  );
+
+  useEffect(() => {
+    setConfig((config) => ({
+      ...(drawer
+        ? widgetDrawerConfig
+        : {
+            ...widgetConfig,
+            containerStyle: {
+              ...widgetConfig.containerStyle,
+              border: `1px solid ${
+                prefersDarkMode ? 'rgb(66, 66, 66)' : 'rgb(234, 234, 234)'
+              }`,
+            },
+          }),
+      paletteOptions: {
+        primary: {
+          main: primary,
+        },
+      },
+    }));
+  }, [drawer, prefersDarkMode, primary]);
+
   useEffect(() => {
-    const eventHadler = (event: MediaQueryListEvent) => {
-      setConfig((config) => ({
-        ...config,
-        containerStyle: {
-          ...config.containerStyle,
-          border: `1px solid ${
-            event.matches ? 'rgb(66, 66, 66)' : 'rgb(234, 234, 234)'
-          }`,
+    setTheme(
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? 'dark' : 'light',
+          primary: {
+            main: '#3F49E1',
+          },
         },
-      }));
-    };
-    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
-    matchMedia.addEventListener('change', eventHadler);
-    return () => {
-      matchMedia.removeEventListener('change', eventHadler);
-    };
-  }, [config]);
+      }),
+    );
+  }, [prefersDarkMode]);
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh',
-      }}
-    >
-      <LiFiWidget config={config} />
-    </div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box
+        sx={{
+          height: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', padding: 2 }}>
+          <FormControl component="fieldset" variant="standard">
+            <FormLabel component="legend">Widget view</FormLabel>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={drawer}
+                  onChange={() => setDrawer((drawer) => !drawer)}
+                />
+              }
+              label="Enable drawer"
+            />
+          </FormControl>
+          <TextField
+            value={primary}
+            type="color"
+            size="small"
+            InputProps={{
+              sx: {
+                width: 64,
+              },
+            }}
+            onChange={(event) => setPrimaryColor(event.target.value)}
+          />
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: 1,
+          }}
+        >
+          {drawer ? (
+            <LiFiWidgetDrawer config={config} open />
+          ) : (
+            <LiFiWidget config={config} />
+          )}
+        </Box>
+      </Box>
+    </ThemeProvider>
   );
 };