Feat: support .bit resolution icon of domian (#805)

Magickbase · Jan 5, 2023 · 8e24f06 · 8e24f06
1 parent 330a678
commit 8e24f06
Show file tree

Hide file tree

Showing 29 changed files with 454 additions and 168 deletions.
diff --git a/components/AccountOverview/index.tsx b/components/AccountOverview/index.tsx
@@ -80,39 +80,42 @@ export type AccountOverviewProps = {
   isOverviewLoading?: boolean
   isBalanceLoading?: boolean
   balance: string
-  deployerAddr?: string
+  deployer?: Pick<GraphQLSchema.Account, 'eth_address' | 'bit_alias'>
   isContractVerified?: boolean
 }
 
 const accountOverviewQuery = gql`
   query ($script_hash: String, $address: String) {
     account(input: { script_hash: $script_hash, address: $address }) {
-      type
-      eth_address
-      script_hash
-      script
-      transaction_count
-      nonce
-      udt {
-        id
-        name
-        decimal
-        symbol
-        description
-        official_site
-        icon
-      }
-      smart_contract {
-        name
-        deployment_tx_hash
-        compiler_version
-        compiler_file_format
-        contract_source_code
-        constructor_arguments
-        abi
-      }
-      udt {
-        eth_type
+      ... on Account {
+        type
+        eth_address
+        bit_alias
+        script_hash
+        script
+        transaction_count
+        nonce
+        udt {
+          id
+          name
+          decimal
+          symbol
+          description
+          official_site
+          icon
+        }
+        smart_contract {
+          name
+          deployment_tx_hash
+          compiler_version
+          compiler_file_format
+          contract_source_code
+          constructor_arguments
+          abi
+        }
+        udt {
+          eth_type
+        }
       }
     }
   }
@@ -164,6 +167,7 @@ const deployAddrQuery = gql`
     transaction(input: { eth_hash: $eth_hash }) {
       from_account {
         eth_address
+        bit_alias
       }
     }
   }
