fix: misc fixes

cypress/cypress.env.json

@@ -1,4 +1,3 @@
 {
-  "NEXT_PUBLIC_API_BASE_URL": "http://mock-api:3000",
-  "NEXT_PUBLIC_TESTING_MODE": "true"
+  "NEXT_PUBLIC_API_BASE_URL": "http://mock-api:3000"
 }

public/locales/en/common.json

@@ -11,6 +11,8 @@
     "title": "ZKsync",
     "subtitle": "Ecosystem",
     "home": "Home",
+    "copy": "Copy",
+    "copied": "Copied!",
     "LOCKEDASSETS": {
       "lockedAssets": "Locked assets",
       "others": "Others",

public/locales/es/common.json

@@ -10,8 +10,9 @@
   "HOME": {
     "title": "ZKsync",
     "subtitle": "Ecosistema",
-
     "home": "Inicio",
+    "copy": "Copiar",
+    "copied": "Copiado!",
     "LOCKEDASSETS": {
       "lockedAssets": "Activos bloqueados",
       "others": "Otros",

src/components/ChainTable.tsx

@@ -180,7 +180,7 @@ export const STableCellHead = styled(TableCell)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     color: currentTheme.textSecondary,
-    textAlign: 'left',
+    textAlign: 'center',
     borderBottom: 'none',
   };
 });
