From 21602bf8dcf7560f606227879e27f9999d59d856 Mon Sep 17 00:00:00 2001 From: billy Date: Tue, 12 Jul 2022 01:05:25 +0800 Subject: [PATCH 1/3] fix: some Saving ui issues --- .../Savings/SNSAdaptor/SavingsForm.tsx | 36 +++-------------- .../Savings/SNSAdaptor/SavingsTable.tsx | 39 ++++++++++++++++++- .../components/PluginWalletStatusBar.tsx | 2 +- 3 files changed, 44 insertions(+), 33 deletions(-) diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx index 1b5da7267f83..3368370f2d50 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx @@ -1,4 +1,4 @@ -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' @@ -38,7 +38,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 +75,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, @@ -198,19 +181,12 @@ export function SavingsFormDialog({ chainId, protocol, tab, onClose }: SavingsFo }) 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 + if (!(await protocol.withdraw(account, chainId, web3, tokenAmount))) { + throw new Error('Failed to withdraw token.') + } else { + await protocol.updateBalance(chainId, web3, account) } + break default: unreachable(tab) } diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx index f94dbd776e62..26df8c0ccf41 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx +++ b/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: ETH.address, + name: ETH.name ?? '', + symbol: ETH.symbol ?? '', + contract_address: ETH.address, + decimals: ETH.decimals, + type: TrendingCoinType.Fungible, + }, + defaultOutputCoin: { + id: sETH.address, + name: sETH.name ?? '', + symbol: sETH.symbol ?? '', + contract_address: ETH.address, + decimals: sETH.decimals, + type: TrendingCoinType.Fungible, + }, + }, + }) + }, [openSwapDialog]) return ( @@ -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) }}> diff --git a/packages/mask/src/utils/components/PluginWalletStatusBar.tsx b/packages/mask/src/utils/components/PluginWalletStatusBar.tsx index ba08a4d784c3..69a4eb73975c 100644 --- a/packages/mask/src/utils/components/PluginWalletStatusBar.tsx +++ b/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', From ee7869d5c246100b4a0e0c347f7be47ccdfe2d18 Mon Sep 17 00:00:00 2001 From: billy Date: Tue, 12 Jul 2022 01:17:18 +0800 Subject: [PATCH 2/3] fix: withdraw reject + code style --- .../Savings/SNSAdaptor/SavingsForm.tsx | 37 ++++++------------- .../plugins/Savings/protocols/AAVEProtocol.ts | 3 +- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx index 3368370f2d50..555c8abe7ed7 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx @@ -2,7 +2,6 @@ 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, @@ -165,31 +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: - if (!(await protocol.withdraw(account, chainId, web3, tokenAmount))) { - throw new Error('Failed to withdraw token.') - } else { - await protocol.updateBalance(chainId, web3, account) - } - break - 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(() => { diff --git a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts index 4c1ddaf1e699..9d55bb937ef0 100644 --- a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts +++ b/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((resolve) => + return new Promise((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) }), From 98f53059e014227fe06cbdbccb19155d97404126 Mon Sep 17 00:00:00 2001 From: billy Date: Tue, 12 Jul 2022 13:55:05 +0800 Subject: [PATCH 3/3] fix: eth to seth --- .../plugins/Savings/SNSAdaptor/SavingsTable.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx index 26df8c0ccf41..bb8e112ae82f 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx @@ -128,6 +128,14 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto 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 ?? '', @@ -135,14 +143,6 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto decimals: ETH.decimals, type: TrendingCoinType.Fungible, }, - defaultOutputCoin: { - id: sETH.address, - name: sETH.name ?? '', - symbol: sETH.symbol ?? '', - contract_address: ETH.address, - decimals: sETH.decimals, - type: TrendingCoinType.Fungible, - }, }, }) }, [openSwapDialog])