feat: polish balance page

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);
+    }
+}

client/src/app/components/CardInfo.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import CopyButton from "~app/components/CopyButton";
+import Tooltip from "~app/components/Tooltip";
+import "./CardInfo.scss";
+
+export interface CardInfoDetail {
+    title: string;
+    value?: number | string | null;
+    onClickValue?: () => void;
+    showCopyBtn?: boolean;
+}
+
+interface CardInfoProps {
+    /**
+     * The title of the card.
+     */
+    title: string;
+    tooltip?: string;
+    value?: number | string | null;
+    onClickValue?: () => void;
+    showCopyBtn?: boolean;
+    details?: (CardInfoDetail | null)[];
+}
+
+export const CardInfo = ({ details, tooltip, title, value, onClickValue = () => {}, showCopyBtn }: CardInfoProps) => {
+    const detailsFiltered = (details?.filter((i) => i !== null) as CardInfoDetail[]) || [];
+
+    return (
+        <div className="card-info">
+            <div className="card-info--header">
+                <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>
+                {!!value && (
+                    <div className="card-info__value-wrap" onClick={onClickValue}>
+                        <div className="card-info__value">{value}</div>
+                        {isValueNotZero(value) && showCopyBtn && (
+                            <div className="card-info__copy">
+                                <CopyButton copy={String(value)} />
+                            </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.showCopyBtn && (
+                                    <div className="card-info__copy">
+                                        <CopyButton copy={String(detail.value)} />
+                                    </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;
+}

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;
                 }
             }
         }