Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add mana balance to address pages #1206

Merged
merged 6 commits into from
Mar 4, 2024
Merged

feat: Add mana balance to address pages #1206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
49d7fef
feat: Add mana balance to AddressBalance component. Add mana balance …
msarcev Mar 1, 2024
a91519f
feat: Add blockIssuanceCredits to AddressBalance
msarcev Mar 1, 2024
0fa7393
feat: Add mana rewards to Account address AddressBalance
msarcev Mar 1, 2024
71d9b13
feat: Add mana from the actual output for Account/Anchor/Nft addresse…
msarcev Mar 1, 2024
35a939e
fix: Remove mana rewards for Anchor & Nft addresses
msarcev Mar 4, 2024
f608d22
fix: Make balances be column on mobile in AddressBalance
msarcev Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions client/src/app/components/nova/address/AccountAddressView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
105 changes: 64 additions & 41 deletions client/src/app/components/nova/address/AddressBalance.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Expand Down
Loading
Loading