From 243bb8cbcdcb9ddb3d330e3aa00e04208d2ec1d9 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:33:13 +0100
Subject: [PATCH 1/7] wip: wire-up confirmed quote

---
 src/lib/utils/thorchain/lp/types.ts           |   9 ++
 .../components/AddLiquitity/AddLiquidity.tsx  |  40 ++++--
 .../AddLiquitity/AddLiquidityConfirm.tsx      |  76 ++++++++---
 .../AddLiquitity/AddLiquidityInput.tsx        |  52 ++++++--
 .../AddLiquitity/AddLiquityStatus.tsx         | 125 +++++++++++-------
 5 files changed, 208 insertions(+), 94 deletions(-)

diff --git a/src/lib/utils/thorchain/lp/types.ts b/src/lib/utils/thorchain/lp/types.ts
index 186f6458472..c2a5d74efdd 100644
--- a/src/lib/utils/thorchain/lp/types.ts
+++ b/src/lib/utils/thorchain/lp/types.ts
@@ -184,3 +184,12 @@ export type MidgardTvlHistoryResponse = {
   meta: MidgardTvlHistoryItem
   intervals: MidgardTvlHistoryItem[]
 }
+
+export type ConfirmedQuote = {
+  assetCryptoLiquidityAmount: string
+  assetFiatLiquidityAmount: string
+  runeCryptoLiquidityAmount: string
+  runeFiatLiquidityAmount: string
+  shareOfPoolDecimalPercent: string
+  slippageRune: string
+}
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
index dd9bacc48a9..d69115c2099 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'framer-motion'
-import React, { Suspense, useCallback } from 'react'
+import React, { Suspense, useCallback, useState } from 'react'
 import { MemoryRouter, Route, Switch, useLocation } from 'react-router'
+import type { ConfirmedQuote } from 'lib/utils/thorchain/lp/types'
 
 import { AddLiquidityConfirm } from './AddLiquidityConfirm'
 import { AddLiquidityInput } from './AddLiquidityInput'
