feat: UI updates mostly around price formatting

decentraland · Nov 20, 2023 · 004eef7 · 004eef7
1 parent c147cad
commit 004eef7
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 18 deletions.
diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.module.css
@@ -62,7 +62,7 @@
 }
 
 .buyWithCryptoModal .priceContainer .priceInUSD {
-  font-size: 12px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 18px;
   letter-spacing: 0px;
@@ -178,6 +178,10 @@
 
 .buyWithCryptoModal :global(.dcl.modal-navigation-title) {
   font-weight: bold;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 26px;
+  margin-bottom: 40px;
 }
 
 .buyWithCryptoModal .costContainer {
@@ -264,13 +268,32 @@
   font-weight: 400;
   line-height: 18px;
   color: #a09ba8;
-  padding-bottom: 4px;
 }
 
 .buyWithCryptoModal .durationAndExchangeContainer div {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 12px;
+}
+
+.buyWithCryptoModal .durationAndExchangeContainer :global(.icon) {
+  font-size: 14px;
+  margin-right: 4px;
+}
+
+.buyWithCryptoModal .durationAndExchangeContainer .exchangeIcon {
+  width: 15px;
+  height: 15px;
+  background-image: url(../../../images/exchange.svg);
+  background-size: contain;
+  margin-right: 10px;
+}
+
+.buyWithCryptoModal .exchangeContainer {
+  margin-top: 8px;
+}
+
+.buyWithCryptoModal .exchangeContainerLabel {
+  align-items: center;
 }
 
 .buyWithCryptoModal .rememberFreeTxs {
@@ -280,9 +303,7 @@
   text-align: center;
   color: #a09ba8;
   margin-top: auto;
-  padding: 0 50px;
-  margin-bottom: 4px;
-  margin-top: 12px;
+  padding: 20px 50px;
 }
 
 .buyWithCryptoModal .buttons {
@@ -341,7 +362,6 @@
   text-align: center;
   color: #ff8362;
   padding: 24px 48px;
-  padding-bottom: 0;
   margin-top: auto;
 }
 
@@ -371,6 +391,7 @@
   flex: 1;
   flex-direction: column;
   margin-top: 12px;
+  margin-bottom: 0;
 }
 
 .buyWithCryptoModal .mainLoader:global(.ui.loader) {

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
@@ -40,7 +40,7 @@ import { getBuyItemStatus, getError } from '../../../modules/order/selectors'
 import { getMintItemStatus } from '../../../modules/item/selectors'
 import { NFT } from '../../../modules/nft/types'
 import ChainAndTokenSelector from './ChainAndTokenSelector/ChainAndTokenSelector'
-import { getMANAToken, getShouldUseMetaTx, isToken } from './utils'
+import { formatPrice, getMANAToken, getShouldUseMetaTx, isToken } from './utils'
 import { Props } from './BuyWithCryptoModal.types'
 import styles from './BuyWithCryptoModal.module.css'
 
@@ -86,13 +86,15 @@ const BuyWithCryptoModal = (props: Props) => {
   const [providerTokens, setProviderTokens] = useState<Token[]>([])
   const [selectedChain, setSelectedChain] = useState(asset.chainId)
   const [selectedToken, setSelectedToken] = useState<Token>()
+  console.log('selectedToken: ', selectedToken)
   const [isFetchingBalance, setIsFetchingBalance] = useState(false)
   const [isFetchingRoute, setIsFetchingRoute] = useState(false)
   const [selectedTokenBalance, setSelectedTokenBalance] = useState<BigNumber>()
   const [route, setRoute] = useState<RouteResponse>()
   const [routeFailed, setRouteFailed] = useState(false)
   const [canBuyItem, setCanBuyItem] = useState<boolean | undefined>(undefined)
   const [fromAmount, setFromAmount] = useState<string | undefined>(undefined)
+  console.log('fromAmount: ', fromAmount)
   const [showChainSelector, setShowChainSelector] = useState(false)
   const [showTokenSelector, setShowTokenSelector] = useState(false)
 
@@ -541,7 +543,7 @@ const BuyWithCryptoModal = (props: Props) => {
     return (
       <Button
         fluid
-        primary
+        inverted
         className={styles.switchNetworkButton}
         disabled={isSwitchingNetwork}
         data-testid={CONFIRM_DATA_TEST_ID}
@@ -723,7 +725,6 @@ const BuyWithCryptoModal = (props: Props) => {
           ? renderBuyNowButton()
           : renderSwitchNetworkButton()
       } else {
-        console.log('rendering get mana button')
         // can't buy Get Mana and Buy With Card buttons
         return renderGetMANAButton()
       }
@@ -1043,20 +1044,26 @@ const BuyWithCryptoModal = (props: Props) => {
                               alt={selectedToken?.name}
                             />
                             {routeFeeCost?.token.symbol !==
-                            selectedToken.symbol ? (
+                              selectedToken.symbol && fromAmount ? (
                               <>
-                                {fromAmount}
+                                {formatPrice(fromAmount, selectedToken)}
                                 <span> + </span>
                                 <img
                                   src={routeFeeCost.token.logoURI}
                                   alt={routeFeeCost.token.name}
                                 />
-                                {routeFeeCost.totalCost}
+                                {formatPrice(
+                                  routeFeeCost.totalCost,
+                                  routeFeeCost.token
+                                )}
                               </>
                             ) : (
                               <>
-                                {Number(fromAmount) +
-                                  Number(routeFeeCost.totalCost)}
+                                {formatPrice(
+                                  Number(fromAmount) +
+                                    Number(routeFeeCost.totalCost),
+                                  selectedToken
+                                )}
                               </>
                             )}
                           </>
@@ -1099,7 +1106,7 @@ const BuyWithCryptoModal = (props: Props) => {
                 <div className={styles.durationAndExchangeContainer}>
                   <div>
                     <span>
-                      {' '}
+                      <Icon name="clock outline" />{' '}
                       {t(
                         'buy_with_crypto_modal.durations.transaction_duration'
                       )}{' '}
@@ -1123,8 +1130,11 @@ const BuyWithCryptoModal = (props: Props) => {
                       />
                     )}
                   </div>
-                  <div>
-                    <span> {t('buy_with_crypto_modal.exchange_rate')} </span>
+                  <div className={styles.exchangeContainer}>
+                    <div className={styles.exchangeContainerLabel}>
+                      <span className={styles.exchangeIcon} />
+                      <span> {t('buy_with_crypto_modal.exchange_rate')} </span>
+                    </div>
                     {route && selectedToken ? (
                       <>
                         1 {selectedToken.symbol} ={' '}

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/utils.ts b/webapp/src/components/Modals/BuyWithCryptoModal/utils.ts
@@ -45,3 +45,28 @@ export function getMANAToken(chainId: ChainId) {
     usdPrice: 0 // not necessary
   }
 }
+
+function truncateToDecimals(num: number, dec = 2) {
+  const calcDec = Math.pow(10, dec)
+  return Math.trunc(num * calcDec) / calcDec
+}
+
+export function formatPrice(price: string | number, token: Token): number {
+  // Determine the number of decimals based on the USD price
+  let decimalsToShow: number
+
+  // Show more decimals for smaller fractions of higher-value tokens like Ethereum
+  if (token.usdPrice && token.usdPrice < 1) {
+    decimalsToShow = 4 // Show 4 decimals for tokens with prices less than 1 USD
+  } else {
+    decimalsToShow = 2 // Show 2 decimals for other tokens or higher-value fractions
+  }
+
+  // Format the price using toFixed to round and limit the number of decimals
+  const formattedPrice = truncateToDecimals(
+    typeof price === 'string' ? Number(price) : price,
+    decimalsToShow
+  )
+
+  return formattedPrice
+}
diff --git a/webapp/src/images/exchange.svg b/webapp/src/images/exchange.svg