style: better loader

jumperexchange · Dec 26, 2024 · 2f94394 · 2f94394
1 parent 07a4a05
commit 2f94394
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 80 deletions.
diff --git a/.env.localhost b/.env.localhost
@@ -21,4 +21,4 @@ NEXT_PUBLIC_LIFI_API_KEY=
 NEXT_PUBLIC_JUMPER_API=http://localhost:3001
 NEXT_REVALIDATION_SECRET=
 NEXT_PUBLIC_SOLANA_RPC_URI=https://api.devnet.solana.com
-WASH_HANDSHAKE=secure-key
+WASH_HANDSHAKE=secure-key
diff --git a/src/components/Berachain/BerachainExploreProtocol.tsx b/src/components/Berachain/BerachainExploreProtocol.tsx
@@ -64,7 +64,12 @@ export const BerachainExploreProtocol = ({
           <Typography variant="bodySmallStrong">Explore Berachain</Typography>
         </BerachainBackButton>
       </Link>
-      {card && <BerachainProtocolAction market={roycoDataMarket} card={card} />}
+      {/* {card &&  */}
+      <BerachainProtocolAction
+        market={roycoDataMarket}
+        card={card ?? undefined}
+      />
+      {/* } */}
     </Container>
   );
 };
diff --git a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.style.ts b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.style.ts
@@ -36,6 +36,7 @@ export const BerachainMarketCardTokenContainer = styled(Box)(({ theme }) => ({
 export const BerachainMarketCardHeader = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'space-between',
   gap: theme.spacing(1.5),
   height: 48,
 }));

