Revert pool overview (#1937)

centrifuge · Feb 6, 2024 · f28c502 · f28c502
1 parent 58d5595
commit f28c502
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 14 deletions.
diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
@@ -2,17 +2,97 @@ import { PoolMetadata } from '@centrifuge/centrifuge-js'
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
 import { Accordion, AnchorButton, Box, Card, Grid, IconExternalLink, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import styled from 'styled-components'
 import { ExecutiveSummaryDialog } from './Dialogs/ExecutiveSummaryDialog'
 import { LabelValueStack } from './LabelValueStack'
-import { PillButton } from './PillButton'
+import { AnchorPillButton, PillButton } from './PillButton'
 import { AnchorTextLink } from './TextLink'
 
 type IssuerSectionProps = {
   metadata: Partial<PoolMetadata> | undefined
 }
 
+
 export function IssuerSection({ metadata }: IssuerSectionProps) {
   const cent = useCentrifuge()
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
+
+  return (
+    <>
+      <Shelf alignItems="flex-start" gap="3" flexDirection={['column', 'row']}>
+        <Stack gap={2}>
+          <Box>
+            {metadata?.pool?.issuer.logo && (
+              <StyledImage src={cent.metadata.parseMetadataUrl(metadata?.pool?.issuer.logo?.uri)} />
+            )}
+          </Box>
+          <Text variant="body2">{metadata?.pool?.issuer.description}</Text>
+        </Stack>
+        <Stack gap="2">
+          {metadata?.pool?.links.executiveSummary && (
+            <LabelValueStack
+              label="Download"
+              value={
+                <>
+                  <PillButton variant="small" onClick={() => setIsDialogOpen(true)}>
+                    Executive summary
+                  </PillButton>
+                  <ExecutiveSummaryDialog
+                    issuerName={metadata?.pool?.issuer.name}
+                    href={cent.metadata.parseMetadataUrl(metadata?.pool?.links.executiveSummary?.uri)}
+                    open={isDialogOpen}
+                    onClose={() => setIsDialogOpen(false)}
+                  />
+                </>
+              }
+            />
+          )}
+
+          {(metadata?.pool?.links.website || metadata?.pool?.links.forum || metadata?.pool?.issuer.email) && (
+            <LabelValueStack
+              label="Links"
+              value={
+                <Stack gap="4px">
+                  {metadata?.pool?.links.website && (
+                    <Shelf>
+                      <AnchorPillButton variant="small" href={metadata?.pool?.links.website}>
+                        Website
+                      </AnchorPillButton>
+                    </Shelf>
+                  )}
+                  {metadata?.pool?.links.forum && (
+                    <Shelf>
+                      <AnchorPillButton variant="small" href={metadata?.pool?.links.forum}>
+                        Forum
+                      </AnchorPillButton>
+                    </Shelf>
+                  )}
+                  {metadata?.pool?.issuer.email && (
+                    <Shelf>
+                      <AnchorPillButton variant="small" href={`mailto:${metadata?.pool?.issuer.email}`}>
+                        Email
+                      </AnchorPillButton>
+                    </Shelf>
+                  )}
+                </Stack>
+              }
+            />
+          )}
+        </Stack>
+      </Shelf>
+      {!!metadata?.pool?.details?.length && <Accordion items={metadata?.pool?.details} mt={4} />}
+    </>
+  )
+}
+
+const StyledImage = styled.img`
+  min-height: 104px;
+  min-width: 100px;
+  max-height: 104px;
+`
+
+export function IssuerSectionNew({ metadata }: IssuerSectionProps) {
+  const cent = useCentrifuge()
 
   const report = metadata?.pool?.reports?.[0]
   return (

diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -15,7 +15,6 @@ import { PageSummary } from '../../../components/PageSummary'
 import { PoolToken } from '../../../components/PoolToken'
 import { Spinner } from '../../../components/Spinner'
 import { Tooltips } from '../../../components/Tooltips'
-import { TrancheTokenCards } from '../../../components/TrancheTokenCards'
 import { Dec } from '../../../utils/Decimal'
 import { formatDate } from '../../../utils/date'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../../utils/formatting'
@@ -126,18 +125,6 @@ export function PoolDetailOverview() {
   return (
     <>
       <PageSummary data={pageSummaryData} />
-      {tokens.length > 0 && (
-        <PageSection>
-          <React.Suspense fallback={<Spinner />}>
-            <TrancheTokenCards
-              trancheTokens={tokens}
-              poolId={poolId}
-              createdAt={pool.createdAt}
-              poolCurrencySymbol={pool.currency.symbol}
-            />
-          </React.Suspense>
-        </PageSection>
-      )}
       {!isTinlakePool && (
         <PageSection title="Pool value, asset value & reserve" titleAddition={formatDate(new Date().toString())}>
           <Stack height="290px">