Revert "Revert "Refinance integration with the new SDK version v0.2.1 (…

…#3903)" (#3908)" (#3909)

This reverts commit e8c78eb.

components/portfolio/positions/PortfolioPositionBlock.tsx

@@ -101,7 +101,9 @@ export const PortfolioPositionBlock = ({ position }: { position: PortfolioPositi
  >
  {position.availableToRefinance &&
  isRefinanceEnabled &&
- position.netValue >= emptyPortfolioPositionNetValueThreshold && (
+ position.netValue >= emptyPortfolioPositionNetValueThreshold &&
+ // Position handler only supports Maker for now, we need to add support in other protocol handlers
+ position.protocol === LendingProtocol.Maker && (
  <RefinancePortfolioBanner position={position} />
  )}
  <AppLink href={position.url}>

components/vault/GeneralManageLayout.tsx

@@ -59,7 +59,7 @@ export function GeneralManageLayout({
  address: account,
  chainId,
  collateralAmount: vault.lockedCollateral.toString(),
- collateralToken: vault.token,
+ collateralTokenSymbol: vault.token,
  debtAmount: vault.debt.toString(),
  id: vault.id.toString(),
  slippage: generalManageVault.state.slippage.toNumber(),

features/omni-kit/contexts/OmniGeneralContext.tsx

@@ -23,6 +23,7 @@ import type {
  OmniSupportedNetworkIds,
 } from 'features/omni-kit/types'
 import { OmniSidebarAutomationStep } from 'features/omni-kit/types'
+import type { RefinanceContextInput } from 'features/refinance/contexts'
 import type { TxDetails } from 'helpers/handleTransaction'
 import { useAccount } from 'helpers/useAccount'
 import type { LendingProtocol } from 'lendingProtocols'
@@ -78,6 +79,7 @@ interface OmniGeneralContextProviderProps {
  steps: OmniSidebarStep[]
  automationSteps: OmniSidebarAutomationStep[]
  walletNetwork: NetworkConfig
+ refinanceContextInput?: RefinanceContextInput
 }
 
 export enum OmniSlippageSourceSettings {

features/omni-kit/contexts/OmniRefinanceContext.tsx

@@ -0,0 +1,111 @@
+import { useOmniGeneralContext } from 'features/omni-kit/contexts/OmniGeneralContext'
+import { useOmniProductContext } from 'features/omni-kit/contexts/OmniProductContext'
+import type { RefinanceContextInput } from 'features/refinance/contexts'
+import { omniProductTypeToSDKType } from 'features/refinance/helpers/omniProductTypeToSDKType'
+import { useMorphoRefinanceContextInputs } from 'features/refinance/hooks/useMorphoRefinanceContextInputs'
+import { useAccount } from 'helpers/useAccount'
+import { LendingProtocol } from 'lendingProtocols'
+import React, { type PropsWithChildren, useContext, useMemo } from 'react'
+
+interface OmniRefinanceContext {
+ refinanceContextInput?: RefinanceContextInput
+}
+
+const omniRefinanceContext = React.createContext<OmniRefinanceContext | undefined>(undefined)
+
+export function useOmniRefinanceContext(): OmniRefinanceContext {
+ const context = useContext(omniRefinanceContext)
+
+ if (!context) throw new Error('OmniRefinanceContext not available!')
+ return context
+}
+
+export function OmniRefinanceContextProvider({
+ children,
+}: PropsWithChildren<OmniRefinanceContext>) {
+ const { walletAddress } = useAccount()
+
+ const {
+ environment: {
+ collateralToken,
+ quoteToken,
+ collateralPrice,
+ quotePrice,
+ ethPrice,
+ isOwner,
+ networkId,
+ poolId,
+ pairId,
+ positionId,
+ productType,
+ protocol,
+ slippage,
+ },
+ } = useOmniGeneralContext()
+ const {
+ position: {
+ currentPosition: { position },
+ },
+ automation: { positionTriggers },
+ } = useOmniProductContext(productType)
+
+ const borrowRate = 'borrowRate' in position ? position.borrowRate : undefined
+ const ltv = 'riskRatio' in position ? position.riskRatio.loanToValue : undefined
+ const maxLtv = 'maxRiskRatio' in position ? position.maxRiskRatio.loanToValue : undefined
+ const liquidationPrice = 'liquidationPrice' in position ? position.liquidationPrice : undefined
+ const collateralAmount = 'collateralAmount' in position ? position.collateralAmount : undefined
+ const debtAmount = 'debtAmount' in position ? position.debtAmount : undefined
+
+ const refinanceHasAllData =
+ positionId &&
+ borrowRate &&
+ poolId &&
+ ltv &&
+ maxLtv &&
+ liquidationPrice &&
+ collateralAmount &&
+ debtAmount
+
+ let refinanceInput: RefinanceContextInput | undefined
+ // TODO: Add support for other protocols
+ switch (protocol) {
+ case LendingProtocol.MorphoBlue:
+ const morphoRefinanceInput = !refinanceHasAllData
+ ? undefined
+ : useMorphoRefinanceContextInputs({
+ address: walletAddress,
+ networkId,
+ collateralTokenSymbol: collateralToken,
+ debtTokenSymbol: quoteToken,
+ collateralAmount: collateralAmount.toString(),
+ debtAmount: debtAmount.toString(),
+ vaultId: positionId,
+ slippage: slippage.toNumber(),
+ collateralPrice: collateralPrice.toString(),
+ debtPrice: quotePrice.toString(),
+ ethPrice: ethPrice.toString(),
+ borrowRate: borrowRate.toString(),
+ liquidationPrice: liquidationPrice.toString(),
+ ltv: ltv.toString(),
+ maxLtv: maxLtv.toString(),
+ marketId: poolId,
+ positionType: omniProductTypeToSDKType(productType),
+ isOwner,
+ pairId,
+ triggerData: positionTriggers,
+ owner: position.owner,
+ })
+ refinanceInput = morphoRefinanceInput
+ break
+ }
+
+ const refinanceContextInput = !refinanceHasAllData ? undefined : refinanceInput
+
+ const context: OmniRefinanceContext = useMemo(() => {
+ return {
+ refinanceContextInput,
+ }
+ }, [refinanceContextInput])
+
+ return <omniRefinanceContext.Provider value={context}>{children}</omniRefinanceContext.Provider>
+}

features/omni-kit/controllers/OmniOverviewController.tsx

@@ -19,7 +19,13 @@ export function OmniOverviewController() {
  const {
  dynamicMetadata: {
  values: { footerColumns },
- elements: { overviewBanner, overviewContent, overviewFooter, overviewWithSimulation },
+ elements: {
+ overviewBanner,
+ overviewContent,
+ overviewFooter,
+ overviewWithSimulation,
+ renderOverviewBanner,
+ },
  notifications,
  },
  } = useOmniProductContext(productType)
@@ -53,6 +59,7 @@ export function OmniOverviewController() {
  }
  />
  {overviewBanner}
+ {renderOverviewBanner?.()}
  <OmniDetailSectionErc20Claims />
  </Grid>
  )

features/omni-kit/controllers/OmniProductController.tsx

@@ -4,6 +4,7 @@ import { WithConnection } from 'components/connectWallet'
 import { PageSEOTags } from 'components/HeadTags'
 import { PositionLoadingState } from 'components/vault/PositionLoadingState'
 import { OmniGeneralContextProvider, OmniProductContextProvider } from 'features/omni-kit/contexts'
+import { OmniRefinanceContextProvider } from 'features/omni-kit/contexts/OmniRefinanceContext'
 import { OmniLayoutController } from 'features/omni-kit/controllers'
 import {
  getOmniExtraTokenData,
@@ -343,7 +344,9 @@ export const OmniProductController = <Auction, History, Position>({
  {...omniProductContextProviderCommons}
  {...omniProductContextProviderData}
  >
- <OmniLayoutController txHandler={useTxHandler} />
+ <OmniRefinanceContextProvider>
+ <OmniLayoutController txHandler={useTxHandler} />
+ </OmniRefinanceContextProvider>
  </OmniProductContextProvider>
  )
  },

features/omni-kit/protocols/morpho-blue/components/banners/MorphoOverviewBanner.tsx

@@ -0,0 +1,15 @@
+import { useOmniRefinanceContext } from 'features/omni-kit/contexts/OmniRefinanceContext'
+import { RefinanceBanner } from 'features/refinance/components'
+import { useAppConfig } from 'helpers/config'
+import React from 'react'
+
+export const OverviewBanner = () => {
+ const omniRefinance = useOmniRefinanceContext()
+ const { EnableRefinance: refinanceEnabled } = useAppConfig('features')
+
+ if (!refinanceEnabled || omniRefinance.refinanceContextInput == null) {
+ return null
+ }
+
+ return <RefinanceBanner contextInput={omniRefinance.refinanceContextInput} />
+}

features/omni-kit/protocols/morpho-blue/hooks/useMorphoBanner.tsx

@@ -0,0 +1,6 @@
+import { OverviewBanner } from 'features/omni-kit/protocols/morpho-blue/components/banners/MorphoOverviewBanner'
+import React from 'react'
+
+export const useMorphoBanner = () => {
+ return { renderOverviewBanner: () => <OverviewBanner /> }
+}

features/omni-kit/protocols/morpho-blue/metadata/useMorphoMetadata.tsx

@@ -21,6 +21,7 @@ import {
  morphoFlowStateFilter,
 } from 'features/omni-kit/protocols/morpho-blue/helpers'
 import type { MorphoHistoryEvent } from 'features/omni-kit/protocols/morpho-blue/history/types'
+import { useMorphoBanner } from 'features/omni-kit/protocols/morpho-blue/hooks/useMorphoBanner'
 import type {
  GetOmniMetadata,
  LendingMetadata,
@@ -86,6 +87,8 @@ export const useMorphoMetadata: GetOmniMetadata = (productContext) => {
  ltv: resolvedSimulation?.maxRiskRatio.loanToValue || position.maxRiskRatio.loanToValue,
  })
 
+ const { renderOverviewBanner } = useMorphoBanner()
+
  return {
  notifications,
  validations,
@@ -150,6 +153,7 @@ export const useMorphoMetadata: GetOmniMetadata = (productContext) => {
  overviewContent: <MorphoDetailsSectionContentWrapper />,
  overviewFooter: <MorphoDetailsSectionFooter />,
  overviewWithSimulation: isYieldLoopWithData,
+ renderOverviewBanner,
  },
  featureToggles: {
  safetySwitch: morphoSafetySwitchOn,

features/omni-kit/types.ts

@@ -405,6 +405,7 @@ interface CommonMetadataValues {
 interface CommonMetadataElements {
  faq: ReactNode
  overviewBanner?: ReactNode
+ renderOverviewBanner?: () => ReactNode
  positionBanner?: ReactNode
  overviewContent: ReactNode
  overviewFooter: ReactNode

features/refinance/components/RefinancePortfolioBanner.tsx

@@ -95,7 +95,7 @@ export const RefinancePortfolioBanner: FC<RefinancePortfolioBannerProps> = ({ po
  network,
  primaryToken,
  secondaryToken,
- positionId,
+ positionId: vaultId,
  automations,
  protocol,
  type: productType,
@@ -106,6 +106,7 @@ export const RefinancePortfolioBanner: FC<RefinancePortfolioBannerProps> = ({ po
  maxLtv,
  ltv,
  poolId,
+ positionId,
  pairId,
  collateral,
  collateralPrice,
@@ -129,7 +130,7 @@ export const RefinancePortfolioBanner: FC<RefinancePortfolioBannerProps> = ({ po
  [LendingProtocol.Maker]: (
  <Text as="span" variant="boldParagraph3" color="primary100">
  {tPortfolio('refinance.banner.default', {
- id: positionId,
+ id: vaultId,
  })}
  </Text>
  ),
@@ -140,7 +141,7 @@ export const RefinancePortfolioBanner: FC<RefinancePortfolioBannerProps> = ({ po
  [LendingProtocol.MorphoBlue]: null,
  }[protocol]
 
- const contextId = `${positionId}${primaryToken}${secondaryToken}`.toLowerCase()
+ const contextId = `${vaultId}${primaryToken}${secondaryToken}`.toLowerCase()
 
  const isDisabled =
  refinanceGeneralContext?.ctx?.environment?.contextId !== contextId &&
@@ -192,6 +193,7 @@ export const RefinancePortfolioBanner: FC<RefinancePortfolioBannerProps> = ({ po
  positionType: omniProductTypeToSDKType(productType),
  pairId,
  isOwner: wallet?.address.toLowerCase() === portfolioAddress?.toLowerCase(),
+ owner: undefined,
  })
 
  handleSetContext(contextInput)

features/refinance/components/steps/RefinanceSwapSection.tsx

@@ -34,7 +34,7 @@ export const RefinanceSwapSection = () => {
  const toToken = swap.toTokenAmount.token.symbol
  const toTokenAmount = new BigNumber(swap.toTokenAmount.amount)
 
- const priceImpact = new BigNumber(swap.priceImpact.value)
+ const priceImpact = new BigNumber(swap.priceImpact.value).div(100)
  const slippage = new BigNumber(swap.slippage.value)
  const feePrice = new BigNumber(isCollateral ? collateralPrice : debtPrice)
  const fee = new BigNumber(swap.summerFee.amount).times(feePrice)

features/refinance/components/steps/RefinanceWhatsChangingStep.tsx

@@ -7,7 +7,7 @@ import { RefinanceReviewChangesSection } from 'features/refinance/components/ste
 import { RefinanceRouteSection } from 'features/refinance/components/steps/RefinanceRouteSection'
 import { RefinanceSwapSection } from 'features/refinance/components/steps/RefinanceSwapSection'
 import { useRefinanceContext } from 'features/refinance/contexts'
-import { replaceTokenSymbolWETHWithETH } from 'features/refinance/helpers/replaceTokenSymbolWETHWithETH'
+import { replaceTokenSymbolWETHWithETH } from 'features/refinance/helpers/replaceWETHWithETH'
 import { formatFiatBalance } from 'helpers/formatters/format'
 import { staticFilesRuntimeUrl } from 'helpers/staticPaths'
 import { useTranslation } from 'next-i18next'

features/refinance/contexts/RefinanceGeneralContext.tsx

@@ -14,9 +14,9 @@ import type {
  AddressValue,
  ChainInfo,
  IPoolId,
+ ITokenAmount,
  PositionId,
  PositionType,
- TokenAmount,
 } from 'summerfi-sdk-common'
 
 export interface RefinanceSteps {
@@ -71,6 +71,7 @@ export type RefinanceContextInput = {
  borrowRate: string
  supplyRate: string
  protocolPrices: Record<string, string>
+ owner?: string
  }
  automations: RefinanceContextInputAutomations
  contextId: string
@@ -87,8 +88,8 @@ export type RefinanceGeneralContextBase = {
  }
  position: {
  positionId: PositionId
- collateralTokenData: TokenAmount
- debtTokenData: TokenAmount
+ collateralTokenData: ITokenAmount
+ debtTokenData: ITokenAmount
  liquidationPrice: string
  ltv: RiskRatio
  positionType: PositionType

features/refinance/controllers/RefinanceModalController.tsx

@@ -12,9 +12,9 @@ import type { RefinanceContextInput } from 'features/refinance/contexts/Refinanc
 import { useRefinanceGeneralContext } from 'features/refinance/contexts/RefinanceGeneralContext'
 import { RefinanceFormController } from 'features/refinance/controllers/index'
 import {
- getRefinanceAaveLikeInterestRates,
+ getMakerPositionOwner,
  getRefinanceInterestRatesInputParams,
- getRefinancePositionOwner,
+ getRefinanceTargetInterestRates,
 } from 'features/refinance/helpers'
 import { getNetAPY } from 'features/refinance/helpers/getBorrowRate'
 import { useSdkSimulation } from 'features/refinance/hooks/useSdkSimulation'
@@ -55,28 +55,33 @@ export const RefinanceModalController: FC<RefinanceModalProps> = ({ contextInput
 
  const positionOwner = useMemo(
  () =>
- !cache.positionOwner
- ? from(
- getRefinancePositionOwner({
- protocol: contextInput.position.lendingProtocol,
- positionId: contextInput.position.positionId.id,
- chainId: contextInput.environment.chainId,
- }),
- )
- : of(cache.positionOwner),
+ cache.positionOwner !== undefined
+ ? of(cache.positionOwner)
+ : contextInput.position.owner !== undefined
+ ? of(contextInput.position.owner)
+ : from(
+ getMakerPositionOwner({
+ positionId: contextInput.position.positionId.id,
+ chainId: contextInput.environment.chainId,
+ }),
+ ),
  [
  cache.positionOwner,
  contextInput.environment.chainId,
- contextInput.position.lendingProtocol,
+ contextInput.position.owner,
  contextInput.position.positionId.id,
  ],
  )
 
- // If needed we should extend it with other network & protocols and map to the same interface
  const interestRates = useMemo(
  () =>
  !cache.interestRates
- ? from(getRefinanceAaveLikeInterestRates(interestRatesInput))
+ ? from(
+ getRefinanceTargetInterestRates(
+ interestRatesInput,
+ contextInput.position.lendingProtocol,
+ ),
+ )
  : of(cache.interestRates),
  [cache.interestRates],
  )