Skip to content

Commit

Permalink
Redesign side drawer variations
Browse files Browse the repository at this point in the history
  • Loading branch information
@kattylucy
kattylucy committed Oct 28, 2024
1 parent d5d3781 commit a7d1cb4
Show file tree
Hide file tree
Showing 11 changed files with 722 additions and 568 deletions.
2 changes: 1 addition & 1 deletion centrifuge-app/src/components/PageSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function PageSection({
}: Props) {
const [open, setOpen] = React.useState(defaultOpen)
return (
<Stack as="section" pl={3} pr={[3, 3, 3]} pt={3} pb={4} gap={3}>
<Stack as="section" padding={2} marginLeft={[0, 0, 0, 1, 3]} marginRight={[0, 0, 0, 1, 3]} gap={3}>
{(title || titleAddition) && (
<Shelf justifyContent="space-between" as="header">
<Stack>
Expand Down
14 changes: 8 additions & 6 deletions centrifuge-app/src/pages/Loan/ChargeFeesFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
useCentrifugeApi,
wrapProxyCallsForAccount,
} from '@centrifuge/centrifuge-react'
import { Box, CurrencyInput, IconMinusCircle, IconPlusCircle, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
import { Box, CurrencyInput, IconPlus, IconX, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
import React from 'react'
import { combineLatest, map, of } from 'rxjs'
Expand Down Expand Up @@ -101,11 +101,11 @@ export const ChargeFeesFields = ({
background="none"
border="none"
as="button"
mt={4}
mt="34px"
style={{ cursor: 'pointer' }}
onClick={() => remove(index)}
>
<IconMinusCircle size="20px" />
<IconX size={20} color="textSecondary" />
</Box>
</Shelf>
)
Expand All @@ -125,7 +125,7 @@ export const ChargeFeesFields = ({
return push({ id: '', amount: '' })
}}
>
<IconPlusCircle size="20px" color="textButtonTertiary" />
<IconPlus size={20} color="textSecondary" />
<Text variant="label1" color="textButtonTertiary">
Add fee
</Text>
Expand All @@ -148,8 +148,10 @@ function ChargePoolFeeSummary({ poolId }: { poolId: string }) {
return form.values.fees.length > 0 ? (
<Stack gap={1}>
<Shelf justifyContent="space-between">
<Text variant="label2">Fees</Text>
<Text variant="label2">{formatBalance(Dec(totalFees), pool.currency.symbol, 2)}</Text>
<Text variant="body2" color="textSecondary">
Fees
</Text>
<Text variant="body2">{formatBalance(Dec(totalFees), pool.currency.symbol, 2)}</Text>
</Shelf>
</Stack>
) : null
Expand Down
186 changes: 97 additions & 89 deletions centrifuge-app/src/pages/Loan/CorrectionForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { ActiveLoan, CurrencyBalance, Pool, Price } from '@centrifuge/centrifuge-js'
import { useCentrifugeApi, useCentrifugeTransaction, wrapProxyCallsForAccount } from '@centrifuge/centrifuge-react'
import { Button, CurrencyInput, Shelf, Stack, Text, TextInput } from '@centrifuge/fabric'
import { Box, Button, CurrencyInput, Shelf, Stack, Text, TextInput } from '@centrifuge/fabric'
import Decimal from 'decimal.js-light'
import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
import * as React from 'react'
import { combineLatest, switchMap } from 'rxjs'
import { useTheme } from 'styled-components'
import { FieldWithErrorMessage } from '../../components/FieldWithErrorMessage'
import { Dec } from '../../utils/Decimal'
import { formatBalance } from '../../utils/formatting'
Expand All @@ -25,6 +26,7 @@ export type CorrectionValues = {
}

export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
const theme = useTheme()
const pool = usePool(loan.poolId) as Pool
const account = useBorrower(loan.poolId, loan.id)
const poolFees = useChargePoolFees(loan.poolId, loan.id)
Expand Down Expand Up @@ -116,105 +118,111 @@ export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
<FormikProvider value={correctionForm}>
<Stack as={Form} gap={2} p={1} noValidate ref={correctionFormRef}>
<Text variant="heading2">Correction</Text>
<Stack gap={1}>
{isExternalLoan(loan) ? (
<>
<Shelf gap={1}>
<Field
name="quantity"
validate={combine(
required(),
positiveNumber(),
max(availableFinancing.toNumber(), 'The amount exceeds the available financing')
)}
>
{({ field, form, meta }: FieldProps) => {
return (
<CurrencyInput
{...field}
label="Quantity"
placeholder="0"
onChange={(value) => form.setFieldValue('quantity', value)}
errorMessage={meta.touched ? meta.error : undefined}
/>
)
}}
</Field>
<Field name="price" validate={combine(required(), positiveNumber(), maxPriceVariance(loan.pricing))}>
{({ field, form, meta }: FieldProps) => {
return (
<CurrencyInput
{...field}
label="Price"
currency={pool.currency.symbol}
onChange={(value) => form.setFieldValue('price', value)}
decimals={8}
errorMessage={meta.touched ? meta.error : undefined}
/>
)
}}
</Field>
</Shelf>
<Shelf justifyContent="space-between">
<Text variant="label2" color="textPrimary">
={' '}
{formatBalance(
Dec(correctionForm.values.price || 0).mul(correctionForm.values.quantity || 0),
pool.currency.symbol,
2
)}{' '}
principal
</Text>
</Shelf>
</>
) : isInternalLoan(loan) ? (
<Box
padding="24px 16px"
backgroundColor={theme.colors.backgroundSecondary}
borderRadius={10}
border={`1px solid ${theme.colors.borderPrimary}`}
>
<Stack gap={1}>
{isExternalLoan(loan) ? (
<>
<Shelf gap={1}>
<Field
name="quantity"
validate={combine(
required(),
positiveNumber(),
max(availableFinancing.toNumber(), 'The amount exceeds the available financing')
)}
>
{({ field, form, meta }: FieldProps) => {
return (
<CurrencyInput
{...field}
label="Quantity"
placeholder="0"
onChange={(value) => form.setFieldValue('quantity', value)}
errorMessage={meta.touched ? meta.error : undefined}
/>
)
}}
</Field>
<Field name="price" validate={combine(required(), positiveNumber(), maxPriceVariance(loan.pricing))}>
{({ field, form, meta }: FieldProps) => {
return (
<CurrencyInput
{...field}
label="Price"
currency={pool.currency.symbol}
onChange={(value) => form.setFieldValue('price', value)}
decimals={8}
errorMessage={meta.touched ? meta.error : undefined}
/>
)
}}
</Field>
</Shelf>
<Shelf justifyContent="flex-end">
<Text variant="body2" color="textPrimary">
={' '}
{formatBalance(
Dec(correctionForm.values.price || 0).mul(correctionForm.values.quantity || 0),
pool.currency.symbol,
2
)}{' '}
principal
</Text>
</Shelf>
</>
) : isInternalLoan(loan) ? (
<FieldWithErrorMessage
name="principal"
validate={combine(
positiveNumber(),
max(availableFinancing.toNumber(), 'The amount exceeds the available financing')
)}
>
{({ field, form, meta }: FieldProps) => {
return (
<CurrencyInput
{...field}
value={field.value instanceof Decimal ? field.value.toNumber() : field.value}
label={isCashLoan(loan) ? 'Amount' : 'Principal'}
currency={pool.currency.symbol}
onChange={(value) => form.setFieldValue('principal', value)}
errorMessage={meta.touched ? meta.error : undefined}
/>
)
}}
</FieldWithErrorMessage>
) : null}
<FieldWithErrorMessage
name="principal"
validate={combine(
positiveNumber(),
max(availableFinancing.toNumber(), 'The amount exceeds the available financing')
)}
>
{({ field, form, meta }: FieldProps) => {
return (
<CurrencyInput
{...field}
value={field.value instanceof Decimal ? field.value.toNumber() : field.value}
label={isCashLoan(loan) ? 'Amount' : 'Principal'}
currency={pool.currency.symbol}
onChange={(value) => form.setFieldValue('principal', value)}
errorMessage={meta.touched ? meta.error : undefined}
/>
)
}}
</FieldWithErrorMessage>
) : null}
<FieldWithErrorMessage
validate={required()}
name="reason"
as={TextInput}
label="Reason"
placeholder=""
maxLength={40}
/>
</Stack>

{poolFees.render()}
validate={required()}
name="reason"
as={TextInput}
label="Reason"
placeholder=""
maxLength={40}
/>
{poolFees.render()}
</Stack>
</Box>

<Stack p={2} maxWidth="444px" bg="backgroundTertiary" gap={2} mt={2}>
<Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} padding="24px 16px" borderRadius={10}>
<Text variant="heading4">Summary</Text>
<Stack gap={1}>
<Shelf justifyContent="space-between">
<Text variant="label2" color="textPrimary">
<Text variant="body2" color="textSecondary">
Old holdings
</Text>
<Text variant="label2">{formatBalance(oldPrincipal, pool.currency.symbol, 2)}</Text>
<Text variant="body2">{formatBalance(oldPrincipal, pool.currency.symbol, 2)}</Text>
</Shelf>
<Shelf justifyContent="space-between">
<Text variant="label2" color="textPrimary">
<Text variant="body2" color="textSecondary">
New holdings
</Text>
<Text variant="label2">
<Text variant="body2">
{formatBalance(newPrincipal, pool.currency.symbol, 2)} (
<Text color={isIncrease ? 'statusOk' : 'statusCritical'}>
{isIncrease ? '+' : ''}
Expand Down
Loading

0 comments on commit a7d1cb4

Please sign in to comment.