From 52d80cc365311bdff2e38a49140322cea6bb505f Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Sat, 27 Aug 2022 17:50:36 +0800
Subject: [PATCH] refactor: refine overview placeholder of contract account

---
 components/AccountOverview/index.tsx   | 21 ++++++----
 components/SmartContractInfo/index.tsx | 57 +++++++++++++-------------
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/components/AccountOverview/index.tsx b/components/AccountOverview/index.tsx
index 077ba883b..356a988bd 100644
--- a/components/AccountOverview/index.tsx
+++ b/components/AccountOverview/index.tsx
@@ -171,16 +171,19 @@ const overviewPlaceHolderCount = (account: AccountOverviewProps['account']) => {
     case GraphQLSchema.AccountType.PolyjuiceCreator:
       return 1
     case GraphQLSchema.AccountType.PolyjuiceContract:
-      const isVerified = !!account.smart_contract?.contract_source_code
-      if (!!account.smart_contract?.deployment_tx_hash && isVerified) {
-        return 2
-      } else if (!!account.smart_contract?.deployment_tx_hash && !isVerified) {
-        return 3
-      } else if (!account.smart_contract?.deployment_tx_hash && isVerified) {
-        return 0
-      } else {
-        return 1
+      let count = 1
+      if (account.udt?.id) {
+        count++
       }
+
+      if (!account.smart_contract?.contract_source_code) {
+        count++
+      }
+
+      if (!account.udt?.icon && !account.udt?.description && !account.udt?.official_site) {
+        count++
+      }
+      return count
     case GraphQLSchema.AccountType.MetaContract:
       return 6
     case GraphQLSchema.AccountType.EthAddrReg:
diff --git a/components/SmartContractInfo/index.tsx b/components/SmartContractInfo/index.tsx
index a0af11f79..33c8cadd1 100644
--- a/components/SmartContractInfo/index.tsx
+++ b/components/SmartContractInfo/index.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'next-i18next'
 import NextLink from 'next/link'
+import { Skeleton } from '@mui/material'
 import Tooltip from 'components/Tooltip'
 import InfoList from '../InfoList'
 import { client, GraphQLSchema } from 'utils'
@@ -66,34 +67,34 @@ const SmartContract: React.FC<{
       field: t('type'),
       content: 'Smart Contract',
     },
-    deployer
-      ? {
-          field: t('deployer'),
-          content: (
-            <Tooltip title={deployer} placement="top">
-              <span>
-                <NextLink href={`/account/${deployer}`}>
-                  <a className="mono-font">{deployer}</a>
-                </NextLink>
-              </span>
-            </Tooltip>
-          ),
-        }
-      : null,
-    deployTxHash
-      ? {
-          field: t('deployTx'),
-          content: (
-            <Tooltip title={deployTxHash} placement="top">
-              <span>
-                <NextLink href={`/tx/${deployTxHash}`}>
-                  <a className="mono-font">{deployTxHash}</a>
-                </NextLink>
-              </span>
-            </Tooltip>
-          ),
-        }
-      : null,
+    {
+      field: t('deployer'),
+      content: deployer ? (
+        <Tooltip title={deployer} placement="top">
+          <span>
+            <NextLink href={`/account/${deployer}`}>
+              <a className="mono-font">{deployer}</a>
+            </NextLink>
+          </span>
+        </Tooltip>
+      ) : (
+        <Skeleton animation="wave" />
+      ),
+    },
+    {
+      field: t('deployTx'),
+      content: deployTxHash ? (
+        <Tooltip title={deployTxHash} placement="top">
+          <span>
+            <NextLink href={`/tx/${deployTxHash}`}>
+              <a className="mono-font">{deployTxHash}</a>
+            </NextLink>
+          </span>
+        </Tooltip>
+      ) : (
+        <Skeleton animation="wave" />
+      ),
+    },
     udt?.id
       ? {
           field: t('token'),