-
Notifications
You must be signed in to change notification settings - Fork 18
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.
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
Prime page - redesign #2554
Prime page - redesign #2554
Conversation
b0a325f
to
15fba02
Compare
PR deployed in Google Cloud |
PR deployed in Google Cloud |
e6b57e3
to
e9f428f
Compare
55d3be6
to
ce03402
Compare
cad39e3
to
7bd3ad4
Compare
export const BackButton = ({ | ||
to, | ||
children, | ||
label, | ||
align, | ||
}: { | ||
to: string | ||
children?: ReactNode | ||
label: string | ||
align?: string | ||
}) => { | ||
return ( | ||
<Box display="flex" alignItems="center" width="55%" justifyContent={align || 'space-between'} mt={15} mb={24}> | ||
<StyledRouterLinkButton to={to} small icon={<IconArrowLeft />} variant="tertiary" /> | ||
<Box display="flex" alignItems="center"> | ||
<Text variant="heading1" style={{ marginRight: 8 }}> | ||
{label} | ||
</Text> | ||
{children} | ||
</Box> | ||
</Box> | ||
) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this would fit well into fabric, maybe pass the RouterLinkButton
as a prop?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also saw this type of back arrow used on the asset detail page, please make sure they're using the same base component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job! I left a few comments for improvements for the code. And also have a few improvement suggestions for the chart
- y-axis labels: the values and their precision should depend on the how big the gaps are in between. If you look at the 30 days filter the values appear to be too close together.
- x-axis labels: also here we should define the label differently depending on how large the filtered dataset is. For 30 days I think we should label every day, for 90 days possibly every 3rd, anything bigger just display the month. If the data set is only 30 days total but the filter is set to 90 days, it should still show every day on the x-axis label.
- The chart fills in after the page has loaded, we should find a more elegant solution than letting the content jump. Reserving the space in advance is an option, also figuring out how to load the chart in advance could be an option.
- Could you look into fixing the awkward space between the top two horizontal lines?
@@ -139,6 +180,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr | |||
...token, | |||
tokenPrice: token.tokenPrice.toDecimal() || Dec(0), | |||
showActions, | |||
connectedNetwork: wallet.connectedNetwork, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
connectedNetwork
would just be the network the current user is connected to, I think the intention here is to show the network on which the tokens are held.
I'm not 100% sure but I would think you can grab the chain id from the account that holds the balance. You would have to extend the first part of the gql trancheBalances
like this:
trancheBalances {
nodes {
claimableCurrency
claimableTrancheTokens
pendingInvestCurrency
pendingRedeemTrancheTokens
sumClaimedCurrency
sumClaimedTrancheTokens
trancheId
account { # add this line
chainId # add this line
} # add this line
poolId
tranche {
tokenPrice
blockchainId
}
pool {
currency {
decimals
}
}
}
}
0b3c215
to
c135d8a
Compare
@@ -139,6 +180,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr | |||
...token, | |||
tokenPrice: token.tokenPrice.toDecimal() || Dec(0), | |||
showActions, | |||
connectedNetwork: token.chainId, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks better! Now I think you just need to update the name connectedNetwork
to chainId
headerStyles={{ | ||
backgroundColor: 'white', | ||
border: 'transparent', | ||
borderBottom: `1px solid ${theme.colors.backgroundInverted}`, | ||
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm starting to see these table styles more often. I think we should refactor this usage (and all other overwriting of the headerstyles) into a table variant
29a5d89
to
dda5ac5
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚢 🚢 🚢
realizedProfit?: CurrencyBalance | ||
unrealizedProfit?: CurrencyBalance | ||
yieldSinceInception?: Perquintill | null | ||
connectedNetwork?: any |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oops, probs meant to remove this?
Redesign prime page
https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u/Pool-Overview%2F-Pool-Detail?node-id=4229-28053&p=f&t=8l0I5rUdl6HZZynm-0
#2548