Skip to content

Commit

Permalink
fix:moonpay mobile style
Browse files Browse the repository at this point in the history
  • Loading branch information
@bradleypena
bradleypena committed Jul 19, 2024
1 parent 61bdba3 commit 2fee58e
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 200 deletions.
217 changes: 110 additions & 107 deletions src/features/Moonpay/Moonpay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function MoonpayPage() {
const { isMobile } = useResponsive()
const phantomWallet = new PhantomWalletAdapter()
const isPhantomInstalled = useMemo(() => phantomWallet.readyState !== WalletReadyState.NotDetected, [phantomWallet.readyState])
const [isNotTooTall] = useMediaQuery('(max-height: 1100px)')
const [isShortScreen, isMediumScreen] = useMediaQuery(['(max-height: 700px)', '(max-height: 1100px)'])
const css = `
.beta_tooltip, .navbar, .mobile_bottom_navbar {
z-index: 1
Expand Down Expand Up @@ -57,121 +57,124 @@ export default function MoonpayPage() {
overflow="auto"
position="relative"
>
<AppNavLayout>{null}</AppNavLayout>
<Flex
width="100%"
height="100%"
alignItems="center"
justifyContent="center"
background="url(/images/moonpay-dots.svg)"
backgroundPosition="center bottom 125px"
backgroundRepeat="no-repeat"
position="absolute"
top="0"
left="0"
{...(isMobile ? {} : { minHeight: '700px' })}
>
<Box
textAlign="center"
{...(isMobile ? { display: 'flex', flexDirection: 'column', px: '6' } : {})}
mb={isNotTooTall && !isMobile ? '25vh' : '0'}
<AppNavLayout>
<Flex
width="100%"
alignItems="center"
justifyContent="center"
background="url(/images/moonpay-dots.svg)"
backgroundPosition="center bottom 125px"
backgroundRepeat="no-repeat"
{...(isMobile
? { height: isShortScreen ? 'auto' : '100%' }
: { position: 'absolute', top: '0', left: '0', height: '100%', minHeight: '700px' })}
>
<Flex alignItems="center" justifyContent="center" gap={4} flexDirection="row">
<Box
textAlign="center"
{...(isMobile ? { display: 'flex', flexDirection: 'column', px: '6' } : {})}
mb={isMediumScreen && !isMobile ? '25vh' : '0'}
>
<Flex alignItems="center" justifyContent="center" gap={4} flexDirection="row">
<Flex
w={{ base: '64px', md: '104px' }}
h={{ base: '64px', md: '104px' }}
minWidth={{ base: '64px', md: '104px' }}
p={{ base: '10px', md: '16px' }}
borderRadius={{ base: '15px', md: '24px' }}
bgColor={colors.background02}
alignItems="center"
justifyContent="center"
>
<RaydiumLogo width="64" height="64" />
</Flex>
<Plus width="25px" height="25px" color="#8d93b7" />
<Flex
w={{ base: '64px', md: '104px' }}
h={{ base: '64px', md: '104px' }}
minWidth={{ base: '64px', md: '104px' }}
p={{ base: '10px', md: '16px' }}
borderRadius={{ base: '15px', md: '24px' }}
bgColor={colors.background02}
alignItems="center"
justifyContent="center"
>
<MoonPayIcon width="100%" height="100%" color="#7715f5" />
</Flex>
</Flex>
<Text as="h1" fontFamily="chillax" fontSize={['24px', '40px', '40px']} color={colors.text02} mt={6} mb={8}>
{t('moonpay.deposit_using')}
<Text as="span" fontWeight="semibold">
{t('moonpay.title')}
</Text>
</Text>
<Box {...(isMobile ? { mb: '4', mt: '4', order: 2 } : {})}>
{isPhantomInstalled ? <WalletOnramp /> : <Text fontSize="sm">{t('moonpay.phantom_wallet_not_installed')}</Text>}
</Box>
<Flex
w={{ base: '64px', md: '104px' }}
h={{ base: '64px', md: '104px' }}
minWidth={{ base: '64px', md: '104px' }}
p={{ base: '10px', md: '16px' }}
borderRadius={{ base: '15px', md: '24px' }}
bgColor={colors.background02}
alignItems="center"
justifyContent="center"
maxW="728px"
m="0 auto"
borderTop={`1px solid ${colors.dividerBg}`}
pt={6}
color={colors.text03}
textAlign="left"
{...(isMobile
? {
position: 'static',
width: '100%',
order: '1',
mt: '3vh',
gap: '4',
direction: 'column'
}
: {
justifyContent: 'space-between',
gap: '20',
mb: '5.5rem',
direction: 'row',
position: 'absolute',
left: '50%',
bottom: '10vh',
transform: 'translateX(-50%)'
})}
>
<RaydiumLogo width="64" height="64" />
{['step1', 'step2', 'step3'].map((step, index) => (
<Box key={index} flex="1" {...(isMobile ? { display: 'flex', gap: '4' } : {})}>
<Box mb={isMobile ? 0 : '2'}>
{index === 0 && <Phantom width="24" height="24" color="#898eff" />}
{index === 1 && <SolGrey width="24" height="24" color="#898eff" />}
{index === 2 && <Cart width="24" height="24" color="#898eff" />}
</Box>
<Box>
<Text
fontSize={{ base: 'sm', md: 'md' }}
color={colors.text02}
fontFamily="chillax"
fontWeight="semibold"
textTransform="uppercase"
mb={1}
>
{t(`moonpay.${step}`)}
</Text>
<Text fontSize="sm">{t(`moonpay.${step}_text`)}</Text>
</Box>
</Box>
))}
</Flex>
<Plus width="25px" height="25px" color="#8d93b7" />
<Flex
w={{ base: '64px', md: '104px' }}
h={{ base: '64px', md: '104px' }}
minWidth={{ base: '64px', md: '104px' }}
p={{ base: '10px', md: '16px' }}
borderRadius={{ base: '15px', md: '24px' }}
bgColor={colors.background02}
alignItems="center"
width="100%"
justifyContent="center"
alignItems="center"
gap="3"
mt={8}
{...(isMobile ? {} : { position: 'absolute', bottom: '14', left: '0' })}
>
<MoonPayIcon width="100%" height="100%" color="#7715f5" />
{['apple', 'google', 'mastercard', 'visa', 'paypal'].map((name, index) => (
<Image key={index} src={`/images/payments/${name}.webp`} width="50px" height="auto" />
))}
</Flex>
</Flex>
<Text as="h1" fontFamily="chillax" fontSize={['24px', '40px', '40px']} color={colors.text02} mt={6} mb={8}>
{t('moonpay.deposit_using')}
<Text as="span" fontWeight="semibold">
{t('moonpay.title')}
</Text>
</Text>
<Box {...(isMobile ? { mt: '8', order: 2 } : {})}>
{isPhantomInstalled ? <WalletOnramp /> : <Text fontSize="sm">{t('moonpay.phantom_wallet_not_installed')}</Text>}
</Box>
<Flex
maxW="728px"
m="0 auto"
borderTop={`1px solid ${colors.dividerBg}`}
pt={6}
left="50%"
bottom="10vh"
mb="88px"
color={colors.text03}
textAlign="left"
{...(isMobile
? {
position: 'static',
width: '100%',
marginBottom: '0',
transform: 'none',
order: '1',
marginTop: '3vh',
gap: '4',
direction: 'column'
}
: { justifyContent: 'space-between', gap: '80px', direction: 'row', position: 'absolute', transform: 'translateX(-50%)' })}
>
{['step1', 'step2', 'step3'].map((step, index) => (
<Box key={index} flex="1" {...(isMobile ? { display: 'flex', gap: '12px' } : {})}>
<Box width="24px" height="24px">
{index === 0 && <Phantom width="24" height="24" color="#898eff" />}
{index === 1 && <SolGrey width="24" height="24" color="#898eff" />}
{index === 2 && <Cart width="24" height="24" color="#898eff" />}
</Box>
<Box>
<Text
fontSize={{ base: 'sm', md: 'md' }}
color={colors.text02}
fontFamily="chillax"
fontWeight="semibold"
textTransform="uppercase"
{...(isMobile ? {} : { mt: '8px', mb: '4px' })}
>
{t(`moonpay.${step}`)}
</Text>
<Text fontSize="sm">{t(`moonpay.${step}_text`)}</Text>
</Box>
</Box>
))}
</Flex>
<Flex
width="100%"
justifyContent="center"
alignItems="center"
gap="3"
mt={8}
{...(isMobile ? {} : { m: '0', position: 'absolute', bottom: '56px', left: '0' })}
>
{['apple', 'google', 'mastercard', 'visa', 'paypal'].map((name, index) => (
<Image key={index} src={`/images/payments/${name}.webp`} width="50px" />
))}
</Flex>
</Box>
</Flex>
</Flex>
</AppNavLayout>
</Box>
</Box>
)
Expand Down
74 changes: 37 additions & 37 deletions src/icons/misc/Cart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
import { SvgIcon } from '../type'

export default function Cart(props: SvgIcon) {
const { width = 20, height = 20 } = props
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
fill="none"
className="chakra-icon"
{...props}
>
<path
d="M13.5417 18.75C14.3471 18.75 15 18.0971 15 17.2917C15 16.4863 14.3471 15.8333 13.5417 15.8333C12.7363 15.8333 12.0834 16.4863 12.0834 17.2917C12.0834 18.0971 12.7363 18.75 13.5417 18.75Z"
fill="currentColor"
fillOpacity="0.95"
/>
<path
d="M6.87496 18.75C7.68037 18.75 8.33329 18.0971 8.33329 17.2917C8.33329 16.4863 7.68037 15.8333 6.87496 15.8333C6.06954 15.8333 5.41663 16.4863 5.41663 17.2917C5.41663 18.0971 6.06954 18.75 6.87496 18.75Z"
fill="currentColor"
fillOpacity="0.95"
/>
<path
d="M4.03329 3.28333L3.86663 5.325C3.83329 5.71666 4.14163 6.04166 4.53329 6.04166H17.2916C17.6416 6.04166 17.9333 5.775 17.9583 5.425C18.0666 3.95 16.9416 2.75 15.4666 2.75H5.22496C5.14163 2.38333 4.97496 2.03333 4.71663 1.74166C4.29996 1.3 3.71663 1.04166 3.11663 1.04166H1.66663C1.32496 1.04166 1.04163 1.325 1.04163 1.66666C1.04163 2.00833 1.32496 2.29166 1.66663 2.29166H3.11663C3.37496 2.29166 3.61663 2.4 3.79163 2.58333C3.96663 2.775 4.04996 3.025 4.03329 3.28333Z"
fill="currentColor"
fillOpacity="0.95"
/>
<path
d="M17.0916 7.29166H4.3083C3.9583 7.29166 3.67496 7.55833 3.64163 7.9L3.34163 11.525C3.22496 12.95 4.34163 14.1667 5.76663 14.1667H15.0333C16.2833 14.1667 17.3833 13.1417 17.475 11.8917L17.75 8C17.7833 7.61666 17.4833 7.29166 17.0916 7.29166Z"
fill="currentColor"
fillOpacity="0.95"
/>
</svg>
)
}
import { SvgIcon } from '../type'

export default function Cart(props: SvgIcon) {
const { width = 20, height = 20 } = props
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 20 20"
fill="none"
className="chakra-icon"
{...props}
>
<path
d="M13.5417 18.75C14.3471 18.75 15 18.0971 15 17.2917C15 16.4863 14.3471 15.8333 13.5417 15.8333C12.7363 15.8333 12.0834 16.4863 12.0834 17.2917C12.0834 18.0971 12.7363 18.75 13.5417 18.75Z"
fill="currentColor"
fillOpacity="0.95"
/>
<path
d="M6.87496 18.75C7.68037 18.75 8.33329 18.0971 8.33329 17.2917C8.33329 16.4863 7.68037 15.8333 6.87496 15.8333C6.06954 15.8333 5.41663 16.4863 5.41663 17.2917C5.41663 18.0971 6.06954 18.75 6.87496 18.75Z"
fill="currentColor"
fillOpacity="0.95"
/>
<path
d="M4.03329 3.28333L3.86663 5.325C3.83329 5.71666 4.14163 6.04166 4.53329 6.04166H17.2916C17.6416 6.04166 17.9333 5.775 17.9583 5.425C18.0666 3.95 16.9416 2.75 15.4666 2.75H5.22496C5.14163 2.38333 4.97496 2.03333 4.71663 1.74166C4.29996 1.3 3.71663 1.04166 3.11663 1.04166H1.66663C1.32496 1.04166 1.04163 1.325 1.04163 1.66666C1.04163 2.00833 1.32496 2.29166 1.66663 2.29166H3.11663C3.37496 2.29166 3.61663 2.4 3.79163 2.58333C3.96663 2.775 4.04996 3.025 4.03329 3.28333Z"
fill="currentColor"
fillOpacity="0.95"
/>
<path
d="M17.0916 7.29166H4.3083C3.9583 7.29166 3.67496 7.55833 3.64163 7.9L3.34163 11.525C3.22496 12.95 4.34163 14.1667 5.76663 14.1667H15.0333C16.2833 14.1667 17.3833 13.1417 17.475 11.8917L17.75 8C17.7833 7.61666 17.4833 7.29166 17.0916 7.29166Z"
fill="currentColor"
fillOpacity="0.95"
/>
</svg>
)
}
56 changes: 28 additions & 28 deletions src/icons/misc/Phantom.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import { SvgIcon } from '../type'

export default function Phantom(props: SvgIcon) {
const { width = 23, height = 22 } = props
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
fill="none"
className="chakra-icon"
{...props}
>
<g clipPath="url(#clip0_26764_57811)">
<path
d="M4.49908 18.9087C6.83478 18.9087 8.59008 16.8774 9.63762 15.2723C9.51021 15.6274 9.43941 15.9825 9.43941 16.3234C9.43941 17.261 9.97735 17.9286 11.039 17.9286C12.4971 17.9286 14.0542 16.6501 14.8611 15.2723C14.8044 15.4712 14.7761 15.6558 14.7761 15.8263C14.7761 16.4797 15.1442 16.8916 15.8944 16.8916C18.2585 16.8916 20.6366 12.7012 20.6366 9.0364C20.6366 6.18123 19.1927 3.66699 15.5689 3.66699C9.19879 3.66699 2.33325 11.4512 2.33325 16.4797C2.33325 18.4541 3.39493 18.9087 4.49908 18.9087ZM13.3747 8.7239C13.3747 8.01366 13.7711 7.5165 14.3514 7.5165C14.9177 7.5165 15.3141 8.01366 15.3141 8.7239C15.3141 9.43414 14.9177 9.94549 14.3514 9.94549C13.7711 9.94549 13.3747 9.43414 13.3747 8.7239ZM16.404 8.7239C16.404 8.01366 16.8004 7.5165 17.3808 7.5165C17.947 7.5165 18.3434 8.01366 18.3434 8.7239C18.3434 9.43414 17.947 9.94549 17.3808 9.94549C16.8004 9.94549 16.404 9.43414 16.404 8.7239Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_26764_57811">
<rect width="18.3333" height="15.2417" fill="white" transform="translate(2.33325 3.66699)" />
</clipPath>
</defs>
</svg>
)
}
import { SvgIcon } from '../type'

export default function Phantom(props: SvgIcon) {
const { width = 23, height = 22 } = props
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 23 22"
fill="none"
className="chakra-icon"
{...props}
>
<g clipPath="url(#clip0_26764_57811)">
<path
d="M4.49908 18.9087C6.83478 18.9087 8.59008 16.8774 9.63762 15.2723C9.51021 15.6274 9.43941 15.9825 9.43941 16.3234C9.43941 17.261 9.97735 17.9286 11.039 17.9286C12.4971 17.9286 14.0542 16.6501 14.8611 15.2723C14.8044 15.4712 14.7761 15.6558 14.7761 15.8263C14.7761 16.4797 15.1442 16.8916 15.8944 16.8916C18.2585 16.8916 20.6366 12.7012 20.6366 9.0364C20.6366 6.18123 19.1927 3.66699 15.5689 3.66699C9.19879 3.66699 2.33325 11.4512 2.33325 16.4797C2.33325 18.4541 3.39493 18.9087 4.49908 18.9087ZM13.3747 8.7239C13.3747 8.01366 13.7711 7.5165 14.3514 7.5165C14.9177 7.5165 15.3141 8.01366 15.3141 8.7239C15.3141 9.43414 14.9177 9.94549 14.3514 9.94549C13.7711 9.94549 13.3747 9.43414 13.3747 8.7239ZM16.404 8.7239C16.404 8.01366 16.8004 7.5165 17.3808 7.5165C17.947 7.5165 18.3434 8.01366 18.3434 8.7239C18.3434 9.43414 17.947 9.94549 17.3808 9.94549C16.8004 9.94549 16.404 9.43414 16.404 8.7239Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_26764_57811">
<rect width="18.3333" height="15.2417" fill="white" transform="translate(2.33325 3.66699)" />
</clipPath>
</defs>
</svg>
)
}
Loading

0 comments on commit 2fee58e

Please sign in to comment.