diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 15a9b28..464dd5e 100644
--- 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
index 99d4d91..3e38891 100644
--- 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
index ca45ecb..b4d7c10 100644
--- 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
index 96a52b2..df90c57 100644
--- 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 = () => {
)}
-
- {rpc.url}
+
+ copy(rpc.url, rpc.url)}>{rpc.url}
+
))}
@@ -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
new file mode 100644
index 0000000..97d5aab
--- /dev/null
+++ 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) => (
+
+))(() => {
+ 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
index b549214..f55d4e2 100644
--- 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
index f0f599d..b2138bf 100644
--- 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 (
@@ -53,7 +56,17 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
- {token.contractAddress && {truncateAddress(token.contractAddress || '')}}
+ {token.contractAddress && (
+
+ copy('token contract', token.contractAddress || '')}>
+ {truncateAddress(token.contractAddress || '')}
+
+
+ )}
{!token.contractAddress && {t('CHAIN.CHAININFORMATION.notAvailable')}}
@@ -74,3 +87,11 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
);
};
+
+const CopyText = styled(Typography)(() => {
+ const { currentTheme } = useCustomTheme();
+ return {
+ color: currentTheme.textPrimary,
+ cursor: 'pointer',
+ };
+});
diff --git a/src/data/chainMockData.json b/src/data/chainMockData.json
new file mode 100644
index 0000000..1d3e857
--- /dev/null
+++ b/src/data/chainMockData.json
@@ -0,0 +1,574 @@
+{
+ "chainType": "Rollup",
+ "tvl": [
+ {
+ "amount": "117911.456355407359400867",
+ "amountUsd": "305202013.6303364090732041428",
+ "price": "2588.4",
+ "name": "Ethereum",
+ "symbol": "ETH",
+ "contractAddress": null,
+ "type": "native",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
+ "decimals": 18
+ },
+ {
+ "amount": "55480856.378207",
+ "amountUsd": "55536337.234585207",
+ "price": "1.001",
+ "name": "USDC",
+ "symbol": "USDC",
+ "contractAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
+ "type": "erc20",
+ "decimals": 6
+ },
+ {
+ "amount": "998459864.823799773445941598",
+ "amountUsd": "10983058.513061797507905357578",
+ "price": "0.011",
+ "name": "Koi",
+ "symbol": "KOI",
+ "contractAddress": "0x9D14BcE1dADdf408d77295BB1be9b343814f44DE",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/35766/large/Koi_logo.png?1709782399",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "9472627.999218",
+ "amountUsd": "9482100.627217218",
+ "price": "1.001",
+ "name": "Tether USD",
+ "symbol": "USDT",
+ "contractAddress": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/325/large/Tether.png?1696501661",
+ "type": "erc20",
+ "decimals": 6
+ },
+ {
+ "amount": "109.13401208",
+ "amountUsd": "6320997.7803987076",
+ "price": "57919.595",
+ "name": "Wrapped BTC",
+ "symbol": "WBTC",
+ "contractAddress": "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/7598/large/wrapped_bitcoin_wbtc.png?1696507857",
+ "type": "erc20",
+ "decimals": 8
+ },
+ {
+ "amount": "132452368.754496583511107126",
+ "amountUsd": "1854333.162562952169155499764",
+ "price": "0.014",
+ "name": "HYCO",
+ "symbol": "HYCO",
+ "contractAddress": "0x77F76483399Dc6328456105B1db23e2Aca455bf9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/29407/large/coingecko_HYPERCOMIC_LOGO.png?1696528357",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "47964958.588748853386740337",
+ "amountUsd": "1007264.130363725921121547077",
+ "price": "0.021",
+ "name": "Idexo Token",
+ "symbol": "IDO",
+ "contractAddress": "0xF9c53268e9de692AE1b2ea5216E24e1c3ad7CB1E",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/18523/large/qOiqm7T8_400x400.jpg?1696518004",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "257.706060883787096756",
+ "amountUsd": "743295.406461645912283008656",
+ "price": "2884.276",
+ "name": "Rocket Pool ETH",
+ "symbol": "rETH",
+ "contractAddress": "0xae78736Cd615f374D3085123A210448E74Fc6393",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/20764/large/reth.png?1696520159",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "4597086.058830655172811988",
+ "amountUsd": "717145.425177582206958670128",
+ "price": "0.156",
+ "name": "DEXTF Token",
+ "symbol": "DEXTF",
+ "contractAddress": "0x5F64Ab1544D28732F0A24F4713c2C8ec0dA089f0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12634/large/0qgT0aMu_400x400.jpg?1696512442",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "709393.663223743840780868",
+ "amountUsd": "709393.663223743840780868",
+ "price": "1",
+ "name": "Dai Stablecoin",
+ "symbol": "DAI",
+ "contractAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/9956/large/Badge_Dai.png?1696509996",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "3611649.325725586386626848",
+ "amountUsd": "278096.998080870151770267296",
+ "price": "0.077",
+ "name": "GOVI",
+ "symbol": "GOVI",
+ "contractAddress": "0xeEAA40B28A2d1b0B08f6f97bB1DD4B75316c6107",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13875/large/GOVI.png?1696513619",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "162910.961709234801235986",
+ "amountUsd": "162748.050747525566434750014",
+ "price": "0.999",
+ "name": "LUSD Stablecoin",
+ "symbol": "LUSD",
+ "contractAddress": "0x5f98805A4E8be255a32880FDeC7F6728C6568bA0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/14666/large/Group_3.png?1696514341",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "769116.258069049173770643",
+ "amountUsd": "123058.60129104786780330288",
+ "price": "0.16",
+ "name": "Symbiosis",
+ "symbol": "SIS",
+ "contractAddress": "0xd38BB40815d2B0c2d2c866e0c72c5728ffC76dd9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/20805/large/SymbiosisFinance_logo-150x150.jpeg?1696520198",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "34.07328120799622273",
+ "amountUsd": "94955.28377731904151907308",
+ "price": "2786.796",
+ "name": "Coinbase Wrapped Staked ETH",
+ "symbol": "cbETH",
+ "contractAddress": "0xBe9895146f7AF43049ca1c1AE358B0541Ea49704",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/27008/large/cbeth.png?1709186989",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1748294.875759738167409463",
+ "amountUsd": "52448.84627279214502228389",
+ "price": "0.03",
+ "name": "ZKBase",
+ "symbol": "ZKB",
+ "contractAddress": "0xBBBbbBBB46A1dA0F0C3F64522c275BAA4C332636",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13585/large/image_2024-01-16_172847810.png?1705397359",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "70230.481253590057712656",
+ "amountUsd": "42138.2887521540346275936",
+ "price": "0.6",
+ "name": "DeversiFi Token",
+ "symbol": "DVF",
+ "contractAddress": "0xDDdddd4301A082e62E84e43F474f044423921918",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/16414/large/rhinologo.png?1697736807",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "290.508016952",
+ "amountUsd": "41502.265809779672",
+ "price": "142.861",
+ "name": "Wrapped SOL (Wormhole)",
+ "symbol": "SOL",
+ "contractAddress": "0xD31a59c85aE9D8edEFeC411D448f90841571b89c",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/22876/large/SOL_wh_small.png?1696522175",
+ "type": "erc20",
+ "decimals": 9
+ },
+ {
+ "amount": "4028.076528447",
+ "amountUsd": "26899.495056969066",
+ "price": "6.678",
+ "name": "Wrapped TON Coin",
+ "symbol": "TONCOIN",
+ "contractAddress": "0x582d872A1B094FC48F5DE31D3B73F2D9bE47def1",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/17980/large/ton_symbol.png?1696517498",
+ "type": "erc20",
+ "decimals": 9
+ },
+ {
+ "amount": "23546.536039530998897252",
+ "amountUsd": "23570.082575570529896149252",
+ "price": "1.001",
+ "name": "Curve.Fi USD Stablecoin",
+ "symbol": "crvUSD",
+ "contractAddress": "0xf939E0A03FB07F59A73314E73794Be0E57ac1b4E",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/30118/large/0xf939e0a03fb07f59a73314e73794be0e57ac1b4e.png?1721097561",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "8.989236054015567327",
+ "amountUsd": "23241.957473210977822112964",
+ "price": "2585.532",
+ "name": "Wrapped Ether",
+ "symbol": "WETH",
+ "contractAddress": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/2518/large/weth.png?1696503332",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "6450474.040573841973953155",
+ "amountUsd": "19351.422121721525921859465",
+ "price": "0.003",
+ "name": "LSD Coin",
+ "symbol": "LSD",
+ "contractAddress": "0xfAC77A24E52B463bA9857d6b758ba41aE20e31FF",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/29519/large/logo.png?1696528462",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "5.423689884062204153",
+ "amountUsd": "16492.19348875982852231781",
+ "price": "3040.77",
+ "name": "Wrapped liquid staked Ether 2.0",
+ "symbol": "wstETH",
+ "contractAddress": "0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/18834/large/wstETH.png?1696518295",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "34056.984148728150579544",
+ "amountUsd": "13248.166833855250575442616",
+ "price": "0.389",
+ "name": "Bella",
+ "symbol": "BEL",
+ "contractAddress": "0xA91ac63D040dEB1b7A5E4d4134aD23eb0ba07e14",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12478/large/Bella.png?1696512296",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "46220.536588230241212891",
+ "amountUsd": "11416.472537292869579584077",
+ "price": "0.247",
+ "name": "1INCH Token",
+ "symbol": "1INCH",
+ "contractAddress": "0x111111111117dC0aa78b770fA6A738034120C302",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13469/large/1inch-token.png?1696513230",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "563082.288758156473620986",
+ "amountUsd": "9572.398908888660051556762",
+ "price": "0.017",
+ "name": "Deri",
+ "symbol": "DERI",
+ "contractAddress": "0xA487bF43cF3b10dffc97A9A744cbB7036965d3b9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13931/large/200vs200.jpg?1696513670",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "4974.854892108430805034",
+ "amountUsd": "7477.206902838971499966102",
+ "price": "1.503",
+ "name": "Worldcoin",
+ "symbol": "WLD",
+ "contractAddress": "0x163f8C2467924be0ae7B5347228CABF260318753",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/31069/large/worldcoin.jpeg?1696529903",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "43034.765060388679856659",
+ "amountUsd": "7401.979590386852935345348",
+ "price": "0.172",
+ "name": "Maverick Token",
+ "symbol": "MAV",
+ "contractAddress": "0x7448c7456a97769F6cD04F1E83A4a23cCdC46aBD",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/30850/large/MAV_Logo.png?1696529701",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1267111.79536025946087647",
+ "amountUsd": "6335.55897680129730438235",
+ "price": "0.005",
+ "name": "ZigZag",
+ "symbol": "ZZ",
+ "contractAddress": "0xC91a71A1fFA3d8B22ba615BA1B9c01b2BBBf55ad",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/26141/large/zig_zag.?1696525229",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.1",
+ "amountUsd": "5807.2618",
+ "price": "58072.618",
+ "name": "tBTC v2",
+ "symbol": "tBTC",
+ "contractAddress": "0x18084fbA666a33d37592fA2633fD49a74DD93a88",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/11224/large/0x18084fba666a33d37592fa2633fd49a74dd93a88.png?1696511155",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1.607308526702602644",
+ "amountUsd": "4229.765794625615173705452",
+ "price": "2631.583",
+ "name": "rsETH",
+ "symbol": "rsETH",
+ "contractAddress": "0xA1290d69c65A6Fe4DF752f95823fae25cB99e5A7",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33800/large/Icon___Dark.png?1702991855",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "35.167061181353626164",
+ "amountUsd": "3811.335756712743296401992",
+ "price": "108.378",
+ "name": "Aave Token",
+ "symbol": "AAVE",
+ "contractAddress": "0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12645/large/aave-token-round.png?1720472354",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "312.082999060002117307",
+ "amountUsd": "3186.679503401681619821777",
+ "price": "10.211",
+ "name": "ChainLink Token",
+ "symbol": "LINK",
+ "contractAddress": "0x514910771AF9Ca656af840dff83E8264EcF986CA",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/877/large/chainlink-new-logo.png?1696502009",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "154.058620754243125866",
+ "amountUsd": "2913.402577083491753251926",
+ "price": "18.911",
+ "name": "Metaverse Index",
+ "symbol": "MVI",
+ "contractAddress": "0x72e364F2ABdC788b7E918bc238B21f109Cd634D7",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/14684/large/MVI_logo.png?1696514357",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "33",
+ "amountUsd": "1845.129",
+ "price": "55.913",
+ "name": "Tellor Tributes",
+ "symbol": "TRB",
+ "contractAddress": "0x88dF592F8eb5D7Bd38bFeF7dEb0fBc02cf3778a0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/9644/large/Blk_icon_current.png?1696509713",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.639944048220845643",
+ "amountUsd": "1680.494350516037100209286",
+ "price": "2626.002",
+ "name": "Renzo Restaked ETH",
+ "symbol": "Renzo Restaked ETH",
+ "contractAddress": "0xbf5495Efe5DB9ce00f80364C8B423567e58d2110",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/34753/large/Ezeth_logo_circle.png?1713496404",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "4093.979328418030008295",
+ "amountUsd": "1637.591731367212003318",
+ "price": "0.4",
+ "name": "Matic Token",
+ "symbol": "MATIC",
+ "contractAddress": "0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/4713/large/polygon.png?1698233745",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1164511.592541489082720882",
+ "amountUsd": "1164.511592541489082720882",
+ "price": "0.001",
+ "name": "Fringe",
+ "symbol": "FRIN",
+ "contractAddress": "0xC9fE6E1C76210bE83DC1B5b20ec7FD010B0b1D15",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13222/large/frin.png?1696513001",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "132132.766491",
+ "amountUsd": "1057.062131928",
+ "price": "0.008",
+ "name": "Changer",
+ "symbol": "CNG",
+ "contractAddress": "0x5C1d9aA868a30795F92fAe903eDc9eFF269044bf",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/21786/large/cng.png?1696521140",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "5985.542511355987510812",
+ "amountUsd": "885.860291680686151600176",
+ "price": "0.148",
+ "name": "WOO",
+ "symbol": "WOO",
+ "contractAddress": "0x4691937a7508860F876c9c0a2a617E7d9E945D4B",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12921/large/WOO_Logos_2023_Profile_Pic_WOO.png?1696512709",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "134908.179074505869136306",
+ "amountUsd": "674.54089537252934568153",
+ "price": "0.005",
+ "name": "Furucombo",
+ "symbol": "COMBO",
+ "contractAddress": "0xfFffFffF2ba8F66D4e51811C5190992176930278",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13629/large/COMBO_token_ol.png?1696513377",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "51689.739780035047575291",
+ "amountUsd": "620.276877360420570903492",
+ "price": "0.012",
+ "name": "Beam",
+ "symbol": "BEAM",
+ "contractAddress": "0x62D0A8458eD7719FDAF978fe5929C6D342B0bFcE",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/32417/large/chain-logo.png?1698114384",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.201",
+ "amountUsd": "540.892809",
+ "price": "2691.009",
+ "name": "mETH",
+ "symbol": "mETH",
+ "contractAddress": "0xd5F7838F5C461fefF7FE49ea5ebaF7728bB0ADfa",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33345/large/symbol_transparent_bg.png?1701697066",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "42.412842071038840242",
+ "amountUsd": "441.263208907088093877768",
+ "price": "10.404",
+ "name": "Rocket Pool",
+ "symbol": "RPL",
+ "contractAddress": "0xD33526068D116cE69F19A9ee46F0bd304F21A51f",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/2090/large/rocket_pool_%28RPL%29.png?1696503058",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "97739",
+ "amountUsd": "293.217",
+ "price": "0.003",
+ "name": "Bonsai3",
+ "symbol": "SEED",
+ "contractAddress": "0xe2353069f71a27bBbe66eEabfF05dE109c7d5E19",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33162/large/logo-bonsai3200x200.png?1700830408",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.000014104615563706",
+ "amountUsd": "0.000004922510831733394",
+ "price": "0.349",
+ "name": "Storj",
+ "symbol": "STORJ",
+ "contractAddress": "0xB64ef51C888972c908CFacf59B47C1AfBC0Ab8aC",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/949/large/storj.png?1696502065",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "15945307297.038027211009518403",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "Pepe",
+ "symbol": "PEPE",
+ "contractAddress": "0x6982508145454Ce325dDbE47a25d4ec3d2311933",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/29850/large/pepe-token.jpeg?1696528776",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1073815923.25847686794945247",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "SHIBA INU",
+ "symbol": "SHIB",
+ "contractAddress": "0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/11939/large/shiba.png?1696511800",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.048392888467075907",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "Syncus",
+ "symbol": "SYNC",
+ "contractAddress": "0xa41d2f8Ee4F47D3B860A149765A7dF8c3287b7F0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33573/large/Syncus.png?1702450708",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "10000100",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "XWG",
+ "symbol": "XWG",
+ "contractAddress": "0x0a77eF9bf662D62Fbf9BA4cf861EaA83F9CC4FEC",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/17847/large/200_200_%281%29_%281%29.png?1696790226",
+ "type": "erc20",
+ "decimals": 18
+ }
+ ],
+ "baseToken": {
+ "name": "Ethereum",
+ "symbol": "ETH",
+ "contractAddress": null,
+ "coingeckoId": "ethereum",
+ "type": "native",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
+ "decimals": 18
+ },
+ "batchesInfo": { "commited": "490885", "verified": "490883", "executed": "490839" },
+ "feeParams": {
+ "batchOverheadL1Gas": 1000000,
+ "maxL2GasPerBatch": 80000000,
+ "maxPubdataPerBatch": 120000,
+ "minimalL2GasPrice": "250000000",
+ "priorityTxMaxPubdata": 99000
+ },
+ "metadata": {
+ "iconUrl": "https://s2.coinmarketcap.com/static/img/coins/64x64/24091.png",
+ "name": "ZKsyncERA",
+ "publicRpcs": [
+ "https://mainnet.era.zksync.io",
+ "https://zksync.drpc.org",
+ "https://zksync.meowrpc.com",
+ "https://invalidRpc.com",
+ "https://extraRpc.com"
+ ],
+ "explorerUrl": "https://explorer.zksync.io/",
+ "launchDate": 1679626800
+ }
+}
diff --git a/src/data/ecosystemMockData.json b/src/data/ecosystemMockData.json
new file mode 100644
index 0000000..d2c7826
--- /dev/null
+++ b/src/data/ecosystemMockData.json
@@ -0,0 +1,590 @@
+{
+ "l1Tvl": [
+ {
+ "amount": "118306.55939191423985395",
+ "amountUsd": "300833113.49886311078510011665",
+ "price": "2542.827",
+ "name": "Ethereum",
+ "symbol": "ETH",
+ "contractAddress": null,
+ "type": "native",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
+ "decimals": 18
+ },
+ {
+ "amount": "56310048.030096",
+ "amountUsd": "56366358.078126096",
+ "price": "1.001",
+ "name": "USDC",
+ "symbol": "USDC",
+ "contractAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
+ "type": "erc20",
+ "decimals": 6
+ },
+ {
+ "amount": "998459864.823799773445941598",
+ "amountUsd": "11981518.377885597281351299176",
+ "price": "0.012",
+ "name": "Koi",
+ "symbol": "KOI",
+ "contractAddress": "0x9D14BcE1dADdf408d77295BB1be9b343814f44DE",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/35766/large/Koi_logo.png?1709782399",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "9472627.999218",
+ "amountUsd": "9482100.627217218",
+ "price": "1.001",
+ "name": "Tether USD",
+ "symbol": "USDT",
+ "contractAddress": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/325/large/Tether.png?1696501661",
+ "type": "erc20",
+ "decimals": 6
+ },
+ {
+ "amount": "113.67749192",
+ "amountUsd": "6457843.93470259472",
+ "price": "56808.466",
+ "name": "Wrapped BTC",
+ "symbol": "WBTC",
+ "contractAddress": "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/7598/large/wrapped_bitcoin_wbtc.png?1696507857",
+ "type": "erc20",
+ "decimals": 8
+ },
+ {
+ "amount": "132452368.754496583511107126",
+ "amountUsd": "1721880.793808455585644392638",
+ "price": "0.013",
+ "name": "HYCO",
+ "symbol": "HYCO",
+ "contractAddress": "0x77F76483399Dc6328456105B1db23e2Aca455bf9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/29407/large/coingecko_HYPERCOMIC_LOGO.png?1696528357",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "47964958.588748853386740337",
+ "amountUsd": "1007264.130363725921121547077",
+ "price": "0.021",
+ "name": "Idexo Token",
+ "symbol": "IDO",
+ "contractAddress": "0xF9c53268e9de692AE1b2ea5216E24e1c3ad7CB1E",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/18523/large/qOiqm7T8_400x400.jpg?1696518004",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "257.706060883787096756",
+ "amountUsd": "730177.652550539381483934744",
+ "price": "2833.374",
+ "name": "Rocket Pool ETH",
+ "symbol": "rETH",
+ "contractAddress": "0xae78736Cd615f374D3085123A210448E74Fc6393",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/20764/large/reth.png?1696520159",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "4597086.058830655172811988",
+ "amountUsd": "717145.425177582206958670128",
+ "price": "0.156",
+ "name": "DEXTF Token",
+ "symbol": "DEXTF",
+ "contractAddress": "0x5F64Ab1544D28732F0A24F4713c2C8ec0dA089f0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12634/large/0qgT0aMu_400x400.jpg?1696512442",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "709393.663223743840780868",
+ "amountUsd": "709393.663223743840780868",
+ "price": "1",
+ "name": "Dai Stablecoin",
+ "symbol": "DAI",
+ "contractAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/9956/large/Badge_Dai.png?1696509996",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "3611649.325725586386626848",
+ "amountUsd": "274485.348755144565383640448",
+ "price": "0.076",
+ "name": "GOVI",
+ "symbol": "GOVI",
+ "contractAddress": "0xeEAA40B28A2d1b0B08f6f97bB1DD4B75316c6107",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13875/large/GOVI.png?1696513619",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "162910.961709234801235986",
+ "amountUsd": "162585.139785816331633514028",
+ "price": "0.998",
+ "name": "LUSD Stablecoin",
+ "symbol": "LUSD",
+ "contractAddress": "0x5f98805A4E8be255a32880FDeC7F6728C6568bA0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/14666/large/Group_3.png?1696514341",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "769116.258069049173770643",
+ "amountUsd": "123827.717549116916977073523",
+ "price": "0.161",
+ "name": "Symbiosis",
+ "symbol": "SIS",
+ "contractAddress": "0xd38BB40815d2B0c2d2c866e0c72c5728ffC76dd9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/20805/large/SymbiosisFinance_logo-150x150.jpeg?1696520198",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "34.07328120799622273",
+ "amountUsd": "93326.64908213923806502454",
+ "price": "2738.998",
+ "name": "Coinbase Wrapped Staked ETH",
+ "symbol": "cbETH",
+ "contractAddress": "0xBe9895146f7AF43049ca1c1AE358B0541Ea49704",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/27008/large/cbeth.png?1709186989",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1748294.875759738167409463",
+ "amountUsd": "54197.141148551883189693353",
+ "price": "0.031",
+ "name": "ZKBase",
+ "symbol": "ZKB",
+ "contractAddress": "0xBBBbbBBB46A1dA0F0C3F64522c275BAA4C332636",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13585/large/image_2024-01-16_172847810.png?1705397359",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "70230.481253590057712656",
+ "amountUsd": "42138.2887521540346275936",
+ "price": "0.6",
+ "name": "DeversiFi Token",
+ "symbol": "DVF",
+ "contractAddress": "0xDDdddd4301A082e62E84e43F474f044423921918",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/16414/large/rhinologo.png?1697736807",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "290.508016952",
+ "amountUsd": "40900.62370667208",
+ "price": "140.79",
+ "name": "Wrapped SOL (Wormhole)",
+ "symbol": "SOL",
+ "contractAddress": "0xD31a59c85aE9D8edEFeC411D448f90841571b89c",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/22876/large/SOL_wh_small.png?1696522175",
+ "type": "erc20",
+ "decimals": 9
+ },
+ {
+ "amount": "4028.076528447",
+ "amountUsd": "26339.592419514933",
+ "price": "6.539",
+ "name": "Wrapped TON Coin",
+ "symbol": "TONCOIN",
+ "contractAddress": "0x582d872A1B094FC48F5DE31D3B73F2D9bE47def1",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/17980/large/ton_symbol.png?1696517498",
+ "type": "erc20",
+ "decimals": 9
+ },
+ {
+ "amount": "23546.536039530998897252",
+ "amountUsd": "23570.082575570529896149252",
+ "price": "1.001",
+ "name": "Curve.Fi USD Stablecoin",
+ "symbol": "crvUSD",
+ "contractAddress": "0xf939E0A03FB07F59A73314E73794Be0E57ac1b4E",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/30118/large/0xf939e0a03fb07f59a73314e73794be0e57ac1b4e.png?1721097561",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "8.989236054015567327",
+ "amountUsd": "22847.294053495478354188356",
+ "price": "2541.628",
+ "name": "Wrapped Ether",
+ "symbol": "WETH",
+ "contractAddress": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/2518/large/weth.png?1696503332",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "6450474.040573841973953155",
+ "amountUsd": "19351.422121721525921859465",
+ "price": "0.003",
+ "name": "LSD Coin",
+ "symbol": "LSD",
+ "contractAddress": "0xfAC77A24E52B463bA9857d6b758ba41aE20e31FF",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/29519/large/logo.png?1696528462",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "5.423689884062204153",
+ "amountUsd": "16213.876842359176516206615",
+ "price": "2989.455",
+ "name": "Wrapped liquid staked Ether 2.0",
+ "symbol": "wstETH",
+ "contractAddress": "0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/18834/large/wstETH.png?1696518295",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "34056.984148728150579544",
+ "amountUsd": "13009.767944814153521385808",
+ "price": "0.382",
+ "name": "Bella",
+ "symbol": "BEL",
+ "contractAddress": "0xA91ac63D040dEB1b7A5E4d4134aD23eb0ba07e14",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12478/large/Bella.png?1696512296",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "46220.536588230241212891",
+ "amountUsd": "11324.031464116409097158295",
+ "price": "0.245",
+ "name": "1INCH Token",
+ "symbol": "1INCH",
+ "contractAddress": "0x111111111117dC0aa78b770fA6A738034120C302",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13469/large/1inch-token.png?1696513230",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "563082.288758156473620986",
+ "amountUsd": "9009.316620130503577935776",
+ "price": "0.016",
+ "name": "Deri",
+ "symbol": "DERI",
+ "contractAddress": "0xA487bF43cF3b10dffc97A9A744cbB7036965d3b9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13931/large/200vs200.jpg?1696513670",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "43034.765060388679856659",
+ "amountUsd": "7315.91006026607557563203",
+ "price": "0.17",
+ "name": "Maverick Token",
+ "symbol": "MAV",
+ "contractAddress": "0x7448c7456a97769F6cD04F1E83A4a23cCdC46aBD",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/30850/large/MAV_Logo.png?1696529701",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "4874.863543072452577322",
+ "amountUsd": "7244.047225005664529900492",
+ "price": "1.486",
+ "name": "Worldcoin",
+ "symbol": "WLD",
+ "contractAddress": "0x163f8C2467924be0ae7B5347228CABF260318753",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/31069/large/worldcoin.jpeg?1696529903",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1267111.79536025946087647",
+ "amountUsd": "6335.55897680129730438235",
+ "price": "0.005",
+ "name": "ZigZag",
+ "symbol": "ZZ",
+ "contractAddress": "0xC91a71A1fFA3d8B22ba615BA1B9c01b2BBBf55ad",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/26141/large/zig_zag.?1696525229",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.1",
+ "amountUsd": "5675.4499",
+ "price": "56754.499",
+ "name": "tBTC v2",
+ "symbol": "tBTC",
+ "contractAddress": "0x18084fbA666a33d37592fA2633fD49a74DD93a88",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/11224/large/0x18084fba666a33d37592fa2633fd49a74dd93a88.png?1696511155",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1.607308526702602644",
+ "amountUsd": "4156.075520601880950285984",
+ "price": "2585.736",
+ "name": "rsETH",
+ "symbol": "rsETH",
+ "contractAddress": "0xA1290d69c65A6Fe4DF752f95823fae25cB99e5A7",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33800/large/Icon___Dark.png?1702991855",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "35.167061181353626164",
+ "amountUsd": "3755.806967107385920689036",
+ "price": "106.799",
+ "name": "Aave Token",
+ "symbol": "AAVE",
+ "contractAddress": "0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12645/large/aave-token-round.png?1720472354",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "312.082999060002117307",
+ "amountUsd": "3143.299966532341325516104",
+ "price": "10.072",
+ "name": "ChainLink Token",
+ "symbol": "LINK",
+ "contractAddress": "0x514910771AF9Ca656af840dff83E8264EcF986CA",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/877/large/chainlink-new-logo.png?1696502009",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "154.058620754243125866",
+ "amountUsd": "2615.91538040704827720468",
+ "price": "16.98",
+ "name": "Metaverse Index",
+ "symbol": "MVI",
+ "contractAddress": "0x72e364F2ABdC788b7E918bc238B21f109Cd634D7",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/14684/large/MVI_logo.png?1696514357",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "33",
+ "amountUsd": "1821.369",
+ "price": "55.193",
+ "name": "Tellor Tributes",
+ "symbol": "TRB",
+ "contractAddress": "0x88dF592F8eb5D7Bd38bFeF7dEb0fBc02cf3778a0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/9644/large/Blk_icon_current.png?1696509713",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.639944048220845643",
+ "amountUsd": "1651.358977888638439774782",
+ "price": "2580.474",
+ "name": "Renzo Restaked ETH",
+ "symbol": "Renzo Restaked ETH",
+ "contractAddress": "0xbf5495Efe5DB9ce00f80364C8B423567e58d2110",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/34753/large/Ezeth_logo_circle.png?1713496404",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "4093.979328418030008295",
+ "amountUsd": "1633.497752038793973309705",
+ "price": "0.399",
+ "name": "Matic Token",
+ "symbol": "MATIC",
+ "contractAddress": "0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/4713/large/polygon.png?1698233745",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "132132.766491",
+ "amountUsd": "1189.194898419",
+ "price": "0.009",
+ "name": "Changer",
+ "symbol": "CNG",
+ "contractAddress": "0x5C1d9aA868a30795F92fAe903eDc9eFF269044bf",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/21786/large/cng.png?1696521140",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1164511.592541489082720882",
+ "amountUsd": "1164.511592541489082720882",
+ "price": "0.001",
+ "name": "Fringe",
+ "symbol": "FRIN",
+ "contractAddress": "0xC9fE6E1C76210bE83DC1B5b20ec7FD010B0b1D15",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13222/large/frin.png?1696513001",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "5985.542511355987510812",
+ "amountUsd": "867.90366414661818906774",
+ "price": "0.145",
+ "name": "WOO",
+ "symbol": "WOO",
+ "contractAddress": "0x4691937a7508860F876c9c0a2a617E7d9E945D4B",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/12921/large/WOO_Logos_2023_Profile_Pic_WOO.png?1696512709",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "134908.179074505869136306",
+ "amountUsd": "674.54089537252934568153",
+ "price": "0.005",
+ "name": "Furucombo",
+ "symbol": "COMBO",
+ "contractAddress": "0xfFffFffF2ba8F66D4e51811C5190992176930278",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/13629/large/COMBO_token_ol.png?1696513377",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "51689.739780035047575291",
+ "amountUsd": "620.276877360420570903492",
+ "price": "0.012",
+ "name": "Beam",
+ "symbol": "BEAM",
+ "contractAddress": "0x62D0A8458eD7719FDAF978fe5929C6D342B0bFcE",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/32417/large/chain-logo.png?1698114384",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.201",
+ "amountUsd": "532.432317",
+ "price": "2648.917",
+ "name": "mETH",
+ "symbol": "mETH",
+ "contractAddress": "0xd5F7838F5C461fefF7FE49ea5ebaF7728bB0ADfa",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33345/large/symbol_transparent_bg.png?1701697066",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "42.412842071038840242",
+ "amountUsd": "442.15387859057990952285",
+ "price": "10.425",
+ "name": "Rocket Pool",
+ "symbol": "RPL",
+ "contractAddress": "0xD33526068D116cE69F19A9ee46F0bd304F21A51f",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/2090/large/rocket_pool_%28RPL%29.png?1696503058",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "97739",
+ "amountUsd": "293.217",
+ "price": "0.003",
+ "name": "Bonsai3",
+ "symbol": "SEED",
+ "contractAddress": "0xe2353069f71a27bBbe66eEabfF05dE109c7d5E19",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33162/large/logo-bonsai3200x200.png?1700830408",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.000014104615563706",
+ "amountUsd": "0.000004950720062860806",
+ "price": "0.351",
+ "name": "Storj",
+ "symbol": "STORJ",
+ "contractAddress": "0xB64ef51C888972c908CFacf59B47C1AfBC0Ab8aC",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/949/large/storj.png?1696502065",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "15945307297.038027211009518403",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "Pepe",
+ "symbol": "PEPE",
+ "contractAddress": "0x6982508145454Ce325dDbE47a25d4ec3d2311933",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/29850/large/pepe-token.jpeg?1696528776",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "1073815923.25847686794945247",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "SHIBA INU",
+ "symbol": "SHIB",
+ "contractAddress": "0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/11939/large/shiba.png?1696511800",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "0.048392888467075907",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "Syncus",
+ "symbol": "SYNC",
+ "contractAddress": "0xa41d2f8Ee4F47D3B860A149765A7dF8c3287b7F0",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/33573/large/Syncus.png?1702450708",
+ "type": "erc20",
+ "decimals": 18
+ },
+ {
+ "amount": "10000100",
+ "amountUsd": "0",
+ "price": "0",
+ "name": "XWG",
+ "symbol": "XWG",
+ "contractAddress": "0x0a77eF9bf662D62Fbf9BA4cf861EaA83F9CC4FEC",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/17847/large/200_200_%281%29_%281%29.png?1696790226",
+ "type": "erc20",
+ "decimals": 18
+ }
+ ],
+ "ethGasInfo": { "gasPrice": "2811768091", "erc20Transfer": "34853", "ethTransfer": "21000", "ethPrice": "2609.988" },
+ "zkChains": [
+ {
+ "chainId": "324",
+ "chainType": "Rollup",
+ "baseToken": {
+ "name": "Ethereum",
+ "symbol": "ETH",
+ "contractAddress": null,
+ "coingeckoId": "ethereum",
+ "type": "native",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
+ "decimals": 18
+ },
+ "tvl": "389188998.253667604685659703935",
+ "metadata": {
+ "iconUrl": "https://s2.coinmarketcap.com/static/img/coins/64x64/24091.png",
+ "name": "ZKsyncERA",
+ "publicRpcs": ["https://mainnet.era.zksync.io", "https://zksync.drpc.org", "https://zksync.meowrpc.com"],
+ "explorerUrl": "https://explorer.zksync.io/",
+ "launchDate": 1679626800
+ },
+ "rpc": false
+ },
+ {
+ "chainId": "388",
+ "chainType": "Rollup",
+ "baseToken": {
+ "name": "Ethereum",
+ "symbol": "ETH",
+ "contractAddress": null,
+ "coingeckoId": "ethereum",
+ "type": "native",
+ "imageUrl": "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
+ "decimals": 18
+ },
+ "tvl": "1802056.74192740728",
+ "metadata": {
+ "iconUrl": "https://s3.coinmarketcap.com/static-gravity/image/84e1ec1257dd4a6da6ee5584338a2460.jpeg",
+ "name": "Cronos",
+ "publicRpcs": ["https://mainnet.zkevm.cronos.org"],
+ "explorerUrl": "https://explorer.zkevm.cronos.org/",
+ "launchDate": 1679626800
+ },
+ "rpc": false
+ }
+ ]
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index af3d0f4..8cdcec7 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
export * from './useContext';
+export * from './useCopyToClipboard';
diff --git a/src/hooks/useCopyToClipboard.ts b/src/hooks/useCopyToClipboard.ts
new file mode 100644
index 0000000..d8eca50
--- /dev/null
+++ b/src/hooks/useCopyToClipboard.ts
@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react';
+
+/**
+ * A map of item identifiers to the text copied.
+ * If nothing has been copied yet for a given identifier, the value is `null`.
+ */
+
+type CopiedStates = {
+ [key: string]: string | null;
+};
+
+/**
+ * Function to copy text to the clipboard.
+ * @param text The text to copy to the clipboard.
+ * @param id The id assigned to the text to copy to the clipboard.
+ * @returns {Promise} A promise that resolves to `true` if the text was copied successfully, or `false` otherwise.
+ */
+
+type CopyFn = (id: string, text: string) => Promise;
+
+export function useCopyToClipboard(): [CopiedStates, CopyFn] {
+ const [copiedStates, setCopiedStates] = useState({});
+ const copiedTextTimeout = 800;
+
+ const copy: CopyFn = useCallback(async (id, text) => {
+ if (!navigator?.clipboard) {
+ console.warn('Clipboard not supported');
+ return false;
+ }
+
+ // Try to save to clipboard then save it in the state if worked
+ try {
+ await navigator.clipboard.writeText(text);
+ setCopiedStates((prevStates) => ({ ...prevStates, [id]: text }));
+ setTimeout(() => {
+ setCopiedStates((prevStates) => ({ ...prevStates, [id]: null }));
+ }, copiedTextTimeout);
+
+ return true;
+ } catch (error) {
+ console.warn('Copy failed', error);
+ return false;
+ }
+ }, []);
+
+ return [copiedStates, copy];
+}