From 6f12cd50f8cb457f2c8ff428dc272bd7776c4df8 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Mon, 10 Jul 2023 23:46:12 +0200 Subject: [PATCH 1/3] Add option to Table to make isLoading trump the existence of rows --- src/app/components/Table/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/components/Table/index.tsx b/src/app/components/Table/index.tsx index 958ad4052..b54309d70 100644 --- a/src/app/components/Table/index.tsx +++ b/src/app/components/Table/index.tsx @@ -74,7 +74,8 @@ type TableProps = { rows?: TableRowProps[] rowsNumber?: number stickyColumn?: boolean - extraHorizontalSpaceOnMobile?: boolean + extraHorizontalSpaceOnMobile?: boolean | undefined + alwaysWaitWhileLoading?: boolean | undefined } const stickyColumnStyles = { @@ -97,6 +98,7 @@ export const Table: FC = ({ rowsNumber = 5, stickyColumn = false, extraHorizontalSpaceOnMobile = false, + alwaysWaitWhileLoading = false, }) => { const { isMobile } = useScreenSize() @@ -125,7 +127,7 @@ export const Table: FC = ({ - {!rows && isLoading && ( + {(alwaysWaitWhileLoading || !rows) && isLoading && ( )} {rows?.map(row => ( From 3181a43af63182164a301adaafcb9d43d244f358 Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Fri, 7 Jul 2023 23:57:47 +0200 Subject: [PATCH 2/3] Token dashboard: make sure all cards have loading state --- .changelog/691.feature.md | 1 + src/app/components/Tokens/TokenTransfers.tsx | 1 + .../TokenDashboardPage/TokenDetailsCard.tsx | 2 +- .../TokenHoldersCountCard.tsx | 11 ++- .../TokenDashboardPage/TokenSupplyCard.tsx | 20 +++-- .../TokenDashboardPage/TokenTitleCard.tsx | 90 ++++++++++--------- .../TokenTotalTransactionsCard.tsx | 15 +++- .../TokenDashboardPage/TokenTransfersCard.tsx | 20 +++-- .../TokenDashboardPage/TokenTypeCard.tsx | 11 ++- 9 files changed, 103 insertions(+), 68 deletions(-) create mode 100644 .changelog/691.feature.md diff --git a/.changelog/691.feature.md b/.changelog/691.feature.md new file mode 100644 index 000000000..84c1fc2c9 --- /dev/null +++ b/.changelog/691.feature.md @@ -0,0 +1 @@ +Token dashboard: make sure all cards have loading state diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx index 1ce5d278c..b7eb140e3 100644 --- a/src/app/components/Tokens/TokenTransfers.tsx +++ b/src/app/components/Tokens/TokenTransfers.tsx @@ -210,6 +210,7 @@ export const TokenTransfers: FC = ({ isLoading={isLoading} pagination={pagination} extraHorizontalSpaceOnMobile + alwaysWaitWhileLoading /> ) } diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx index 5a0b07778..f1944f56b 100644 --- a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx @@ -34,7 +34,7 @@ export const TokenDetailsCard: FC = () => { {isLoading && } - {account && token && ( + {!isLoading && account && token && (
{t('common.token')}
{token.name}
diff --git a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx index 70c9cb726..6c3f1d9dc 100644 --- a/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenHoldersCountCard.tsx @@ -7,6 +7,7 @@ import { COLORS } from '../../../styles/theme/colors' import { useRequiredScopeParam } from '../../hooks/useScopeParam' import { useTokenInfo } from './hook' import { useLoaderData } from 'react-router-dom' +import Skeleton from '@mui/material/Skeleton' export const TokenHoldersCountCard: FC = () => { const { t } = useTranslation() @@ -14,14 +15,16 @@ export const TokenHoldersCountCard: FC = () => { const address = useLoaderData() as string - const { token, isFetched } = useTokenInfo(scope, address) + const { isLoading, token, isFetched } = useTokenInfo(scope, address) const title = t('tokens.holders') return ( - {isFetched && ( - <> + {isLoading ? ( + + ) : ( + isFetched && ( { > {t('tokens.holdersValue', { value: token?.num_holders })} - + ) )} diff --git a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx index 10c182b18..de79d80af 100644 --- a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx @@ -7,6 +7,7 @@ import { COLORS } from '../../../styles/theme/colors' import { useRequiredScopeParam } from '../../hooks/useScopeParam' import { useTokenInfo } from './hook' import { useLoaderData } from 'react-router-dom' +import Skeleton from '@mui/material/Skeleton' export const TokenSupplyCard: FC = () => { const { t } = useTranslation() @@ -14,27 +15,34 @@ export const TokenSupplyCard: FC = () => { const address = useLoaderData() as string - const { token, isFetched } = useTokenInfo(scope, address) + const { isLoading, token, isFetched } = useTokenInfo(scope, address) - const title = t('tokens.totalSupply') const supplyString = token?.total_supply return ( - + : token?.symbol} + > - {isFetched && ( - <> + {isLoading ? ( + + ) : ( + isFetched && + token && ( {!supplyString ? t('common.missing') : t('tokens.totalSupplyValue', { value: supplyString })} - + ) )} diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx index a9957f6f2..d8a73bb1a 100644 --- a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx @@ -11,72 +11,76 @@ import { DelayedContractVerificationIcon } from '../../components/ContractVerifi import { AccountLink } from '../../components/Account/AccountLink' import Box from '@mui/material/Box' import { CopyToClipboard } from '../../components/CopyToClipboard' +import { useTranslation } from 'react-i18next' const TitleSkeleton: FC = () => export const TokenTitleCard: FC = () => { + const { t } = useTranslation() const scope = useRequiredScopeParam() const address = useLoaderData() as string const { isLoading, token } = useTokenInfo(scope, address) - const title = isLoading ? : token?.name - const subTitle = isLoading ? null : ` (${token?.symbol})` || null - return ( - + {isLoading ? ( + + ) : ( - - {title} - -   - - {subTitle} - - - - {token && ( - - - + + {token?.name ?? t('common.missing')} + +   + + {token?.symbol ?? t('common.missing')} + - )} - + + {token && ( + + + + + + )} + + )} ) diff --git a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx index 26aa3cc34..7612dee60 100644 --- a/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTotalTransactionsCard.tsx @@ -7,6 +7,8 @@ import { COLORS } from '../../../styles/theme/colors' import { useRequiredScopeParam } from '../../hooks/useScopeParam' import { useLoaderData } from 'react-router-dom' import { useAccount } from '../AccountDetailsPage/hook' +import Skeleton from '@mui/material/Skeleton' +import { useTokenInfo } from './hook' export const TokenTotalTransactionsCard: FC = () => { const { t } = useTranslation() @@ -14,14 +16,19 @@ export const TokenTotalTransactionsCard: FC = () => { const address = useLoaderData() as string - const { isFetched, account } = useAccount(scope, address) + const { isLoading: isAccountLoading, isFetched, account } = useAccount(scope, address) + const { isLoading: isTokenLoading } = useTokenInfo(scope, address) const value = account?.stats.num_txns + const isLoading = isAccountLoading || isTokenLoading + return ( - {isFetched && ( - <> + {isLoading ? ( + + ) : ( + isFetched && ( { > {t('totalTransactions.value', { value })} - + ) )} diff --git a/src/app/pages/TokenDashboardPage/TokenTransfersCard.tsx b/src/app/pages/TokenDashboardPage/TokenTransfersCard.tsx index f760b9abf..20550376b 100644 --- a/src/app/pages/TokenDashboardPage/TokenTransfersCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTransfersCard.tsx @@ -10,7 +10,7 @@ import { useLoaderData } from 'react-router-dom' import { TokenTransfers } from '../../components/Tokens/TokenTransfers' import { CardEmptyState } from '../AccountDetailsPage/CardEmptyState' import { useAccount } from '../AccountDetailsPage/hook' -import { useTokenTransfers } from './hook' +import { useTokenInfo, useTokenTransfers } from './hook' export const tokenTransfersContainerId = 'transfers' @@ -19,12 +19,20 @@ export const TokenTransfersCard: FC = () => { const scope = useRequiredScopeParam() const address = useLoaderData() as string - const { isLoading, isFetched, transfers, pagination, totalCount, isTotalCountClipped } = useTokenTransfers( - scope, - address, - ) + const { + isLoading: areTransfersLoading, + isFetched, + transfers, + pagination, + totalCount, + isTotalCountClipped, + } = useTokenTransfers(scope, address) + + const { isLoading: isTokenLoading } = useTokenInfo(scope, address) + + const { isLoading: isAccountLoading, account } = useAccount(scope, address) - const { account } = useAccount(scope, address) + const isLoading = isTokenLoading || isAccountLoading || areTransfersLoading return ( diff --git a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx index ef363d8a6..3a4f25729 100644 --- a/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTypeCard.tsx @@ -8,6 +8,7 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam' import { useTokenInfo } from './hook' import { useLoaderData } from 'react-router-dom' import { getTokenTypeName } from '../../../types/tokens' +import Skeleton from '@mui/material/Skeleton' export const TokenTypeCard: FC = () => { const { t } = useTranslation() @@ -15,13 +16,15 @@ export const TokenTypeCard: FC = () => { const address = useLoaderData() as string - const { token, isFetched } = useTokenInfo(scope, address) + const { isLoading, token, isFetched } = useTokenInfo(scope, address) return ( - {isFetched && ( - <> + {isLoading ? ( + + ) : ( + isFetched && ( { > {token?.type ? getTokenTypeName(t, token.type) : '-'} - + ) )} From f6a78f8069bae92b1a7ac81f0775a321d8359efe Mon Sep 17 00:00:00 2001 From: Kristof Csillag Date: Sat, 8 Jul 2023 00:18:15 +0200 Subject: [PATCH 3/3] When total supply is not defined for a token, show undefined --- src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx | 6 +++--- src/locales/en/translation.json | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx index de79d80af..eff80c561 100644 --- a/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenSupplyCard.tsx @@ -17,8 +17,6 @@ export const TokenSupplyCard: FC = () => { const { isLoading, token, isFetched } = useTokenInfo(scope, address) - const supplyString = token?.total_supply - return ( { width: '100%', }} > - {!supplyString ? t('common.missing') : t('tokens.totalSupplyValue', { value: supplyString })} + {token.total_supply + ? t('tokens.totalSupplyValue', { value: token.total_supply }) + : t('common.undefined')} ) )} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index da847e3fc..686605e7c 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -90,6 +90,7 @@ "txnFee": "Txn Fee", "type": "Type", "quantity": "Quantity", + "undefined": "Undefined", "unknown": "Unknown", "value": "Value", "valueInToken": "{{value}} {{ticker}}",