Create pool redesign - feature branch

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -199,8 +199,8 @@ export const ContentWrapper = styled.div`
 
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
-    margin-left: 7vw;
-    width: calc(100% - 7vw);
+    margin-left: 6vw;
+    width: calc(100% - 6vw);
     margin-top: 10px;
   }
 

centrifuge-app/src/components/Menu/IssuerMenu.tsx

@@ -1,7 +1,7 @@
 import { Box, IconChevronDown, IconChevronRight, IconUser, Menu as Panel, Stack } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useMatch } from 'react-router'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Toggle } from './Toggle'
 
@@ -11,6 +11,12 @@ type IssuerMenuProps = {
   children?: React.ReactNode
 }
 
+const StyledPanel = styled(Panel)`
+  & > div {
+    max-height: 50vh;
+  }
+`
+
 export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
   const match = useMatch('/issuer/*')
   const isActive = !!match
@@ -56,9 +62,9 @@ export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
         Issuer
         {isLarge &&
           (open ? (
-            <IconChevronDown size={['iconMedium', 'iconMedium', 'iconSmall']} />
+            <IconChevronDown size={['iconMedium', 'iconMedium', 'iconSmall']} color="textInverted" />
           ) : (
-            <IconChevronRight size={['iconMedium', 'iconMedium', 'iconSmall']} />
+            <IconChevronRight size={['iconMedium', 'iconMedium', 'iconSmall']} color="textInverted" />
           ))}
       </Toggle>
 
@@ -81,7 +87,7 @@ export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
             {children}
           </Stack>
         ) : (
-          <Panel backgroundColor={theme.colors.backgroundInverted}>{children}</Panel>
+          <StyledPanel backgroundColor={theme.colors.backgroundInverted}>{children}</StyledPanel>
         )}
       </Box>
     </Box>

centrifuge-app/src/components/Menu/PoolLink.tsx

@@ -33,7 +33,7 @@ export function PoolLink({ pool, path = 'issuer' }: PoolLinkProps) {
     <Root
       forwardedAs={Link}
       to={to}
-      variant="interactive1"
+      variant="body2"
       isActive={match && pool.id === match.params.pid}
       onMouseOver={() => prefetchRoute(to)}
     >

centrifuge-app/src/components/Menu/Toggle.tsx

@@ -10,7 +10,7 @@ export const Toggle = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
   width: 100%;
   grid-template-columns: ${({ stacked, theme }) =>
     stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr ${theme.sizes.iconSmall}px`};
-  color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
+  color: ${({ theme }) => theme.colors.textInverted};
   border-radius: 4px;
   background-color: ${({ isActive }) => (isActive ? LIGHT_BACKGROUND : 'transparent')};
 

centrifuge-app/src/components/Menu/index.tsx

@@ -4,12 +4,14 @@ import {
   IconGlobe,
   IconInvestments,
   IconNft,
+  IconPlus,
   IconSwitch,
   IconWallet,
   MenuItemGroup,
   Shelf,
   Stack,
 } from '@centrifuge/fabric'
+import styled from 'styled-components'
 import { config } from '../../config'
 import { useAddress } from '../../utils/useAddress'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
@@ -23,6 +25,28 @@ import { NavManagementMenu } from './NavManagementMenu'
 import { PageLink } from './PageLink'
 import { PoolLink } from './PoolLink'
 
