diff --git a/.eslintrc.js b/.eslintrc.js index cd540371c6..49e2ad4c43 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,9 +5,19 @@ const RESTRICTED_MODULES = { { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' }, { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' }, { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' }, + { + name: '@chakra-ui/react', + importNames: [ 'Popover', 'Menu', 'useToast' ], + message: 'Please use corresponding component or hook from ui/shared/chakra component instead', + }, + { + name: 'lodash', + message: 'Please use `import [package] from \'lodash/[package]\'` instead.', + }, ], patterns: [ 'icons/*', + '!lodash/*', ], }; diff --git a/.github/workflows/deploy-review.yml b/.github/workflows/deploy-review.yml index d48d155d14..4596a3293b 100644 --- a/.github/workflows/deploy-review.yml +++ b/.github/workflows/deploy-review.yml @@ -12,6 +12,7 @@ on: - none - arbitrum - base + - celo_alfajores - gnosis - eth - eth_sepolia diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 7b37441165..2a1648ac2a 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -339,7 +339,9 @@ "main", "main.L2", "localhost", + "arbitrum", "base", + "celo_alfajores", "gnosis", "eth", "eth_goerli", diff --git a/configs/app/chain.ts b/configs/app/chain.ts index 66d60e1779..0ee6d2de6f 100644 --- a/configs/app/chain.ts +++ b/configs/app/chain.ts @@ -15,6 +15,7 @@ const chain = Object.freeze({ secondaryCoin: { symbol: getEnvValue('NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL'), }, + hasMultipleGasCurrencies: getEnvValue('NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES') === 'true', tokenStandard: getEnvValue('NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME') || 'ERC', rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'), isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true', diff --git a/configs/envs/.env.celo_alfajores b/configs/envs/.env.celo_alfajores new file mode 100644 index 0000000000..4d710a5a03 --- /dev/null +++ b/configs/envs/.env.celo_alfajores @@ -0,0 +1,66 @@ +# Set of ENVs for Celo Alfajjores network explorer +# https://celo-alfajores.blockscout.com/ + +# app configuration +NEXT_PUBLIC_APP_PROTOCOL=http +NEXT_PUBLIC_APP_HOST=localhost +NEXT_PUBLIC_APP_PORT=3000 + +# blockchain parameters +NEXT_PUBLIC_NETWORK_NAME=Celo Alfajores +NEXT_PUBLIC_NETWORK_SHORT_NAME=Alfajores +NEXT_PUBLIC_NETWORK_ID=44787 +NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Celo +NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=CELO +NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18 +NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES=true +NEXT_PUBLIC_NETWORK_RPC_URL=https://alfajores-forno.celo-testnet.org +NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation +NEXT_PUBLIC_IS_TESTNET=true + +# api configuration +NEXT_PUBLIC_API_HOST=celo-alfajores.blockscout.com +NEXT_PUBLIC_API_BASE_PATH=/ + +# ui config +## homepage +NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs'] +NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(0,0,0,1) +NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(252,255,82,1) +## sidebar +NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/celo-logo-light.svg +NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/celo-logo-dark.svg +NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/celo-icon-light.svg +NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/celo-icon-dark.svg +## footer +##views +NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES=[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}] +## misc +NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}] +## views +NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}] +NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true + +# app features +NEXT_PUBLIC_APP_ENV=development +NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d +NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml +NEXT_PUBLIC_GAS_TRACKER_ENABLED=false +NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true +NEXT_PUBLIC_AUTH_URL=http://localhost:3000 +NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout +NEXT_PUBLIC_MARKETPLACE_ENABLED=true +NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/eth-goerli.json +NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json +NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json +NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form +NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL +NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout +NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com +# NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com +NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.k8s-dev.blockscout.com +NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com +NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs-test.k8s-dev.blockscout.com +NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/celo.png + + diff --git a/configs/envs/.env.eth b/configs/envs/.env.eth index e277971bae..01e8e230d4 100644 --- a/configs/envs/.env.eth +++ b/configs/envs/.env.eth @@ -43,7 +43,7 @@ NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout -NEXT_PUBLIC_AD_BANNER_PROVIDER=hype +NEXT_PUBLIC_AD_BANNER_PROVIDER=slise NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com diff --git a/deploy/tools/affected-tests/yarn.lock b/deploy/tools/affected-tests/yarn.lock index e160e0a2c6..385918d425 100644 --- a/deploy/tools/affected-tests/yarn.lock +++ b/deploy/tools/affected-tests/yarn.lock @@ -91,11 +91,11 @@ brace-expansion@^1.1.7: concat-map "0.0.1" braces@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" - integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + version "3.0.3" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== dependencies: - fill-range "^7.0.1" + fill-range "^7.1.1" color-name@^1.1.4: version "1.1.4" @@ -276,10 +276,10 @@ filing-cabinet@^4.1.6: tsconfig-paths "^4.2.0" typescript "^5.0.4" -fill-range@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" - integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== +fill-range@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== dependencies: to-regex-range "^5.0.1" diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts index b413d2ae23..12c35f6392 100644 --- a/deploy/tools/envs-validator/schema.ts +++ b/deploy/tools/envs-validator/schema.ts @@ -257,7 +257,7 @@ const rollupSchema = yup .when('NEXT_PUBLIC_ROLLUP_TYPE', { is: (value: string) => value === 'optimistic', then: (schema) => schema.test(urlTest).required(), - otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined'), + otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL can be used only if NEXT_PUBLIC_ROLLUP_TYPE is set to \'optimistic\' '), }), }); @@ -491,6 +491,7 @@ const schema = yup NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL: yup.string(), NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS: yup.number().integer().positive(), NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL: yup.string(), + NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES: yup.boolean(), NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE: yup.string().oneOf([ 'validation', 'mining' ]), NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME: yup.string(), NEXT_PUBLIC_IS_TESTNET: yup.boolean(), diff --git a/deploy/tools/envs-validator/test/.env.base b/deploy/tools/envs-validator/test/.env.base index 3863a068de..71798d55ab 100644 --- a/deploy/tools/envs-validator/test/.env.base +++ b/deploy/tools/envs-validator/test/.env.base @@ -47,6 +47,7 @@ NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Explorer','baseUrl':'https://example.com/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}] NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL=GNO +NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES=true NEXT_PUBLIC_NETWORK_ICON=https://example.com/icon.png NEXT_PUBLIC_NETWORK_ICON_DARK=https://example.com/icon.png NEXT_PUBLIC_NETWORK_LOGO=https://example.com/logo.png diff --git a/deploy/tools/envs-validator/yarn.lock b/deploy/tools/envs-validator/yarn.lock index ab1bf0f2b4..6ea4de04cf 100644 --- a/deploy/tools/envs-validator/yarn.lock +++ b/deploy/tools/envs-validator/yarn.lock @@ -262,11 +262,11 @@ ansi-styles@^4.1.0: color-convert "^2.0.1" braces@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" - integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + version "3.0.3" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== dependencies: - fill-range "^7.0.1" + fill-range "^7.1.1" browserslist@^4.14.5: version "4.21.9" @@ -439,10 +439,10 @@ fastest-levenshtein@^1.0.12: resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5" integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg== -fill-range@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" - integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== +fill-range@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== dependencies: to-regex-range "^5.0.1" diff --git a/deploy/values/review-l2/values.yaml.gotmpl b/deploy/values/review-l2/values.yaml.gotmpl index 09a609ed13..5647779fde 100644 --- a/deploy/values/review-l2/values.yaml.gotmpl +++ b/deploy/values/review-l2/values.yaml.gotmpl @@ -86,3 +86,4 @@ frontend: NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY NEXT_PUBLIC_OG_IMAGE_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/base-mainnet.png + NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY diff --git a/deploy/values/review/values.yaml.gotmpl b/deploy/values/review/values.yaml.gotmpl index cdbc229afc..c37f4ee6c6 100644 --- a/deploy/values/review/values.yaml.gotmpl +++ b/deploy/values/review/values.yaml.gotmpl @@ -68,7 +68,6 @@ frontend: NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']" NEXT_PUBLIC_NETWORK_RPC_URL: https://eth-sepolia.public.blastapi.io - NEXT_PUBLIC_NETWORK_ID: '11155111' NEXT_PUBLIC_NETWORK_EXPLORERS: "[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','logo':'https://github.com/blockscout/frontend-configs/blob/main/configs/explorer-logos/etherscan.png?raw=true','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]" NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace-categories/default.json NEXT_PUBLIC_MARKETPLACE_FEATURED_APP: zkbob-wallet @@ -77,22 +76,15 @@ frontend: NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d NEXT_PUBLIC_WEB3_WALLETS: "['token_pocket','coinbase','metamask']" NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: gradient_avatar - NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS: "['top_accounts']" NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED: true - NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS: "['value','fee_currency','gas_price','gas_fees','burnt_fees']" - NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS: "['fee_per_gas']" NEXT_PUBLIC_USE_NEXT_JS_PROXY: true NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES: "[{'name':'LooksRare','collection_url':'https://goerli.looksrare.org/collections/{hash}','instance_url':'https://goerli.looksrare.org/collections/{hash}/{id}','logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/nft-marketplace-logos/looks-rare.png'}]" NEXT_PUBLIC_HAS_USER_OPS: true NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]" NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: blockscout NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: true - NEXT_PUBLIC_AD_BANNER_PROVIDER: getit - NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER: adbutler - NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP: "{ \"id\": \"632019\", \"width\": \"728\", \"height\": \"90\" }" - NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE: "{ \"id\": \"632018\", \"width\": \"320\", \"height\": \"100\" }" + NEXT_PUBLIC_AD_BANNER_PROVIDER: slise NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: true - NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED: true NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES: "['/apps']" envFromSecret: NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN @@ -104,3 +96,4 @@ frontend: FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN + NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY diff --git a/docs/ENVS.md b/docs/ENVS.md index 7b73db6da1..1d7cfe7829 100644 --- a/docs/ENVS.md +++ b/docs/ENVS.md @@ -91,6 +91,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will | NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | - | - | `ETH` | v1.0.x+ | | NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | - | `18` | `6` | v1.0.x+ | | NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL | `string` | Network secondary coin symbol. | - | - | `GNO` | v1.29.0+ | +| NEXT_PUBLIC_NETWORK_MULTIPLE_GAS_CURRENCIES | `boolean` | Set to `true` for networks where users can pay transaction fees in either the native coin or ERC-20 tokens. | - | `false` | `true` | v1.33.0+ | | NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` | Verification type in the network | - | `mining` | `validation` | v1.0.x+ | | NEXT_PUBLIC_NETWORK_TOKEN_STANDARD_NAME | `string` | Name of the standard for creating tokens | - | `ERC` | `BEP` | v1.31.0+ | | NEXT_PUBLIC_IS_TESTNET | `boolean`| Set to true if network is testnet | - | `false` | `true` | v1.0.x+ | @@ -359,6 +360,7 @@ This feature is **enabled by default**. To switch it off pass `NEXT_PUBLIC_GAS_T ### Banner ads This feature is **enabled by default** with the `slise` ads provider. To switch it off pass `NEXT_PUBLIC_AD_BANNER_PROVIDER=none`. +*Note* that the `getit` ad provider is temporary disabled. | Variable | Type| Description | Compulsoriness | Default value | Example value | Version | | --- | --- | --- | --- | --- | --- | --- | @@ -402,8 +404,8 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi | --- | --- | --- | --- | --- | --- | --- | | NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' ` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ | | NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ | -| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals | Required only for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ | -| NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (OP stack only) | - | - | `true` | v1.31.0+ | +| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ | +| NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |   diff --git a/icons/up.svg b/icons/arrows/up-head.svg similarity index 100% rename from icons/up.svg rename to icons/arrows/up-head.svg diff --git a/icons/clock.svg b/icons/clock.svg index f40b6ee05d..14a8c94053 100644 --- a/icons/clock.svg +++ b/icons/clock.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/contracts/proxy.svg b/icons/contracts/proxy.svg new file mode 100644 index 0000000000..1b75cb210f --- /dev/null +++ b/icons/contracts/proxy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/contract.svg b/icons/contracts/regular.svg similarity index 100% rename from icons/contract.svg rename to icons/contracts/regular.svg diff --git a/icons/contracts.svg b/icons/contracts/regular_many.svg similarity index 100% rename from icons/contracts.svg rename to icons/contracts/regular_many.svg diff --git a/icons/contract_verified.svg b/icons/contracts/verified.svg similarity index 100% rename from icons/contract_verified.svg rename to icons/contracts/verified.svg diff --git a/icons/contracts_verified.svg b/icons/contracts/verified_many.svg similarity index 100% rename from icons/contracts_verified.svg rename to icons/contracts/verified_many.svg diff --git a/icons/gas.svg b/icons/gas.svg index 902b8cb3ea..d199870ab9 100644 --- a/icons/gas.svg +++ b/icons/gas.svg @@ -1,3 +1,3 @@ - - + + diff --git a/icons/open-link.svg b/icons/open-link.svg index a93535f8b2..d0fcc28ab4 100644 --- a/icons/open-link.svg +++ b/icons/open-link.svg @@ -1,3 +1,3 @@ - + diff --git a/icons/repeat_arrow.svg b/icons/repeat.svg similarity index 100% rename from icons/repeat_arrow.svg rename to icons/repeat.svg diff --git a/icons/finalized.svg b/icons/verification-steps/finalized.svg similarity index 100% rename from icons/finalized.svg rename to icons/verification-steps/finalized.svg diff --git a/icons/unfinalized.svg b/icons/verification-steps/unfinalized.svg similarity index 100% rename from icons/unfinalized.svg rename to icons/verification-steps/unfinalized.svg diff --git a/icons/verify-contract.svg b/icons/verify-contract.svg deleted file mode 100644 index 5457c4f160..0000000000 --- a/icons/verify-contract.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/icons/wallet.svg b/icons/wallet.svg index 8f04aff392..f1765c246d 100644 --- a/icons/wallet.svg +++ b/icons/wallet.svg @@ -1,11 +1,4 @@ - - - - - - - - - - + + + diff --git a/lib/api/resources.ts b/lib/api/resources.ts index e2770a12b5..ee25a7ef09 100644 --- a/lib/api/resources.ts +++ b/lib/api/resources.ts @@ -1,4 +1,6 @@ import type * as bens from '@blockscout/bens-types'; +import type * as stats from '@blockscout/stats-types'; +import type * as visualizer from '@blockscout/visualizer-types'; import { getFeaturePayload } from 'configs/app/features/types'; import type { UserInfo, @@ -71,7 +73,7 @@ import type { import type { RawTracesResponse } from 'types/api/rawTrace'; import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search'; import type { ShibariumWithdrawalsResponse, ShibariumDepositsResponse } from 'types/api/shibarium'; -import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats'; +import type { HomeStats } from 'types/api/stats'; import type { TokenCounters, TokenInfo, @@ -99,7 +101,6 @@ import type { TxStateChanges } from 'types/api/txStateChanges'; import type { UserOpsResponse, UserOp, UserOpsFilters, UserOpsAccount } from 'types/api/userOps'; import type { ValidatorsCountersResponse, ValidatorsFilters, ValidatorsResponse, ValidatorsSorting } from 'types/api/validators'; import type { VerifiedContractsSorting } from 'types/api/verifiedContracts'; -import type { VisualizedContract } from 'types/api/visualization'; import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals'; import type { ZkEvmL2DepositsResponse, @@ -931,9 +932,9 @@ Q extends 'homepage_zkevm_l2_batches' ? { items: Array } Q extends 'homepage_indexing_status' ? IndexingStatus : Q extends 'homepage_zkevm_latest_batch' ? number : Q extends 'homepage_zksync_latest_batch' ? number : -Q extends 'stats_counters' ? Counters : -Q extends 'stats_lines' ? StatsCharts : -Q extends 'stats_line' ? StatsChart : +Q extends 'stats_counters' ? stats.Counters : +Q extends 'stats_lines' ? stats.LineCharts : +Q extends 'stats_line' ? stats.LineChart : Q extends 'blocks' ? BlocksResponse : Q extends 'block' ? Block : Q extends 'block_txs' ? BlockTransactionsResponse : @@ -986,7 +987,7 @@ Q extends 'contract' ? SmartContract : Q extends 'contract_solidityscan_report' ? SolidityscanReport : Q extends 'verified_contracts' ? VerifiedContractsResponse : Q extends 'verified_contracts_counters' ? VerifiedContractsCounters : -Q extends 'visualize_sol2uml' ? VisualizedContract : +Q extends 'visualize_sol2uml' ? visualizer.VisualizeResponse : Q extends 'contract_verification_config' ? SmartContractVerificationConfig : Q extends 'withdrawals' ? WithdrawalsResponse : Q extends 'withdrawals_counters' ? WithdrawalsCounters : diff --git a/lib/contexts/addressHighlight.tsx b/lib/contexts/addressHighlight.tsx index 84f5f896ec..085e676ecc 100644 --- a/lib/contexts/addressHighlight.tsx +++ b/lib/contexts/addressHighlight.tsx @@ -60,9 +60,9 @@ export function AddressHighlightProvider({ children }: AddressHighlightProviderP ); } -export function useAddressHighlightContext() { +export function useAddressHighlightContext(disabled?: boolean) { const context = React.useContext(AddressHighlightContext); - if (context === undefined) { + if (context === undefined || disabled) { return null; } return context; diff --git a/lib/hooks/useAdblockDetect.tsx b/lib/hooks/useAdblockDetect.tsx index c34442d7b4..a3b42de1dd 100644 --- a/lib/hooks/useAdblockDetect.tsx +++ b/lib/hooks/useAdblockDetect.tsx @@ -17,7 +17,7 @@ const TEST_URLS: Record = { adbutler: 'https://servedbyadbutler.com/app.js', hype: 'https://api.hypelab.com/v1/scripts/hp-sdk.js', // I don't have an url for getit to test - getit: DEFAULT_URL, + // getit: DEFAULT_URL, none: DEFAULT_URL, }; diff --git a/lib/hooks/useToast.tsx b/lib/hooks/useToast.tsx index 4110c513c1..c9e0f3d63f 100644 --- a/lib/hooks/useToast.tsx +++ b/lib/hooks/useToast.tsx @@ -2,7 +2,7 @@ import type { UseToastOptions, ToastProps } from '@chakra-ui/react'; import { createToastFn, useChakra } from '@chakra-ui/react'; import React from 'react'; -import Toast from 'ui/shared/Toast'; +import Toast from 'ui/shared/chakra/Toast'; // there is no toastComponent prop in UseToastOptions type // but these options will be passed to createRenderToast under the hood @@ -14,6 +14,7 @@ const defaultOptions: UseToastOptions & { toastComponent?: React.FC containerStyle: { margin: 8, }, + variant: 'subtle', }; export default function useToastModified() { diff --git a/lib/metadata/getPageOgType.ts b/lib/metadata/getPageOgType.ts index 054c4841ea..8d709db84e 100644 --- a/lib/metadata/getPageOgType.ts +++ b/lib/metadata/getPageOgType.ts @@ -49,6 +49,7 @@ const OG_TYPE_DICT: Record = { // service routes, added only to make typescript happy '/login': 'Regular page', + '/sprite': 'Regular page', '/api/metrics': 'Regular page', '/api/log': 'Regular page', '/api/media-type': 'Regular page', @@ -56,6 +57,7 @@ const OG_TYPE_DICT: Record = { '/api/csrf': 'Regular page', '/api/healthz': 'Regular page', '/api/config': 'Regular page', + '/api/sprite': 'Regular page', '/auth/auth0': 'Regular page', '/auth/unverified-email': 'Regular page', }; diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts index a8560bded2..5effb299c7 100644 --- a/lib/metadata/templates/description.ts +++ b/lib/metadata/templates/description.ts @@ -53,6 +53,7 @@ const TEMPLATE_MAP: Record = { // service routes, added only to make typescript happy '/login': DEFAULT_TEMPLATE, + '/sprite': DEFAULT_TEMPLATE, '/api/metrics': DEFAULT_TEMPLATE, '/api/log': DEFAULT_TEMPLATE, '/api/media-type': DEFAULT_TEMPLATE, @@ -60,6 +61,7 @@ const TEMPLATE_MAP: Record = { '/api/csrf': DEFAULT_TEMPLATE, '/api/healthz': DEFAULT_TEMPLATE, '/api/config': DEFAULT_TEMPLATE, + '/api/sprite': DEFAULT_TEMPLATE, '/auth/auth0': DEFAULT_TEMPLATE, '/auth/unverified-email': DEFAULT_TEMPLATE, }; diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts index c7d62f7087..c0934b13a8 100644 --- a/lib/metadata/templates/title.ts +++ b/lib/metadata/templates/title.ts @@ -49,13 +49,15 @@ const TEMPLATE_MAP: Record = { // service routes, added only to make typescript happy '/login': '%network_name% login', + '/sprite': '%network_name% SVG sprite', '/api/metrics': '%network_name% node API prometheus metrics', '/api/log': '%network_name% node API request log', '/api/media-type': '%network_name% node API media type', '/api/proxy': '%network_name% node API proxy', '/api/csrf': '%network_name% node API CSRF token', '/api/healthz': '%network_name% node API health check', - '/api/config': '%network_name% node API health check', + '/api/config': '%network_name% node API app config', + '/api/sprite': '%network_name% node API SVG sprite content', '/auth/auth0': '%network_name% authentication', '/auth/unverified-email': '%network_name% unverified email', }; diff --git a/lib/mixpanel/getPageType.ts b/lib/mixpanel/getPageType.ts index b8d982d422..13a60c1dd8 100644 --- a/lib/mixpanel/getPageType.ts +++ b/lib/mixpanel/getPageType.ts @@ -47,13 +47,15 @@ export const PAGE_TYPE_DICT: Record = { // service routes, added only to make typescript happy '/login': 'Login', + '/sprite': 'Sprite', '/api/metrics': 'Node API: Prometheus metrics', '/api/log': 'Node API: Request log', '/api/media-type': 'Node API: Media type', '/api/proxy': 'Node API: Proxy', '/api/csrf': 'Node API: CSRF token', '/api/healthz': 'Node API: Health check', - '/api/config': 'Node API: Health check', + '/api/config': 'Node API: App config', + '/api/sprite': 'Node API: SVG sprite content', '/auth/auth0': 'Auth', '/auth/unverified-email': 'Unverified email', }; diff --git a/lib/recentSearchKeywords.ts b/lib/recentSearchKeywords.ts index d6f89bf962..5fe5a6bd71 100644 --- a/lib/recentSearchKeywords.ts +++ b/lib/recentSearchKeywords.ts @@ -1,4 +1,4 @@ -import { uniq } from 'lodash'; +import _uniq from 'lodash/uniq'; import isBrowser from './isBrowser'; @@ -27,7 +27,7 @@ export function saveToRecentKeywords(value: string) { } const keywordsArr = getRecentSearchKeywords(); - const result = uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1); + const result = _uniq([ value, ...keywordsArr ]).slice(0, MAX_KEYWORDS_NUMBER - 1); window.localStorage.setItem(RECENT_KEYWORDS_LS_KEY, JSON.stringify(result)); } diff --git a/mocks/address/implementations.ts b/mocks/address/implementations.ts new file mode 100644 index 0000000000..1d77032284 --- /dev/null +++ b/mocks/address/implementations.ts @@ -0,0 +1,11 @@ +export const multiple = [ + { address: '0xA84d24bD8ACE4d349C5f8c5DeeDd8bc071Ce5e2b', name: null }, + { address: '0xc9e91eDeA9DC16604022e4E5b437Df9c64EdB05A', name: 'Diamond' }, + { address: '0x2041832c62C0F89426b48B5868146C0b1fcd23E7', name: null }, + { address: '0x5f7DC6ECcF05594429671F83cc0e42EE18bC0974', name: 'VariablePriceFacet' }, + { address: '0x7abC92E242e88e4B0d6c5Beb4Df80e94D2c8A78c', name: null }, + { address: '0x84178a0c58A860eCCFB7E3aeA64a09543062A356', name: 'MultiSaleFacet' }, + { address: '0x33aD95537e63e9f09d96dE201e10715Ed40D9400', name: 'SVGTemplatesFacet' }, + { address: '0xfd86Aa7f902185a8Df9859c25E4BF52D3DaDd9FA', name: 'ERC721AReceiverFacet' }, + { address: '0x6945a35df18e59Ce09fec4B6cD3C4F9cFE6369de', name: null }, +]; diff --git a/mocks/stats/line.ts b/mocks/stats/line.ts index 47de79b184..799cff4c45 100644 --- a/mocks/stats/line.ts +++ b/mocks/stats/line.ts @@ -1,128 +1,161 @@ -export const averageGasPrice = { +import type * as stats from '@blockscout/stats-types'; + +export const averageGasPrice: stats.LineChart = { chart: [ { date: '2023-12-22', value: '37.7804422597599', + is_approximate: false, }, { date: '2023-12-23', value: '25.84889883009387', + is_approximate: false, }, { date: '2023-12-24', value: '25.818463227198574', + is_approximate: false, }, { date: '2023-12-25', value: '26.045513050051298', + is_approximate: false, }, { date: '2023-12-26', value: '21.42600692652399', + is_approximate: false, }, { date: '2023-12-27', value: '31.066730409846656', + is_approximate: false, }, { date: '2023-12-28', value: '33.63955781902089', + is_approximate: false, }, { date: '2023-12-29', value: '28.064736756058384', + is_approximate: false, }, { date: '2023-12-30', value: '23.074500869678175', + is_approximate: false, }, { date: '2023-12-31', value: '17.651005734615133', + is_approximate: false, }, { date: '2024-01-01', value: '14.906085174476441', + is_approximate: false, }, { date: '2024-01-02', value: '22.28459059038656', + is_approximate: false, }, { date: '2024-01-03', value: '39.8311646806592', + is_approximate: false, }, { date: '2024-01-04', value: '26.09989322256083', + is_approximate: false, }, { date: '2024-01-05', value: '22.821996688111998', + is_approximate: false, }, { date: '2024-01-06', value: '20.32680041262083', + is_approximate: false, }, { date: '2024-01-07', value: '32.535045831809704', + is_approximate: false, }, { date: '2024-01-08', value: '27.443477102139482', + is_approximate: false, }, { date: '2024-01-09', value: '20.7911332558055', + is_approximate: false, }, { date: '2024-01-10', value: '42.10740192523919', + is_approximate: false, }, { date: '2024-01-11', value: '35.75215680343582', + is_approximate: false, }, { date: '2024-01-12', value: '27.430414798093253', + is_approximate: false, }, { date: '2024-01-13', value: '20.170934096589875', + is_approximate: false, }, { date: '2024-01-14', value: '38.79660984371034', + is_approximate: false, }, { date: '2024-01-15', value: '26.140740484554204', + is_approximate: false, }, { date: '2024-01-16', value: '36.708543184194156', + is_approximate: false, }, { date: '2024-01-17', value: '40.325438794298876', + is_approximate: false, }, { date: '2024-01-18', value: '37.55145309930694', + is_approximate: false, }, { date: '2024-01-19', value: '33.271450114434664', + is_approximate: false, }, { date: '2024-01-20', value: '19.303304377685638', + is_approximate: false, }, { date: '2024-01-21', value: '14.375908594704976', + is_approximate: false, }, ], }; diff --git a/mocks/stats/lines.ts b/mocks/stats/lines.ts index 51aca3c97d..9f8870249f 100644 --- a/mocks/stats/lines.ts +++ b/mocks/stats/lines.ts @@ -1,4 +1,6 @@ -export const base = { +import type * as stats from '@blockscout/stats-types'; + +export const base: stats.LineCharts = { sections: [ { id: 'accounts', @@ -8,19 +10,19 @@ export const base = { id: 'accountsGrowth', title: 'Accounts growth', description: 'Cumulative accounts number per period', - units: null, + units: undefined, }, { id: 'activeAccounts', title: 'Active accounts', description: 'Active accounts number per period', - units: null, + units: undefined, }, { id: 'newAccounts', title: 'New accounts', description: 'New accounts number per day', - units: null, + units: undefined, }, ], }, @@ -38,7 +40,7 @@ export const base = { id: 'newTxns', title: 'New transactions', description: 'New transactions number', - units: null, + units: undefined, }, { id: 'txnsFee', @@ -50,13 +52,13 @@ export const base = { id: 'txnsGrowth', title: 'Transactions growth', description: 'Cumulative transactions number', - units: null, + units: undefined, }, { id: 'txnsSuccessRate', title: 'Transactions success rate', description: 'Successful transactions rate per day', - units: null, + units: undefined, }, ], }, @@ -80,7 +82,7 @@ export const base = { id: 'newBlocks', title: 'New blocks', description: 'New blocks number', - units: null, + units: undefined, }, ], }, @@ -92,7 +94,7 @@ export const base = { id: 'newNativeCoinTransfers', title: 'New ETH transfers', description: 'New token transfers number for the period', - units: null, + units: undefined, }, ], }, @@ -104,7 +106,7 @@ export const base = { id: 'averageGasLimit', title: 'Average gas limit', description: 'Average gas limit per block for the period', - units: null, + units: undefined, }, { id: 'averageGasPrice', @@ -116,7 +118,7 @@ export const base = { id: 'gasUsedGrowth', title: 'Gas used growth', description: 'Cumulative gas used for the period', - units: null, + units: undefined, }, ], }, @@ -128,13 +130,13 @@ export const base = { id: 'newVerifiedContracts', title: 'New verified contracts', description: 'New verified contracts number for the period', - units: null, + units: undefined, }, { id: 'verifiedContractsGrowth', title: 'Verified contracts growth', description: 'Cumulative number verified contracts for the period', - units: null, + units: undefined, }, ], }, diff --git a/mocks/txs/tx.ts b/mocks/txs/tx.ts index 11bc973e83..595af11b47 100644 --- a/mocks/txs/tx.ts +++ b/mocks/txs/tx.ts @@ -299,7 +299,7 @@ export const stabilityTx: Transaction = { decimals: '18', exchange_rate: '123.567', holders: '92', - icon_url: null, + icon_url: 'https://example.com/icon.png', name: 'Stability Gas', symbol: 'GAS', total_supply: '10000000000000000000000000', @@ -321,6 +321,24 @@ export const stabilityTx: Transaction = { }, }; +export const celoTxn: Transaction = { + ...base, + celo: { + gas_token: { + address: '0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1', + circulating_market_cap: null, + decimals: '18', + exchange_rate: '0.42', + holders: '205738', + icon_url: 'https://example.com/icon.png', + name: 'Celo Dollar', + symbol: 'cUSD', + total_supply: '7145754483836626799435133', + type: 'ERC-20', + }, + }, +}; + export const base2 = { ...base, hash: '0x02d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193', diff --git a/nextjs/csp/policies/ad.ts b/nextjs/csp/policies/ad.ts index 24ac82a0bb..9b018aa019 100644 --- a/nextjs/csp/policies/ad.ts +++ b/nextjs/csp/policies/ad.ts @@ -39,7 +39,8 @@ export function ad(): CspDev.DirectiveDescriptor { // adbutler 'servedbyadbutler.com', `'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`, - `'sha256-${ Base64.stringify(sha256(placeAd ?? '')) }'`, + `'sha256-${ Base64.stringify(sha256(placeAd(undefined) ?? '')) }'`, + `'sha256-${ Base64.stringify(sha256(placeAd('mobile') ?? '')) }'`, // slise '*.slise.xyz', diff --git a/nextjs/getServerSideProps.ts b/nextjs/getServerSideProps.ts index 70e3dc05dc..ccaaf9763b 100644 --- a/nextjs/getServerSideProps.ts +++ b/nextjs/getServerSideProps.ts @@ -245,6 +245,16 @@ export const login: GetServerSideProps = async(context) => { return base(context); }; +export const dev: GetServerSideProps = async(context) => { + if (!config.app.isDev) { + return { + notFound: true, + }; + } + + return base(context); +}; + export const publicTagsSubmit: GetServerSideProps = async(context) => { if (!config.features.publicTagsSubmission.isEnabled) { diff --git a/nextjs/nextjs-routes.d.ts b/nextjs/nextjs-routes.d.ts index a5dce6570d..ed2eaa19c2 100644 --- a/nextjs/nextjs-routes.d.ts +++ b/nextjs/nextjs-routes.d.ts @@ -22,6 +22,7 @@ declare module "nextjs-routes" { | StaticRoute<"/api/media-type"> | StaticRoute<"/api/metrics"> | StaticRoute<"/api/proxy"> + | StaticRoute<"/api/sprite"> | StaticRoute<"/api-docs"> | DynamicRoute<"/apps/[id]", { "id": string }> | StaticRoute<"/apps"> @@ -48,6 +49,7 @@ declare module "nextjs-routes" { | StaticRoute<"/output-roots"> | StaticRoute<"/public-tags/submit"> | StaticRoute<"/search-results"> + | StaticRoute<"/sprite"> | StaticRoute<"/stats"> | DynamicRoute<"/token/[hash]", { "hash": string }> | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }> diff --git a/package.json b/package.json index 2e6d782c4e..f8100f201e 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,9 @@ "monitoring:grafana:local": "docker run -d -p 4000:3000 --name=blockscout_grafana --user $(id -u) --volume $(pwd)/grafana:/var/lib/grafana grafana/grafana-enterprise" }, "dependencies": { - "@blockscout/bens-types": "v1.3.0-beta", + "@blockscout/bens-types": "1.3.4", + "@blockscout/stats-types": "1.6.0", + "@blockscout/visualizer-types": "0.2.0", "@chakra-ui/react": "2.7.1", "@chakra-ui/theme-tools": "^2.0.18", "@emotion/react": "^11.10.4", @@ -67,13 +69,13 @@ "chakra-react-select": "^4.4.3", "crypto-js": "^4.2.0", "d3": "^7.6.1", - "dappscout-iframe": "0.2.1", + "dappscout-iframe": "0.2.2", "dayjs": "^1.11.5", "dom-to-image": "^2.6.0", "focus-visible": "^5.2.0", "framer-motion": "^6.5.1", "getit-sdk": "^1.0.4", - "gradient-avatar": "^1.0.2", + "gradient-avatar": "git+https://github.com/blockscout/gradient-avatar.git", "graphiql": "^2.2.0", "graphql": "^16.8.1", "graphql-ws": "^5.11.3", diff --git a/pages/api/sprite.ts b/pages/api/sprite.ts new file mode 100644 index 0000000000..9ba9d7030c --- /dev/null +++ b/pages/api/sprite.ts @@ -0,0 +1,49 @@ +import fs from 'fs'; +import type { NextApiRequest, NextApiResponse } from 'next'; +import path from 'path'; + +import config from 'configs/app'; + +const ROOT_DIR = './icons'; +const NAME_PREFIX = ROOT_DIR.replace('./', '') + '/'; + +interface IconInfo { + name: string; + fileSize: number; +} + +const getIconName = (filePath: string) => filePath.replace(NAME_PREFIX, '').replace('.svg', ''); + +function collectIconNames(dir: string) { + const files = fs.readdirSync(dir, { withFileTypes: true }); + let icons: Array = []; + + files.forEach((file) => { + const filePath = path.join(dir, file.name); + const stats = fs.statSync(filePath); + + file.name.endsWith('.svg') && icons.push({ + name: getIconName(filePath), + fileSize: stats.size, + }); + + if (file.isDirectory()) { + icons = [ ...icons, ...collectIconNames(filePath) ]; + } + }); + + return icons; +} + +export default async function spriteHandler(req: NextApiRequest, res: NextApiResponse) { + + if (!config.app.isDev) { + return res.status(404).json({ error: 'Not found' }); + } + + const icons = collectIconNames(ROOT_DIR); + + res.status(200).json({ + icons, + }); +} diff --git a/pages/sprite.tsx b/pages/sprite.tsx new file mode 100644 index 0000000000..cb90ec0de0 --- /dev/null +++ b/pages/sprite.tsx @@ -0,0 +1,18 @@ +import type { NextPage } from 'next'; +import React from 'react'; + +import PageNextJs from 'nextjs/PageNextJs'; + +import Sprite from 'ui/pages/Sprite'; + +const Page: NextPage = () => { + return ( + + + + ); +}; + +export default Page; + +export { dev as getServerSideProps } from 'nextjs/getServerSideProps'; diff --git a/playwright/fixtures/mockRpcResponse.ts b/playwright/fixtures/mockRpcResponse.ts new file mode 100644 index 0000000000..f65bf81974 --- /dev/null +++ b/playwright/fixtures/mockRpcResponse.ts @@ -0,0 +1,52 @@ +import type { TestFixture, Page } from '@playwright/test'; +import _isEqual from 'lodash/isEqual'; +import type { PublicRpcSchema } from 'viem'; + +import { getEnvValue } from 'configs/app/utils'; + +type Params = PublicRpcSchema[number]; + +export type MockRpcResponseFixture = (params: Params) => Promise; + +// WIP +const fixture: TestFixture = async({ page }, use) => { + await use(async({ Method, ReturnType }) => { + const rpcUrl = getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'); + + if (!rpcUrl) { + return; + } + + await page.route(rpcUrl, (route) => { + const method = route.request().method(); + + if (method !== 'POST') { + route.continue(); + return; + } + + const json = route.request().postDataJSON(); + const id = json?.id; + + const payload = { + id, + jsonrpc: '2.0', + method: Method, + // TODO: add params to match actual payload + }; + + if (_isEqual(json, payload) && id !== undefined) { + return route.fulfill({ + status: 200, + body: JSON.stringify({ + id, + jsonrpc: '2.0', + result: ReturnType, + }), + }); + } + }); + }); +}; + +export default fixture; diff --git a/playwright/lib.tsx b/playwright/lib.tsx index dffe7f3715..586f980bf0 100644 --- a/playwright/lib.tsx +++ b/playwright/lib.tsx @@ -8,6 +8,7 @@ import * as mockConfigResponse from './fixtures/mockConfigResponse'; import * as mockContractReadResponse from './fixtures/mockContractReadResponse'; import * as mockEnvs from './fixtures/mockEnvs'; import * as mockFeatures from './fixtures/mockFeatures'; +import * as mockRpcResponse from './fixtures/mockRpcResponse'; import * as mockTextAd from './fixtures/mockTextAd'; import * as render from './fixtures/render'; import * as socketServer from './fixtures/socketServer'; @@ -20,6 +21,7 @@ interface Fixtures { mockContractReadResponse: mockContractReadResponse.MockContractReadResponseFixture; mockEnvs: mockEnvs.MockEnvsFixture; mockFeatures: mockFeatures.MockFeaturesFixture; + mockRpcResponse: mockRpcResponse.MockRpcResponseFixture; createSocket: socketServer.CreateSocketFixture; injectMetaMaskProvider: injectMetaMaskProvider.InjectMetaMaskProvider; mockTextAd: mockTextAd.MockTextAdFixture; @@ -33,6 +35,7 @@ const test = base.extend({ mockContractReadResponse: mockContractReadResponse.default, mockEnvs: mockEnvs.default, mockFeatures: mockFeatures.default, + mockRpcResponse: mockRpcResponse.default, // FIXME: for some reason Playwright does not intercept requests to text ad provider when running multiple tests in parallel // even if we have a global request interceptor (maybe it is related to service worker issue, maybe not) // so we have to inject mockTextAd fixture in each test and mock the response where it is needed diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts index 6c1b28d8fa..e2567b4b77 100644 --- a/public/icons/name.d.ts +++ b/public/icons/name.d.ts @@ -13,6 +13,7 @@ | "arrows/north-east" | "arrows/south-east" | "arrows/up-down" + | "arrows/up-head" | "beta_xs" | "beta" | "blob" @@ -31,10 +32,11 @@ | "clock" | "coins/bitcoin" | "collection" - | "contract_verified" - | "contract" - | "contracts_verified" - | "contracts" + | "contracts/proxy" + | "contracts/regular_many" + | "contracts/regular" + | "contracts/verified_many" + | "contracts/verified" | "copy" | "cross" | "delete" @@ -59,7 +61,6 @@ | "files/sol" | "files/yul" | "filter" - | "finalized" | "flame" | "games" | "gas_xl" @@ -99,7 +100,7 @@ | "publictags" | "qr_code" | "refresh" - | "repeat_arrow" + | "repeat" | "restAPI" | "rocket_xl" | "rocket" @@ -146,14 +147,13 @@ | "transactions" | "txn_batches_slim" | "txn_batches" - | "unfinalized" | "uniswap" - | "up" | "user_op_slim" | "user_op" | "validator" + | "verification-steps/finalized" + | "verification-steps/unfinalized" | "verified" - | "verify-contract" | "wallet" | "wallets/coinbase" | "wallets/metamask" diff --git a/stubs/stats.ts b/stubs/stats.ts index d21ba588fd..e1e70724fb 100644 --- a/stubs/stats.ts +++ b/stubs/stats.ts @@ -1,4 +1,5 @@ -import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats'; +import type * as stats from '@blockscout/stats-types'; +import type { HomeStats } from 'types/api/stats'; export const HOMEPAGE_STATS: HomeStats = { average_block_time: 14346, @@ -41,7 +42,7 @@ export const HOMEPAGE_STATS: HomeStats = { tvl: '1767425.102766552', }; -export const STATS_CHARTS_SECTION: StatsChartsSection = { +export const STATS_CHARTS_SECTION: stats.LineChartSection = { id: 'placeholder', title: 'Placeholder', charts: [ @@ -61,13 +62,13 @@ export const STATS_CHARTS_SECTION: StatsChartsSection = { id: 'chart_2', title: 'New transactions', description: 'New transactions number', - units: null, + units: undefined, }, { id: 'chart_3', title: 'Transactions growth', description: 'Cumulative transactions number', - units: null, + units: undefined, }, ], }; @@ -76,7 +77,7 @@ export const STATS_CHARTS = { sections: [ STATS_CHARTS_SECTION ], }; -export const STATS_COUNTER: Counter = { +export const STATS_COUNTER: stats.Counter = { id: 'stub', value: '9074405', title: 'Placeholder Counter', diff --git a/theme/components/Heading.ts b/theme/components/Heading.ts index 7b08a7efa9..e9cf8c51b2 100644 --- a/theme/components/Heading.ts +++ b/theme/components/Heading.ts @@ -17,7 +17,6 @@ const sizes = { xl: defineStyle({ fontSize: '40px', lineHeight: '48px', - letterSpacing: '-1px', }), lg: defineStyle({ fontSize: '32px', diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts index 4440d5cbf6..5eb3c09d06 100644 --- a/theme/foundations/semanticTokens.ts +++ b/theme/foundations/semanticTokens.ts @@ -19,6 +19,10 @@ const semanticTokens = { link_hovered: { 'default': 'blue.400', }, + icon_info: { + 'default': 'gray.400', + _dark: 'gray.500', + }, error: { 'default': 'red.500', _dark: 'red.500', diff --git a/types/api/addressParams.ts b/types/api/addressParams.ts index 1cb4bdb577..b7bc4393b8 100644 --- a/types/api/addressParams.ts +++ b/types/api/addressParams.ts @@ -24,9 +24,7 @@ export interface UserTags { export type AddressParamBasic = { hash: string; - // API doesn't return hash in this model yet - // will be fixed in the future releases - implementations: Array> | null; + implementations: Array | null; name: string | null; is_contract: boolean; is_verified: boolean | null; diff --git a/types/api/stats.ts b/types/api/stats.ts index c7585f3797..3d75a5f3e9 100644 --- a/types/api/stats.ts +++ b/types/api/stats.ts @@ -34,39 +34,3 @@ export interface GasPriceInfo { base_fee: number | null; priority_fee: number | null; } - -export type Counters = { - counters: Array; -} - -export type Counter = { - id: string; - value: string; - title: string; - description?: string; - units: string; -} - -export type StatsCharts = { - sections: Array; -} - -export type StatsChartsSection = { - id: string; - title: string; - charts: Array; -} - -export type StatsChartInfo = { - id: string; - title: string; - description: string; - units: string | null; -} - -export type StatsChart = { chart: Array }; - -export type StatsChartItem = { - date: string; - value: string; -} diff --git a/types/api/transaction.ts b/types/api/transaction.ts index 67bd0b2f71..fee1043bfa 100644 --- a/types/api/transaction.ts +++ b/types/api/transaction.ts @@ -77,6 +77,10 @@ export type Transaction = { validator_address: AddressParam; validator_fee: string; }; + // Celo fields + celo?: { + gas_token: TokenInfo<'ERC-20'> | null; + }; // zkEvm fields zkevm_verify_hash?: string; zkevm_batch_number?: number; diff --git a/types/api/visualization.ts b/types/api/visualization.ts deleted file mode 100644 index f80dc493b1..0000000000 --- a/types/api/visualization.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface VisualizedContract { - png: string | null; - svg: string | null; -} diff --git a/types/client/adProviders.ts b/types/client/adProviders.ts index ac0418496d..df3962b9ec 100644 --- a/types/client/adProviders.ts +++ b/types/client/adProviders.ts @@ -1,6 +1,13 @@ import type { ArrayElement } from 'types/utils'; -export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'hype', 'getit', 'none' ] as const; +export const SUPPORTED_AD_BANNER_PROVIDERS = [ + 'slise', + 'adbutler', + 'coinzilla', + 'hype', + // 'getit', // temporary disabled + 'none', +] as const; export type AdBannerProviders = ArrayElement; export const SUPPORTED_AD_BANNER_ADDITIONAL_PROVIDERS = [ 'adbutler' ] as const; diff --git a/ui/address/SolidityscanReport.tsx b/ui/address/SolidityscanReport.tsx index 0a6d11510e..4ca53a2bf5 100644 --- a/ui/address/SolidityscanReport.tsx +++ b/ui/address/SolidityscanReport.tsx @@ -1,4 +1,4 @@ -import { Box, Text, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; +import { Box, Text, Icon, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; import React from 'react'; // This icon doesn't work properly when it is in the sprite @@ -7,6 +7,7 @@ import React from 'react'; import solidityScanIcon from 'icons/brands/solidity_scan.svg'; import useApiQuery from 'lib/api/useApiQuery'; import { SOLIDITYSCAN_REPORT } from 'stubs/contract'; +import Popover from 'ui/shared/chakra/Popover'; import LinkExternal from 'ui/shared/links/LinkExternal'; import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton'; import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails'; diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png index 02a1b2119b..d78a586bf8 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_contract-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png index ae37818f5e..316486202e 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-contract-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png index 0c556f4842..263b930fac 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_mobile-validator-1.png differ diff --git a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png index 23f73cee77..9a95c7b31f 100644 Binary files a/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png and b/ui/address/__screenshots__/AddressDetails.pw.tsx_default_validator-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png index 4543e5121d..67ebd515ff 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png index c9e9f3d09a..9ce16fb447 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png index 418da85121..3ed3b7d7bd 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png index 671e779a0f..0a3332be93 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png index 647d111b7b..79c7e3e819 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_collections-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png index 2559047f7c..b985ff98c0 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_erc20-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png index 22b75a033a..ac0c8b5935 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_dark-color-mode_nfts-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png index 27dac31f5e..bbf9ed9894 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_collections-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png index 771a06e787..e8c1ab9d5b 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_erc20-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png index 1986040133..b9975934e7 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-collections-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png index ebc194f517..516642dc50 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-erc20-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png index f31b50da13..fd147da3b8 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_mobile-nfts-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png index c259652201..93b1606fa8 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_nfts-dark-mode-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png index 1e87c7b924..af7d4ec144 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-1.png differ diff --git a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png index bcff866168..11053aa141 100644 Binary files a/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png and b/ui/address/__screenshots__/AddressTokens.pw.tsx_default_update-balances-via-socket-2.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png index 6481d7dffb..1d12e88f17 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png index a78facfc77..e9ddf6c991 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png index c6f13638bf..1d796de779 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png index c25741b0da..a885805c5d 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_dark-color-mode_average-report-dark-mode-mobile-2.png differ diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png index fc6141ef12..cfab087359 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_average-report-dark-mode-mobile-2.png differ diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png index c6b9450434..d57ce8fe34 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_great-report-2.png differ diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png index af84b4459b..54ef2b3c69 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_default_low-report-2.png differ diff --git a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png index eca7e9027e..c61fc4732c 100644 Binary files a/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png and b/ui/address/__screenshots__/SolidityscanReport.pw.tsx_mobile_average-report-dark-mode-mobile-2.png differ diff --git a/ui/address/contract/ContractCodeIdes.tsx b/ui/address/contract/ContractCodeIdes.tsx index 4e15dac588..fc06317043 100644 --- a/ui/address/contract/ContractCodeIdes.tsx +++ b/ui/address/contract/ContractCodeIdes.tsx @@ -2,7 +2,6 @@ import { Flex, Button, chakra, - Popover, PopoverTrigger, PopoverBody, PopoverContent, @@ -14,6 +13,7 @@ import { import React from 'react'; import config from 'configs/app'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/address/contract/ContractExternalLibraries.tsx b/ui/address/contract/ContractExternalLibraries.tsx index 48dedb4a30..83df015e2b 100644 --- a/ui/address/contract/ContractExternalLibraries.tsx +++ b/ui/address/contract/ContractExternalLibraries.tsx @@ -7,7 +7,6 @@ import { Modal, ModalCloseButton, ModalContent, - Popover, PopoverBody, PopoverContent, PopoverTrigger, @@ -22,6 +21,7 @@ import type { SmartContractExternalLibrary } from 'types/api/contract'; import useIsMobile from 'lib/hooks/useIsMobile'; import { apos } from 'lib/html-entities'; +import Popover from 'ui/shared/chakra/Popover'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png index c2edc6d40a..6946d80268 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_full-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png index 797d31fee3..bc1d1c188f 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-changed-byte-code-socket-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png index 8d18e7dc97..bd67c84fe5 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-2.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png index 93bd855358..3c725a06a7 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_verified-with-multiple-sources-3.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-has-audits-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-has-audits-1.png index 958bb1b98f..fc8d135af3 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-has-audits-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-has-audits-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-no-audits-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-no-audits-1.png index 6cd2fdc505..e4af86a879 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-no-audits-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-audits-feature-no-audits-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png index f9660a84e5..9d405d4a33 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_default_with-certified-icon-mobile-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png index 736569a231..0d25fd3369 100644 Binary files a/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractCode.pw.tsx_mobile_full-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png index a8a9376c50..bd55d81042 100644 Binary files a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_dark-color-mode_write-methods-dark-mode-mobile-1.png differ diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png index 0cc12ad4af..9ee796419e 100644 Binary files a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_default_write-methods-dark-mode-mobile-1.png differ diff --git a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png index 045bbe3630..bebc3b04b5 100644 Binary files a/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png and b/ui/address/contract/methods/__screenshots__/ContractMethodsRegular.pw.tsx_mobile_write-methods-dark-mode-mobile-1.png differ diff --git a/ui/address/contract/methods/form/ContractMethodForm.tsx b/ui/address/contract/methods/form/ContractMethodForm.tsx index 22ae78e332..f63c8a9ba5 100644 --- a/ui/address/contract/methods/form/ContractMethodForm.tsx +++ b/ui/address/contract/methods/form/ContractMethodForm.tsx @@ -222,7 +222,7 @@ const ContractMethodForm = ({ data, attempt, onSubmit, onReset, isOpen }: Props) onClick={ onReset } ml={ 1 } > - + Reset ) } diff --git a/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx b/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx index 82ee23210d..7c443996b4 100644 --- a/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx +++ b/ui/address/contract/methods/form/ContractMethodMultiplyButton.tsx @@ -1,6 +1,5 @@ import { chakra, - Popover, PopoverBody, PopoverContent, PopoverTrigger, @@ -14,6 +13,7 @@ import { import React from 'react'; import { times } from 'lib/html-entities'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; interface Props { diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx index a73f4123c9..70a36da426 100644 --- a/ui/address/ensDomains/AddressEnsDomains.tsx +++ b/ui/address/ensDomains/AddressEnsDomains.tsx @@ -4,7 +4,6 @@ import { Flex, Grid, Hide, - Popover, PopoverBody, PopoverContent, PopoverTrigger, @@ -23,6 +22,7 @@ import { route } from 'nextjs-routes'; import type { ResourceError } from 'lib/api/resources'; import dayjs from 'lib/date/dayjs'; +import Popover from 'ui/shared/chakra/Popover'; import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; import IconSvg from 'ui/shared/IconSvg'; import LinkInternal from 'ui/shared/links/LinkInternal'; diff --git a/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png b/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png index 6d67d4be0c..e1e238e65d 100644 Binary files a/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png and b/ui/address/ensDomains/__screenshots__/AddressEnsDomains.pw.tsx_default_base-view-1.png differ diff --git a/ui/address/tokenSelect/TokenSelectDesktop.tsx b/ui/address/tokenSelect/TokenSelectDesktop.tsx index 858bb5a443..c354866114 100644 --- a/ui/address/tokenSelect/TokenSelectDesktop.tsx +++ b/ui/address/tokenSelect/TokenSelectDesktop.tsx @@ -1,8 +1,10 @@ -import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; +import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; import React from 'react'; import type { FormattedData } from './types'; +import Popover from 'ui/shared/chakra/Popover'; + import TokenSelectButton from './TokenSelectButton'; import TokenSelectMenu from './TokenSelectMenu'; import useTokenSelect from './useTokenSelect'; diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 265abccfcf..a754d976b0 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png index ba536e6cc8..3ae82484e9 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png index 9e934a8b9c..834d7ebcc3 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png index 08f3482eef..1f0f4f530b 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_base-view-dark-mode-2.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png index 97f8b096bc..327cb98729 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_filter-1.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png index 1f59eeb768..2e866ed01b 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_long-values-1.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png index 3fdef2fcca..1923d848c7 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-1.png differ diff --git a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png index ee09f5ace7..8b2bf6a3fc 100644 Binary files a/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png and b/ui/address/tokenSelect/__screenshots__/TokenSelect.pw.tsx_default_sort-2.png differ diff --git a/ui/address/tokens/TokenBalances.tsx b/ui/address/tokens/TokenBalances.tsx index b9bef04518..7c4f5055fc 100644 --- a/ui/address/tokens/TokenBalances.tsx +++ b/ui/address/tokens/TokenBalances.tsx @@ -53,7 +53,7 @@ const TokenBalances = () => { name="Net Worth" value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) }` : 'N/A' } isLoading={ addressQuery.isPending || tokenQuery.isPending } - icon={ } + icon={ } /> { ) : data.tx_count } + + { BigNumber(data.gas_used || 0).toFormat() } + + + + + + + { data.gas_target_percentage && ( + <> + + + + ) } + + { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && ( - { BigNumber(data.gas_used || 0).toFormat() } - - - - - - - { data.gas_target_percentage && ( - <> - - - - ) } - + + { totalReward.toFixed(8) } + ) } - - - { totalReward.toFixed(8) } - - { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && ( diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png index 7fe3b86410..af0d3f7815 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_flatten-source-code-method-dark-mode-mobile-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png index 7575d765b6..9d851e0978 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_multi-part-files-method-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png index 706bf65fd3..a8d2076ff3 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png index f3fa108f79..ba33e8ed37 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_sourcify-with-multiple-contracts-2.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png index b7c8d1db44..12ac89aee2 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_standard-input-json-method-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png index 96ed411e36..c372268053 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-contract-method-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png index e128020334..6ee02da936 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-multi-part-method-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png index e9cabbe4af..11c3e8977c 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_default_vyper-vyper-standard-input-method-1.png differ diff --git a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png index 0a72701564..9035dfe94c 100644 Binary files a/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png and b/ui/contractVerification/__screenshots__/ContractVerificationForm.pw.tsx_mobile_flatten-source-code-method-dark-mode-mobile-1.png differ diff --git a/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx b/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx index 83d4090c0e..b1fb32ccda 100644 --- a/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx +++ b/ui/contractVerification/fields/ContractVerificationFieldMethod.tsx @@ -1,7 +1,6 @@ import { Link, chakra, - Popover, PopoverTrigger, Portal, PopoverContent, @@ -21,6 +20,7 @@ import type { FormFields } from '../types'; import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/api/contract'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Popover from 'ui/shared/chakra/Popover'; import FancySelect from 'ui/shared/FancySelect/FancySelect'; import IconSvg from 'ui/shared/IconSvg'; @@ -105,7 +105,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props - + diff --git a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx index fc06a6944f..fe8abd7a0a 100644 --- a/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx @@ -67,7 +67,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => { L1 txn origin { { { !config.UI.views.tx.hiddenFields?.tx_fee && ( Fee - { tx.stability_fee ? ( - - ) : ( - - { tx.fee.value ? `${ getValueWithUnit(tx.fee.value).dp(5).toFormat() } ${ currencyUnits.ether }` : '-' } - - ) } + ) } diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index b75886f12e..323ccafa48 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -16,7 +16,7 @@ import { currencyUnits } from 'lib/units'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; -import TxFeeStability from 'ui/shared/tx/TxFeeStability'; +import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -76,18 +76,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { /> { !config.UI.views.tx.hiddenFields?.value && ( - Value { currencyUnits.ether } - { getValueWithUnit(tx.value).dp(5).toFormat() } + Value + { getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether } ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( - Fee { !config.UI.views.tx.hiddenFields?.fee_currency ? `${ currencyUnits.ether } ` : '' } - { tx.stability_fee ? ( - - ) : ( - { tx.fee.value ? getValueWithUnit(tx.fee.value).dp(5).toFormat() : '-' } - ) } + Fee + ) } diff --git a/ui/home/Stats.pw.tsx b/ui/home/Stats.pw.tsx index dc9533ca9b..7539828156 100644 --- a/ui/home/Stats.pw.tsx +++ b/ui/home/Stats.pw.tsx @@ -3,7 +3,6 @@ import React from 'react'; import * as statsMock from 'mocks/stats/index'; import { test, expect } from 'playwright/lib'; -import * as pwConfig from 'playwright/utils/config'; import Stats from './Stats'; @@ -18,14 +17,6 @@ test.describe('all items', () => { test('+@mobile +@dark-mode', async() => { await expect(component).toHaveScreenshot(); }); - - test.describe('screen xl', () => { - test.use({ viewport: pwConfig.viewport.xl }); - - test('', async() => { - await expect(component).toHaveScreenshot(); - }); - }); }); test('4 items default view +@mobile -@default', async({ render, mockApiResponse, mockEnvs }) => { diff --git a/ui/home/Stats.tsx b/ui/home/Stats.tsx index bcd80ac12d..7ef7979ac5 100644 --- a/ui/home/Stats.tsx +++ b/ui/home/Stats.tsx @@ -2,8 +2,6 @@ import { Grid } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; -import { route } from 'nextjs-routes'; - import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import { WEI } from 'lib/consts'; @@ -11,8 +9,7 @@ import { HOMEPAGE_STATS } from 'stubs/stats'; import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip'; import GasPrice from 'ui/shared/gas/GasPrice'; import IconSvg from 'ui/shared/IconSvg'; - -import StatsItem from './StatsItem'; +import StatsWidget from 'ui/shared/stats/StatsWidget'; const hasAvgBlockTime = config.UI.homepage.showAvgBlockTime; const rollupFeature = config.features.rollup; @@ -58,7 +55,7 @@ const Stats = () => { let content; - const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } }; + const lastItemStyle = { gridColumn: 'span 2' }; let itemsCount = 5; !hasGasTracker && itemsCount--; @@ -75,12 +72,10 @@ const Stats = () => { isLoading={ isLoading } name="info" boxSize={ 5 } - display="block" + flexShrink={ 0 } cursor="pointer" + color="icon_info" _hover={{ color: 'link_hovered' }} - position="absolute" - top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }} - right="10px" /> ) : null; @@ -88,80 +83,80 @@ const Stats = () => { content = ( <> { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && ( - ) } { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && ( - ) } { !(rollupFeature.isEnabled && (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync')) && ( - ) } { hasAvgBlockTime && ( - ) } - { rollupFeature.isEnabled && data.last_output_root_size && ( - ) } - { hasGasTracker && data.gas_prices && ( - : 'N/A' } - _last={ isOdd ? lastItemTouchStyle : undefined } - tooltip={ gasInfoTooltip } + hint={ gasInfoTooltip } isLoading={ isLoading } + _last={ isOdd ? lastItemStyle : undefined } /> ) } { data.rootstock_locked_btc && ( - ) } @@ -170,10 +165,10 @@ const Stats = () => { return ( { content } diff --git a/ui/home/StatsItem.tsx b/ui/home/StatsItem.tsx deleted file mode 100644 index fd66393b2d..0000000000 --- a/ui/home/StatsItem.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { SystemStyleObject } from '@chakra-ui/react'; -import { Skeleton, Flex, useColorModeValue, chakra } from '@chakra-ui/react'; -import React from 'react'; - -import breakpoints from 'theme/foundations/breakpoints'; -import type { IconName } from 'ui/shared/IconSvg'; -import IconSvg from 'ui/shared/IconSvg'; - -type Props = { - icon: IconName; - title: string; - value: string | React.ReactNode; - className?: string; - tooltip?: React.ReactNode; - url?: string; - isLoading?: boolean; -} - -const LARGEST_BREAKPOINT = '1240px'; - -const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: Props) => { - const sxContainer: SystemStyleObject = { - [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { flexDirection: 'column' }, - }; - - const sxText: SystemStyleObject = { - [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' }, - }; - - const bgColor = useColorModeValue('blue.50', 'whiteAlpha.100'); - const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50'); - - return ( - - - - - { title } - - - { typeof value === 'string' ? { value } : value } - - - { tooltip } - - ); -}; - -export default chakra(StatsItem); diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png index 2ea1c9b201..f63e92c244 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png index 03bd1d89f7..27cda8ce9a 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png index d5cb1866aa..7e08a6e582 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png differ diff --git a/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png b/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png index aadbdd8606..9c03e058ff 100644 Binary files a/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_dark-color-mode_all-items-mobile-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png index 2a03644402..81bd0c2ff8 100644 Binary files a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-mobile-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png b/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png deleted file mode 100644 index 9164811b64..0000000000 Binary files a/ui/home/__screenshots__/Stats.pw.tsx_default_all-items-screen-xl-1.png and /dev/null differ diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png index 390fe52cc0..f53d6e247f 100644 Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_3-items-default-view-mobile---default-1.png differ diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png index 1ce7238cce..c8348e42c7 100644 Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_4-items-default-view-mobile---default-1.png differ diff --git a/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png b/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png index 050557a436..8eae542155 100644 Binary files a/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png and b/ui/home/__screenshots__/Stats.pw.tsx_mobile_all-items-mobile-dark-mode-1.png differ diff --git a/ui/home/indicators/ChainIndicatorChartContainer.tsx b/ui/home/indicators/ChainIndicatorChartContainer.tsx index 02912afe98..a8bc2d2192 100644 --- a/ui/home/indicators/ChainIndicatorChartContainer.tsx +++ b/ui/home/indicators/ChainIndicatorChartContainer.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { chakra, Flex, Box } from '@chakra-ui/react'; import type { UseQueryResult } from '@tanstack/react-query'; import React from 'react'; @@ -15,21 +15,25 @@ const ChainIndicatorChartContainer = ({ data, isError, isPending }: Props) => { const content = (() => { if (isPending) { - return ; + return ; } if (isError) { - return ; + return ; } if (data[0].items.length === 0) { - return no data; + return no data; } - return ; + return ( + + + + ); })(); - return { content }; + return { content }; }; export default React.memo(ChainIndicatorChartContainer); diff --git a/ui/home/indicators/ChainIndicatorItem.tsx b/ui/home/indicators/ChainIndicatorItem.tsx index 84370b0808..5cfc5b1ebc 100644 --- a/ui/home/indicators/ChainIndicatorItem.tsx +++ b/ui/home/indicators/ChainIndicatorItem.tsx @@ -6,8 +6,6 @@ import type { HomeStats } from 'types/api/stats'; import type { ChainIndicatorId } from 'types/homepage'; import type { ResourceError } from 'lib/api/resources'; -import useIsMobile from 'lib/hooks/useIsMobile'; -import IconSvg from 'ui/shared/IconSvg'; interface Props { id: ChainIndicatorId; @@ -21,42 +19,27 @@ interface Props { } const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onClick, stats }: Props) => { - const isMobile = useIsMobile(); - - const activeBgColorDesktop = useColorModeValue('white', 'gray.900'); - const activeBgColorMobile = useColorModeValue('white', 'black'); - const activeBgColor = isMobile ? activeBgColorMobile : activeBgColorDesktop; + const activeColor = useColorModeValue('gray.500', 'gray.400'); + const activeBgColor = useColorModeValue('white', 'black'); const handleClick = React.useCallback(() => { onClick(id); }, [ id, onClick ]); const valueContent = (() => { - if (isMobile) { - return null; - } - - if (stats.isPlaceholderData) { - return ( - - ); - } - if (!stats.data) { return no data; } - return { value(stats.data) }; + return ( + + { value(stats.data) } + + ); })(); const valueDiffContent = (() => { - if (isMobile || !valueDiff) { + if (!valueDiff) { return null; } const diff = valueDiff(stats.data); @@ -67,9 +50,9 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC const diffColor = diff >= 0 ? 'green.500' : 'red.500'; return ( - - - { diff }% + + { diff >= 0 ? '+' : '-' } + { Math.abs(diff) }% ); })(); @@ -77,25 +60,28 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC return ( { icon } - - { title } - + + { title } + { valueContent } { valueDiffContent } diff --git a/ui/home/indicators/ChainIndicators.pw.tsx b/ui/home/indicators/ChainIndicators.pw.tsx index 3a2014110d..9b32a70f8e 100644 --- a/ui/home/indicators/ChainIndicators.pw.tsx +++ b/ui/home/indicators/ChainIndicators.pw.tsx @@ -22,7 +22,10 @@ test.describe('daily txs chart', () => { await mockApiResponse('stats_charts_txs', dailyTxsMock.base); await mockAssetResponse(statsMock.withSecondaryCoin.coin_image as string, './playwright/mocks/image_svg.svg'); component = await render(); - await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } }); + await page.waitForFunction(() => { + return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1'; + }); + await page.hover('.ChartOverlay', { position: { x: 50, y: 50 } }); }); test('+@mobile', async() => { @@ -38,9 +41,11 @@ test.describe('daily txs chart', () => { }); }); -test('partial data', async({ page, mockApiResponse, render }) => { +test('partial data', async({ page, mockApiResponse, mockAssetResponse, render }) => { await mockApiResponse('stats', statsMock.base); await mockApiResponse('stats_charts_txs', dailyTxsMock.partialData); + await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg'); + const component = await render(); await page.waitForFunction(() => { return document.querySelector('path[data-name="gradient-chart-area"]')?.getAttribute('opacity') === '1'; @@ -48,9 +53,11 @@ test('partial data', async({ page, mockApiResponse, render }) => { await expect(component).toHaveScreenshot(); }); -test('no data', async({ mockApiResponse, render }) => { +test('no data', async({ mockApiResponse, mockAssetResponse, render }) => { await mockApiResponse('stats', statsMock.noChartData); await mockApiResponse('stats_charts_txs', dailyTxsMock.noData); + await mockAssetResponse(statsMock.base.coin_image as string, './playwright/mocks/image_s.jpg'); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx index 5b6381cd07..6180f5194d 100644 --- a/ui/home/indicators/ChainIndicators.tsx +++ b/ui/home/indicators/ChainIndicators.tsx @@ -38,10 +38,7 @@ const ChainIndicators = () => { }, }); - const bgColorDesktop = useColorModeValue('white', 'gray.900'); - const bgColorMobile = useColorModeValue('white', 'black'); - const listBgColorDesktop = useColorModeValue('gray.50', 'black'); - const listBgColorMobile = useColorModeValue('gray.50', 'gray.900'); + const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100'); if (indicators.length === 0) { return null; @@ -49,15 +46,15 @@ const ChainIndicators = () => { const valueTitle = (() => { if (statsQueryResult.isPlaceholderData) { - return ; + return ; } if (!statsQueryResult.data) { - return There is no data; + return There is no data; } return ( - + { indicator?.value(statsQueryResult.data) } ); @@ -77,7 +74,7 @@ const ChainIndicators = () => { return ( - + { diff }% ); @@ -85,23 +82,22 @@ const ChainIndicators = () => { return ( - + - { indicator?.title } + { indicator?.title } { indicator?.hint && } - + { valueTitle } { valueDiff } @@ -112,11 +108,9 @@ const ChainIndicators = () => { flexShrink={ 0 } flexDir="column" as="ul" - p={ 3 } borderRadius="lg" - bgColor={{ base: listBgColorMobile, lg: listBgColorDesktop }} - rowGap={ 3 } - order={{ base: 1, lg: 2 }} + rowGap="6px" + m={{ base: 'auto 0', lg: 0 }} > { indicators.map((indicator) => ( , item: TimeChartItemRaw) => { if (item.value === null && result.length === 0) { @@ -70,7 +71,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', diff --git a/ui/marketplace/AppSecurityReport.tsx b/ui/marketplace/AppSecurityReport.tsx index 8d9edb895c..badbf181a3 100644 --- a/ui/marketplace/AppSecurityReport.tsx +++ b/ui/marketplace/AppSecurityReport.tsx @@ -1,4 +1,4 @@ -import { Box, Text, Link, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, chakra, Flex, Divider, Icon } from '@chakra-ui/react'; +import { Box, Text, Link, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, chakra, Flex, Divider, Icon } from '@chakra-ui/react'; import React from 'react'; import type { MarketplaceAppSecurityReport } from 'types/client/marketplace'; @@ -11,6 +11,7 @@ import config from 'configs/app'; import solidityScanIcon from 'icons/brands/solidity_scan.svg'; import { apos } from 'lib/html-entities'; import * as mixpanel from 'lib/mixpanel/index'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton'; import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails'; @@ -76,7 +77,7 @@ const AppSecurityReport = ({ Smart contracts info - + Verified contracts diff --git a/ui/marketplace/ContractSecurityReport.tsx b/ui/marketplace/ContractSecurityReport.tsx index 3ee1bc110b..5bf9f89ac5 100644 --- a/ui/marketplace/ContractSecurityReport.tsx +++ b/ui/marketplace/ContractSecurityReport.tsx @@ -1,4 +1,4 @@ -import { Box, Text, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Icon } from '@chakra-ui/react'; +import { Box, Text, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure, Icon } from '@chakra-ui/react'; import React from 'react'; import type { SolidityscanReport } from 'types/api/contract'; @@ -9,6 +9,7 @@ import config from 'configs/app'; // eslint-disable-next-line no-restricted-imports import solidityScanIcon from 'icons/brands/solidity_scan.svg'; import * as mixpanel from 'lib/mixpanel/index'; +import Popover from 'ui/shared/chakra/Popover'; import LinkExternal from 'ui/shared/links/LinkExternal'; import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton'; import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails'; diff --git a/ui/marketplace/MarketplaceAppCard.tsx b/ui/marketplace/MarketplaceAppCard.tsx index d35533d2d3..7db60d3ec4 100644 --- a/ui/marketplace/MarketplaceAppCard.tsx +++ b/ui/marketplace/MarketplaceAppCard.tsx @@ -179,7 +179,7 @@ const MarketplaceAppCard = ({ showContractList={ showContractList } isLoading={ isLoading } source="Discovery view" - popoverPlacement={ isMobile ? 'bottom-end' : 'bottom-start' } + popoverPlacement={ isMobile ? 'bottom-end' : 'left' } position="absolute" right={{ base: 3, md: 5 }} top={{ base: '10px', md: 5 }} diff --git a/ui/marketplace/MarketplaceAppInfo.tsx b/ui/marketplace/MarketplaceAppInfo.tsx index ce98a894e7..9641056c3a 100644 --- a/ui/marketplace/MarketplaceAppInfo.tsx +++ b/ui/marketplace/MarketplaceAppInfo.tsx @@ -1,5 +1,5 @@ import { - Popover, PopoverTrigger, PopoverContent, PopoverBody, + PopoverTrigger, PopoverContent, PopoverBody, Modal, ModalContent, ModalCloseButton, useDisclosure, } from '@chakra-ui/react'; import React from 'react'; @@ -7,6 +7,7 @@ import React from 'react'; import type { MarketplaceAppOverview } from 'types/client/marketplace'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Popover from 'ui/shared/chakra/Popover'; import Content from './MarketplaceAppInfo/Content'; import TriggerButton from './MarketplaceAppInfo/TriggerButton'; diff --git a/ui/marketplace/MarketplaceAppModal.tsx b/ui/marketplace/MarketplaceAppModal.tsx index 0bb31cfe97..03e3885f45 100644 --- a/ui/marketplace/MarketplaceAppModal.tsx +++ b/ui/marketplace/MarketplaceAppModal.tsx @@ -191,7 +191,7 @@ const MarketplaceAppModal = ({ mb={ 6 } > - + Verified contracts { securityReport?.overallInfo.verifiedNumber ?? 0 } of { securityReport?.overallInfo.totalContractsNumber ?? 0 } diff --git a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 99eb6c1d23..78db057d84 100644 Binary files a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png index 03091af10b..9aecd54c28 100644 Binary files a/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png and b/ui/marketplace/__screenshots__/MarketplaceAppInfo.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 350dafd2f9..df220dabd8 100644 Binary files a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png index 992ae80fd2..f2e12cad51 100644 Binary files a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png and b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png index 5f01caf93e..925173b47b 100644 Binary files a/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png and b/ui/marketplace/__screenshots__/MarketplaceAppModal.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/nameDomains/NameDomainsActionBar.tsx b/ui/nameDomains/NameDomainsActionBar.tsx index a4230f9086..8518abceb2 100644 --- a/ui/nameDomains/NameDomainsActionBar.tsx +++ b/ui/nameDomains/NameDomainsActionBar.tsx @@ -53,7 +53,7 @@ const NameDomainsActionBar = ({ minW={{ base: 'auto', lg: '250px' }} size="xs" onChange={ onSearchChange } - placeholder="Search by name" + placeholder="Search by name or address" initialValue={ searchTerm } isLoading={ isInitialLoading } /> diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx index 7790ce31bf..075ba7144e 100644 --- a/ui/pages/Address.tsx +++ b/ui/pages/Address.tsx @@ -272,7 +272,7 @@ const AddressPageContent = () => { /> ) } { ); - const content = (() => { + const snippets = (() => { if (!isPlaceholderData && data?.gas_prices?.slow === null && data?.gas_prices.average === null && data.gas_prices.fast === null) { - return No data available yet; + return No recent data available; } - return ( - <> - { data?.gas_prices && } - { config.features.stats.isEnabled && ( - - - - ) } - - ); + return data?.gas_prices ? : null; })(); return ( @@ -88,7 +79,12 @@ const GasTracker = () => { secondRow={ titleSecondRow } withTextAd /> - { content } + { snippets } + { config.features.stats.isEnabled && ( + + + + ) } ); }; diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx index b267a7b6b7..458f9a2817 100644 --- a/ui/pages/Home.tsx +++ b/ui/pages/Home.tsx @@ -2,6 +2,7 @@ import { Box, Flex, Heading } from '@chakra-ui/react'; import React from 'react'; import config from 'configs/app'; +import useIsMobile from 'lib/hooks/useIsMobile'; import ChainIndicators from 'ui/home/indicators/ChainIndicators'; import LatestBlocks from 'ui/home/LatestBlocks'; import LatestZkEvmL2Batches from 'ui/home/LatestZkEvmL2Batches'; @@ -15,44 +16,51 @@ import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop'; const rollupFeature = config.features.rollup; const Home = () => { + const isMobile = useIsMobile(); + return ( - - - - { - config.meta.seo.enhancedDataEnabled ? - `${ config.chain.name } blockchain explorer` : - `${ config.chain.name } explorer` - } - - { config.UI.navigation.layout === 'vertical' && ( - - { config.features.account.isEnabled && } - { config.features.blockchainInteraction.isEnabled && } - - ) } - - - - - - - + + + + { + config.meta.seo.enhancedDataEnabled ? + `${ config.chain.name } blockchain explorer` : + `${ config.chain.name } explorer` + } + + { config.UI.navigation.layout === 'vertical' && ( + + { config.features.account.isEnabled && } + { config.features.blockchainInteraction.isEnabled && } + + ) } + + + + { !isMobile && } + + + + + + { isMobile && } + { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? : } diff --git a/ui/pages/Marketplace.tsx b/ui/pages/Marketplace.tsx index 2ff657f341..48c1d4b389 100644 --- a/ui/pages/Marketplace.tsx +++ b/ui/pages/Marketplace.tsx @@ -1,4 +1,4 @@ -import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react'; +import { Box, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react'; import React from 'react'; import type { MouseEvent } from 'react'; @@ -14,6 +14,7 @@ import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal'; import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal'; import MarketplaceList from 'ui/marketplace/MarketplaceList'; import { SORT_OPTIONS } from 'ui/marketplace/utils'; +import Menu from 'ui/shared/chakra/Menu'; import FilterInput from 'ui/shared/filters/FilterInput'; import IconSvg from 'ui/shared/IconSvg'; import type { IconName } from 'ui/shared/IconSvg'; diff --git a/ui/pages/MarketplaceApp.pw.tsx b/ui/pages/MarketplaceApp.pw.tsx index 08d1be9b6d..7f35c17f7b 100644 --- a/ui/pages/MarketplaceApp.pw.tsx +++ b/ui/pages/MarketplaceApp.pw.tsx @@ -33,9 +33,9 @@ const testFn: Parameters[1] = async({ render, mockConfigResponse, m await expect(component).toHaveScreenshot(); }; -test('base view +@dark-mode', testFn); +test.fixme('base view +@dark-mode', testFn); test.describe('mobile', () => { test.use({ viewport: devices['iPhone 13 Pro'].viewport }); - test('base view', testFn); + test.fixme('base view', testFn); }); diff --git a/ui/pages/Sprite.tsx b/ui/pages/Sprite.tsx new file mode 100644 index 0000000000..ed0156d86d --- /dev/null +++ b/ui/pages/Sprite.tsx @@ -0,0 +1,120 @@ +import { Flex, Box, Tooltip, useClipboard, useColorModeValue } from '@chakra-ui/react'; +import { useQuery } from '@tanstack/react-query'; +import React from 'react'; + +import type { StaticRoute } from 'nextjs-routes'; +import { route } from 'nextjs-routes'; + +import useFetch from 'lib/hooks/useFetch'; +import ContentLoader from 'ui/shared/ContentLoader'; +import DataFetchAlert from 'ui/shared/DataFetchAlert'; +import EmptySearchResult from 'ui/shared/EmptySearchResult'; +import FilterInput from 'ui/shared/filters/FilterInput'; +import type { IconName } from 'ui/shared/IconSvg'; +import IconSvg from 'ui/shared/IconSvg'; +import PageTitle from 'ui/shared/Page/PageTitle'; + +const formatFileSize = (fileSizeInBytes: number) => `${ (fileSizeInBytes / 1_024).toFixed(2) } Kb`; + +interface IconInfo { + name: string; + fileSize: number; +} + +const Item = ({ name, fileSize, bgColor }: IconInfo & { bgColor: string }) => { + const { hasCopied, onCopy } = useClipboard(name, 1000); + const [ copied, setCopied ] = React.useState(false); + + React.useEffect(() => { + if (hasCopied) { + setCopied(true); + } else { + setCopied(false); + } + }, [ hasCopied ]); + + return ( + + + + { name } + + { formatFileSize(fileSize) } + + ); +}; + +const Sprite = () => { + const [ searchTerm, setSearchTerm ] = React.useState(''); + const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100'); + + const fetch = useFetch(); + const { data, isFetching, isError } = useQuery({ + queryKey: [ 'sprite' ], + queryFn: () => { + const url = route({ pathname: '/node-api/sprite' as StaticRoute<'/api/sprite'>['pathname'] }); + return fetch<{ icons: Array }, unknown>(url); + }, + }); + + const content = (() => { + if (isFetching) { + return ; + } + + if (isError || !data || !('icons' in data)) { + return ; + } + + const items = data.icons.filter((icon) => icon.name.includes(searchTerm)); + + if (items.length === 0) { + return ; + } + + return ( + + { items.map((item) => ) } + + ); + })(); + + const total = React.useMemo(() => { + if (!data || !('icons' in data)) { + return; + } + return data?.icons.reduce((result, item) => { + result.num++; + result.fileSize += item.fileSize; + return result; + }, { num: 0, fileSize: 0 }); + }, [ data ]); + + const searchInput = ; + const totalEl = total ? Items: { total.num } / Size: { formatFileSize(total.fileSize) } : null; + + const contentAfter = ( + <> + { totalEl } + { searchInput } + + ); + + return ( +
+ + { content } +
+ ); +}; + +export default React.memo(Sprite); diff --git a/ui/pages/UserOp.tsx b/ui/pages/UserOp.tsx index 4132e39757..92eebad927 100644 --- a/ui/pages/UserOp.tsx +++ b/ui/pages/UserOp.tsx @@ -1,4 +1,4 @@ -import { inRange } from 'lodash'; +import _inRange from 'lodash/inRange'; import { useRouter } from 'next/router'; import React from 'react'; @@ -43,7 +43,11 @@ const UserOp = () => { if (!userOpQuery.data) { return true; } else { - if (inRange(Number(tt.log_index), userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) { + if (_inRange( + Number(tt.log_index), + userOpQuery.data?.user_logs_start_index, + userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count, + )) { return true; } return false; @@ -54,7 +58,7 @@ const UserOp = () => { if (!userOpQuery.data) { return true; } else { - if (inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) { + if (_inRange(log.index, userOpQuery.data?.user_logs_start_index, userOpQuery.data?.user_logs_start_index + userOpQuery.data?.user_logs_count)) { return true; } return false; diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png index bb39cdfeae..d01580fc78 100644 Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png index 1d98155601..17a1f4af90 100644 Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png index 10b25fac9e..9c141d2020 100644 Binary files a/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png index 3598ef76ff..be67615c80 100644 Binary files a/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Blob.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png index 71b6659601..ff79899a3c 100644 Binary files a/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Blob.pw.tsx_default_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png index 9a2251266a..ecbadbef88 100644 Binary files a/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png and b/ui/pages/__screenshots__/Blob.pw.tsx_default_without-data-1.png differ diff --git a/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png index fef432274c..16fb93fd17 100644 Binary files a/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/Blob.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png index fa0ba6445e..96d1c2e66a 100644 Binary files a/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-1.png and b/ui/pages/__screenshots__/Blocks.pw.tsx_default_hidden-fields-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 9456606356..c19796bb2e 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_custom-hero-plate-background-default-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png index d90e609f25..ebf021d6da 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_custom-hero-plate-background-default-view-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 df73bb1ee1..f8e2e3508a 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 f34ae157e6..0d925458fd 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/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 3ebdbba8ef..714a1faf76 100644 Binary files a/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png index 4bb6f375b8..b7bbb1d240 100644 Binary files a/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/MarketplaceApp.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png index db086b2239..ec4d7d1719 100644 Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png differ diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png index 1be771d769..86a125cef6 100644 Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png differ diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png index 767f0cdadd..034f4d0c04 100644 Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png differ diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png index 49dedc7bc7..4aa9eaba13 100644 Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png index 4f4408f614..d26259d718 100644 Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_filters-1.png differ diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png index 2af4ecf5ae..90abdecd57 100644 Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png index f543f14faa..e26b9640be 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png index a228cbda47..0639dd9260 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_bridged-token-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png index fa6b41b979..b5cf810e1a 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png index ef39812e24..32f2af7cb0 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_mobile-with-verified-info-1.png differ diff --git a/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png index 1c8ac04124..22a1495db4 100644 Binary files a/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png and b/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png differ diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png index 91da6b973f..0d1704959f 100644 Binary files a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-1.png differ diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png index 3958a1ced0..ba468412e8 100644 Binary files a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-2.png differ diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png index a00d5b2e17..3aafd478aa 100644 Binary files a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-3.png differ diff --git a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png index 732968c5f8..3d75428feb 100644 Binary files a/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png and b/ui/pages/__screenshots__/TokenInstance.pw.tsx_default_metadata-update-failed-1.png differ diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png index c18668e77b..555e249bb1 100644 Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png index b5035d2385..8923c3e562 100644 Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png index 1282e316b1..60c91c3ed0 100644 Binary files a/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/UserOps.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Validators.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/Validators.pw.tsx_default_base-view-mobile-1.png index cbbe864618..a130fe9a6b 100644 Binary files a/ui/pages/__screenshots__/Validators.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/Validators.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/Validators.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/Validators.pw.tsx_mobile_base-view-mobile-1.png index 04ced8f304..4502a18cc8 100644 Binary files a/ui/pages/__screenshots__/Validators.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/Validators.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png index f93346107e..6d8570b73d 100644 Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png index 5ea07a2053..81cc0e27fe 100644 Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png index dd12814ee2..8b4f2f7096 100644 Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png index ce895bec33..d2403602cc 100644 Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png index 3f06a5fe3c..871c83321b 100644 Binary files a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png differ diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png index d3cd0edd3e..5b2f9cd4b0 100644 Binary files a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png index bf979d4684..9b88d57ff3 100644 Binary files a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png index eef351f49b..3f5bee9e4b 100644 Binary files a/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png and b/ui/publicTags/submit/__screenshots__/PublicTagsSubmitForm.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/searchResults/SearchResultsInput.tsx b/ui/searchResults/SearchResultsInput.tsx index 3559b1978d..d76864d836 100644 --- a/ui/searchResults/SearchResultsInput.tsx +++ b/ui/searchResults/SearchResultsInput.tsx @@ -1,10 +1,11 @@ -import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; +import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; import _debounce from 'lodash/debounce'; import type { FormEvent, FocusEvent } from 'react'; import React from 'react'; import useIsMobile from 'lib/hooks/useIsMobile'; import { getRecentSearchKeywords } from 'lib/recentSearchKeywords'; +import Popover from 'ui/shared/chakra/Popover'; import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop'; import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput'; import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords'; @@ -76,7 +77,7 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange } autoFocus={ false } onClose={ onClose } placement="bottom-start" - offset={ isMobile ? [ 16, -12 ] : undefined } + offset={ isMobile ? [ 16, -12 ] : [ 0, 8 ] } isLazy > diff --git a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx index 127b9a15cc..6716dd90a9 100644 --- a/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx +++ b/ui/shared/AccountActionsMenu/AccountActionsMenu.tsx @@ -1,4 +1,4 @@ -import { Box, IconButton, Menu, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react'; +import { Box, IconButton, MenuButton, MenuList, Skeleton, chakra } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -9,6 +9,7 @@ import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo'; import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed'; import * as mixpanel from 'lib/mixpanel/index'; import getQueryParamString from 'lib/router/getQueryParamString'; +import Menu from 'ui/shared/chakra/Menu'; import IconSvg from 'ui/shared/IconSvg'; import MetadataUpdateMenuItem from './items/MetadataUpdateMenuItem'; diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png index 710b9ed0ce..c850c3a5fe 100644 Binary files a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-1.png differ diff --git a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png index caf9dbf354..95d153a241 100644 Binary files a/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png and b/ui/shared/AccountActionsMenu/__screenshots__/AccountActionsMenu.pw.tsx_default_with-multiple-items-base-view-with-styles-1.png differ diff --git a/ui/shared/AdditionalInfoButton.tsx b/ui/shared/AdditionalInfoButton.tsx index de15304086..144820e89a 100644 --- a/ui/shared/AdditionalInfoButton.tsx +++ b/ui/shared/AdditionalInfoButton.tsx @@ -42,7 +42,7 @@ const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props, diff --git a/ui/shared/CurrencyValue.tsx b/ui/shared/CurrencyValue.tsx index fa10cd09b3..4b4bf7b3a9 100644 --- a/ui/shared/CurrencyValue.tsx +++ b/ui/shared/CurrencyValue.tsx @@ -1,4 +1,4 @@ -import { Box, Text, chakra, Skeleton } from '@chakra-ui/react'; +import { chakra, Skeleton } from '@chakra-ui/react'; import React from 'react'; import getCurrencyValue from 'lib/getCurrencyValue'; @@ -23,20 +23,20 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className if (value === undefined || value === null) { return ( - - N/A - + + - + ); } const { valueStr: valueResult, usd: usdResult } = getCurrencyValue({ value, accuracy, accuracyUsd, exchangeRate, decimals }); return ( - - + + { valueResult }{ currency ? ` ${ currency }` : '' } - - { usdResult && (${ usdResult }) } - + + { usdResult && (${ usdResult }) } + ); }; diff --git a/ui/shared/EntityTags/EntityTagPopover.tsx b/ui/shared/EntityTags/EntityTagPopover.tsx index 0f63cd3607..b0882c347b 100644 --- a/ui/shared/EntityTags/EntityTagPopover.tsx +++ b/ui/shared/EntityTags/EntityTagPopover.tsx @@ -1,10 +1,11 @@ -import { chakra, Image, Flex, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, useColorModeValue, DarkMode } from '@chakra-ui/react'; +import { chakra, Image, Flex, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, useColorModeValue, DarkMode } from '@chakra-ui/react'; import React from 'react'; import type { EntityTag } from './types'; import makePrettyLink from 'lib/makePrettyLink'; import * as mixpanel from 'lib/mixpanel/index'; +import Popover from 'ui/shared/chakra/Popover'; import LinkExternal from 'ui/shared/links/LinkExternal'; interface Props { @@ -35,7 +36,7 @@ const EntityTagPopover = ({ data, children }: Props) => { } return ( - + { children } diff --git a/ui/shared/EntityTags/EntityTags.tsx b/ui/shared/EntityTags/EntityTags.tsx index 4028eacad9..a9cfa0cf17 100644 --- a/ui/shared/EntityTags/EntityTags.tsx +++ b/ui/shared/EntityTags/EntityTags.tsx @@ -1,10 +1,11 @@ -import { Box, Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger, chakra } from '@chakra-ui/react'; +import { Box, Flex, PopoverBody, PopoverContent, PopoverTrigger, chakra } from '@chakra-ui/react'; import React from 'react'; import type { EntityTag as TEntityTag } from './types'; import config from 'configs/app'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Popover from 'ui/shared/chakra/Popover'; import Tag from 'ui/shared/chakra/Tag'; import EntityTag from './EntityTag'; diff --git a/ui/shared/Hint.tsx b/ui/shared/Hint.tsx index 1e4da78755..e7fa1f8590 100644 --- a/ui/shared/Hint.tsx +++ b/ui/shared/Hint.tsx @@ -35,7 +35,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => { } + icon={ } boxSize={ 5 } variant="simple" display="inline-block" diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx index 5a6f55b70e..15475956c2 100644 --- a/ui/shared/NetworkExplorers.tsx +++ b/ui/shared/NetworkExplorers.tsx @@ -1,7 +1,6 @@ import { Image, Button, - Popover, PopoverTrigger, PopoverBody, PopoverContent, @@ -18,6 +17,7 @@ import type { NetworkExplorer as TNetworkExplorer } from 'types/networks'; import config from 'configs/app'; import stripTrailingSlash from 'lib/stripTrailingSlash'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip'; diff --git a/ui/shared/Tabs/TabsMenu.tsx b/ui/shared/Tabs/TabsMenu.tsx index 36fd2fd81a..b3d8061421 100644 --- a/ui/shared/Tabs/TabsMenu.tsx +++ b/ui/shared/Tabs/TabsMenu.tsx @@ -1,6 +1,6 @@ import type { ButtonProps } from '@chakra-ui/react'; -import { Popover, +import { PopoverTrigger, PopoverContent, PopoverBody, @@ -12,6 +12,8 @@ import React from 'react'; import type { MenuButton, TabItem } from './types'; +import Popover from 'ui/shared/chakra/Popover'; + import TabCounter from './TabCounter'; import { menuButton } from './utils'; diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png index c031b777c1..4078cb1ab3 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png index 725d066269..0d246693a1 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png differ diff --git a/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png b/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png index fc1e449de6..53369fff00 100644 Binary files a/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png and b/ui/shared/__screenshots__/NetworkExplorers.pw.tsx_default_base-view-1.png differ diff --git a/ui/shared/ad/AdBanner.tsx b/ui/shared/ad/AdBanner.tsx index d7e7ea8a01..525866f414 100644 --- a/ui/shared/ad/AdBanner.tsx +++ b/ui/shared/ad/AdBanner.tsx @@ -1,6 +1,8 @@ import { chakra } from '@chakra-ui/react'; import React from 'react'; +import type { BannerPlatform } from './types'; + import config from 'configs/app'; import { useAppContext } from 'lib/contexts/app'; import * as cookies from 'lib/cookies'; @@ -9,7 +11,13 @@ import AdBannerContent from './AdBannerContent'; const feature = config.features.adsBanner; -const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: boolean }) => { +interface Props { + className?: string; + isLoading?: boolean; + platform?: BannerPlatform; +} + +const AdBanner = ({ className, isLoading, platform }: Props) => { const provider = useAppContext().adBannerProvider; const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies); @@ -23,6 +31,7 @@ const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: bo className={ className } isLoading={ isLoading } provider={ provider } + platform={ platform } /> ); }; diff --git a/ui/shared/ad/AdBannerContent.tsx b/ui/shared/ad/AdBannerContent.tsx index a4951c02ee..ba54e20f04 100644 --- a/ui/shared/ad/AdBannerContent.tsx +++ b/ui/shared/ad/AdBannerContent.tsx @@ -1,31 +1,39 @@ import { chakra, Skeleton } from '@chakra-ui/react'; import React from 'react'; +import type { BannerPlatform } from './types'; import type { AdBannerProviders } from 'types/client/adProviders'; import config from 'configs/app'; import AdbutlerBanner from './AdbutlerBanner'; import CoinzillaBanner from './CoinzillaBanner'; -import GetitBanner from './GetitBanner'; +// import GetitBanner from './GetitBanner'; import HypeBanner from './HypeBanner'; import SliseBanner from './SliseBanner'; const feature = config.features.adsBanner; -const AdBannerContent = ({ className, isLoading, provider }: { className?: string; isLoading?: boolean; provider: AdBannerProviders }) => { +interface Props { + className?: string; + isLoading?: boolean; + platform?: BannerPlatform; + provider: AdBannerProviders; +} + +const AdBannerContent = ({ className, isLoading, provider, platform }: Props) => { const content = (() => { switch (provider) { case 'adbutler': - return ; + return ; case 'coinzilla': - return ; - case 'getit': - return ; + return ; + // case 'getit': + // return ; case 'hype': - return ; + return ; case 'slise': - return ; + return ; } })(); diff --git a/ui/shared/ad/AdbutlerBanner.tsx b/ui/shared/ad/AdbutlerBanner.tsx index aa6db55ea4..f21ea68b61 100644 --- a/ui/shared/ad/AdbutlerBanner.tsx +++ b/ui/shared/ad/AdbutlerBanner.tsx @@ -3,6 +3,8 @@ import { useRouter } from 'next/navigation'; import Script from 'next/script'; import React from 'react'; +import type { BannerProps } from './types'; + import config from 'configs/app'; import useIsMobile from 'lib/hooks/useIsMobile'; import isBrowser from 'lib/isBrowser'; @@ -10,9 +12,10 @@ import { connectAdbutler, placeAd, ADBUTLER_ACCOUNT } from 'ui/shared/ad/adbutle const feature = config.features.adsBanner; -const AdbutlerBanner = ({ className }: { className?: string }) => { +const AdbutlerBanner = ({ className, platform }: BannerProps) => { const router = useRouter(); - const isMobile = useIsMobile(); + const isMobileViewport = useIsMobile(); + const isMobile = platform === 'mobile' || isMobileViewport; React.useEffect(() => { if (!('adButler' in feature)) { @@ -24,10 +27,10 @@ const AdbutlerBanner = ({ className }: { className?: string }) => { if (!window.AdButler.ads) { window.AdButler.ads = []; } + const adButlerConfig = isMobile ? feature.adButler.config.mobile : feature.adButler.config.desktop; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore: - let plc = window[`plc${ feature.adButler.config.mobile.id }`] || 0; - const adButlerConfig = isMobile ? feature.adButler.config.mobile : feature.adButler.config.desktop; + let plc = window[`plc${ adButlerConfig.id }`] || 0; const banner = document.getElementById('ad-banner'); if (banner) { banner.innerHTML = '<' + 'div id="placement_' + adButlerConfig?.id + '_' + plc + '">'; @@ -46,10 +49,34 @@ const AdbutlerBanner = ({ className }: { className?: string }) => { } }, [ router, isMobile ]); + if (!('adButler' in feature)) { + return null; + } + + const { width, height } = (() => { + switch (platform) { + case 'desktop': + return { width: `${ feature.adButler.config.desktop.width }px`, height: `${ feature.adButler.config.desktop.height }px` }; + case 'mobile': + return { width: `${ feature.adButler.config.mobile.width }px`, height: `${ feature.adButler.config.mobile.height }px` }; + default: + return { + width: { + base: `${ feature.adButler.config.mobile.width }px`, + lg: `${ feature.adButler.config.desktop.width }px`, + }, + height: { + base: `${ feature.adButler.config.mobile.height }px`, + lg: `${ feature.adButler.config.desktop.height }px`, + }, + }; + } + })() ?? { width: '0', height: '0' }; + return ( - + - +
); diff --git a/ui/shared/ad/CoinzillaBanner.tsx b/ui/shared/ad/CoinzillaBanner.tsx index bfdb38fb88..bb0222eb4b 100644 --- a/ui/shared/ad/CoinzillaBanner.tsx +++ b/ui/shared/ad/CoinzillaBanner.tsx @@ -2,25 +2,44 @@ import { Flex, chakra } from '@chakra-ui/react'; import Script from 'next/script'; import React from 'react'; +import type { BannerProps } from './types'; + import isBrowser from 'lib/isBrowser'; -const CoinzillaBanner = ({ className }: { className?: string }) => { +const CoinzillaBanner = ({ className, platform }: BannerProps) => { const isInBrowser = isBrowser(); + const { width, height } = (() => { + switch (platform) { + case 'desktop': + return { width: 728, height: 90 }; + case 'mobile': + return { width: 320, height: 100 }; + default: + return { width: undefined, height: undefined }; + } + + })(); + React.useEffect(() => { if (isInBrowser) { window.coinzilla_display = window.coinzilla_display || []; const cDisplayPreferences = { zone: '26660bf627543e46851', - width: '728', - height: '90', + width: width ? String(width) : '728', + height: height ? String(height) : '90', }; window.coinzilla_display.push(cDisplayPreferences); } - }, [ isInBrowser ]); + }, [ height, isInBrowser, width ]); return ( - + - - - - - - + > + { hypeInit } + + { banner } ); }; diff --git a/ui/shared/ad/SliseBanner.tsx b/ui/shared/ad/SliseBanner.tsx index 56ae2a7f3a..fda81b6209 100644 --- a/ui/shared/ad/SliseBanner.tsx +++ b/ui/shared/ad/SliseBanner.tsx @@ -2,9 +2,35 @@ import { Flex, chakra } from '@chakra-ui/react'; import { SliseAd } from '@slise/embed-react'; import React from 'react'; +import type { BannerProps } from './types'; + import config from 'configs/app'; -const SliseBanner = ({ className }: { className?: string }) => { +const SliseBanner = ({ className, platform }: BannerProps) => { + + if (platform === 'desktop') { + return ( + + + + ); + } + + if (platform === 'mobile') { + return ( + + + + ); + } return ( <> diff --git a/ui/shared/ad/adbutlerScript.ts b/ui/shared/ad/adbutlerScript.ts index 81b057e679..c2734fb9b0 100644 --- a/ui/shared/ad/adbutlerScript.ts +++ b/ui/shared/ad/adbutlerScript.ts @@ -1,17 +1,29 @@ /* eslint-disable max-len */ +import type { BannerPlatform } from './types'; + import config from 'configs/app'; export const ADBUTLER_ACCOUNT = 182226; export const connectAdbutler = `if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}`; -export const placeAd = (() => { +export const placeAd = ((platform: BannerPlatform | undefined) => { const feature = config.features.adsBanner; if (!('adButler' in feature)) { return; } + if (platform === 'mobile') { + return ` + var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || []; + var abkw = window.abkw || ''; + var plc${ feature.adButler.config.mobile.id } = window.plc${ feature.adButler.config.mobile.id } || 0; + document.getElementById('ad-banner').innerHTML = '<'+'div id="placement_${ feature.adButler.config.mobile.id }_'+plc${ feature.adButler.config.mobile.id }+'">'; + AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ feature.adButler.config.mobile.id }, [${ feature.adButler.config.mobile.width },${ feature.adButler.config.mobile.height }], 'placement_${ feature.adButler.config.mobile.id }_'+opt.place, opt); }, opt: { place: plc${ feature.adButler.config.mobile.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }}); + `; + } + return ` var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || []; var abkw = window.abkw || ''; @@ -26,4 +38,4 @@ export const placeAd = (() => { AdButler.ads.push({handler: function(opt){ AdButler.register(${ ADBUTLER_ACCOUNT }, ${ feature.adButler.config.desktop.id }, [${ feature.adButler.config.desktop.width },${ feature.adButler.config.desktop.height }], 'placement_${ feature.adButler.config.desktop.id }_'+opt.place, opt); }, opt: { place: plc${ feature.adButler.config.desktop.id }++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }}); } `; -})(); +}); diff --git a/ui/shared/ad/types.ts b/ui/shared/ad/types.ts new file mode 100644 index 0000000000..f14b625484 --- /dev/null +++ b/ui/shared/ad/types.ts @@ -0,0 +1,6 @@ +export type BannerPlatform = 'mobile' | 'desktop'; + +export interface BannerProps { + className?: string; + platform?: BannerPlatform; +} diff --git a/ui/shared/chakra/Menu.tsx b/ui/shared/chakra/Menu.tsx new file mode 100644 index 0000000000..9d74cce995 --- /dev/null +++ b/ui/shared/chakra/Menu.tsx @@ -0,0 +1,10 @@ +import type { MenuProps } from '@chakra-ui/react'; +// eslint-disable-next-line no-restricted-imports +import { Menu as MenuBase } from '@chakra-ui/react'; +import React from 'react'; + +const Menu = (props: MenuProps) => { + return ; +}; + +export default React.memo(Menu); diff --git a/ui/shared/chakra/Popover.tsx b/ui/shared/chakra/Popover.tsx new file mode 100644 index 0000000000..a5866e841a --- /dev/null +++ b/ui/shared/chakra/Popover.tsx @@ -0,0 +1,10 @@ +import type { PopoverProps } from '@chakra-ui/react'; +// eslint-disable-next-line no-restricted-imports +import { Popover as PopoverBase } from '@chakra-ui/react'; +import React from 'react'; + +const Popover = (props: PopoverProps) => { + return ; +}; + +export default React.memo(Popover); diff --git a/ui/shared/Toast.tsx b/ui/shared/chakra/Toast.tsx similarity index 91% rename from ui/shared/Toast.tsx rename to ui/shared/chakra/Toast.tsx index 67451e02f6..c886a67438 100644 --- a/ui/shared/Toast.tsx +++ b/ui/shared/chakra/Toast.tsx @@ -20,7 +20,7 @@ function getBgColor(status?: AlertStatus) { } } -const Toast = ({ onClose, title, description, id, isClosable, status }: ToastProps) => { +const Toast = ({ onClose, title, description, id, isClosable, status, icon }: ToastProps) => { const ids = id ? { @@ -48,7 +48,7 @@ const Toast = ({ onClose, title, description, id, isClosable, status }: ToastPro maxWidth="400px" > - { title && { title } } + { title && { icon }{ title } } { description && ( { description } diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx index 4ff84d65cf..550f912f56 100644 --- a/ui/shared/chart/ChartWidget.tsx +++ b/ui/shared/chart/ChartWidget.tsx @@ -4,7 +4,6 @@ import { chakra, Flex, IconButton, Link, - Menu, MenuButton, MenuItem, MenuList, @@ -22,6 +21,7 @@ import type { TimeChartItem } from './types'; import dayjs from 'lib/date/dayjs'; import { apos } from 'lib/html-entities'; import saveAsCSV from 'lib/saveAsCSV'; +import Menu from 'ui/shared/chakra/Menu'; import IconSvg from 'ui/shared/IconSvg'; import ChartWidgetGraph from './ChartWidgetGraph'; @@ -198,7 +198,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError, size="sm" variant="outline" onClick={ handleZoomResetClick } - icon={ } + icon={ } /> diff --git a/ui/shared/chart/FullscreenChartModal.tsx b/ui/shared/chart/FullscreenChartModal.tsx index d7a3b1c692..6835474851 100644 --- a/ui/shared/chart/FullscreenChartModal.tsx +++ b/ui/shared/chart/FullscreenChartModal.tsx @@ -71,7 +71,7 @@ const FullscreenChartModal = ({ { !isZoomResetInitial && ( diff --git a/ui/snippets/walletMenu/WalletMenuMobile.tsx b/ui/snippets/walletMenu/WalletMenuMobile.tsx index 9375facb4f..9008d540e4 100644 --- a/ui/snippets/walletMenu/WalletMenuMobile.tsx +++ b/ui/snippets/walletMenu/WalletMenuMobile.tsx @@ -38,7 +38,7 @@ const WalletMenuMobile = () => { aria-label="wallet menu" icon={ isWalletConnected ? : - + } variant={ isWalletConnected ? 'subtle' : 'outline' } colorScheme="gray" diff --git a/ui/sol2uml/Sol2UmlDiagram.tsx b/ui/sol2uml/Sol2UmlDiagram.tsx index eaebf9c3c1..840b05fb9e 100644 --- a/ui/sol2uml/Sol2UmlDiagram.tsx +++ b/ui/sol2uml/Sol2UmlDiagram.tsx @@ -1,6 +1,7 @@ import { chakra, Tooltip, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; +import type * as visualizer from '@blockscout/visualizer-types'; import type { SmartContract } from 'types/api/contract'; import type { ResourceError } from 'lib/api/resources'; @@ -13,7 +14,7 @@ interface Props { addressHash: string; } -function composeSources(contract: SmartContract | undefined) { +function composeSources(contract: SmartContract | undefined): visualizer.VisualizeStorageRequest['sources'] { if (!contract) { return {}; } @@ -23,7 +24,7 @@ function composeSources(contract: SmartContract | undefined) { }, {}); return { - [contract.file_path || 'index.sol']: contract.source_code, + [contract.file_path || 'index.sol']: contract.source_code || '', ...additionalSources, }; } @@ -76,7 +77,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => { return ( ; + charts?: Array; interval: StatsIntervalIds; } @@ -76,7 +76,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && ( - + ) } diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx index 758d9810c5..ad222401b5 100644 --- a/ui/stats/NumberWidgetsList.tsx +++ b/ui/stats/NumberWidgetsList.tsx @@ -29,7 +29,7 @@ const NumberWidgetsList = () => { data?.counters?.map(({ id, title, value, units, description }, index) => { let unitsStr = ''; - if (UNITS_WITHOUT_SPACE.includes(units)) { + if (units && UNITS_WITHOUT_SPACE.includes(units)) { unitsStr = units; } else if (units) { unitsStr = ' ' + units; diff --git a/ui/stats/StatsDropdownMenu.tsx b/ui/stats/StatsDropdownMenu.tsx index a86886373a..203e3c79f0 100644 --- a/ui/stats/StatsDropdownMenu.tsx +++ b/ui/stats/StatsDropdownMenu.tsx @@ -1,6 +1,7 @@ -import { Box, Button, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react'; +import { Box, Button, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, chakra } from '@chakra-ui/react'; import React, { useCallback } from 'react'; +import Menu from 'ui/shared/chakra/Menu'; import IconSvg from 'ui/shared/IconSvg'; type Props = { diff --git a/ui/stats/StatsFilters.tsx b/ui/stats/StatsFilters.tsx index df96c3ac35..09891555e4 100644 --- a/ui/stats/StatsFilters.tsx +++ b/ui/stats/StatsFilters.tsx @@ -1,7 +1,7 @@ import { Grid, GridItem, Skeleton } from '@chakra-ui/react'; import React from 'react'; -import type { StatsChartsSection } from 'types/api/stats'; +import type * as stats from '@blockscout/stats-types'; import type { StatsInterval, StatsIntervalIds } from 'types/client/stats'; import FilterInput from 'ui/shared/filters/FilterInput'; @@ -15,7 +15,7 @@ const intervalList = Object.keys(STATS_INTERVALS).map((id: string) => ({ })) as Array; type Props = { - sections?: Array; + sections?: Array; currentSection: string; onSectionChange: (newSection: string) => void; interval: StatsIntervalIds; diff --git a/ui/stats/useStats.tsx b/ui/stats/useStats.tsx index 96117b9622..f4a15dc110 100644 --- a/ui/stats/useStats.tsx +++ b/ui/stats/useStats.tsx @@ -1,18 +1,18 @@ import { useRouter } from 'next/router'; import React, { useCallback, useMemo, useState } from 'react'; -import type { StatsChartInfo, StatsChartsSection } from 'types/api/stats'; +import type * as stats from '@blockscout/stats-types'; import type { StatsIntervalIds } from 'types/client/stats'; import useApiQuery from 'lib/api/useApiQuery'; import getQueryParamString from 'lib/router/getQueryParamString'; import { STATS_CHARTS } from 'stubs/stats'; -function isSectionMatches(section: StatsChartsSection, currentSection: string): boolean { +function isSectionMatches(section: stats.LineChartSection, currentSection: string): boolean { return currentSection === 'all' || section.id === currentSection; } -function isChartNameMatches(q: string, chart: StatsChartInfo) { +function isChartNameMatches(q: string, chart: stats.LineChartInfo) { return chart.title.toLowerCase().includes(q.toLowerCase()); } diff --git a/ui/token/TokenProjectInfo.tsx b/ui/token/TokenProjectInfo.tsx index 33ba9a0868..a2e20f1aa1 100644 --- a/ui/token/TokenProjectInfo.tsx +++ b/ui/token/TokenProjectInfo.tsx @@ -1,5 +1,5 @@ import { - Popover, PopoverTrigger, PopoverContent, PopoverBody, + PopoverTrigger, PopoverContent, PopoverBody, Modal, ModalContent, ModalCloseButton, useDisclosure, } from '@chakra-ui/react'; @@ -8,6 +8,7 @@ import React from 'react'; import type { TokenVerifiedInfo } from 'types/api/token'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Popover from 'ui/shared/chakra/Popover'; import Content, { hasContent } from './TokenProjectInfo/Content'; import TriggerButton from './TokenProjectInfo/TriggerButton'; diff --git a/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx b/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx index 5a8af64044..255ed645c4 100644 --- a/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx +++ b/ui/tokenInstance/TokenInstanceMetadataFetcher.tsx @@ -1,4 +1,5 @@ -import { chakra, Alert, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react'; +import type { ToastId } from '@chakra-ui/react'; +import { chakra, Alert, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Spinner } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; import ReCaptcha from 'react-google-recaptcha'; @@ -9,7 +10,7 @@ import type { TokenInstance } from 'types/api/token'; import config from 'configs/app'; import useApiFetch from 'lib/api/useApiFetch'; import { getResourceKey } from 'lib/api/useApiQuery'; -import { MINUTE } from 'lib/consts'; +import { MINUTE, SECOND } from 'lib/consts'; import useToast from 'lib/hooks/useToast'; import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketMessage from 'lib/socket/useSocketMessage'; @@ -23,6 +24,7 @@ interface Props { const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => { const timeoutId = React.useRef(); + const toastId = React.useRef(); const { status, setStatus } = useMetadataUpdateContext() || {}; const apiFetch = useApiFetch(); @@ -31,12 +33,12 @@ const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => { const handleRefreshError = React.useCallback(() => { setStatus?.('ERROR'); - toast.closeAll(); - toast({ + toastId.current && toast.update(toastId.current, { title: 'Error', description: 'The refreshing process has failed. Please try again.', status: 'warning', - variant: 'subtle', + duration: 5 * SECOND, + isClosable: true, }); }, [ setStatus, toast ]); @@ -49,13 +51,15 @@ const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => { }, }) .then(() => { - toast({ + setStatus?.('WAITING_FOR_RESPONSE'); + toastId.current = toast({ title: 'Please wait', description: 'Refetching metadata request sent', + icon: , status: 'warning', - variant: 'subtle', + duration: null, + isClosable: false, }); - setStatus?.('WAITING_FOR_RESPONSE'); timeoutId.current = window.setTimeout(handleRefreshError, 2 * MINUTE); }) .catch(() => { @@ -63,7 +67,6 @@ const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => { title: 'Error', description: 'Unable to initialize metadata update', status: 'warning', - variant: 'subtle', }); setStatus?.('ERROR'); }); @@ -112,12 +115,12 @@ const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => { }; }); - toast.closeAll(); - toast({ + toastId.current && toast.update(toastId.current, { title: 'Success!', description: 'Metadata has been refreshed', status: 'success', - variant: 'subtle', + duration: 5 * SECOND, + isClosable: true, }); setStatus?.('SUCCESS'); @@ -138,6 +141,15 @@ const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => { handler: handleSocketMessage, }); + React.useEffect(() => { + return () => { + timeoutId.current && window.clearTimeout(timeoutId.current); + toastId.current && toast.close(toastId.current); + }; + // run only on mount/unmount + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png index a31dbebd2c..a8a6fdafee 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-base-view-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png index 91eedcd8d6..4ee85dee71 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_action-button-without-marketplaces-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index ccb61ac8df..6af2a64dc6 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png index 7123795f37..b9811c5af1 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-base-view-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png index 02bf7da279..dc04704a27 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_action-button-without-marketplaces-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png index f8471f2c50..d2a32ccc87 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_default_base-view-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png index 0f702d30d6..6348d58062 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-base-view-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png index daf3e00274..bf0ce7246a 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_action-button-without-marketplaces-dark-mode-mobile-1.png differ diff --git a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png index 56d539fa02..e6b04e5496 100644 Binary files a/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/tokenInstance/__screenshots__/TokenInstanceDetails.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx index 2c3234dc40..837433d5ad 100644 --- a/ui/tokens/TokensTableItem.tsx +++ b/ui/tokens/TokensTableItem.tsx @@ -49,6 +49,7 @@ const TokensTableItem = ({ is_contract: true, is_verified: false, ens_domain_name: null, + implementations: null, }; return ( diff --git a/ui/tx/TxAssetFlows.tsx b/ui/tx/TxAssetFlows.tsx index 931332151b..6d4c757cf9 100644 --- a/ui/tx/TxAssetFlows.tsx +++ b/ui/tx/TxAssetFlows.tsx @@ -1,5 +1,5 @@ import { Table, Tbody, Tr, Th, Box, Skeleton, Text, Show, Hide } from '@chakra-ui/react'; -import _ from 'lodash'; +import _chunk from 'lodash/chunk'; import React, { useMemo, useState } from 'react'; import type { PaginationParams } from 'ui/shared/pagination/types'; @@ -33,7 +33,7 @@ export default function TxAssetFlows(props: FlowViewProps) { const [ page, setPage ] = useState(1); const ViewData = useMemo(() => (queryData ? generateFlowViewData(queryData) : []), [ queryData ]); - const chunkedViewData = _.chunk(ViewData, 50); + const chunkedViewData = _chunk(ViewData, 50); const paginationProps: PaginationParams = useMemo(() => ({ onNextPageClick: () => setPage(page + 1), diff --git a/ui/tx/TxDetailsWrapped.tsx b/ui/tx/TxDetailsWrapped.tsx index d3246abd33..3c03673852 100644 --- a/ui/tx/TxDetailsWrapped.tsx +++ b/ui/tx/TxDetailsWrapped.tsx @@ -14,6 +14,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; import RawInputData from 'ui/shared/RawInputData'; +import TxFee from 'ui/shared/tx/TxFee'; import TxDetailsGasPrice from 'ui/tx/details/TxDetailsGasPrice'; import TxDetailsOther from 'ui/tx/details/TxDetailsOther'; @@ -80,11 +81,7 @@ const TxDetailsWrapped = ({ data }: Props) => { Transaction fee - + ) } diff --git a/ui/tx/assetFlows/components/NovesActionSnippet.tsx b/ui/tx/assetFlows/components/NovesActionSnippet.tsx index c1acc6b0db..44571bce40 100644 --- a/ui/tx/assetFlows/components/NovesActionSnippet.tsx +++ b/ui/tx/assetFlows/components/NovesActionSnippet.tsx @@ -1,8 +1,9 @@ -import { Box, Hide, Popover, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react'; +import { Box, Hide, PopoverArrow, PopoverContent, PopoverTrigger, Show, Skeleton, Text, useColorModeValue } from '@chakra-ui/react'; import type { FC } from 'react'; import React from 'react'; import { HEX_REGEXP } from 'lib/regexp'; +import Popover from 'ui/shared/chakra/Popover'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/tx/assetFlows/utils/generateFlowViewData.ts b/ui/tx/assetFlows/utils/generateFlowViewData.ts index 9564c574d8..e4adb0d348 100644 --- a/ui/tx/assetFlows/utils/generateFlowViewData.ts +++ b/ui/tx/assetFlows/utils/generateFlowViewData.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import _findIndex from 'lodash/findIndex'; import type { NovesNft, NovesResponseData, NovesSentReceived, NovesToken } from 'types/api/noves'; @@ -27,7 +27,7 @@ export function generateFlowViewData(data: NovesResponseData): Array item.action === 'paidGas'); + const paidGasIndex = _findIndex(txItems, (item) => item.action === 'paidGas'); if (paidGasIndex >= 0) { const element = txItems.splice(paidGasIndex, 1)[0]; element.to.name = 'Validators'; diff --git a/ui/tx/assetFlows/utils/getTokensData.ts b/ui/tx/assetFlows/utils/getTokensData.ts index 2b14c9231c..159dcca11a 100644 --- a/ui/tx/assetFlows/utils/getTokensData.ts +++ b/ui/tx/assetFlows/utils/getTokensData.ts @@ -1,4 +1,6 @@ -import _ from 'lodash'; +import _groupBy from 'lodash/groupBy'; +import _keysIn from 'lodash/keysIn'; +import _mapValues from 'lodash/mapValues'; import type { NovesResponseData } from 'types/api/noves'; import type { TokenInfo } from 'types/api/token'; @@ -47,28 +49,28 @@ export function getTokensData(data: NovesResponseData): TokensData { }); // Group tokens by property into arrays - const tokensGroupByname = _.groupBy(tokens, 'name'); - const tokensGroupBySymbol = _.groupBy(tokens, 'symbol'); - const tokensGroupById = _.groupBy(tokens, 'id'); + const tokensGroupByname = _groupBy(tokens, 'name'); + const tokensGroupBySymbol = _groupBy(tokens, 'symbol'); + const tokensGroupById = _groupBy(tokens, 'id'); // Map properties to an object and remove duplicates - const mappedNames = _.mapValues(tokensGroupByname, (i) => { + const mappedNames = _mapValues(tokensGroupByname, (i) => { return i[0]; }); - const mappedSymbols = _.mapValues(tokensGroupBySymbol, (i) => { + const mappedSymbols = _mapValues(tokensGroupBySymbol, (i) => { return i[0]; }); - const mappedIds = _.mapValues(tokensGroupById, (i) => { + const mappedIds = _mapValues(tokensGroupById, (i) => { return i[0]; }); const filters = [ 'undefined', 'null' ]; // Array of keys to match in string - const nameList = _.keysIn(mappedNames).filter(i => !filters.includes(i)); - const symbolList = _.keysIn(mappedSymbols).filter(i => !filters.includes(i)); - const idList = _.keysIn(mappedIds).filter(i => !filters.includes(i)); + const nameList = _keysIn(mappedNames).filter(i => !filters.includes(i)); + const symbolList = _keysIn(mappedSymbols).filter(i => !filters.includes(i)); + const idList = _keysIn(mappedIds).filter(i => !filters.includes(i)); return { nameList, diff --git a/ui/tx/details/TxDetailsGasPrice.tsx b/ui/tx/details/TxDetailsGasPrice.tsx index 168d66f5f9..16934da4fa 100644 --- a/ui/tx/details/TxDetailsGasPrice.tsx +++ b/ui/tx/details/TxDetailsGasPrice.tsx @@ -2,21 +2,47 @@ import { Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; +import type { TokenInfo } from 'types/api/token'; + import config from 'configs/app'; import { WEI, WEI_IN_GWEI } from 'lib/consts'; import { currencyUnits } from 'lib/units'; import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem'; +import TokenEntity from 'ui/shared/entities/token/TokenEntity'; interface Props { + gasToken?: TokenInfo<'ERC-20'> | null; gasPrice: string | null; isLoading?: boolean; } -const TxDetailsGasPrice = ({ gasPrice, isLoading }: Props) => { +const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => { if (config.UI.views.tx.hiddenFields?.gas_price || !gasPrice) { return null; } + const content = (() => { + if (gasToken) { + return ( + + { BigNumber(gasPrice).dividedBy(WEI).toFixed() } + + + ); + } + + return ( + <> + + { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether } + + + ({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) + + + ); + })(); + return ( <> { Gas price - - { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether } - - - ({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei }) - + { content } ); diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx index 8fc4ee992f..29f5093f09 100644 --- a/ui/tx/details/TxInfo.tsx +++ b/ui/tx/details/TxInfo.tsx @@ -46,7 +46,7 @@ import RawInputData from 'ui/shared/RawInputData'; import StatusTag from 'ui/shared/statusTag/StatusTag'; import TxStatus from 'ui/shared/statusTag/TxStatus'; import TextSeparator from 'ui/shared/TextSeparator'; -import TxFeeStability from 'ui/shared/tx/TxFeeStability'; +import TxFee from 'ui/shared/tx/TxFee'; import Utilization from 'ui/shared/Utilization/Utilization'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; import TxDetailsActions from 'ui/tx/details/txDetailsActions/TxDetailsActions'; @@ -555,17 +555,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { Transaction fee - { data.stability_fee ? ( - - ) : ( - - ) } + ) } @@ -606,7 +596,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ) } - + diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png index c2f7c33637..fb10cd958e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png index e15c26a210..cf347b6010 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png index ee51a601f2..4d29a4e252 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png index a5f37f7412..d63304b7d4 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png index e75752f423..66f5d4983e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png index 7ed852008c..208e4186de 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_pending-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png index 917e689718..f0ecff2ecc 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png index 4f527a4547..4588febec4 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png index 490ab92710..a8130b95f4 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png index fefb036bdf..5aab9524fd 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png index 5ee5da342a..2aa3d9836e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png index 6f667f401a..d8b3aae56e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png index 5f4d9b74db..c2929d7ef6 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png index 1e0d144621..ec2e5ef93e 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png index bc83496a76..65a37021f4 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png differ diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png index 19a6506fe4..8ba1553138 100644 Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png differ diff --git a/ui/txs/TxAdditionalInfo.tsx b/ui/txs/TxAdditionalInfo.tsx index 3acba5141f..32ce7a5eed 100644 --- a/ui/txs/TxAdditionalInfo.tsx +++ b/ui/txs/TxAdditionalInfo.tsx @@ -3,7 +3,6 @@ import { Modal, ModalContent, ModalCloseButton, - Popover, PopoverTrigger, PopoverContent, PopoverBody, @@ -14,6 +13,7 @@ import React from 'react'; import type { Transaction } from 'types/api/transaction'; import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton'; +import Popover from 'ui/shared/chakra/Popover'; import TxAdditionalInfoContainer from './TxAdditionalInfoContainer'; import TxAdditionalInfoContent from './TxAdditionalInfoContent'; diff --git a/ui/txs/TxAdditionalInfoContent.tsx b/ui/txs/TxAdditionalInfoContent.tsx index 26a1d4ee78..92b5d9fbfa 100644 --- a/ui/txs/TxAdditionalInfoContent.tsx +++ b/ui/txs/TxAdditionalInfoContent.tsx @@ -9,11 +9,10 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import getValueWithUnit from 'lib/getValueWithUnit'; import { currencyUnits } from 'lib/units'; -import CurrencyValue from 'ui/shared/CurrencyValue'; import BlobEntity from 'ui/shared/entities/blob/BlobEntity'; import LinkInternal from 'ui/shared/links/LinkInternal'; import TextSeparator from 'ui/shared/TextSeparator'; -import TxFeeStability from 'ui/shared/tx/TxFeeStability'; +import TxFee from 'ui/shared/tx/TxFee'; import Utilization from 'ui/shared/Utilization/Utilization'; const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => { @@ -60,20 +59,7 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => { { (tx.stability_fee !== undefined || tx.fee.value !== null) && ( <> Transaction fee - { tx.stability_fee ? ( - - ) : ( - - - - ) } + ) } diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index 25e17e1568..386d850b68 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -17,7 +17,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import TxStatus from 'ui/shared/statusTag/TxStatus'; -import TxFeeStability from 'ui/shared/tx/TxFeeStability'; +import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -111,14 +111,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI { (tx.stability_fee !== undefined || tx.fee.value !== null) && ( <> Fee - { tx.stability_fee ? ( - - ) : ( - - { getValueWithUnit(tx.fee.value || 0).toFormat() } - { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` } - - ) } + ) } diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx index d581056365..eb688d5cc6 100644 --- a/ui/txs/TxsTable.tsx +++ b/ui/txs/TxsTable.tsx @@ -43,6 +43,10 @@ const TxsTable = ({ }: Props) => { const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading); + const feeCurrency = config.UI.views.tx.hiddenFields?.fee_currency || config.chain.hasMultipleGasCurrencies ? + '' : + ' ' + currencyUnits.ether; + return ( @@ -68,7 +72,7 @@ const TxsTable = ({ { sorting === 'fee-asc' && } { sorting === 'fee-desc' && } - { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ currencyUnits.ether }` }` } + { `Fee${ feeCurrency }` } ) } diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx index 216003bfeb..6b75d88f09 100644 --- a/ui/txs/TxsTableItem.tsx +++ b/ui/txs/TxsTableItem.tsx @@ -17,7 +17,7 @@ import CurrencyValue from 'ui/shared/CurrencyValue'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxStatus from 'ui/shared/statusTag/TxStatus'; -import TxFeeStability from 'ui/shared/tx/TxFeeStability'; +import TxFee from 'ui/shared/tx/TxFee'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; @@ -109,12 +109,13 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( ) } diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png index da0dcb7bc2..ad5c2eb44a 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_dark-color-mode_regular-transaction-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png index 878f198c9b..8a926a5d85 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_blob-transaction-1.png differ diff --git a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png index e1a2be103b..b765ad177a 100644 Binary files a/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png and b/ui/txs/__screenshots__/TxAdditionalInfo.pw.tsx_default_regular-transaction-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png index b81038e105..b27cbf60ec 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png index 21e4bd1616..1e02a217a8 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png differ diff --git a/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png b/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png index 0c97211555..3bff4a152c 100644 Binary files a/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png and b/ui/txs/__screenshots__/TxsStats.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png b/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png index 4e6819c7ac..4990a34745 100644 Binary files a/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png and b/ui/txs/__screenshots__/TxsStats.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png index 45373138cc..25fd4b5116 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png index 3df5a6aac3..94b7cdb166 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png differ diff --git a/ui/txs/noves/useDescribeTxs.tsx b/ui/txs/noves/useDescribeTxs.tsx index d9081492cd..57bfe14cc2 100644 --- a/ui/txs/noves/useDescribeTxs.tsx +++ b/ui/txs/noves/useDescribeTxs.tsx @@ -1,5 +1,6 @@ import { useQuery } from '@tanstack/react-query'; -import _ from 'lodash'; +import _chunk from 'lodash/chunk'; +import _uniq from 'lodash/uniq'; import React from 'react'; import type { NovesDescribeTxsResponse } from 'types/api/noves'; @@ -15,8 +16,8 @@ const translateEnabled = feature.isEnabled && feature.provider === 'noves'; export default function useDescribeTxs(items: Array | undefined, viewAsAccountAddress: string | undefined, isPlaceholderData: boolean) { const apiFetch = useApiFetch(); - const txsHash = _.uniq(items?.map(i => i.hash)); - const txChunks = _.chunk(txsHash, 10); + const txsHash = _uniq(items?.map(i => i.hash)); + const txChunks = _chunk(txsHash, 10); const queryKey = { viewAsAccountAddress, diff --git a/yarn.lock b/yarn.lock index 2e79f65273..c21c0d2cbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1327,10 +1327,20 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@blockscout/bens-types@v1.3.0-beta": - version "1.3.0-beta" - resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.3.0-beta.tgz#791fa102a33b1add14188beffe7c879219825424" - integrity sha512-Gh4qYrj7bNo6fzPGsdtPDPqwboxv/4OWx9QyrblkKt4YSNAlyElIS9rcpGGJ9rVP3YyhflaCh52YOvtDcRXRLw== +"@blockscout/bens-types@1.3.4": + version "1.3.4" + resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.3.4.tgz#e75b863c6d065e7d6d5d01e1a1d64da8df261640" + integrity sha512-kKRa8jKu/CBLR3QbWpRXmtwIXiIwIPDrFeEPIYUQp5bg9uY+ActOyQERixo/9FE+BHZShWUDm+75FoaAmIGIOw== + +"@blockscout/stats-types@1.6.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@blockscout/stats-types/-/stats-types-1.6.0.tgz#cdb27ab3d3cb1eef7b8b069c39d4e09afda1aec9" + integrity sha512-MzItYOsLa3zgoFzRgFAgg7gynSXG0w/GqHzg5BGHcBPbPSp/g7A6mMtyIchI6TnZxxnCwziHHvzmJFXz11emUg== + +"@blockscout/visualizer-types@0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@blockscout/visualizer-types/-/visualizer-types-0.2.0.tgz#a8ef326d69e29417db124c78f868d68aca959ad1" + integrity sha512-gasqbEL89iH8YnH/TIEk0MBSG9SwhEJegY9tnQ1c/jFZOCYjiVkgNwm4oH0ncwCKoNX1GoKAregbkEUwDDw7FQ== "@braintree/sanitize-url@=6.0.4": version "6.0.4" @@ -2542,21 +2552,21 @@ dom-mutator "^0.6.0" "@grpc/grpc-js@^1.7.1": - version "1.9.9" - resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.9.9.tgz#ce3a05439b1c957ec64c2ecdc6f1e4f54e8af797" - integrity sha512-vQ1qwi/Kiyprt+uhb1+rHMpyk4CVRMTGNUGGPRGS7pLNfWkdCHrGEnT6T3/JyC2VZgoOX/X1KwdoU0WYQAeYcQ== + version "1.10.10" + resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.10.10.tgz#476d315feeb9dbb0f2d6560008c92688c30f13e0" + integrity sha512-HPa/K5NX6ahMoeBv15njAc/sfF4/jmiXLar9UlC2UfHFKZzsCVLc3wbe7+7qua7w9VPh2/L6EBxyAV7/E8Wftg== dependencies: - "@grpc/proto-loader" "^0.7.8" - "@types/node" ">=12.12.47" + "@grpc/proto-loader" "^0.7.13" + "@js-sdsl/ordered-map" "^4.4.2" -"@grpc/proto-loader@^0.7.8": - version "0.7.10" - resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.10.tgz#6bf26742b1b54d0a473067743da5d3189d06d720" - integrity sha512-CAqDfoaQ8ykFd9zqBDn4k6iWT9loLAlc2ETmDFS9JCD70gDcnA4L3AFEo2iV7KyAtAAHFW9ftq1Fz+Vsgq80RQ== +"@grpc/proto-loader@^0.7.13": + version "0.7.13" + resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.13.tgz#f6a44b2b7c9f7b609f5748c6eac2d420e37670cf" + integrity sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw== dependencies: lodash.camelcase "^4.3.0" long "^5.0.0" - protobufjs "^7.2.4" + protobufjs "^7.2.5" yargs "^17.7.2" "@hapi/b64@5.x.x": @@ -2935,6 +2945,11 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@js-sdsl/ordered-map@^4.4.2": + version "4.4.2" + resolved "https://registry.yarnpkg.com/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz#9299f82874bab9e4c7f9c48d865becbfe8d6907c" + integrity sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw== + "@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0": version "1.1.1" resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9" @@ -6207,7 +6222,7 @@ dependencies: undici-types "~5.26.4" -"@types/node@>=12.12.47", "@types/node@>=13.7.0": +"@types/node@>=13.7.0": version "20.9.0" resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.0.tgz#bfcdc230583aeb891cf51e73cfdaacdd8deae298" integrity sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw== @@ -8595,10 +8610,10 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== -dappscout-iframe@0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.2.1.tgz#b4718515ee4f00022af3912fac6ca1a321c156f9" - integrity sha512-EsiAAEk2I6hN+/E8o45WUn4BFd7aN8UvBwsIcOH79WOly0GOOHkPEO/puPkBCV0EcdxBsZIfssx3X0fSWVz5Bw== +dappscout-iframe@0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/dappscout-iframe/-/dappscout-iframe-0.2.2.tgz#de3df6abccad68a27c9304300b92d86ec0ab1c59" + integrity sha512-ASOimgBRG61pSYQLdYGWePdiO3IsfTEgWZ6CHpZ4XQjJRmj1+WiWF56vFTeLIo5aucp+2+6oRCJ8KgKHGVDj0A== dependencies: react "^18.2.0" react-dom "^18.2.0" @@ -10439,10 +10454,9 @@ graceful-fs@^4.2.4, graceful-fs@^4.2.9: resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== -gradient-avatar@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/gradient-avatar/-/gradient-avatar-1.0.2.tgz#42bb408e402b1f21aafba3878858721055515224" - integrity sha512-Od9KI2YImV60wnsvU/u6GEyBm2fiHUUHgiLySE243GYl/T/tiJMJ5QYey8o7tepugmlnUGQRaCItHv19UnUjUg== +"gradient-avatar@git+https://github.com/blockscout/gradient-avatar.git": + version "1.0.3" + resolved "git+https://github.com/blockscout/gradient-avatar.git#86810368c2581d2dc3aca089dc648336c8e17045" dependencies: hsl-rgb "^1.0.0" hsl-triad "^1.0.0" @@ -13596,7 +13610,7 @@ property-information@^5.0.0: dependencies: xtend "^4.0.0" -protobufjs@^7.2.3, protobufjs@^7.2.4: +protobufjs@^7.2.3: version "7.2.5" resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.5.tgz#45d5c57387a6d29a17aab6846dcc283f9b8e7f2d" integrity sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A== @@ -13614,6 +13628,24 @@ protobufjs@^7.2.3, protobufjs@^7.2.4: "@types/node" ">=13.7.0" long "^5.0.0" +protobufjs@^7.2.5: + version "7.3.2" + resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.3.2.tgz#60f3b7624968868f6f739430cfbc8c9370e26df4" + integrity sha512-RXyHaACeqXeqAKGLDl68rQKbmObRsTIn4TYVUUug1KfS47YWCo5MacGITEryugIgZqORCvJWEk4l449POg5Txg== + dependencies: + "@protobufjs/aspromise" "^1.1.2" + "@protobufjs/base64" "^1.1.2" + "@protobufjs/codegen" "^2.0.4" + "@protobufjs/eventemitter" "^1.1.0" + "@protobufjs/fetch" "^1.1.0" + "@protobufjs/float" "^1.0.2" + "@protobufjs/inquire" "^1.1.0" + "@protobufjs/path" "^1.1.2" + "@protobufjs/pool" "^1.1.0" + "@protobufjs/utf8" "^1.1.0" + "@types/node" ">=13.7.0" + long "^5.0.0" + proxy-compare@2.5.1: version "2.5.1" resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.1.tgz#17818e33d1653fbac8c2ec31406bce8a2966f600" @@ -15937,9 +15969,9 @@ vite-tsconfig-paths@^3.5.2: tsconfig-paths "^4.0.0" vite@^4.4.12: - version "4.5.2" - resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82" - integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w== + version "4.5.3" + resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.3.tgz#d88a4529ea58bae97294c7e2e6f0eab39a50fb1a" + integrity sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg== dependencies: esbuild "^0.18.10" postcss "^8.4.27" @@ -16210,14 +16242,14 @@ ws@8.13.0: integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== ws@^7.3.1, ws@^7.5.1: - version "7.5.9" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591" - integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q== + version "7.5.10" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9" + integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ== ws@^8.17.1, ws@^8.9.0: - version "8.17.1" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b" - integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ== + version "8.18.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc" + integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw== ws@~8.11.0: version "8.11.0"
- { /* eslint-disable-next-line no-nested-ternary */ } - { tx.stability_fee ? ( - - ) : ( - tx.fee.value ? : '-' - ) } +