From 5780a52740128292f02b538bbc0a50cf74b41612 Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Wed, 5 Jan 2022 17:15:36 +0800
Subject: [PATCH 1/2] fix: add recheck when switch chain

---
 .../options-page/DashboardComponents/ActionButton.tsx    | 9 ++++++++-
 packages/mask/src/web3/UI/EthereumChainBoundary.tsx      | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
index d3f81ac1d162..b09f8da6b508 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
@@ -6,7 +6,7 @@ import CheckIcon from '@mui/icons-material/Check'
 import ErrorIcon from '@mui/icons-material/Error'
 import { red, green } from '@mui/material/colors'
 import classNames from 'classnames'
-import { useDebounce, useAsyncFn } from 'react-use'
+import { useDebounce, useAsyncFn, useUpdateEffect } from 'react-use'
 import { useErrorStyles } from '../../../utils/theme'
 
 const circle = <CircularProgress color="inherit" size={18} />
@@ -131,6 +131,13 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     }
     const completeClick = completeOnClick === 'use executor' ? run : completeOnClick
     const failClick = failedOnClick === 'use executor' ? run : failedOnClick
+
+    useUpdateEffect(() => {
+        setState((prev) => {
+            return prev === 'init' ? prev : 'init'
+        })
+    }, [executor])
+
     if (state === 'wait')
         return <Button {...b} startIcon={circle} disabled={!waitingOnClick} children={waiting} onClick={cancel} />
     if (state === 'complete')
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index 869a9afadbc9..2df98237c1f8 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -105,6 +105,10 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                         ? Services.Ethereum.switchEthereumChain(expectedChainId, overrides)
                         : Services.Ethereum.addEthereumChain(chainDetailedCAIP, account, overrides),
                 ])
+
+                // recheck
+                const chainIdHex = await Services.Ethereum.getChainId(overrides)
+                if (Number.parseInt(chainIdHex, 16) !== expectedChainId) throw new Error('Failed to switch chain.')
             } catch {
                 throw new Error(`Make sure your wallet is on the ${resolveNetworkName(networkType)} network.`)
             }

From 369125b4621825ad6ca96569fce9ec1f66c9810b Mon Sep 17 00:00:00 2001
From: nuanyang233 <528944303@qq.com>
Date: Thu, 6 Jan 2022 12:57:18 +0800
Subject: [PATCH 2/2] fix: remove faild state ui

---
 .../options-page/DashboardComponents/ActionButton.tsx    | 9 ++++-----
 packages/mask/src/web3/UI/EthereumChainBoundary.tsx      | 2 --
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
index b09f8da6b508..b8a242f6ed5e 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
@@ -87,7 +87,7 @@ export interface ActionButtonPromiseProps extends ButtonProps {
     completeOnClick?: 'use executor' | (() => void)
     waiting: React.ReactChild
     waitingOnClick?: () => ActionButtonPromiseState
-    failed: React.ReactChild
+    failed?: React.ReactChild
     failedOnClick?: 'use executor' | (() => void)
     completeIcon?: React.ReactNode
     failIcon?: React.ReactNode
@@ -133,9 +133,7 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     const failClick = failedOnClick === 'use executor' ? run : failedOnClick
 
     useUpdateEffect(() => {
-        setState((prev) => {
-            return prev === 'init' ? prev : 'init'
-        })
+        setState((prev) => (prev === 'init' ? prev : 'init'))
     }, [executor])
 
     if (state === 'wait')
@@ -151,7 +149,7 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
                 onClick={completeClick}
             />
         )
-    if (state === 'fail')
+    if (state === 'fail' && failed)
         return (
             <Button
                 {...b}
@@ -174,6 +172,7 @@ const useStyles = makeStyles()({
     },
     failed: {
         backgroundColor: red[500],
+        color: '#fff',
         '&:hover': {
             backgroundColor: red[700],
         },
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index 2df98237c1f8..d6cc2f39c4f6 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -198,7 +198,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                         complete={t('plugin_wallet_switch_network', {
                             network: expectedNetwork,
                         })}
-                        failed={t('retry')}
                         executor={onSwitchChain}
                         completeOnClick={onSwitchChain}
                         failedOnClick="use executor"
@@ -239,7 +238,6 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                     complete={t('plugin_wallet_switch_network', {
                         network: expectedNetwork,
                     })}
-                    failed={t('retry')}
                     executor={onSwitchChain}
                     completeOnClick={onSwitchChain}
                     failedOnClick="use executor"