price section and layout

0xsequence · Sep 18, 2024 · cbd29da · cbd29da
1 parent 56b5b7c
commit cbd29da
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 32 deletions.
diff --git a/packages/checkout/src/constants/index.ts b/packages/checkout/src/constants/index.ts
@@ -1,3 +1,4 @@
 export const HEADER_HEIGHT = '54px'
 export const CARD_HEIGHT = '130px'
-export const CARD_HEIGHT_MOBILE = '180px'
+export const CARD_HEIGHT_MOBILE = '180px'
+export const PAYMENT_SELECTION_MODAL_HEIGHT = '786px'
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -19,6 +19,7 @@ import {
   TransferFundsContextProvider,
   TransferFundsSettings,
 } from '../../contexts'
+import { PAYMENT_SELECTION_MODAL_HEIGHT } from '../../constants'
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
 import {
   PendingTransaction,
@@ -250,7 +251,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
                       <Modal
                         contentProps={{
                           style: {
-                            height: 'auto',
+                            height: PAYMENT_SELECTION_MODAL_HEIGHT,
                             width: '420px',
                             ...getModalPositionCss(position)
                           }

diff --git a/packages/checkout/src/views/PaymentSelection/Footer.tsx b/packages/checkout/src/views/PaymentSelection/Footer.tsx
@@ -0,0 +1,9 @@
+import { Box, Text } from '@0xsequence/design-system'
+
+export const Footer = () => {
+  return (
+    <Box height="7" marginTop="2">
+      <Text color="text100">footer</Text>
+    </Box>
+  )
+}
diff --git a/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx b/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { Box, Button, Text, TextInput, SearchIcon, Scroll } from '@0xsequence/design-system'
 import { PayWithMainCurrency } from './PayWithMainCurrency'
 import { SwapAndPay } from './SwapAndPay'
 import { SelectPaymentSettings } from '../../../contexts'
@@ -16,21 +17,50 @@ export const PayWithCrypto = ({
   setDisableButtons
 }: PayWithCryptoProps) => {
   const { enableSwapPayments } = settings
+  const [search, setSearch] = useState('')
 
   return (
-    <>
-      <PayWithMainCurrency
-        settings={settings}
-        disableButtons={disableButtons}
-        setDisableButtons={setDisableButtons}
-      />
-      {enableSwapPayments && (
-        <SwapAndPay
+    <Box>
+      <Box width="full" marginTop="4">
+        <TextInput
+          autoFocus
+          name="Search"
+          leftIcon={SearchIcon}
+          value={search}
+          onChange={ev => setSearch(ev.target.value)}
+          placeholder="Search your wallet"
+          data-1p-ignore
+        />
+      </Box>
+      <Box marginTop="3" >
+        <Text
+          variant="small"
+          fontWeight="medium"
+          color="text50"
+        >
+          Select a cryptocurrency
+        </Text>
+      </Box>
+      <Scroll paddingTop="3" style={{ height: '285px' }}>
+        <PayWithMainCurrency
           settings={settings}
           disableButtons={disableButtons}
           setDisableButtons={setDisableButtons}
         />
-      )}
-    </>
+        {enableSwapPayments && (
+          <SwapAndPay
+            settings={settings}
+            disableButtons={disableButtons}
+            setDisableButtons={setDisableButtons}
+          />
+        )}
+      </Scroll>
+      <Button
+        shape="square"
+        variant="primary"
+        width="full"
+        label="Complete Purchase"
+      />
+    </Box>
   )
 }
diff --git a/packages/checkout/src/views/PaymentSelection/Price/index.tsx b/packages/checkout/src/views/PaymentSelection/Price/index.tsx
@@ -1,4 +1,4 @@
-import { useContractInfo } from '@0xsequence/kit'
+import { useContractInfo, useCoinPrices } from '@0xsequence/kit'
 import { Box, Spinner, Text, TokenImage, tokenImageUrl } from '@0xsequence/design-system'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { formatUnits } from 'viem'
@@ -15,8 +15,14 @@ export const Price = () => {
   const currencyAddress = selectPaymentSettings!.currencyAddress
   const { data: currencyInfo, isLoading: isLoadingCurrencyInfo } = useContractInfo(chainId, currencyAddress)
   const fullPrice = BigInt(price) * BigInt(nftQuantity)
+  const { data: coinPricesData, isLoading: isLoadingCoinPrice } = useCoinPrices([
+    {
+      chainId,
+      contractAddress: currencyAddress
+    }
+  ])
 
-  const isLoading = isLoadingCurrencyInfo
+  const isLoading = isLoadingCurrencyInfo || isLoadingCoinPrice
 
   if (isLoading) {
     return (
@@ -38,9 +44,10 @@ export const Price = () => {
   const tokenSymbol = currencyInfo?.symbol
   const tokenDecimals = currencyInfo?.decimals
   const formattedPrice = formatUnits(fullPrice, tokenDecimals || 0)
-
-  // TODO: get fiat price and convert the full price
-  const priceFiat = '~111 USD'
+  const fiatConversionRate = coinPricesData?.[0].price?.value || 0
+
+  const priceFiat = fiatConversionRate * Number(formattedPrice)
+  const priceFiatFormatted = `~${Number(priceFiat).toFixed(2)} USD`
 
   return (
     <Box
@@ -76,7 +83,7 @@ export const Price = () => {
         </Box>
         <Box>
           <Text variant="normal" fontWeight="medium" color="text50">
-            {priceFiat}
+            {priceFiatFormatted}
           </Text>
         </Box>
       </Box>

diff --git a/packages/checkout/src/views/PaymentSelection/index.tsx b/packages/checkout/src/views/PaymentSelection/index.tsx
@@ -17,9 +17,10 @@ import { PayWithCrypto } from './PayWithCrypto/index'
 import { PayWithCreditCard } from './PayWithCreditCard'
 import { TransferFunds } from './TransferFunds'
 import { FiatOnRamp } from './FiatOnRamp'
+import { Footer } from './Footer'
 
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
-import { HEADER_HEIGHT } from '../../constants'
+import { HEADER_HEIGHT, PAYMENT_SELECTION_MODAL_HEIGHT } from '../../constants'
 import { useSelectPaymentModal } from '../../hooks'
 
 export const PaymentSelection = () => {
@@ -71,12 +72,12 @@ export const PaymentSelectionContent = () => {
       width="full"
       paddingBottom="4"
       height="full"
-      style={{ height: '600px', paddingTop: HEADER_HEIGHT }}
+      style={{ height: PAYMENT_SELECTION_MODAL_HEIGHT, paddingTop: HEADER_HEIGHT }}
     >
       <ItemDescription />
-      <Divider width="full" />
+      <Divider width="full" color="backgroundSecondary" />
       <Price />
-      <Divider width="full" />
+      <Divider width="full" color="backgroundSecondary" />
       <Box width="full" paddingX="6" gap="3" flexDirection="column">
         <Text variant="small" color="text50">
           Select a payment method
@@ -90,7 +91,13 @@ export const PaymentSelectionContent = () => {
             ]}
           />
           <TabsContent value="crypto">
-            <Text color="text100">crypto content</Text>
+            {(enableMainCurrencyPayment || enableSwapPayments) && (
+              <PayWithCrypto
+                settings={selectPaymentSettings}
+                disableButtons={disableButtons}
+                setDisableButtons={setDisableButtons}
+              />
+            )}
           </TabsContent>
           <TabsContent value="credit_card">
             <Text color="text100">credit card content</Text>
@@ -103,13 +110,6 @@ export const PaymentSelectionContent = () => {
           disableButtons={disableButtons}
         />
       )}
-      {(enableMainCurrencyPayment || enableSwapPayments) && (
-        <PayWithCrypto
-          settings={selectPaymentSettings}
-          disableButtons={disableButtons}
-          setDisableButtons={setDisableButtons}
-        />
-      )} */}
       {/* {enableTransferFunds && (
         <TransferFunds
           disableButtons={disableButtons}
@@ -120,7 +120,7 @@ export const PaymentSelectionContent = () => {
           disableButtons={disableButtons}
         />
       )} */}
-      {noPaymentOptionFound && (
+      {/* {noPaymentOptionFound && (
         <Box
           width="full"
           justifyContent="center"
@@ -129,7 +129,8 @@ export const PaymentSelectionContent = () => {
         >
           <Text color="text100">No Payment Option Found</Text>
         </Box>
-      )}
+      )} */}
+      <Footer />
     </Box>
   )
 }