V1.2 feedback (#156)

* add sorting rule for search

* feedback

* fix use colors

* pr feedback

components/Layout/AppLayout.tsx

@@ -11,9 +11,10 @@ export const AppLayout = ({
   footerBar = <FooterBar />,
   children,
 }) => {
-  const isMobile = useMedia('sm')
+  const isSmallScreen = useMedia('sm')
+  const isMediumScreen = useMedia('md')
 
-  if (isMobile) {
+  if (isSmallScreen) {
     return (
       <StyledWrapperForMobile>
         <StyledContainerForMobile>
@@ -37,18 +38,21 @@ export const AppLayout = ({
         <main>{children}</main>
       </StyledContainer>
 
-      {extensionSidebar}
+      {!isMediumScreen && extensionSidebar}
     </StyledWrapper>
   )
 }
 
 const StyledWrapper = styled('div', {
   display: 'grid',
   minHeight: '100vh',
-  gridTemplateColumns: '18rem 1fr 18rem',
+  gridTemplateColumns: '16.5rem 1fr 16.5rem',
   backgroundColor: '$backgroundColors$base',
   maxWidth: APP_MAX_WIDTH,
   margin: '0 auto',
+  [media.md]: {
+    gridTemplateColumns: '15rem 1fr',
+  },
 })
 
 const StyledContainer = styled('div', {

components/Toast/Toast.tsx

@@ -1,12 +1,10 @@
 import { Children, cloneElement, ReactElement, ReactNode } from 'react'
-import { darkTheme, lightTheme, styled } from '../theme'
+import { darkTheme, lightTheme, styled, useTheme } from '../theme'
 import { Text } from '../Text'
 import { Button } from '../Button'
 import { IconWrapper } from '../IconWrapper'
 import { Union } from '../../icons/Union'
 import { animated, useSpring } from '@react-spring/web'
-import { useRecoilValue } from 'recoil'
-import { AppTheme, themeAtom } from '../theme/themeAtom'
 
 type ToastProps = {
   icon: ReactElement
@@ -22,10 +20,9 @@ export const Toast = ({ title, body, buttons, onClose, icon }: ToastProps) => {
     to: { opacity: 1 },
   })
 
+  const theme = useTheme()
   const themeClassName =
-    useRecoilValue(themeAtom) === AppTheme.dark
-      ? lightTheme.className
-      : darkTheme.className
+    theme === lightTheme ? darkTheme.className : lightTheme.className
 
   return (
     <StyledToast className={themeClassName} style={styles}>

components/theme/hooks/useColors.ts

@@ -3,7 +3,7 @@ import { AppTheme, themeAtom } from '../themeAtom'
 import { darkThemeColorPalette, lightThemeColorPalette } from '../colors'
 
 export const useColors = () => {
-  const theme = useRecoilValue(themeAtom)
+  const { theme } = useRecoilValue(themeAtom)
   return theme === AppTheme.dark
     ? darkThemeColorPalette
     : lightThemeColorPalette

components/theme/hooks/useTheme.ts

@@ -1,49 +1,78 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { AppTheme, themeAtom } from '../themeAtom'
 import { darkTheme, lightTheme } from '../theme'
 import { useEffect } from 'react'
 
 export const useTheme = () => {
-  const theme = useRecoilValue(themeAtom)
+  const { theme } = useRecoilValue(themeAtom)
   return theme === AppTheme.dark ? darkTheme : lightTheme
 }
 
 export const useControlTheme = () => {
-  const [theme, setTheme] = useRecoilState(themeAtom)
+  const [{ theme }, setTheme] = useRecoilState(themeAtom)
 
   return {
     theme,
-    set: setTheme,
+    set: (value: AppTheme) => {
+      setTheme({
+        theme: value,
+        touched: true,
+      })
+    },
     setDarkTheme(enabled: boolean) {
-      setTheme(enabled ? AppTheme.dark : AppTheme.light)
+      setTheme({
+        theme: enabled ? AppTheme.dark : AppTheme.light,
+        touched: true,
+      })
+    },
+    setLightTheme(enabled: boolean) {
+      setTheme({
+        theme: enabled ? AppTheme.light : AppTheme.dark,
+        touched: true,
+      })
     },
     toggle() {
-      setTheme(theme === AppTheme.dark ? AppTheme.light : AppTheme.dark)
+      setTheme({
+        theme: theme === AppTheme.dark ? AppTheme.light : AppTheme.dark,
+        touched: true,
+      })
     },
   }
 }
 
 export const useSubscribeDefaultAppTheme = () => {
-  const setTheme = useSetRecoilState(themeAtom)
+  const [{ touched }, setTheme] = useRecoilState(themeAtom)
 
   useEffect(() => {
     function handleChangeTheme(event) {
       if (event.matches) {
-        setTheme(AppTheme.dark)
+        setTheme({ theme: AppTheme.dark, touched: false })
       } else {
-        setTheme(AppTheme.light)
+        setTheme({ theme: AppTheme.light, touched: false })
       }
     }
 
-    const media = window.matchMedia('(prefers-color-scheme: dark)')
-    media.addEventListener('change', handleChangeTheme)
+    if (!touched) {
+      const media = window.matchMedia('(prefers-color-scheme: dark)')
+      media.addEventListener('change', handleChangeTheme)
 
-    if (media.matches) {
-      setTheme(AppTheme.dark)
-    }
+      if (media.matches) {
+        setTheme({ theme: AppTheme.dark, touched: false })
+      }
 
-    return () => {
-      media.removeEventListener('change', handleChangeTheme)
+      return () => {
+        media.removeEventListener('change', handleChangeTheme)
+      }
     }
-  }, [setTheme])
+  }, [touched, setTheme])
+}
+
+export const useThemeClassName = () => {
+  const { theme } = useRecoilValue(themeAtom)
+
+  if (theme === AppTheme.dark) {
+    return darkTheme.className
+  }
+
+  return lightTheme.className
 }

components/theme/index.ts

@@ -1,4 +1,3 @@
 export * from './theme'
-export { useTheme } from './hooks/useTheme'
+export * from './hooks/useTheme'
 export { useColors } from './hooks/useColors'
-export { useThemeClassName } from './hooks/useThemeClassName'

components/theme/theme.ts

@@ -63,9 +63,9 @@ const baseTheme = {
   },
 
   media: {
-    sm: '(max-width: 640px)',
-    md: '(max-width: 768px)',
-    lg: '(max-width: 1024px)',
+    sm: '(max-width: 876px)',
+    md: '(max-width: 1140px)',
+    lg: '(min-width: 1140px)',
   },
 }
 

components/theme/themeAtom.ts

@@ -1,12 +1,17 @@
 import { atom } from 'recoil'
 import { __DARK_MODE_ENABLED_BY_DEFAULT__ } from '../../util/constants'
+import { localStorageEffect } from '../../util/localStorageEffect'
 
 export enum AppTheme {
   dark = 'dark',
   light = 'light',
 }
 
-export const themeAtom = atom<AppTheme>({
+export const themeAtom = atom<{ theme: AppTheme; touched: boolean }>({
   key: '@theme',
-  default: __DARK_MODE_ENABLED_BY_DEFAULT__ ? AppTheme.dark : AppTheme.light,
+  default: {
+    theme: __DARK_MODE_ENABLED_BY_DEFAULT__ ? AppTheme.dark : AppTheme.light,
+    touched: false,
+  },
+  effects_UNSTABLE: [localStorageEffect('@theme')],
 })

features/assets/components/TransferDialog/TransferDialog.tsx

@@ -67,9 +67,9 @@ export const TransferDialog = ({
       toast.custom((t) => (
         <Toast
           icon={<IconWrapper icon={<Valid />} color="valid" />}
-          title={`${
-            transactionKind === 'deposit' ? 'Deposited' : 'Withdrawn'
-          } ${tokenInfo.name} Successfully`}
+          title={`${tokenSymbol} ${
+            transactionKind === 'deposit' ? 'deposit' : 'withdrawal'
+          } successfully initiated`}
           onClose={() => toast.dismiss(t.id)}
         />
       ))

pages/_app.tsx

@@ -10,8 +10,11 @@ import { Toaster } from 'react-hot-toast'
 import { TestnetDialog } from 'components/TestnetDialog'
 import { queryClient } from 'services/queryClient'
 import { __TEST_MODE__ } from '../util/constants'
-import { styled, useThemeClassName } from '../components/theme'
-import { useSubscribeDefaultAppTheme } from '../components/theme/hooks/useTheme'
+import {
+  styled,
+  useThemeClassName,
+  useSubscribeDefaultAppTheme,
+} from '../components/theme'
 import { useEffect } from 'react'
 
 function NextJsAppRoot({ children }) {
@@ -31,7 +34,7 @@ function NextJsAppRoot({ children }) {
     <StyledContentWrapper
       data-app-wrapper=""
       lang="en-US"
-      className={themeClassName}
+      className={typeof window === 'undefined' ? null : themeClassName}
       suppressHydrationWarning
     >
       {typeof window === 'undefined' ? null : children}
@@ -51,10 +54,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <ErrorBoundary>
             <Component {...pageProps} />
             {__TEST_MODE__ && <TestnetDialog />}
-            <Toaster
-              position="top-right"
-              toastOptions={{ duration: 15000000 }}
-            />
+            <Toaster position="top-right" toastOptions={{ duration: 10000 }} />
           </ErrorBoundary>
         </NextJsAppRoot>
       </QueryClientProvider>

pages/pools/index.tsx

@@ -11,36 +11,13 @@ import { useTokenList } from 'hooks/useTokenList'
 import { Column } from '../../components/Column'
 
 export default function Pools() {
-  const [tokenList] = useTokenList()
-  const [supportedTokens, poolIds] = useMemo(() => {
-    const tokensCollection =
-      tokenList?.tokens.filter(({ swap_address }) => Boolean(swap_address)) ??
-      []
-
-    const poolIdsCollection = tokensCollection
-      .map(({ pool_id }) => pool_id)
-      .filter(Boolean)
-
-    return [tokensCollection, poolIdsCollection]
-  }, [tokenList])
-
+  const [supportedTokens, poolIds] = usePlatformPools()
   const [liquidity, isLoading] = useMultiplePoolsLiquidity({
+    refetchInBackground: false,
     poolIds,
   })
 
-  const [myPools, allPools] = useMemo(() => {
-    if (!liquidity?.length) return []
-    const pools = [[], []]
-    liquidity.forEach((liquidityInfo, index) => {
-      const poolIndex = liquidityInfo.myLiquidity.coins > 0 ? 0 : 1
-      pools[poolIndex].push({
-        liquidityInfo,
-        tokenInfo: supportedTokens[index],
-      })
-    })
-
-    return pools
-  }, [liquidity, supportedTokens])
+  const [myPools, allPools] = useSplitTokens({ liquidity, supportedTokens })
 
   const { symbol: baseTokenSymbol } = useBaseTokenInfo() || {}
 
@@ -107,22 +84,54 @@ export default function Pools() {
   )
 }
 
+const usePlatformPools = () => {
+  const [tokenList] = useTokenList()
+
+  return useMemo(() => {
+    const tokensCollection =
+      tokenList?.tokens.filter(({ swap_address }) => Boolean(swap_address)) ??
+      []
+
+    const poolIdsCollection = tokensCollection
+      .map(({ pool_id }) => pool_id)
+      .filter(Boolean)
+
+    return [tokensCollection, poolIdsCollection]
+  }, [tokenList])
+}
+
+const useSplitTokens = ({ liquidity, supportedTokens }) => {
+  return useMemo(() => {
+    if (!liquidity?.length) return []
+    const pools = [[], []]
+    liquidity.forEach((liquidityInfo, index) => {
+      const poolIndex = liquidityInfo.myLiquidity.coins > 0 ? 0 : 1
+      pools[poolIndex].push({
+        liquidityInfo,
+        tokenInfo: supportedTokens[index],
+      })
+    })
+
+    return pools
+  }, [liquidity, supportedTokens])
+}
+
 const StyledDivForPoolsGrid = styled('div', {
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 1fr',
   columnGap: '$8',
   rowGap: '$8',
 
-  [media.sm]: {
-    gridTemplateColumns: '1fr',
-    rowGap: '$8',
-  },
-
   '@media (max-width: 1360px)': {
     gridTemplateColumns: '1fr 1fr',
     columnGap: '$10',
     rowGap: '$12',
   },
+
+  [media.sm]: {
+    gridTemplateColumns: '1fr',
+    rowGap: '$8',
+  },
 })
 
 const SectionTitle = ({ variant = 'my', children }) => {

pages/transfer/index.tsx

@@ -72,8 +72,10 @@ export default function Transfer() {
       toast.custom((t) => (
         <Toast
           icon={<IconWrapper icon={<Error />} color="error" />}
-          title={`Cannot connect to your wallet`}
-          body={(error as any)?.message ?? error?.toString()}
+          title="Cannot connect to your wallet"
+          body={
+            (error as any)?.message ?? error?.toString() ?? 'Unknown error.'
+          }
           buttons={
             <Button
               as="a"

util/localStorageEffect.ts

@@ -0,0 +1,16 @@
+export const localStorageEffect =
+  (key) =>
+  ({ setSelf, onSet }) => {
+    if (typeof window !== 'undefined') {
+      const savedValue = localStorage.getItem(key)
+      if (savedValue != null) {
+        setSelf(JSON.parse(savedValue))
+      }
+
+      onSet((newValue, _, isReset) => {
+        isReset
+          ? localStorage.removeItem(key)
+          : localStorage.setItem(key, JSON.stringify(newValue))
+      })
+    }
+  }