fix: mf-5340 optimize swap (#11295)

DimensionDev · Jan 17, 2024 · 23303a4 · 23303a4
1 parent f1f94ca
commit 23303a4
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 34 deletions.
diff --git a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
@@ -45,9 +45,9 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 enum OptionName {
-    ONE_QUARTE = '15',
-    TWO_QUARTE = '30',
-    ONE_HOUR = '60',
+    ONE_QUARTE = '15 Min',
+    TWO_QUARTE = '30 Min',
+    ONE_HOUR = '60 Min',
     ONE_DAY = '1 Day',
     NEVER = 'Never',
 }

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/TradeForm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/TradeForm.tsx
@@ -52,7 +52,7 @@ const useStyles = makeStyles()((theme) => {
         },
         reverse: {
             backgroundColor:
-                Sniffings.is_dashboard_page ? MaskColorVar.lightBackground : theme.palette.background.default,
+                Sniffings.is_dashboard_page ? MaskColorVar.lightBackground : theme.palette.maskColor.bottom,
             width: 32,
             height: 32,
             borderRadius: 99,
@@ -61,7 +61,7 @@ const useStyles = makeStyles()((theme) => {
             alignItems: 'center',
         },
         reverseWrapper: {
-            backgroundColor: theme.palette.background.paper,
+            backgroundColor: theme.palette.maskColor.line,
             padding: 2,
             borderRadius: 99,
             marginTop: -16,

diff --git a/packages/shared/src/UI/components/FungibleTokenList/index.tsx b/packages/shared/src/UI/components/FungibleTokenList/index.tsx
@@ -62,9 +62,9 @@ export interface FungibleTokenListProps<T extends NetworkPluginID>
     mode?: TokenListMode
 }
 
-const useStyles = makeStyles<{ enableMange: boolean }>()((theme, { enableMange }) => ({
+const useStyles = makeStyles<{}>()(() => ({
     channel: {
-        position: enableMange ? 'relative' : 'unset',
+        width: '100%',
     },
     bar: {
         position: 'absolute',
@@ -90,7 +90,7 @@ export function FungibleTokenList<T extends NetworkPluginID>(props: FungibleToke
     } = props
 
     const t = useSharedTrans()
-    const { classes } = useStyles({ enableMange: mode === TokenListMode.List && enableManage }, { props })
+    const { classes } = useStyles({}, { props })
 
     const { pluginID } = useNetworkContext<T>(props.pluginID)
     const account = useAccount(pluginID)

diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
@@ -1,21 +1,33 @@
 import { useState, useMemo } from 'react'
 import { DialogContent, type Theme, useMediaQuery, inputClasses } from '@mui/material'
-import { useNetworkContext, useNativeTokenAddress } from '@masknet/web3-hooks-base'
+import { useNetworkContext, useNativeTokenAddress, useNetworks } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { EMPTY_LIST, EnhanceableSite, type NetworkPluginID, Sniffings } from '@masknet/shared-base'
+import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, Sniffings } from '@masknet/shared-base'
 import { useRowSize } from '@masknet/shared-base-ui'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import type { FungibleToken } from '@masknet/web3-shared-base'
 import { TokenListMode } from '../../components/FungibleTokenList/type.js'
 import { useSharedTrans } from '../../../locales/index.js'
 import { InjectedDialog, useBaseUIRuntime } from '../../contexts/index.js'
-import { FungibleTokenList } from '../../components/index.js'
+import { FungibleTokenList, SelectNetworkSidebar } from '../../components/index.js'
+import { ChainId } from '@masknet/web3-shared-evm'
 
 interface StyleProps {
     compact: boolean
 }
 
 const useStyles = makeStyles<StyleProps>()((theme, { compact }) => ({
+    container: {
+        display: 'flex',
+        flex: 1,
+        width: '100%',
+        gap: '16px',
+        position: 'relative',
+    },
+    sidebarContainer: {
+        width: '27px',
+        height: '432px',
+    },
     content: {
         ...(compact ? { minWidth: 552 } : {}),
         padding: theme.spacing(2),
@@ -36,7 +48,6 @@ const useStyles = makeStyles<StyleProps>()((theme, { compact }) => ({
         },
     },
     wrapper: {
-        paddingTop: theme.spacing(2),
         paddingBottom: theme.spacing(6),
     },
 }))
@@ -55,6 +66,7 @@ interface SelectFungibleTokenDialogProps<T extends NetworkPluginID = NetworkPlug
     disableNativeToken?: boolean
     selectedTokens?: string[]
     onClose(token: Web3Helper.FungibleTokenAll | null): void
+    setChainId(chainId: Web3Helper.Definition[T]['ChainId']): void
 }
 
 export function SelectFungibleTokenDialog({
@@ -70,13 +82,15 @@ export function SelectFungibleTokenDialog({
     title,
     enableManage = true,
     onClose,
+    setChainId,
 }: SelectFungibleTokenDialogProps) {
     const t = useSharedTrans()
     const { networkIdentifier } = useBaseUIRuntime()
     const compact = networkIdentifier === EnhanceableSite.Minds
     const { pluginID: currentPluginID } = useNetworkContext(pluginID)
     const { classes } = useStyles({ compact })
     const isMdScreen = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
+    const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true)
 
     const rowSize = useRowSize()
     const [mode, setMode] = useState(TokenListMode.List)
@@ -101,26 +115,37 @@ export function SelectFungibleTokenDialog({
                 :   t.select_token()
             }>
             <DialogContent classes={{ root: classes.content }}>
-                <FungibleTokenList
-                    mode={mode}
-                    setMode={setMode}
-                    pluginID={currentPluginID}
-                    chainId={chainId}
-                    tokens={tokens ?? EMPTY_LIST}
-                    whitelist={whitelist}
-                    enableManage={enableManage}
-                    blacklist={
-                        disableNativeToken && nativeTokenAddress ? [nativeTokenAddress, ...blacklist] : blacklist
-                    }
-                    disableSearch={disableSearchBar}
-                    selectedTokens={selectedTokens}
-                    onSelect={onClose}
-                    FixedSizeListProps={FixedSizeListProps}
-                    SearchTextFieldProps={{
-                        InputProps: { classes: { root: classes.search } },
-                    }}
-                    isHiddenChainIcon={false}
-                />
+                <div className={classes.container}>
+                    <div className={classes.sidebarContainer}>
+                        <SelectNetworkSidebar
+                            hideAllButton
+                            chainId={chainId}
+                            onChainChange={(chainId) => setChainId(chainId ?? ChainId.Mainnet)}
+                            networks={allNetworks}
+                            pluginID={NetworkPluginID.PLUGIN_EVM}
+                        />
+                    </div>
+                    <FungibleTokenList
+                        mode={mode}
+                        setMode={setMode}
+                        pluginID={currentPluginID}
+                        chainId={chainId}
+                        tokens={tokens ?? EMPTY_LIST}
+                        whitelist={whitelist}
+                        enableManage={enableManage}
+                        blacklist={
+                            disableNativeToken && nativeTokenAddress ? [nativeTokenAddress, ...blacklist] : blacklist
+                        }
+                        disableSearch={disableSearchBar}
+                        selectedTokens={selectedTokens}
+                        onSelect={onClose}
+                        FixedSizeListProps={FixedSizeListProps}
+                        SearchTextFieldProps={{
+                            InputProps: { classes: { root: classes.search } },
+                        }}
+                        isHiddenChainIcon={false}
+                    />
+                </div>
             </DialogContent>
         </InjectedDialog>
     )

diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/index.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/index.tsx
@@ -65,6 +65,7 @@ export const SelectFungibleTokenModal = forwardRef<
             disableSearchBar={disableSearchBar}
             selectedTokens={selectedTokens}
             onClose={(token) => dispatch?.close(token)}
+            setChainId={setChainId}
         />
     )
 })
diff --git a/packages/theme/src/Components/SearchableList/SearchableList.tsx b/packages/theme/src/Components/SearchableList/SearchableList.tsx
@@ -60,7 +60,7 @@ export function SearchableList<T extends {}>({
 }: MaskSearchableListProps<T>) {
     const [keyword, setKeyword] = useState('')
     const theme = useTheme()
-    const { classes } = useStyles(undefined, { props })
+    const { classes, cx } = useStyles(undefined, { props })
     const { height = 300, itemSize, ...rest } = FixedSizeListProps
     const { InputProps, ...textFieldPropsRest } = SearchFieldProps ?? {}
 
@@ -110,7 +110,7 @@ export function SearchableList<T extends {}>({
     return (
         <div className={classes.container}>
             {!disableSearch && (
-                <Box className={classes.searchInput}>
+                <Box className={cx(classes.searchInput, classes.input)}>
                     <MaskTextField
                         value={keyword}
                         placeholder="Search"
@@ -194,6 +194,9 @@ const useStyles = makeStyles()((theme) => ({
             margin: 'auto',
         },
     },
+    input: {
+        paddingBottom: '16px',
+    },
     list: {
         scrollbarWidth: 'thin',
     },