@@ -18,12 +19,25 @@ const AddLiquidityEntries = [
 export type AddLiquidityProps = {
   headerComponent?: JSX.Element
   opportunityId?: string
+  setConfirmedQuote: (quote: ConfirmedQuote) => void
+  confirmedQuote: ConfirmedQuote
 }
 
-export const AddLiquidity: React.FC<AddLiquidityProps> = ({ opportunityId, headerComponent }) => {
+// TODO(gomes): yeah no this is wrong - split the router prop types from the exposed API prop types
+export const AddLiquidity: React.FC<Omit<AddLiquidityProps, 'setConfirmedQuote'>> = ({
+  opportunityId,
+  headerComponent,
+}) => {
+  const [confirmedQuote, setConfirmedQuote] = useState<any>(null)
+
   return (
     <MemoryRouter initialEntries={AddLiquidityEntries} initialIndex={0}>
-      <AddLiquidityRoutes opportunityId={opportunityId} headerComponent={headerComponent} />
+      <AddLiquidityRoutes
+        opportunityId={opportunityId}
+        headerComponent={headerComponent}
+        setConfirmedQuote={setConfirmedQuote}
+        confirmedQuote={confirmedQuote}
+      />
     </MemoryRouter>
   )
 }
@@ -31,21 +45,29 @@ export const AddLiquidity: React.FC<AddLiquidityProps> = ({ opportunityId, heade
 export const AddLiquidityRoutes: React.FC<AddLiquidityProps> = ({
   headerComponent,
   opportunityId,
+  confirmedQuote,
+  setConfirmedQuote,
 }) => {
   const location = useLocation()
 
   const renderAddLiquidityInput = useCallback(
-    () => <AddLiquidityInput opportunityId={opportunityId} headerComponent={headerComponent} />,
-    [headerComponent, opportunityId],
+    () => (
+      <AddLiquidityInput
+        opportunityId={opportunityId}
+        headerComponent={headerComponent}
+        setConfirmedQuote={setConfirmedQuote}
+      />
+    ),
+    [headerComponent, opportunityId, setConfirmedQuote],
   )
   const renderAddLiquidityConfirm = useCallback(
-    () => <AddLiquidityConfirm opportunityId={opportunityId} />,
-    [opportunityId],
+    () => <AddLiquidityConfirm opportunityId={opportunityId} confirmedQuote={confirmedQuote} />,
+    [confirmedQuote, opportunityId],
   )
 
   const renderAddLiquidityStatus = useCallback(
-    () => <AddLiquidityStatus opportunityId={opportunityId} />,
-    [opportunityId],
+    () => <AddLiquidityStatus opportunityId={opportunityId} confirmedQuote={confirmedQuote} />,
+    [confirmedQuote, opportunityId],
   )
 
   return (
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
index f28bc0080af..9808b7c4fda 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
@@ -46,9 +46,14 @@ const dividerStyle = {
 
 type AddLiquidityConfirmProps = {
   opportunityId?: string
+  confirmedQuote: any
 }
 
-export const AddLiquidityConfirm = ({ opportunityId }: AddLiquidityConfirmProps) => {
+export const AddLiquidityConfirm = ({
+  confirmedQuote,
+  opportunityId,
+}: AddLiquidityConfirmProps) => {
+  console.log({ confirmedQuote })
   const translate = useTranslate()
   const history = useHistory()
   const backIcon = useMemo(() => <ArrowBackIcon />, [])
@@ -120,27 +125,51 @@ export const AddLiquidityConfirm = ({ opportunityId }: AddLiquidityConfirmProps)
 
     return (
       <Stack direction='row' divider={divider} position='relative'>
-        {assets.map(_asset => (
-          <Card
-            display='flex'
-            alignItems='center'
-            justifyContent='center'
-            flexDir='column'
-            gap={4}
-            py={6}
-            px={4}
-            flex={1}
-          >
-            <AssetIcon size='sm' assetId={_asset.assetId} />
-            <Stack textAlign='center' spacing={0}>
-              <Amount.Crypto fontWeight='bold' value='100' symbol={_asset.symbol} />
-              <Amount.Fiat fontSize='sm' color='text.subtle' value='100' />
-            </Stack>
-          </Card>
-        ))}
+        {assets.map(_asset => {
+          const amountCryptoPrecision =
+            _asset.assetId === thorchainAssetId
+              ? confirmedQuote.runeCryptoLiquidityAmount
+              : confirmedQuote.assetCryptoLiquidityAmount
+          const amountFiatUserCurrency =
+            _asset.assetId === thorchainAssetId
+              ? confirmedQuote.runeFiatLiquidityAmount
+              : confirmedQuote.assetFiatLiquidityAmount
+
+          return (
+            <Card
+              display='flex'
+              alignItems='center'
+              justifyContent='center'
+              flexDir='column'
+              gap={4}
+              py={6}
+              px={4}
+              flex={1}
+            >
+              <AssetIcon size='sm' assetId={_asset.assetId} />
+              <Stack textAlign='center' spacing={0}>
+                <Amount.Crypto
+                  fontWeight='bold'
+                  value={amountCryptoPrecision}
+                  symbol={_asset.symbol}
+                />
+                <Amount.Fiat fontSize='sm' color='text.subtle' value={amountFiatUserCurrency} />
+              </Stack>
+            </Card>
+          )
+        })}
       </Stack>
     )
-  }, [asset, divider, foundPool, rune])
+  }, [
+    asset,
+    confirmedQuote.assetCryptoLiquidityAmount,
+    confirmedQuote.assetFiatLiquidityAmount,
+    confirmedQuote.runeCryptoLiquidityAmount,
+    confirmedQuote.runeFiatLiquidityAmount,
+    divider,
+    foundPool,
+    rune,
+  ])
 
   if (!(foundPool && asset && rune)) return null
 
@@ -193,7 +222,7 @@ export const AddLiquidityConfirm = ({ opportunityId }: AddLiquidityConfirmProps)
               <Row fontSize='sm'>
                 <Row.Label>{translate('pools.shareOfPool')}</Row.Label>
                 <Row.Value>
-                  <Amount.Percent value='0.2' />
+                  <Amount.Percent value={confirmedQuote.shareOfPoolDecimalPercent} />
                 </Row.Value>
               </Row>
             </TimelineItem>
@@ -224,7 +253,10 @@ export const AddLiquidityConfirm = ({ opportunityId }: AddLiquidityConfirmProps)
           <Row.Label>{translate('common.slippage')}</Row.Label>
           <Row.Value>
             <Skeleton isLoaded={true}>
-              <Amount.Crypto value={'0'} symbol={asset.symbol} />
+              <Amount.Crypto
+                value={confirmedQuote.slippageRune ?? 'TODO - loading'}
+                symbol={rune.symbol}
+              />
             </Skeleton>
           </Row.Value>
         </Row>
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
index 8a2c2910284..75ed9513ce8 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
@@ -66,6 +66,7 @@ const dividerStyle = {
 export const AddLiquidityInput: React.FC<AddLiquidityProps> = ({
   headerComponent,
   opportunityId,
+  setConfirmedQuote,
 }) => {
   const translate = useTranslate()
   const { history: browserHistory } = useBrowserRouter()
@@ -197,20 +198,12 @@ export const AddLiquidityInput: React.FC<AddLiquidityProps> = ({
   const assetMarketData = useAppSelector(state => selectMarketDataById(state, asset?.assetId ?? ''))
   const runeMarketData = useAppSelector(state => selectMarketDataById(state, rune?.assetId ?? ''))
 
-  const [assetCryptoLiquidityAmount, setAssetCryptoLiquidityAmount] = React.useState<
-    string | undefined
-  >()
-  const [assetFiatLiquidityAmount, setAssetFiatLiquidityAmount] = React.useState<
-    string | undefined
-  >()
-  const [runeCryptoLiquidityAmount, setRuneCryptoLiquidityAmount] = React.useState<
-    string | undefined
-  >()
-  const [runeFiatLiquidityAmount, setRuneFiatLiquidityAmount] = React.useState<string | undefined>()
-  const [slippageRune, setSlippageRune] = React.useState<string | undefined>()
-  const [shareOfPoolDecimalPercent, setShareOfPoolDecimalPercent] = React.useState<
-    string | undefined
-  >()
+  const [assetCryptoLiquidityAmount, setAssetCryptoLiquidityAmount] = useState<string | undefined>()
+  const [assetFiatLiquidityAmount, setAssetFiatLiquidityAmount] = useState<string | undefined>()
+  const [runeCryptoLiquidityAmount, setRuneCryptoLiquidityAmount] = useState<string | undefined>()
+  const [runeFiatLiquidityAmount, setRuneFiatLiquidityAmount] = useState<string | undefined>()
+  const [slippageRune, setSlippageRune] = useState<string | undefined>()
+  const [shareOfPoolDecimalPercent, setShareOfPoolDecimalPercent] = useState<string | undefined>()
 
   const runePerAsset = useMemo(() => {
     if (!assetMarketData || !runeMarketData) return undefined
@@ -277,6 +270,37 @@ export const AddLiquidityInput: React.FC<AddLiquidityProps> = ({
     })()
   }, [asset, assetCryptoLiquidityAmount, runeCryptoLiquidityAmount])
 
+  useEffect(() => {
+    if (
+      !(
+        assetCryptoLiquidityAmount &&
+        assetFiatLiquidityAmount &&
+        runeCryptoLiquidityAmount &&
+        runeFiatLiquidityAmount &&
+        shareOfPoolDecimalPercent &&
+        slippageRune
+      )
+    )
+      return
+
+    setConfirmedQuote({
+      assetCryptoLiquidityAmount,
+      assetFiatLiquidityAmount,
+      runeCryptoLiquidityAmount,
+      runeFiatLiquidityAmount,
+      shareOfPoolDecimalPercent,
+      slippageRune,
+    })
+  }, [
+    assetCryptoLiquidityAmount,
+    assetFiatLiquidityAmount,
+    runeCryptoLiquidityAmount,
+    runeFiatLiquidityAmount,
+    setConfirmedQuote,
+    shareOfPoolDecimalPercent,
+    slippageRune,
+  ])
+
   const tradeAssetInputs = useMemo(() => {
     if (!(asset && rune && foundPool)) return null
 
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
index 06c391e700b..60c94a0f121 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
@@ -24,6 +24,7 @@ import { CircularProgress } from 'components/CircularProgress/CircularProgress'
 import { Row } from 'components/Row/Row'
 import { SlideTransition } from 'components/SlideTransition'
 import { RawText } from 'components/Text'
+import type { ConfirmedQuote } from 'lib/utils/thorchain/lp/types'
 import { usePools } from 'pages/ThorChainLP/hooks/usePools'
 import { AsymSide } from 'pages/ThorChainLP/hooks/useUserLpData'
 import { selectAssetById } from 'state/slices/selectors'
@@ -33,9 +34,10 @@ import { AddLiquidityRoutePaths } from './types'
 
 type AddLiquidityStatusProps = {
   opportunityId?: string
+  confirmedQuote: ConfirmedQuote
 }
 
-export const AddLiquidityStatus = ({ opportunityId }: AddLiquidityStatusProps) => {
+export const AddLiquidityStatus = ({ confirmedQuote, opportunityId }: AddLiquidityStatusProps) => {
   const translate = useTranslate()
   const history = useHistory()
   const [firstTx, setFirstTx] = useState(TxStatus.Unknown)
@@ -104,7 +106,13 @@ export const AddLiquidityStatus = ({ opportunityId }: AddLiquidityStatusProps) =
       )
     }
 
-    const supplyAssets = assets.map(_asset => <Amount.Crypto value='100' symbol={_asset.symbol} />)
+    const supplyAssets = assets.map(_asset => {
+      const amountCryptoPrecision =
+        _asset.assetId === thorchainAssetId
+          ? confirmedQuote.runeCryptoLiquidityAmount
+          : confirmedQuote.assetCryptoLiquidityAmount
+      return <Amount.Crypto value={amountCryptoPrecision} symbol={_asset.symbol} />
+    })
 
     return (
       <CardBody textAlign='center'>
@@ -123,55 +131,74 @@ export const AddLiquidityStatus = ({ opportunityId }: AddLiquidityStatusProps) =
         </Flex>
       </CardBody>
     )
-  }, [asset, assets, foundPool, hStackDivider, isComplete, rune, translate])
+  }, [asset, assets, confirmedQuote, foundPool, hStackDivider, isComplete, rune, translate])
 
   const assetCards = useMemo(() => {
-    return assets.map((asset, index) => (
-      <Card key={asset.assetId}>
-        <CardHeader gap={2} display='flex' flexDir='row' alignItems='center'>
-          <AssetIcon size='xs' assetId={asset.assetId} />
-          <Amount.Crypto fontWeight='bold' value='100' symbol={asset.symbol} />{' '}
-          <Flex ml='auto' alignItems='center' gap={2}>
-            {(index === 0 && firstTx === TxStatus.Confirmed) ||
-            (index === 1 && secondTx === TxStatus.Confirmed) ? (
-              <>
-                <Button size='xs'>{translate('common.seeDetails')}</Button>
-                <Center
-                  bg='background.success'
-                  boxSize='24px'
-                  borderRadius='full'
-                  color='text.success'
-                  fontSize='xs'
-                >
-                  <FaCheck />
-                </Center>
-              </>
-            ) : (
-              <CircularProgress size='24px' />
-            )}
-          </Flex>
-        </CardHeader>
-        <Collapse in={index === 0 ? firstTx === TxStatus.Unknown : secondTx === TxStatus.Unknown}>
-          <CardBody display='flex' flexDir='column' gap={2}>
-            <Row fontSize='sm'>
-              <Row.Label>{translate('common.gasFee')}</Row.Label>
-              <Row.Value>
-                <Amount.Crypto value='0.02' symbol={asset.symbol} />
-              </Row.Value>
-            </Row>
-            <Button
-              mx={-2}
-              size='lg'
-              colorScheme='blue'
-              onClick={index === 0 ? handleNext : handleComplete}
-            >
-              {translate('common.signTransaction')}
-            </Button>
-          </CardBody>
-        </Collapse>
-      </Card>
-    ))
-  }, [assets, firstTx, secondTx, translate, handleNext, handleComplete])
+    return assets.map((asset, index) => {
+      const amountCryptoPrecision =
+        asset.assetId === thorchainAssetId
+          ? confirmedQuote.runeCryptoLiquidityAmount
+          : confirmedQuote.assetCryptoLiquidityAmount
+      return (
+        <Card key={asset.assetId}>
+          <CardHeader gap={2} display='flex' flexDir='row' alignItems='center'>
+            <AssetIcon size='xs' assetId={asset.assetId} />
+            <Amount.Crypto
+              fontWeight='bold'
+              value={amountCryptoPrecision}
+              symbol={asset.symbol}
+            />{' '}
+            <Flex ml='auto' alignItems='center' gap={2}>
+              {(index === 0 && firstTx === TxStatus.Confirmed) ||
+              (index === 1 && secondTx === TxStatus.Confirmed) ? (
+                <>
+                  <Button size='xs'>{translate('common.seeDetails')}</Button>
+                  <Center
+                    bg='background.success'
+                    boxSize='24px'
+                    borderRadius='full'
+                    color='text.success'
+                    fontSize='xs'
+                  >
+                    <FaCheck />
+                  </Center>
+                </>
+              ) : (
+                <CircularProgress size='24px' />
+              )}
+            </Flex>
+          </CardHeader>
+          <Collapse in={index === 0 ? firstTx === TxStatus.Unknown : secondTx === TxStatus.Unknown}>
+            <CardBody display='flex' flexDir='column' gap={2}>
+              <Row fontSize='sm'>
+                <Row.Label>{translate('common.gasFee')}</Row.Label>
+                <Row.Value>
+                  <Amount.Crypto value='0.02' symbol={asset.symbol} />
+                </Row.Value>
+              </Row>
+              <Button
+                mx={-2}
+                size='lg'
+                colorScheme='blue'
+                onClick={index === 0 ? handleNext : handleComplete}
+              >
+                {translate('common.signTransaction')}
+              </Button>
+            </CardBody>
+          </Collapse>
+        </Card>
+      )
+    })
+  }, [
+    assets,
+    confirmedQuote.runeCryptoLiquidityAmount,
+    confirmedQuote.assetCryptoLiquidityAmount,
+    firstTx,
+    secondTx,
+    translate,
+    handleNext,
+    handleComplete,
+  ])
 
   if (!foundPool) return null
 

From 3d156d7f7b2fa34e6d70a733e81b6b396ab33dbe Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:43:56 +0100
Subject: [PATCH 2/7] feat: split AddLiquidity exposed and internal prop types

---
 .../components/AddLiquitity/AddLiquidity.tsx      | 15 +++++++--------
 .../components/AddLiquitity/AddLiquidityInput.tsx | 10 ++++++++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
index d69115c2099..6b3f203be15 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
@@ -19,15 +19,9 @@ const AddLiquidityEntries = [
 export type AddLiquidityProps = {
   headerComponent?: JSX.Element
   opportunityId?: string
-  setConfirmedQuote: (quote: ConfirmedQuote) => void
-  confirmedQuote: ConfirmedQuote
 }
 
-// TODO(gomes): yeah no this is wrong - split the router prop types from the exposed API prop types
-export const AddLiquidity: React.FC<Omit<AddLiquidityProps, 'setConfirmedQuote'>> = ({
-  opportunityId,
-  headerComponent,
-}) => {
+export const AddLiquidity: React.FC<AddLiquidityProps> = ({ opportunityId, headerComponent }) => {
   const [confirmedQuote, setConfirmedQuote] = useState<any>(null)
 
   return (
@@ -42,7 +36,12 @@ export const AddLiquidity: React.FC<Omit<AddLiquidityProps, 'setConfirmedQuote'>
   )
 }
 
-export const AddLiquidityRoutes: React.FC<AddLiquidityProps> = ({
+type AddLiquidityRoutesProps = AddLiquidityProps & {
+  confirmedQuote: ConfirmedQuote
+  setConfirmedQuote: (quote: ConfirmedQuote) => void
+}
+
+export const AddLiquidityRoutes: React.FC<AddLiquidityRoutesProps> = ({
   headerComponent,
   opportunityId,
   confirmedQuote,
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
index 75ed9513ce8..2ac1634ff80 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
@@ -37,12 +37,12 @@ import { bn, bnOrZero, convertPrecision } from 'lib/bignumber/bignumber'
 import { isSome } from 'lib/utils'
 import { THOR_PRECISION } from 'lib/utils/thorchain/constants'
 import { estimateAddThorchainLiquidityPosition } from 'lib/utils/thorchain/lp'
+import type { ConfirmedQuote } from 'lib/utils/thorchain/lp/types'
 import { usePools } from 'pages/ThorChainLP/hooks/usePools'
 import { AsymSide } from 'pages/ThorChainLP/hooks/useUserLpData'
 import { selectAssetById, selectAssets, selectMarketDataById } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
-import type { AddLiquidityProps } from './AddLiquidity'
 import { DepositType } from './components/DepositType'
 import { PoolSummary } from './components/PoolSummary'
 import { ReadOnlyAsset } from './components/ReadOnlyAsset'
@@ -63,7 +63,13 @@ const dividerStyle = {
   marginTop: 12,
 }
 
-export const AddLiquidityInput: React.FC<AddLiquidityProps> = ({
+export type AddLiquidityInputProps = {
+  headerComponent?: JSX.Element
+  opportunityId?: string
+  setConfirmedQuote: (quote: ConfirmedQuote) => void
+}
+
+export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
   headerComponent,
   opportunityId,
   setConfirmedQuote,

From 3930653399a5384af777ed7b460f6589814169fd Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:51:46 +0100
Subject: [PATCH 3/7] feat: improve types

---
 .../ThorChainLP/components/AddLiquitity/AddLiquidity.tsx   | 7 ++++---
 .../components/AddLiquitity/AddLiquidityConfirm.tsx        | 3 ++-
 .../components/AddLiquitity/AddLiquidityInput.tsx          | 5 ++++-
 .../components/AddLiquitity/AddLiquityStatus.tsx           | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
index 6b3f203be15..43e6d39117b 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
@@ -22,7 +22,7 @@ export type AddLiquidityProps = {
 }
 
 export const AddLiquidity: React.FC<AddLiquidityProps> = ({ opportunityId, headerComponent }) => {
-  const [confirmedQuote, setConfirmedQuote] = useState<any>(null)
+  const [confirmedQuote, setConfirmedQuote] = useState<ConfirmedQuote | null>(null)
 
   return (
     <MemoryRouter initialEntries={AddLiquidityEntries} initialIndex={0}>
@@ -37,7 +37,7 @@ export const AddLiquidity: React.FC<AddLiquidityProps> = ({ opportunityId, heade
 }
 
 type AddLiquidityRoutesProps = AddLiquidityProps & {
-  confirmedQuote: ConfirmedQuote
+  confirmedQuote: ConfirmedQuote | null
   setConfirmedQuote: (quote: ConfirmedQuote) => void
 }
 
@@ -55,9 +55,10 @@ export const AddLiquidityRoutes: React.FC<AddLiquidityRoutesProps> = ({
         opportunityId={opportunityId}
         headerComponent={headerComponent}
         setConfirmedQuote={setConfirmedQuote}
+        confirmedQuote={confirmedQuote}
       />
     ),
-    [headerComponent, opportunityId, setConfirmedQuote],
+    [confirmedQuote, headerComponent, opportunityId, setConfirmedQuote],
   )
   const renderAddLiquidityConfirm = useCallback(
     () => <AddLiquidityConfirm opportunityId={opportunityId} confirmedQuote={confirmedQuote} />,
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
index 9808b7c4fda..5d226243cb3 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
@@ -25,6 +25,7 @@ import { SlideTransition } from 'components/SlideTransition'
 import { RawText } from 'components/Text'
 import { Timeline, TimelineItem } from 'components/Timeline/Timeline'
 import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
+import type { ConfirmedQuote } from 'lib/utils/thorchain/lp/types'
 import { usePools } from 'pages/ThorChainLP/hooks/usePools'
 import { AsymSide } from 'pages/ThorChainLP/hooks/useUserLpData'
 import { selectAssetById } from 'state/slices/assetsSlice/selectors'
@@ -46,7 +47,7 @@ const dividerStyle = {
 
 type AddLiquidityConfirmProps = {
   opportunityId?: string
-  confirmedQuote: any
+  confirmedQuote: ConfirmedQuote | null
 }
 
 export const AddLiquidityConfirm = ({
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
index 2ac1634ff80..2a71c27fce2 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
@@ -67,11 +67,13 @@ export type AddLiquidityInputProps = {
   headerComponent?: JSX.Element
   opportunityId?: string
   setConfirmedQuote: (quote: ConfirmedQuote) => void
+  confirmedQuote: ConfirmedQuote | null
 }
 
 export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
   headerComponent,
   opportunityId,
+  confirmedQuote,
   setConfirmedQuote,
 }) => {
   const translate = useTranslate()
@@ -194,12 +196,13 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
           variant='ghost'
           icon={backIcon}
           aria-label='go back'
+          disabled={!confirmedQuote}
         />
         {translate('pools.addLiquidity')}
         <SlippagePopover />
       </CardHeader>
     )
-  }, [backIcon, handleBackClick, headerComponent, translate])
+  }, [backIcon, confirmedQuote, handleBackClick, headerComponent, translate])
 
   const assetMarketData = useAppSelector(state => selectMarketDataById(state, asset?.assetId ?? ''))
   const runeMarketData = useAppSelector(state => selectMarketDataById(state, rune?.assetId ?? ''))
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
index 60c94a0f121..564990bfb48 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
@@ -34,7 +34,7 @@ import { AddLiquidityRoutePaths } from './types'
 
 type AddLiquidityStatusProps = {
   opportunityId?: string
-  confirmedQuote: ConfirmedQuote
+  confirmedQuote: ConfirmedQuote | null
 }
 
 export const AddLiquidityStatus = ({ confirmedQuote, opportunityId }: AddLiquidityStatusProps) => {

From 2e360a3105ff897680c4193146c1898fe91e1c4a Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:54:24 +0100
Subject: [PATCH 4/7] feat: disable continue while waiting for confirmed quote

---
 .../components/AddLiquitity/AddLiquidityInput.tsx         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
index 2a71c27fce2..c9e3ea7ce45 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
@@ -506,7 +506,13 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
         borderBottomRadius='xl'
       >
         {symAlert}
-        <Button mx={-2} size='lg' colorScheme='blue' onClick={handleSubmit}>
+        <Button
+          mx={-2}
+          size='lg'
+          colorScheme='blue'
+          isDisabled={!confirmedQuote}
+          onClick={handleSubmit}
+        >
           {translate('pools.addLiquidity')}
         </Button>
       </CardFooter>

From 0fea37473c2ddb186b612eb82429225a12755e7c Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 18:01:47 +0100
Subject: [PATCH 5/7] feat: cleanup console.log

---
 .../ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
index 5d226243cb3..b7f668e6cd4 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
@@ -54,7 +54,6 @@ export const AddLiquidityConfirm = ({
   confirmedQuote,
   opportunityId,
 }: AddLiquidityConfirmProps) => {
-  console.log({ confirmedQuote })
   const translate = useTranslate()
   const history = useHistory()
   const backIcon = useMemo(() => <ArrowBackIcon />, [])

From 80793ad4506b9e994e5719e3c4e5708e949676e9 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 18:04:58 +0100
Subject: [PATCH 6/7] feat: improve types

---
 .../components/AddLiquitity/AddLiquidity.tsx           | 10 ++++++++--
 .../components/AddLiquitity/AddLiquidityConfirm.tsx    |  2 +-
 .../components/AddLiquitity/AddLiquityStatus.tsx       |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
index 43e6d39117b..adee7edfbe7 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
@@ -61,12 +61,18 @@ export const AddLiquidityRoutes: React.FC<AddLiquidityRoutesProps> = ({
     [confirmedQuote, headerComponent, opportunityId, setConfirmedQuote],
   )
   const renderAddLiquidityConfirm = useCallback(
-    () => <AddLiquidityConfirm opportunityId={opportunityId} confirmedQuote={confirmedQuote} />,
+    () =>
+      confirmedQuote ? (
+        <AddLiquidityConfirm opportunityId={opportunityId} confirmedQuote={confirmedQuote} />
+      ) : null,
     [confirmedQuote, opportunityId],
   )
 
   const renderAddLiquidityStatus = useCallback(
-    () => <AddLiquidityStatus opportunityId={opportunityId} confirmedQuote={confirmedQuote} />,
+    () =>
+      confirmedQuote ? (
+        <AddLiquidityStatus opportunityId={opportunityId} confirmedQuote={confirmedQuote} />
+      ) : null,
     [confirmedQuote, opportunityId],
   )
 
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
index b7f668e6cd4..08f15655050 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
@@ -47,7 +47,7 @@ const dividerStyle = {
 
 type AddLiquidityConfirmProps = {
   opportunityId?: string
-  confirmedQuote: ConfirmedQuote | null
+  confirmedQuote: ConfirmedQuote
 }
 
 export const AddLiquidityConfirm = ({
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
index 564990bfb48..60c94a0f121 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
@@ -34,7 +34,7 @@ import { AddLiquidityRoutePaths } from './types'
 
 type AddLiquidityStatusProps = {
   opportunityId?: string
-  confirmedQuote: ConfirmedQuote | null
+  confirmedQuote: ConfirmedQuote
 }
 
 export const AddLiquidityStatus = ({ confirmedQuote, opportunityId }: AddLiquidityStatusProps) => {

From 82fd4e386422d96261b8f50fca774ee6ec92a908 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 17 Jan 2024 18:20:43 +0100
Subject: [PATCH 7/7] fix: use confirmedQuote.opportunityId as routing source
 of truth for confirm and status routes

---
 src/lib/utils/thorchain/lp/types.ts                |  1 +
 .../components/AddLiquitity/AddLiquidity.tsx       | 14 ++++----------
 .../AddLiquitity/AddLiquidityConfirm.tsx           |  8 +++-----
 .../components/AddLiquitity/AddLiquidityInput.tsx  |  5 ++++-
 .../components/AddLiquitity/AddLiquityStatus.tsx   |  5 +++--
 5 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/lib/utils/thorchain/lp/types.ts b/src/lib/utils/thorchain/lp/types.ts
index c2a5d74efdd..d45f1a8d600 100644
--- a/src/lib/utils/thorchain/lp/types.ts
+++ b/src/lib/utils/thorchain/lp/types.ts
@@ -192,4 +192,5 @@ export type ConfirmedQuote = {
   runeFiatLiquidityAmount: string
   shareOfPoolDecimalPercent: string
   slippageRune: string
+  opportunityId: string
 }
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
index adee7edfbe7..61f9b406832 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
@@ -61,19 +61,13 @@ export const AddLiquidityRoutes: React.FC<AddLiquidityRoutesProps> = ({
     [confirmedQuote, headerComponent, opportunityId, setConfirmedQuote],
   )
   const renderAddLiquidityConfirm = useCallback(
-    () =>
-      confirmedQuote ? (
-        <AddLiquidityConfirm opportunityId={opportunityId} confirmedQuote={confirmedQuote} />
-      ) : null,
-    [confirmedQuote, opportunityId],
+    () => (confirmedQuote ? <AddLiquidityConfirm confirmedQuote={confirmedQuote} /> : null),
+    [confirmedQuote],
   )
 
   const renderAddLiquidityStatus = useCallback(
-    () =>
-      confirmedQuote ? (
-        <AddLiquidityStatus opportunityId={opportunityId} confirmedQuote={confirmedQuote} />
-      ) : null,
-    [confirmedQuote, opportunityId],
+    () => (confirmedQuote ? <AddLiquidityStatus confirmedQuote={confirmedQuote} /> : null),
+    [confirmedQuote],
   )
 
   return (
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
index 08f15655050..c7fdc3f0468 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
@@ -46,18 +46,16 @@ const dividerStyle = {
 }
 
 type AddLiquidityConfirmProps = {
-  opportunityId?: string
   confirmedQuote: ConfirmedQuote
 }
 
-export const AddLiquidityConfirm = ({
-  confirmedQuote,
-  opportunityId,
-}: AddLiquidityConfirmProps) => {
+export const AddLiquidityConfirm = ({ confirmedQuote }: AddLiquidityConfirmProps) => {
   const translate = useTranslate()
   const history = useHistory()
   const backIcon = useMemo(() => <ArrowBackIcon />, [])
 
+  const { opportunityId } = confirmedQuote
+
   const { data: parsedPools } = usePools()
 
   const foundPool = useMemo(() => {
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
index c9e3ea7ce45..95e737bd681 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx
@@ -287,7 +287,8 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
         runeCryptoLiquidityAmount &&
         runeFiatLiquidityAmount &&
         shareOfPoolDecimalPercent &&
-        slippageRune
+        slippageRune &&
+        activeOpportunityId
       )
     )
       return
@@ -299,8 +300,10 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
       runeFiatLiquidityAmount,
       shareOfPoolDecimalPercent,
       slippageRune,
+      opportunityId: activeOpportunityId,
     })
   }, [
+    activeOpportunityId,
     assetCryptoLiquidityAmount,
     assetFiatLiquidityAmount,
     runeCryptoLiquidityAmount,
diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
index 60c94a0f121..ec811b4743f 100644
--- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquityStatus.tsx
@@ -33,17 +33,18 @@ import { useAppSelector } from 'state/store'
 import { AddLiquidityRoutePaths } from './types'
 
 type AddLiquidityStatusProps = {
-  opportunityId?: string
   confirmedQuote: ConfirmedQuote
 }
 
-export const AddLiquidityStatus = ({ confirmedQuote, opportunityId }: AddLiquidityStatusProps) => {
+export const AddLiquidityStatus = ({ confirmedQuote }: AddLiquidityStatusProps) => {
   const translate = useTranslate()
   const history = useHistory()
   const [firstTx, setFirstTx] = useState(TxStatus.Unknown)
   const [secondTx, setSecondTx] = useState(TxStatus.Pending)
   const [isComplete, setIsComplete] = useState(false)
 
+  const { opportunityId } = confirmedQuote
+
   const { data: parsedPools } = usePools()
 
   const foundPool = useMemo(() => {