Feature/btc address assets (#344)

* feat(rgbpp-unbound): add bound status to address asset

* feat(address): add invalid

* feat(invalid): todo for invalid inscription

* style(invalid): invalid asset component

* fix(invalid): add consumedTxHash

---------

Co-authored-by: Chen Yu <[email protected]>

src/locales/en.json

@@ -431,6 +431,7 @@
       "cell": "Cell",
       "cells": "Cells",
       "rgb_plus_plus": "RGB++",
+      "invalid": "Invalid",
       "inscription": "Inscription",
       "confirmation": "Confirmation",
       "confirmations": "Confirmations",

src/locales/zh.json

@@ -432,6 +432,7 @@
       "cells": "Cells",
       "inscription": "铭文",
       "rgb_plus_plus": "RGB++",
+      "invalid": "Invalid",
       "confirmation": "确认区块",
       "confirmations": "确认区块",
       "unable_decode_address": "地址解析失败",

src/pages/Address/BTCAddressComp.tsx

@@ -1,23 +1,31 @@
 import { useState, FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
 import { AddressAssetsTab, AddressAssetsTabPane, AddressAssetsTabPaneTitle, AddressUDTAssetsPanel } from './styled'
 import styles from './styles.module.scss'
 import { Address, UDTAccount } from '../../models/Address'
 import { Card } from '../../components/Card'
 import Cells from './Cells'
 import RgbppAssets from './RgbppAssets'
+import { explorerService } from '../../services/ExplorerService'
 // import RgbppAssets from './RgbppAssets'
 
 enum AssetInfo {
   CELLs,
   RGBPP,
+  Invalid,
 }
 
 export const BTCAddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
   const { t, i18n } = useTranslation()
   const { udtAccounts = [] } = address
   const [activeTab, setActiveTab] = useState<AssetInfo>(AssetInfo.RGBPP)
 
+  const { data } = useQuery(['bitcoin addresses', address], () =>
+    explorerService.api.fetchBitcoinAddresses(address.bitcoinAddressHash || ''),
+  )
+  const { boundLiveCellsCount, unboundLiveCellsCount } = data || { boundLiveCellsCount: 0, unboundLiveCellsCount: 0 }
+
   const [udts, inscriptions] = udtAccounts.reduce(
     (acc, cur) => {
       switch (cur?.udtType) {
@@ -50,7 +58,8 @@ export const BTCAddressOverviewCard: FC<{ address: Address }> = ({ address }) =>
   )
 
   const hasAssets = udts.length || inscriptions.length
-  const hasCells = +address.liveCellsCount > 0
+  const hasCells = boundLiveCellsCount > 0
+  const hasInvalid = unboundLiveCellsCount > 0
 
   useEffect(() => {
     if (hasAssets) {
@@ -105,6 +114,27 @@ export const BTCAddressOverviewCard: FC<{ address: Address }> = ({ address }) =>
                 </div>
               </AddressAssetsTabPane>
             ) : null}
+            {hasInvalid ? (
+              <AddressAssetsTabPane
+                tab={
+                  <AddressAssetsTabPaneTitle onClick={() => setActiveTab(AssetInfo.Invalid)}>
+                    {t('address.invalid')}
+                  </AddressAssetsTabPaneTitle>
+                }
+                key={AssetInfo.Invalid}
+              >
+                <div className={styles.assetCardList}>
+                  <RgbppAssets
+                    address={address.bitcoinAddressHash}
+                    count={+address.liveCellsCount}
+                    udts={udts}
+                    isUnBounded
+                    // TODO invalid asset will be added in the future
+                    inscriptions={[]}
+                  />
+                </div>
+              </AddressAssetsTabPane>
+            ) : null}
           </AddressAssetsTab>
         </AddressUDTAssetsPanel>
       ) : null}

src/pages/Address/InvalidRGBPPAssetList.module.scss

@@ -0,0 +1,126 @@
+@import '../../styles/variables.module';
+
+.container {
+  ul {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
+    gap: 1rem;
+    font-weight: 500;
+  }
+
+  .card {
+    min-height: 86px;
+    background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
+
+    h5 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: var(--primary-color);
+      color: #fff;
+      height: 1.875rem;
+      padding: 8px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      a {
+        &:hover {
+          font-weight: bold;
+          color: #fff;
+          text-decoration: underline;
+        }
+      }
+
+      .copy {
+        appearance: none;
+        border: none;
+        background: none;
+        width: 14px;
+        cursor: pointer;
+        margin-right: 8px;
+        height: 14px;
+
+        svg {
+          pointer-events: none;
+          height: 14px;
+        }
+      }
+
+      span {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: default;
+        flex: 1;
+        text-align: right;
+      }
+    }
+
+    .itemContent {
+      padding: 8px;
+      display: flex;
+      line-height: 1;
+
+      img,
+      svg {
+        margin-right: 8px;
+      }
+
+      .assetName {
+        font-weight: 500;
+      }
+
+      .attribute {
+        display: flex;
+      }
+
+      .copy {
+        appearance: none;
+        border: none;
+        background: none;
+        width: 14px;
+        cursor: pointer;
+
+        &:hover {
+          svg {
+            stroke: var(--primary-color);
+          }
+        }
+
+        svg {
+          pointer-events: none;
+          height: 14px;
+        }
+      }
+
+      .fields {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+      }
+    }
+  }
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.loadMore {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem;
+
+  button {
+    cursor: pointer;
+    appearance: none;
+    border: none;
+  }
+}