@@ -204,7 +204,7 @@ export const STableCell = styled(TableCell)(({ theme }) => {
   const { currentTheme } = useCustomTheme();
   return {
     color: currentTheme.textPrimary,
-    textAlign: 'left',
+    textAlign: 'center',
     border: 'none',
     fontSize: '1rem',
     [theme.breakpoints.down('md')]: {
@@ -247,6 +247,7 @@ export const ContractCell = styled(Link)(() => {
   return {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
     gap: currentTheme.gap,
     color: currentTheme.textPrimary,
   };

src/components/RPC.tsx

@@ -2,16 +2,21 @@ import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, Typography, Tooltip, styled, Skeleton, Button } from '@mui/material';
 
-import { useData, useCustomTheme } from '~/hooks';
-import { DataContainer, STitle, Icon, NotAvailable } from '~/components';
+import { useData, useCustomTheme, useCopyToClipboard } from '~/hooks';
+import { STitle, Icon, NotAvailable, STooltip } from '~/components';
 import { checkRpcStatus } from '~/utils';
 
+interface RpcProps {
+  count: number;
+}
+
 export const RPC = () => {
   const { t } = useTranslation();
   const { chainData } = useData();
   const [rpcData, setRpcData] = useState<{ url: string; status: boolean }[]>([]);
   const [rpcIsLoading, setRpcIsLoading] = useState(true);
   const [showAll, setShowAll] = useState(false);
+  const [copiedState, copy] = useCopyToClipboard();
 
   useEffect(() => {
     const updateRpcStatuses = async () => {
@@ -40,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}>
@@ -77,8 +86,9 @@ export const RPC = () => {
                   </RPCIcon>
                 </Tooltip>
               )}
-
-              <RPCUrl>{rpc.url}</RPCUrl>
+              <STooltip title={rpc.url === copiedState[`${rpc.url}`] ? t('HOME.copied') : t('HOME.copy')}>
+                <RPCUrl onClick={() => copy(rpc.url, rpc.url)}>{rpc.url}</RPCUrl>
+              </STooltip>
             </RPCBox>
           ))}
 
@@ -87,7 +97,7 @@ export const RPC = () => {
             <NotAvailable>{t('CHAIN.CHAININFORMATION.notAvailable')}</NotAvailable>
           </RPCBox>
         )}
-      </DataContainer>
+      </RPCContainer>
 
       {showMoreButton && (
         <RPCButtonContainer>
@@ -102,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',
@@ -121,9 +147,9 @@ const RPCBox = styled(Box)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
-    gap: currentTheme.gap,
-    height: '4.5rem',
+    minHeight: '4.5rem',
     alignItems: 'center',
+    width: '100%',
     padding: currentTheme.padding,
   };
 });
@@ -132,21 +158,19 @@ const RPCIcon = styled(Box)(() => {
   return {
     display: 'flex',
     alignItems: 'center',
+    marginRight: '0.5rem',
   };
 });
 
-const RPCUrl = styled(Typography)(({ theme }) => {
+const RPCUrl = styled(Typography)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     textDecoration: 'underline',
     textUnderlineOffset: currentTheme.gap,
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    maxWidth: '15rem',
-    [theme.breakpoints.down('md')]: {
-      maxWidth: '25rem',
-    },
+    wordBreak: 'break-all',
+    whiteSpace: 'normal',
+    cursor: 'pointer',
   };
 });
 

src/components/Tooltip.tsx

@@ -0,0 +1,14 @@
+import { Tooltip, TooltipProps, styled } from '@mui/material';
+
+export const STooltip = styled(({ className, placement = 'top', ...props }: TooltipProps) => (
+  <Tooltip classes={{ popper: className }} placement={placement} disableInteractive arrow {...props} />
+))(() => {
+  return {
+    '& .MuiTooltip-tooltip': {
+      fontSize: '1rem',
+      borderRadius: '0.5rem',
+      padding: '0.25rem 0.5rem',
+      maxWidth: 'max-content',
+    },
+  };
+});

src/components/index.ts

@@ -18,3 +18,4 @@ export * from './TVLGraph/DesktopTVLGraph';
 export * from './TVLGraph/MobileTVLGraph';
 export * from './AddNetworkButton';
 export * from './TVLGraph';
+export * from './Tooltip';

src/config/env.ts

@@ -4,12 +4,10 @@ export const getEnv = (): Env => {
   const NEXT_PUBLIC_PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID;
   const NEXT_PUBLIC_API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
   const NEXT_PUBLIC_TESTNET_MODE = process.env.NEXT_PUBLIC_TESTNET_MODE;
-  const NEXT_PUBLIC_TESTING_MODE = process.env.NEXT_PUBLIC_TESTING_MODE;
 
   return {
     PROJECT_ID: NEXT_PUBLIC_PROJECT_ID as string,
     API_URL: NEXT_PUBLIC_API_BASE_URL as string,
     TESTNET_MODE: NEXT_PUBLIC_TESTNET_MODE as string,
-    TESTING_MODE: NEXT_PUBLIC_TESTING_MODE as string,
   };
 };

src/containers/Tokens/TokensTable.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'next-i18next';
-import { Table, Typography, Box } from '@mui/material';
+import { Table, Typography, Box, styled } from '@mui/material';
 
 import { TotalValueLockedProps, TvlData } from '~/types';
 import {
@@ -15,11 +15,14 @@ import {
   FirstCellWithLogo,
   TableCellHeadFirst,
   NotAvailable,
+  STooltip,
 } from '~/components';
+import { useCopyToClipboard, useCustomTheme } from '~/hooks';
 import { formatDataNumber, truncateAddress } from '~/utils';
 
 export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
   const { t } = useTranslation();
+  const [copiedState, copy] = useCopyToClipboard();
 
   return (
     <Box>
@@ -53,7 +56,17 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
                   </FirstCellWithLogo>
 
                   <STableCell>
-                    {token.contractAddress && <Typography>{truncateAddress(token.contractAddress || '')}</Typography>}
+                    {token.contractAddress && (
+                      <STooltip
+                        title={
+                          token.contractAddress === copiedState['token contract'] ? t('HOME.copied') : t('HOME.copy')
+                        }
+                      >
+                        <CopyText onClick={() => copy('token contract', token.contractAddress || '')}>
+                          {truncateAddress(token.contractAddress || '')}
+                        </CopyText>
+                      </STooltip>
+                    )}
                     {!token.contractAddress && <NotAvailable>{t('CHAIN.CHAININFORMATION.notAvailable')}</NotAvailable>}
                   </STableCell>
 
@@ -74,3 +87,11 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
     </Box>
   );
 };
+
+const CopyText = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textPrimary,
+    cursor: 'pointer',
+  };
+});