Skip to content

Commit

Permalink
Chore: Polish Nova Output Page (#1318)
Browse files Browse the repository at this point in the history 
* fix: Add mana units to all output mana values

* fix: add commitment id link to metadata

* fix: add link to validator address

* fix: Add link to epoch

* fix: staked amount units

* fix: add style for epoch info

* fix: always display mana

* fix: valueFormat test cases

* fix: Add stopPropagation of click to formatFull on mana for case where mana is displayed on "expandable field"

* fix: Prevent a string type being accidentally 'added' to bigint in manaUtils

* fix: compute delegation id on output page

* fix: move name helper functions for output and features to NameHelper

---------

Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
Co-authored-by: Mario Sarcevic <[email protected]>
  • Loading branch information
@brancoder @begonaalvarezd @msarcev
3 people authored Mar 27, 2024
1 parent 73518a8 commit 9f655ee
Show file tree
Hide file tree
Showing 11 changed files with 346 additions and 164 deletions.
89 changes: 44 additions & 45 deletions .../src/app/components/nova/FeaturesView.tsx → ...t/src/app/components/nova/FeatureView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ import classNames from "classnames";
import React, { useState } from "react";
import AddressView from "./address/AddressView";
import DropdownIcon from "~assets/dropdown-arrow.svg?react";
import DataToggle from "../DataToggle";
import DataToggle from "~/app/components/DataToggle";
import { useNetworkInfoNova } from "~/helpers/nova/networkInfo";
import { formatAmount } from "~/helpers/stardust/valueFormatHelper";
import TruncatedId from "~/app/components/stardust/TruncatedId";
import Tooltip from "~/app/components/Tooltip";
import { EPOCH_HINT } from "./OutputView";
import { NameHelper } from "~/helpers/nova/nameHelper";

interface FeatureViewProps {
/**
Expand All @@ -34,6 +40,7 @@ interface FeatureViewProps {
}

const FeatureView: React.FC<FeatureViewProps> = ({ feature, isImmutable, isPreExpanded }) => {
const { name: network, tokenInfo, manaInfo } = useNetworkInfoNova((s) => s.networkInfo);
const [isExpanded, setIsExpanded] = useState<boolean>(isPreExpanded ?? false);

return (
Expand All @@ -42,7 +49,7 @@ const FeatureView: React.FC<FeatureViewProps> = ({ feature, isImmutable, isPreEx
<div className={classNames("margin-r-t", "card--content--dropdown", { opened: isExpanded })}>
<DropdownIcon />
</div>
<div className="card--label">{getFeatureTypeName(feature.type, isImmutable)}</div>
<div className="card--label">{NameHelper.getFeatureTypeName(feature.type, isImmutable)}</div>
</div>
{isExpanded && (
<div className="padding-l-t left-border">
Expand All @@ -52,8 +59,8 @@ const FeatureView: React.FC<FeatureViewProps> = ({ feature, isImmutable, isPreEx
<div className="card--value row">
{Object.entries((feature as MetadataFeature).entries).map(([key, value], index) => (
<div key={index}>
<div className="label margin-t-m">{key}</div>
<div className="value row middle margin-t-t">
<div className="card--label">{key}:</div>
<div className="card--value row middle margin-t-t">
<DataToggle sourceData={value} withSpacedHex={true} />
</div>
</div>
Expand Down Expand Up @@ -89,13 +96,42 @@ const FeatureView: React.FC<FeatureViewProps> = ({ feature, isImmutable, isPreEx
{feature.type === FeatureType.Staking && (
<div className="padding-l-t left-border">
<div className="card--label">Staked amount:</div>
<div className="card--value row">{Number((feature as StakingFeature).stakedAmount)}</div>
<div className="card--value row">
{formatAmount((feature as StakingFeature).stakedAmount, tokenInfo, false)}
</div>
<div className="card--label">Fixed cost:</div>
<div className="card--value row">{Number((feature as StakingFeature).fixedCost)}</div>
<div className="card--value row">{formatAmount((feature as StakingFeature).fixedCost, manaInfo, false)}</div>
<div className="card--label">Start epoch:</div>
<div className="card--value row">{Number((feature as StakingFeature).startEpoch)}</div>
<div className="card--value row">
<TruncatedId
id={String((feature as StakingFeature).startEpoch)}
link={
(feature as StakingFeature).startEpoch === 0
? undefined
: `/${network}/epoch/${(feature as StakingFeature).startEpoch}`
}
showCopyButton={false}
/>
</div>
<div className="card--label">End epoch:</div>
<div className="card--value row">{Number((feature as StakingFeature).endEpoch)}</div>
<div className="card--value row epoch-info epoch-info--above">
<TruncatedId
id={String((feature as StakingFeature).endEpoch)}
link={
(feature as StakingFeature).endEpoch === 0
? undefined
: `/${network}/epoch/${(feature as StakingFeature).endEpoch}`
}
showCopyButton={false}
/>
{(feature as StakingFeature).endEpoch === 0 && (
<Tooltip tooltipContent={EPOCH_HINT}>
<div className="modal--icon margin-t-2">
<span className="material-icons">info</span>
</div>
</Tooltip>
)}
</div>
</div>
)}
</div>
Expand All @@ -104,41 +140,4 @@ const FeatureView: React.FC<FeatureViewProps> = ({ feature, isImmutable, isPreEx
);
};

function getFeatureTypeName(type: FeatureType, isImmutable: boolean): string {
let name: string = "";

switch (type) {
case FeatureType.Sender:
name = "Sender";
break;
case FeatureType.Issuer:
name = "Issuer";
break;
case FeatureType.Metadata:
name = "Metadata";
break;
case FeatureType.StateMetadata:
name = "State Metadata";
break;
case FeatureType.Tag:
name = "Tag";
break;
case FeatureType.NativeToken:
name = "Native Token";
break;
case FeatureType.BlockIssuer:
name = "Block Issuer";
break;
case FeatureType.Staking:
name = "Staking";
break;
}

if (name) {
return isImmutable ? `Immutable ${name}` : name;
}

return "Unknown Feature";
}

export default FeatureView;
161 changes: 96 additions & 65 deletions client/src/app/components/nova/OutputView.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,100 +3,131 @@
@import "../../../scss/mixins";
@import "../../../scss/fonts";

.card--content__output {
padding: 0 30px;
margin-bottom: 20px;
.output-page {
.card--content__output {
padding: 0 30px;
margin-bottom: 20px;

@include phone-down {
padding: 0 4px;
}

.card--value.card-header--wrapper {
width: 100%;
display: flex;
margin-bottom: 0px;
height: 32px;
align-items: center;
@include phone-down {
padding: 0 4px;
}

.output-header {
display: flex;
.card--value.card-header--wrapper {
width: 100%;
display: flex;
margin-bottom: 0px;
height: 32px;
align-items: center;

.output-type--name {
white-space: nowrap;
}

.output-id--link {
.output-header {
display: flex;
margin-right: 2px;
white-space: nowrap;
width: 100%;

a {
margin-right: 0px;
.output-type--name {
white-space: nowrap;
}

.highlight {
font-weight: 500;
color: $gray-6;
margin-left: 2px;
.output-id--link {
display: flex;
margin-right: 2px;
white-space: nowrap;

a {
margin-right: 0px;
}

.highlight {
font-weight: 500;
color: $gray-6;
margin-left: 2px;
}

.copy-button {
margin-left: 2px;
}
}
}

.copy-button {
margin-left: 2px;
.amount-size {
width: min-content;
text-align: end;
word-break: normal;
white-space: nowrap;
cursor: pointer;
margin-bottom: 0;
margin-right: 4px;

span {
word-break: keep-all;
}
}
}

.amount-size {
width: min-content;
text-align: end;
word-break: normal;
white-space: nowrap;
cursor: pointer;
margin-bottom: 0;
margin-right: 4px;

span {
word-break: keep-all;
.unlock-condition-icon {
color: #fec900;
font-size: 18px;

&.expired {
color: #ff4800;
}
}
}

.unlock-condition-icon {
color: #fec900;
font-size: 18px;
@media (min-width: #{768px}) and (max-width: #{820px}) {
display: none;
}

&.expired {
color: #ff4800;
@include phone-down {
display: none;
}
}

@media (min-width: #{768px}) and (max-width: #{820px}) {
display: none;
.left-border {
border-left: 1px solid var(--border-color);
}
}

@include phone-down {
display: none;
.card--content--dropdown {
margin-right: 8px;
cursor: pointer;

svg {
transition: transform 0.25s ease;

path {
fill: var(--card-color);
}
}
}

.left-border {
border-left: 1px solid var(--border-color);
&.opened > svg {
transform: rotate(90deg);
}
}
}

.card--content--dropdown {
margin-right: 8px;
cursor: pointer;

svg {
transition: transform 0.25s ease;
.epoch-info {
.material-icons {
margin-top: 6px;
padding-left: 5px;
font-size: 18px;
color: #b0bfd9;
}

path {
fill: var(--card-color);
.tooltip .wrap {
width: 230px !important;
.arrow {
left: 8px !important;
margin-left: 0 !important;
&--down {
top: 95%;
}
}
}

&.opened > svg {
transform: rotate(90deg);
&--above {
.tooltip .wrap {
top: -416%;
.arrow {
top: 94%;
}
}
}
}
Loading

0 comments on commit 9f655ee

Please sign in to comment.