feat(tinlake-ui): update pool title, fix wording (#63)

* feat: add oversubscribed label in pool title * chore: format * fix: add wallet description * fix: rename opened loan to nft locked * fix: rename overview title * fix: swap junior and senior token addresses * fix: max reserve to set * fix: cast
centrifuge · Dec 18, 2020 · a226bed · a226bed
1 parent 3d794c9
commit a226bed
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 7 deletions.
diff --git a/tinlake-ui/components/Overview/index.tsx b/tinlake-ui/components/Overview/index.tsx
@@ -22,7 +22,7 @@ const Overview: React.FC<Props> = (props: Props) => {
     <Box margin={{ bottom: 'large', top: 'medium' }}>
       {!isUpcoming && (
         <>
-          <PoolTitle pool={props.selectedPool} page="Pool Overview" />
+          <PoolTitle pool={props.selectedPool} page="Overview" />
           <InvestmentOverview selectedPool={props.selectedPool} tinlake={props.tinlake} />
         </>
       )}

diff --git a/tinlake-ui/components/PoolTitle/index.tsx b/tinlake-ui/components/PoolTitle/index.tsx
@@ -1,13 +1,20 @@
+import BN from 'bn.js'
 import * as React from 'react'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 import { Pool, UpcomingPool } from '../../config'
+import { PoolState } from '../../ducks/pool'
+import { Label } from '../PoolList/styles'
 
 interface Props {
   pool: Pool | UpcomingPool
   page: string
 }
 
 const PoolTitle: React.FC<Props> = (props: Props) => {
+  const pool = useSelector<any, PoolState>((state) => state.pool)
+  const isOversubscribed = (pool?.data && new BN(pool?.data.maxReserve).lte(new BN(pool?.data.reserve))) || false
+
   return (
     <Wrapper>
       <Icon
@@ -19,6 +26,13 @@ const PoolTitle: React.FC<Props> = (props: Props) => {
         <PageName>{props.page}</PageName>
         <PoolName>{props.pool.metadata.name}</PoolName>
       </PageTitle>
+      <PoolLabel>
+        {props.pool.isUpcoming ? (
+          <Label blue>Upcoming</Label>
+        ) : (
+          isOversubscribed && <Label orange>Oversubscribed</Label>
+        )}
+      </PoolLabel>
     </Wrapper>
   )
 }
@@ -54,3 +68,8 @@ const PoolName = styled.h2`
   margin: 0;
   color: #979797;
 `
+
+const PoolLabel = styled.div`
+  margin-top: 4px;
+  margin-left: 8px;
+`
diff --git a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
@@ -208,7 +208,7 @@ const TrancheOverview: React.FC<Props> = (props: Props) => {
             {card === 'redeem' && <RedeemCard {...props} setCard={setCard} updateTrancheData={updateTrancheData} />}
 
             {trancheData?.token && trancheData.token.length > 0 && trancheData.token.length < 7 && (
-              <AddWalletLink onClick={addToWallet}>Add {trancheData?.token} to your wallet</AddWalletLink>
+              <AddWalletLink onClick={addToWallet}>Display {trancheData?.token} in your wallet</AddWalletLink>
             )}
           </>
         )}

diff --git a/tinlake-ui/containers/Loan/Overview/MaxReserveForm.tsx b/tinlake-ui/containers/Loan/Overview/MaxReserveForm.tsx
@@ -58,7 +58,7 @@ const MaxReserveForm: React.FC<Props> = (props: Props) => {
           onClick={() => props.setShowMaxReserveForm(false)}
           disabled={status === 'pending' || status === 'unconfirmed'}
         />
-        <Button primary label="Save" onClick={save} disabled={status === 'pending' || status === 'unconfirmed'} />
+        <Button primary label="Set" onClick={save} disabled={status === 'pending' || status === 'unconfirmed'} />
       </Box>
     </Box>
   )

diff --git a/tinlake-ui/ducks/pool.ts b/tinlake-ui/ducks/pool.ts
@@ -302,8 +302,8 @@ export function loadPool(
           data.junior!.pendingInvestments || new BN(0)
         )
 
-        data.senior!.address = tinlake.contractAddresses['JUNIOR_TOKEN']
-        data.junior!.address = tinlake.contractAddresses['SENIOR_TOKEN']
+        data.senior!.address = tinlake.contractAddresses['SENIOR_TOKEN']
+        data.junior!.address = tinlake.contractAddresses['JUNIOR_TOKEN']
 
         const juniorRedemptionsCurrency = (data.junior?.pendingRedemptions || new BN(0))
           .mul(data.junior?.tokenPrice || new BN(0))

diff --git a/tinlake-ui/services/apollo/index.ts b/tinlake-ui/services/apollo/index.ts
@@ -320,7 +320,7 @@ function getLoanStatus(loan: any) {
   if (loan.debt && loan.debt !== '0') {
     return 'ongoing'
   }
-  return 'opened'
+  return 'NFT locked'
 }
 
 export default new Apollo()

diff --git a/tinlake.js/src/actions/analytics.ts b/tinlake.js/src/actions/analytics.ts
@@ -82,7 +82,7 @@ export function AnalyticsActions<ActionsBase extends Constructor<TinlakeParams>>
       if ((await this.getOwnerOfLoan(loanId)) === ZERO_ADDRESS) {
         return 'closed'
       }
-      return 'opened'
+      return 'NFT locked'
     }
 
     getLoan = async (loanId: string): Promise<Loan | null> => {