feat: copy to clipboard

defi-wonderland · Sep 10, 2024 · 00af817 · 00af817
1 parent b241385
commit 00af817
Show file tree

Hide file tree

Showing 11 changed files with 1,269 additions and 17 deletions.
diff --git a/public/locales/en/common.json b/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",

diff --git a/public/locales/es/common.json b/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",

diff --git a/src/components/ChainTable.tsx b/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,
   };

diff --git a/src/components/RPC.tsx b/src/components/RPC.tsx
@@ -2,8 +2,8 @@ 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 { DataContainer, STitle, Icon, NotAvailable, STooltip } from '~/components';
 import { checkRpcStatus } from '~/utils';
 
 export const RPC = () => {
@@ -12,6 +12,7 @@ export const RPC = () => {
   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 () => {
@@ -77,8 +78,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>
           ))}
 
@@ -121,9 +123,9 @@ const RPCBox = styled(Box)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
-    gap: currentTheme.gap,
     height: '4.5rem',
     alignItems: 'center',
+    width: '100%',
     padding: currentTheme.padding,
   };
 });
@@ -132,21 +134,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',
   };
 });
 

diff --git a/src/components/Tooltip.tsx b/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',
+    },
+  };
+});
diff --git a/src/components/index.ts b/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';
diff --git a/src/containers/Tokens/TokensTable.tsx b/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',
+  };
+});