From 64b4c6616d587de296f1eadbf89e3e77a84d7137 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Sat, 11 Dec 2021 11:21:40 +0800
Subject: [PATCH 1/2] fix: swap box error

---
 .../extension/popups/pages/Swap/SwapBox/index.tsx    |  2 +-
 .../mask/src/extension/popups/pages/Swap/index.tsx   | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
index d2d256e31b52..579f2670092d 100644
--- a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
@@ -42,7 +42,7 @@ export function SwapBox() {
 
     return (
         <TradeContext.Provider value={tradeContext}>
-            <Trader coin={coin} />
+            <Trader coin={coin} chainId={chainId} />
         </TradeContext.Provider>
     )
 }
diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx
index 1a953b0dd8ad..38391a5df80d 100644
--- a/packages/mask/src/extension/popups/pages/Swap/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/index.tsx
@@ -10,6 +10,8 @@ import { SwapWeb3Context } from '../../../../web3/context'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useI18N } from '../../../../utils'
 import { NetworkPluginID, useReverseAddress } from '@masknet/plugin-infra'
+import { TargetChainIdContext } from '../../../../plugins/Trader/trader/useTargetChainIdContext'
+import { AllProviderTradeContext } from '../../../../plugins/Trader/trader/useAllProviderTradeContext'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -50,6 +52,10 @@ const useStyles = makeStyles()((theme) => {
         },
         main: {
             width: 520,
+            overflowY: 'scroll',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
         },
     }
 })
@@ -87,7 +93,11 @@ export default function SwapPage() {
                         <Typography variant="h1" className={classes.title}>
                             {t('plugin_trader_swap')}
                         </Typography>
-                        <SwapBox />
+                        <TargetChainIdContext.Provider>
+                            <AllProviderTradeContext.Provider>
+                                <SwapBox />
+                            </AllProviderTradeContext.Provider>
+                        </TargetChainIdContext.Provider>
                     </main>
                 </div>
             </div>

From e06809e57fd106a859efaf6a61fe076915290ee6 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Sat, 11 Dec 2021 11:39:17 +0800
Subject: [PATCH 2/2] fix: swap box bug

---
 packages/mask/src/extension/popups/pages/Swap/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx
index 38391a5df80d..367505fc84df 100644
--- a/packages/mask/src/extension/popups/pages/Swap/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/index.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from '@masknet/theme'
+import { Appearance, applyMaskColorVars, makeStyles } from '@masknet/theme'
 import { TransactionStatusType, useChainId, useWallet, Web3Provider } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import { useCallback } from 'react'
@@ -75,6 +75,8 @@ export default function SwapPage() {
 
     const { value: domain } = useReverseAddress(wallet?.address, NetworkPluginID.PLUGIN_EVM)
 
+    applyMaskColorVars(document.body, Appearance.light)
+
     return (
         <Web3Provider value={SwapWeb3Context}>
             <div className={classes.page}>