DimensionDev · nuanyang233 · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022
diff --git 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',
-    <g fill="none">
+    <g>
         <path
             opacity="0.5"
             d="M34.5 18C34.5 27.1127 27.1127 34.5 18 34.5C8.8873 34.5 1.5 27.1127 1.5 18C1.5 8.8873 8.8873 1.5 18 1.5C27.1127 1.5 34.5 8.8873 34.5 18ZM4.8 18C4.8 25.2902 10.7098 31.2 18 31.2C25.2902 31.2 31.2 25.2902 31.2 18C31.2 10.7098 25.2902 4.8 18 4.8C10.7098 4.8 4.8 10.7098 4.8 18Z"
-            fill="#07101B"
-        />
-        <path
-            d="M18 32.85C18 33.7613 17.2594 34.5085 16.3527 34.4176C14.0175 34.1833 11.7525 33.4527 9.71221 32.2675C7.19493 30.8053 5.10933 28.7031 3.66712 26.1743C2.2249 23.6454 1.47741 20.7801 1.50052 17.869C1.52363 14.9579 2.31652 12.1048 3.79871 9.59921C5.2809 7.09361 7.39961 5.02477 9.93979 3.60267C12.48 2.18058 15.3512 1.45586 18.262 1.50208C21.1728 1.5483 24.0195 2.36382 26.5133 3.86585C28.5345 5.08328 30.2655 6.71657 31.5954 8.65034C32.1117 9.40119 31.8134 10.4101 31.0148 10.8489C30.2161 11.2877 29.2209 10.9884 28.6859 10.2507C27.6493 8.82122 26.3328 7.60953 24.8106 6.69268C22.8156 5.49105 20.5382 4.83864 18.2096 4.80166C15.8809 4.76469 13.584 5.34446 11.5518 6.48214C9.51969 7.61981 7.82472 9.27489 6.63897 11.2794C5.45322 13.2838 4.8189 15.5663 4.80042 17.8952C4.78193 20.2241 5.37992 22.5164 6.53369 24.5394C7.68747 26.5625 9.35595 28.2442 11.3698 29.414C12.9063 30.3066 14.6022 30.8768 16.3543 31.097C17.2584 31.2106 18 31.9387 18 32.85Z"
-            fill="#07101B"
         />
+        <path d="M18 32.85C18 33.7613 17.2594 34.5085 16.3527 34.4176C14.0175 34.1833 11.7525 33.4527 9.71221 32.2675C7.19493 30.8053 5.10933 28.7031 3.66712 26.1743C2.2249 23.6454 1.47741 20.7801 1.50052 17.869C1.52363 14.9579 2.31652 12.1048 3.79871 9.59921C5.2809 7.09361 7.39961 5.02477 9.93979 3.60267C12.48 2.18058 15.3512 1.45586 18.262 1.50208C21.1728 1.5483 24.0195 2.36382 26.5133 3.86585C28.5345 5.08328 30.2655 6.71657 31.5954 8.65034C32.1117 9.40119 31.8134 10.4101 31.0148 10.8489C30.2161 11.2877 29.2209 10.9884 28.6859 10.2507C27.6493 8.82122 26.3328 7.60953 24.8106 6.69268C22.8156 5.49105 20.5382 4.83864 18.2096 4.80166C15.8809 4.76469 13.584 5.34446 11.5518 6.48214C9.51969 7.61981 7.82472 9.27489 6.63897 11.2794C5.45322 13.2838 4.8189 15.5663 4.80042 17.8952C4.78193 20.2241 5.37992 22.5164 6.53369 24.5394C7.68747 26.5625 9.35595 28.2442 11.3698 29.414C12.9063 30.3066 14.6022 30.8768 16.3543 31.097C17.2584 31.2106 18 31.9387 18 32.85Z" />
     </g>,
     '0 0 36 36',
 )
