diff --git a/mocks/stats/index.ts b/mocks/stats/index.ts index c12d6bf652..a3f5d6b212 100644 --- a/mocks/stats/index.ts +++ b/mocks/stats/index.ts @@ -4,7 +4,7 @@ export const base = { average_block_time: 6212.0, coin_price: '0.00199678', coin_price_change_percentage: -7.42, - coin_icon: '', + coin_image: 'http://localhost:3100/utia.jpg', gas_prices: { average: { fiat_price: '1.39', diff --git a/public/assets/featured_networks.json b/public/assets/featured_networks.json deleted file mode 100644 index b919681511..0000000000 --- a/public/assets/featured_networks.json +++ /dev/null @@ -1,176 +0,0 @@ -[{ - "title": "Ethereum", - "url": "https://eth.blockscout.com/", - "group": "Mainnets", - "isActive": true, - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/ethereum.svg" - }, - { - "title": "Optimism", - "url": "https://optimism.blockscout.com/", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg" - }, - { - "title": "Base Chain", - "url": "https://base.blockscout.com/", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg" - }, - { - "title": "RSK", - "url": "https://blockscout.com/rsk/mainnet", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/rsk.svg" - }, - { - "title": "LightLink Phoenix", - "url": "https://phoenix.lightlink.blockscout.com/", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/lightlink-short.svg" - }, - { - "title": "Neon", - "url": "https://neon.blockscout.com/", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/neon-short.svg" - }, - { - "title": "Ethereum Classic", - "url": "https://blockscout.com/etc/mainnet", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/ethereum-classic.svg" - }, - { - "title": "Gnosis Chain", - "url": "https://gnosis.blockscout.com/", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/gnosis.svg" - }, - { - "title": "Astar (EVM)", - "url": "https://blockscout.com/astar", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/astar.svg" - }, - { - "title": "Shiden (EVM)", - "url": "https://blockscout.com/shiden", - "group": "Mainnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/shiden.svg" - }, - { - "title": "Goerli", - "url": "https://eth-goerli.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/goerli.svg", - "invertIconInDarkMode": true - }, - { - "title": "Sepolia", - "url": "https://eth-sepolia.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png" - }, - { - "title": "Holesky", - "url": "https://eth-holesky.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/ethereum.svg" - }, - { - "title": "Base Göerli", - "url": "https://base-goerli.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg", - "invertIconInDarkMode": true - }, - { - "title": "Base Sepolia", - "url": "https://base-sepolia.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/base.svg", - "invertIconInDarkMode": true - }, - { - "title": "Optimism Goerli", - "url": "https://optimism-goerli.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg" - }, - { - "title": "Optimism Sepolia", - "url": "https://optimism-sepolia.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg" - }, - { - "title": "Optimism Bedrock Beta", - "url": "https://blockscout.com/optimism/bedrock-beta", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg" - }, - { - "title": "ZetaChain testnet", - "url": "https://zetachain-athens-3.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/zetachain.svg", - "invertIconInDarkMode": true - }, - { - "title": "LightLink Pegasus", - "url": "https://pegasus.lightlink.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/lightlink-short.svg", - "invertIconInDarkMode": true - }, - { - "title": "Neon Devnet", - "url": "https://neon-devnet.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/neon-short.svg" - }, - { - "title": "Gnosis Chiado", - "url": "https://gnosis-chiado.blockscout.com/", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/gnosis_chiado.svg" - }, - { - "title": "Shibuya (EVM)", - "url": "https://blockscout.com/shibuya", - "group": "Testnets", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/shibuya.svg", - "invertIconInDarkMode": true - }, - { - "title": "Optimism Opcraft", - "url": "https://blockscout.com/optimism/opcraft", - "group": "Other", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism_opcraft.svg" - }, - { - "title": "ARTIS-Σ1", - "url": "https://blockscout.com/artis/sigma1", - "group": "Other", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/artis.svg" - }, - { - "title": "LUKSO L14", - "url": "https://blockscout.com/lukso/l14", - "group": "Other", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/lukso.svg" - }, - { - "title": "POA", - "url": "https://blockscout.com/poa/core", - "group": "Other", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/poa.svg" - }, - { - "title": "POA Sokol", - "url": "https://blockscout.com/poa/sokol", - "group": "Other", - "icon": "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/poa-sokol.svg" - } -] diff --git a/public/assets/footer_links.json b/public/assets/footer_links.json deleted file mode 100644 index d94b86b2b2..0000000000 --- a/public/assets/footer_links.json +++ /dev/null @@ -1,23 +0,0 @@ -[ - { - "title": "Partners", - "links": [ - { - "text": "MetaSuites", - "url": "https://blocksec.com/metasuites" - }, - { - "text": "Sourcify", - "url": "https://sourcify.dev/" - }, - { - "text": "DRPC", - "url": "https://drpc.org?ref=559183" - }, - { - "text": "BlockSec", - "url": "https://blocksec.com/" - } - ] - } -] diff --git a/public/assets/marketplace_categories.json b/public/assets/marketplace_categories.json deleted file mode 100644 index f314655b36..0000000000 --- a/public/assets/marketplace_categories.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - "Swaps", - "Bridges", - "Liquid Staking", - "Liquid staking", - "Lending", - "Yield Aggregators", - "Yield aggregators", - "CDP", - "CDPs", - "NFT", - "NFTs", - "Wallets", - "Games", - "Dev tooling", - "Dev toolings", - "Data & Analytics", - "Infra & Dev tooling", - "DeFi", - "Data", - "Bridge", - "Payments", - "Faucet", - "DAO", - "Wallet" -] diff --git a/public/assets/marketplace_config.json b/public/assets/marketplace_config.json deleted file mode 100644 index 048c0972a1..0000000000 --- a/public/assets/marketplace_config.json +++ /dev/null @@ -1,153 +0,0 @@ -[ - { - "author": "Hop", - "id": "hop-exchange", - "title": "Hop", - "logo": "https://blockscout-content.s3.amazonaws.com/hop.png", - "categories": ["Bridge"], - "shortDescription": "Hop is a scalable rollup-to-rollup general token bridge. It allows users to send tokens from one rollup or sidechain to another almost immediately without having to wait for the networks challenge period.", - "site": "https://help.hop.exchange/hc/en-us/articles/4405172445197-What-is-Hop-Protocol-", - "description": "Hop is a scalable rollup-to-rollup general token bridge. It allows users to send tokens from one rollup or sidechain to another almost immediately without having to wait for the networks challenge period.", - "external": true, - "url": "https://goerli.hop.exchange/send?token=ETH&sourceNetwork=ethereum", - "internalWallet": false - }, - { - "author": "Blockscout", - "id": "token-approval-tracker", - "title": "Token Approval Tracker", - "logo": "https://blockscout-content.s3.amazonaws.com/token-approval.png", - "categories": ["Infra & Dev tooling"], - "shortDescription": "Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.", - "site": "https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker", - "description": "Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.", - "external": false, - "url": "https://approval-tracker.apps.blockscout.com/", - "internalWallet": false, - "priority": 0 - }, - { - "author": "Revoke", - "id": "revoke.cash", - "title": "Revoke.cash", - "logo": "https://blockscout-content.s3.amazonaws.com/revokecash.png", - "categories": ["Infra & Dev tooling"], - "shortDescription": "Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.", - "site": "https://revoke.cash/about", - "external": false, - "description": "Revoke.cash comes in as a preventative tool to manage your token allowances and practice proper wallet hygiene. By regularly revoking active allowances you reduce the chances of becoming the victim of allowance exploits.", - "url": "https://revoke.cash/", - "internalWallet": true, - "priority": 2 - }, - { - "author": "Aave", - "id": "aave", - "title": "Aave", - "logo": "https://blockscout-content.s3.amazonaws.com/aave.png", - "categories": ["DeFi"], - "shortDescription": "Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.", - "site": "https://docs.aave.com/faq/", - "external": false, - "description": "Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.", - "url": "https://staging.aave.com/", - "internalWallet": true, - "priority": 4 - }, - { - "author": "LooksRare", - "id": "looksrare", - "title": "LooksRare", - "logo": "https://blockscout-content.s3.amazonaws.com/looksrare.png", - "categories": ["NFT"], - "shortDescription": "LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.", - "external": true, - "site": "https://docs.looksrare.org/about/welcome-to-looksrare", - "description": "LooksRare is the web3 NFT Marketplace where traders and collectors have earned over $1.3 Billion in rewards.", - "url": "https://goerli.looksrare.org/", - "internalWallet": false - }, - { - "author": "dYdX", - "id": "dydx", - "title": "dYdX", - "logo": "https://blockscout-content.s3.amazonaws.com/dydx.png", - "categories": ["DeFi"], - "external": true, - "shortDescription": "dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.", - "site": "https://help.dydx.exchange/en/articles/3047379-introduction-and-overview", - "description": "dYdX is a leading decentralized exchange that currently supports perpetual trading. dYdX runs on smart contracts on the Ethereum blockchain, and allows users to trade with no intermediaries.", - "url": "https://trade.stage.dydx.exchange/portfolio/overview", - "internalWallet": false - }, - { - "author": "MetalSwap", - "id": "metalswap", - "title": "MetalSwap", - "logo": "https://blockscout-content.s3.amazonaws.com/MetalSwap.png", - "categories": ["DeFi"], - "shortDescription": "MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.", - "site": "https://docs.metalswap.finance/", - "external": false, - "description": "MetalSwap is a decentralised platform that enables hedging swaps in financial markets with the aim of providing a hedge for commodity traders and an investment opportunity for those who contribute to the shared liquidity of the project.", - "url": "https://demo.metalswap.finance/", - "internalWallet": false - }, - { - "author": "FaucetDao", - "id": "faucetdao", - "title": "FaucetDao", - "logo": "https://blockscout-content.s3.amazonaws.com/faucet-dao.png", - "categories": ["Faucet"], - "shortDescription": "FaucetDao is a decentralised community fund providing liquidity and support to early-stage well-vetted blockchain projects.", - "site": "https://linktr.ee/faucet_dao", - "external": false, - "description": "FaucetDao is a decentralised community fund providing liquidity and support to early-stage well-vetted blockchain projects.", - "url": "https://www.faucetdao.shop/swap?chain=goerli", - "internalWallet": true, - "priority": 1 - }, - { - "author": "Uniswap", - "id": "uniswap", - "title": "Uniswap", - "logo": "https://blockscout-content.s3.amazonaws.com/uniswap.png", - "categories": ["Bridge"], - "shortDescription": "Uniswap is a cryptocurrency exchange that uses a decentralized network protocol.", - "site": "https://docs.uniswap.org/", - "external": false, - "description": "Uniswap is a cryptocurrency exchange that uses a decentralized network protocol.", - "url": "https://app.uniswap.org/swap", - "internalWallet": true, - "priority": 5 - }, - { - "author": "zkBob", - "id": "zkbob-wallet", - "title": "zkBob Wallet", - "logo": "https://blockscout-content.s3.amazonaws.com/zkbob-logo.png", - "categories": ["Wallet"], - "shortDescription": "A Web3 smart-contract privacy wallet based on ZKP technology. zkBob could be used for regular transfers, payments, and much more. Compliance features backed in!", - "site": "https://zkbob.com", - "description": "zkBob simplifies secure, limited-value, and anonymous token transfers for everyday users. The application accepts WETH, ETH, USDC. Once one of the tokens is deposited in the zkBob app, pool participants can transfer tokens amongst themselves in a private, secure manner. The shielded zkBob pool uses zkproofs to limit public data exposure", - "external": false, - "url": "https://staging--zkbob.netlify.app/transfer", - "twitter": "https://twitter.com/zkBob_", - "telegram": "https://t.me/zkbobcommunity", - "internalWallet": false - }, - { - "author": "Swapr", - "id": "swapr", - "title": "Swapr", - "logo": "https://blockscout-content.s3.amazonaws.com/swapr.png", - "categories": ["DeFi"], - "shortDescription": "A governance-enabled automated market maker with adjustable fees.", - "site": "https://swapr.eth.dev.lastmilelabs.systems", - "description": "A governance-enabled automated market maker with adjustable fees.", - "external": false, - "url": "https://swapr.eth.limo/#/swap", - "internalWallet": false, - "priority": 3 - } -] diff --git a/public/assets/network_icon.png b/public/assets/network_icon.png deleted file mode 100644 index c1e1a331e1..0000000000 Binary files a/public/assets/network_icon.png and /dev/null differ diff --git a/public/assets/network_icon_dark.png b/public/assets/network_icon_dark.png deleted file mode 100644 index c1e1a331e1..0000000000 Binary files a/public/assets/network_icon_dark.png and /dev/null differ diff --git a/public/assets/network_logo.svg b/public/assets/network_logo.svg deleted file mode 100644 index 430c44cdc5..0000000000 --- a/public/assets/network_logo.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/network_logo_dark.svg b/public/assets/network_logo_dark.svg deleted file mode 100644 index 430c44cdc5..0000000000 --- a/public/assets/network_logo_dark.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/og_image.jpg b/public/assets/og_image.jpg deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/assets/og_image.png b/public/assets/og_image.png deleted file mode 100644 index 91d21ec443..0000000000 Binary files a/public/assets/og_image.png and /dev/null differ diff --git a/public/envs.js b/public/envs.js deleted file mode 100644 index ac6bf3afb4..0000000000 --- a/public/envs.js +++ /dev/null @@ -1,44 +0,0 @@ -window.__envs = { -NEXT_PUBLIC_HAS_BEACON_CHAIN: "true", -NEXT_PUBLIC_GIT_TAG: "v1.30.0-alpha", -NEXT_PUBLIC_GRAPHIQL_TRANSACTION: "0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d", -NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']", -NEXT_PUBLIC_FEATURED_NETWORKS: "https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth.json", -NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: "https://admin-rs.services.blockscout.com", -NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'OpenSea','collection_url':'https://opensea.io/assets/ethereum/{hash}','instance_url':'https://opensea.io/assets/ethereum/{hash}/{id}','logo_url':'https://opensea.io/static/images/logos/opensea-logo.svg'},{'name':'LooksRare','collection_url':'https://looksrare.org/collections/{hash}','instance_url':'https://looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]", -NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: "validation", -NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: "blockscout", -NEXT_PUBLIC_METADATA_SERVICE_API_HOST: "https://metadata.services.blockscout.com", -NEXT_PUBLIC_API_HOST: "eth.blockscout.com", -NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}},{'title':'Blockchair','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/blockchair.png?raw=true','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'Sentio','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/sentio.png?raw=true','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}},{'title':'Tenderly','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/tenderly.png?raw=true','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}},{'title':'0xPPL','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/0xPPl.png?raw=true','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}},{'title':'3xpl','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/3xpl.png?raw=true','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}}]", -NEXT_PUBLIC_NETWORK_ID: "1", -NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL: "ETH", -NEXT_PUBLIC_GIT_COMMIT_SHA: "2ad868770", -NEXT_PUBLIC_VISUALIZE_API_HOST: "https://visualizer.services.blockscout.com", -NEXT_PUBLIC_MARKETPLACE_ENABLED: "true", -NEXT_PUBLIC_SAFE_TX_SERVICE_URL: "https://safe-transaction-mainnet.safe.global", -NEXT_PUBLIC_CONTRACT_INFO_API_HOST: "https://contracts-info.services.blockscout.com", -NEXT_PUBLIC_APP_HOST: "localhost", -NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: "https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json", -NEXT_PUBLIC_OG_IMAGE_URL: "https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true", -NEXT_PUBLIC_NETWORK_RPC_URL: "https://eth.llamarpc.com", -NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: "true", -NEXT_PUBLIC_APP_PORT: "3000", -NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: "18", -NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED: "true", -NEXT_PUBLIC_NETWORK_NAME: "Ethereum", -NEXT_PUBLIC_NETWORK_SHORT_NAME: "ETH", -NEXT_PUBLIC_APP_ENV: "development", -NEXT_PUBLIC_API_BASE_PATH: "/", -NEXT_PUBLIC_AUTH_URL: "http://localhost:3000/login", -NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM: "https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form", -NEXT_PUBLIC_NAME_SERVICE_API_HOST: "https://bens.services.blockscout.com", -NEXT_PUBLIC_APP_PROTOCOL: "http", -NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED: "true", -NEXT_PUBLIC_LOGOUT_URL: "https://blockscoutcom.us.auth0.com/v2/logout", -NEXT_PUBLIC_AD_BANNER_PROVIDER: "hype", -NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: "true", -NEXT_PUBLIC_STATS_API_HOST: "https://stats-eth-main.k8s-prod-1.blockscout.com", -NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: "https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL", -NEXT_PUBLIC_NETWORK_CURRENCY_NAME: "Ether", -} diff --git a/ui/address/details/AddressBalance.tsx b/ui/address/details/AddressBalance.tsx index 37318def43..d135355472 100644 --- a/ui/address/details/AddressBalance.tsx +++ b/ui/address/details/AddressBalance.tsx @@ -5,14 +5,13 @@ import type { SocketMessage } from 'lib/socket/types'; import type { Address } from 'types/api/address'; import config from 'configs/app'; -import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery'; +import { getResourceKey } from 'lib/api/useApiQuery'; import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketMessage from 'lib/socket/useSocketMessage'; import { currencyUnits } from 'lib/units'; -import { HOMEPAGE_STATS } from 'stubs/stats'; import CurrencyValue from 'ui/shared/CurrencyValue'; import DetailsInfoItem from 'ui/shared/DetailsInfoItem'; -import { NativeIcon } from 'ui/shared/entities/token/TokenEntity'; +import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; interface Props { data: Pick; @@ -23,13 +22,6 @@ const AddressBalance = ({ data, isLoading }: Props) => { const [ lastBlockNumber, setLastBlockNumber ] = React.useState(data.block_number_balance_updated_at || 0); const queryClient = useQueryClient(); - const statsQueryResult = useApiQuery('stats', { - queryOptions: { - refetchOnMount: false, - placeholderData: HOMEPAGE_STATS, - }, - }); - const updateData = React.useCallback((balance: string, exchangeRate: string, blockNumber: number) => { if (blockNumber < lastBlockNumber) { return; @@ -81,7 +73,7 @@ const AddressBalance = ({ data, isLoading }: Props) => { alignSelf="center" isLoading={ isLoading } > - + string; valueDiff?: (stats?: HomeStats) => number | null | undefined; - icon: (stats?: { data?: HomeStats; isLoading: boolean }) => React.ReactNode; + icon: React.ReactNode; isSelected: boolean; onClick: (id: ChainIndicatorId) => void; stats: UseQueryResult>; @@ -92,7 +92,7 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC zIndex: 1, }} > - { icon({ data: stats.data, isLoading: stats.isPlaceholderData }) } + { icon } { title } diff --git a/ui/home/indicators/types.ts b/ui/home/indicators/types.ts index 61c11f75ca..05b7680be5 100644 --- a/ui/home/indicators/types.ts +++ b/ui/home/indicators/types.ts @@ -11,7 +11,7 @@ export interface TChainIndicator { title: string; value: (stats: HomeStats) => string; valueDiff?: (stats?: HomeStats) => number | null | undefined; - icon: (stats?: { data?: HomeStats; isLoading: boolean }) => React.ReactNode; + icon: React.ReactNode; hint?: string; api: { resourceName: R; diff --git a/ui/home/indicators/utils/indicators.tsx b/ui/home/indicators/utils/indicators.tsx index ee893c3573..6048a3af1e 100644 --- a/ui/home/indicators/utils/indicators.tsx +++ b/ui/home/indicators/utils/indicators.tsx @@ -1,13 +1,12 @@ import React from 'react'; import type { TChainIndicator } from '../types'; -import type { HomeStats } from 'types/api/stats'; import type { TimeChartItem, TimeChartItemRaw } from 'ui/shared/chart/types'; import config from 'configs/app'; import { sortByDateDesc } from 'ui/shared/chart/utils/sorts'; -import { NativeIcon } from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; +import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; const nonNullTailReducer = (result: Array, item: TimeChartItemRaw) => { if (item.value === null && result.length === 0) { @@ -25,7 +24,7 @@ const dailyTxsIndicator: TChainIndicator<'stats_charts_txs'> = { value: (stats) => stats.transactions_today === null ? 'N/A' : Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }), - icon: () => , + icon: , hint: `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`, api: { resourceName: 'stats_charts_txs', @@ -48,8 +47,7 @@ const coinPriceIndicator: TChainIndicator<'stats_charts_market'> = { '$N/A' : '$' + Number(stats.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }), valueDiff: (stats) => stats?.coin_price !== null ? stats?.coin_price_change_percentage : null, - icon: (stats?: { data?: HomeStats; isLoading: boolean }) => - , + icon: , hint: `${ config.chain.currency.symbol } token daily price in USD.`, api: { resourceName: 'stats_charts_market', @@ -72,7 +70,7 @@ const secondaryCoinPriceIndicator: TChainIndicator<'stats_charts_secondary_coin_ '$N/A' : '$' + Number(stats.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }), valueDiff: () => null, - icon: () => , + icon: , hint: `${ config.chain.secondaryCoin.symbol } token daily price in USD.`, api: { resourceName: 'stats_charts_secondary_coin_price', @@ -94,7 +92,7 @@ const marketPriceIndicator: TChainIndicator<'stats_charts_market'> = { value: (stats) => stats.market_cap === null ? '$N/A' : '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }), - icon: () => , + icon: , // eslint-disable-next-line max-len hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.', api: { @@ -131,7 +129,7 @@ const tvlIndicator: TChainIndicator<'stats_charts_market'> = { value: (stats) => stats.tvl === null ? '$N/A' : '$' + Number(stats.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }), - icon: () => , + icon: , // eslint-disable-next-line max-len hint: 'Total value of digital assets locked or staked in a chain', api: { diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx index f668a6e23e..ef2c102bfa 100644 --- a/ui/pages/GasTracker.tsx +++ b/ui/pages/GasTracker.tsx @@ -8,8 +8,8 @@ import { HOMEPAGE_STATS } from 'stubs/stats'; import GasTrackerChart from 'ui/gasTracker/GasTrackerChart'; import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization'; import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices'; -import { NativeIcon } from 'ui/shared/entities/token/TokenEntity'; import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer'; +import NativeTokenIcon from 'ui/shared/NativeTokenIcon'; import PageTitle from 'ui/shared/Page/PageTitle'; const GasTracker = () => { @@ -56,7 +56,7 @@ const GasTracker = () => { ) } { data?.coin_price && ( - + { config.chain.currency.symbol } ${ Number(data.coin_price).toLocaleString(undefined, { maximumFractionDigits: 2 }) } diff --git a/ui/pages/Home.pw.tsx b/ui/pages/Home.pw.tsx index 6c3c18cc8c..1e2862bffc 100644 --- a/ui/pages/Home.pw.tsx +++ b/ui/pages/Home.pw.tsx @@ -1,4 +1,3 @@ -import { test, expect, devices } from '@playwright/experimental-ct-react'; import type { Locator } from '@playwright/test'; import React from 'react'; @@ -6,9 +5,8 @@ import * as blockMock from 'mocks/blocks/block'; import * as dailyTxsMock from 'mocks/stats/daily_txs'; import * as statsMock from 'mocks/stats/index'; import * as txMock from 'mocks/txs/tx'; -import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; +import { test, expect, devices } from 'playwright/lib'; import TestApp from 'playwright/TestApp'; -import buildApiUrl from 'playwright/utils/buildApiUrl'; import * as configs from 'playwright/utils/configs'; import Home from './Home'; @@ -16,30 +14,19 @@ import Home from './Home'; test.describe('default view', () => { let component: Locator; - test.beforeEach(async({ page, mount }) => { - await page.route(buildApiUrl('stats'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify(statsMock.base), - })); - await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify([ - blockMock.base, - blockMock.base2, - ]), - })); - await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify([ - txMock.base, - txMock.withContractCreation, - txMock.withTokenTransfer, - ]), - })); - await page.route(buildApiUrl('stats_charts_txs'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify(dailyTxsMock.base), - })); + test.beforeEach(async({ mount, mockApiResponse, mockAssetResponse }) => { + await mockAssetResponse(statsMock.base.coin_image, './playwright/mocks/image_s.jpg'); + await mockApiResponse('stats', statsMock.base); + await mockApiResponse('homepage_blocks', [ + blockMock.base, + blockMock.base2, + ]); + await mockApiResponse('homepage_txs', [ + txMock.base, + txMock.withContractCreation, + txMock.withTokenTransfer, + ]); + await mockApiResponse('stats_charts_txs', dailyTxsMock.base); component = await mount( @@ -69,14 +56,13 @@ test.describe('default view', () => { test.describe('custom hero plate background', () => { const IMAGE_URL = 'https://localhost:3000/my-image.png'; - const extendedTest = test.extend({ - context: contextWithEnvs([ - { name: 'NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND', value: `no-repeat center/cover url(${ IMAGE_URL })` }, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ]) as any, + test.beforeEach(async({ mockEnvs }) => { + await mockEnvs([ + [ 'NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND', `no-repeat center/cover url(${ IMAGE_URL })` ], + ]); }); - extendedTest('default view', async({ mount, page }) => { + test('default view', async({ mount, page }) => { await page.route(IMAGE_URL, (route) => { return route.fulfill({ status: 200, @@ -103,30 +89,19 @@ test.describe('custom hero plate background', () => { test.describe('mobile', () => { test.use({ viewport: devices['iPhone 13 Pro'].viewport }); - test('base view', async({ mount, page }) => { - await page.route(buildApiUrl('stats'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify(statsMock.base), - })); - await page.route(buildApiUrl('homepage_blocks'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify([ - blockMock.base, - blockMock.base2, - ]), - })); - await page.route(buildApiUrl('homepage_txs'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify([ - txMock.base, - txMock.withContractCreation, - txMock.withTokenTransfer, - ]), - })); - await page.route(buildApiUrl('stats_charts_txs'), (route) => route.fulfill({ - status: 200, - body: JSON.stringify(dailyTxsMock.base), - })); + test('base view', async({ mount, page, mockAssetResponse, mockApiResponse }) => { + await mockAssetResponse(statsMock.base.coin_image, './playwright/mocks/image_s.jpg'); + await mockApiResponse('stats', statsMock.base); + await mockApiResponse('homepage_blocks', [ + blockMock.base, + blockMock.base2, + ]); + await mockApiResponse('homepage_txs', [ + txMock.base, + txMock.withContractCreation, + txMock.withTokenTransfer, + ]); + await mockApiResponse('stats_charts_txs', dailyTxsMock.base); const component = await mount( diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index 93867d9c95..6f9eb34dd0 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png index 04eb13f1c1..f906d3bc32 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png index 8731379223..f0a0b7eb28 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png index 4fa92d2626..dcbb9c80f6 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png index bac6b56cc0..81c3127770 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png index 2e38759753..421d3ac01b 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/shared/NativeTokenIcon.tsx b/ui/shared/NativeTokenIcon.tsx new file mode 100644 index 0000000000..6b47bb8e2b --- /dev/null +++ b/ui/shared/NativeTokenIcon.tsx @@ -0,0 +1,39 @@ +import { Skeleton, Image, chakra } from '@chakra-ui/react'; +import React from 'react'; + +import config from 'configs/app'; +import useApiQuery from 'lib/api/useApiQuery'; +import { HOMEPAGE_STATS } from 'stubs/stats'; + +import TokenLogoPlaceholder from './TokenLogoPlaceholder'; + +type Props = { + isLoading?: boolean; + className?: string; +} + +const NativeTokenIcon = (props: Props) => { + const statsQueryResult = useApiQuery('stats', { + queryOptions: { + refetchOnMount: false, + placeholderData: HOMEPAGE_STATS, + }, + }); + + if (props.isLoading || statsQueryResult.isPlaceholderData) { + return ; + } + + return ( + { } + fallbackStrategy={ statsQueryResult.data?.coin_image ? 'onError' : 'beforeLoadOrError' } + /> + ); +}; + +export default chakra(NativeTokenIcon); diff --git a/ui/shared/entities/token/TokenEntity.tsx b/ui/shared/entities/token/TokenEntity.tsx index ca07a04472..d7cd9f7500 100644 --- a/ui/shared/entities/token/TokenEntity.tsx +++ b/ui/shared/entities/token/TokenEntity.tsx @@ -7,7 +7,6 @@ import type { TokenInfo } from 'types/api/token'; import { route } from 'nextjs-routes'; -import config from 'configs/app'; import * as EntityBase from 'ui/shared/entities/base/components'; import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder'; import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip'; @@ -168,16 +167,3 @@ export { Content, Copy, }; - -type NativeIconProps = Omit & { src?: string | null }; - -const NATIVE_TOKEN_DATA = { - name: config.chain.currency.name || '', - symbol: '', - address: '', - type: 'ERC-20' as const, -}; - -export const NativeIcon = (props: NativeIconProps) => { - return ; -};