Staging Release (#1634)

jumperexchange · Jan 17, 2025 · e23e1c2 · e23e1c2
1 parent 48eab85
commit e23e1c2
Show file tree

Hide file tree

Showing 24 changed files with 351 additions and 253 deletions.
diff --git a/package.json b/package.json
@@ -146,5 +146,6 @@
     "@bigmi/client/wagmi": "2.14.3",
     "@bigmi/client/@wagmi/core": "2.16.0",
     "@metamask/sdk": "0.30.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/src/components/Berachain/BerachainExploreProtocol.tsx b/src/components/Berachain/BerachainExploreProtocol.tsx
@@ -38,12 +38,6 @@ export const BerachainExploreProtocol = ({
     return (
       <Container>
         <Background />
-        <Link href="/berachain/explore" style={{ textDecoration: 'none' }}>
-          <BerachainBackButton>
-            <ArrowBackIcon />
-            <Typography variant="bodySmallStrong">Explore Berachain</Typography>
-          </BerachainBackButton>
-        </Link>
         <BerachainProtocolInformation />
       </Container>
     );
@@ -60,12 +54,6 @@ export const BerachainExploreProtocol = ({
   return (
     <Container>
       <Background />
-      <Link href="/berachain/explore" style={{ textDecoration: 'none' }}>
-        <BerachainBackButton>
-          <ArrowBackIcon />
-          <Typography variant="bodySmallStrong">Explore Berachain</Typography>
-        </BerachainBackButton>
-      </Link>
       {/* {card &&  */}
       <BerachainProtocolInformation
         market={roycoDataMarket}

diff --git a/src/components/Berachain/components/BackButton.tsx b/src/components/Berachain/components/BackButton.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Link, Typography } from '@mui/material';
+import { BerachainBackButton } from '@/components/Berachain/Berachain.style';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+function BackButton() {
+  return (
+    <Link href="/berachain/explore" style={{ textDecoration: 'none' }}>
+      <BerachainBackButton>
+        <ArrowBackIcon />
+        <Typography variant="bodySmallStrong">Explore Berachain</Typography>
+      </BerachainBackButton>
+    </Link>
+  );
+}
+
+export default BackButton;
diff --git a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx
@@ -172,6 +172,15 @@ export const BerachainMarketCard = ({
             }}
           >
             <DigitTokenSymbolCard
+              sx={(theme) => ({
+                '.tooltip-icon': {
+                  color: theme.palette.alphaLight500.main,
+                },
+                '.title': {
+                  color: '#8b8989',
+                  fontSize: '0.75rem',
+                },
+              })}
               title={deposited ? 'Deposited' : 'Deposit'}
               tooltipText={deposited ? DEPOSITED_TOOLTIP : DEPOSIT_TOOLTIP}
               tokenImage={roycoData?.input_token_data?.image}
@@ -185,9 +194,19 @@ export const BerachainMarketCard = ({
               hasDeposited={deposited ? true : false}
             />
             <DigitCard
-              sx={{
+              sx={(theme) => ({
+                '.tooltip-icon': {
+                  color: theme.palette.alphaLight500.main,
+                },
                 alignItems: 'flex-end',
-              }}
+                '.title': {
+                  color: '#8b8989',
+                  fontSize: '0.75rem',
+                },
+                '.content': {
+                  marginTop: 1,
+                },
+              })}
               title={'TVL'}
               tooltipText={TVL_TOOLTIP}
               digit={

diff --git a/src/components/Berachain/components/BerachainMarketCard/StatCard/BerachainProgressCard.tsx b/src/components/Berachain/components/BerachainMarketCard/StatCard/BerachainProgressCard.tsx
@@ -35,6 +35,7 @@ export const BerachainProgressCard = ({
         <BeraChainProgressCardHeader display={'flex'}>
           <Typography
             variant="bodySmall"
+            className="title"
             sx={(theme) => ({
               typography: {
                 xs: theme.typography.bodyXSmall,
@@ -46,6 +47,7 @@ export const BerachainProgressCard = ({
           </Typography>
           {(tooltip || showTooltipIcon) && (
             <Tooltip
+              className="tooltip-icon"
               title={tooltip}
               placement={'top'}
               enterTouchDelay={0}

diff --git a/src/components/Berachain/components/BerachainMarketCard/StatCard/DigitCard.tsx b/src/components/Berachain/components/BerachainMarketCard/StatCard/DigitCard.tsx
@@ -40,6 +40,7 @@ const DigitCard = ({
           {title}
         </Typography>
         <Tooltip
+          className="tooltip-icon"
           title={tooltipText}
           placement={'top'}
           enterTouchDelay={0}
@@ -61,6 +62,7 @@ const DigitCard = ({
         marginTop={'4px'}
         sx={(theme) => ({
           display: 'inline-flex',
+          marginTop: 1,
           typography: {
             xs: theme.typography.titleXSmall,
             sm: theme.typography.titleXSmall,

diff --git a/src/components/Berachain/components/BerachainMarketCard/StatCard/DigitTokenSymbolCard.tsx b/src/components/Berachain/components/BerachainMarketCard/StatCard/DigitTokenSymbolCard.tsx
@@ -31,6 +31,7 @@ const DigitTokenSymbolCard = ({
     <BeraChainProgressCardContent sx={sx}>
       <BeraChainProgressCardHeader display={'flex'}>
         <Typography
+          className="title"
           variant="bodySmall"
           sx={(theme) => ({
             typography: {
@@ -42,6 +43,7 @@ const DigitTokenSymbolCard = ({
           {title}
         </Typography>
         <Tooltip
+          className="tooltip-icon"
           title={tooltipText}
           placement={'top'}
           enterTouchDelay={0}
@@ -65,7 +67,8 @@ const DigitTokenSymbolCard = ({
         }}
       >
         <BerachainMarketCardTokenContainer
-          sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}
+          className="content-wrapper"
+          sx={{ display: 'flex', alignItems: 'flex-end', gap: '4px' }}
           key={`berachain-market-card-token-container-name-${title}`}
         >
           {tokenImage ? (
@@ -89,6 +92,7 @@ const DigitTokenSymbolCard = ({
             className="content"
             marginTop={'4px'}
             sx={(theme) => ({
+              marginTop: 1,
               typography: {
                 xs: theme.typography.titleXSmall,
                 sm: theme.typography.titleXSmall,

diff --git a/src/components/Berachain/components/BerachainMarketCard/StatCard/DigitTooltipCard.tsx b/src/components/Berachain/components/BerachainMarketCard/StatCard/DigitTooltipCard.tsx
@@ -1,6 +1,7 @@
-import type { Breakpoint } from '@mui/material';
+import type { Breakpoint, SxProps } from '@mui/material';
 import { alpha, Box, Tooltip, Typography, useTheme } from '@mui/material';
 import { BerachainProgressCard } from './BerachainProgressCard';
+import { Theme } from '@mui/material/styles';
 
 interface DigitCardProps {
   title: string;
@@ -18,15 +19,23 @@ const DigitTooltipCard = ({ title, digit, tooltipText }: DigitCardProps) => {
           title={title}
           value={digit}
           showTooltipIcon={true}
-          sx={{
+          sx={(theme) => ({
+            '.title': {
+              color: '#8b8989',
+              fontSize: '0.75rem',
+            },
+            '.tooltip-icon': {
+              color: theme.palette.alphaLight500.main,
+            },
             height: '100%',
             padding: theme.spacing(1.5, 2),
             display: 'flex',
             [theme.breakpoints.up('sm' as Breakpoint)]: {
               padding: theme.spacing(1.5, 2),
             },
-          }}
+          })}
           valueSx={{
+            marginTop: 1,
             color: alpha(theme.palette.white.main, 0.84),
             fontSize: theme.typography.titleXSmall.fontSize,
             [theme.breakpoints.up('sm' as Breakpoint)]: {

diff --git a/src/components/Berachain/components/BerachainMarketCard/StatCard/TokenIncentivesCard.tsx b/src/components/Berachain/components/BerachainMarketCard/StatCard/TokenIncentivesCard.tsx
@@ -44,22 +44,25 @@ const TokenIncentivesCard = ({ marketData, tokens }: DigitCardProps) => {
               <Typography
                 variant="bodySmall"
                 sx={(theme) => ({
+                  color: '#8b8989',
                   typography: {
                     xs: theme.typography.bodyXSmall,
                     sm: theme.typography.bodySmall,
                   },
+                  // important needed as the previous rules are overriding the fontSize
+                  fontSize: '0.75rem!important',
                 })}
               >
                 {'Total Incentives'}
               </Typography>
               <Tooltip title={''} placement={'top'} enterTouchDelay={0} arrow>
                 <InfoIcon
-                  sx={{
+                  sx={(theme) => ({
+                    color: theme.palette.alphaLight500.main,
                     width: '16px',
                     height: '16px',
                     marginLeft: '4px',
-                    color: 'inherit',
-                  }}
+                  })}
                 />
               </Tooltip>
             </BeraChainProgressCardHeader>

diff --git a/src/components/Berachain/components/BerachainMarketCard/StatCard/TokenIncentivesData.tsx b/src/components/Berachain/components/BerachainMarketCard/StatCard/TokenIncentivesData.tsx
@@ -25,7 +25,7 @@ export const TokenIncentivesData = ({
           sx={{
             display: 'flex',
             alignItems: 'center',
-            marginTop: '4px',
+            marginTop: '8px',
             gap: 1,
           }}
           key={incentiveTokenData?.id}

diff --git a/...ponents/Berachain/components/BerachainMarkets/BerachainMarketsFilters/BerachainSearch.tsx b/...ponents/Berachain/components/BerachainMarkets/BerachainMarketsFilters/BerachainSearch.tsx
@@ -105,7 +105,7 @@ export const BerachainSearch = () => {
             },
           }}
           {...params}
-          placeholder="Search for markets"
+          placeholder="Search for markets or tokens"
           InputLabelProps={{
             ...params.InputLabelProps,
             shrink: false,

diff --git a/...s/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.style.ts b/...s/Berachain/components/BerachainProtocolInformation/BerachainProtocolInformation.style.ts
@@ -26,14 +26,14 @@ export const BerachainProtocolActionInfoBox = styled(Box)(({ theme }) => ({
     maxWidth: 380,
   },
   [theme.breakpoints.up('md' as Breakpoint)]: {
-    maxWidth: 640,
+    maxWidth: 760,
     padding: theme.spacing(3),
   },
 }));
 
 export const BerachainInformationProtocolIntro = styled(Box)(({ theme }) => ({
   display: 'flex',
-  flexDirection: 'row',
+  flexDirection: 'column',
   gap: theme.spacing(2),
 }));