feat(inscription): new ui (#421)

* feat(inscription): new ui * feat(inscriptioN): use link instead of a * fix(inscription): use li in the ul * fix(inscription): overflow * fix(inscription): radius
nervosnetwork · Sep 5, 2024 · 94f3a24 · 94f3a24
1 parent 08a0aa9
commit 94f3a24
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 24 deletions.
diff --git a/src/pages/Address/AddressAssetComp.tsx b/src/pages/Address/AddressAssetComp.tsx
@@ -11,6 +11,7 @@ import { getDobs } from '../../services/DobsService'
 import { sliceNftName } from '../../utils/string'
 import styles from './addressAssetComp.module.scss'
 import EllipsisMiddle from '../../components/EllipsisMiddle'
+import Inscription from './Inscription'
 
 export const AddressAssetComp = ({
   href,
@@ -259,19 +260,20 @@ export const AddressCoTAComp = ({ account, isRGBPP }: { account: CoTA; isRGBPP?:
   )
 }
 
-export const AddressOmigaInscriptionComp = ({ account, isRGBPP }: { account: OmigaInscription; isRGBPP?: boolean }) => {
-  const { decimal, expectedSupply, mintStatus, amount, typeHash, udtAmount } = account
+export const AddressOmigaInscriptionComp = ({ account }: { account: OmigaInscription }) => {
+  const { decimal, mintStatus, amount, typeHash, symbol, udtAmount } = account
   const { t } = useTranslation()
   return (
-    <AddressAssetComp
-      isRGBPP={isRGBPP ?? false}
+    <Inscription
       href={`/inscription/${typeHash}`}
-      name={parseUDTAmount(amount, decimal)}
-      property={`${t(`udt.mint_status_${mintStatus}`)}(${parseUDTAmount(udtAmount, decimal)}/${parseUDTAmount(
-        expectedSupply,
-        decimal,
-      )})`}
+      content={{
+        Symbol: symbol,
+        Amount: amount,
+        Decimal: decimal,
+        Supply: udtAmount,
+      }}
       udtLabel="Omiga"
+      mintingStatus={t(`udt.mint_status_${mintStatus}`)}
     />
   )
 }
diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx
@@ -287,20 +287,26 @@ export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
                 key={AssetInfo.INSCRIPTION}
               >
                 <div className={styles.assetCardList}>
-                  {inscriptions.map(inscription => {
-                    switch (inscription.udtType) {
-                      case 'omiga_inscription':
-                        return (
-                          <AddressOmigaInscriptionComp
-                            account={inscription}
-                            key={`${inscription.symbol + inscription.udtType + inscription.udtAmount}`}
-                          />
-                        )
-
-                      default:
-                        return null
-                    }
-                  })}
+                  <div className={styles.inscriptions}>
+                    <ul>
+                      {inscriptions.map(inscription => {
+                        switch (inscription.udtType) {
+                          case 'omiga_inscription':
+                            return (
+                              <li>
+                                <AddressOmigaInscriptionComp
+                                  account={inscription}
+                                  key={`${inscription.symbol + inscription.udtType + inscription.udtAmount}`}
+                                />
+                              </li>
+                            )
+
+                          default:
+                            return null
+                        }
+                      })}
+                    </ul>
+                  </div>
                 </div>
               </AddressAssetsTabPane>
             ) : null}

diff --git a/src/pages/Address/Inscription.tsx b/src/pages/Address/Inscription.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+import styles from './inscription.module.scss'
+import { Link } from '../../components/Link'
+
+const Inscription = ({
+  href,
+  udtLabel,
+  mintingStatus,
+  content,
+}: {
+  content: Record<string, string>
+  href: string
+  mintingStatus?: string
+  udtLabel: string
+}) => {
+  return (
+    <Link to={href} className={styles.container}>
+      <h5>
+        <span className="monospace">{udtLabel}</span>
+        <span className="monospace">{mintingStatus}</span>
+      </h5>
+      <div className={styles.content}>
+        {'{'}
+        {Object.entries(content).map(([key, value]) => (
+          <div className={classNames('monospace', styles.jsonValue)}>
+            <div className={classNames('monospace', styles.title)}>{key}:</div>
+            <div className={classNames('monospace', styles.value)}>{value}</div>
+          </div>
+        ))}
+        {'}'}
+      </div>
+    </Link>
+  )
+}
+
+export default Inscription
diff --git a/src/pages/Address/MergedAssetList.tsx b/src/pages/Address/MergedAssetList.tsx
@@ -115,7 +115,7 @@ const MergedAssetList: FC<{
           case 'omiga_inscription':
             return (
               <AddressOmigaInscriptionComp
-                isRGBPP
+                // isRGBPP
                 account={omiga}
                 key={`${omiga.symbol + omiga.udtType + omiga.udtAmount}`}
               />

diff --git a/src/pages/Address/inscription.module.scss b/src/pages/Address/inscription.module.scss
@@ -0,0 +1,50 @@
+// @import '../../../styles//variables.module.scss';
+
+.container {
+  min-width: 250px;
+  min-height: 86px;
+  background: #fff;
+  overflow: hidden;
+  max-width: 287px;
+  border-radius: 4px;
+  display: block;
+
+  h5 {
+    height: 30px;
+    background-color: #f8b83c;
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 8px 6px;
+    margin: 0;
+    color: #333;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: capitalize;
+  }
+
+  .content {
+    height: 90px;
+    overflow-y: scroll;
+    padding: 8px;
+    background-color: #000;
+    width: 100%;
+    color: #fff;
+    text-wrap: nowrap;
+
+    .jsonValue {
+      .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-grow: 1;
+      }
+
+      padding-left: 2em;
+      width: 100%;
+      overflow: hidden;
+      max-width: 100%;
+      display: flex;
+    }
+  }
+}
diff --git a/src/pages/Address/styles.module.scss b/src/pages/Address/styles.module.scss
@@ -1,5 +1,26 @@
 @import '../../styles/variables.module';
 
+.inscriptions {
+  overflow-x: scroll;
+  width: 100%;
+
+  @media (width >= $extraLargeBreakPoint) {
+    max-height: 220px;
+  }
+
+  @media (width <= $extraLargeBreakPoint) {
+    max-height: 310px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
+    gap: 1rem;
+  }
+}
+
 .addressOverviewCard:not(
     [_='This `:not` selector is used to increase the specificity of the selector and serves no other purpose.']
   ) {