feat(tinlake-ui): fix tin ratio bar flickering, add pool titles, add loan empty state

tinlake-ui/components/Loan/List/index.tsx

@@ -29,69 +29,74 @@ class LoanList extends React.Component<Props> {
     const { loans } = this.props
     return (
       <Box pad="medium" elevation="small" round="xsmall" margin={{ bottom: 'medium' }} background="white">
-        <DataTable
-          style={{ tableLayout: 'auto' }}
-          data={loans}
-          sort={{ direction: 'desc', property: 'loanId' }}
-          pad="xsmall"
-          sortable
-          onClickRow={this.clickRow as any}
-          columns={[
-            { header: <HeaderCell text={'Asset ID'}></HeaderCell>, property: 'loanId', align: 'end' },
-            {
-              header: 'NFT ID',
-              primary: true,
-              property: 'tokenId',
-              align: 'end',
-              render: (l: SortableLoan) => (
-                <Box style={{ maxWidth: '150px' }}>
-                  <DisplayField as={'span'} value={hexToInt(bnToHex(l.tokenId).toString())} />
-                </Box>
-              ),
-            },
-            {
-              header: 'Outstanding (DAI)',
-              property: 'debtNum',
-              align: 'end',
-              render: (l: SortableLoan) => <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.debt, 18)} />,
-            },
-            {
-              header: 'Available for Financing (DAI)',
-              property: 'principalNum',
-              align: 'end',
-              render: (l: SortableLoan) => (
-                <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.principal, 18)} />
-              ),
-            },
-            {
-              header: <HeaderCell text={'Financing Fee'}></HeaderCell>,
-              property: 'interestRateNum',
-              align: 'end',
-              render: (l: SortableLoan) =>
-                l.status === 'Repaid' ? (
-                  '-'
-                ) : (
-                  <NumberDisplay suffix=" %" precision={2} value={feeToInterestRate(l.interestRate)} />
+        {loans.length > 0 && (
+          <DataTable
+            style={{ tableLayout: 'auto' }}
+            data={loans}
+            sort={{ direction: 'desc', property: 'loanId' }}
+            pad="xsmall"
+            sortable
+            onClickRow={this.clickRow as any}
+            columns={[
+              { header: <HeaderCell text={'Asset ID'}></HeaderCell>, property: 'loanId', align: 'end' },
+              {
+                header: 'NFT ID',
+                primary: true,
+                property: 'tokenId',
+                align: 'end',
+                render: (l: SortableLoan) => (
+                  <Box style={{ maxWidth: '150px' }}>
+                    <DisplayField as={'span'} value={hexToInt(bnToHex(l.tokenId).toString())} />
+                  </Box>
                 ),
-            },
-            {
-              header: 'Status',
-              property: 'status',
-              align: 'end',
-              render: (l: SortableLoan) => l.status,
-            },
-            {
-              header: '',
-              property: 'id',
-              align: 'center',
-              sortable: false,
-              size: '36px',
-              render: (_l: SortableLoan) => {
-                return <ChevronRight />
               },
-            },
-          ]}
-        />
+              {
+                header: 'Outstanding (DAI)',
+                property: 'debtNum',
+                align: 'end',
+                render: (l: SortableLoan) => (
+                  <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.debt, 18)} />
+                ),
+              },
+              {
+                header: 'Available for Financing (DAI)',
+                property: 'principalNum',
+                align: 'end',
+                render: (l: SortableLoan) => (
+                  <NumberDisplay suffix="" precision={0} value={baseToDisplay(l.principal, 18)} />
+                ),
+              },
+              {
+                header: <HeaderCell text={'Financing Fee'}></HeaderCell>,
+                property: 'interestRateNum',
+                align: 'end',
+                render: (l: SortableLoan) =>
+                  l.status === 'Repaid' ? (
+                    '-'
+                  ) : (
+                    <NumberDisplay suffix=" %" precision={2} value={feeToInterestRate(l.interestRate)} />
+                  ),
+              },
+              {
+                header: 'Status',
+                property: 'status',
+                align: 'end',
+                render: (l: SortableLoan) => l.status,
+              },
+              {
+                header: '',
+                property: 'id',
+                align: 'center',
+                sortable: false,
+                size: '36px',
+                render: (_l: SortableLoan) => {
+                  return <ChevronRight />
+                },
+              },
+            ]}
+          />
+        )}
+        {loans.length === 0 && <Text>No assets have been originated.</Text>}
       </Box>
     )
   }

