feat: add token list draft

lifinance · Feb 11, 2022 · a318735 · a318735
1 parent a9261f0
commit a318735
Show file tree

Hide file tree

Showing 34 changed files with 718 additions and 658 deletions.
diff --git a/libs/react-scripts/package.json b/libs/react-scripts/package.json
@@ -74,7 +74,7 @@
     "source-map-loader": "^3.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.19",
+    "tailwindcss": "^3.0.21",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.68.0",
     "webpack-dev-server": "^4.7.4",

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -26,10 +26,12 @@
     "i18next": "^21.6.11",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",
-    "react-hook-form": "^7.26.1",
+    "react-hook-form": "^7.27.0",
     "react-i18next": "^11.15.4",
     "react-query": "^3.34.14",
-    "react-router-dom": "^6.2.1"
+    "react-resize-detector": "^7.0.0",
+    "react-router-dom": "^6.2.1",
+    "react-virtual": "^2.10.4"
   },
   "eslintConfig": {
     "extends": "../../.eslintrc"

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,9 +1,11 @@
 import { Container } from '@mui/material';
 import { styled, ThemeProvider } from '@mui/material/styles';
+import { QueryClientProvider } from 'react-query';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { WidgetConfig } from '.';
 import { NavigationHeader } from './components/NavigationHeader';
 import { WalletHeader } from './components/WalletHeader';
+import { queryClient } from './config/queryClient';
 import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapFormProvider } from './providers/SwapFormProvider';
@@ -26,22 +28,24 @@ interface AppProps {
 export const App: React.FC<AppProps> = ({ config }) => {
   return (
     <ThemeProvider theme={theme}>
-      <MemoryRouter>
-        <MainContainer maxWidth="sm" disableGutters>
-          <WalletHeader />
-          <NavigationHeader />
-          <WidgetProvider config={config}>
-            <SwapFormProvider>
-              <Routes>
-                <Route path={routes.home} element={<SwapPage />}>
-                  <Route path={routes.selectToken} element={null} />
-                </Route>
-                <Route path={routes.settings} element={<SettingsPage />} />
-              </Routes>
-            </SwapFormProvider>
-          </WidgetProvider>
-        </MainContainer>
-      </MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <MainContainer maxWidth="sm" disableGutters>
+            <WalletHeader />
+            <NavigationHeader />
+            <WidgetProvider config={config}>
+              <SwapFormProvider>
+                <Routes>
+                  <Route path={routes.home} element={<SwapPage />}>
+                    <Route path={routes.selectToken} element={null} />
+                  </Route>
+                  <Route path={routes.settings} element={<SettingsPage />} />
+                </Routes>
+              </SwapFormProvider>
+            </WidgetProvider>
+          </MainContainer>
+        </MemoryRouter>
+      </QueryClientProvider>
     </ThemeProvider>
   );
 };
diff --git a/packages/widget/src/components/SelectTokenDrawer.tsx b/packages/widget/src/components/SelectTokenDrawer.tsx
diff --git a/packages/widget/src/components/SelectTokenDrawer/SelectTokenDrawer.style.tsx b/packages/widget/src/components/SelectTokenDrawer/SelectTokenDrawer.style.tsx
@@ -0,0 +1,28 @@
+import { Select as MuiSelect } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { styled } from '@mui/material/styles';
+
+export const TokenFilterSelect = styled(MuiSelect)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[100]
+      : theme.palette.grey[900],
+  borderRadius: 8,
+  border: 'none',
+  '&:focus': {
+    outline: 'none',
+  },
+  [`& .${inputBaseClasses.input}`]: {
+    padding: '4px 12px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`& .${listItemIconClasses.root}`]: {
+    minWidth: 38,
+  },
+  [`& .${outlinedInputClasses.notchedOutline}`]: {
+    display: 'none',
+  },
+}));