diff --git a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx
@@ -117,45 +117,54 @@ export const BerachainMarketCard = ({
     >
       <BerachainMarketCardWrapper>
         <BerachainMarketCardHeader>
-          {image ? (
-            <Image
-              key={`berachain-market-card-token-${image.data.id}`}
-              src={`${url}${image.data.attributes.url}`}
-              alt={`${image.data.attributes.alternativeText || 'protocol'} logo`}
-              width={image.data.attributes.width}
-              height={image.data.attributes.height}
-              style={{
-                maxHeight: '40px',
-                maxWidth: '92px',
-                height: 'auto',
-                objectFit: 'contain',
-              }}
-            />
-          ) : (
-            <Skeleton
-              variant="rectangular"
-              sx={{ width: 92, height: 40, borderRadius: '8px' }}
-            />
-          )}
-          {roycoData?.name ? (
-            // <Typography variant="bodyLargeStrong">{roycoData?.name}</Typography>
-            <Typography
-              variant="bodySmall"
-              sx={(theme) => ({
-                typography: {
-                  xs: theme.typography.bodyXSmall,
-                  sm: theme.typography.bodySmall,
-                },
-              })}
-            >
-              {`${title} ${roycoData?.input_token_data?.symbol} Market`}
-            </Typography>
-          ) : (
-            <Skeleton
-              variant="text"
-              sx={{ width: 96, height: 24, borderRadius: '8px' }}
-            />
-          )}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'flex-start',
+              gap: '8px',
+            }}
+          >
+            {image ? (
+              <Image
+                key={`berachain-market-card-token-${image.data.id}`}
+                src={`${url}${image.data.attributes.url}`}
+                alt={`${image.data.attributes.alternativeText || 'protocol'} logo`}
+                width={image.data.attributes.width}
+                height={image.data.attributes.height}
+                style={{
+                  maxHeight: '40px',
+                  maxWidth: '64px',
+                  height: 'auto',
+                  objectFit: 'contain',
+                }}
+              />
+            ) : (
+              <Skeleton
+                variant="rectangular"
+                sx={{ width: 92, height: 40, borderRadius: '8px' }}
+              />
+            )}
+            {roycoData?.name ? (
+              // <Typography variant="bodyLargeStrong">{roycoData?.name}</Typography>
+              <Typography
+                variant="bodyMediumStrong"
+                sx={(theme) => ({
+                  typography: {
+                    xs: theme.typography.bodySmallStrong,
+                    sm: theme.typography.bodyMediumStrong,
+                  },
+                })}
+              >
+                {`${title} ${roycoData?.input_token_data?.symbol} Market`}
+              </Typography>
+            ) : (
+              <Skeleton
+                variant="text"
+                sx={{ width: 96, height: 24, borderRadius: '8px' }}
+              />
+            )}
+          </Box>
           {type && (
             <BerachainMarketCardBadge
               variant="bodySmall"

diff --git a/src/components/Berachain/components/BerachainMarkets/BerachainMarkets.tsx b/src/components/Berachain/components/BerachainMarkets/BerachainMarkets.tsx
@@ -25,8 +25,7 @@ export const BerachainMarkets = () => {
       <BerachainMarketsHeader />
       <BerachainMarketsFilters />
       <BerachainMarketCards>
-        {!roycoData &&
-          !data &&
+        {(!roycoData || !data) &&
           Array.from({ length: 9 }, () => 42).map((_, idx) => (
             <BerachainMarketCard
               roycoData={{} as EnrichedMarketDataType}

diff --git a/src/components/Berachain/components/BerachainProtocolAction/BerachainProtocolAction.tsx b/src/components/Berachain/components/BerachainProtocolAction/BerachainProtocolAction.tsx
@@ -23,6 +23,7 @@ import { BerachainProtocolFaqAccordionHeader } from './BerachainProtocolFaqAccor
 import type { EnrichedMarketDataType } from 'royco/queries';
 import { getStrapiBaseUrl } from '@/utils/strapi/strapiHelper';
 import { WagmiProvider } from 'wagmi';
+import BerachainWidgetLoader from '../BerachainWidget/WidgetLoader/WidgetLoader';
 
 interface BerachainProtocolActionProps {
   market?: EnrichedMarketDataType;
@@ -54,12 +55,22 @@ export const BerachainProtocolAction = ({
               alt="Protocol image"
               width={card?.attributes.Image.data.attributes.width}
               height={card?.attributes.Image.data.attributes.height}
-              style={{ width: 144, height: 'auto', objectFit: 'contain' }}
+              style={{
+                width: 144,
+                height: 'auto',
+                // borderRadius: '100%',
+                objectFit: 'contain',
+              }}
             />
           ) : (
             <Skeleton
               variant="circular"
-              sx={{ width: '144px', height: '144px', flexShrink: 0 }}
+              sx={{
+                width: '144px',
+                height: '144px',
+                flexShrink: 0,
+                marginTop: '32px',
+              }}
             />
           )}
           <BerachainActionProtocolCard>
@@ -70,7 +81,7 @@ export const BerachainProtocolAction = ({
             ) : (
               <Skeleton
                 variant="rectangular"
-                sx={{ height: '32px', width: '160px' }}
+                sx={{ height: '32px', width: '380px' }}
               />
             )}
             {card?.attributes?.Description ? (
@@ -119,39 +130,46 @@ export const BerachainProtocolAction = ({
             </Box>
           </BerachainActionProtocolCard>
         </BerachainActionProtocolIntro>
-        {detailInformation?.faqItems && (
-          <BerachainActionProtocolCard sx={{ padding: '20px 12px' }}>
-            <AccordionFAQ
-              showIndex={true}
-              showDivider={true}
-              showAnswerDivider={true}
-              sx={{ padding: 0 }}
-              itemSx={{
-                padding: '0px 8px',
-                backgroundColor: 'transparent',
-                '.MuiAccordionSummary-root': {
-                  padding: 0,
-                },
-                '.accordion-items': {
-                  gap: '4px',
-                },
-                '.MuiAccordionDetails-root': {
-                  padding: '20px 16px 16px',
-                },
-                // '& > div': {
-                //   borderTop: `1px solid ${alpha(theme.palette.text.primary, 0.04)}`,
-                // },
-                // '&:first-of-type > div': {
-                //   borderTop: 'unset',
-                // },
-              }}
-              content={detailInformation?.faqItems}
-              accordionHeader={<BerachainProtocolFaqAccordionHeader />}
-              questionTextTypography="bodyLarge"
-              answerTextTypography="bodyMedium"
-              arrowSize={12}
-            />
-          </BerachainActionProtocolCard>
+        {card?.attributes?.CustomInformation ? (
+          detailInformation?.faqItems && (
+            <BerachainActionProtocolCard sx={{ padding: '20px 12px' }}>
+              <AccordionFAQ
+                showIndex={true}
+                showDivider={true}
+                showAnswerDivider={true}
+                sx={{ padding: 0 }}
+                itemSx={{
+                  padding: '0px 8px',
+                  backgroundColor: 'transparent',
+                  '.MuiAccordionSummary-root': {
+                    padding: 0,
+                  },
+                  '.accordion-items': {
+                    gap: '4px',
+                  },
+                  '.MuiAccordionDetails-root': {
+                    padding: '20px 16px 16px',
+                  },
+                  // '& > div': {
+                  //   borderTop: `1px solid ${alpha(theme.palette.text.primary, 0.04)}`,
+                  // },
+                  // '&:first-of-type > div': {
+                  //   borderTop: 'unset',
+                  // },
+                }}
+                content={detailInformation?.faqItems}
+                accordionHeader={<BerachainProtocolFaqAccordionHeader />}
+                questionTextTypography="bodyLarge"
+                answerTextTypography="bodyMedium"
+                arrowSize={12}
+              />
+            </BerachainActionProtocolCard>
+          )
+        ) : (
+          <Skeleton
+            variant="rectangular"
+            sx={{ height: '112px', width: '100%', borderRadius: '8px' }}
+          />
         )}
         {card?.attributes?.Information && (
           <BerachainActionProtocolCard
@@ -164,7 +182,7 @@ export const BerachainProtocolAction = ({
           </BerachainActionProtocolCard>
         )}
       </BerachainProtocolActionInfoBox>
-      {market && <BerachainWidget market={market} />}
+      {market ? <BerachainWidget market={market} /> : <BerachainWidgetLoader />}
     </BerachainProtocolActionBox>
   );
 };
diff --git a/src/components/Berachain/components/BerachainWidget/WidgetLoader/WidgetLoader.tsx b/src/components/Berachain/components/BerachainWidget/WidgetLoader/WidgetLoader.tsx
@@ -0,0 +1,45 @@
+import { Box, Skeleton, useTheme } from '@mui/material';
+import { BerachainDepositInputBackground } from '../../BerachainWidgetWip/BerachainWidgetWip.style';
+
+function BerachainWidgetLoader() {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        padding: theme.spacing(3),
+        width: '592px',
+        borderRadius: '24px',
+        backgroundColor: '#121214',
+      }}
+    >
+      {/* tabs height: 38px, radius 16px*/}
+      <Skeleton
+        variant="rectangular"
+        sx={{ width: 'auto', height: '38px', borderRadius: '16px' }}
+      />
+      {/* info  height: 512px, radius 16px*/}
+      <Skeleton
+        variant="rectangular"
+        sx={{
+          marginTop: '16px',
+          width: 'auto',
+          height: '256px',
+          borderRadius: '16px',
+        }}
+      />
+      {/* deposit height: 478px*/}
+      <Skeleton
+        variant="rectangular"
+        sx={{
+          marginTop: '16px',
+          width: 'auto',
+          height: '216px',
+          borderRadius: '16px',
+        }}
+      />
+    </Box>
+  );
+}
+
+export default BerachainWidgetLoader;