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.

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

Merged
merged 19 commits into from
Jan 22, 2025
Merged

Prime page - redesign #2554

merged 19 commits into from
Jan 22, 2025

Conversation

kattylucy
Copy link
Collaborator

@kattylucy kattylucy commented Dec 13, 2024

@kattylucy kattylucy force-pushed the 2548_prime_page_redesign branch from b0a325f to 15fba02 Compare December 13, 2024 12:41
Copy link

github-actions bot commented Dec 13, 2024

PR deployed in Google Cloud
URL: https://pr2554-app-ff-production.k-f.dev
Commit #: 779d01c
To access the functions directly check the corresponding deploy Action

Copy link

github-actions bot commented Dec 13, 2024

PR deployed in Google Cloud
URL: https://app-pr2554.k-f.dev
Commit #: 779d01c
To access the functions directly check the corresponding deploy Action

@kattylucy kattylucy force-pushed the 2548_prime_page_redesign branch 2 times, most recently from e6b57e3 to e9f428f Compare January 9, 2025 09:40
@kattylucy kattylucy changed the base branch from main to create_pool January 10, 2025 11:05
@kattylucy kattylucy force-pushed the 2548_prime_page_redesign branch from 55d3be6 to ce03402 Compare January 10, 2025 11:05
@kattylucy kattylucy marked this pull request as ready for review January 14, 2025 16:04
Comment on lines 32 to 54
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>
)
}
Copy link
Collaborator

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?

Copy link
Collaborator

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

Copy link
Collaborator

@sophialittlejohn sophialittlejohn left a 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

  1. 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.
  2. 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.
  3. 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.
  4. Could you look into fixing the awkward space between the top two horizontal lines?
Screenshot 2025-01-17 at 17 03 33

@@ -139,6 +180,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
...token,
tokenPrice: token.tokenPrice.toDecimal() || Dec(0),
showActions,
connectedNetwork: wallet.connectedNetwork,
Copy link
Collaborator

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

centrifuge-app/src/components/Portfolio/Transactions.tsx Outdated Show resolved Hide resolved
centrifuge-app/src/pages/IssuerCreatePool/validate.ts Outdated Show resolved Hide resolved
fabric/src/theme/types.ts Outdated Show resolved Hide resolved
Base automatically changed from create_pool to main January 20, 2025 10:55
@kattylucy kattylucy force-pushed the 2548_prime_page_redesign branch from 0b3c215 to c135d8a Compare January 20, 2025 12:09
@@ -139,6 +180,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
...token,
tokenPrice: token.tokenPrice.toDecimal() || Dec(0),
showActions,
connectedNetwork: token.chainId,
Copy link
Collaborator

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

Comment on lines 298 to 302
headerStyles={{
backgroundColor: 'white',
border: 'transparent',
borderBottom: `1px solid ${theme.colors.backgroundInverted}`,
}}
Copy link
Collaborator

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

@kattylucy kattylucy force-pushed the 2548_prime_page_redesign branch from 29a5d89 to dda5ac5 Compare January 22, 2025 14:08
Copy link
Collaborator

@sophialittlejohn sophialittlejohn left a 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
Copy link
Collaborator

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?

@kattylucy kattylucy merged commit a7df111 into main Jan 22, 2025
14 checks passed
@kattylucy kattylucy deleted the 2548_prime_page_redesign branch January 22, 2025 14:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants