UI/UX fixes

centrifuge · Oct 15, 2024 · 2d73af5 · 2d73af5
1 parent 2155682
commit 2d73af5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 28 deletions.
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -182,7 +182,7 @@ function Header({ sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPric
           </Shelf>
         </Stack>
       )}
-      <Box display="flex" justifyContent="space-between" width="50%">
+      <Box display="flex">
         <Stack>
           <TextWithPlaceholder variant="body3" color="textSecondary">
             Realized P&L
@@ -202,11 +202,11 @@ function Header({ sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPric
             </TextWithPlaceholder>
           </Shelf>
         </Stack>
-        <Stack>
+        <Stack marginLeft="20px">
           <TextWithPlaceholder variant="body3" color="textSecondary">
             Unrealized P&L
           </TextWithPlaceholder>
-          <Shelf gap={'3px'}>
+          <Shelf gap="3px">
             <TextWithPlaceholder
               variant="heading2"
               fontWeight="bold"

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemCentrifugeProvider.tsx
@@ -24,6 +24,7 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
   const { data: metadata, isLoading: isMetadataLoading } = usePoolMetadata(pool)
   const trancheMeta = metadata?.tranches?.[trancheId]
   const liquidityState = useLiquidityRewards().state
+  const [isStableLoading, setIsStableLoading] = React.useState(true)
 
   if (!tranche) throw new Error(`Token not found. Pool id: ${poolId}, token id: ${trancheId}`)
 
@@ -81,10 +82,26 @@ export function InvestRedeemCentrifugeProvider({ poolId, trancheId, children }:
     }, [pendingTransaction?.status])
   }
 
+  const isDataLoading = React.useMemo(() => {
+    return balances === null || order === null || isMetadataLoading
+  }, [balances, order, isMetadataLoading])
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (isDataLoading) {
+        setIsStableLoading(true)
+      } else {
+        setIsStableLoading(false)
+      }
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [isDataLoading])
+
   const state: InvestRedeemState = {
     poolId,
     trancheId,
-    isDataLoading: balances == null || order == null || isMetadataLoading,
+    isDataLoading: isStableLoading,
     isAllowedToInvest,
     isPoolBusy: isCalculatingOrders,
     isFirstInvestment: order?.submittedAt === 0 && order.investCurrency.isZero(),

diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -156,35 +156,44 @@ export function InvestButton(props: InvestRedeemProps) {
   const connectAndOpen = useConnectBeforeAction(() => setOpen(true))
   const { connectedType, showNetworks } = useWallet()
 
+  const getButtonText = (state: any) => {
+    if (!state.isAllowedToInvest && connectedType !== null) {
+      return 'Onboard'
+    } else if (connectedType === null) {
+      return 'Connect'
+    } else {
+      return state.isFirstInvestment ? 'Invest' : 'Invest/Redeem'
+    }
+  }
+
   return (
     <>
       <InvestRedeemDrawer open={open} onClose={() => setOpen(false)} {...props} />
       <InvestRedeemProvider poolId={poolId} trancheId={trancheId}>
         <InvestRedeemContext.Consumer>
           {({ state }) => {
-            if (!state.isAllowedToInvest && connectedType !== null) {
-              return (
-                <Button onClick={() => window.open(metadata?.onboarding?.externalOnboardingUrl)} variant="primary">
-                  Onboard
-                </Button>
-              )
-            } else if (connectedType === null) {
-              return (
-                <Button onClick={() => showNetworks()} variant="primary">
-                  Connect
-                </Button>
-              )
-            } else {
-              return (
-                <Button
-                  aria-label={`Invest in ${props.trancheId}`}
-                  onClick={() => connectAndOpen()}
-                  style={{ marginLeft: 'auto', width: '120px' }}
-                >
-                  {state.isFirstInvestment ? 'Invest' : 'Invest/Redeem'}
-                </Button>
-              )
-            }
+            if (!state) return
+            const isLoading = state?.isDataLoading
+
+            const buttonText = getButtonText(state)
+
+            return (
+              <Button
+                onClick={() => {
+                  if (!state.isAllowedToInvest && connectedType !== null) {
+                    window.open(metadata?.onboarding?.externalOnboardingUrl)
+                  } else if (connectedType === null) {
+                    showNetworks()
+                  } else {
+                    connectAndOpen()
+                  }
+                }}
+                variant="primary"
+                loading={isLoading}
+              >
+                {buttonText}
+              </Button>
+            )
           }}
         </InvestRedeemContext.Consumer>
       </InvestRedeemProvider>

diff --git a/fabric/src/components/Tabs/index.tsx b/fabric/src/components/Tabs/index.tsx
@@ -50,7 +50,6 @@ const StyledTabsItem = styled.button<{
     background: 'transparent',
   },
   ({ $active, theme, styleOverrides, showBorder, variant }) => {
-    console.log(variant)
     return css({
       paddingTop: 1,
       paddingLeft: 2,