From a0e091d28fb2401649750ec3284d9ca176d260c5 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Mon, 25 Apr 2022 14:09:19 +0800 Subject: [PATCH 1/2] fix: add loading and emtpy placeholder at savings plugin --- packages/icons/general/CircleLoading.tsx | 8 +--- packages/icons/general/Direct.tsx | 19 ++++++++ packages/icons/general/index.ts | 1 + packages/mask/shared-ui/locales/en-US.json | 1 - packages/mask/shared-ui/locales/qya-AA.json | 1 - packages/mask/shared-ui/locales/zh-CN.json | 1 - .../Savings/SNSAdaptor/SavingsDialog.tsx | 48 ++++++++----------- .../Savings/SNSAdaptor/SavingsTable.tsx | 39 +++++++++++++-- 8 files changed, 77 insertions(+), 41 deletions(-) create mode 100644 packages/icons/general/Direct.tsx diff --git a/packages/icons/general/CircleLoading.tsx b/packages/icons/general/CircleLoading.tsx index 5f74f5282038..1ea37627a945 100644 --- a/packages/icons/general/CircleLoading.tsx +++ b/packages/icons/general/CircleLoading.tsx @@ -3,16 +3,12 @@ import type { SvgIcon } from '@mui/material' export const CircleLoadingIcon: typeof SvgIcon = createIcon( 'CircleLoadingIcon', - + - + , '0 0 36 36', ) diff --git a/packages/icons/general/Direct.tsx b/packages/icons/general/Direct.tsx new file mode 100644 index 000000000000..506d05e8ea5a --- /dev/null +++ b/packages/icons/general/Direct.tsx @@ -0,0 +1,19 @@ +import { createIcon } from '../utils' +import type { SvgIcon } from '@mui/material' + +export const DirectIcon: typeof SvgIcon = createIcon( + 'DirectIcon', + + + + , + '0 0 34 34', +) diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts index fd2d27ebcc9c..cd2c70610e69 100644 --- a/packages/icons/general/index.ts +++ b/packages/icons/general/index.ts @@ -112,3 +112,4 @@ export * from './MindsRound' export * from './CircleLoading' export * from './AddUser' export * from './PopupRestore' +export * from './Direct' diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index 267f8955f62b..c1e032da924c 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -431,7 +431,6 @@ "plugin_trader_price_updated": "Price Updated", "plugin_savings": "Savings", "plugin_savings_asset": "Asset", - "plugin_no_protocol_available": "No savings protocols available on this network", "plugin_savings_apr": "APR", "plugin_savings_wallet": "Wallet", "plugin_savings_operation": "Operation", diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json index 1e00c8310530..d7eb8ae5d7cf 100644 --- a/packages/mask/shared-ui/locales/qya-AA.json +++ b/packages/mask/shared-ui/locales/qya-AA.json @@ -431,7 +431,6 @@ "plugin_trader_price_updated": "crwdns10237:0crwdne10237:0", "plugin_savings": "crwdns13250:0crwdne13250:0", "plugin_savings_asset": "crwdns14804:0crwdne14804:0", - "plugin_no_protocol_available": "crwdns13254:0crwdne13254:0", "plugin_savings_apr": "crwdns13256:0crwdne13256:0", "plugin_savings_wallet": "crwdns13258:0crwdne13258:0", "plugin_savings_operation": "crwdns13260:0crwdne13260:0", diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json index 168f3dfcb7dd..8a338efd388f 100644 --- a/packages/mask/shared-ui/locales/zh-CN.json +++ b/packages/mask/shared-ui/locales/zh-CN.json @@ -416,7 +416,6 @@ "plugin_trader_data_source": "数据源", "plugin_trader_price_updated": "价格已更新", "plugin_savings": "储蓄", - "plugin_no_protocol_available": "储蓄功能尚未在此网络支持。", "plugin_savings_wallet": "钱包", "plugin_savings_operation": "操作", "plugin_savings_amount": "数额", diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx index e6e4c606c614..7cbf26ed64b8 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx @@ -1,6 +1,6 @@ import { useMemo, useState } from 'react' import { useAsync, useUpdateEffect } from 'react-use' -import { Typography, DialogContent } from '@mui/material' +import { DialogContent } from '@mui/material' import { isDashboardPage, EMPTY_LIST } from '@masknet/shared-base' import { FolderTabPanel, FolderTabs } from '@masknet/theme' import { @@ -142,32 +142,26 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) { />
- {protocols.length === 0 ? ( - - {t('plugin_no_protocol_available')} - - ) : ( - - - - - - !x.balance.isZero())} - setTab={setTab} - setSelectedProtocol={setSelectedProtocol} - /> - - - )} + + + + + + !x.balance.isZero())} + setTab={setTab} + setSelectedProtocol={setSelectedProtocol} + /> + +
)} diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx index a47db0bcf228..8b198a1639d7 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx @@ -1,12 +1,13 @@ import { useAsync } from 'react-use' import { makeStyles } from '@masknet/theme' -import { Box, Button, Grid, Typography, CircularProgress } from '@mui/material' +import { Box, Button, Grid, Typography } from '@mui/material' import { FormattedBalance, TokenIcon } from '@masknet/shared' import { isZero, rightShift } from '@masknet/web3-shared-base' import { ChainId, formatBalance, isSameAddress, useAccount, useAssets, useWeb3 } from '@masknet/web3-shared-evm' import { ProviderIconURLs } from './IconURL' import { useI18N } from '../../../utils' import { SavingsProtocol, TabType } from '../types' +import { CircleLoadingIcon, DirectIcon } from '@masknet/icons' const useStyles = makeStyles()((theme, props) => ({ containerWrap: { @@ -58,13 +59,36 @@ const useStyles = makeStyles()((theme, props) => ({ right: '-5px', }, protocolLabel: {}, - loading: { + placeholder: { display: 'flex', + flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: 300, width: '100%', }, + loading: { + fontSize: 14, + color: theme.palette.text.primary, + lineHeight: '18px', + marginTop: 12, + }, + animated: { + fontSize: 36, + '@keyframes loadingAnimation': { + '0%': { + transform: 'rotate(0deg)', + }, + '100%': { + transform: 'rotate(360deg)', + }, + }, + animation: 'loadingAnimation 1s linear infinite', + }, + direct: { + fill: theme.palette.secondaryDivider, + fontSize: 36, + }, })) export interface SavingsTableProps { @@ -118,10 +142,11 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto {loading || getAssetsLoading ? ( -
- +
+ + {t('popups_loading')}
- ) : ( + ) : protocols.length ? (
{protocols.map((protocol, index) => ( @@ -180,6 +205,10 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto ))}
+ ) : ( +
+ +
)} ) From e26bc27686d08c46ef4478873b6ac10df90bdbe3 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Mon, 25 Apr 2022 16:01:18 +0800 Subject: [PATCH 2/2] fix: bugfix --- .../Savings/SNSAdaptor/SavingsDialog.tsx | 4 +- .../Savings/SNSAdaptor/SavingsTable.tsx | 108 +++++++++--------- 2 files changed, 57 insertions(+), 55 deletions(-) diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx index 7cbf26ed64b8..797928a50a45 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx @@ -102,7 +102,7 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) { ...LDO_PAIRS.filter((x) => x[0].chainId === chainId).map((pair) => new LidoProtocol(pair)), ...splitToPair(detailedAaveTokens).map((pair: any) => new AAVEProtocol(pair)), ], - [chainId, detailedAaveTokens], + [chainId, detailedAaveTokens, tab], ) useUpdateEffect(() => { @@ -156,7 +156,7 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) { !x.balance.isZero())} + protocols={protocols} setTab={setTab} setSelectedProtocol={setSelectedProtocol} /> diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx index 8b198a1639d7..59a2ae0c39d3 100644 --- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx +++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx @@ -148,62 +148,64 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
) : protocols.length ? (
- {protocols.map((protocol, index) => ( - - -
- - -
-
- - {protocol.bareToken.symbol} + {protocols + .filter((x) => !x.balance.isZero()) + .map((protocol, index) => ( + + +
+ + +
+
+ + {protocol.bareToken.symbol} + +
+ + {tab === TabType.Deposit ? ( + + {protocol.apr}% + + ) : null} + + + + isSameAddress(x.token.address, protocol.bareToken.address), + )?.balance + : protocol.balance + } + decimals={protocol.bareToken.decimals} + significant={6} + minimumBalance={rightShift(10, protocol.bareToken.decimals - 6)} + formatter={formatBalance} + /> -
- - {tab === TabType.Deposit ? ( - - {protocol.apr}% - ) : null} - - - - isSameAddress(x.token.address, protocol.bareToken.address), - )?.balance - : protocol.balance - } - decimals={protocol.bareToken.decimals} - significant={6} - minimumBalance={rightShift(10, protocol.bareToken.decimals - 6)} - formatter={formatBalance} - /> - - - - + + + - - ))} + ))}
) : (