From 822a3f57653acfdb17d6e261da9d0ee7de2814c5 Mon Sep 17 00:00:00 2001 From: tche Date: Tue, 31 Dec 2024 15:59:03 +0100 Subject: [PATCH] feat: working mobile version --- .../BerachainMarketCard.style.ts | 9 +- .../BerachainMarketCard.tsx | 6 +- .../BerachainProtocolInformation.style.ts | 18 +++- .../BerachainProtocolInformation.tsx | 71 ++++++------ .../BerachainWidget/BerachainWidget.tsx | 20 +++- .../components/BerachainWidget/InfoBlock.tsx | 101 ++++++++++++++++++ .../ProfilePage/ProfilePage.style.ts | 4 + 7 files changed, 185 insertions(+), 44 deletions(-) diff --git a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.style.ts b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.style.ts index 406debb03..cdc6aa013 100644 --- a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.style.ts +++ b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.style.ts @@ -1,4 +1,4 @@ -import type { TypographyProps } from '@mui/material'; +import type { Breakpoint, TypographyProps } from '@mui/material'; import { Box, Card, Skeleton, Typography } from '@mui/material'; import { alpha, lighten, styled } from '@mui/material/styles'; import Image from 'next/image'; @@ -11,7 +11,6 @@ export const BerachainMarketCardWrapper = styled(Card)(({ theme }) => ({ padding: theme.spacing(2), alignItems: 'flex-start', gap: theme.spacing(2), - width: 384, borderRadius: '16px', border: '1px solid #383433', background: '#1E1D1C', @@ -22,6 +21,12 @@ export const BerachainMarketCardWrapper = styled(Card)(({ theme }) => ({ boxShadow: `0px 0px 28px 2px ${alpha('#F47226', 0.14)}`, border: `1px solid ${lighten('#383433', 0.2)}`, }, + [theme.breakpoints.down('sm' as Breakpoint)]: { + width: 320, + }, + [theme.breakpoints.up('sm' as Breakpoint)]: { + width: 384, + }, })); export const BerachainMarketCardTokenContainer = styled(Box)(({ theme }) => ({ diff --git a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx index c8bf4b8e2..3e84aedc7 100644 --- a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx +++ b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx @@ -118,9 +118,9 @@ export const BerachainMarketCard = ({ width={image.data.attributes.width} height={image.data.attributes.height} style={{ - maxHeight: '40px', - maxWidth: '64px', + width: '72px', height: 'auto', + maxHeight: '72px', objectFit: 'contain', }} /> @@ -187,7 +187,7 @@ export const BerachainMarketCard = ({ ? t('format.currency', { value: dataRecipe?.input_token_data_ap?.token_amount, }) - : dataRecipe?.input_token_data_ap?.symbol + : roycoData?.input_token_data?.symbol } /> ({ display: 'flex', - flexDirection: 'row', gap: theme.spacing(4), marginTop: theme.spacing(3), + [theme.breakpoints.down('md' as Breakpoint)]: { + flexDirection: 'column', + }, + [theme.breakpoints.up('md' as Breakpoint)]: { + flexDirection: 'row', + }, })); export const BerachainProtocolActionInfoBox = styled(Box)(({ theme }) => ({ display: 'flex', - padding: theme.spacing(3), flexDirection: 'column', - maxWidth: 640, gap: theme.spacing(2), borderRadius: '24px', background: '#121214', boxShadow: '0px 4px 24px 0px rgba(0, 0, 0, 0.08)', + [theme.breakpoints.down('md' as Breakpoint)]: { + maxWidth: 380, + }, + [theme.breakpoints.up('md' as Breakpoint)]: { + maxWidth: 640, + padding: theme.spacing(3), + }, })); export const BerachainInformationProtocolIntro = styled(Box)(({ theme }) => ({ diff --git a/src/components/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.tsx b/src/components/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.tsx index 594a072e1..5e54f8ea0 100644 --- a/src/components/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.tsx +++ b/src/components/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.tsx @@ -3,7 +3,7 @@ import InfoIcon from '@mui/icons-material/Info'; import LanguageIcon from '@mui/icons-material/Language'; import TelegramIcon from '@mui/icons-material/Telegram'; import XIcon from '@mui/icons-material/X'; -import { Box, Skeleton, Typography } from '@mui/material'; +import { Box, Skeleton, Theme, Typography, useMediaQuery } from '@mui/material'; import Image from 'next/image'; import { useTranslation } from 'react-i18next'; import { AccordionFAQ } from 'src/components/AccordionFAQ'; @@ -38,41 +38,45 @@ export const BerachainProtocolInformation = ({ const { setSnackbarState } = useMenuStore((state) => state); const { t } = useTranslation(); const baseUrl = getStrapiBaseUrl(); + const isMobile = useMediaQuery((theme: Theme) => + theme.breakpoints.down('md'), + ); const detailInformation = card?.attributes?.CustomInformation; - const handleCopyButton = (textToCopy: string) => { - navigator.clipboard.writeText(textToCopy); - setSnackbarState(true, t('navbar.walletMenu.copiedMsg'), 'success'); - }; - return ( + {isMobile && + (market ? ( + + ) : ( + + ))} - {card?.attributes?.Image.data.attributes.url ? ( - Protocol image - ) : ( - - )} + {!isMobile && + (card?.attributes?.Image.data.attributes.url ? ( + Protocol image + ) : ( + + ))} {card?.attributes?.Title ? ( @@ -176,7 +180,12 @@ export const BerachainProtocolInformation = ({ )} - {market ? : } + {!isMobile && + (market ? ( + + ) : ( + + ))} ); }; diff --git a/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx b/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx index cc80b3e9d..0e1dd90bd 100644 --- a/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx +++ b/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx @@ -1,4 +1,11 @@ -import { Box, Typography, useTheme } from '@mui/material'; +import { + Box, + Breakpoint, + Theme, + Typography, + useMediaQuery, + useTheme, +} from '@mui/material'; import { useMemo, useState } from 'react'; import { type TabProps, Tabs } from 'src/components/Tabs/Tabs'; import { Widget } from 'src/components/Widgets/Widget'; @@ -23,6 +30,9 @@ export const BerachainWidget = ({ () => chains.getChainById(market?.chain_id!), [market?.chain_id], ); + const isMobile = useMediaQuery((theme: Theme) => + theme.breakpoints.down('md'), + ); const token = useMemo(() => { return market.input_token_data; @@ -51,14 +61,14 @@ export const BerachainWidget = ({ const tabs: TabProps[] = [ { - label: `Get ${token.symbol}`, + label: isMobile ? 'Swap' : `Get ${token.symbol}`, value: 0, onClick: () => { setTab(0); }, }, { - label: 'Deposit', + label: isMobile ? 'Invest' : `Deposit`, value: 1, onClick: () => { setTab(1); @@ -79,7 +89,6 @@ export const BerachainWidget = ({ return ( {/* diff --git a/src/components/Berachain/components/BerachainWidget/InfoBlock.tsx b/src/components/Berachain/components/BerachainWidget/InfoBlock.tsx index abbf49230..ce3110fde 100644 --- a/src/components/Berachain/components/BerachainWidget/InfoBlock.tsx +++ b/src/components/Berachain/components/BerachainWidget/InfoBlock.tsx @@ -186,3 +186,104 @@ function InfoBlock({ market, type }: InfoBlockProps) { } export default InfoBlock; + +{ + /* {type === 'deposit' && ( + + + + + + + + + + + {market?.incentive_tokens_data?.length > 0 ? ( + + ) : ( + + )} + + {market.lockup_time === '0' ? undefined : ( + value > 0) // Filter out zero values + .slice(0, 2) // Take the first two non-zero units + .reduce( + (acc, [unit, value]) => ({ ...acc, [unit]: value }), + {}, + ), + )} + /> + )} + + + )} */ +} diff --git a/src/components/ProfilePage/ProfilePage.style.ts b/src/components/ProfilePage/ProfilePage.style.ts index 86161a8ae..269902a3f 100644 --- a/src/components/ProfilePage/ProfilePage.style.ts +++ b/src/components/ProfilePage/ProfilePage.style.ts @@ -10,6 +10,10 @@ export const PageContainer = styled(Container)(({ theme }) => ({ width: '100% !important', overflow: 'visible', //'hidden', paddingBottom: 20, + [theme.breakpoints.down('md' as Breakpoint)]: { + paddingLeft: '8px', + paddingRight: '8px', + }, [theme.breakpoints.up('xl' as Breakpoint)]: { paddingLeft: 0, paddingRight: 0,