feat: polish balance page (#1370)

* feat: polish balance page Signed-off-by: Eugene Panteleymonchuk <[email protected]> * fix formatting Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: Polish balance section in address page Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: CardInfo. Rename props, clean code. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat: cover case not show blockIssuanceCredits || manaRewards if null; Signed-off-by: Eugene Panteleymonchuk <[email protected]> * Fix overwriting styles. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * Allow negative value. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * Add units. Show value if zero. Copy base amount. Show total available mana. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * Toggle between units isolated. Signed-off-by: Eugene Panteleymonchuk <[email protected]> --------- Signed-off-by: Eugene Panteleymonchuk <[email protected]> Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Apr 22, 2024 · a0bd434 · a0bd434
1 parent d8a9ece
commit a0bd434
Show file tree

Hide file tree

Showing 5 changed files with 352 additions and 216 deletions.
diff --git a/client/src/app/components/CardInfo.scss b/client/src/app/components/CardInfo.scss
@@ -0,0 +1,87 @@
+@import "../../scss/fonts";
+@import "../../scss/mixins";
+@import "../../scss/media-queries";
+@import "../../scss/variables";
+
+.card-info {
+    width: 100%;
+    background: var(--card-body);
+    border-radius: 6px;
+    padding: 24px;
+    font-family: $inter;
+
+    .card-info__title,
+    .card-info__detail-title {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--card-color);
+    }
+
+    .card-info__value,
+    .card-info__detail-value {
+        cursor: pointer;
+        font-weight: 500;
+        color: var(--body-color);
+    }
+
+    .card-info--header-title {
+        margin-bottom: 6px;
+        display: flex;
+        align-items: center;
+    }
+
+    .card-info--tooltip {
+        margin-left: 6px;
+
+        .material-icons {
+            font-size: 18px;
+            color: #b0bfd9;
+            padding-left: 5px;
+        }
+
+        .tooltip {
+            height: 18px;
+        }
+    }
+
+    .card-info__value-wrap {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+    .card-info__value {
+        font-size: 20px;
+    }
+
+    .card-info__copy {
+        display: flex;
+        align-items: center;
+        margin-left: 6px;
+    }
+
+    .card-info__details-divider {
+        margin-top: 16px;
+        border-top: 1px solid $gray-3;
+    }
+
+    .card-info__details {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .card-info__detail {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .card-info__detail-value {
+        font-size: 12px;
+        display: flex;
+        flex-flow: row nowrap;
+        color: var(--body-color);
+    }
+}
diff --git a/client/src/app/components/CardInfo.tsx b/client/src/app/components/CardInfo.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import CopyButton from "~app/components/CopyButton";
+import Tooltip from "~app/components/Tooltip";
+import classNames from "classnames";
+
+import "./CardInfo.scss";
+
+export interface CardInfoDetail {
+    title: string;
+    value?: number | string | null;
+    onClickValue?: () => void;
+    copyValue?: string;
+}
+
+interface CardInfoProps {
+    /**
+     * The title of the card.
+     */
+    title: string;
+    tooltip?: string;
+    value?: number | string | null;
+    onClickValue?: () => void;
+    copyValue?: string;
+    details?: (CardInfoDetail | null)[];
+    options?: {
+        headerDirectionRow?: boolean;
+    };
+}
+
+export const CardInfo = ({ options, details, tooltip, title, value, onClickValue = () => {}, copyValue }: CardInfoProps) => {
+    const detailsFiltered = (details?.filter((i) => i !== null) as CardInfoDetail[]) || [];
+
+    return (
+        <div className="card-info">
+            <div className={classNames("card-info--header", { "row middle space-between": !!options?.headerDirectionRow })}>
+                <div className="card-info--header-title">
+                    <div className="card-info__title">{title}</div>
+                    {!!tooltip && (
+                        <div className="card-info--tooltip">
+                            <Tooltip tooltipContent={tooltip}>
+                                <span className="material-icons">info</span>
+                            </Tooltip>
+                        </div>
+                    )}
+                </div>
+                <div className="card-info__value-wrap" onClick={onClickValue}>
+                    <div className="card-info__value">{value}</div>
+                    {isValueNotZero(value) && !!copyValue && (
+                        <div className="card-info__copy">
+                            <CopyButton copy={String(copyValue)} />
+                        </div>
+                    )}
+                </div>
+            </div>
+            {!!detailsFiltered.length && (
+                <div className="card-info__details">
+                    <div className="card-info__details-divider"></div>
+                    {detailsFiltered?.map((detail, idx) => (
+                        <div key={idx + detail.title} className="card-info__detail">
+                            <div className="card-info__detail-title">{detail.title}</div>
+                            <div className="card-info__detail-value" onClick={detail.onClickValue}>
+                                {detail.value !== null ? detail.value : "-"}
+                                {isValueNotZero(detail.value) && !!detail.copyValue && (
+                                    <div className="card-info__copy">
+                                        <CopyButton copy={String(detail.copyValue)} />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+function isValueNotZero(value: number | string | null | undefined): boolean {
+    if (typeof value === "number") {
+        return value !== 0;
+    } else if (typeof value === "string") {
+        return parseFloat(value) !== 0;
+    }
+    return false;
+}
diff --git a/client/src/app/components/nova/address/AddressBalance.scss b/client/src/app/components/nova/address/AddressBalance.scss
@@ -1,29 +1,36 @@
 @import "../../../../scss/media-queries";
 
-.balance-wrapper {
+.balance-wrapper.nova {
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+    gap: 24px;
 
     .icon {
         margin-right: 16px;
     }
 
-    .balance-wrapper__inner {
+    .balance-wrapper--row {
         display: flex;
-        flex-direction: column;
-
+        flex-direction: row;
+        gap: 40px;
+        @include tablet-down {
+            flex-direction: column;
+        }
         .balance-wrapper__base-token {
             margin-bottom: 12px;
         }
 
         .balance-wrapper__base-token,
         .balance-wrapper__mana {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
+            gap: 20px;
+            flex: 1;
+
             .balance {
                 display: flex;
                 flex-direction: column;
+                gap: 10px;
 
                 .icon {
                     align-self: center;
@@ -34,8 +41,6 @@
                 }
 
                 &:not(:last-child) {
-                    margin-right: 40px;
-
                     @include tablet-down {
                         margin-right: 0px;
                     }
@@ -60,6 +65,7 @@
                 .balance-fiat {
                     color: #b0bfd9;
                     font-size: 18px;
+                    white-space: nowrap;
                 }
 
                 .balance-heading {
@@ -74,12 +80,8 @@
 
                 .balance__mana {
                     display: flex;
-                    align-items: center;
-                    margin-left: 8px;
-
-                    .value {
-                        margin-left: 4px;
-                    }
+                    flex-direction: column;
+                    margin-left: 0;
                 }
             }
         }