From fa3775b530abf6af3603c647ea3111f44cdb8879 Mon Sep 17 00:00:00 2001 From: alecks <0xalecks@gmail.com> Date: Mon, 29 Jan 2024 09:43:58 -0500 Subject: [PATCH] update token inputs to v2 --- projects/sdk/src/lib/swap/Swap.ts | 2 +- projects/sdk/src/lib/swap/SwapOperation.ts | 8 +- .../ui/src/components/Chop/Actions/Chop.tsx | 24 +++- .../Market/PodsV2/Actions/Buy/CreateOrder.tsx | 3 + .../PodsV2/Actions/Buy/FillListingForm.tsx | 8 +- .../ui/src/components/Swap/Actions/Swap.tsx | 122 +++++++++++------- 6 files changed, 114 insertions(+), 53 deletions(-) diff --git a/projects/sdk/src/lib/swap/Swap.ts b/projects/sdk/src/lib/swap/Swap.ts index 80ab7d8f66..5bb0359280 100644 --- a/projects/sdk/src/lib/swap/Swap.ts +++ b/projects/sdk/src/lib/swap/Swap.ts @@ -65,7 +65,7 @@ export class Swap { } } - const op = new SwapOperation(Swap.sdk, tokenIn, tokenOut, workflow, route); + const op = new SwapOperation(Swap.sdk, tokenIn, tokenOut, workflow, route, _from, _to); return op; } diff --git a/projects/sdk/src/lib/swap/SwapOperation.ts b/projects/sdk/src/lib/swap/SwapOperation.ts index 54ac3128c7..0154578bb3 100644 --- a/projects/sdk/src/lib/swap/SwapOperation.ts +++ b/projects/sdk/src/lib/swap/SwapOperation.ts @@ -4,7 +4,7 @@ import { TokenValue } from "src/TokenValue"; import { Token } from "src/classes/Token"; import { BeanstalkSDK } from "src/lib/BeanstalkSDK"; import { Route } from "src/classes/Router"; -import { AdvancedFarmWorkflow } from "../farm"; +import { AdvancedFarmWorkflow, FarmFromMode, FarmToMode } from "../farm"; type PathSegment = { from: string; @@ -18,8 +18,10 @@ export class SwapOperation { sdk: BeanstalkSDK, readonly tokenIn: Token, readonly tokenOut: Token, - private readonly workflow: AdvancedFarmWorkflow|Workflow, - private readonly route: Route + private readonly workflow: AdvancedFarmWorkflow | Workflow, + private readonly route: Route, + readonly from?: FarmFromMode, + readonly to?: FarmToMode ) { SwapOperation.sdk = sdk; sdk.debug(`new SwapOperation(): ${this.getDisplay()}`); diff --git a/projects/ui/src/components/Chop/Actions/Chop.tsx b/projects/ui/src/components/Chop/Actions/Chop.tsx index de9cdc3cef..1e634aa74e 100644 --- a/projects/ui/src/components/Chop/Actions/Chop.tsx +++ b/projects/ui/src/components/Chop/Actions/Chop.tsx @@ -58,6 +58,7 @@ import TransactionToast from '~/components/Common/TxnToast'; import useFormMiddleware from '~/hooks/ledger/useFormMiddleware'; import useSdk from '~/hooks/sdk'; import useBDV from '~/hooks/beanstalk/useBDV'; +import { BalanceFrom } from '~/components/Common/Form/BalanceFromRow'; type ChopFormValues = FormState & { destination: FarmToMode | undefined; @@ -76,7 +77,11 @@ const ChopForm: FC< const unripeUnderlying = useUnripeUnderlyingMap(); const [quote, setQuote] = useState(new BigNumber(0)); const [quoteBdv, setQuoteBdv] = useState(new BigNumber(0)); - + const [balanceFromIn, setBalanceFromIn] = useState( + values.destination === FarmToMode.EXTERNAL + ? BalanceFrom.EXTERNAL + : BalanceFrom.INTERNAL + ); /// Derived values const state = values.tokens[0]; const inputToken = state.token; @@ -147,6 +152,14 @@ const ChopForm: FC< const isSubmittable = quote?.gt(0) && values.destination; + const changeDestination = (v) => { + setBalanceFromIn(v); + setFieldValue( + 'destination', + v === BalanceFrom.EXTERNAL ? FarmToMode.EXTERNAL : FarmToMode.INTERNAL + ); + }; + return (
+ ), }} /> diff --git a/projects/ui/src/components/Market/PodsV2/Actions/Buy/CreateOrder.tsx b/projects/ui/src/components/Market/PodsV2/Actions/Buy/CreateOrder.tsx index cda1a59222..cd72f9ea27 100644 --- a/projects/ui/src/components/Market/PodsV2/Actions/Buy/CreateOrder.tsx +++ b/projects/ui/src/components/Market/PodsV2/Actions/Buy/CreateOrder.tsx @@ -56,6 +56,7 @@ import { QuoteHandlerWithParams } from '~/hooks/ledger/useQuoteWithParams'; import FormTxnProvider from '~/components/Common/Form/FormTxnProvider'; import useFormTxnContext from '~/hooks/sdk/useFormTxnContext'; +import { BalanceFrom } from '~/components/Common/Form/BalanceFromRow'; export type CreateOrderFormValues = { placeInLine: BigNumber | null; @@ -175,6 +176,7 @@ const CreateOrderV2Form: FC< selected={values.tokens} handleSubmit={handleSelectTokens} balances={balances} + balanceFrom={BalanceFrom.TOTAL} tokenList={Object.values(erc20TokenMap)} mode={TokenSelectMode.SINGLE} /> @@ -223,6 +225,7 @@ const CreateOrderV2Form: FC< ? balances.eth : balances[state.token.address] || ZERO_BN } + balanceFrom={BalanceFrom.TOTAL} state={state} params={quoteHandlerParams} showTokenSelect={handleOpen} diff --git a/projects/ui/src/components/Market/PodsV2/Actions/Buy/FillListingForm.tsx b/projects/ui/src/components/Market/PodsV2/Actions/Buy/FillListingForm.tsx index 42014cc7fe..f52bfa4ecc 100644 --- a/projects/ui/src/components/Market/PodsV2/Actions/Buy/FillListingForm.tsx +++ b/projects/ui/src/components/Market/PodsV2/Actions/Buy/FillListingForm.tsx @@ -47,6 +47,7 @@ import useFormMiddleware from '~/hooks/ledger/useFormMiddleware'; import TokenOutput from '~/components/Common/Form/TokenOutput'; import useSdk from '~/hooks/sdk'; import useAccount from '~/hooks/ledger/useAccount'; +import { BalanceFrom } from '~/components/Common/Form/BalanceFromRow'; export type FillListingFormValues = FormState & { settings: SlippageSettingsFragment; @@ -197,6 +198,7 @@ const FillListingV2Form: FC< balances={balances} tokenList={Object.values(erc20TokenMap)} mode={TokenSelectMode.SINGLE} + balanceFrom={BalanceFrom.TOTAL} /> {isReady ? ( @@ -412,7 +415,8 @@ const FillListingForm: FC<{ finalFromMode = optimizeFromMode(amountBeans, balances[Bean.address]); farm = sdk.farm.create(); tokenInNew = sdk.tokens.BEAN; // FIXME - } else { /// Swap to BEAN and buy + } else { + /// Swap to BEAN and buy // Require a quote if (!formData.amountOut) throw new Error(`No quote available for ${formData.token.symbol}`); @@ -497,7 +501,7 @@ const FillListingForm: FC<{ balances, sdk, beanstalk.interface, - account + account, ] ); diff --git a/projects/ui/src/components/Swap/Actions/Swap.tsx b/projects/ui/src/components/Swap/Actions/Swap.tsx index 0a4fbfa22a..f355c68a08 100644 --- a/projects/ui/src/components/Swap/Actions/Swap.tsx +++ b/projects/ui/src/components/Swap/Actions/Swap.tsx @@ -56,13 +56,13 @@ import { FC } from '~/types'; import useFormMiddleware from '~/hooks/ledger/useFormMiddleware'; import useSdk from '~/hooks/sdk'; import { BalanceFrom } from '~/components/Common/Form/BalanceFromRow'; +// import { Balance } from '@mui/icons-material'; /// --------------------------------------------------------------- type SwapFormValues = { /** Multiple tokens can (eventually) be swapped into tokenOut */ tokensIn: FormTokenState[]; - balanceFrom: BalanceFrom; modeIn: FarmFromMode.INTERNAL | FarmFromMode.EXTERNAL; /** One output token can be selected */ tokenOut: FormTokenState; @@ -115,9 +115,18 @@ const SwapForm: FC< const account = useAccount(); const sdk = useSdk(); + // This controls what options are show on the tokenin picker (All Balances, circulating, farm). const [fromOptions, setFromOptions] = useState([ BalanceFrom.TOTAL, ]); + // This controls the actual value chosen for tokenIn + const [balanceFromIn, setBalanceFromIn] = useState( + BalanceFrom.TOTAL + ); + // This controls the actual value chosen for tokenOut + const [balanceFromOut, setBalanceFromOut] = useState( + BalanceFrom.EXTERNAL + ); /// Derived values const stateIn = values.tokensIn[0]; @@ -143,23 +152,19 @@ const SwapForm: FC< return [_balanceIn, _balanceIn, _balanceIn?.total || ZERO_BN] as const; }, [balances, modeIn, tokenIn.address, tokensMatch]); + // Control what balances are shown in the token selector (internal/external/total) useEffect(() => { // if tokens match, then we want to allow picking different balanceFrom options if (tokensMatch) { - setFromOptions([ - modeIn === FarmFromMode.INTERNAL - ? BalanceFrom.INTERNAL - : BalanceFrom.EXTERNAL, - ]); - setFieldValue( - 'balanceFrom', + setFromOptions([BalanceFrom.INTERNAL, BalanceFrom.EXTERNAL]); + setBalanceFromIn( modeIn === FarmFromMode.INTERNAL ? BalanceFrom.INTERNAL : BalanceFrom.EXTERNAL ); } else { setFromOptions([BalanceFrom.TOTAL]); - setFieldValue('balanceFrom', BalanceFrom.TOTAL); + setBalanceFromIn(BalanceFrom.TOTAL); } }, [tokensMatch, modeIn, modeOut, setFieldValue]); @@ -187,6 +192,8 @@ const SwapForm: FC< farmFrom: FarmFromMode, farmTo: FarmToMode ) => { + console.log('Build Swap with: ', farmFrom, farmTo); + const sdkTokenIn = sdk.tokens.findByAddress(uiTokenIn.address); if (!sdkTokenIn) { throw new Error( @@ -224,10 +231,13 @@ const SwapForm: FC< [balanceIn, amountIn] ); - const swapOperation = useMemo( - () => buildSwapHelper(tokenIn, tokenOut, optimizedFromMode, modeOut), - [buildSwapHelper, optimizedFromMode, tokenIn, tokenOut, modeOut] - ); + const swapOperation = useMemo(() => { + // If we are swapping the same token (ie, transfering between farm and circulating) + // then we don't want to use the optimizedFromMode, we want to use the modeIn + // that the user selected. + const from = tokenIn.equals(tokenOut) ? modeIn : optimizedFromMode; + return buildSwapHelper(tokenIn, tokenOut, from, modeOut); + }, [buildSwapHelper, optimizedFromMode, tokenIn, tokenOut, modeIn, modeOut]); /// Memoize to prevent infinite loop on useQuote const handleBackward = useMemo( @@ -254,7 +264,7 @@ const SwapForm: FC< setFieldValue('modeOut', defaultValues.modeOut); setFieldValue('tokensIn.0', { ...defaultValues.tokensIn[0] }); setFieldValue('tokenOut', { ...defaultValues.tokenOut }); - setFieldValue('balanceFrom', BalanceFrom.TOTAL); + setBalanceFromIn(BalanceFrom.TOTAL); setFromOptions([BalanceFrom.TOTAL]); }, [defaultValues, setFieldValue]); @@ -275,14 +285,26 @@ const SwapForm: FC< setFieldValue('tokenOut.amount', resultOut?.amountOut); }, [setFieldValue, resultOut]); - const handleChangeModeIn = useCallback( - (v: FarmFromMode) => { - const newModeOut = - v === FarmFromMode.INTERNAL ? FarmToMode.EXTERNAL : FarmToMode.INTERNAL; - setFieldValue('modeOut', newModeOut); + // + const handleInputFromMode = useCallback( + (v: BalanceFrom) => { + console.log('change'); + // Picked Farm balance + if (v === BalanceFrom.INTERNAL) { + setFieldValue('modeIn', FarmToMode.INTERNAL); + setFieldValue('modeOut', FarmToMode.EXTERNAL); + setBalanceFromOut(BalanceFrom.EXTERNAL); + } + // Picked Ciruclating + else if (v === BalanceFrom.EXTERNAL) { + setFieldValue('modeIn', FarmToMode.EXTERNAL); + setFieldValue('modeOut', FarmToMode.INTERNAL); + setBalanceFromOut(BalanceFrom.INTERNAL); + } }, [setFieldValue] ); + const handleChangeModeOut = useCallback( (v: FarmToMode) => { const newModeIn = @@ -290,6 +312,9 @@ const SwapForm: FC< ? FarmFromMode.EXTERNAL : FarmFromMode.INTERNAL; setFieldValue('modeIn', newModeIn); + setBalanceFromOut( + v === FarmToMode.INTERNAL ? BalanceFrom.INTERNAL : BalanceFrom.EXTERNAL + ); }, [setFieldValue] ); @@ -344,12 +369,20 @@ const SwapForm: FC< /// If user has an INTERNAL balance of the selected token, /// or if they have no balance at all, always show INTERNAL->EXTERNAL. /// Otherwise show the reverse. - const [newModeIn, newModeOut] = - !balanceIn || balanceIn.internal.gt(0) || balanceIn.total.eq(0) - ? [FarmFromMode.INTERNAL, FarmToMode.EXTERNAL] - : [FarmFromMode.EXTERNAL, FarmToMode.INTERNAL]; - setFieldValue('modeIn', newModeIn); - setFieldValue('modeOut', newModeOut); + if (modeIn.toString() === modeOut.toString()) { + // const [newModeIn, newModeOut] = + // !balanceIn || balanceIn.internal.gt(0) || balanceIn.total.eq(0) + // ? [FarmFromMode.INTERNAL, FarmToMode.EXTERNAL] + // : [FarmFromMode.EXTERNAL, FarmToMode.INTERNAL]; + + // // maybe here + // setFieldValue('modeIn', newModeIn); + // setFieldValue('modeOut', newModeOut); + setFieldValue('modeIn', FarmFromMode.EXTERNAL); + setFieldValue('modeOut', FarmFromMode.INTERNAL); + setBalanceFromOut(BalanceFrom.INTERNAL); + } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [balanceIn, setFieldValue]); const handleReverse = useCallback(() => { @@ -439,21 +472,30 @@ const SwapForm: FC< return ( + {/* Input */} <> @@ -465,7 +507,7 @@ const SwapForm: FC< InputProps={{ endAdornment: ( @@ -487,14 +529,6 @@ const SwapForm: FC< onChange={handleChangeAmountIn} error={!noBalance && !enoughBalanceCheck} /> - {tokensMatch ? ( - - ) : null} @@ -512,6 +546,7 @@ const SwapForm: FC< endAdornment: ( ), @@ -550,9 +585,6 @@ const SwapForm: FC< ) : null} - {/** - * After the upgrade to `handleChangeModeIn` / `handleChangeModeOut` - * this should never be true. */} {diffModeCheck === false ? ( }> Please choose a different source or destination. @@ -713,7 +745,6 @@ const Swap: FC<{}> = () => { }, ], modeIn: FarmFromMode.EXTERNAL, - balanceFrom: BalanceFrom.TOTAL, tokenOut: { token: Bean, amount: undefined, @@ -803,6 +834,7 @@ const Swap: FC<{}> = () => { (err as unknown as Error).message ); } + console.log(values.swapOperation.from, values.swapOperation.to); const txn = await values.swapOperation.execute( amountIn, values.settings.slippage,