diff --git a/src/components/experimental_/MessageTranslator_.tsx b/src/components/experimental_/MessageTranslator_.tsx index a3d551f6b..86279c114 100644 --- a/src/components/experimental_/MessageTranslator_.tsx +++ b/src/components/experimental_/MessageTranslator_.tsx @@ -10,6 +10,7 @@ import { TableResponse } from '../cactiComponents/TableResponse'; import { composeFromString } from '../cactiComponents/tools/compose'; import { MultiStepContainer } from '../widgets/MultiStepContainer'; import { FeedbackButton } from './FeedbackButton_'; +import LiquityAdjust from './widgets/liquity/adjust/LiquityAdjust'; import ListContainer from './containers/ListContainer'; import { StreamingContainer } from './containers/StreamingContainer'; import LiquityBorrow from './widgets/liquity/borrow/LiquityBorrow'; @@ -176,8 +177,18 @@ export const Widget = (props: WidgetProps) => { 'liquity-borrow', ); + widgets.set( + 'liquity-adjust', + + ); widgets.set('liquity-close', ); + /* If available, return the widget in the widgets map */ if (widgets.has(fnName)) { return widgets.get(fnName)!; diff --git a/src/components/experimental_/widgets/liquity/adjust/LiquityAdjust.tsx b/src/components/experimental_/widgets/liquity/adjust/LiquityAdjust.tsx new file mode 100644 index 000000000..3a276fc2e --- /dev/null +++ b/src/components/experimental_/widgets/liquity/adjust/LiquityAdjust.tsx @@ -0,0 +1,132 @@ +import { useEffect, useState } from 'react'; +import { Decimalish, TroveAdjustmentParams } from '@liquity/lib-base'; +import { EthersLiquity } from '@liquity/lib-ethers'; +import { UnsignedTransaction } from 'ethers/lib/utils.js'; +import { + ActionResponse, + DoubleLineResponse, + HeaderResponse, + ListResponse, +} from '@/components/cactiComponents'; +import useSigner from '@/hooks/useSigner'; +import { cleanValue } from '@/utils'; + +interface AdjustProps { + borrowAmount?: string; + repayAmount?: string; + depositCollateral?: string; + withdrawCollateral?: string; +} + +const LiquityAdjust = ({ + borrowAmount, + repayAmount, + depositCollateral, + withdrawCollateral, +}: AdjustProps) => { + const signer = useSigner(); + + const handleInput = (amount: string | undefined) => { + if (!amount) return undefined; + const cleaned = cleanValue(amount, 18); + if (!cleaned) return undefined; + const num = +cleaned; + return isNaN(num) || num === 0 ? undefined : +cleaned; + }; + + const borrowLUSD = handleInput(borrowAmount); + const repayLUSD = handleInput(repayAmount); + const _withdrawCollateral = handleInput(withdrawCollateral); + const _depositCollateral = handleInput(depositCollateral); + + const [validLiquityParams, setValidLiquityParams] = useState>(); + const [label, setLabel] = useState(); + const [sendParams, setSendParams] = useState(); + + useEffect(() => { + (async () => { + if (!signer) return; + + const liquity = await EthersLiquity.connect(signer); + const validParams = {} as TroveAdjustmentParams; + + if (borrowLUSD) validParams.borrowLUSD = borrowLUSD; + if (repayLUSD) validParams.repayLUSD = repayLUSD; + if (_depositCollateral) validParams.depositCollateral = _depositCollateral; + if (_withdrawCollateral) validParams.withdrawCollateral = _withdrawCollateral; + + // handle if for some reason there is a borrow and a repay input + if (borrowLUSD && repayLUSD) { + validParams.repayLUSD = 0; // TODO handle more gracefully to identify what user actually wants to do + } + + // handle if for some reason there is a deposit and a withdraw input + if (_depositCollateral && _withdrawCollateral) { + validParams.withdrawCollateral = 0; // TODO handle more gracefully to identify what user actually wants to do + } + + setValidLiquityParams(validParams); + const { rawPopulatedTransaction: params } = await liquity.populate.adjustTrove(validParams); + setSendParams(params); + + // handle labels for each param + const labels: { [action: string]: string } = {}; + + if (repayLUSD) labels.repayLUSD = `Repay ${repayLUSD} ${'LUSD'}`; + if (_withdrawCollateral) + labels.withdrawCollateral = `Withdraw ${_withdrawCollateral} ${'ETH'}`; + if (borrowLUSD) labels.borrowLUSD = `Borrow ${borrowLUSD} ${'LUSD'}`; + if (_depositCollateral) labels.depositCollateral = `Deposit ${_depositCollateral} ${'ETH'}`; + + const label = Object.values(labels).join(' and '); + setLabel(label); + })(); + }, [_depositCollateral, _withdrawCollateral, borrowLUSD, repayLUSD, signer]); + + return ( + <> + + {validLiquityParams?.borrowLUSD && ( + + )} + {validLiquityParams?.repayLUSD && ( + + )} + {validLiquityParams?.depositCollateral && ( + + )} + {validLiquityParams?.withdrawCollateral && ( + + )} + + + + ); +}; + +export default LiquityAdjust;