price section

packages/checkout/src/views/PaymentSelection/ItemDescription/index.tsx

@@ -59,7 +59,7 @@ export const ItemDescription = () => {
         >
           {tokenMetadata?.name || "Unknown"}
         </Text>
-        <Text variant="normal" color="text50">
+        <Text variant="normal" color="text50" fontWeight="medium">
           {Number(nftQuantity) === 1 ? `${nftQuantity} item` : `${nftQuantity} items`}
         </Text>
         <Box marginTop="1">

packages/checkout/src/views/PaymentSelection/Price/index.tsx

@@ -1,11 +1,81 @@
-import { Box, Text } from '@0xsequence/design-system'
+import { useContractInfo } from '@0xsequence/kit'
+import { Box, Spinner, Text, TokenImage, tokenImageUrl } from '@0xsequence/design-system'
+import { findSupportedNetwork } from '@0xsequence/network'
+
+import { useSelectPaymentModal } from '../../../hooks'
 
 export const Price = () => {
+  const { selectPaymentSettings } = useSelectPaymentModal()
+  const nftQuantity = selectPaymentSettings!.nftQuantity
+  const price = selectPaymentSettings!.price
+  const chain = selectPaymentSettings!.chain
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+  const currencyAddress = selectPaymentSettings!.currencyAddress
+  const { data: currencyInfo, isLoading: isLoadingCurrencyInfo } = useContractInfo(chainId, currencyAddress)
+
+  const isLoading = isLoadingCurrencyInfo
+
+  if (isLoading) {
+    return (
+      <Box
+        paddingX="6"
+        justifyContent="center"
+        alignItems="center"
+        width="full"
+        style={{
+          height: '48px'
+        }}
+      >
+        <Spinner />
+      </Box>
+    )
+  }
+
+  const tokenLogo = currencyInfo?.logoURI
+  const tokenSymbol = currencyInfo?.symbol
+  const tokenDecimals = currencyInfo?.decimals
+  const formattedPrice = '2.4'
+  const priceFiat = '~111 USD'
+
   return (
-    <Box>
-      <Text color="text100">
-        price
-      </Text>
+    <Box
+      paddingX="6"
+      justifyContent="space-between"
+      alignItems="center"
+      width="full"
+      style={{
+        height: '48px'
+      }}
+    >
+      <Box>
+        <Text variant="small" color="text50" fontWeight="medium">
+          Price
+        </Text>
+      </Box>
+      <Box
+        flexDirection="column"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Box
+          gap="2"
+          alignItems="center"
+        >
+          <TokenImage
+            src={tokenLogo}
+            style={{
+              width: '20px'
+            }}
+          />
+          <Text variant="large" fontWeight="bold" color="text100">{`${formattedPrice} ${tokenSymbol}`}</Text>
+        </Box>
+        <Box>
+          <Text variant="normal" fontWeight="medium" color="text50">
+            {priceFiat}
+          </Text>
+        </Box>
+      </Box>
     </Box>
   )
 }