fix: 2.1.0 Savings issues

packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx

@@ -1,8 +1,7 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useMemo } from 'react'
 import { useAsync, useAsyncFn } from 'react-use'
 import type { AbiItem } from 'web3-utils'
 import BigNumber from 'bignumber.js'
-import { unreachable } from '@dimensiondev/kit'
 import {
     isLessThan,
     rightShift,
@@ -38,7 +37,6 @@ import { PluginWalletStatusBar, useI18N } from '../../../utils'
 import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 import { PluginTraderMessages } from '../../Trader/messages'
-import type { Coin } from '../../Trader/types'
 import { ProtocolType, SavingsProtocol, TabType } from '../types'
 import { useStyles } from './SavingsFormStyles'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
@@ -76,22 +74,6 @@ export function SavingsFormDialog({ chainId, protocol, tab, onClose }: SavingsFo
 
     const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
 
-    const onConvertClick = useCallback(() => {
-        const token = protocol.stakeToken
-        openSwapDialog({
-            open: true,
-            traderProps: {
-                defaultInputCoin: {
-                    id: token.address,
-                    name: token.name ?? '',
-                    symbol: token.symbol ?? '',
-                    contract_address: token.address,
-                    decimals: token.decimals,
-                } as Coin,
-            },
-        })
-    }, [protocol, openSwapDialog])
-
     // #region form variables
     const { value: inputTokenBalance } = useFungibleTokenBalance(
         NetworkPluginID.PLUGIN_EVM,
@@ -182,38 +164,19 @@ export function SavingsFormDialog({ chainId, protocol, tab, onClose }: SavingsFo
     })
     const [, executor] = useAsyncFn(async () => {
         if (!web3) return
-        switch (tab) {
-            case TabType.Deposit:
-                const hash = await protocol.deposit(account, chainId, web3, tokenAmount)
-                if (typeof hash !== 'string') {
-                    throw new Error('Failed to deposit token.')
-                } else {
-                    await protocol.updateBalance(chainId, web3, account)
-                }
-                openShareTxDialog({
-                    hash,
-                    onShare() {
-                        activatedSocialNetworkUI.utils.share?.(shareText)
-                    },
-                })
-                break
-            case TabType.Withdraw:
-                switch (protocol.type) {
-                    case ProtocolType.Lido:
-                        onClose?.()
-                        onConvertClick()
-                        return
-                    default:
-                        if (!(await protocol.withdraw(account, chainId, web3, tokenAmount))) {
-                            throw new Error('Failed to withdraw token.')
-                        } else {
-                            await protocol.updateBalance(chainId, web3, account)
-                        }
-                        return
-                }
-            default:
-                unreachable(tab)
+        const methodName = tab === TabType.Deposit ? 'deposit' : 'withdraw'
+        const hash = await protocol[methodName](account, chainId, web3, tokenAmount)
+        if (typeof hash !== 'string') {
+            throw new Error('Failed to deposit token.')
+        } else {
+            await protocol.updateBalance(chainId, web3, account)
         }
+        openShareTxDialog({
+            hash,
+            onShare() {
+                activatedSocialNetworkUI.utils.share?.(shareText)
+            },
+        })
     }, [tab, protocol, account, chainId, web3, tokenAmount, openShareTxDialog])
 
     const buttonDom = useMemo(() => {

packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx

@@ -7,8 +7,13 @@ import { isZero, rightShift, formatBalance, isSameAddress, NetworkPluginID } fro
 import type { ChainId, Web3 } from '@masknet/web3-shared-evm'
 import { ProviderIconURLs } from './IconURL'
 import { useI18N } from '../../../utils'
-import { SavingsProtocol, TabType } from '../types'
+import { ProtocolType, SavingsProtocol, TabType } from '../types'
 import { useAccount, useWeb3, useFungibleAssets } from '@masknet/plugin-infra/web3'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { useCallback } from 'react'
+import { PluginTraderMessages } from '../../Trader/messages'
+import { LDO_PAIRS } from '../constants'
+import { TrendingCoinType } from '@masknet/web3-providers'
 
 const useStyles = makeStyles()((theme, props) => ({
     containerWrap: {
@@ -105,7 +110,7 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
     const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const { value: assets, loading: getAssetsLoading } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
-
+    const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
     // Only fetch protocol APR and Balance on chainId change
     const { loading } = useAsync(async () => {
         await Promise.all(
@@ -115,6 +120,32 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
             }),
         )
     }, [chainId, web3, account, protocols])
+
+    const onConvertClick = useCallback(() => {
+        const ETH = LDO_PAIRS[0][0]
+        const sETH = LDO_PAIRS[0][1]
+        openSwapDialog({
+            open: true,
+            traderProps: {
+                defaultInputCoin: {
+                    id: sETH.address,
+                    name: sETH.name ?? '',
+                    symbol: sETH.symbol ?? '',
+                    contract_address: sETH.address,
+                    decimals: sETH.decimals,
+                    type: TrendingCoinType.Fungible,
+                },
+                defaultOutputCoin: {
+                    id: ETH.address,
+                    name: ETH.name ?? '',
+                    symbol: ETH.symbol ?? '',
+                    contract_address: ETH.address,
+                    decimals: ETH.decimals,
+                    type: TrendingCoinType.Fungible,
+                },
+            },
+        })
+    }, [openSwapDialog])
     return (
         <Box className={classes.containerWrap}>
             <Grid container spacing={0} className={classes.tableHeader}>
@@ -188,6 +219,10 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
                                         color="primary"
                                         disabled={tab === TabType.Withdraw ? isZero(protocol.balance) : false}
                                         onClick={() => {
+                                            if (tab === TabType.Withdraw && protocol.type === ProtocolType.Lido) {
+                                                onConvertClick()
+                                                return
+                                            }
                                             setTab(tab)
                                             setSelectedProtocol(protocol)
                                         }}>

packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts

@@ -239,13 +239,14 @@ export class AAVEProtocol implements SavingsProtocol {
             poolAddress || ZERO_ADDRESS,
             AaveLendingPoolABI as AbiItem[],
         )
-        return new Promise<string>((resolve) =>
+        return new Promise<string>((resolve, reject) =>
             contract?.methods
                 .withdraw(this.bareToken.address, new BigNumber(value).toFixed(), account)
                 .send({
                     from: account,
                     gas: gasEstimate.toNumber(),
                 })
+                .once(TransactionEventType.ERROR, reject)
                 .once(TransactionEventType.CONFIRMATION, (_, receipt) => {
                     resolve(receipt.transactionHash)
                 }),

packages/mask/src/utils/components/PluginWalletStatusBar.tsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
         backgroundColor: isDashboard
             ? MaskColorVar.mainBackground
             : parseColor(theme.palette.maskColor.bottom).setAlpha(0.8).toRgbString(),
-        boxShadow: `0 0 20px ${parseColor(theme.palette.maskColor.highlight).setAlpha(0.05).toRgbString()}`,
+        boxShadow: `0 0 20px ${parseColor(theme.palette.maskColor.highlight).setAlpha(0.2).toRgbString()}`,
         backdropFilter: 'blur(16px)',
         padding: theme.spacing(2),
         borderRadius: '0 0 12px 12px',