feat: basic add liquidity wire-up (#6023)

* feat: basic add deposit wire-up * feat: cleanup * feat: programmatic deposit assets * feat: programmatic symAlert * feat: wire-up confirm with a/sym support * feat: confirm and status * fix: asset network fee --------- Co-authored-by: Apotheosis <0xapotheosis@gmail.com>
shapeshift · Jan 17, 2024 · 75a31c0 · 75a31c0
1 parent 78b0b80
commit 75a31c0
Show file tree

Hide file tree

Showing 7 changed files with 332 additions and 199 deletions.
diff --git a/src/pages/ThorChainLP/Pool/Pool.tsx b/src/pages/ThorChainLP/Pool/Pool.tsx
@@ -398,7 +398,10 @@ export const Pool = () => {
             <Tabs onChange={setStepIndex} variant='unstyled' index={stepIndex}>
               <TabPanels>
                 <TabPanel px={0} py={0}>
-                  <AddLiquidity headerComponent={TabHeader} />
+                  <AddLiquidity
+                    headerComponent={TabHeader}
+                    opportunityId={foundPool.opportunityId}
+                  />
                 </TabPanel>
                 <TabPanel px={0} py={0}>
                   <RemoveLiquidity headerComponent={TabHeader} />

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidity.tsx
@@ -17,26 +17,36 @@ const AddLiquidityEntries = [
 
 export type AddLiquidityProps = {
   headerComponent?: JSX.Element
+  opportunityId?: string
 }
 
-export const AddLiquidity: React.FC<AddLiquidityProps> = ({ headerComponent }) => {
+export const AddLiquidity: React.FC<AddLiquidityProps> = ({ opportunityId, headerComponent }) => {
   return (
     <MemoryRouter initialEntries={AddLiquidityEntries} initialIndex={0}>
-      <AddLiquidityRoutes headerComponent={headerComponent} />
+      <AddLiquidityRoutes opportunityId={opportunityId} headerComponent={headerComponent} />
     </MemoryRouter>
   )
 }
 
-export const AddLiquidityRoutes: React.FC<AddLiquidityProps> = ({ headerComponent }) => {
+export const AddLiquidityRoutes: React.FC<AddLiquidityProps> = ({
+  headerComponent,
+  opportunityId,
+}) => {
   const location = useLocation()
 
   const renderAddLiquidityInput = useCallback(
-    () => <AddLiquidityInput headerComponent={headerComponent} />,
-    [headerComponent],
+    () => <AddLiquidityInput opportunityId={opportunityId} headerComponent={headerComponent} />,
+    [headerComponent, opportunityId],
+  )
+  const renderAddLiquidityConfirm = useCallback(
+    () => <AddLiquidityConfirm opportunityId={opportunityId} />,
+    [opportunityId],
   )
-  const renderAddLiquidityConfirm = useCallback(() => <AddLiquidityConfirm />, [])
 
-  const renderAddLiquidityStatus = useCallback(() => <AddLiquidityStatus />, [])
+  const renderAddLiquidityStatus = useCallback(
+    () => <AddLiquidityStatus opportunityId={opportunityId} />,
+    [opportunityId],
+  )
 
   return (
     <AnimatePresence exitBeforeEnter initial={false}>

diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityConfirm.tsx
@@ -11,19 +11,24 @@ import {
   Skeleton,
   Stack,
 } from '@chakra-ui/react'
-import { ethAssetId, thorchainAssetId } from '@shapeshiftoss/caip'
+import { thorchainAssetId } from '@shapeshiftoss/caip'
+import type { Asset } from '@shapeshiftoss/types'
 import prettyMilliseconds from 'pretty-ms'
 import { useCallback, useMemo } from 'react'
 import { FaPlus } from 'react-icons/fa6'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
-import { usdcAssetId } from 'test/mocks/accounts'
 import { Amount } from 'components/Amount/Amount'
 import { AssetIcon } from 'components/AssetIcon'
 import { Row } from 'components/Row/Row'
 import { SlideTransition } from 'components/SlideTransition'
 import { RawText } from 'components/Text'
 import { Timeline, TimelineItem } from 'components/Timeline/Timeline'
+import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
+import { usePools } from 'pages/ThorChainLP/hooks/usePools'
+import { AsymSide } from 'pages/ThorChainLP/hooks/useUserLpData'
+import { selectAssetById } from 'state/slices/assetsSlice/selectors'
+import { useAppSelector } from 'state/store'
 
 import { PoolIcon } from '../PoolIcon'
 import { AddLiquidityRoutePaths } from './types'
@@ -39,11 +44,35 @@ const dividerStyle = {
   zIndex: 4,
 }
 
-export const AddLiquidityConfirm = () => {
+type AddLiquidityConfirmProps = {
+  opportunityId?: string
+}
+
+export const AddLiquidityConfirm = ({ opportunityId }: AddLiquidityConfirmProps) => {
   const translate = useTranslate()
   const history = useHistory()
   const backIcon = useMemo(() => <ArrowBackIcon />, [])
-  const assetIds = useMemo(() => [ethAssetId, usdcAssetId], [])
+
+  const { data: parsedPools } = usePools()
+
+  const foundPool = useMemo(() => {
+    if (!parsedPools) return undefined
+
+    return parsedPools.find(pool => pool.opportunityId === opportunityId)
+  }, [opportunityId, parsedPools])
+
+  const asset = useAppSelector(state => selectAssetById(state, foundPool?.assetId ?? ''))
+  const assetNetwork = useMemo(() => {
+    if (!asset) return undefined
+    return getChainAdapterManager().get(asset.chainId)?.getDisplayName()
+  }, [asset])
+
+  const rune = useAppSelector(state => selectAssetById(state, thorchainAssetId))
+
+  const assetIds = useMemo(() => {
+    if (!foundPool) return []
+    return [foundPool.assetId, thorchainAssetId]
+  }, [foundPool])
 
   const handleBack = useCallback(() => {
     history.push(AddLiquidityRoutePaths.Input)
@@ -54,6 +83,8 @@ export const AddLiquidityConfirm = () => {
   }, [history])
 
   const divider = useMemo(() => {
+    if (foundPool?.asymSide) return <></>
+
     return (
       <Flex style={dividerStyle}>
         <Center borderRadius='full' bg='background.surface.base' boxSize='42px'>
@@ -74,7 +105,44 @@ export const AddLiquidityConfirm = () => {
         </Center>
       </Flex>
     )
-  }, [])
+  }, [foundPool?.asymSide])
+
+  const depositCards = useMemo(() => {
+    if (!foundPool || !asset || !rune) return null
+
+    const assets: Asset[] = (() => {
+      if (foundPool.asymSide === null) return [asset, rune]
+      if (foundPool.asymSide === AsymSide.Rune) return [rune]
+      if (foundPool.asymSide === AsymSide.Asset) return [asset]
+
+      throw new Error('Invalid asym side')
+    })()
+
+    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>
+        ))}
+      </Stack>
+    )
+  }, [asset, divider, foundPool, rune])
+
+  if (!(foundPool && asset && rune)) return null
 
   return (
     <SlideTransition>
@@ -87,40 +155,7 @@ export const AddLiquidityConfirm = () => {
       </CardHeader>
       <CardBody pt={0}>
         <Stack spacing={8}>
-          <Stack direction='row' divider={divider} position='relative'>
-            <Card
-              display='flex'
-              alignItems='center'
-              justifyContent='center'
-              flexDir='column'
-              gap={4}
-              py={6}
-              px={4}
-              flex={1}
-            >
-              <AssetIcon size='sm' assetId={usdcAssetId} />
-              <Stack textAlign='center' spacing={0}>
-                <Amount.Crypto fontWeight='bold' value='100' symbol='USDC' />
-                <Amount.Fiat fontSize='sm' color='text.subtle' value='100' />
-              </Stack>
-            </Card>
-            <Card
-              display='flex'
-              alignItems='center'
-              justifyContent='center'
-              flexDir='column'
-              gap={4}
-              py={6}
-              px={4}
-              flex={1}
-            >
-              <AssetIcon size='sm' assetId={thorchainAssetId} />
-              <Stack textAlign='center' spacing={0}>
-                <Amount.Crypto fontWeight='bold' value='100' symbol='RUNE' />
-                <Amount.Fiat fontSize='sm' color='text.subtle' value='100' />
-              </Stack>
-            </Card>
-          </Stack>
+          {depositCards}
           <Timeline>
             <TimelineItem>
               <Row fontSize='sm' fontWeight='medium'>
@@ -143,7 +178,7 @@ export const AddLiquidityConfirm = () => {
             </TimelineItem>
             <TimelineItem>
               <Row fontSize='sm' fontWeight='medium'>
-                <Row.Label>{translate('pools.chainFee', { chain: 'Ethereum' })}</Row.Label>
+                <Row.Label>{translate('pools.chainFee', { chain: assetNetwork })}</Row.Label>
                 <Row.Value display='flex' gap={1}>
                   <Amount.Crypto value='0.02' symbol='ETH' />
                   <Flex color='text.subtle'>
@@ -179,15 +214,17 @@ export const AddLiquidityConfirm = () => {
           <Row.Value>
             <Flex gap={2} alignItems='center' justifyContent='center'>
               <PoolIcon size='xs' assetIds={assetIds} />
-              <RawText fontWeight='medium'>ETH/USDC</RawText>
+              <RawText fontWeight='medium'>
+                {asset.symbol}/{rune.symbol}
+              </RawText>
             </Flex>
           </Row.Value>
         </Row>
         <Row fontSize='sm' fontWeight='medium'>
           <Row.Label>{translate('common.slippage')}</Row.Label>
           <Row.Value>
             <Skeleton isLoaded={true}>
-              <Amount.Crypto value={'0'} symbol={'USDC'} />
+              <Amount.Crypto value={'0'} symbol={asset.symbol} />
             </Skeleton>
           </Row.Value>
         </Row>