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/values.yaml.gotmpl b/deploy/values/review/values.yaml.gotmpl index cdbc229afc..ef5a6388c2 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 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/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/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/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/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 599ac0e3e8..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 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/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/package.json b/package.json index 6a7f5be039..f8100f201e 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "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/public/icons/name.d.ts b/public/icons/name.d.ts index 56d14b31f4..2e73c2878f 100644 --- a/public/icons/name.d.ts +++ b/public/icons/name.d.ts @@ -31,6 +31,7 @@ | "clock" | "coins/bitcoin" | "collection" + | "contracts/proxy" | "contracts/regular_many" | "contracts/regular" | "contracts/verified_many" 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/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/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/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__/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__/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_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/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={ } /> { 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..d660d5fc2a 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,9 @@ const Stats = () => { isLoading={ isLoading } name="info" boxSize={ 5 } - display="block" + flexShrink={ 0 } cursor="pointer" _hover={{ color: 'link_hovered' }} - position="absolute" - top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }} - right="10px" /> ) : null; @@ -88,80 +82,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 +164,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_mobile-default-view-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png index 03bd1d89f7..00cf7f9917 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__/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..17bfb9c462 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..d6140be4ba 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..41114ac7e8 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..cca11456c6 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 3f1f3f86bf..6923aded37 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,8 +50,8 @@ const ChainIndicatorItem = ({ id, title, value, valueDiff, icon, isSelected, onC const diffColor = diff >= 0 ? 'green.500' : 'red.500'; return ( - - + + { diff >= 0 ? '+' : '-' } { 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..167d8b991a 100644 --- a/ui/home/indicators/ChainIndicators.pw.tsx +++ b/ui/home/indicators/ChainIndicators.pw.tsx @@ -22,7 +22,7 @@ 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.hover('.ChartOverlay', { position: { x: 50, y: 50 } }); }); test('+@mobile', async() => { diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx index 16d3dae5e5..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) } ); @@ -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 ca88f0f3d5..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'; 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/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/__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/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 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/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..8b2bb62a92 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..0ed21bda05 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__/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..fab230bc56 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..0235d78c9d 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..91a3be0732 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..2ef69dc940 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_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__/Token.pw.tsx_default_with-verified-info-1.png b/ui/pages/__screenshots__/Token.pw.tsx_default_with-verified-info-1.png index 1c8ac04124..f533585eeb 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__/UserOp.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png index c18668e77b..44bac0364a 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..a87dfa56c8 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..a52b8786e2 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..1b32a235ca 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/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/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/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/__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 100% rename from ui/shared/Toast.tsx rename to ui/shared/chakra/Toast.tsx diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx index 9680816bc7..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'; diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png index 352f445cd7..a96f29fff0 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_dark-color-mode_base-view-dark-mode-2.png differ diff --git a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png index 83d2fa2285..02cd055ba5 100644 Binary files a/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png and b/ui/shared/chart/__screenshots__/ChartWidget.pw.tsx_default_base-view-dark-mode-2.png differ diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx index 30103f9af5..1030f28dbf 100644 --- a/ui/shared/entities/address/AddressEntity.pw.tsx +++ b/ui/shared/entities/address/AddressEntity.pw.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import * as addressMock from 'mocks/address/address'; +import * as implementationsMock from 'mocks/address/implementations'; import { test, expect } from 'playwright/lib'; import AddressEntity from './AddressEntity'; @@ -30,7 +31,7 @@ test.describe('contract', () => { test('unverified', async({ render, page }) => { const component = await render( , ); @@ -41,7 +42,7 @@ test.describe('contract', () => { test('verified', async({ render }) => { const component = await render( , ); @@ -49,6 +50,58 @@ test.describe('contract', () => { }); }); +test.describe('proxy contract', () => { + test.use({ viewport: { width: 500, height: 300 } }); + + test('with implementation name', async({ render, page }) => { + const component = await render( + , + ); + + await component.getByText(/home/i).hover(); + await expect(page.getByText('Proxy contract')).toBeVisible(); + await expect(page).toHaveScreenshot(); + }); + + test('without implementation name', async({ render, page }) => { + const component = await render( + , + ); + + await component.getByText(/eternal/i).hover(); + await expect(page.getByText('Proxy contract')).toBeVisible(); + await expect(page).toHaveScreenshot(); + }); + + test('without any name', async({ render, page }) => { + const component = await render( + , + ); + + await component.getByText(addressMock.contract.hash.slice(0, 4)).hover(); + await expect(page.getByText('Proxy contract')).toBeVisible(); + await expect(page).toHaveScreenshot(); + }); + + test('with multiple implementations', async({ render, page }) => { + const component = await render( + , + ); + + await component.getByText(/eternal/i).hover(); + await expect(page.getByText('Proxy contract')).toBeVisible(); + await expect(page).toHaveScreenshot(); + }); +}); + test.describe('loading', () => { test('without alias', async({ render }) => { const component = await render( diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx index 88e30e4a03..1519571bb8 100644 --- a/ui/shared/entities/address/AddressEntity.tsx +++ b/ui/shared/entities/address/AddressEntity.tsx @@ -11,6 +11,7 @@ import { useAddressHighlightContext } from 'lib/contexts/addressHighlight'; import * as EntityBase from 'ui/shared/entities/base/components'; import { getIconProps } from '../base/utils'; +import AddressEntityContentProxy from './AddressEntityContentProxy'; import AddressIdenticon from './AddressIdenticon'; type LinkProps = EntityBase.LinkBaseProps & Pick; @@ -57,27 +58,18 @@ const Icon = (props: IconProps) => { ); } - if (props.address.is_verified) { - return ( - - - - - - ); - } + const isProxy = Boolean(props.address.implementations?.length); + const isVerified = isProxy ? props.address.is_verified && props.address.implementations?.every(({ name }) => Boolean(name)) : props.address.is_verified; + const contractIconName: EntityBase.IconBaseProps['name'] = props.address.is_verified ? 'contracts/verified' : 'contracts/regular'; + const label = (isVerified ? 'verified ' : '') + (isProxy ? 'proxy contract' : 'contract'); return ( - + @@ -95,12 +87,18 @@ const Icon = (props: IconProps) => { ); }; -type ContentProps = Omit & Pick; +export type ContentProps = Omit & Pick; const Content = chakra((props: ContentProps) => { const nameTag = props.address.metadata?.tags.find(tag => tag.tagType === 'name')?.name; const nameText = nameTag || props.address.ens_domain_name || props.address.name; + const isProxy = props.address.implementations && props.address.implementations.length > 0; + + if (isProxy) { + return ; + } + if (nameText) { const label = ( @@ -140,15 +138,18 @@ const Copy = (props: CopyProps) => { const Container = EntityBase.Container; export interface EntityProps extends EntityBase.EntityBaseProps { - address: Pick; + address: Pick; isSafeAddress?: boolean; + noHighlight?: boolean; } const AddressEntry = (props: EntityProps) => { const linkProps = _omit(props, [ 'className' ]); const partsProps = _omit(props, [ 'className', 'onClick' ]); - const context = useAddressHighlightContext(); + const context = useAddressHighlightContext(props.noHighlight); return ( { + const bgColor = useColorModeValue('gray.700', 'gray.900'); + + const implementations = props.address.implementations; + + const handleClick = React.useCallback((event: React.MouseEvent) => { + event.stopPropagation(); + }, []); + + if (!implementations || implementations.length === 0) { + return null; + } + + const colNum = Math.min(implementations.length, 3); + const implementationName = implementations.length === 1 && implementations[0].name ? implementations[0].name : undefined; + + return ( + + + + + + + + + + + + + Proxy contract + { props.address.name ? ` (${ props.address.name })` : '' } + + + + Implementation{ implementations.length > 1 ? 's' : '' } + { implementationName ? ` (${ implementationName })` : '' } + + + { implementations.map((item) => ( + + )) } + + + + + + + ); +}; + +export default React.memo(AddressEntityContentProxy); diff --git a/ui/shared/entities/address/AddressIdenticon.tsx b/ui/shared/entities/address/AddressIdenticon.tsx index a08fa5a4a9..3de31738fb 100644 --- a/ui/shared/entities/address/AddressIdenticon.tsx +++ b/ui/shared/entities/address/AddressIdenticon.tsx @@ -54,7 +54,7 @@ const Icon = dynamic( // eslint-disable-next-line react/display-name return (props: IconProps) => { - const svg = GradientAvatar(props.hash, props.size); + const svg = GradientAvatar(props.hash, props.size, 'circle'); return
; }; } diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png new file mode 100644 index 0000000000..e5eee1c270 Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-implementation-name-1.png differ diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png new file mode 100644 index 0000000000..0b4b672cf7 Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-with-multiple-implementations-1.png differ diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png new file mode 100644 index 0000000000..e4b4af7bbd Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-any-name-1.png differ diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png new file mode 100644 index 0000000000..cb310563fe Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_proxy-contract-without-implementation-name-1.png differ diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx index 5d43e8b3c4..f86ec7a798 100644 --- a/ui/shared/entities/base/components.tsx +++ b/ui/shared/entities/base/components.tsx @@ -142,6 +142,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna tailLength={ tailLength } /> ); + case 'tail': case 'none': return { text }; } @@ -153,6 +154,7 @@ const Content = chakra(({ className, isLoading, asProp, text, truncation = 'dyna isLoaded={ !isLoading } overflow="hidden" whiteSpace="nowrap" + textOverflow={ truncation === 'tail' ? 'ellipsis' : undefined } > { children } diff --git a/ui/shared/entities/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx index d6efd6689e..f058eac915 100644 --- a/ui/shared/entities/ens/EnsEntity.tsx +++ b/ui/shared/entities/ens/EnsEntity.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, Flex, Image, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react'; +import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react'; import _omit from 'lodash/omit'; import React from 'react'; @@ -6,6 +6,7 @@ import type * as bens from '@blockscout/bens-types'; import { route } from 'nextjs-routes'; +import Popover from 'ui/shared/chakra/Popover'; import * as EntityBase from 'ui/shared/entities/base/components'; import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png index daff6ae33b..6cd4eaab03 100644 Binary files a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-protocol-info-1.png differ diff --git a/ui/shared/filters/PopoverFilter.tsx b/ui/shared/filters/PopoverFilter.tsx index b9e34cb474..f8fb20d9f0 100644 --- a/ui/shared/filters/PopoverFilter.tsx +++ b/ui/shared/filters/PopoverFilter.tsx @@ -1,6 +1,5 @@ import type { PopoverContentProps } from '@chakra-ui/react'; import { - Popover, PopoverTrigger, PopoverContent, PopoverBody, @@ -8,6 +7,7 @@ import { } from '@chakra-ui/react'; import React from 'react'; +import Popover from 'ui/shared/chakra/Popover'; import FilterButton from 'ui/shared/filters/FilterButton'; interface Props { diff --git a/ui/shared/filters/PopoverFilterRadio.tsx b/ui/shared/filters/PopoverFilterRadio.tsx index 272d4f67b0..e29734f9b3 100644 --- a/ui/shared/filters/PopoverFilterRadio.tsx +++ b/ui/shared/filters/PopoverFilterRadio.tsx @@ -1,5 +1,4 @@ import { - Popover, PopoverTrigger, PopoverContent, PopoverBody, @@ -11,6 +10,7 @@ import { } from '@chakra-ui/react'; import React from 'react'; +import Popover from 'ui/shared/chakra/Popover'; import FilterButton from 'ui/shared/filters/FilterButton'; import IconSvg from 'ui/shared/IconSvg'; diff --git a/ui/shared/gas/GasInfoTooltip.tsx b/ui/shared/gas/GasInfoTooltip.tsx index 62dc360246..4c81e45776 100644 --- a/ui/shared/gas/GasInfoTooltip.tsx +++ b/ui/shared/gas/GasInfoTooltip.tsx @@ -5,7 +5,6 @@ import { DarkMode, Flex, Grid, - Popover, PopoverBody, PopoverContent, PopoverTrigger, @@ -20,6 +19,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; +import Popover from 'ui/shared/chakra/Popover'; import LinkInternal from 'ui/shared/links/LinkInternal'; import GasInfoTooltipRow from './GasInfoTooltipRow'; @@ -33,7 +33,6 @@ interface Props { placement?: PlacementWithLogical; } -const POPOVER_OFFSET: [ number, number ] = [ 0, 10 ]; const feature = config.features.gasTracker; const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => { @@ -50,7 +49,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr 3 : 2; return ( - + { children } diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png index c4de80cfcd..abb0354447 100644 Binary files a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_all-data-1.png differ diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png index d782d3d9a8..1eb056113f 100644 Binary files a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_no-data-1.png differ diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png index 7b03e0210b..30ecec37f2 100644 Binary files a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-with-data-1.png differ diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png index 9e4361ded1..c7ad977bd1 100644 Binary files a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_one-unit-without-data-1.png differ diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png index 7b03e0210b..30ecec37f2 100644 Binary files a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-primary-unit-price-1.png differ diff --git a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png index 82d8085a76..03510cac28 100644 Binary files a/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png and b/ui/shared/gas/__screenshots__/GasInfoTooltip.pw.tsx_default_without-secondary-unit-price-1.png differ diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png index 3eb4358cc1..03b0093cb1 100644 Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png index f435cfa436..066043bbd0 100644 Binary files a/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutError.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png index b699a0f182..bd28bfad6a 100644 Binary files a/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png and b/ui/shared/layout/__screenshots__/LayoutHome.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png b/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png index 212b0b3e89..8f18bab0d6 100644 Binary files a/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png and b/ui/shared/radioButtonGroup/__screenshots__/RadioButtonGroup.pw.tsx_default_radio-button-group-1.png differ diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts index d82ae991e1..9e3a75c6f0 100644 --- a/ui/shared/search/utils.ts +++ b/ui/shared/search/utils.ts @@ -34,7 +34,7 @@ if (config.features.dataAvailability.isEnabled) { } if (config.features.nameService.isEnabled) { - searchCategories.push({ id: 'domain', title: 'Names' }); + searchCategories.unshift({ id: 'domain', title: 'Names' }); } export const searchItemTitles: Record = { diff --git a/ui/shared/sort/Sort.tsx b/ui/shared/sort/Sort.tsx index abb2fe6f6a..76f22c9f86 100644 --- a/ui/shared/sort/Sort.tsx +++ b/ui/shared/sort/Sort.tsx @@ -1,5 +1,4 @@ import { - Popover, PopoverTrigger, PopoverContent, PopoverBody, @@ -10,6 +9,7 @@ import { import React from 'react'; import useIsMobile from 'lib/hooks/useIsMobile'; +import Popover from 'ui/shared/chakra/Popover'; import SortButtonDesktop from './ButtonDesktop'; import SortButtonMobile from './ButtonMobile'; diff --git a/ui/shared/stats/StatsWidget.tsx b/ui/shared/stats/StatsWidget.tsx index 077dd1c4e4..4ce3a00ace 100644 --- a/ui/shared/stats/StatsWidget.tsx +++ b/ui/shared/stats/StatsWidget.tsx @@ -5,20 +5,23 @@ import React from 'react'; import type { Route } from 'nextjs-routes'; import Hint from 'ui/shared/Hint'; +import IconSvg, { type IconName } from 'ui/shared/IconSvg'; import TruncatedValue from 'ui/shared/TruncatedValue'; type Props = { + className?: string; label: string; - value: string; + value: string | React.ReactNode; valuePrefix?: string; valuePostfix?: string; - hint?: string; + hint?: string | React.ReactNode; isLoading?: boolean; diff?: string | number; diffFormatted?: string; diffPeriod?: '24h'; period?: '1h' | '24h'; href?: Route; + icon?: IconName; } const Container = ({ href, children }: { href?: Route; children: JSX.Element }) => { @@ -33,31 +36,57 @@ const Container = ({ href, children }: { href?: Route; children: JSX.Element }) return children; }; -const StatsWidget = ({ label, value, valuePrefix, valuePostfix, isLoading, hint, diff, diffPeriod = '24h', diffFormatted, period, href }: Props) => { - const bgColor = useColorModeValue('blue.50', 'whiteAlpha.100'); +const StatsWidget = ({ + className, + icon, + label, + value, + valuePrefix, + valuePostfix, + isLoading, + hint, + diff, + diffPeriod = '24h', + diffFormatted, + period, + href, +}: Props) => { + const bgColor = useColorModeValue('gray.50', 'whiteAlpha.100'); const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50'); const hintColor = useColorModeValue('gray.600', 'gray.400'); return ( + { icon && ( + + ) } { label } @@ -66,30 +95,36 @@ const StatsWidget = ({ label, value, valuePrefix, valuePostfix, isLoading, hint, isLoaded={ !isLoading } display="flex" alignItems="baseline" - mt={ 1 } + fontWeight={ 500 } + fontSize="lg" + lineHeight={ 6 } > - { valuePrefix && { valuePrefix } } - - { valuePostfix && { valuePostfix } } + { valuePrefix && { valuePrefix } } + { typeof value === 'string' ? ( + + ) : ( + value + ) } + { valuePostfix && { valuePostfix } } { diff && Number(diff) > 0 && ( <> - + +{ diffFormatted || Number(diff).toLocaleString() } ({ diffPeriod }) ) } - { period && ({ period }) } + { period && ({ period }) } - { hint && ( + { typeof hint === 'string' ? ( - ) } + ) : hint } ); }; -export default StatsWidget; +export default chakra(StatsWidget); diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png index 72405549ae..2555a4d6b1 100644 Binary files a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_dark-color-mode_with-positive-diff-dark-mode-1.png differ diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png index 2e0a87888e..e1f7bd8279 100644 Binary files a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_loading-state-1.png differ diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png index ce20bc6d5c..67507360e2 100644 Binary files a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-negative-diff-1.png differ diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png index 0aedb396c2..24851e1932 100644 Binary files a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-period-only-1.png differ diff --git a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png index 11389c31ff..9a9259a948 100644 Binary files a/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png and b/ui/shared/stats/__screenshots__/StatsWidget.pw.tsx_default_with-positive-diff-dark-mode-1.png differ diff --git a/ui/shared/tx/TxFee.pw.tsx b/ui/shared/tx/TxFee.pw.tsx new file mode 100644 index 0000000000..8ccd98ade6 --- /dev/null +++ b/ui/shared/tx/TxFee.pw.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import * as txMock from 'mocks/txs/tx'; +import { test, expect } from 'playwright/lib'; + +import TxFee from './TxFee'; + +test.use({ viewport: { width: 300, height: 100 } }); + +test('base view', async({ render }) => { + const component = await render(); + await expect(component).toHaveScreenshot(); +}); + +test('no usd value', async({ render }) => { + const component = await render(); + await expect(component).toHaveScreenshot(); +}); + +test('celo gas token', async({ render, mockAssetResponse }) => { + await mockAssetResponse(txMock.celoTxn.celo?.gas_token?.icon_url as string, './playwright/mocks/image_svg.svg'); + const component = await render(); + await expect(component).toHaveScreenshot(); +}); + +test('stability token', async({ render, mockAssetResponse }) => { + await mockAssetResponse(txMock.stabilityTx.stability_fee?.token.icon_url as string, './playwright/mocks/image_svg.svg'); + const component = await render(); + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/shared/tx/TxFee.tsx b/ui/shared/tx/TxFee.tsx new file mode 100644 index 0000000000..01fa1eb240 --- /dev/null +++ b/ui/shared/tx/TxFee.tsx @@ -0,0 +1,77 @@ +import { chakra, Skeleton } from '@chakra-ui/react'; +import React from 'react'; + +import type { Transaction } from 'types/api/transaction'; + +import config from 'configs/app'; +import getCurrencyValue from 'lib/getCurrencyValue'; +import { currencyUnits } from 'lib/units'; +import CurrencyValue from 'ui/shared/CurrencyValue'; +import TokenEntity from 'ui/shared/entities/token/TokenEntity'; + +interface Props { + className?: string; + isLoading?: boolean; + tx: Transaction; + withCurrency?: boolean; + withUsd?: boolean; + accuracy?: number; + accuracyUsd?: number; +} + +const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency = true, withUsd }: Props) => { + + if (tx.celo?.gas_token) { + const token = tx.celo.gas_token; + const { valueStr, usd } = getCurrencyValue({ + value: tx.fee.value || '0', + exchangeRate: token.exchange_rate, + decimals: token.decimals, + accuracy, + accuracyUsd, + }); + return ( + + { valueStr } + + { usd && withUsd && (${ usd }) } + + ); + } + + if (tx.stability_fee) { + const token = tx.stability_fee.token; + const { valueStr, usd } = getCurrencyValue({ + value: tx.stability_fee.total_fee, + exchangeRate: token.exchange_rate, + decimals: token.decimals, + accuracy, + accuracyUsd, + }); + + return ( + + { valueStr } + { valueStr !== '0' && } + { usd && withUsd && (${ usd }) } + + ); + } + + const showCurrency = withCurrency && !config.UI.views.tx.hiddenFields?.fee_currency; + + return ( + + ); +}; + +export default React.memo(chakra(TxFee)); diff --git a/ui/shared/tx/TxFeeStability.tsx b/ui/shared/tx/TxFeeStability.tsx deleted file mode 100644 index d1c10c0d9a..0000000000 --- a/ui/shared/tx/TxFeeStability.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Skeleton, chakra } from '@chakra-ui/react'; -import React from 'react'; - -import type { Transaction } from 'types/api/transaction'; -import type { ExcludeUndefined } from 'types/utils'; - -import getCurrencyValue from 'lib/getCurrencyValue'; -import TokenEntity from 'ui/shared/entities/token/TokenEntity'; - -interface Props { - data: ExcludeUndefined; - isLoading?: boolean; - hideUsd?: boolean; - accuracy?: number; - className?: string; -} - -const TxFeeStability = ({ data, isLoading, hideUsd, accuracy, className }: Props) => { - - const { valueStr, usd } = getCurrencyValue({ - value: data.total_fee, - exchangeRate: data.token.exchange_rate, - decimals: data.token.decimals, - accuracy, - }); - - return ( - - { valueStr } - { valueStr !== '0' && } - { usd && !hideUsd && (${ usd }) } - - ); -}; - -export default React.memo(chakra(TxFeeStability)); diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png new file mode 100644 index 0000000000..c96be42fd5 Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_base-view-1.png differ diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png new file mode 100644 index 0000000000..801e03bc5c Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_celo-gas-token-1.png differ diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png new file mode 100644 index 0000000000..5011b6a77e Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_no-usd-value-1.png differ diff --git a/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png new file mode 100644 index 0000000000..fcea676ba9 Binary files /dev/null and b/ui/shared/tx/__screenshots__/TxFee.pw.tsx_default_stability-token-1.png differ diff --git a/ui/snippets/footer/IntTxsIndexingStatus.tsx b/ui/snippets/footer/IntTxsIndexingStatus.tsx index fbf533f968..6e3e9350db 100644 --- a/ui/snippets/footer/IntTxsIndexingStatus.tsx +++ b/ui/snippets/footer/IntTxsIndexingStatus.tsx @@ -1,4 +1,4 @@ -import { IconButton, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react'; +import { IconButton, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; @@ -9,6 +9,7 @@ import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery'; import { apos, nbsp, ndash } from 'lib/html-entities'; import useSocketChannel from 'lib/socket/useSocketChannel'; import useSocketMessage from 'lib/socket/useSocketMessage'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; const IntTxsIndexingStatus = () => { diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png index 8d8d5bfce8..d6cd8469a7 100644 Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png index 006518f89f..507ff76705 100644 Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/NavLinkGroup.tsx b/ui/snippets/navigation/horizontal/NavLinkGroup.tsx index 9d9a7f958b..41c626ca39 100644 --- a/ui/snippets/navigation/horizontal/NavLinkGroup.tsx +++ b/ui/snippets/navigation/horizontal/NavLinkGroup.tsx @@ -1,9 +1,10 @@ -import { HStack, Popover, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react'; +import { HStack, PopoverBody, PopoverContent, PopoverTrigger, chakra, StackDivider } from '@chakra-ui/react'; import React from 'react'; import type { NavGroupItem } from 'types/client/navigation'; import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import LightningLabel from '../LightningLabel'; @@ -27,6 +28,7 @@ const NavLinkGroup = ({ item }: Props) => { trigger="hover" placement="bottom-start" isLazy + gutter={ 8 } > { ({ isOpen }) => ( <> diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 759665da8d..12e86563d5 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png index 493345f19a..4f5b816408 100644 Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/snippets/navigation/vertical/NavLinkGroup.tsx b/ui/snippets/navigation/vertical/NavLinkGroup.tsx index ff86c3187c..8cacb65d80 100644 --- a/ui/snippets/navigation/vertical/NavLinkGroup.tsx +++ b/ui/snippets/navigation/vertical/NavLinkGroup.tsx @@ -3,7 +3,6 @@ import { HStack, Box, Link, - Popover, PopoverTrigger, PopoverContent, PopoverBody, @@ -13,6 +12,7 @@ import React from 'react'; import type { NavGroupItem } from 'types/client/navigation'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import LightningLabel from '../LightningLabel'; @@ -39,6 +39,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => { trigger="hover" placement="right-start" isLazy + gutter={ 8 } > { const menu = useNetworkMenu(); return ( - + { autoFocus={ false } onClose={ onClose } placement="bottom-start" - offset={ isMobile && !isHomepage ? [ 12, -4 ] : undefined } + offset={ isMobile && !isHomepage ? [ 12, -4 ] : [ 0, 8 ] } isLazy > diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx index 791b0eee78..179e5691be 100644 --- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx +++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx @@ -27,6 +27,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => { name: '', is_verified: data.is_smart_contract_verified, ens_domain_name: null, + implementations: null, }} /> ); diff --git a/ui/snippets/topBar/DeFiDropdown.tsx b/ui/snippets/topBar/DeFiDropdown.tsx index 1763266ead..01e4fff269 100644 --- a/ui/snippets/topBar/DeFiDropdown.tsx +++ b/ui/snippets/topBar/DeFiDropdown.tsx @@ -1,4 +1,4 @@ -import { Button, Box, Flex, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react'; +import { Button, Box, Flex, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, chakra } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -7,6 +7,7 @@ import { route } from 'nextjs-routes'; import config from 'configs/app'; import getPageType from 'lib/mixpanel/getPageType'; import * as mixpanel from 'lib/mixpanel/index'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import DeFiDropdownItem from './DeFiDropdownItem'; diff --git a/ui/snippets/topBar/NetworkMenu.tsx b/ui/snippets/topBar/NetworkMenu.tsx index 623bd66850..c56191457c 100644 --- a/ui/snippets/topBar/NetworkMenu.tsx +++ b/ui/snippets/topBar/NetworkMenu.tsx @@ -1,6 +1,7 @@ -import { IconButton, Popover, PopoverTrigger } from '@chakra-ui/react'; +import { IconButton, PopoverTrigger } from '@chakra-ui/react'; import React from 'react'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import NetworkMenuContentDesktop from 'ui/snippets/networkMenu/NetworkMenuContentDesktop'; import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu'; diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png index 609f521082..16498cc879 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png index cb54590161..45b34d445e 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-mobile-2.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png index b47950c581..288b05db3f 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_with-DeFi-dropdown-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png index 60213e0cbf..3bebad9789 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png index 48f332a420..7b545b0cc3 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-mobile-2.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png index ec77bbeca1..58ae563947 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-DeFi-dropdown-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png index 91e107e7ee..04f5871745 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_with-horizontal-nav-bar-layout-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png index 80db2277a5..d562c17512 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png index d0d647d35c..004fda31b0 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-dark-mode-mobile-2.png differ diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png index db4cf873ea..01e8ca023f 100644 Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_with-DeFi-dropdown-dark-mode-mobile-1.png differ diff --git a/ui/snippets/topBar/settings/Settings.tsx b/ui/snippets/topBar/settings/Settings.tsx index af23778f68..95b445ab47 100644 --- a/ui/snippets/topBar/settings/Settings.tsx +++ b/ui/snippets/topBar/settings/Settings.tsx @@ -1,6 +1,7 @@ -import { Box, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react'; +import { Box, IconButton, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react'; import React from 'react'; +import Popover from 'ui/shared/chakra/Popover'; import IconSvg from 'ui/shared/IconSvg'; import SettingsColorTheme from './SettingsColorTheme'; diff --git a/ui/snippets/walletMenu/WalletMenuDesktop.tsx b/ui/snippets/walletMenu/WalletMenuDesktop.tsx index 2beaf3c212..61d63bf872 100644 --- a/ui/snippets/walletMenu/WalletMenuDesktop.tsx +++ b/ui/snippets/walletMenu/WalletMenuDesktop.tsx @@ -1,11 +1,13 @@ import type { ButtonProps } from '@chakra-ui/react'; -import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, chakra, useColorModeValue } from '@chakra-ui/react'; +import { PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import { useMarketplaceContext } from 'lib/contexts/marketplace'; import useIsMobile from 'lib/hooks/useIsMobile'; import * as mixpanel from 'lib/mixpanel/index'; +import Popover from 'ui/shared/chakra/Popover'; import HashStringShorten from 'ui/shared/HashStringShorten'; +import IconSvg from 'ui/shared/IconSvg'; import useWallet from 'ui/snippets/walletMenu/useWallet'; import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent'; @@ -65,7 +67,6 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => { { onClick={ isWalletConnected ? openPopover : connect } fontSize="sm" size={ size } + px={{ lg: isHomePage ? 2 : 4, xl: 4 }} { ...buttonStyles } > { isWalletConnected ? ( @@ -94,7 +96,12 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => { - ) : 'Connect wallet' } + ) : ( + <> + + Connect wallet + + ) } 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/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/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/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..5edac86b4f 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..0c89156510 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..147d6bcdbe 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..798d6144c5 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..21055297f2 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_stability-customization-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png index 917e689718..94be55dc03 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..b394b73e1d 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..07c67dc431 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..abe6e6f5e7 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..3856f96cfb 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..648cc9a534 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..7a40b78096 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..1a9e886c29 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..f99c800cf0 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..9f8399cf61 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__/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/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 fe7b49bf07..c21c0d2cbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2552,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": @@ -2945,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" @@ -6217,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== @@ -10449,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" @@ -13606,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== @@ -13624,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" @@ -14856,7 +14878,16 @@ string-template@~0.2.1: resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add" integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw== -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -14984,7 +15015,14 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -15931,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" @@ -16144,7 +16182,7 @@ word-wrap@^1.2.5, word-wrap@~1.2.3: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -16162,6 +16200,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" @@ -16195,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 ? : '-' - ) } +