diff --git a/packages/icons/general/Direct.tsx 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',
+    <g>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.59 3.588C5.611 1.565 8.631.798 12.5.798h9c3.869 0 6.889.767 8.911 2.79 2.023 2.022 2.79 5.042 2.79 8.91v9c0 3.87-.767 6.89-2.79 8.912-2.022 2.022-5.042 2.789-8.91 2.789h-9c-3.87 0-6.89-.767-8.912-2.79C1.567 28.388.8 25.368.8 21.5v-9c0-3.869.767-6.889 2.79-8.911Zm1.696 1.697C3.934 6.637 3.2 8.867 3.2 12.499v9c0 3.632.734 5.861 2.086 7.214 1.353 1.352 3.583 2.086 7.214 2.086h9c3.632 0 5.862-.734 7.214-2.086 1.353-1.353 2.086-3.582 2.086-7.214v-9c0-3.632-.733-5.862-2.086-7.214-1.352-1.352-3.582-2.086-7.214-2.086h-9c-3.631 0-5.861.734-7.214 2.086Z"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="m24.749 20.686-1.335 2.685a4.2 4.2 0 0 1-3.759 2.328H14.36c-.436 0-2.597-.003-3.77-2.305l-.004-.01L9.252 20.7a1.802 1.802 0 0 0-1.612-1.002H2a1.2 1.2 0 0 1 0-2.4h5.64a4.2 4.2 0 0 1 3.759 2.329v.002l1.333 2.68c.507.99 1.34.99 1.626.99h5.297a1.8 1.8 0 0 0 1.611-1.002l1.336-2.685a4.2 4.2 0 0 1 3.758-2.329h5.61a1.2 1.2 0 1 1 0 2.4h-5.61c-.68 0-1.303.385-1.611 1.002Z"
+        />
+    </g>,
+    '0 0 34 34',
+)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {
@@ -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(() => {
@@ -142,32 +142,26 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) {
                                     />
                                 </div>
                                 <div className={classes.tableTabWrapper}>
-                                    {protocols.length === 0 ? (
-                                        <Typography variant="body2" textAlign="center">
-                                            {t('plugin_no_protocol_available')}
-                                        </Typography>
-                                    ) : (
-                                        <FolderTabs>
-                                            <FolderTabPanel label="Deposit">
-                                                <SavingsTable
-                                                    chainId={chainId}
-                                                    tab={TabType.Deposit}
-                                                    protocols={protocols}
-                                                    setTab={setTab}
-                                                    setSelectedProtocol={setSelectedProtocol}
-                                                />
-                                            </FolderTabPanel>
-                                            <FolderTabPanel label="Withdraw">
-                                                <SavingsTable
-                                                    chainId={chainId}
-                                                    tab={TabType.Withdraw}
-                                                    protocols={protocols.filter((x) => !x.balance.isZero())}
-                                                    setTab={setTab}
-                                                    setSelectedProtocol={setSelectedProtocol}
-                                                />
-                                            </FolderTabPanel>
-                                        </FolderTabs>
-                                    )}
+                                    <FolderTabs>
+                                        <FolderTabPanel label="Deposit">
+                                            <SavingsTable
+                                                chainId={chainId}
+                                                tab={TabType.Deposit}
+                                                protocols={protocols}
+                                                setTab={setTab}
+                                                setSelectedProtocol={setSelectedProtocol}
+                                            />
+                                        </FolderTabPanel>
+                                        <FolderTabPanel label="Withdraw">
+                                            <SavingsTable
+                                                chainId={chainId}
+                                                tab={TabType.Withdraw}
+                                                protocols={protocols}
+                                                setTab={setTab}
+                                                setSelectedProtocol={setSelectedProtocol}
+                                            />
+                                        </FolderTabPanel>
+                                    </FolderTabs>
                                 </div>
                             </>
                         )}

diff --git 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,67 +142,74 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
             </Grid>
 
             {loading || getAssetsLoading ? (
-                <div className={classes.loading}>
-                    <CircularProgress />
+                <div className={classes.placeholder}>
+                    <CircleLoadingIcon className={classes.animated} />
+                    <Typography className={classes.loading}>{t('popups_loading')}</Typography>
                 </div>
-            ) : (
+            ) : protocols.length ? (
                 <div className={classes.tableContainer}>
-                    {protocols.map((protocol, index) => (
-                        <Grid container spacing={0} className={classes.tableRow} key={index}>
-                            <Grid item xs={4} className={classes.tableCell}>
-                                <div className={classes.logoWrap}>
-                                    <TokenIcon
-                                        name={protocol.bareToken.name}
-                                        address={protocol.bareToken.address}
-                                        classes={{ icon: classes.logo }}
-                                        chainId={chainId}
-                                    />
-                                    <img src={ProviderIconURLs[protocol.type]} className={classes.logoMini} />
-                                </div>
-                                <div>
-                                    <Typography variant="body1" className={classes.protocolLabel}>
-                                        {protocol.bareToken.symbol}
+                    {protocols
+                        .filter((x) => !x.balance.isZero())
+                        .map((protocol, index) => (
+                            <Grid container spacing={0} className={classes.tableRow} key={index}>
+                                <Grid item xs={4} className={classes.tableCell}>
+                                    <div className={classes.logoWrap}>
+                                        <TokenIcon
+                                            name={protocol.bareToken.name}
+                                            address={protocol.bareToken.address}
+                                            classes={{ icon: classes.logo }}
+                                            chainId={chainId}
+                                        />
+                                        <img src={ProviderIconURLs[protocol.type]} className={classes.logoMini} />
+                                    </div>
+                                    <div>
+                                        <Typography variant="body1" className={classes.protocolLabel}>
+                                            {protocol.bareToken.symbol}
+                                        </Typography>
+                                    </div>
+                                </Grid>
+                                {tab === TabType.Deposit ? (
+                                    <Grid item xs={2} className={classes.tableCell}>
+                                        <Typography variant="body1">{protocol.apr}%</Typography>
+                                    </Grid>
+                                ) : null}
+                                <Grid xs={tab === TabType.Deposit ? 3 : 5} className={classes.tableCell}>
+                                    <Typography variant="body1">
+                                        <FormattedBalance
+                                            value={
+                                                tab === TabType.Deposit
+                                                    ? assets.find((x) =>
+                                                          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}
+                                        />
                                     </Typography>
-                                </div>
-                            </Grid>
-                            {tab === TabType.Deposit ? (
-                                <Grid item xs={2} className={classes.tableCell}>
-                                    <Typography variant="body1">{protocol.apr}%</Typography>
                                 </Grid>
-                            ) : null}
-                            <Grid xs={tab === TabType.Deposit ? 3 : 5} className={classes.tableCell}>
-                                <Typography variant="body1">
-                                    <FormattedBalance
-                                        value={
-                                            tab === TabType.Deposit
-                                                ? assets.find((x) =>
-                                                      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}
-                                    />
-                                </Typography>
-                            </Grid>
-                            <Grid item xs={3} className={classes.tableCell}>
-                                <Button
-                                    variant="contained"
-                                    color="primary"
-                                    disabled={tab === TabType.Withdraw ? isZero(protocol.balance) : false}
-                                    onClick={() => {
-                                        setTab(tab)
-                                        setSelectedProtocol(protocol)
-                                    }}>
-                                    {tab === TabType.Deposit
-                                        ? t('plugin_savings_deposit')
-                                        : t('plugin_savings_withdraw')}
-                                </Button>
+                                <Grid item xs={3} className={classes.tableCell}>
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        disabled={tab === TabType.Withdraw ? isZero(protocol.balance) : false}
+                                        onClick={() => {
+                                            setTab(tab)
+                                            setSelectedProtocol(protocol)
+                                        }}>
+                                        {tab === TabType.Deposit
+                                            ? t('plugin_savings_deposit')
+                                            : t('plugin_savings_withdraw')}
+                                    </Button>
+                                </Grid>
                             </Grid>
-                        </Grid>
-                    ))}
+                        ))}
+                </div>
+            ) : (
+                <div className={classes.placeholder}>
+                    <DirectIcon className={classes.direct} />
                 </div>
             )}
         </Box>