@@ -201,8 +205,17 @@ export const fetchAccountBalance = (address: string) => provider.getBalance(addr
 
 export const fetchDeployAddress = (variables: { eth_hash: string }) =>
   client
-    .request<{ transaction: { from_account: Pick<GraphQLSchema.Account, 'eth_address'> } }>(deployAddrQuery, variables)
-    .then(data => data.transaction.from_account.eth_address)
+    .request<{ transaction: { from_account: Pick<GraphQLSchema.Account, 'eth_address' | 'bit_alias'> } }>(
+      deployAddrQuery,
+      variables,
+    )
+    .then(
+      data =>
+        data.transaction.from_account ?? {
+          eth_address: '',
+          bit_alias: '',
+        },
+    )
 
 type SourcifyStatusResponse = {
   sourcify_check_by_addresses: [{ address: string; chain_ids: string[]; status: string }]
@@ -245,7 +258,7 @@ const overviewPlaceHolderCount = (account: AccountOverviewProps['account']) => {
 const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<any> }> = ({
   account,
   balance,
-  deployerAddr = '',
+  deployer,
   isBalanceLoading,
   isOverviewLoading,
   refetch,
@@ -338,14 +351,17 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
 
   const getInfoBlock = account => {
     const { type } = account
+    const domain = account.bit_alias
 
     const blockMap = {
       [`${GraphQLSchema.AccountType.MetaContract}`]: <MetaContract {...(account.script as MetaContract['script'])} />,
-      [`${GraphQLSchema.AccountType.EthUser}`]: <User nonce={account.nonce} isLoading={isOverviewLoading} />,
+      [`${GraphQLSchema.AccountType.EthUser}`]: (
+        <User nonce={account.nonce} isLoading={isOverviewLoading} domain={domain} />
+      ),
       [`${GraphQLSchema.AccountType.EthAddrReg}`]: <EthAddrReg />,
       [`${GraphQLSchema.AccountType.PolyjuiceContract}`]: (
         <SmartContract
-          deployer={deployerAddr}
+          deployer={deployer}
           deployTxHash={account.smart_contract?.deployment_tx_hash!}
           udt={account.udt}
           address={account.eth_address || ''}

diff --git a/components/AddressWithDomain/index.tsx b/components/AddressWithDomain/index.tsx
@@ -0,0 +1,32 @@
+import HashLink from 'components/HashLink'
+import Tooltip from 'components/Tooltip'
+import { IMG_URL } from 'utils'
+
+import styles from './styles.module.scss'
+
+type Props = {
+  domain: string
+  hash: string
+  href: string
+  leading?: number
+}
+
+const AddressWithDomain = ({ domain, hash, href = '', leading = 8 }: Props) => {
+  return (
+    <div className={styles.container}>
+      <Tooltip title={domain} placement="top">
+        <img src={`${IMG_URL}bit-logo.svg`} loading="lazy" crossOrigin="anonymous" referrerPolicy="no-referrer" />
+      </Tooltip>
+      <Tooltip title={hash} placement="top">
+        <div>
+          <HashLink
+            label={domain?.length > leading * 2 ? `${domain?.slice(0, leading)}...${domain?.slice(-leading)}` : domain}
+            href={href}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default AddressWithDomain
diff --git a/components/AddressWithDomain/styles.module.scss b/components/AddressWithDomain/styles.module.scss
@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  align-items: center;
+  text-transform: initial;
+  & img {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-right: 2px;
+  }
+}
diff --git a/components/BaseTransferlist/index.tsx b/components/BaseTransferlist/index.tsx
@@ -9,6 +9,7 @@ import Pagination from 'components/SimplePagination'
 import TokenLogo from 'components/TokenLogo'
 import FilterMenu from 'components/FilterMenu'
 import RoundedAmount from 'components/RoundedAmount'
+import Address from 'components/TruncatedAddress'
 import Tooltip from 'components/Tooltip'
 import { GraphQLSchema, ZERO_ADDRESS } from 'utils'
 import SortIcon from 'assets/icons/sort.svg'
@@ -23,6 +24,14 @@ export type TransferListItem = {
   amount: string
   from_address: string
   to_address: string
+  from_account: {
+    eth_address: string
+    bit_alias: string
+  }
+  to_account: {
+    eth_address: string
+    bit_alias: string
+  }
   log_index: number
   transaction_hash: string
   udt: udtType
@@ -119,59 +128,74 @@ const TransferList: React.FC<TransferListProps> = ({ entries, metadata, type, ha
         </thead>
         <tbody>
           {metadata?.total_count ? (
-            entries?.map(item => (
-              <tr key={`${item.transaction_hash}-${item.log_index}`}>
-                <td>{item.log_index}</td>
-                <td className={styles.address}>
-                  <Tooltip title={item.from_address} placement="top">
-                    <span className="mono-font">
-                      {item.from_address === ZERO_ADDRESS ? (
-                        'zero address'
-                      ) : (
-                        <HashLink
-                          label={`${item?.from_address?.slice(0, 8)}...${item?.from_address?.slice(-8)}`}
-                          href={`/account/${item?.from_address}`}
-                        />
-                      )}
-                    </span>
-                  </Tooltip>
-                </td>
-                <td className={styles.address}>
-                  <Tooltip title={item.to_address} placement="top">
-                    <span className="mono-font">
-                      {item.to_address === ZERO_ADDRESS ? (
-                        'zero address'
-                      ) : (
-                        <HashLink
-                          label={`${item.to_address.slice(0, 8)}...${item.to_address.slice(-8)}`}
-                          href={`/account/${item.to_address}`}
-                        />
-                      )}
-                    </span>
-                  </Tooltip>
-                </td>
-                <td className={styles.tokenLogo}>
-                  <NextLink
-                    href={{
-                      pathname: handleTokenLink(item, type),
-                    }}
-                  >
-                    <a>
-                      {isShowLogo ? (
-                        <TokenLogo name={item.udt.name} logo={item.udt.icon} />
-                      ) : (
-                        handleTokenName?.(item.udt, item.token_id) ?? ''
-                      )}
-                    </a>
-                  </NextLink>
-                </td>
-                {type === TransferlistType.Erc20 && (
-                  <td title={item.udt.name} className={styles['ta-r']}>
-                    <RoundedAmount amount={item.amount} udt={item.udt} />
+            entries?.map(item => {
+              const from_bit_alias = item.from_account?.bit_alias
+              const from_address = item.from_account?.eth_address
+              const to_bit_alias = item.to_account?.bit_alias
+              const to_address = item.to_account?.eth_address
+
+              return (
+                <tr key={`${item.transaction_hash}-${item.log_index}`}>
+                  <td>{item.log_index}</td>
+                  <td className={styles.address}>
+                    {from_bit_alias ? (
+                      <Address address={from_address} domain={from_bit_alias} />
+                    ) : (
+                      <Tooltip title={item.from_address} placement="top">
+                        <span className="mono-font">
+                          {item.from_address === ZERO_ADDRESS ? (
+                            'zero address'
+                          ) : (
+                            <HashLink
+                              label={`${item?.from_address?.slice(0, 8)}...${item?.from_address?.slice(-8)}`}
+                              href={`/account/${item?.from_address}`}
+                            />
+                          )}
+                        </span>
+                      </Tooltip>
+                    )}
                   </td>
-                )}
-              </tr>
-            ))
+                  <td className={styles.address}>
+                    {to_bit_alias ? (
+                      <Address address={to_address} domain={to_bit_alias} />
+                    ) : (
+                      <Tooltip title={item.to_address} placement="top">
+                        <span className="mono-font">
+                          {item.to_address === ZERO_ADDRESS ? (
+                            'zero address'
+                          ) : (
+                            <HashLink
+                              label={`${item.to_address.slice(0, 8)}...${item.to_address.slice(-8)}`}
+                              href={`/account/${item.to_address}`}
+                            />
+                          )}
+                        </span>
+                      </Tooltip>
+                    )}
+                  </td>
+                  <td className={styles.tokenLogo}>
+                    <NextLink
+                      href={{
+                        pathname: handleTokenLink(item, type),
+                      }}
+                    >
+                      <a>
+                        {isShowLogo ? (
+                          <TokenLogo name={item.udt.name} logo={item.udt.icon} />
+                        ) : (
+                          handleTokenName?.(item.udt, item.token_id) ?? ''
+                        )}
+                      </a>
+                    </NextLink>
+                  </td>
+                  {type === TransferlistType.Erc20 && (
+                    <td title={item.udt.name} className={styles['ta-r']}>
+                      <RoundedAmount amount={item.amount} udt={item.udt} />
+                    </td>
+                  )}
+                </tr>
+              )
+            })
           ) : (
             <tr>
               <td colSpan={5}>

diff --git a/components/CommonERCTransferlist/index.tsx b/components/CommonERCTransferlist/index.tsx
@@ -59,6 +59,14 @@ const getTransferListQuery = (type: TransferlistType) => gql`
         log_index
         from_address
         to_address
+        from_account{
+          eth_address
+          bit_alias
+        }
+        to_account{
+          eth_address
+          bit_alias
+        }
         udt {
           decimal
           name

diff --git a/components/ERC20TransferList/index.tsx b/components/ERC20TransferList/index.tsx
@@ -28,8 +28,8 @@ export type TransferListProps = {
       block: Pick<GraphQLSchema.Block, 'number' | 'status' | 'timestamp'>
       from_address: string
       to_address: string
-      from_account: Pick<GraphQLSchema.Account, 'type'>
-      to_account: Pick<GraphQLSchema.Account, 'type'>
+      from_account: Pick<GraphQLSchema.Account, 'type' | 'bit_alias'>
+      to_account: Pick<GraphQLSchema.Account, 'type' | 'bit_alias'>
       log_index: number
       polyjuice: Pick<GraphQLSchema.Polyjuice, 'status'>
       transaction_hash: string
@@ -97,9 +97,11 @@ const transferListQuery = gql`
         to_address
         from_account {
           type
+          bit_alias
         }
         to_account {
           type
+          bit_alias
         }
         block {
           number
@@ -170,9 +172,11 @@ const tokenTransferListQuery = gql`
         to_address
         from_account {
           type
+          bit_alias
         }
         to_account {
           type
+          bit_alias
         }
         block {
           number
@@ -314,10 +318,18 @@ const TransferList: React.FC<
                     </time>
                   </td>
                   <td>
-                    <Address address={item.from_address} type={item.from_account?.type} />
+                    <Address
+                      address={item.from_address}
+                      type={item.from_account?.type}
+                      domain={item.from_account?.bit_alias}
+                    />
                   </td>
                   <td>
-                    <Address address={item.to_address} type={item.to_account?.type} />
+                    <Address
+                      address={item.to_address}
+                      type={item.to_account?.type}
+                      domain={item.to_account?.bit_alias}
+                    />
                   </td>
                   <td className={styles.direction}>
                     <TransferDirection from={item.from_address} to={item.to_address} viewer={viewer ?? ''} />