feat: Add mana balance to address pages (#1206)

* feat: Add mana balance to AddressBalance component. Add mana balance in useAddressBalance state. * feat: Add blockIssuanceCredits to AddressBalance * feat: Add mana rewards to Account address AddressBalance * feat: Add mana from the actual output for Account/Anchor/Nft addresses to Mana Balance * fix: Remove mana rewards for Anchor & Nft addresses * fix: Make balances be column on mobile in AddressBalance
iotaledger · Mar 4, 2024 · 918b97b · 918b97b
1 parent f048bb8
commit 918b97b
Show file tree

Hide file tree

Showing 17 changed files with 534 additions and 196 deletions.
diff --git a/client/src/app/components/nova/address/AccountAddressView.tsx b/client/src/app/components/nova/address/AccountAddressView.tsx
@@ -12,7 +12,17 @@ interface AccountAddressViewProps {
 
 const AccountAddressView: React.FC<AccountAddressViewProps> = ({ accountAddress }) => {
     const [state, setState] = useAccountAddressState(accountAddress);
-    const { addressDetails, totalBalance, availableBalance, isAccountDetailsLoading, isAssociatedOutputsLoading } = state;
+    const {
+        addressDetails,
+        totalBaseTokenBalance,
+        availableBaseTokenBalance,
+        totalManaBalance,
+        availableManaBalance,
+        congestion,
+        manaRewards,
+        isAccountDetailsLoading,
+        isAssociatedOutputsLoading,
+    } = state;
     const isPageLoading = isAccountDetailsLoading || isAssociatedOutputsLoading;
 
     return (
@@ -35,13 +45,14 @@ const AccountAddressView: React.FC<AccountAddressViewProps> = ({ accountAddress
                             <div className="general-content">
                                 <div className="section--data">
                                     <Bech32Address addressDetails={addressDetails} advancedMode={true} />
-                                    {totalBalance !== null && (
-                                        <AddressBalance
-                                            totalBalance={totalBalance}
-                                            availableBalance={availableBalance}
-                                            storageDeposit={null}
-                                        />
-                                    )}
+                                    <AddressBalance
+                                        totalBaseTokenBalance={totalBaseTokenBalance}
+                                        availableBaseTokenBalance={availableBaseTokenBalance}
+                                        totalManaBalance={totalManaBalance}
+                                        availableManaBalance={availableManaBalance}
+                                        blockIssuanceCredits={congestion?.blockIssuanceCredits}
+                                        manaRewards={manaRewards?.rewards}
+                                    />
                                 </div>
                             </div>
                         </div>

diff --git a/client/src/app/components/nova/address/AddressBalance.scss b/client/src/app/components/nova/address/AddressBalance.scss
@@ -1,75 +1,98 @@
 @import "../../../../scss/media-queries";
 
 .balance-wrapper {
-    margin-top: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     .icon {
         margin-right: 16px;
     }
 
-    .balance-wrapper--inner {
+    .balance-wrapper__inner {
         display: flex;
+        flex-direction: column;
 
-        .balance {
+        .balance-wrapper__base-token {
+            margin-bottom: 12px;
+        }
+
+        .balance-wrapper__base-token,
+        .balance-wrapper__mana {
             display: flex;
             flex-direction: row;
+            .balance {
+                display: flex;
+                flex-direction: column;
 
-            .icon {
-                align-self: center;
+                .icon {
+                    align-self: center;
 
-                @include tablet-down {
-                    display: none;
+                    @include tablet-down {
+                        display: none;
+                    }
                 }
-            }
 
-            &:not(:last-child) {
-                margin-right: 40px;
+                &:not(:last-child) {
+                    margin-right: 40px;
 
-                @include tablet-down {
-                    margin-right: 0px;
+                    @include tablet-down {
+                        margin-right: 0px;
+                    }
                 }
-            }
-
-            .balance-value {
-                display: flex;
-                flex-direction: column;
 
-                @include tablet-down {
-                    flex-direction: row;
-                }
+                .balance-value {
+                    display: flex;
+                    flex-direction: column;
 
-                .balance-value--inline {
                     @include tablet-down {
-                        margin-left: 5px;
+                        flex-direction: row;
+                    }
+
+                    .balance-value--inline {
+                        @include tablet-down {
+                            margin-left: 5px;
+                        }
                     }
                 }
-            }
 
-            .balance-base-token,
-            .balance-fiat {
-                color: #b0bfd9;
-                font-size: 18px;
-            }
+                .balance-base-token,
+                .balance-fiat {
+                    color: #b0bfd9;
+                    font-size: 18px;
+                }
 
-            .balance-heading {
-                height: 20px;
+                .balance-heading {
+                    height: 20px;
 
-                .material-icons {
-                    font-size: 18px;
-                    color: #b0bfd9;
-                    padding-left: 5px;
+                    .material-icons {
+                        font-size: 18px;
+                        color: #b0bfd9;
+                        padding-left: 5px;
+                    }
+                }
+
+                .balance__mana {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 8px;
+
+                    .value {
+                        margin-left: 4px;
+                    }
                 }
             }
         }
-    }
 
-    @include tablet-down {
-        .balance-wrapper--inner {
-            flex-direction: column;
+        @include tablet-down {
+            .balance-wrapper__base-token,
+            .balance-wrapper__mana {
+                flex-direction: column;
 
-            .balance {
-                &:not(:first-child) {
-                    margin-top: 26px;
+                .balance {
+                    &:not(:first-child) {
+                        margin-top: 8px;
+                    }
                 }
             }
         }