Add new dashboard/assets

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

@@ -99,7 +99,7 @@ function PoolPerformanceChart() {
   const { poolStates } = useDailyPoolStates(poolId) || {}
   const pool = usePool(poolId)
   const poolAge = pool.createdAt ? daysBetween(pool.createdAt, new Date()) : 0
-  const { data: loans } = useLoans(poolId)
+  const { data: loans } = useLoans([poolId])
 
   const firstOriginationDate = loans?.reduce((acc, cur) => {
     if ('originationDate' in cur) {

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

@@ -0,0 +1,53 @@
+import { Pool } from '@centrifuge/centrifuge-js'
+import { useCentrifuge } from '@centrifuge/centrifuge-react'
+import { Box, Text, Thumbnail } from '@centrifuge/fabric'
+import { useTheme } from 'styled-components'
+import { usePoolMetadata } from '../../../src/utils/usePools'
+
+export const PoolCard = ({
+  children,
+  active,
+  onClick,
+  pool,
+}: {
+  children: React.ReactNode
+  active: boolean
+  onClick: () => void
+  pool: Pool
+}) => {
+  const cent = useCentrifuge()
+  const theme = useTheme()
+  const { data: poolMetadata } = usePoolMetadata(pool)
+  // TODO - remove cent usage
+  const poolUri = poolMetadata?.pool?.icon?.uri
+    ? cent.metadata.parseMetadataUrl(poolMetadata?.pool?.icon?.uri)
+    : undefined
+  return (
+    <Box
+      display="flex"
+      backgroundColor={active ? theme.colors.backgroundInverted : theme.colors.backgroundSecondary}
+      borderRadius={4}
+      height="36px"
+      padding="4px"
+      alignItems="center"
+      key={pool.id}
+      justifyContent="space-between"
+      onClick={onClick}
+      style={{ cursor: 'pointer' }}
+      mr={2}
+      flexShrink={0}
+    >
+      <Box display="flex" alignItems="center">
+        {poolUri ? (
+          <Box as="img" src={poolUri} alt="" height={24} width={24} borderRadius={4} mr={1} />
+        ) : (
+          <Thumbnail type="pool" label="LP" size="small" />
+        )}
+        <Text variant="body2" color={active ? theme.colors.textInverted : theme.colors.textPrimary}>
+          {poolMetadata?.pool?.name}
+        </Text>
+      </Box>
+      <Box ml={2}>{children}</Box>
+    </Box>
+  )
+}

centrifuge-app/src/components/Dashboard/assets/AssetTemplateSection.tsx

@@ -0,0 +1,87 @@
+import { CurrencyInput, DateInput, NumberInput, Select, TextAreaInput, TextInput } from '@centrifuge/fabric'
+import { Field, FieldProps } from 'formik'
+import { FieldWithErrorMessage } from '../../../../src/components/FieldWithErrorMessage'
+import { combine, max, min, positiveNumber, required } from '../../../../src/utils/validation'
+
+export function AssetTemplateSection({ label, input, name }: { label: string; input: any; name: string }) {
+  switch (input.type) {
+    case 'single-select':
+      return (
+        <Field name={name} validate={required()} key={label}>
+          {({ field, form }: any) => (
+            <Select
+              placeholder="Select one"
+              label={`${label}*`}
+              options={input.options.map((o: any) => (typeof o === 'string' ? { label: o, value: o } : o))}
+              value={field.value ?? ''}
+              onChange={(event) => {
+                form.setFieldValue(name, event.target.value)
+              }}
+            />
+          )}
+        </Field>
+      )
+    case 'currency': {
+      return (
+        <Field
+          name={name}
+          validate={combine(required(), positiveNumber(), min(input.min ?? -Infinity), max(input.max ?? Infinity))}
+          key={label}
+        >
+          {({ field, meta, form }: FieldProps) => {
+            return (
+              <CurrencyInput
+                {...field}
+                label={`${label}*`}
+                errorMessage={meta.touched ? meta.error : undefined}
+                currency={input.symbol}
+                placeholder="0.00"
+                onChange={(value) => form.setFieldValue(name, value)}
+                min={input.min}
+                max={input.max}
+              />
+            )
+          }}
+        </Field>
+      )
+    }
+    case 'number':
+      return (
+        <FieldWithErrorMessage
+          name={name}
+          as={NumberInput}
+          label={`${label}*`}
+          placeholder={input.placeholder}
+          validate={combine(required(), min(input.min ?? -Infinity), max(input.max ?? Infinity))}
+          symbol={input.unit}
+          min={input.min}
+          max={input.max}
+        />
+      )
+    case 'date':
+      return (
+        <FieldWithErrorMessage
+          name={name}
+          as={DateInput}
+          label={`${label}*`}
+          placeholder={input.placeholder}
+          validate={required()}
+          min={input.min}
+          max={input.max}
+        />
+      )
+
+    default: {
+      const { type, ...rest } = input.type as any
+      return (
+        <FieldWithErrorMessage
+          name={name}
+          as={type === 'textarea' ? TextAreaInput : TextInput}
+          label={`${label}*`}
+          validate={required()}
+          {...rest}
+        />
+      )
+    }
+  }
+}

centrifuge-app/src/components/Dashboard/assets/AssetsContext.tsx

@@ -0,0 +1 @@
+