Redemption flow fixes (#2626)

- Change logic around the redeem flow - Remove rounded number from clain button
centrifuge · Feb 12, 2025 · c862468 · c862468
1 parent e859dd0
commit c862468
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 37 deletions.
diff --git a/centrifuge-app/src/components/InvestRedeem/Claim.tsx b/centrifuge-app/src/components/InvestRedeem/Claim.tsx
@@ -69,13 +69,7 @@ export function Claim({ type, onDismiss }: { type: 'invest' | 'redeem'; onDismis
                 : state.poolCurrency?.symbol
             )}`}
           >
-            Claim{' '}
-            {formatBalanceAbbreviated(
-              state.collectAmount,
-              ['invest', 'cancelRedeem'].includes(state.collectType)
-                ? state.trancheCurrency?.symbol
-                : state.poolCurrency?.symbol
-            )}
+            Claim
           </Button>
         )}
         {!state.needsToCollectBeforeOrder && (

diff --git a/centrifuge-app/src/components/InvestRedeem/RedeemForm.tsx b/centrifuge-app/src/components/InvestRedeem/RedeemForm.tsx
@@ -1,5 +1,5 @@
 import { Pool, TokenBalance } from '@centrifuge/centrifuge-js'
-import { Box, Button, CurrencyInput, SelectInner, Stack, Text } from '@centrifuge/fabric'
+import { Box, Button, CurrencyInput, Stack, Text } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikErrors, FormikProvider, useFormik } from 'formik'
 import React from 'react'
@@ -60,20 +60,18 @@ export function RedeemForm({ autoFocus }: RedeemFormProps) {
       amount: '',
     },
     onSubmit: (values, formActions) => {
-      const amountTokens =
-        values.amount instanceof Decimal ? values.amount : Dec(values.amount || 0).div(state.tokenPrice)
-      actions.redeem(TokenBalance.fromFloat(amountTokens, state.poolCurrency?.decimals ?? 18))
+      const amountTokens = values.amount instanceof Decimal ? values.amount : Dec(values.amount || 0)
+      actions.redeem(TokenBalance.fromFloat(amountTokens, state.trancheCurrency?.decimals ?? 18))
       formActions.setSubmitting(false)
     },
     validate: (values) => {
       const errors: FormikErrors<RedeemValues> = {}
-      const amountTokens =
-        values.amount instanceof Decimal ? values.amount : Dec(values.amount || 0).div(state.tokenPrice)
+      const amountTokens = values.amount instanceof Decimal ? values.amount : Dec(values.amount || 0)
       if (validateNumberInput(amountTokens, 0, maxRedeemTokens)) {
         errors.amount = validateNumberInput(amountTokens, 0, maxRedeemTokens)
       } else if (hasPendingOrder && amountTokens.eq(pendingRedeem)) {
         errors.amount = 'Equals current order'
-      } else if (Dec(values.amount || 0).lt(state.minOrder)) {
+      } else if (amountTokens.lt(state.minOrder)) {
         errors.amount = 'Order amount too low'
       }
 
@@ -117,34 +115,16 @@ export function RedeemForm({ autoFocus }: RedeemFormProps) {
                 {({ field, meta }: FieldProps) => (
                   <CurrencyInput
                     {...field}
-                    // when the value is a decimal we assume the user clicked the max button
-                    // it tracks the value in tokens and needs to be multiplied by price to get the value in pool currency
-                    value={field.value instanceof Decimal ? field.value.mul(state.tokenPrice).toNumber() : field.value}
+                    value={field.value}
                     errorMessage={meta.touched && (field.value !== 0 || form.submitCount > 0) ? meta.error : undefined}
                     label="Amount"
                     disabled={isRedeeming}
                     onSetMax={() => form.setFieldValue('amount', state.trancheBalanceWithPending)}
                     onChange={(value) => form.setFieldValue('amount', value)}
-                    currency={
-                      state?.poolCurrencies.length > 1 ? (
-                        <SelectInner
-                          {...field}
-                          onChange={(e) => {
-                            actions.selectPoolCurrency(e.target.value)
-                          }}
-                          value={state.poolCurrency?.symbol}
-                          options={state?.poolCurrencies
-                            .sort((_, b) => (b.displayName.toLowerCase().includes('usdc') ? 1 : -1))
-                            .map((c) => ({ value: c.symbol, label: c.displayName }))}
-                          style={{ textAlign: 'right' }}
-                        />
-                      ) : (
-                        state.poolCurrency?.displayName
-                      )
-                    }
+                    currency={state.trancheCurrency?.displayName}
                     secondaryLabel={`${formatBalance(
-                      roundDown(maxRedeemCurrency),
-                      state.poolCurrency?.displayName,
+                      roundDown(maxRedeemTokens),
+                      state.trancheCurrency?.displayName,
                       2
                     )} available`}
                     autoFocus={autoFocus}
@@ -161,7 +141,7 @@ export function RedeemForm({ autoFocus }: RedeemFormProps) {
                           form.values.amount instanceof Decimal
                             ? form.values.amount
                             : Dec(form.values.amount).div(state.tokenPrice),
-                          tokenSymbol
+                          state.poolCurrency?.displayName
                         )}`}
                     </Text>
                   </Text>