chore: display usd value on input

pancakeswap · Jan 14, 2025 · 7c08fc2 · 7c08fc2
1 parent a5cc282
commit 7c08fc2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 4 deletions.
diff --git a/apps/web/src/views/Idos/components/IdoCards/IdoCards.tsx b/apps/web/src/views/Idos/components/IdoCards/IdoCards.tsx
@@ -11,6 +11,7 @@ import {
   domAnimation,
   FlexGap,
   LazyAnimatePresence,
+  Loading,
   ModalBody,
   ModalContainer,
   ModalV2,
@@ -22,6 +23,7 @@ import getTimePeriods from '@pancakeswap/utils/getTimePeriods'
 import { CurrencyLogo, SwapUIV2 } from '@pancakeswap/widgets-internal'
 import BigNumber from 'bignumber.js'
 import ConnectWalletButton from 'components/ConnectWalletButton'
+import { useStablecoinPriceAmount } from 'hooks/useStablecoinPrice'
 import { useCallback, useMemo, useState } from 'react'
 import { useCurrencyBalance } from 'state/wallet/hooks'
 import { styled } from 'styled-components'
@@ -178,6 +180,13 @@ export const IdoStakeActionCard: React.FC<{ idoPublicData: IDOPublicData }> = ({
   )
 }
 
+const formatDollarAmount = (amount: number) => {
+  if (amount > 0 && amount < 0.01) {
+    return '<0.01'
+  }
+  return formatNumber(amount)
+}
+
 export const IdoDepositButton: React.FC<{ idoPublicData: IDOPublicData }> = ({ idoPublicData }) => {
   const { t } = useTranslation()
   const { onDismiss, onOpen, isOpen } = useModalV2()
@@ -230,6 +239,16 @@ export const IdoDepositButton: React.FC<{ idoPublicData: IDOPublicData }> = ({ i
     return false
   }, [depositAmount, inputBalance])
 
+  const amountInDollar = useStablecoinPriceAmount(
+    idoPublicData?.stakeCurrency ?? undefined,
+    value !== undefined && Number.isFinite(+value) ? +value : undefined,
+    {
+      hideIfPriceImpactTooHigh: true,
+      enabled: Boolean(value !== undefined && Number.isFinite(+value)),
+    },
+  )
+  const isInputloading = inputBalance === undefined
+
   return (
     <>
       <Button width="100%" onClick={onOpen}>
@@ -266,6 +285,28 @@ export const IdoDepositButton: React.FC<{ idoPublicData: IDOPublicData }> = ({ i
                     <CurrencyLogo size="40px" currency={idoPublicData?.stakeCurrency} />
                   </FlexGap>
                 }
+                bottom={
+                  isInputloading || Number.isFinite(amountInDollar) ? (
+                    <Box position="absolute" bottom="12px" right="0px">
+                      <FlexGap justifyContent="flex-end" mr="1rem">
+                        <FlexGap maxWidth={['120px', '160px', '200px', '240px']}>
+                          {isInputloading ? (
+                            <Loading width="14px" height="14px" />
+                          ) : Number.isFinite(amountInDollar) ? (
+                            <>
+                              <Text fontSize="14px" color="textSubtle" ellipsis>
+                                {`~${amountInDollar && formatDollarAmount(amountInDollar)}`}
+                              </Text>
+                              <Text ml="4px" fontSize="14px" color="textSubtle">
+                                USD
+                              </Text>
+                            </>
+                          ) : null}
+                        </FlexGap>
+                      </FlexGap>
+                    </Box>
+                  ) : null
+                }
               />
               <FlexGap>
                 {maxAmountInput?.greaterThan(0) &&

diff --git a/apps/web/src/views/Idos/components/IfoContainer.tsx b/apps/web/src/views/Idos/components/IfoContainer.tsx
@@ -14,12 +14,14 @@ interface TypeProps {
 
 const IfoContainer: React.FC<React.PropsWithChildren<TypeProps>> = ({ ifoSection, ifoSteps, faq }) => {
   return (
-    <IfoLayout id="current-ifo">
-      <Container px="0">
+    <IfoLayout id="current-ido">
+      {/* <Container px="0">
         <IfoLayoutWrapper>{ifoSection}</IfoLayoutWrapper>
-      </Container>
+      </Container> */}
       <SectionBackground>
-        <Container>{ifoSteps}</Container>
+        <Container px="0">
+          <IfoLayoutWrapper>{ifoSection}</IfoLayoutWrapper>
+        </Container>
       </SectionBackground>
       {/* {faq}
       <LinkExternal