Prime page - redesign #2554
Prime page - redesign #2554
Conversation
kattylucy
force-pushed
the
2548_prime_page_redesign
branch
from
b0a325f to
15fba02
Compare
|
PR deployed in Google Cloud |
|
PR deployed in Google Cloud |
kattylucy
force-pushed
the
2548_prime_page_redesign
branch
2 times, most recently
from
e6b57e3 to
e9f428f
Compare
kattylucy
force-pushed
the
2548_prime_page_redesign
branch
from
55d3be6 to
ce03402
Compare
kattylucy
force-pushed
the
create_pool
branch
from
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.
I think this would fit well into fabric, maybe pass the RouterLinkButton as a prop?
There was a problem hiding this comment.
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?
| @@ -39,86 +32,45 @@ export function CardPortfolioValue({ | |||
|
|
|||
| const { colors } = useTheme() | |||
|
|
|||
| const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' }) | |||
There was a problem hiding this comment.
Any reason for removing the types? Probs best to keep them
There was a problem hiding this comment.
To make it work you could improve the types of getRangeNumber()
| @@ -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.
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
}
}
}
}| @@ -41,8 +31,11 @@ type Row = { | |||
| network: Network | |||
| } | |||
|
|
|||
| export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) { | |||
| export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId, title }: TransactionsProps) { | |||
| const navigate = useNavigate() | |||
| @@ -114,6 +114,17 @@ export const validateValues = (values: CreatePoolValues) => { | |||
| }) | |||
| } | |||
|
|
|||
| if (values.issuerCategories.length > 1) { | |||
| values.issuerCategories.forEach((category, i) => { | |||
| if (category.type == '') { | |||
There was a problem hiding this comment.
this and the ones below should be fixed!
| @@ -27,7 +27,8 @@ type BackgroundColorName = `background${ | |||
| | 'Thumbnail' | |||
| | 'AccentPrimary' | |||
| | 'AccentSecondary' | |||
| | 'Inverted'}` | |||
| | 'Inverted' | |||
| | 'Light'}` | |||
There was a problem hiding this comment.
It looks like you meant to add a new color to the border colors instead of background? Also any chance you could update either primary or secondary of the existing border colors instead of adding a new one? Light doesn't really fit into our naming semantics as the colors are typically defined with how they're used rather than what they are
kattylucy
force-pushed
the
2548_prime_page_redesign
branch
from
0b3c215 to
c135d8a
Compare
Redesign prime page
https://www.figma.com/design/ng7qdNcSCXSDA6ZUdWIs6u/Pool-Overview%2F-Pool-Detail?node-id=4229-28053&p=f&t=8l0I5rUdl6HZZynm-0
#2548