tinlake-ui/components/OnboardModal/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import config, { Pool, UpcomingPool } from '../../config'
-import { AuthState, ensureAuthed } from '../../ducks/auth'
+import { ensureAuthed } from '../../ducks/auth'
 import { PoolData as PoolDataV3, PoolState } from '../../ducks/pool'
 import { PoolsState } from '../../ducks/pools'
 import { PoolLink } from '../PoolLink'
@@ -25,7 +25,6 @@ const OnboardModal: React.FC<Props> = (props: Props) => {
   const router = useRouter()
   const dispatch = useDispatch()
 
-  const authState = useSelector<any, AuthState>((state) => state.auth)
   const pools = useSelector<any, PoolsState>((state) => state.pools)
   const pool = useSelector<any, PoolState>((state) => state.pool)
   const poolData = pool?.data as PoolDataV3 | undefined
@@ -90,10 +89,6 @@ const OnboardModal: React.FC<Props> = (props: Props) => {
     getOnboardingStatus()
   }, [pools])
 
-  React.useEffect(() => {
-    console.log(authState.authState)
-  }, [authState.authState])
-
   return (
     <>
       {(poolData?.senior?.inMemberlist || poolData?.junior?.inMemberlist) && (

tinlake-ui/components/Overview/index.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import InvestAction from '../../components/InvestAction'
 import OnboardModal from '../../components/OnboardModal'
 import { PoolLink } from '../../components/PoolLink'
+import PoolTitle from '../../components/PoolTitle'
 import config, { Pool, UpcomingPool } from '../../config'
 import InvestmentOverview from '../../containers/Investment/View/InvestmentOverview'
 import { PoolState } from '../../ducks/pool'
@@ -21,7 +22,7 @@ const Overview: React.FC<Props> = (props: Props) => {
     <Box margin={{ bottom: 'large', top: 'medium' }}>
       {!isUpcoming && (
         <>
-          <Heading level="4">Pool Overview of {props.selectedPool.metadata.name} </Heading>
+          <PoolTitle pool={props.selectedPool} page="Pool Overview" />
           <InvestmentOverview selectedPool={props.selectedPool} tinlake={props.tinlake} />
         </>
       )}

tinlake-ui/components/PoolTitle/index.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { Pool, UpcomingPool } from '../../config'
+
+interface Props {
+  pool: Pool | UpcomingPool
+  page: string
+}
+
+const PoolTitle: React.FC<Props> = (props: Props) => {
+  return (
+    <Wrapper>
+      <Icon
+        src={
+          props.pool.metadata.media?.icon || 'https://storage.googleapis.com/tinlake/pool-media/icon-placeholder.svg'
+        }
+      />
+      <PageTitle>
+        <PageName>{props.page}</PageName>
+        <PoolName>{props.pool.metadata.name}</PoolName>
+      </PageTitle>
+    </Wrapper>
+  )
+}
+
+export default PoolTitle
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 12px 0 36px 8px;
+`
+
+const Icon = styled.img`
+  width: 40px;
+  height: 40px;
+  margin: 4px 16px 0 0;
+`
+
+const PageTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const PageName = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  margin: 0;
+`
+
+const PoolName = styled.h2`
+  font-size: 13px;
+  font-weight: bold;
+  margin: 0;
+  color: #979797;
+`

tinlake-ui/components/TINRatioBar/index.tsx

@@ -61,13 +61,6 @@ export const TINRatioBar: React.FC<Props> = (props: Props) => {
       const newSegments = [...minSegments, ...maxSegments]
 
       setSegments(newSegments)
-    } else {
-      setSegments([
-        {
-          width: 100,
-          backgroundColor: '#D8D8D8',
-        },
-      ])
     }
   }, [props.min, props.current, props.max])
 

tinlake-ui/components/TinlakeExplainer/index.tsx

@@ -1,4 +1,4 @@
-import { Anchor } from 'grommet'
+import { Box, Button } from 'grommet'
 import { FormDown } from 'grommet-icons'
 import * as React from 'react'
 import { Btn, Caret, Container, Primer, Row, Text } from './styles'
@@ -27,12 +27,17 @@ const TinlakeExplainer: React.FC = () => {
           tokenized real-world assets such as invoices, mortgages or streaming royalties. Tinlake’s smart contract
           platform coordinates the different parties required to structure, administer and finance collateralized pools
           of these real-world assets.
-          <Anchor
-            margin={{ left: 'xsmall', top: 'small' }}
-            href="https://centrifuge.io/products/tinlake/"
-            target="_blank"
-            label="Learn more"
-          />
+          <Box justify="center">
+            <Box margin={{ bottom: 'small', left: 'auto', right: 'auto' }}>
+              <Button
+                primary
+                label="Read more about Tinlake"
+                href="https://centrifuge.io/products/tinlake/"
+                target="_blank"
+                fill={false}
+              />
+            </Box>
+          </Box>
         </Text>
       )}
     </Container>

tinlake-ui/components/Tooltip/index.tsx

@@ -7,6 +7,22 @@ interface Props {
   children: React.ReactNode
 }
 
+// TODO: this is an experiment for better indicating tooltips, but should be improved upon at a later time
+// const Wrapper = styled.div`
+//   &:hover {
+//     &::after {
+//       content: ' ?';
+//       margin-left: 8px;
+//       background: rgba(0, 0, 0, 0.8);
+//       color: #fff;
+//       padding: 3px 7px 3px 4px;
+//       font-weight: bold;
+//       border-radius: 100%;
+//       font-size: 12px;
+//     }
+//   }
+// `
+
 export const Tooltip: React.FC<Props> = (props: Props) => {
   return props.id in tooltips ? (
     <AxisTooltip

tinlake-ui/containers/Investment/View/EpochOverview.tsx

@@ -42,27 +42,18 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
 
   const isAdmin = props.auth?.permissions?.canSetMinimumJuniorRatio
 
-  const [open, setOpen] = React.useState(true)
+  const [open, setOpen] = React.useState(false)
 
   return (
-    <>
+    <Box background="#eee" pad={{ horizontal: '34px', bottom: 'xsmall' }} round="xsmall" margin={{ bottom: 'medium' }}>
       <Heading level="4" onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }}>
-        Show Epoch Details
+        Epoch Details
         <Caret>
           <FormDown style={{ transform: open ? 'rotate(-180deg)' : '' }} />
         </Caret>
       </Heading>
       {open && (
-        <Box
-          direction="row"
-          justify="between"
-          gap="medium"
-          elevation="small"
-          round="xsmall"
-          pad="medium"
-          background="white"
-          margin={{ bottom: 'medium' }}
-        >
+        <Box direction="row" justify="between" margin={{ bottom: 'medium' }}>
           <Box width="420px" margin={{ bottom: 'medium' }}>
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
@@ -288,7 +279,7 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
           </Box>
         </Box>
       )}
-    </>
+    </Box>
   )
 }
 

tinlake-ui/containers/Investment/View/InvestmentOverview.tsx

@@ -57,6 +57,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
   const maxJuniorRatio = poolData ? parseRatio(poolData.maxJuniorRatio) : undefined
 
   React.useEffect(() => {
+    // sign()
     dispatch(loadLoans(props.tinlake))
   }, [props.selectedPool])