added footer

0xsequence · Sep 18, 2024 · 2ab613e · 2ab613e
1 parent cbd29da
commit 2ab613e
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 15 deletions.
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -251,7 +251,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
                       <Modal
                         contentProps={{
                           style: {
-                            height: PAYMENT_SELECTION_MODAL_HEIGHT,
+                            maxHeight: 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
@@ -1,9 +1,64 @@
-import { Box, Text } from '@0xsequence/design-system'
+import { Box, Text, SequenceIcon } from '@0xsequence/design-system'
 
 export const Footer = () => {
   return (
-    <Box height="7" marginTop="2">
-      <Text color="text100">footer</Text>
+    <Box position="fixed" height="7" marginTop="2" width="full" style={{ bottom: '4px' }}>
+      <Box gap="4" justifyContent="center" alignItems="center">
+        <Box
+          as="a"
+          href="https://sequence.xyz/"
+          rel="noopener noreferrer"
+          target="_blank"
+          textDecoration="none"
+          opacity={{ hover: '80' }}
+          gap="1"
+          justifyContent="center"
+          alignItems="center"
+          cursor="pointer"
+        >
+          <SequenceIcon color="text50" />
+          <Text color="text50" variant="xsmall">Sequence</Text>
+        </Box>
+        <Box
+          as="a"
+          href="https://sequence.xyz/privacy"
+          rel="noopener noreferrer"
+          target="_blank"
+          textDecoration="none"
+          opacity={{ hover: '80' }}
+          cursor="pointer"
+        >
+          <Text color="text50" variant="xsmall">
+            Privacy
+          </Text>
+        </Box>
+        <Box
+          as="a"
+          href="https://sequence.xyz/terms"
+          rel="noopener noreferrer"
+          target="_blank"
+          textDecoration="none"
+          opacity={{ hover: '80' }}
+          cursor="pointer"
+        >
+          <Text color="text50" variant="xsmall">
+            Terms
+          </Text>
+        </Box>
+        <Box
+          as="a"
+          href="https://docs.sequence.xyz/"
+          rel="noopener noreferrer"
+          target="_blank"
+          textDecoration="none"
+          opacity={{ hover: '80' }}
+          cursor="pointer"
+        >
+          <Text color="text50" variant="xsmall">
+            Help
+          </Text>
+        </Box>
+      </Box>
     </Box>
   )
 }
diff --git a/packages/checkout/src/views/PaymentSelection/ItemDescription/index.tsx b/packages/checkout/src/views/PaymentSelection/ItemDescription/index.tsx
@@ -22,13 +22,13 @@ export const ItemDescription = () => {
   const isLoading = isLoadingTokenMetadatas
 
   if (isLoading) {
-    <Box paddingX="6" gap="3" style={{ height: '72px' }}>
+    <Box marginBottom="2" paddingX="6" gap="3" style={{ height: '72px' }}>
       <Spinner />
     </Box>
   }
 
   return (
-    <Box paddingX="6" gap="5" alignItems="center">
+    <Box marginBottom="2" paddingX="6" gap="5" alignItems="center">
       <Box position="relative">
         <Box
           background="backgroundControl"

diff --git a/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx b/packages/checkout/src/views/PaymentSelection/PayWithCrypto/index.tsx
@@ -16,7 +16,7 @@ export const PayWithCrypto = ({
   disableButtons,
   setDisableButtons
 }: PayWithCryptoProps) => {
-  const { enableSwapPayments } = settings
+  const { enableSwapPayments = true, enableMainCurrencyPayment = true } = settings
   const [search, setSearch] = useState('')
 
   return (
@@ -42,11 +42,13 @@ export const PayWithCrypto = ({
         </Text>
       </Box>
       <Scroll paddingTop="3" style={{ height: '285px' }}>
-        <PayWithMainCurrency
-          settings={settings}
-          disableButtons={disableButtons}
-          setDisableButtons={setDisableButtons}
-        />
+        {enableMainCurrencyPayment && (
+          <PayWithMainCurrency
+            settings={settings}
+            disableButtons={disableButtons}
+            setDisableButtons={setDisableButtons}
+          />
+        )}
         {enableSwapPayments && (
           <SwapAndPay
             settings={settings}
@@ -56,6 +58,7 @@ export const PayWithCrypto = ({
         )}
       </Scroll>
       <Button
+        marginTop="2"
         shape="square"
         variant="primary"
         width="full"

diff --git a/packages/checkout/src/views/PaymentSelection/Price/index.tsx b/packages/checkout/src/views/PaymentSelection/Price/index.tsx
@@ -27,6 +27,7 @@ export const Price = () => {
   if (isLoading) {
     return (
       <Box
+        marginY="2"
         paddingX="6"
         justifyContent="center"
         alignItems="center"

diff --git a/packages/checkout/src/views/PaymentSelection/index.tsx b/packages/checkout/src/views/PaymentSelection/index.tsx
@@ -75,10 +75,10 @@ export const PaymentSelectionContent = () => {
       style={{ height: PAYMENT_SELECTION_MODAL_HEIGHT, paddingTop: HEADER_HEIGHT }}
     >
       <ItemDescription />
-      <Divider width="full" color="backgroundSecondary" />
+      <Divider width="full" color="backgroundSecondary" style={{ margin: '0px' }} />
       <Price />
-      <Divider width="full" color="backgroundSecondary" />
-      <Box width="full" paddingX="6" gap="3" flexDirection="column">
+      <Divider width="full" color="backgroundSecondary" style={{ margin: '0px' }} />
+      <Box marginY="2" width="full" paddingX="6" gap="3" flexDirection="column">
         <Text variant="small" color="text50">
           Select a payment method
         </Text>