feat: working mobile version

jumperexchange · Dec 31, 2024 · 822a3f5 · 822a3f5
1 parent 812fec2
commit 822a3f5
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 44 deletions.
diff --git 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
@@ -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
               }
             />
             <DigitCard

diff --git a/...s/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.style.ts b/...s/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.style.ts
@@ -1,23 +1,33 @@
-import { IconButton } from '@mui/material';
+import { Breakpoint, IconButton } from '@mui/material';
 import { alpha, Box, styled } from '@mui/material';
 import Link from 'next/link';
 
 export const BerachainProtocolActionBox = styled(Box)(({ theme }) => ({
   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/...onents/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.tsx b/...onents/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 (
     <BerachainProtocolActionBox>
+      {isMobile &&
+        (market ? (
+          <BerachainWidget market={market} />
+        ) : (
+          <BerachainWidgetLoader />
+        ))}
       <BerachainProtocolActionInfoBox>
         <BerachainInformationProtocolIntro>
-          {card?.attributes?.Image.data.attributes.url ? (
-            <Image
-              src={`${baseUrl}${card?.attributes.Image.data.attributes.url}`}
-              alt="Protocol image"
-              width={card?.attributes.Image.data.attributes.width}
-              height={card?.attributes.Image.data.attributes.height}
-              style={{
-                width: 144,
-                height: 'auto',
-                // borderRadius: '100%',
-                objectFit: 'contain',
-              }}
-            />
-          ) : (
-            <Skeleton
-              variant="circular"
-              sx={{
-                width: '144px',
-                height: '144px',
-                flexShrink: 0,
-                marginTop: '16px',
-              }}
-            />
-          )}
+          {!isMobile &&
+            (card?.attributes?.Image.data.attributes.url ? (
+              <Image
+                src={`${baseUrl}${card?.attributes.Image.data.attributes.url}`}
+                alt="Protocol image"
+                width={card?.attributes.Image.data.attributes.width}
+                height={card?.attributes.Image.data.attributes.height}
+                style={{
+                  width: 144,
+                  height: 'auto',
+                  objectFit: 'contain',
+                }}
+              />
+            ) : (
+              <Skeleton
+                variant="circular"
+                sx={{
+                  width: '144px',
+                  height: '144px',
+                  flexShrink: 0,
+                  marginTop: '16px',
+                }}
+              />
+            ))}
           <BerachainInformationProtocolCard>
             {card?.attributes?.Title ? (
               <Typography variant="titleSmall">
@@ -176,7 +180,12 @@ export const BerachainProtocolInformation = ({
           </BerachainInformationProtocolCard>
         )}
       </BerachainProtocolActionInfoBox>
-      {market ? <BerachainWidget market={market} /> : <BerachainWidgetLoader />}
+      {!isMobile &&
+        (market ? (
+          <BerachainWidget market={market} />
+        ) : (
+          <BerachainWidgetLoader />
+        ))}
     </BerachainProtocolActionBox>
   );
 };
diff --git 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,14 +89,16 @@ export const BerachainWidget = ({
   return (
     <Box
       sx={{
-        padding: theme.spacing(3),
         width: '100%',
         borderRadius: '24px',
         backgroundColor: '#121214',
         boxShadow:
           theme.palette.mode === 'light'
             ? '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)'
             : '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)',
+        [theme.breakpoints.up('md' as Breakpoint)]: {
+          padding: theme.spacing(3),
+        },
       }}
     >
       {/* <Typography variant="h2" color="text.primary" sx={{ mb: 3 }}>

diff --git 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' && (
+        <BerchainMarketCardInfos
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box
+            sx={{
+              height: '100%',
+              width: '100%',
+              padding: theme.spacing(1),
+              display: 'flex',
+              justifyContent: 'space-between',
+              backgroundColor: deposited ? '#291812' : undefined,
+              [theme.breakpoints.up('sm' as Breakpoint)]: {
+                padding: theme.spacing(1.5, 2),
+              },
+            }}
+          >
+            <DigitTokenSymbolCard
+              title={deposited ? 'Deposited' : 'Deposit'}
+              tooltipText={deposited ? DEPOSITED_TOOLTIP : DEPOSIT_TOOLTIP}
+              tokenImage={market?.input_token_data?.image}
+              digit={
+                deposited
+                  ? t('format.currency', {
+                      value: dataRecipe?.input_token_data_ap?.token_amount_usd,
+                    })
+                  : market?.input_token_data?.symbol
+              }
+            />
+
+            <DigitCard
+              title={'TVL'}
+              tooltipText={TVL_TOOLTIP}
+              digit={
+                market?.locked_quantity_usd
+                  ? t('format.currency', {
+                      value: market?.locked_quantity_usd,
+                      notation: 'compact',
+                    })
+                  : 'N/A'
+              }
+            />
+          </Box>
+
+          <Divider />
+
+          <Box
+            sx={{
+              height: '100%',
+              width: '100%',
+              padding: theme.spacing(1),
+              display: 'flex',
+              justifyContent: 'space-between',
+              [theme.breakpoints.up('sm' as Breakpoint)]: {
+                padding: theme.spacing(1),
+              },
+            }}
+          >
+            {market?.incentive_tokens_data?.length > 0 ? (
+              <TokenIncentivesCard
+                tokens={market?.incentive_tokens_data}
+                marketData={market}
+              />
+            ) : (
+              <DigitTooltipCard
+                title={'APY'}
+                digit={
+                  market?.annual_change_ratio
+                    ? t('format.percent', {
+                        value: market?.annual_change_ratio,
+                      })
+                    : 'N/A'
+                }
+                tooltipText={APY_TOOLTIP}
+              />
+            )}
+
+            {market.lockup_time === '0' ? undefined : (
+              <DigitCard
+                title={'Lockup'}
+                tooltipText={LOCKUP_TOOLTIP}
+                digit={formatWithCustomLabels(
+                  Object.entries(secondsToDuration(market.lockup_time))
+                    .filter(([_, value]) => value > 0) // Filter out zero values
+                    .slice(0, 2) // Take the first two non-zero units
+                    .reduce(
+                      (acc, [unit, value]) => ({ ...acc, [unit]: value }),
+                      {},
+                    ),
+                )}
+              />
+            )}
+          </Box>
+        </BerchainMarketCardInfos>
+      )} */
+}
diff --git 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,