From b241385e784147f2377ba9034cfe3fadaaf2536f Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 10 Sep 2024 15:27:23 -0300 Subject: [PATCH 1/3] style: remove testing mode var --- cypress/cypress.env.json | 3 +-- src/config/env.ts | 2 -- src/types/Config.ts | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/cypress/cypress.env.json b/cypress/cypress.env.json index f45bb1d..ac9e827 100644 --- a/cypress/cypress.env.json +++ b/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" } diff --git a/src/config/env.ts b/src/config/env.ts index 9946606..5aee8c3 100644 --- a/src/config/env.ts +++ b/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, }; }; diff --git a/src/types/Config.ts b/src/types/Config.ts index b13339a..876e3b1 100644 --- a/src/types/Config.ts +++ b/src/types/Config.ts @@ -2,7 +2,6 @@ export interface Env { PROJECT_ID: string; API_URL: string; TESTNET_MODE: string; - TESTING_MODE: string; } export type SupportedLanguage = 'en' | 'es'; From 00af817d68ab292245485885cef698042fe8c5f1 Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 10 Sep 2024 17:26:16 -0300 Subject: [PATCH 2/3] feat: copy to clipboard --- public/locales/en/common.json | 2 + public/locales/es/common.json | 3 +- src/components/ChainTable.tsx | 5 +- src/components/RPC.tsx | 24 +- src/components/Tooltip.tsx | 14 + src/components/index.ts | 1 + src/containers/Tokens/TokensTable.tsx | 25 +- src/data/chainMockData.json | 574 +++++++++++++++++++++++++ src/data/ecosystemMockData.json | 590 ++++++++++++++++++++++++++ src/hooks/index.ts | 1 + src/hooks/useCopyToClipboard.ts | 47 ++ 11 files changed, 1269 insertions(+), 17 deletions(-) create mode 100644 src/components/Tooltip.tsx create mode 100644 src/data/chainMockData.json create mode 100644 src/data/ecosystemMockData.json create mode 100644 src/hooks/useCopyToClipboard.ts 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]; +} From 647c8c582ebaa942a99a083bdbde50230dbe4eb3 Mon Sep 17 00:00:00 2001 From: titix Date: Tue, 10 Sep 2024 17:43:44 -0300 Subject: [PATCH 3/3] fix: rpc dynamic grid --- src/components/RPC.tsx | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/components/RPC.tsx b/src/components/RPC.tsx index df90c57..3611cfb 100644 --- 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,6 +45,10 @@ export const RPC = () => { return rpcData.length > 4 && !rpcIsLoading; }, [rpcData, rpcIsLoading]); + const count = useMemo(() => { + return Math.min(rpcData.length, 4); + }, [rpcData.length]); + return (
@@ -48,7 +56,7 @@ export const RPC = () => { {t('CHAIN.RPC.subtitle')} - + {rpcIsLoading && Array.from({ length: 4 }).map((_, index) => ( @@ -89,7 +97,7 @@ export const RPC = () => { {t('CHAIN.CHAININFORMATION.notAvailable')} )} - + {showMoreButton && ( @@ -104,6 +112,22 @@ export const RPC = () => { ); }; +export const RPCContainer = styled(Box)(({ 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,