diff --git a/src/pages/Address/AddressAssetComp.tsx b/src/pages/Address/AddressAssetComp.tsx index 9caa88449..1ff1a6afa 100644 --- 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 ( - ) } diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx index 0c48e3193..7fd329259 100644 --- 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} >
- {inscriptions.map(inscription => { - switch (inscription.udtType) { - case 'omiga_inscription': - return ( - - ) - - default: - return null - } - })} +
+
    + {inscriptions.map(inscription => { + switch (inscription.udtType) { + case 'omiga_inscription': + return ( +
  • + +
  • + ) + + default: + return null + } + })} +
+
) : null} diff --git a/src/pages/Address/Inscription.tsx b/src/pages/Address/Inscription.tsx new file mode 100644 index 000000000..31d058318 --- /dev/null +++ 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 + href: string + mintingStatus?: string + udtLabel: string +}) => { + return ( + +
+ {udtLabel} + {mintingStatus} +
+
+ {'{'} + {Object.entries(content).map(([key, value]) => ( +
+
{key}:
+
{value}
+
+ ))} + {'}'} +
+ + ) +} + +export default Inscription diff --git a/src/pages/Address/MergedAssetList.tsx b/src/pages/Address/MergedAssetList.tsx index 8850d9290..401c21dd3 100644 --- a/src/pages/Address/MergedAssetList.tsx +++ b/src/pages/Address/MergedAssetList.tsx @@ -115,7 +115,7 @@ const MergedAssetList: FC<{ case 'omiga_inscription': return ( diff --git a/src/pages/Address/inscription.module.scss b/src/pages/Address/inscription.module.scss new file mode 100644 index 000000000..bb0e1bf36 --- /dev/null +++ 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 index fcbc31af1..866d20616 100644 --- 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.'] ) {