fix: rpc dynamic grid

defi-wonderland · Sep 10, 2024 · 647c8c5 · 647c8c5
1 parent 00af817
commit 647c8c5
Showing 1 changed file with 28 additions and 4 deletions.
diff --git a/src/components/RPC.tsx b/src/components/RPC.tsx
@@ -3,9 +3,13 @@ import { useTranslation } from 'next-i18next';
 import { Box, Typography, Tooltip, styled, Skeleton, Button } from '@mui/material';
 
 import { useData, useCustomTheme, useCopyToClipboard } from '~/hooks';
-import { DataContainer, STitle, Icon, NotAvailable, STooltip } from '~/components';
+import { STitle, Icon, NotAvailable, STooltip } from '~/components';
 import { checkRpcStatus } from '~/utils';
 
+interface RpcProps {
+  count: number;
+}
+
 export const RPC = () => {
   const { t } = useTranslation();
   const { chainData } = useData();
@@ -41,14 +45,18 @@ export const RPC = () => {
     return rpcData.length > 4 && !rpcIsLoading;
   }, [rpcData, rpcIsLoading]);
 
+  const count = useMemo(() => {
+    return Math.min(rpcData.length, 4);
+  }, [rpcData.length]);
+
   return (
     <article>
       <RPCTitle>
         <STitle>{t('CHAIN.RPC.title')}</STitle>
         <Subtitle>{t('CHAIN.RPC.subtitle')}</Subtitle>
       </RPCTitle>
 
-      <DataContainer aria-live='polite' aria-busy={rpcIsLoading}>
+      <RPCContainer aria-live='polite' aria-busy={rpcIsLoading} count={count}>
         {rpcIsLoading &&
           Array.from({ length: 4 }).map((_, index) => (
             <RPCBox key={index}>
@@ -89,7 +97,7 @@ export const RPC = () => {
             <NotAvailable>{t('CHAIN.CHAININFORMATION.notAvailable')}</NotAvailable>
           </RPCBox>
         )}
-      </DataContainer>
+      </RPCContainer>
 
       {showMoreButton && (
         <RPCButtonContainer>
@@ -104,6 +112,22 @@ export const RPC = () => {
   );
 };
 
+export const RPCContainer = styled(Box)<RpcProps>(({ theme: muiTheme, count }) => {
+  const { currentTheme, theme } = useCustomTheme();
+
+  return {
+    background: theme === 'dark' ? currentTheme.backgroundTertiary : currentTheme.backgroundSecondary,
+    borderRadius: currentTheme.borderRadius,
+    border: currentTheme.border,
+    display: 'grid',
+    gridTemplateColumns: `repeat(${count}, 1fr)`,
+
+    [muiTheme.breakpoints.down('md')]: {
+      gridTemplateColumns: 'repeat(1, 1fr)',
+    },
+  };
+});
+
 const RPCTitle = styled(Box)(() => {
   return {
     display: 'flex',
@@ -123,7 +147,7 @@ const RPCBox = styled(Box)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
-    height: '4.5rem',
+    minHeight: '4.5rem',
     alignItems: 'center',
     width: '100%',
     padding: currentTheme.padding,