+const COLOR = '#7C8085'
+
+const StyledRouterLinkButton = styled(RouterLinkButton)`
+  width: 100%;
+  & > span {
+    background-color: ${COLOR};
+    border-color: transparent;
+    color: white;
+    margin-bottom: 20px;
+
+    &:hover {
+      box-shadow: 0px 0px 0px 3px #7c8085b3;
+      background-color: ${COLOR};
+      color: white;
+    }
+
+    &:active {
+      border-color: transparent;
+    }
+  }
+`
+
 export function Menu() {
   const pools = usePoolsThatAnyConnectedAddressHasPermissionsFor() || []
   const isLarge = useIsAboveBreakpoint('L')
@@ -130,8 +154,8 @@ export function Menu() {
 
 function CreatePool() {
   return (
-    <RouterLinkButton to="/issuer/create-pool" small>
+    <StyledRouterLinkButton icon={<IconPlus size="iconSmall" />} to="/issuer/create-pool" small variant="inverted">
       Create pool
-    </RouterLinkButton>
+    </StyledRouterLinkButton>
   )
 }

centrifuge-app/src/components/PoolCard/index.tsx

@@ -199,7 +199,7 @@ export function PoolCard({
         }
       })
       .reverse()
-  }, [isTinlakePool, metaData?.tranches, tinlakeKey, tranches])
+  }, [isTinlakePool, metaData?.tranches, tinlakeKey, tranches, createdAt, poolId])
 
   return (
     <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>

centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx

@@ -42,9 +42,6 @@ export const TrancheTokenCards = ({
     return 'mezzanine'
   }
 
-  const getTarget = (tranche: Token) =>
-    (isTinlakePool && tranche.seniority === 0) || poolId === DYF_POOL_ID || poolId === NS3_POOL_ID
-
   const columns = useMemo(() => {
     return [
       {
@@ -121,6 +118,8 @@ export const TrancheTokenCards = ({
   }, [pool.tranches, metadata, poolId, pool?.currency.symbol])
 
   const dataTable = useMemo(() => {
+    const getTarget = (tranche: Token) =>
+      (isTinlakePool && tranche.seniority === 0) || poolId === DYF_POOL_ID || poolId === NS3_POOL_ID
     return trancheTokens.map((tranche) => {
       const calculateApy = (trancheToken: Token) => {
         if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
@@ -145,7 +144,7 @@ export const TrancheTokenCards = ({
         isTarget: getTarget(tranche),
       }
     })
-  }, [trancheTokens, getTarget])
+  }, [trancheTokens, daysSinceCreation, isTinlakePool, poolId])
 
   return (
     <Shelf gap={3}>

centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx

@@ -292,7 +292,7 @@ export const TransactionHistoryTable = ({
               View all
             </AnchorButton>
           )}
-          {transactions?.length && (
+          {transactions?.length ? (
             <AnchorButton
               href={csvUrl}
               download={`pool-transaction-history-${poolId}.csv`}
@@ -304,7 +304,7 @@ export const TransactionHistoryTable = ({
             >
               Download
             </AnchorButton>
-          )}
+          ) : null}
         </Shelf>
       </Shelf>
       <Box overflow="auto">

centrifuge-app/src/components/Tooltips.tsx

@@ -346,6 +346,38 @@ export const tooltipText = {
     label: 'Total NAV',
     body: 'Total nav minus accrued fees',
   },
+  oneTranche: {
+    label: '',
+    body: 'This pool will only have one investment class where all investors share the same level of risk and return.',
+  },
+  twoTranches: {
+    label: '',
+    body: 'This pool will have two classes. Senior tranche which has priority in receiving returns. And Junior tranche which is the last to receive returns (after Senior tranche obligations are met) but receives higher yield as compensation for the higher risk.',
+  },
+  threeTranches: {
+    label: '',
+    body: 'This pool will have three classes. Senior tranche is the safest tranche with priority in repayment. Mezzanine tranche has intermediate risk and receives payment after Senior tranche obligations are met. Junior tranche which only receives returns after both Senior and Mezzanine tranches are paid.',
+  },
+  singleMultisign: {
+    label: '',
+    body: 'Setup a wallet where only one private key is required to authorise changes to the pool configuration.',
+  },
+  multiMultisign: {
+    label: '',
+    body: 'Setup a wallet that requires multiple private keys to authorise changes to the pool configuration.',
+  },
+  centrifugeOnboarding: {
+    label: '',
+    body: 'Investors will go through the Centrifuge onboarding provider, Shuftipro, before they can invest in your pool.',
+  },
+  externalOnboarding: {
+    label: '',
+    body: 'You can select the provider you want to KYC/onboard your investors.',
+  },
+  noneOnboarding: {
+    label: '',
+    body: 'You can directly whitelist the addresses that can invest in the pool.',
+  },
 }
 
 export type TooltipsProps = {

centrifuge-app/src/pages/IssuerCreatePool/AdminMultisig.tsx

@@ -1,9 +1,9 @@
 import { useWallet } from '@centrifuge/centrifuge-react'
 import { Button } from '@centrifuge/fabric'
 import { useFormikContext } from 'formik'
-import { CreatePoolValues } from '.'
 import { PageSection } from '../../components/PageSection'
 import { MultisigForm } from '../IssuerPool/Access/MultisigForm'
+import { CreatePoolValues } from './types'
 
 export function AdminMultisigSection() {
   const form = useFormikContext<CreatePoolValues>()

centrifuge-app/src/pages/IssuerCreatePool/FormAddressInput.tsx

@@ -0,0 +1,48 @@
+import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
+import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
+import { TextInput } from '@centrifuge/fabric'
+import { useField } from 'formik'
+import React from 'react'
+import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
+import { isEvmAddress } from '../../../src/utils/address'
+import { truncate } from '../../utils/web3'
+
+interface FormAddressInputProps {
+  name: string
+  chainId?: number
+  placeholder?: string
+}
+
+export const FormAddressInput = ({ name, chainId, placeholder }: FormAddressInputProps) => {
+  const [field, meta, helpers] = useField(name)
+  const utils = useCentrifugeUtils()
+
+  let truncated: string | undefined
+  try {
+    truncated = truncate(utils.formatAddress(field.value))
+  } catch (e) {
+    truncated = undefined
+  }
+
+  function handleBlur() {
+    helpers.setTouched(true)
+
+    if (!truncated || meta.error) {
+      helpers.setError('Invalid address')
+      return
+    }
+
+    helpers.setValue(isEvmAddress(field.value) ? evmToSubstrateAddress(field.value, chainId ?? 0) : field.value)
+  }
+
+  return (
+    <FieldWithErrorMessage
+      {...field}
+      placeholder={placeholder ?? 'Type address...'}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => helpers.setValue(e.target.value)}
+      onBlur={handleBlur}
+      errorMessage={meta.touched && meta.error ? meta.error : undefined}
+      as={TextInput}
+    />
+  )
+}

centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx

@@ -0,0 +1,113 @@
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
+import { Box, Grid, IconButton, IconTrash, Select, Text, TextInput } from '@centrifuge/fabric'
+import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
+import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
+import { AddButton } from './PoolDetailsSection'
+import { StyledGrid } from './PoolStructureSection'
+
+const PROVIDERS = [
+  { label: 'Please select...', value: '' },
+  { label: 'Fund admin', value: 'fundAdmin' },
+  { label: 'Trustee', value: 'trustee' },
+  { label: 'Pricing oracle provider', value: 'pricingOracleProvider' },
+  { label: 'Auditor', value: 'auditor' },
+  { label: 'Custodian', value: 'custodian' },
+  { label: 'Investment manager', value: 'investmentManager' },
+  { label: 'Sub-advisor', value: 'subadvisor' },
+  { label: 'Historical default rate', value: 'historicalDefaultRate' },
+  { label: 'Other', value: 'other' },
+]
+
+export const LabelWithDeleteButton = ({
+  onDelete,
+  hideButton,
+  label,
+}: {
+  onDelete: () => void
+  hideButton: boolean
+  label: string
+}) => {
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Text variant="heading4">{label}</Text>
+      {!hideButton && (
+        <IconButton onClick={onDelete}>
+          <IconTrash color="textSecondary" />
+        </IconButton>
+      )}
+    </Box>
+  )
+}
+
+export const IssuerCategoriesSection = () => {
+  const form = useFormikContext<PoolMetadataInput>()
+  return (
+    <Box mt={4} mb={3}>
+      <Text variant="heading2">Service providers</Text>
+      <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} mt={3}>
+        <FieldArray name="issuerCategories">
+          {({ push, remove }) => (
+            <>
+              {form.values.issuerCategories.map((category, index) => (
+                <>
+                  <Grid gridTemplateColumns={['1fr', category.type === 'other' ? '1fr 1fr' : '1fr']} gap={2}>
+                    <Field name={`issuerCategories.${index}.type`}>
+                      {({ field, meta }: FieldProps) => (
+                        <Select
+                          name={field.name}
+                          label="Type"
+                          onChange={(event) => form.setFieldValue(field.name, event.target.value)}
+                          onBlur={field.onBlur}
+                          value={field.value}
+                          options={PROVIDERS}
+                          errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                        />
+                      )}
+                    </Field>
+                    {category.type === 'other' && (
+                      <Field name={`issuerCategories.${index}.description`}>
+                        {({ field, meta }: FieldProps) => (
+                          <FieldWithErrorMessage
+                            {...field}
+                            label="Description"
+                            placeholder="Type here..."
+                            maxLength={100}
+                            as={TextInput}
+                            errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                            onBlur={field.onBlur}
+                          />
+                        )}
+                      </Field>
+                    )}
+                  </Grid>
+                  <Field name={`issuerCategories.${index}.value`}>
+                    {({ field, meta }: FieldProps) => (
+                      <FieldWithErrorMessage
+                        {...field}
+                        label={
+                          <LabelWithDeleteButton
+                            onDelete={() => remove(index)}
+                            hideButton={form.values.issuerCategories.length === 1}
+                            label="Name of provider"
+                          />
+                        }
+                        placeholder="Type here..."
+                        maxLength={100}
+                        errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                        onBlur={field.onBlur}
+                        as={TextInput}
+                      />
+                    )}
+                  </Field>
+                </>
+              ))}
+              <Box gridColumn="span 2">
+                <AddButton onClick={() => push({ type: '', value: '' })} />
+              </Box>
+            </>
+          )}
+        </FieldArray>
+      </StyledGrid>
+    </Box>
+  )
+}