Skip to content

F
frontend
Commit ccfb4fae authored by tom's avatar tom
Browse files
Options

Highlighted address 

Fixes #1446
parents 528a2324 463f3860
Hide whitespace changes
Inline Side-by-side
Showing with 2895 additions and 295 deletions
.env.example
View file @ ccfb4fae
......@@ -4,5 +4,6 @@ NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
FAVICON_GENERATOR_API_KEY=xxx
\ No newline at end of file
.github/workflows/deploy-main.yml
View file @ ccfb4fae
......@@ -4,6 +4,7 @@ on:
push:
branches:
- main
workflow_dispatch:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
......
.github/workflows/publish-image.yml
View file @ ccfb4fae
......@@ -20,15 +20,15 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out the repo
uses: actions/checkout@v3
uses: actions/checkout@v4
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2
uses: docker/setup-buildx-action@v3
# Will automatically make nice tags, see the table here https://github.com/docker/metadata-action#basic
- name: Docker meta
id: meta
uses: docker/metadata-action@v4
uses: docker/metadata-action@v5
with:
images: ghcr.io/blockscout/frontend
......@@ -51,13 +51,16 @@ jobs:
echo "ref_name: $REF_NAME"
- name: Build and push
uses: docker/build-push-action@v3
uses: docker/build-push-action@v5
with:
context: .
file: ./Dockerfile
push: true
cache-from: type=gha
tags: ${{ inputs.tags || steps.meta.outputs.tags }}
platforms: |
linux/amd64
linux/arm64/v8
labels: ${{ steps.meta.outputs.labels }}
build-args: |
GIT_COMMIT_SHA=${{ env.SHORT_SHA }}
......
configs/app/app.ts
View file @ ccfb4fae
......@@ -9,7 +9,7 @@ const baseUrl = [
appHost,
appPort && ':' + appPort,
].filter(Boolean).join('');
const isDev = getEnvValue('NODE_ENV') === 'development';
const isDev = getEnvValue('NEXT_PUBLIC_APP_ENV') === 'development';
const app = Object.freeze({
isDev,
......
configs/app/features/growthBook.ts 0 → 100644
View file @ ccfb4fae
import type { Feature } from './types';
import { getEnvValue } from '../utils';
const clientKey = getEnvValue('NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY');
const title = 'GrowthBook feature flagging and A/B testing';
const config: Feature<{ clientKey: string }> = (() => {
if (clientKey) {
return Object.freeze({
title,
isEnabled: true,
clientKey,
});
}
return Object.freeze({
title,
isEnabled: false,
});
})();
export default config;
configs/app/features/index.ts
View file @ ccfb4fae
......@@ -8,8 +8,10 @@ export { default as blockchainInteraction } from './blockchainInteraction';
export { default as csvExport } from './csvExport';
export { default as googleAnalytics } from './googleAnalytics';
export { default as graphqlApiDocs } from './graphqlApiDocs';
export { default as growthBook } from './growthBook';
export { default as marketplace } from './marketplace';
export { default as mixpanel } from './mixpanel';
export { default as nameService } from './nameService';
export { default as restApiDocs } from './restApiDocs';
export { default as optimisticRollup } from './optimisticRollup';
export { default as safe } from './safe';
......
configs/app/features/nameService.ts 0 → 100644
View file @ ccfb4fae
import type { Feature } from './types';
import { getEnvValue } from '../utils';
const apiHost = getEnvValue('NEXT_PUBLIC_NAME_SERVICE_API_HOST');
const title = 'Name service integration';
const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
if (apiHost) {
return Object.freeze({
title,
isEnabled: true,
api: {
endpoint: apiHost,
basePath: '',
},
});
}
return Object.freeze({
title,
isEnabled: false,
});
})();
export default config;
configs/envs/.env.eth_goerli
View file @ ccfb4fae
......@@ -46,6 +46,7 @@ NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com
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_NAME_SERVICE_API_HOST=https://bens-rs-test.k8s-dev.blockscout.com
NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED='true'
......
deploy/tools/envs-validator/schema.ts
View file @ ccfb4fae
......@@ -425,6 +425,7 @@ const schema = yup
NEXT_PUBLIC_STATS_API_HOST: yup.string().test(urlTest),
NEXT_PUBLIC_VISUALIZE_API_HOST: yup.string().test(urlTest),
NEXT_PUBLIC_CONTRACT_INFO_API_HOST: yup.string().test(urlTest),
NEXT_PUBLIC_NAME_SERVICE_API_HOST: yup.string().test(urlTest),
NEXT_PUBLIC_GRAPHIQL_TRANSACTION: yup.string().matches(regexp.HEX_REGEXP),
NEXT_PUBLIC_WEB3_WALLETS: yup
.mixed()
......@@ -451,6 +452,7 @@ const schema = yup
NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: yup.string(),
NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: yup.string(),
NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: yup.string(),
NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: yup.string(),
// Misc
NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
......
deploy/values/main/values.yaml
View file @ ccfb4fae
......@@ -153,6 +153,7 @@ frontend:
NEXT_PUBLIC_VISUALIZE_API_HOST: http://visualizer-svc.visualizer-testing.svc.cluster.local/
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_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
NEXT_PUBLIC_NETWORK_RPC_URL: https://rpc.ankr.com/eth_goerli
NEXT_PUBLIC_HOMEPAGE_CHARTS: "['daily_txs','coin_price','market_cap']"
......
deploy/values/review/values.yaml.gotmpl
View file @ ccfb4fae
......@@ -56,6 +56,7 @@ frontend:
NEXT_PUBLIC_VISUALIZE_API_HOST: http://visualizer-svc.visualizer-testing.svc.cluster.local/
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_NAME_SERVICE_API_HOST: https://bens-rs-test.k8s-dev.blockscout.com
NEXT_PUBLIC_AUTH_URL: https://blockscout-main.k8s-dev.blockscout.com
NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM: https://airtable.com/shrqUAcjgGJ4jU88C
NEXT_PUBLIC_LOGOUT_URL: https://blockscoutcom.us.auth0.com/v2/logout
......@@ -72,9 +73,6 @@ frontend:
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'}]"
OTEL_SDK_ENABLED: true
OTEL_EXPORTER_OTLP_ENDPOINT: http://jaeger-collector.jaeger.svc.cluster.local:4318
NEXT_OTEL_VERBOSE: 1
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
SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI
......@@ -83,3 +81,5 @@ frontend:
NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY
NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
\ No newline at end of file
docs/ENVS.md
View file @ ccfb4fae
......@@ -38,6 +38,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
- [Export data to CSV file](ENVS.md#export-data-to-csv-file)
- [Google analytics](ENVS.md#google-analytics)
- [Mixpanel analytics](ENVS.md#mixpanel-analytics)
- [GrowthBook feature flagging and A/B testing](ENVS.md#growthbook-feature-flagging-and-ab-testing)
- [GraphQL API documentation](ENVS.md#graphql-api-documentation)
- [REST API documentation](ENVS.md#rest-api-documentation)
- [Marketplace](ENVS.md#marketplace)
......@@ -46,6 +47,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
- [Web3 wallet integration](ENVS.md#web3-wallet-integration-add-token-or-network-to-the-wallet) (add token or network to the wallet)
- [Transaction interpretation](ENVS.md#transaction-interpretation)
- [Verified tokens info](ENVS.md#verified-tokens-info)
- [Name service integration](ENVS.md#name-service-integration)
- [Bridged tokens](ENVS.md#bridged-tokens)
- [Safe{Core} address tags](ENVS.md#safecore-address-tags)
- [SUAVE chain](ENVS.md#suave-chain)
......@@ -386,6 +388,14 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
&nbsp;
### GrowthBook feature flagging and A/B testing
| Variable | Type| Description | Compulsoriness | Default value | Example value |
| --- | --- | --- | --- | --- | --- |
| NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY | `string` | Client SDK key for [GrowthBook](https://www.growthbook.io/) service | true | - | `<your-secret>` |
&nbsp;
### GraphQL API documentation
This feature is **always enabled**, but you can configure its behavior by passing the following variables.
......@@ -490,6 +500,16 @@ This feature is **enabled by default** with the `['metamask']` value. To switch
&nbsp;
### Name service integration
This feature allows resolving blockchain addresses using human-readable domain names.
| Variable | Type| Description | Compulsoriness | Default value | Example value |
| --- | --- | --- | --- | --- | --- |
| NEXT_PUBLIC_NAME_SERVICE_API_HOST | `string` | Name Service API endpoint url | Required | - | `https://bens.services.blockscout.com` |
&nbsp;
### Bridged tokens
This feature allows users to view tokens that have been bridged from other EVM chains. Additional tab "Bridged" will be added to the tokens page and the link to original token will be displayed on the token page.
......
icons/ENS.svg 0 → 100644
View file @ ccfb4fae
<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.41 3 7.764 7.625c-.396.263-.72.62-.946 1.038a4.74 4.74 0 0 0-.046.1l-.009.019a4.786 4.786 0 0 0 .01 3.93c.233.508.828 1.51.828 1.51L14.41 3ZM4.076 16.404A15.45 15.45 0 0 1 4 14.886l1.168-3.159a6.617 6.617 0 0 0 .755 2.095C9.802 20.393 14.401 27 14.401 27l-7.35-5.108A7.562 7.562 0 0 1 4.25 17.57a7.53 7.53 0 0 1-.174-1.166ZM4 14.886l1.144-3.306a3.575 3.575 0 0 1 0-1.076c-.101.187-.298.57-.298.57a8.68 8.68 0 0 0-.794 2.534A15.45 15.45 0 0 0 4 14.886ZM15.192 27l.063-.103 6.734-11.113.005.009.007-.012s.589 1.002.827 1.51a4.787 4.787 0 0 1-.045 4.05c-.225.417-.55.774-.946 1.037L15.192 27Zm9.263-7.504c.054-.357.054-.72 0-1.076a6.622 6.622 0 0 0-.776-2.242C19.796 9.607 15.2 3 15.2 3l7.35 5.108a7.533 7.533 0 0 1 2.975 5.488c.091.93.098 1.865.02 2.796a8.68 8.68 0 0 1-.794 2.535s-.196.382-.297.57v-.001Z" fill="currentColor"/>
</svg>
icons/ENS_slim.svg 0 → 100644
View file @ ccfb4fae
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.145 8.091c.198.423.689 1.258.689 1.258L9.508 0 3.97 3.854c-.33.22-.6.517-.788.865a3.989 3.989 0 0 0-.037 3.372ZM.897 11.17a6.277 6.277 0 0 0 2.478 4.573L9.501 20S5.668 14.495 2.436 9.018a5.52 5.52 0 0 1-.65-1.868 2.98 2.98 0 0 1 0-.897 35.09 35.09 0 0 0-.247.475A7.234 7.234 0 0 0 .877 8.84a12.86 12.86 0 0 0 .02 2.33Zm15.626.739c-.198-.423-.689-1.258-.689-1.258L10.16 20l5.538-3.852c.33-.22.6-.516.788-.864a3.99 3.99 0 0 0 .037-3.375Zm2.249-3.079a6.279 6.279 0 0 0-2.48-4.573L10.168 0s3.83 5.505 7.065 10.982a5.52 5.52 0 0 1 .647 1.868c.045.297.045.6 0 .897.084-.156.248-.475.248-.475a7.223 7.223 0 0 0 .662-2.112c.065-.776.059-1.555-.017-2.33Z" fill="currentColor"/>
<path d="M3.182 4.719c.188-.348.458-.645.788-.865L9.508 0 3.834 9.351s-.496-.835-.69-1.257a3.989 3.989 0 0 1 .038-3.375Zm-2.285 6.45a6.278 6.278 0 0 0 2.478 4.574L9.501 20S5.668 14.495 2.436 9.018a5.52 5.52 0 0 1-.65-1.868 2.98 2.98 0 0 1 0-.897 34.31 34.31 0 0 0-.247.475A7.234 7.234 0 0 0 .877 8.84c-.064.776-.057 1.555.02 2.33Zm15.616.742c-.198-.422-.689-1.258-.689-1.258L10.16 20l5.538-3.852c.33-.22.6-.516.788-.864a3.99 3.99 0 0 0 .037-3.375l-.01.002Zm2.249-3.078a6.277 6.277 0 0 0-2.48-4.574L10.169 0s3.83 5.505 7.064 10.982a5.52 5.52 0 0 1 .647 1.868c.045.297.045.6 0 .897.084-.156.248-.475.248-.475a7.233 7.233 0 0 0 .662-2.112c.064-.776.059-1.555-.018-2.33l-.01.003Z" fill="currentColor" style="mix-blend-mode:color"/>
</svg>
jest/lib.tsx
View file @ ccfb4fae
import { ChakraProvider } from '@chakra-ui/react';
import { GrowthBookProvider } from '@growthbook/growthbook-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { RenderOptions } from '@testing-library/react';
import { render } from '@testing-library/react';
......@@ -19,6 +20,7 @@ const PAGE_PROPS = {
hash: '',
number: '',
q: '',
name: '',
};
const TestApp = ({ children }: {children: React.ReactNode}) => {
......@@ -36,9 +38,11 @@ const TestApp = ({ children }: {children: React.ReactNode}) => {
<QueryClientProvider client={ queryClient }>
<AppContextProvider pageProps={ PAGE_PROPS }>
<ScrollDirectionProvider>
<SocketProvider>
{ children }
</SocketProvider>
<GrowthBookProvider>
<SocketProvider>
{ children }
</SocketProvider>
</GrowthBookProvider>
</ScrollDirectionProvider>
</AppContextProvider>
</QueryClientProvider>
......
lib/api/buildUrl.ts
View file @ ccfb4fae
......@@ -9,7 +9,7 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
export default function buildUrl<R extends ResourceName>(
resourceName: R,
pathParams?: ResourcePathParams<R>,
queryParams?: Record<string, string | Array<string> | number | null | undefined>,
queryParams?: Record<string, string | Array<string> | number | boolean | null | undefined>,
): string {
const resource: ApiResource = RESOURCES[resourceName];
const baseUrl = isNeedProxy() ? config.app.baseUrl : (resource.endpoint || config.api.endpoint);
......
lib/api/resources.ts
View file @ ccfb4fae
......@@ -36,6 +36,15 @@ import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/ch
import type { BackendVersionConfig } from 'types/api/configs';
import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig, SolidityscanReport } from 'types/api/contract';
import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
import type {
EnsAddressLookupFilters,
EnsAddressLookupResponse,
EnsDomainDetailed,
EnsDomainEventsResponse,
EnsDomainLookupFilters,
EnsDomainLookupResponse,
EnsLookupSorting,
} from 'types/api/ens';
import type { IndexingStatus } from 'types/api/indexingStatus';
import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
import type { L2DepositsResponse, L2DepositsItem } from 'types/api/l2Deposits';
......@@ -176,6 +185,34 @@ export const RESOURCES = {
basePath: getFeaturePayload(config.features.stats)?.api.basePath,
},
// NAME SERVICE
addresses_lookup: {
path: '/api/v1/:chainId/addresses\\:lookup',
pathParams: [ 'chainId' as const ],
endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const ],
},
domain_info: {
path: '/api/v1/:chainId/domains/:name',
pathParams: [ 'chainId' as const, 'name' as const ],
endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
},
domain_events: {
path: '/api/v1/:chainId/domains/:name/events',
pathParams: [ 'chainId' as const, 'name' as const ],
endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
},
domains_lookup: {
path: '/api/v1/:chainId/domains\\:lookup',
pathParams: [ 'chainId' as const ],
endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
filterFields: [ 'name' as const, 'only_active' as const ],
},
// VISUALIZATION
visualize_sol2uml: {
path: '/api/v1/solidity\\:visualize-contracts',
......@@ -613,7 +650,8 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
'l2_output_roots' | 'l2_withdrawals' | 'l2_txn_batches' | 'l2_deposits' |
'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
'watchlist' | 'private_tags_address' | 'private_tags_tx';
'watchlist' | 'private_tags_address' | 'private_tags_tx' |
'domains_lookup' | 'addresses_lookup';
export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
......@@ -712,6 +750,10 @@ Q extends 'zkevm_l2_txn_batches_count' ? number :
Q extends 'zkevm_l2_txn_batch' ? ZkEvmL2TxnBatch :
Q extends 'zkevm_l2_txn_batch_txs' ? ZkEvmL2TxnBatchTxs :
Q extends 'config_backend_version' ? BackendVersionConfig :
Q extends 'addresses_lookup' ? EnsAddressLookupResponse :
Q extends 'domain_info' ? EnsDomainDetailed :
Q extends 'domain_events' ? EnsDomainEventsResponse :
Q extends 'domains_lookup' ? EnsDomainLookupResponse :
never;
/* eslint-enable @typescript-eslint/indent */
......@@ -731,6 +773,8 @@ Q extends 'token_inventory' ? TokenInventoryFilters :
Q extends 'tokens' ? TokensFilters :
Q extends 'tokens_bridged' ? TokensBridgedFilters :
Q extends 'verified_contracts' ? VerifiedContractsFilters :
Q extends 'addresses_lookup' ? EnsAddressLookupFilters :
Q extends 'domains_lookup' ? EnsDomainLookupFilters :
never;
/* eslint-enable @typescript-eslint/indent */
......@@ -740,5 +784,7 @@ Q extends 'tokens' ? TokensSorting :
Q extends 'tokens_bridged' ? TokensSorting :
Q extends 'verified_contracts' ? VerifiedContractsSorting :
Q extends 'address_txs' ? TransactionsSorting :
Q extends 'addresses_lookup' ? EnsLookupSorting :
Q extends 'domains_lookup' ? EnsLookupSorting :
never;
/* eslint-enable @typescript-eslint/indent */
lib/api/useApiFetch.tsx
View file @ ccfb4fae
import { useQueryClient } from '@tanstack/react-query';
import _omit from 'lodash/omit';
import _pickBy from 'lodash/pickBy';
import React from 'react';
......@@ -18,8 +19,8 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
export interface Params<R extends ResourceName> {
pathParams?: ResourcePathParams<R>;
queryParams?: Record<string, string | Array<string> | number | undefined>;
fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal'>;
queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal' | 'headers'>;
}
export default function useApiFetch() {
......@@ -40,6 +41,7 @@ export default function useApiFetch() {
'x-endpoint': resource.endpoint && isNeedProxy() ? resource.endpoint : undefined,
Authorization: resource.endpoint && resource.needAuth ? apiToken : undefined,
'x-csrf-token': withBody && csrfToken ? csrfToken : undefined,
...fetchParams?.headers,
}, Boolean) as HeadersInit;
return fetch<SuccessType, ErrorType>(
......@@ -51,7 +53,7 @@ export default function useApiFetch() {
// change condition here if something is changed
credentials: config.features.account.isEnabled ? 'include' : 'same-origin',
headers,
...fetchParams,
..._omit(fetchParams, 'headers'),
},
{
resource: resource.path,
......
lib/contexts/app.tsx
View file @ ccfb4fae
......@@ -15,6 +15,7 @@ const AppContext = createContext<PageProps>({
hash: '',
number: '',
q: '',
name: '',
});
export function AppContextProvider({ children, pageProps }: Props) {
......
lib/cookies.ts
View file @ ccfb4fae
......@@ -13,7 +13,8 @@ export enum NAMES {
INDEXING_ALERT='indexing_alert',
ADBLOCK_DETECTED='adblock_detected',
MIXPANEL_DEBUG='_mixpanel_debug',
ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type'
ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type',
UUID='uuid',
}
export function get(name?: NAMES | undefined | null, serverCookie?: string) {
......
lib/growthbook/consts.ts 0 → 100644
View file @ ccfb4fae
export const STORAGE_KEY = 'growthbook:experiments';
export const STORAGE_LIMIT = 20;
lib/growthbook/init.ts 0 → 100644
View file @ ccfb4fae
import { GrowthBook } from '@growthbook/growthbook-react';
import config from 'configs/app';
import * as mixpanel from 'lib/mixpanel';
import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
export interface GrowthBookFeatures {
test_value: string;
}
export const growthBook = (() => {
const feature = config.features.growthBook;
if (!feature.isEnabled) {
return;
}
return new GrowthBook<GrowthBookFeatures>({
apiHost: 'https://cdn.growthbook.io',
clientKey: feature.clientKey,
enableDevMode: config.app.isDev,
attributes: {
id: mixpanel.getUuid(),
chain_id: config.chain.id,
},
trackingCallback: (experiment, result) => {
if (isExperimentStarted(experiment.key)) {
return;
}
saveExperimentInStorage(experiment.key);
mixpanel.logEvent(mixpanel.EventTypes.EXPERIMENT_STARTED, {
'Experiment name': experiment.key,
'Variant name': result.value,
Source: 'growthbook',
});
},
});
})();
function getStorageValue(): Array<unknown> | undefined {
const item = window.localStorage.getItem(STORAGE_KEY);
if (!item) {
return;
}
try {
const parsedValue = JSON.parse(item);
if (Array.isArray(parsedValue)) {
return parsedValue;
}
} catch {
return;
}
}
function isExperimentStarted(key: string): boolean {
const items = getStorageValue() ?? [];
return items.some((item) => item === key);
}
function saveExperimentInStorage(key: string) {
const items = getStorageValue() ?? [];
const newItems = [ key, ...items ].slice(0, STORAGE_LIMIT);
try {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newItems));
} catch (error) {}
}
lib/growthbook/useFeatureValue.ts 0 → 100644
View file @ ccfb4fae
import type { WidenPrimitives } from '@growthbook/growthbook';
import { useFeatureValue, useGrowthBook } from '@growthbook/growthbook-react';
import type { GrowthBookFeatures } from './init';
export default function useGbFeatureValue<Name extends keyof GrowthBookFeatures>(
name: Name,
fallback: GrowthBookFeatures[Name],
): { value: WidenPrimitives<GrowthBookFeatures[Name]>; isLoading: boolean } {
const value = useFeatureValue(name, fallback);
const growthBook = useGrowthBook();
return { value, isLoading: !(growthBook?.ready ?? true) };
}
lib/growthbook/useLoadFeatures.ts 0 → 100644
View file @ ccfb4fae
import React from 'react';
import { SECOND } from 'lib/consts';
import { growthBook } from './init';
export default function useLoadFeatures() {
React.useEffect(() => {
growthBook?.setAttributes({
...growthBook.getAttributes(),
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
language: window.navigator.language,
});
growthBook?.loadFeatures({ timeout: SECOND });
}, []);
}
lib/hooks/useNavItems.tsx
View file @ ccfb4fae
......@@ -53,6 +53,12 @@ export default function useNavItems(): ReturnType {
icon: 'verified',
isActive: pathname === '/verified-contracts',
};
const ensLookup = config.features.nameService.isEnabled ? {
text: 'ENS lookup',
nextRoute: { pathname: '/name-domains' as const },
icon: 'ENS',
isActive: pathname === '/name-domains' || pathname === '/name-domains/[name]',
} : null;
if (config.features.zkEvmRollup.isEnabled) {
blockchainNavItems = [
......@@ -69,6 +75,7 @@ export default function useNavItems(): ReturnType {
[
topAccounts,
verifiedContracts,
ensLookup,
].filter(Boolean),
];
} else if (config.features.optimisticRollup.isEnabled) {
......@@ -90,6 +97,7 @@ export default function useNavItems(): ReturnType {
[
topAccounts,
verifiedContracts,
ensLookup,
].filter(Boolean),
];
} else {
......@@ -98,6 +106,7 @@ export default function useNavItems(): ReturnType {
blocks,
topAccounts,
verifiedContracts,
ensLookup,
config.features.beaconChain.isEnabled && {
text: 'Withdrawals',
nextRoute: { pathname: '/withdrawals' as const },
......
lib/metadata/getPageOgType.ts
View file @ ccfb4fae
......@@ -40,6 +40,8 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
'/zkevm-l2-txn-batches': 'Root page',
'/zkevm-l2-txn-batch/[number]': 'Regular page',
'/404': 'Regular page',
'/name-domains': 'Root page',
'/name-domains/[name]': 'Regular page',
// service routes, added only to make typescript happy
'/login': 'Regular page',
......
lib/metadata/templates/description.ts
View file @ ccfb4fae
......@@ -43,6 +43,8 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
'/zkevm-l2-txn-batches': DEFAULT_TEMPLATE,
'/zkevm-l2-txn-batch/[number]': DEFAULT_TEMPLATE,
'/404': DEFAULT_TEMPLATE,
'/name-domains': DEFAULT_TEMPLATE,
'/name-domains/[name]': DEFAULT_TEMPLATE,
// service routes, added only to make typescript happy
'/login': DEFAULT_TEMPLATE,
......
lib/metadata/templates/title.ts
View file @ ccfb4fae
......@@ -33,11 +33,13 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
'/csv-export': 'export data to CSV',
'/l2-deposits': 'deposits (L1 > L2)',
'/l2-output-roots': 'output roots',
'/l2-txn-batches': 'Tx batches (L2 blocks)',
'/l2-txn-batches': 'tx batches (L2 blocks)',
'/l2-withdrawals': 'withdrawals (L2 > L1)',
'/zkevm-l2-txn-batches': 'zkEvm L2 Tx batches',
'/zkevm-l2-txn-batch/[number]': 'zkEvm L2 Tx batch %number%',
'/404': 'error - page not found',
'/name-domains': 'domains search and resolve',
'/name-domains/[name]': '%name% domain details',
// service routes, added only to make typescript happy
'/login': 'login',
......
lib/mixpanel/getGoogleAnalyticsClientId.ts deleted 100644 → 0
View file @ 528a2324
export default function getGoogleAnalyticsClientId() {
return window.ga?.getAll()[0].get('clientId');
}
lib/mixpanel/getPageType.ts
View file @ ccfb4fae
......@@ -38,6 +38,8 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
'/zkevm-l2-txn-batches': 'ZkEvm L2 Tx batches',
'/zkevm-l2-txn-batch/[number]': 'ZkEvm L2 Tx batch details',
'/404': '404',
'/name-domains': 'Domains search and resolve',
'/name-domains/[name]': 'Domain details',
// service routes, added only to make typescript happy
'/login': 'Login',
......
lib/mixpanel/getUuid.ts 0 → 100644
View file @ ccfb4fae
import * as cookies from 'lib/cookies';
import * as growthBook from 'lib/growthbook/consts';
import isBrowser from 'lib/isBrowser';
export default function getUuid() {
const cookie = cookies.get(cookies.NAMES.UUID);
if (cookie) {
return cookie;
}
const uuid = crypto.randomUUID();
cookies.set(cookies.NAMES.UUID, uuid);
if (isBrowser()) {
window.localStorage.removeItem(growthBook.STORAGE_KEY);
}
return uuid;
}
lib/mixpanel/index.ts
View file @ ccfb4fae
import getPageType from './getPageType';
import getUuid from './getUuid';
import logEvent from './logEvent';
import useInit from './useInit';
import useLogPageView from './useLogPageView';
......@@ -9,4 +10,5 @@ export {
useLogPageView,
logEvent,
getPageType,
getUuid,
};
lib/mixpanel/isGoogleAnalyticsLoaded.ts deleted 100644 → 0
View file @ 528a2324
import config from 'configs/app';
import delay from 'lib/delay';
export default function isGoogleAnalyticsLoaded(retries = 3): Promise<boolean> {
if (!retries || !config.features.googleAnalytics.isEnabled) {
return Promise.resolve(false);
}
return typeof window.ga?.getAll === 'function' ? Promise.resolve(true) : delay(500).then(() => isGoogleAnalyticsLoaded(retries - 1));
}
lib/mixpanel/useInit.tsx
View file @ ccfb4fae
......@@ -9,8 +9,7 @@ import config from 'configs/app';
import * as cookies from 'lib/cookies';
import getQueryParamString from 'lib/router/getQueryParamString';
import getGoogleAnalyticsClientId from './getGoogleAnalyticsClientId';
import isGoogleAnalyticsLoaded from './isGoogleAnalyticsLoaded';
import getUuid from './getUuid';
export default function useMixpanelInit() {
const [ isInited, setIsInited ] = React.useState(false);
......@@ -18,36 +17,34 @@ export default function useMixpanelInit() {
const debugFlagQuery = React.useRef(getQueryParamString(router.query._mixpanel_debug));
React.useEffect(() => {
isGoogleAnalyticsLoaded().then((isGALoaded) => {
const feature = config.features.mixpanel;
if (!feature.isEnabled) {
return;
}
const debugFlagCookie = cookies.get(cookies.NAMES.MIXPANEL_DEBUG);
const mixpanelConfig: Partial<Config> = {
debug: Boolean(debugFlagQuery.current || debugFlagCookie),
};
const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
mixpanel.init(feature.projectToken, mixpanelConfig);
mixpanel.register({
'Chain id': config.chain.id,
Environment: config.app.isDev ? 'Dev' : 'Prod',
Authorized: isAuth,
'Viewport width': window.innerWidth,
'Viewport height': window.innerHeight,
Language: window.navigator.language,
'User id': isGALoaded ? getGoogleAnalyticsClientId() : undefined,
'Device type': _capitalize(deviceType),
});
setIsInited(true);
if (debugFlagQuery.current && !debugFlagCookie) {
cookies.set(cookies.NAMES.MIXPANEL_DEBUG, 'true');
}
const feature = config.features.mixpanel;
if (!feature.isEnabled) {
return;
}
const debugFlagCookie = cookies.get(cookies.NAMES.MIXPANEL_DEBUG);
const mixpanelConfig: Partial<Config> = {
debug: Boolean(debugFlagQuery.current || debugFlagCookie),
};
const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
mixpanel.init(feature.projectToken, mixpanelConfig);
mixpanel.register({
'Chain id': config.chain.id,
Environment: config.app.isDev ? 'Dev' : 'Prod',
Authorized: isAuth,
'Viewport width': window.innerWidth,
'Viewport height': window.innerHeight,
Language: window.navigator.language,
'Device type': _capitalize(deviceType),
'User id': getUuid(),
});
setIsInited(true);
if (debugFlagQuery.current && !debugFlagCookie) {
cookies.set(cookies.NAMES.MIXPANEL_DEBUG, 'true');
}
}, []);
return isInited;
......
lib/mixpanel/utils.ts
View file @ ccfb4fae
......@@ -3,17 +3,21 @@ import type { WalletType } from 'types/client/wallets';
export enum EventTypes {
PAGE_VIEW = 'Page view',
SEARCH_QUERY = 'Search query',
LOCAL_SEARCH = 'Local search',
ADD_TO_WALLET = 'Add to wallet',
ACCOUNT_ACCESS = 'Account access',
PRIVATE_TAG = 'Private tag',
VERIFY_ADDRESS = 'Verify address',
VERIFY_TOKEN = 'Verify token',
WALLET_CONNECT = 'Wallet connect',
WALLET_ACTION = 'Wallet action',
CONTRACT_INTERACTION = 'Contract interaction',
CONTRACT_VERIFICATION = 'Contract verification',
QR_CODE = 'QR code',
PAGE_WIDGET = 'Page widget',
TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction'
TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction',
EXPERIMENT_STARTED = 'Experiment started',
FILTERS = 'Filters'
}
/* eslint-disable @typescript-eslint/indent */
......@@ -30,6 +34,10 @@ Type extends EventTypes.SEARCH_QUERY ? {
'Source page type': string;
'Result URL': string;
} :
Type extends EventTypes.LOCAL_SEARCH ? {
'Search query': string;
'Source': 'Marketplace';
} :
Type extends EventTypes.ADD_TO_WALLET ? (
{
'Wallet': WalletType;
......@@ -65,6 +73,9 @@ Type extends EventTypes.WALLET_CONNECT ? {
'Source': 'Header' | 'Smart contracts';
'Status': 'Started' | 'Connected';
} :
Type extends EventTypes.WALLET_ACTION ? {
'Action': 'Open' | 'Address click';
} :
Type extends EventTypes.CONTRACT_INTERACTION ? {
'Method type': 'Read' | 'Write';
'Method name': string;
......@@ -76,11 +87,25 @@ Type extends EventTypes.CONTRACT_VERIFICATION ? {
Type extends EventTypes.QR_CODE ? {
'Page type': string;
} :
Type extends EventTypes.PAGE_WIDGET ? {
'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
} :
Type extends EventTypes.PAGE_WIDGET ? (
{
'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
} | {
'Type': 'Favorite app' | 'More button';
'Info': string;
}
) :
Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {
'Type': 'Address click' | 'Token click';
} :
Type extends EventTypes.EXPERIMENT_STARTED ? {
'Experiment name': string;
'Variant name': string;
'Source': 'growthbook';
} :
Type extends EventTypes.FILTERS ? {
'Source': 'Marketplace';
'Filter name': string;
} :
undefined;
/* eslint-enable @typescript-eslint/indent */
mocks/address/address.ts
View file @ ccfb4fae
......@@ -15,6 +15,19 @@ export const withName: AddressParam = {
private_tags: [],
watchlist_names: [],
public_tags: [],
ens_domain_name: null,
};
export const withEns: AddressParam = {
hash: hash,
implementation_name: null,
is_contract: false,
is_verified: null,
name: 'ArianeeStore',
private_tags: [],
watchlist_names: [],
public_tags: [],
ens_domain_name: 'kitty.kitty.kitty.cat.eth',
};
export const withoutName: AddressParam = {
......@@ -26,6 +39,7 @@ export const withoutName: AddressParam = {
private_tags: [],
watchlist_names: [],
public_tags: [],
ens_domain_name: null,
};
export const token: Address = {
......@@ -56,6 +70,7 @@ export const token: Address = {
has_token_transfers: true,
has_tokens: true,
has_validated_blocks: false,
ens_domain_name: null,
};
export const contract: Address = {
......@@ -86,6 +101,7 @@ export const contract: Address = {
token: null,
watchlist_names: [ watchlistName ],
watchlist_address_id: 42,
ens_domain_name: null,
};
export const validator: Address = {
......@@ -116,4 +132,5 @@ export const validator: Address = {
token: null,
watchlist_names: [],
watchlist_address_id: null,
ens_domain_name: null,
};
mocks/blocks/block.ts
View file @ ccfb4fae
......@@ -22,6 +22,7 @@ export const base: Block = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
nonce: '0x0000000000000000',
parent_hash: '0x44125f0eb36a9d942e0c23bb4e8117f7ba86a9537a69b59c0025986ed2b7500f',
......@@ -71,6 +72,7 @@ export const genesis: Block = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: 'kitty.kitty.cat.eth',
},
nonce: '0x0000000000000000',
parent_hash: '0x0000000000000000000000000000000000000000000000000000000000000000',
......@@ -99,6 +101,7 @@ export const base2: Block = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
timestamp: '2022-11-11T11:46:05Z',
tx_count: 253,
......
mocks/contracts/index.ts
View file @ ccfb4fae
......@@ -10,6 +10,7 @@ export const contract1: VerifiedContract = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
coin_balance: '2346534676900000008',
compiler_version: 'v0.8.17+commit.8df45f5f',
......@@ -31,6 +32,7 @@ export const contract2: VerifiedContract = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
coin_balance: '9078234570352343999',
compiler_version: 'v0.3.1+commit.0463ea4c',
......
mocks/ens/domain.ts 0 → 100644
View file @ ccfb4fae
import type { EnsDomainDetailed } from 'types/api/ens';
const domainTokenA = {
id: '97352314626701792030827861137068748433918254309635329404916858191911576754327',
contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85',
type: 'NATIVE_DOMAIN_TOKEN' as const,
};
const domainTokenB = {
id: '423546333',
contract_hash: '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea86',
type: 'WRAPPED_DOMAIN_TOKEN' as const,
};
export const ensDomainA: EnsDomainDetailed = {
id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
tokens: [
domainTokenA,
domainTokenB,
],
name: 'cat.eth',
registrant: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
resolved_address: {
hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
},
owner: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
wrapped_owner: null,
registration_date: '2021-06-27T13:34:44.000Z',
expiry_date: '2025-03-01T14:20:24.000Z',
other_addresses: {
ETH: 'fe6ab8a0dafe7d41adf247c210451c264155c9b0',
GNO: 'DDAfbb505ad214D7b80b1f830fcCc89B60fb7A83',
NEAR: 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near',
},
};
export const ensDomainB: EnsDomainDetailed = {
id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
tokens: [ domainTokenA ],
name: 'kitty.kitty.kitty.cat.eth',
resolved_address: null,
registrant: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
owner: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
wrapped_owner: null,
registration_date: '2023-08-13T13:01:12.000Z',
expiry_date: null,
other_addresses: {},
};
export const ensDomainC: EnsDomainDetailed = {
id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
tokens: [ domainTokenA ],
name: 'duck.duck.eth',
registrant: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
resolved_address: {
hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
},
owner: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
wrapped_owner: null,
registration_date: '2022-04-24T07:34:44.000Z',
expiry_date: '2022-11-01T13:10:36.000Z',
other_addresses: {},
};
export const ensDomainD: EnsDomainDetailed = {
id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
tokens: [ domainTokenA ],
name: '🦆.duck.eth',
registrant: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
resolved_address: {
hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
},
owner: null,
wrapped_owner: null,
registration_date: '2022-04-24T07:34:44.000Z',
expiry_date: '2027-09-23T13:10:36.000Z',
other_addresses: {},
};
mocks/ens/events.ts 0 → 100644
View file @ ccfb4fae
import type { EnsDomainEvent } from 'types/api/ens';
export const ensDomainEventA: EnsDomainEvent = {
transaction_hash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
timestamp: '2021-06-27T13:34:44.000000Z',
from_address: {
hash: '0xaa96a50a2f67111262fe24576bd85bb56ec65016',
},
action: '0xf7a16963',
};
export const ensDomainEventB = {
transaction_hash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
timestamp: '2022-11-02T14:20:24.000000Z',
from_address: {
hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
},
action: 'register',
};
mocks/search/index.ts
View file @ ccfb4fae
......@@ -47,6 +47,15 @@ export const block2: SearchResultBlock = {
url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd2',
};
export const block3: SearchResultBlock = {
block_hash: '0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd3',
block_number: 8198536,
block_type: 'uncle',
type: 'block' as const,
timestamp: '2022-12-11T18:11:11Z',
url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd3',
};
export const address1: SearchResultAddressOrContract = {
address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
name: null,
......@@ -55,6 +64,20 @@ export const address1: SearchResultAddressOrContract = {
url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
};
export const address2: SearchResultAddressOrContract = {
address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131b',
name: null,
type: 'address' as const,
is_smart_contract_verified: false,
url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131b',
ens_info: {
address_hash: '0x1234567890123456789012345678901234567890',
expiry_date: '2022-12-11T17:55:20Z',
name: 'utko.eth',
names_count: 1,
},
};
export const contract1: SearchResultAddressOrContract = {
address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
name: 'Unknown contract in this network',
......
mocks/stats/index.ts
View file @ ccfb4fae
......@@ -3,11 +3,26 @@ import type { HomeStats } from 'types/api/stats';
export const base: HomeStats = {
average_block_time: 6212.0,
coin_price: '0.00199678',
coin_price_change_percentage: -7.42,
gas_prices: {
average: 48.0,
fast: 67.5,
slow: 48.0,
average: {
fiat_price: '1.01',
price: 20.41,
time: 12283,
},
fast: {
fiat_price: '1.26',
price: 25.47,
time: 9321,
},
slow: {
fiat_price: '0.97',
price: 19.55,
time: 24543,
},
},
gas_price_updated_at: '2022-11-11T11:09:49.051171Z',
gas_prices_update_in: 300000,
gas_used_today: '4108680603',
market_cap: '330809.96443288102524',
network_utilization_percentage: 1.55372064,
......
mocks/tokens/tokenTransfer.ts
View file @ ccfb4fae
......@@ -10,6 +10,7 @@ export const erc20: TokenTransfer = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
to: {
hash: '0x7d20a8D54F955b4483A66aB335635ab66e151c51',
......@@ -20,6 +21,7 @@ export const erc20: TokenTransfer = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: 'kitty.kitty.cat.eth',
},
token: {
address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
......@@ -55,6 +57,7 @@ export const erc721: TokenTransfer = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: 'kitty.kitty.cat.eth',
},
to: {
hash: '0x47eE48AEBc4ab9Ed908b805b8c8dAAa71B31Db1A',
......@@ -65,6 +68,7 @@ export const erc721: TokenTransfer = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
token: {
address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
......@@ -99,6 +103,7 @@ export const erc1155A: TokenTransfer = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
to: {
hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
......@@ -109,6 +114,7 @@ export const erc1155A: TokenTransfer = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: 'kitty.kitty.cat.eth',
},
token: {
address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',
......
mocks/txs/internalTxs.ts
View file @ ccfb4fae
......@@ -13,6 +13,7 @@ export const base: InternalTransaction = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
gas_limit: '757586',
index: 1,
......@@ -27,6 +28,7 @@ export const base: InternalTransaction = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
transaction_hash: '0xe9e27dfeb183066e26cfe556f74b7219b08df6951e25d14003d4fc7af8bbff61',
type: 'call',
......@@ -61,6 +63,7 @@ export const withContractCreated: InternalTransaction = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
value: '1420000000000000000',
gas_limit: '5433',
......
mocks/txs/state.ts
View file @ ccfb4fae
......@@ -10,6 +10,7 @@ export const mintToken: TxStateChange = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
balance_after: null,
balance_before: null,
......@@ -47,6 +48,7 @@ export const receiveMintedToken: TxStateChange = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
balance_after: '1',
balance_before: '0',
......@@ -84,6 +86,7 @@ export const transfer1155Token: TxStateChange = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
balance_after: '1',
balance_before: '0',
......@@ -115,6 +118,7 @@ export const receiveCoin: TxStateChange = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
balance_after: '443787514723917012805',
balance_before: '443787484997510408745',
......@@ -134,6 +138,7 @@ export const sendCoin: TxStateChange = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
balance_after: '828282622733717191',
balance_before: '832127467556437753',
......
mocks/txs/tx.ts
View file @ ccfb4fae
......@@ -29,6 +29,7 @@ export const base: Transaction = {
private_tags: [ ],
public_tags: [ publicTag ],
watchlist_names: [],
ens_domain_name: 'kitty.kitty.cat.eth',
},
gas_limit: '800000',
gas_price: '48000000000',
......@@ -54,6 +55,7 @@ export const base: Transaction = {
private_tags: [ privateTag ],
public_tags: [],
watchlist_names: [ watchlistName ],
ens_domain_name: null,
},
token_transfers: [],
token_transfers_overflow: false,
......@@ -97,6 +99,7 @@ export const withContractCreation: Transaction = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
tx_types: [
'contract_creation',
......@@ -115,6 +118,7 @@ export const withTokenTransfer: Transaction = {
private_tags: [ privateTag ],
public_tags: [],
watchlist_names: [ watchlistName ],
ens_domain_name: null,
},
token_transfers: [
tokenTransferMock.erc20,
......@@ -168,6 +172,7 @@ export const withRawRevertReason: Transaction = {
private_tags: [ ],
public_tags: [],
watchlist_names: [ ],
ens_domain_name: null,
},
};
......@@ -283,6 +288,7 @@ export const stabilityTx: Transaction = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
dapp_fee: '34381250000000',
token: {
......@@ -307,6 +313,7 @@ export const stabilityTx: Transaction = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
validator_fee: '34381250000000',
},
......
mocks/txs/txInterpretation.ts
View file @ ccfb4fae
......@@ -33,6 +33,7 @@ export const txInterpretation: TxInterpretationResponse = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
},
},
timestamp: {
......
nextjs/csp/generateCspPolicy.ts
View file @ ccfb4fae
......@@ -9,6 +9,7 @@ function generateCspPolicy() {
descriptors.googleAnalytics(),
descriptors.googleFonts(),
descriptors.googleReCaptcha(),
descriptors.growthBook(),
descriptors.mixpanel(),
descriptors.monaco(),
descriptors.safe(),
......
nextjs/csp/policies/growthBook.ts 0 → 100644
View file @ ccfb4fae
import type CspDev from 'csp-dev';
import config from 'configs/app';
export function growthBook(): CspDev.DirectiveDescriptor {
if (!config.features.growthBook.isEnabled) {
return {};
}
return {
'connect-src': [
'cdn.growthbook.io',
],
};
}
nextjs/csp/policies/index.ts
View file @ ccfb4fae
......@@ -4,6 +4,7 @@ export { cloudFlare } from './cloudFlare';
export { googleAnalytics } from './googleAnalytics';
export { googleFonts } from './googleFonts';
export { googleReCaptcha } from './googleReCaptcha';
export { growthBook } from './growthBook';
export { mixpanel } from './mixpanel';
export { monaco } from './monaco';
export { safe } from './safe';
......
nextjs/getServerSideProps.ts
View file @ ccfb4fae
......@@ -10,6 +10,7 @@ export type Props = {
hash: string;
number: string;
q: string;
name: string;
}
export const base: GetServerSideProps<Props> = async({ req, query }) => {
......@@ -22,6 +23,7 @@ export const base: GetServerSideProps<Props> = async({ req, query }) => {
height_or_hash: query.height_or_hash?.toString() || '',
number: query.number?.toString() || '',
q: query.q?.toString() || '',
name: query.name?.toString() || '',
},
};
};
......@@ -126,6 +128,16 @@ export const suave: GetServerSideProps<Props> = async(context) => {
return base(context);
};
export const nameService: GetServerSideProps<Props> = async(context) => {
if (!config.features.nameService.isEnabled) {
return {
notFound: true,
};
}
return base(context);
};
export const accounts: GetServerSideProps<Props> = async(context) => {
if (config.UI.views.address.hiddenViews?.top_accounts) {
return {
......
nextjs/nextjs-routes.d.ts
View file @ ccfb4fae
......@@ -37,6 +37,8 @@ declare module "nextjs-routes" {
| StaticRoute<"/l2-txn-batches">
| StaticRoute<"/l2-withdrawals">
| StaticRoute<"/login">
| DynamicRoute<"/name-domains/[name]", { "name": string }>
| StaticRoute<"/name-domains">
| StaticRoute<"/search-results">
| StaticRoute<"/stats">
| DynamicRoute<"/token/[hash]", { "hash": string }>
......
nextjs/utils/fetch.ts
View file @ ccfb4fae
import type { IncomingMessage } from 'http';
import _pick from 'lodash/pick';
import type { NextApiRequest } from 'next';
import type { NextApiRequestCookies } from 'next/dist/server/api-utils';
import type { RequestInit, Response } from 'node-fetch';
......@@ -14,16 +15,18 @@ export default function fetchFactory(
// first arg can be only a string
// FIXME migrate to RequestInfo later if needed
return function fetch(url: string, init?: RequestInit): Promise<Response> {
const csrfToken = _req.headers['x-csrf-token'];
const authToken = _req.headers['Authorization'];
const apiToken = _req.cookies[cookies.NAMES.API_TOKEN];
const headers = {
accept: _req.headers['accept'] || 'application/json',
'content-type': _req.headers['content-type'] || 'application/json',
cookie: apiToken ? `${ cookies.NAMES.API_TOKEN }=${ apiToken }` : '',
...(csrfToken ? { 'x-csrf-token': String(csrfToken) } : {}),
...(authToken ? { Authorization: String(authToken) } : {}),
..._pick(_req.headers, [
'x-csrf-token',
'Authorization',
// feature flags
'updated-gas-oracle',
]) as Record<string, string | undefined>,
};
httpLogger.logger.info({
......
pages/_app.tsx
View file @ ccfb4fae
import type { ChakraProps } from '@chakra-ui/react';
import { GrowthBookProvider } from '@growthbook/growthbook-react';
import * as Sentry from '@sentry/react';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
......@@ -12,6 +13,8 @@ import useQueryClientConfig from 'lib/api/useQueryClientConfig';
import { AppContextProvider } from 'lib/contexts/app';
import { ChakraProvider } from 'lib/contexts/chakra';
import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
import { growthBook } from 'lib/growthbook/init';
import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
import { SocketProvider } from 'lib/socket/context';
import theme from 'theme';
import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
......@@ -39,6 +42,8 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
useLoadFeatures();
const queryClient = useQueryClientConfig();
const handleError = React.useCallback((error: Error) => {
......@@ -56,11 +61,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
<Web3ModalProvider>
<AppContextProvider pageProps={ pageProps }>
<QueryClientProvider client={ queryClient }>
<ScrollDirectionProvider>
<SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
{ getLayout(<Component { ...pageProps }/>) }
</SocketProvider>
</ScrollDirectionProvider>
<GrowthBookProvider growthbook={ growthBook }>
<ScrollDirectionProvider>
<SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
{ getLayout(<Component { ...pageProps }/>) }
</SocketProvider>
</ScrollDirectionProvider>
</GrowthBookProvider>
<ReactQueryDevtools buttonPosition="bottom-left" position="left"/>
<GoogleAnalytics/>
</QueryClientProvider>
......
pages/name-domains/[name].tsx 0 → 100644
View file @ ccfb4fae
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import React from 'react';
import type { Props } from 'nextjs/getServerSideProps';
import PageNextJs from 'nextjs/PageNextJs';
const NameDomain = dynamic(() => import('ui/pages/NameDomain'), { ssr: false });
const Page: NextPage<Props> = (props: Props) => {
return (
<PageNextJs pathname="/name-domains/[name]" query={ props }>
<NameDomain/>
</PageNextJs>
);
};
export default Page;
export { nameService as getServerSideProps } from 'nextjs/getServerSideProps';
pages/name-domains/index.tsx 0 → 100644
View file @ ccfb4fae
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import React from 'react';
import PageNextJs from 'nextjs/PageNextJs';
const NameDomains = dynamic(() => import('ui/pages/NameDomains'), { ssr: false });
const Page: NextPage = () => {
return (
<PageNextJs pathname="/name-domains">
<NameDomains/>
</PageNextJs>
);
};
export default Page;
export { nameService as getServerSideProps } from 'nextjs/getServerSideProps';
playwright/TestApp.tsx
View file @ ccfb4fae
import { ChakraProvider } from '@chakra-ui/react';
import { GrowthBookProvider } from '@growthbook/growthbook-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react';
import React from 'react';
......@@ -29,6 +30,7 @@ const defaultAppContext = {
hash: '',
number: '',
q: '',
name: '',
},
};
......@@ -63,9 +65,11 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
<QueryClientProvider client={ queryClient }>
<SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
<AppContextProvider { ...appContext }>
<WagmiConfig config={ wagmiConfig }>
{ children }
</WagmiConfig>
<GrowthBookProvider>
<WagmiConfig config={ wagmiConfig }>
{ children }
</WagmiConfig>
</GrowthBookProvider>
</AppContextProvider>
</SocketProvider>
</QueryClientProvider>
......
public/icons/name.d.ts
View file @ ccfb4fae
......@@ -31,6 +31,8 @@
| "email-sent"
| "email"
| "empty_search_result"
| "ENS_slim"
| "ENS"
| "error-pages/404"
| "error-pages/422"
| "error-pages/429"
......
stubs/ENS.ts 0 → 100644
View file @ ccfb4fae
import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
import { TX_HASH } from './tx';
export const ENS_DOMAIN: EnsDomainDetailed = {
id: '0x126d74db13895f8d3a1d362410212731d1e1d9be8add83e388385f93d84c8c84',
name: 'kitty.cat.eth',
tokens: [
{
id: '973523146267017920308',
contract_hash: ADDRESS_HASH,
type: 'NATIVE_DOMAIN_TOKEN',
},
],
owner: ADDRESS_PARAMS,
wrapped_owner: null,
resolved_address: ADDRESS_PARAMS,
registrant: ADDRESS_PARAMS,
registration_date: '2023-12-20T01:29:12.000Z',
expiry_date: '2099-01-02T01:29:12.000Z',
other_addresses: {
ETH: ADDRESS_HASH,
},
};
export const ENS_DOMAIN_EVENT: EnsDomainEvent = {
transaction_hash: TX_HASH,
timestamp: '2022-06-06T08:43:15.000000Z',
from_address: ADDRESS_PARAMS,
action: '0xf7a16963',
};
stubs/address.ts
View file @ ccfb4fae
......@@ -41,6 +41,7 @@ export const ADDRESS_INFO: Address = {
public_tags: [],
watchlist_names: [],
watchlist_address_id: null,
ens_domain_name: null,
};
export const ADDRESS_COUNTERS: AddressCounters = {
......@@ -71,6 +72,7 @@ export const TOP_ADDRESS: AddressesItem = {
private_tags: [],
public_tags: [ ],
watchlist_names: [],
ens_domain_name: null,
};
export const ADDRESS_COIN_BALANCE: AddressCoinBalanceHistoryItem = {
......
stubs/addressParams.ts
View file @ ccfb4fae
......@@ -11,4 +11,5 @@ export const ADDRESS_PARAMS: AddressParam = {
private_tags: [],
public_tags: [],
watchlist_names: [],
ens_domain_name: null,
};
stubs/stats.ts
View file @ ccfb4fae
......@@ -3,11 +3,26 @@ import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats';
export const HOMEPAGE_STATS: HomeStats = {
average_block_time: 14346,
coin_price: '1807.68',
coin_price_change_percentage: 42,
gas_prices: {
average: 0.1,
fast: 0.11,
slow: 0.1,
average: {
fiat_price: '1.01',
price: 20.41,
time: 12283,
},
fast: {
fiat_price: '1.26',
price: 25.47,
time: 9321,
},
slow: {
fiat_price: '0.97',
price: 19.55,
time: 24543,
},
},
gas_price_updated_at: '2022-11-11T11:09:49.051171Z',
gas_prices_update_in: 300000,
gas_used_today: '0',
market_cap: '0',
network_utilization_percentage: 22.56,
......
types/api/address.ts
View file @ ccfb4fae
......@@ -12,6 +12,7 @@ export interface Address extends UserTags {
creator_address_hash: string | null;
creation_tx_hash: string | null;
exchange_rate: string | null;
ens_domain_name: string | null;
// TODO: if we are happy with tabs-counters method, should we delete has_something fields?
has_beacon_chain_withdrawals?: boolean;
has_custom_methods_read: boolean;
......
types/api/addressParams.ts
View file @ ccfb4fae
......@@ -21,4 +21,5 @@ export interface AddressParam extends UserTags {
name: string | null;
is_contract: boolean;
is_verified: boolean | null;
ens_domain_name: string | null;
}
types/api/ens.ts 0 → 100644
View file @ ccfb4fae
export interface EnsDomain {
id: string;
name: string;
resolved_address: {
hash: string;
} | null;
owner: {
hash: string;
} | null;
wrapped_owner: {
hash: string;
} | null;
registration_date?: string;
expiry_date: string | null;
}
export interface EnsDomainDetailed extends EnsDomain {
tokens: Array<{ id: string; contract_hash: string; type: 'NATIVE_DOMAIN_TOKEN' | 'WRAPPED_DOMAIN_TOKEN' }>;
registrant: {
hash: string;
} | null;
other_addresses: Record<string, string>;
}
export interface EnsDomainEvent {
transaction_hash: string;
timestamp: string;
from_address: {
hash: string;
} | null;
action?: string;
}
export interface EnsAddressLookupResponse {
items: Array<EnsDomain>;
next_page_params: {
page_token: string;
page_size: number;
} | null;
}
export interface EnsDomainEventsResponse {
items: Array<EnsDomainEvent>;
}
export interface EnsDomainLookupResponse {
items: Array<EnsDomain>;
next_page_params: {
page_token: string;
page_size: number;
} | null;
}
export interface EnsAddressLookupFilters {
address: string | null;
resolved_to: boolean;
owned_by: boolean;
only_active: boolean;
}
export interface EnsDomainLookupFilters {
name: string | null;
only_active: boolean;
}
export interface EnsLookupSorting {
sort: 'registration_date';
order: 'ASC' | 'DESC';
}
export type EnsDomainLookupFiltersOptions = Array<'resolved_to' | 'owned_by' | 'with_inactive'>;
types/api/search.ts
View file @ ccfb4fae
......@@ -23,6 +23,12 @@ export interface SearchResultAddressOrContract {
address: string;
is_smart_contract_verified: boolean;
url?: string; // not used by the frontend, we build the url ourselves
ens_info?: {
address_hash: string;
expiry_date?: string;
name: string;
names_count: number;
};
}
export interface SearchResultLabel {
......@@ -35,7 +41,7 @@ export interface SearchResultLabel {
export interface SearchResultBlock {
type: 'block';
block_type?: 'block' | 'reorg';
block_type?: 'block' | 'reorg' | 'uncle';
block_number: number | string;
block_hash: string;
timestamp: string;
......
types/api/stats.ts
View file @ ccfb4fae
......@@ -4,10 +4,13 @@ export type HomeStats = {
total_transactions: string;
average_block_time: number;
coin_price: string | null;
coin_price_change_percentage: number | null; // e.g -6.22
total_gas_used: string;
transactions_today: string;
gas_used_today: string;
gas_prices: GasPrices | null;
gas_price_updated_at: string | null;
gas_prices_update_in: number;
static_gas_price: string | null;
market_cap: string;
network_utilization_percentage: number;
......@@ -16,9 +19,15 @@ export type HomeStats = {
}
export type GasPrices = {
average: number | null;
fast: number | null;
slow: number | null;
average: GasPriceInfo | null;
fast: GasPriceInfo | null;
slow: GasPriceInfo | null;
}
export interface GasPriceInfo {
fiat_price: string | null;
price: number | null;
time: number | null;
}
export type Counters = {
......
types/api/transaction.ts
View file @ ccfb4fae
......@@ -14,6 +14,12 @@ export type TransactionRevertReason = {
type WrappedTransactionFields = 'decoded_input' | 'fee' | 'gas_limit' | 'gas_price' | 'hash' | 'max_fee_per_gas' |
'max_priority_fee_per_gas' | 'method' | 'nonce' | 'raw_input' | 'to' | 'type' | 'value';
export interface OpWithdrawal {
l1_transaction_hash: string;
nonce: number;
status: L2WithdrawalStatus;
}
export type Transaction = {
to: AddressParam | null;
created_contract: AddressParam | null;
......@@ -54,8 +60,7 @@ export type Transaction = {
l1_gas_used?: string;
has_error_in_internal_txs: boolean | null;
// optimism fields
op_withdrawal_status?: L2WithdrawalStatus;
op_l1_transaction_hash?: string;
op_withdrawals?: Array<OpWithdrawal>;
// SUAVE fields
execution_node?: AddressParam | null;
allowed_peekers?: Array<string>;
......
ui/address/ensDomains/AddressEnsDomains.pw.tsx 0 → 100644
View file @ ccfb4fae
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import config from 'configs/app';
import * as ensDomainMock from 'mocks/ens/domain';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import AddressEnsDomains from './AddressEnsDomains';
const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash ?? '';
const ADDRESSES_LOOKUP_API_URL = buildApiUrl('addresses_lookup', { chainId: config.chain.id }) +
`?address=${ ADDRESS_HASH }&resolved_to=true&owned_by=true&only_active=true&order=ASC`;
test('base view', async({ mount, page }) => {
await page.route(ADDRESSES_LOOKUP_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({
items: [
ensDomainMock.ensDomainA,
ensDomainMock.ensDomainB,
ensDomainMock.ensDomainC,
ensDomainMock.ensDomainD,
],
}),
}));
const component = await mount(
<TestApp>
<AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>
</TestApp>,
);
await component.getByText('4 domains').click();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
});
ui/address/ensDomains/AddressEnsDomains.tsx 0 → 100644
View file @ ccfb4fae
import { Button, chakra, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, useDisclosure } from '@chakra-ui/react';
import _clamp from 'lodash/clamp';
import React from 'react';
import type { EnsDomain } from 'types/api/ens';
import { route } from 'nextjs-routes';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import dayjs from 'lib/date/dayjs';
import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/LinkInternal';
interface Props {
addressHash: string;
mainDomainName: string | null;
}
const DomainsGrid = ({ data }: { data: Array<EnsDomain> }) => {
return (
<Grid
templateColumns={{ base: `repeat(${ _clamp(data.length, 1, 2) }, 1fr)`, lg: `repeat(${ _clamp(data.length, 1, 3) }, 1fr)` }}
columnGap={ 8 }
rowGap={ 4 }
mt={ 2 }
>
{ data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } noCopy/>) }
</Grid>
);
};
const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
const { isOpen, onToggle, onClose } = useDisclosure();
const { data, isPending, isError } = useApiQuery('addresses_lookup', {
pathParams: { chainId: config.chain.id },
queryParams: {
address: addressHash,
resolved_to: true,
owned_by: true,
only_active: true,
order: 'ASC',
},
});
if (isError) {
return null;
}
if (isPending) {
return <Skeleton h={ 8 } w={{ base: '60px', lg: '120px' }} borderRadius="base"/>;
}
if (data.items.length === 0) {
return null;
}
const mainDomain = data.items.find((domain) => domain.name === mainDomainName);
const ownedDomains = data.items.filter((domain) => {
if (domain.name === mainDomainName) {
return false;
}
// exclude resolved address
if (domain.resolved_address && domain.resolved_address.hash.toLowerCase() === addressHash.toLowerCase()) {
return false;
}
if (domain.owner && domain.owner.hash.toLowerCase() === addressHash.toLowerCase()) {
return true;
}
// include wrapped owner
if (domain.wrapped_owner?.hash.toLowerCase() === addressHash.toLowerCase()) {
return !domain.resolved_address || domain.resolved_address.hash.toLowerCase() !== addressHash.toLowerCase();
}
return false;
});
const resolvedDomains = data.items.filter((domain) =>
domain.resolved_address &&
domain.resolved_address.hash.toLowerCase() === addressHash.toLowerCase() &&
domain.name !== mainDomainName,
);
const totalRecords = data.items.length > 40 ? '40+' : data.items.length;
return (
<Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
<PopoverTrigger>
<Button
size="sm"
variant="outline"
colorScheme="gray"
onClick={ onToggle }
aria-label="Address ENS domains"
fontWeight={ 500 }
px={ 2 }
h="32px"
flexShrink={ 0 }
>
<IconSvg name="ENS_slim" boxSize={ 5 }/>
<chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
<IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
</Button>
</PopoverTrigger>
<PopoverContent w={{ base: '100vw', lg: '500px' }}>
<PopoverBody px={ 6 } py={ 5 } fontSize="sm" display="flex" flexDir="column" rowGap={ 5 } alignItems="flex-start">
{ mainDomain && (
<div>
<chakra.span color="text_secondary" fontSize="xs">Primary*</chakra.span>
<Flex alignItems="center" fontSize="md" mt={ 2 }>
<EnsEntity name={ mainDomain.name } fontWeight={ 600 } noCopy/>
{ mainDomain.expiry_date &&
<chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiry_date).fromNow() })</chakra.span> }
</Flex>
</div>
) }
{ ownedDomains.length > 0 && (
<div>
<chakra.span color="text_secondary" fontSize="xs">Owned by this address</chakra.span>
<DomainsGrid data={ ownedDomains }/>
</div>
) }
{ resolvedDomains.length > 0 && (
<div>
<chakra.span color="text_secondary" fontSize="xs">Resolved to this address</chakra.span>
<DomainsGrid data={ resolvedDomains }/>
</div>
) }
{ (ownedDomains.length > 9 || resolvedDomains.length > 9) && (
<LinkInternal
href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: addressHash } }) }
>
<span> More results</span>
<chakra.span color="text_secondary"> ({ totalRecords })</chakra.span>
</LinkInternal>
) }
{ mainDomain && (
<chakra.span fontSize="xs" mt={ -1 }>
*A domain name is not necessarily held by a person popularly associated with the name
</chakra.span>
) }
</PopoverBody>
</PopoverContent>
</Popover>
);
};
export default React.memo(AddressEnsDomains);
ui/block/BlockDetails.tsx
View file @ ccfb4fae
......@@ -128,6 +128,17 @@ const BlockDetails = ({ query }: Props) => {
return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
})();
const blockTypeLabel = (() => {
switch (data.type) {
case 'reorg':
return 'Reorg';
case 'uncle':
return 'Uncle';
default:
return 'Block';
}
})();
return (
<Grid
columnGap={ 8 }
......@@ -136,7 +147,7 @@ const BlockDetails = ({ query }: Props) => {
overflow="hidden"
>
<DetailsInfoItem
title={ `${ data.type === 'reorg' ? 'Reorg' : 'Block' } height` }
title={ `${ blockTypeLabel } height` }
hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
isLoading={ isPlaceholderData }
>
......
ui/blocks/BlocksListItem.tsx
View file @ ccfb4fae
......@@ -43,7 +43,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<BlockEntity
isLoading={ isLoading }
number={ data.height }
hash={ data.type === 'reorg' ? data.hash : undefined }
hash={ data.type !== 'block' ? data.hash : undefined }
noIcon
fontWeight={ 600 }
/>
......
ui/blocks/BlocksTabSlot.tsx
View file @ ccfb4fae
......@@ -14,6 +14,11 @@ interface Props {
const BlocksTabSlot = ({ pagination }: Props) => {
const statsQuery = useApiQuery('homepage_stats', {
fetchParams: {
headers: {
'updated-gas-oracle': 'true',
},
},
queryOptions: {
placeholderData: HOMEPAGE_STATS,
},
......
ui/blocks/BlocksTableItem.tsx
View file @ ccfb4fae
......@@ -50,7 +50,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<BlockEntity
isLoading={ isLoading }
number={ data.height }
hash={ data.type === 'reorg' ? data.hash : undefined }
hash={ data.type !== 'block' ? data.hash : undefined }
noIcon
fontSize="sm"
lineHeight={ 5 }
......
ui/home/LatestBlocks.tsx
View file @ ccfb4fae
......@@ -37,7 +37,13 @@ const LatestBlocks = () => {
const queryClient = useQueryClient();
const statsQueryResult = useApiQuery('homepage_stats', {
fetchParams: {
headers: {
'updated-gas-oracle': 'true',
},
},
queryOptions: {
refetchOnMount: false,
placeholderData: HOMEPAGE_STATS,
},
});
......
ui/home/Stats.tsx
View file @ ccfb4fae
......@@ -16,8 +16,14 @@ const hasGasTracker = config.UI.homepage.showGasTracker;
const hasAvgBlockTime = config.UI.homepage.showAvgBlockTime;
const Stats = () => {
const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
const { data, isPlaceholderData, isError, dataUpdatedAt } = useApiQuery('homepage_stats', {
fetchParams: {
headers: {
'updated-gas-oracle': 'true',
},
},
queryOptions: {
refetchOnMount: false,
placeholderData: HOMEPAGE_STATS,
},
});
......@@ -45,7 +51,19 @@ const Stats = () => {
!data.gas_prices && itemsCount--;
data.rootstock_locked_btc && itemsCount++;
const isOdd = Boolean(itemsCount % 2);
const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent gasPrices={ data.gas_prices }/> : null;
const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> : null;
const gasPriceText = (() => {
if (data.gas_prices?.average?.fiat_price) {
return `$${ data.gas_prices.average.fiat_price }`;
}
if (data.gas_prices?.average?.price) {
return `${ data.gas_prices.average.price.toLocaleString() } Gwei`;
}
return 'N/A';
})();
content = (
<>
......@@ -92,7 +110,7 @@ const Stats = () => {
<StatsItem
icon="gas"
title="Gas tracker"
value={ data.gas_prices.average !== null ? `${ Number(data.gas_prices.average).toLocaleString() } Gwei` : 'N/A' }
value={ gasPriceText }
_last={ isOdd ? lastItemTouchStyle : undefined }
tooltipLabel={ gasLabel }
isLoading={ isPlaceholderData }
......
ui/home/indicators/ChainIndicators.tsx
View file @ ccfb4fae
......@@ -3,6 +3,7 @@ import React from 'react';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import { HOMEPAGE_STATS } from 'stubs/stats';
import Hint from 'ui/shared/Hint';
import ChainIndicatorChartContainer from './ChainIndicatorChartContainer';
......@@ -29,7 +30,17 @@ const ChainIndicators = () => {
const indicator = indicators.find(({ id }) => id === selectedIndicator);
const queryResult = useFetchChartData(indicator);
const statsQueryResult = useApiQuery('homepage_stats');
const statsQueryResult = useApiQuery('homepage_stats', {
fetchParams: {
headers: {
'updated-gas-oracle': 'true',
},
},
queryOptions: {
refetchOnMount: false,
placeholderData: HOMEPAGE_STATS,
},
});
const bgColorDesktop = useColorModeValue('white', 'gray.900');
const bgColorMobile = useColorModeValue('white', 'black');
......
ui/l2Deposits/DepositsListItem.tsx
View file @ ccfb4fae
......@@ -65,7 +65,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
<ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<AddressEntityL1
address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '' }}
address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
isLoading={ isLoading }
noCopy
/>
......
ui/l2Deposits/DepositsTableItem.tsx
View file @ ccfb4fae
......@@ -56,7 +56,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
</Td>
<Td verticalAlign="middle">
<AddressEntityL1
address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '' }}
address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
isLoading={ isLoading }
truncation="constant"
noCopy
......
ui/marketplace/MarketplaceAppCard.tsx
View file @ ccfb4fae
......@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
import type { MarketplaceAppPreview } from 'types/client/marketplace';
import * as mixpanel from 'lib/mixpanel/index';
import IconSvg from 'ui/shared/IconSvg';
import MarketplaceAppCardLink from './MarketplaceAppCardLink';
......@@ -43,6 +44,7 @@ const MarketplaceAppCard = ({
const handleInfoClick = useCallback((event: MouseEvent) => {
event.preventDefault();
mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'More button', Info: id });
onInfoClick(id);
}, [ onInfoClick, id ]);
......
ui/marketplace/useMarketplace.tsx
View file @ ccfb4fae
......@@ -6,6 +6,7 @@ import React from 'react';
import { MarketplaceCategory } from 'types/client/marketplace';
import useDebounce from 'lib/hooks/useDebounce';
import * as mixpanel from 'lib/mixpanel/index';
import getQueryParamString from 'lib/router/getQueryParamString';
import useMarketplaceApps from './useMarketplaceApps';
......@@ -33,6 +34,8 @@ export default function useMarketplace() {
const [ isDisclaimerModalOpen, setIsDisclaimerModalOpen ] = React.useState<boolean>(false);
const handleFavoriteClick = React.useCallback((id: string, isFavorite: boolean) => {
mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Favorite app', Info: id });
const favoriteApps = getFavoriteApps();
if (isFavorite) {
......@@ -64,6 +67,7 @@ export default function useMarketplace() {
}, []);
const handleCategoryChange = React.useCallback((newCategory: string) => {
mixpanel.logEvent(mixpanel.EventTypes.FILTERS, { Source: 'Marketplace', 'Filter name': newCategory });
setSelectedCategoryId(newCategory);
}, []);
......@@ -91,6 +95,11 @@ export default function useMarketplace() {
category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId,
filter: debouncedFilterQuery,
}, Boolean);
if (debouncedFilterQuery.length > 0) {
mixpanel.logEvent(mixpanel.EventTypes.LOCAL_SEARCH, { Source: 'Marketplace', 'Search query': debouncedFilterQuery });
}
router.replace(
{ pathname: '/apps', query },
undefined,
......
ui/nameDomain/NameDomainDetails.tsx 0 → 100644
View file @ ccfb4fae
import { Grid, Skeleton, Tooltip, Flex } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query';
import React from 'react';
import type { EnsDomainDetailed } from 'types/api/ens';
import { route } from 'nextjs-routes';
import type { ResourceError } from 'lib/api/resources';
import dayjs from 'lib/date/dayjs';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/LinkInternal';
import TextSeparator from 'ui/shared/TextSeparator';
import NameDomainExpiryStatus from './NameDomainExpiryStatus';
interface Props {
query: UseQueryResult<EnsDomainDetailed, ResourceError<unknown>>;
}
const NameDomainDetails = ({ query }: Props) => {
const isLoading = query.isPlaceholderData;
const otherAddresses = Object.entries(query.data?.other_addresses ?? {});
const hasExpired = query.data?.expiry_date && dayjs(query.data.expiry_date).isBefore(dayjs());
return (
<Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
{ query.data?.registration_date && (
<DetailsInfoItem
title="Registration date"
hint="The date the name was registered"
isLoading={ isLoading }
>
<IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
<Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
{ dayjs(query.data.registration_date).format('llll') }
</Skeleton>
</DetailsInfoItem>
) }
{ query.data?.expiry_date && (
<DetailsInfoItem
title="Expiration date"
// eslint-disable-next-line max-len
hint="The date the name expires, upon which there is a 90 day grace period for the owner to renew. After the 90 days, the name is released to the market"
isLoading={ isLoading }
display="inline-block"
>
<IconSvg name="clock" boxSize={ 5 } color="gray.500" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
{ hasExpired && (
<>
<Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
{ dayjs(query.data.expiry_date).fromNow() }
</Skeleton>
<TextSeparator color="gray.500"/>
</>
) }
<Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
{ dayjs(query.data.expiry_date).format('llll') }
</Skeleton>
<TextSeparator color="gray.500"/>
<Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
<NameDomainExpiryStatus date={ query.data?.expiry_date }/>
</Skeleton>
</DetailsInfoItem>
) }
{ query.data?.registrant && (
<DetailsInfoItem
title="Registrant"
hint="The account that owns the domain name and has the rights to edit its ownership and records"
isLoading={ isLoading }
columnGap={ 2 }
flexWrap="nowrap"
>
<AddressEntity
address={ query.data.registrant }
isLoading={ isLoading }
/>
<Tooltip label="Lookup for related domain names">
<LinkInternal
flexShrink={ 0 }
display="inline-flex"
href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.registrant.hash } }) }
>
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal>
</Tooltip>
</DetailsInfoItem>
) }
{ query.data?.owner && (
<DetailsInfoItem
title="Owner"
hint="The account that owns the rights to edit the records of this domain name"
isLoading={ isLoading }
columnGap={ 2 }
flexWrap="nowrap"
>
<AddressEntity
address={ query.data.owner }
isLoading={ isLoading }
/>
<Tooltip label="Lookup for related domain names">
<LinkInternal
flexShrink={ 0 }
display="inline-flex"
href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.owner.hash } }) }
>
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal>
</Tooltip>
</DetailsInfoItem>
) }
{ query.data?.wrapped_owner && (
<DetailsInfoItem
title="Manager"
hint="Owner of this NFT domain in NameWrapper contract"
isLoading={ isLoading }
columnGap={ 2 }
flexWrap="nowrap"
>
<AddressEntity
address={ query.data.wrapped_owner }
isLoading={ isLoading }
/>
<Tooltip label="Lookup for related domain names">
<LinkInternal
flexShrink={ 0 }
display="inline-flex"
href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: query.data.wrapped_owner.hash } }) }
>
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal>
</Tooltip>
</DetailsInfoItem>
) }
{ query.data?.tokens.map((token) => (
<DetailsInfoItem
key={ token.type }
title={ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'Wrapped token ID' : 'Token ID' }
hint={ `The ${ token.type === 'WRAPPED_DOMAIN_TOKEN' ? 'wrapped ' : '' }token ID of this domain name NFT` }
isLoading={ isLoading }
wordBreak="break-all"
whiteSpace="pre-wrap"
>
<NftEntity hash={ token.contract_hash } id={ token.id } isLoading={ isLoading } noIcon/>
</DetailsInfoItem>
)) }
{ otherAddresses.length > 0 && (
<DetailsInfoItem
title="Other addresses"
hint="Other cryptocurrency addresses added to this domain name"
isLoading={ isLoading }
flexDir="column"
alignItems="flex-start"
>
{ otherAddresses.map(([ type, address ]) => (
<Flex key={ type } columnGap={ 2 } minW="0" w="100%" overflow="hidden">
<Skeleton isLoaded={ !isLoading }>{ type }</Skeleton>
<AddressEntity
address={{ hash: address }}
isLoading={ isLoading }
noLink
noIcon
/>
</Flex>
)) }
</DetailsInfoItem>
) }
</Grid>
);
};
export default React.memo(NameDomainDetails);
ui/nameDomain/NameDomainExpiryStatus.tsx 0 → 100644
View file @ ccfb4fae
import { chakra } from '@chakra-ui/react';
import React from 'react';
import dayjs from 'lib/date/dayjs';
interface Props {
date: string | undefined;
}
const NameDomainExpiryStatus = ({ date }: Props) => {
if (!date) {
return null;
}
const hasExpired = dayjs(date).isBefore(dayjs());
if (hasExpired) {
return <chakra.span color="red.600">Expired</chakra.span>;
}
const diff = dayjs(date).diff(dayjs(), 'day');
if (diff < 30) {
return <chakra.span color="red.600">{ diff } days left</chakra.span>;
}
return <chakra.span color="text_secondary">Expires { dayjs(date).fromNow() }</chakra.span>;
};
export default React.memo(NameDomainExpiryStatus);
ui/nameDomain/NameDomainHistory.tsx 0 → 100644
View file @ ccfb4fae
import { Box, Hide, Show } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import getQueryParamString from 'lib/router/getQueryParamString';
import { ENS_DOMAIN_EVENT } from 'stubs/ENS';
import DataListDisplay from 'ui/shared/DataListDisplay';
import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
import NameDomainHistoryTable from './history/NameDomainHistoryTable';
import { getNextSortValue, type Sort, type SortField } from './history/utils';
const NameDomainHistory = () => {
const router = useRouter();
const domainName = getQueryParamString(router.query.name);
const [ sort, setSort ] = React.useState<Sort>();
const { isPlaceholderData, isError, data } = useApiQuery('domain_events', {
pathParams: { name: domainName, chainId: config.chain.id },
queryOptions: {
placeholderData: { items: Array(4).fill(ENS_DOMAIN_EVENT) },
},
});
const handleSortToggle = React.useCallback((event: React.MouseEvent) => {
if (isPlaceholderData) {
return;
}
const field = (event.currentTarget as HTMLDivElement).getAttribute('data-field') as SortField | undefined;
if (field) {
setSort(getNextSortValue(field));
}
}, [ isPlaceholderData ]);
const content = (
<>
<Show below="lg" ssr={ false }>
<Box>
{ data?.items.map((item, index) => <NameDomainHistoryListItem key={ index } { ...item } isLoading={ isPlaceholderData }/>) }
</Box>
</Show>
<Hide below="lg" ssr={ false }>
<NameDomainHistoryTable
data={ data }
isLoading={ isPlaceholderData }
sort={ sort }
onSortToggle={ handleSortToggle }
/>
</Hide>
</>
);
return (
<DataListDisplay
isError={ isError }
items={ data?.items }
emptyText="There are no events for this domain."
content={ content }
/>
);
};
export default React.memo(NameDomainHistory);
ui/nameDomain/history/NameDomainHistoryListItem.tsx 0 → 100644
View file @ ccfb4fae
import { Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomainEvent } from 'types/api/ens';
import dayjs from 'lib/date/dayjs';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
type Props = EnsDomainEvent & {
isLoading?: boolean;
}
const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHash, timestamp, from_address: fromAddress, action }: Props) => {
return (
<ListItemMobileGrid.Container>
<ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 500 }/>
</ListItemMobileGrid.Value>
<ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
<span>{ dayjs(timestamp).fromNow() }</span>
</Skeleton>
</ListItemMobileGrid.Value>
{ fromAddress && (
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<AddressEntity address={ fromAddress } isLoading={ isLoading }/>
</ListItemMobileGrid.Value>
</>
) }
{ action && (
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>Method</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag>
</ListItemMobileGrid.Value>
</>
) }
</ListItemMobileGrid.Container>
);
};
export default React.memo(NameDomainHistoryListItem);
ui/nameDomain/history/NameDomainHistoryTable.tsx 0 → 100644
View file @ ccfb4fae
import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomainEventsResponse } from 'types/api/ens';
import IconSvg from 'ui/shared/IconSvg';
import { default as Thead } from 'ui/shared/TheadSticky';
import NameDomainHistoryTableItem from './NameDomainHistoryTableItem';
import type { Sort } from './utils';
import { sortFn } from './utils';
interface Props {
data: EnsDomainEventsResponse | undefined;
isLoading?: boolean;
sort: Sort | undefined;
onSortToggle: (event: React.MouseEvent) => void;
}
const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
return (
<Table variant="simple" size="sm">
<Thead top={ 0 }>
<Tr>
<Th width="25%">Txn hash</Th>
<Th width="25%" pl={ 9 }>
<Link display="flex" alignItems="center" justifyContent="flex-start" position="relative" data-field="timestamp" onClick={ onSortToggle }>
{ sort?.includes('timestamp') && (
<IconSvg
name="arrows/east"
boxSize={ 4 }
transform={ sortIconTransform }
color="link"
position="absolute"
left={ -5 }
top={ 0 }
/>
) }
<span>Age</span>
</Link>
</Th>
<Th width="25%">From</Th>
<Th width="25%">Method</Th>
</Tr>
</Thead>
<Tbody>
{
data?.items
.slice()
.sort(sortFn(sort))
.map((item, index) => <NameDomainHistoryTableItem key={ index } { ...item } isLoading={ isLoading }/>)
}
</Tbody>
</Table>
);
};
export default React.memo(NameDomainHistoryTable);
ui/nameDomain/history/NameDomainHistoryTableItem.tsx 0 → 100644
View file @ ccfb4fae
import { Tr, Td, Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomainEvent } from 'types/api/ens';
import dayjs from 'lib/date/dayjs';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
type Props = EnsDomainEvent & {
isLoading?: boolean;
}
const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHash, from_address: fromAddress, action, timestamp }: Props) => {
return (
<Tr>
<Td verticalAlign="middle">
<TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 700 }/>
</Td>
<Td pl={ 9 } verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
<span>{ dayjs(timestamp).fromNow() }</span>
</Skeleton>
</Td>
<Td verticalAlign="middle">
{ fromAddress && <AddressEntity address={ fromAddress } isLoading={ isLoading }/> }
</Td>
<Td verticalAlign="middle">
{ action && <Tag colorScheme="gray" isLoading={ isLoading }>{ action }</Tag> }
</Td>
</Tr>
);
};
export default React.memo(NameDomainHistoryTableItem);
ui/nameDomain/history/utils.ts 0 → 100644
View file @ ccfb4fae
import type { EnsDomainEvent } from 'types/api/ens';
import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
export type SortField = 'timestamp';
export type Sort = `${ SortField }-asc` | `${ SortField }-desc`;
const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
timestamp: [ 'timestamp-desc', 'timestamp-asc', undefined ],
};
export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
export const sortFn = (sort: Sort | undefined) => (a: EnsDomainEvent, b: EnsDomainEvent) => {
switch (sort) {
case 'timestamp-asc': {
return b.timestamp.localeCompare(a.timestamp);
}
case 'timestamp-desc': {
return a.timestamp.localeCompare(b.timestamp);
}
default:
return 0;
}
};
ui/nameDomains/NameDomainsActionBar.tsx 0 → 100644
View file @ ccfb4fae
import { Checkbox, CheckboxGroup, HStack, Text } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomainLookupFiltersOptions } from 'types/api/ens';
import type { PaginationParams } from 'ui/shared/pagination/types';
import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
import ActionBar from 'ui/shared/ActionBar';
import FilterInput from 'ui/shared/filters/FilterInput';
import PopoverFilter from 'ui/shared/filters/PopoverFilter';
import Pagination from 'ui/shared/pagination/Pagination';
import Sort from 'ui/shared/sort/Sort';
import type { Sort as TSort } from './utils';
import { SORT_OPTIONS } from './utils';
interface Props {
pagination: PaginationParams;
searchTerm: string | undefined;
onSearchChange: (value: string) => void;
filterValue: EnsDomainLookupFiltersOptions;
onFilterValueChange: (nextValue: EnsDomainLookupFiltersOptions) => void;
sort: TSort | undefined;
onSortChange: (nextValue: TSort | undefined) => void;
isLoading: boolean;
isAddressSearch: boolean;
}
const NameDomainsActionBar = ({
searchTerm,
onSearchChange,
filterValue,
onFilterValueChange,
sort,
onSortChange,
isLoading,
isAddressSearch,
pagination,
}: Props) => {
const isInitialLoading = useIsInitialLoading(isLoading);
const searchInput = (
<FilterInput
w={{ base: '100%', lg: '360px' }}
minW={{ base: 'auto', lg: '250px' }}
size="xs"
onChange={ onSearchChange }
placeholder="Search by name"
initialValue={ searchTerm }
isLoading={ isInitialLoading }
/>
);
const filter = (
<PopoverFilter appliedFiltersNum={ filterValue.length } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
<div>
<CheckboxGroup size="lg" onChange={ onFilterValueChange } value={ filterValue } defaultValue={ filterValue }>
<Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Address</Text>
<Checkbox value="owned_by" display="block" isDisabled={ !isAddressSearch }>
Owned by
</Checkbox>
<Checkbox
value="resolved_to"
display="block"
mt={ 5 }
mb={ 4 }
pb={ 4 }
borderBottom="1px solid"
borderColor="divider"
isDisabled={ !isAddressSearch }
>
Resolved to address
</Checkbox>
<Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Status</Text>
<Checkbox value="with_inactive" display="block">
Include expired
</Checkbox>
</CheckboxGroup>
</div>
</PopoverFilter>
);
const sortButton = (
<Sort
options={ SORT_OPTIONS }
sort={ sort }
setSort={ onSortChange }
isLoading={ isInitialLoading }
/>
);
return (
<>
<HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
{ filter }
{ sortButton }
{ searchInput }
</HStack>
<ActionBar
mt={ -6 }
display={{ base: pagination.isVisible ? 'flex' : 'none', lg: 'flex' }}
>
<HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
{ filter }
{ searchInput }
</HStack>
<Pagination { ...pagination } ml="auto"/>
</ActionBar>
</>
);
};
export default React.memo(NameDomainsActionBar);
ui/nameDomains/NameDomainsListItem.tsx 0 → 100644
View file @ ccfb4fae
import { Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomain } from 'types/api/ens';
import dayjs from 'lib/date/dayjs';
import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
interface Props extends EnsDomain {
isLoading: boolean;
}
const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
return (
<ListItemMobileGrid.Container>
<ListItemMobileGrid.Label isLoading={ isLoading }>Domain</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 500 }/>
</ListItemMobileGrid.Value>
{ resolvedAddress && (
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/>
</ListItemMobileGrid.Value>
</>
) }
{ registrationDate && (
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading }>
<div>{ dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }</div>
<div> { dayjs(registrationDate).fromNow() }</div>
</Skeleton>
</ListItemMobileGrid.Value>
</>
) }
{ expiryDate && (
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>Expiration date</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
<div>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </div>
<NameDomainExpiryStatus date={ expiryDate }/>
</Skeleton>
</ListItemMobileGrid.Value>
</>
) }
</ListItemMobileGrid.Container>
);
};
export default React.memo(NameDomainsListItem);
ui/nameDomains/NameDomainsTable.tsx 0 → 100644
View file @ ccfb4fae
import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomainLookupResponse } from 'types/api/ens';
import IconSvg from 'ui/shared/IconSvg';
import { default as Thead } from 'ui/shared/TheadSticky';
import NameDomainsTableItem from './NameDomainsTableItem';
import { type Sort } from './utils';
interface Props {
data: EnsDomainLookupResponse | undefined;
isLoading?: boolean;
sort: Sort | undefined;
onSortToggle: (event: React.MouseEvent) => void;
}
const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
const sortIconTransform = sort?.toLowerCase().includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
return (
<Table variant="simple" size="sm">
<Thead top={ 80 }>
<Tr>
<Th width="25%">Domain</Th>
<Th width="25%">Address</Th>
<Th width="25%" pl={ 9 }>
<Link display="flex" alignItems="center" justifyContent="flex-start" position="relative" data-field="registration_date" onClick={ onSortToggle }>
{ sort?.includes('registration_date') && (
<IconSvg
name="arrows/east"
boxSize={ 4 }
transform={ sortIconTransform }
color="link"
position="absolute"
left={ -5 }
top={ 0 }
/>
) }
<span>Registered on</span>
</Link>
</Th>
<Th width="25%">Expiration date</Th>
</Tr>
</Thead>
<Tbody>
{ data?.items.map((item, index) => <NameDomainsTableItem key={ index } { ...item } isLoading={ isLoading }/>) }
</Tbody>
</Table>
);
};
export default React.memo(NameDomainsTable);
ui/nameDomains/NameDomainsTableItem.tsx 0 → 100644
View file @ ccfb4fae
import { chakra, Tr, Td, Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { EnsDomain } from 'types/api/ens';
import dayjs from 'lib/date/dayjs';
import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
type Props = EnsDomain & {
isLoading?: boolean;
}
const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
return (
<Tr>
<Td verticalAlign="middle">
<EnsEntity name={ name } isLoading={ isLoading } fontWeight={ 600 }/>
</Td>
<Td verticalAlign="middle">
{ resolvedAddress && <AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/> }
</Td>
<Td verticalAlign="middle" pl={ 9 }>
{ registrationDate && (
<Skeleton isLoaded={ !isLoading }>
{ dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
<chakra.span color="text_secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
</Skeleton>
) }
</Td>
<Td verticalAlign="middle">
{ expiryDate && (
<Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
<span>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </span>
<NameDomainExpiryStatus date={ expiryDate }/>
</Skeleton>
) }
</Td>
</Tr>
);
};
export default React.memo(NameDomainsTableItem);
ui/nameDomains/utils.ts 0 → 100644
View file @ ccfb4fae
import type { EnsLookupSorting } from 'types/api/ens';
import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
import type { Option } from 'ui/shared/sort/Sort';
export type SortField = EnsLookupSorting['sort'];
export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
export const SORT_OPTIONS: Array<Option<Sort>> = [
{ title: 'Default', id: undefined },
{ title: 'Registered on descending', id: 'registration_date-DESC' },
{ title: 'Registered on ascending', id: 'registration_date-ASC' },
];
const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
registration_date: [ 'registration_date-DESC', 'registration_date-ASC', undefined ],
};
export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
ui/pages/Accounts.pw.tsx
View file @ ccfb4fae
......@@ -21,6 +21,7 @@ const addresses: AddressesResponse = {
...addressMocks.token,
tx_count: '109123890123',
coin_balance: '22222345678901234567890000',
ens_domain_name: null,
}, {
...addressMocks.withoutName,
tx_count: '11',
......
ui/pages/Address.tsx
View file @ ccfb4fae
......@@ -23,11 +23,13 @@ import AddressTxs from 'ui/address/AddressTxs';
import AddressWithdrawals from 'ui/address/AddressWithdrawals';
import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
import AddressQrCode from 'ui/address/details/AddressQrCode';
import AddressEnsDomains from 'ui/address/ensDomains/AddressEnsDomains';
import SolidityscanReport from 'ui/address/SolidityscanReport';
import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
import TextAd from 'ui/shared/ad/TextAd';
import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
import EntityTags from 'ui/shared/EntityTags';
import IconSvg from 'ui/shared/IconSvg';
import NetworkExplorers from 'ui/shared/NetworkExplorers';
......@@ -172,14 +174,25 @@ const AddressPageContent = () => {
const titleSecondRow = (
<Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
{ addressQuery.data?.ens_domain_name && (
<EnsEntity
name={ addressQuery.data?.ens_domain_name }
fontFamily="heading"
fontSize="lg"
fontWeight={ 500 }
mr={ 1 }
maxW="300px"
/>
) }
<AddressEntity
address={{ ...addressQuery.data, hash, name: '' }}
address={{ ...addressQuery.data, hash, name: '', ens_domain_name: '' }}
isLoading={ isLoading }
fontFamily="heading"
fontSize="lg"
fontWeight={ 500 }
noLink
isSafeAddress={ isSafeAddress }
mr={ 4 }
/>
{ !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
<AddressAddToWallet token={ addressQuery.data.token } variant="button"/> }
......@@ -190,6 +203,8 @@ const AddressPageContent = () => {
<AccountActionsMenu isLoading={ isLoading }/>
<HStack ml="auto" gap={ 2 }/>
{ addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && <SolidityscanReport hash={ hash }/> }
{ !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
<AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
<NetworkExplorers type="address" pathParam={ hash }/>
</Flex>
);
......
ui/pages/Block.tsx
View file @ ccfb4fae
......@@ -113,7 +113,18 @@ const BlockPageContent = () => {
};
}, [ appProps.referrer ]);
const title = blockQuery.data?.type === 'reorg' ? `Reorged block #${ blockQuery.data?.height }` : `Block #${ blockQuery.data?.height }`;
const title = (() => {
switch (blockQuery.data?.type) {
case 'reorg':
return `Reorged block #${ blockQuery.data?.height }`;
case 'uncle':
return `Uncle block #${ blockQuery.data?.height }`;
default:
return `Block #${ blockQuery.data?.height }`;
}
})();
const titleSecondRow = (
<>
{ !config.UI.views.block.hiddenFields?.miner && (
......
ui/pages/Login.tsx
View file @ ccfb4fae
......@@ -6,6 +6,7 @@ import React from 'react';
import config from 'configs/app';
import * as cookies from 'lib/cookies';
import useFeatureValue from 'lib/growthbook/useFeatureValue';
import useGradualIncrement from 'lib/hooks/useGradualIncrement';
import useToast from 'lib/hooks/useToast';
import PageTitle from 'ui/shared/Page/PageTitle';
......@@ -15,6 +16,8 @@ const Login = () => {
const toast = useToast();
const [ num, setNum ] = useGradualIncrement(0);
const testFeature = useFeatureValue('test_value', 'fallback');
const [ isFormVisible, setFormVisibility ] = React.useState(false);
const [ token, setToken ] = React.useState('');
......@@ -77,12 +80,15 @@ const Login = () => {
<Button onClick={ handleSetTokenClick }>Set cookie</Button>
</>
) }
<Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
<Button colorScheme="teal" onClick={ checkMixpanel }>Check Mixpanel</Button>
<Flex columnGap={ 2 }>
<Button colorScheme="red" onClick={ checkSentry }>Check Sentry</Button>
<Button colorScheme="teal" onClick={ checkMixpanel }>Check Mixpanel</Button>
</Flex>
<Flex columnGap={ 2 } alignItems="center">
<Box w="50px" textAlign="center">{ num }</Box>
<Button onClick={ handleNumIncrement } size="sm">add</Button>
</Flex>
<Box>Test feature value: <b>{ testFeature.isLoading ? 'loading...' : JSON.stringify(testFeature.value) }</b></Box>
</VStack>
);
......
ui/pages/NameDomain.pw.tsx 0 → 100644
View file @ ccfb4fae
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import config from 'configs/app';
import * as textAdMock from 'mocks/ad/textAd';
import * as ensDomainMock from 'mocks/ens/domain';
import * as ensDomainEventsMock from 'mocks/ens/events';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import NameDomain from './NameDomain';
const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
});
test('details tab', async({ mount, page }) => {
await page.route(DOMAIN_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(ensDomainMock.ensDomainA),
}));
const component = await mount(
<TestApp>
<NameDomain/>
</TestApp>,
{ hooksConfig: {
router: {
query: { name: ensDomainMock.ensDomainA.name },
isReady: true,
},
} },
);
await expect(component).toHaveScreenshot();
});
test('history tab +@mobile', async({ mount, page }) => {
await page.route(DOMAIN_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify(ensDomainMock.ensDomainA),
}));
await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({
items: [
ensDomainEventsMock.ensDomainEventA,
ensDomainEventsMock.ensDomainEventB,
],
totalRecords: 2,
}),
}));
const component = await mount(
<TestApp>
<NameDomain/>
</TestApp>,
{ hooksConfig: {
router: {
query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
isReady: true,
},
} },
);
await expect(component).toHaveScreenshot();
});
ui/pages/NameDomain.tsx 0 → 100644
View file @ ccfb4fae
import { Flex, Tooltip } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import type { RoutedTab } from 'ui/shared/Tabs/types';
import { route } from 'nextjs-routes';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import useIsMobile from 'lib/hooks/useIsMobile';
import getQueryParamString from 'lib/router/getQueryParamString';
import { ENS_DOMAIN } from 'stubs/ENS';
import NameDomainDetails from 'ui/nameDomain/NameDomainDetails';
import NameDomainHistory from 'ui/nameDomain/NameDomainHistory';
import TextAd from 'ui/shared/ad/TextAd';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/LinkInternal';
import PageTitle from 'ui/shared/Page/PageTitle';
import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
const NameDomain = () => {
const isMobile = useIsMobile();
const router = useRouter();
const domainName = getQueryParamString(router.query.name);
const infoQuery = useApiQuery('domain_info', {
pathParams: { name: domainName, chainId: config.chain.id },
queryOptions: {
placeholderData: ENS_DOMAIN,
},
});
const tabs: Array<RoutedTab> = [
{ id: 'details', title: 'Details', component: <NameDomainDetails query={ infoQuery }/> },
{ id: 'history', title: 'History', component: <NameDomainHistory/> },
];
const tabIndex = useTabIndexFromQuery(tabs);
if (infoQuery.isError) {
throw new Error(undefined, { cause: infoQuery.error });
}
const isLoading = infoQuery.isPlaceholderData;
const titleSecondRow = (
<Flex columnGap={ 3 } rowGap={ 3 } fontFamily="heading" fontSize="lg" fontWeight={ 500 } alignItems="center" w="100%">
<EnsEntity
name={ domainName }
isLoading={ isLoading }
noLink
maxW={ infoQuery.data?.resolved_address ? '300px' : 'min-content' }
/>
{ infoQuery.data?.resolved_address && (
<AddressEntity
address={ infoQuery.data?.resolved_address }
isLoading={ isLoading }
truncation={ isMobile ? 'constant' : 'dynamic' }
flexShrink={ 0 }
/>
) }
{ infoQuery.data?.resolved_address && (
<Tooltip label="Lookup for related domain names">
<LinkInternal
flexShrink={ 0 }
display="inline-flex"
href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', address: infoQuery.data?.resolved_address?.hash } }) }
>
<IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
</LinkInternal>
</Tooltip>
) }
</Flex>
);
return (
<>
<TextAd mb={ 6 }/>
<PageTitle title="ENS Domain details" secondRow={ titleSecondRow }/>
{ infoQuery.isPlaceholderData ? (
<>
<TabsSkeleton tabs={ tabs } mt={ 6 }/>
{ tabs[tabIndex]?.component }
</>
) : <RoutedTabs tabs={ tabs }/> }
</>
);
};
export default NameDomain;
ui/pages/NameDomains.pw.tsx 0 → 100644
View file @ ccfb4fae
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import config from 'configs/app';
import * as textAdMock from 'mocks/ad/textAd';
import * as ensDomainMock from 'mocks/ens/domain';
import TestApp from 'playwright/TestApp';
import buildApiUrl from 'playwright/utils/buildApiUrl';
import NameDomains from './NameDomains';
const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id }) + '?only_active=true';
test.beforeEach(async({ page }) => {
await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
status: 200,
body: JSON.stringify(textAdMock.duck),
}));
await page.route(textAdMock.duck.ad.thumbnail, (route) => {
return route.fulfill({
status: 200,
path: './playwright/mocks/image_s.jpg',
});
});
});
test('default view +@mobile', async({ mount, page }) => {
await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
status: 200,
body: JSON.stringify({
items: [
ensDomainMock.ensDomainA,
ensDomainMock.ensDomainB,
ensDomainMock.ensDomainC,
ensDomainMock.ensDomainD,
],
next_page_params: {
token_id: '<token-id>',
},
}),
}));
const component = await mount(
<TestApp>
<NameDomains/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
ui/pages/NameDomains.tsx 0 → 100644
View file @ ccfb4fae
import { Box, Hide, Show } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import type { EnsDomainLookupFiltersOptions, EnsLookupSorting } from 'types/api/ens';
import config from 'configs/app';
import useDebounce from 'lib/hooks/useDebounce';
import { apos } from 'lib/html-entities';
import getQueryParamString from 'lib/router/getQueryParamString';
import { ADDRESS_REGEXP } from 'lib/validations/address';
import { ENS_DOMAIN } from 'stubs/ENS';
import { generateListStub } from 'stubs/utils';
import NameDomainsActionBar from 'ui/nameDomains/NameDomainsActionBar';
import NameDomainsListItem from 'ui/nameDomains/NameDomainsListItem';
import NameDomainsTable from 'ui/nameDomains/NameDomainsTable';
import type { Sort, SortField } from 'ui/nameDomains/utils';
import { SORT_OPTIONS, getNextSortValue } from 'ui/nameDomains/utils';
import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
const NameDomains = () => {
const router = useRouter();
const q = getQueryParamString(router.query.name) || getQueryParamString(router.query.address);
const ownedBy = getQueryParamString(router.query.owned_by);
const resolvedTo = getQueryParamString(router.query.resolved_to);
const onlyActive = getQueryParamString(router.query.only_active);
const initialFilters: EnsDomainLookupFiltersOptions = [
ownedBy === 'true' ? 'owned_by' as const : undefined,
resolvedTo === 'true' ? 'resolved_to' as const : undefined,
onlyActive === 'false' ? 'with_inactive' as const : undefined,
].filter(Boolean);
const initialSort = getSortValueFromQuery<Sort>(router.query, SORT_OPTIONS);
const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
const [ filterValue, setFilterValue ] = React.useState<EnsDomainLookupFiltersOptions>(initialFilters);
const [ sort, setSort ] = React.useState<Sort | undefined>(initialSort);
const debouncedSearchTerm = useDebounce(searchTerm, 300);
const isAddressSearch = React.useMemo(() => ADDRESS_REGEXP.test(debouncedSearchTerm), [ debouncedSearchTerm ]);
const sortParams = getSortParamsFromValue<Sort, EnsLookupSorting['sort'], EnsLookupSorting['order']>(sort);
const addressesLookupQuery = useQueryWithPages({
resourceName: 'addresses_lookup',
pathParams: { chainId: config.chain.id },
filters: {
address: debouncedSearchTerm,
resolved_to: filterValue.includes('resolved_to'),
owned_by: filterValue.includes('owned_by'),
only_active: !filterValue.includes('with_inactive'),
},
sorting: sortParams,
options: {
enabled: isAddressSearch,
placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
},
});
const domainsLookupQuery = useQueryWithPages({
resourceName: 'domains_lookup',
pathParams: { chainId: config.chain.id },
filters: {
name: debouncedSearchTerm,
only_active: !filterValue.includes('with_inactive'),
},
sorting: sortParams,
options: {
enabled: !isAddressSearch,
placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
},
});
const query = isAddressSearch ? addressesLookupQuery : domainsLookupQuery;
const { data, isError, isPlaceholderData: isLoading, onFilterChange, onSortingChange } = query;
React.useEffect(() => {
const hasInactiveFilter = filterValue.some((value) => value === 'with_inactive');
if (isAddressSearch) {
setFilterValue([ 'owned_by' as const, 'resolved_to' as const, hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
onFilterChange<'addresses_lookup'>({
address: debouncedSearchTerm,
resolved_to: true,
owned_by: true,
only_active: !hasInactiveFilter,
});
} else {
setFilterValue([ hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
onFilterChange<'domains_lookup'>({
name: debouncedSearchTerm,
only_active: !hasInactiveFilter,
});
}
// should run only the type of search changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ isAddressSearch ]);
const handleSortToggle = React.useCallback((event: React.MouseEvent) => {
if (isLoading) {
return;
}
const field = (event.currentTarget as HTMLDivElement).getAttribute('data-field') as SortField | undefined;
if (field) {
setSort((prevValue) => {
const nextSortValue = getNextSortValue(field)(prevValue);
onSortingChange(getSortParamsFromValue(nextSortValue));
return nextSortValue;
});
}
}, [ isLoading, onSortingChange ]);
const handleSearchTermChange = React.useCallback((value: string) => {
setSearchTerm(value);
const isAddressSearch = ADDRESS_REGEXP.test(value);
if (isAddressSearch) {
onFilterChange<'addresses_lookup'>({
address: value,
resolved_to: filterValue.includes('resolved_to'),
owned_by: filterValue.includes('owned_by'),
only_active: !filterValue.includes('with_inactive'),
});
} else {
onFilterChange<'domains_lookup'>({
name: value,
only_active: !filterValue.includes('with_inactive'),
});
}
}, [ onFilterChange, filterValue ]);
const handleFilterValueChange = React.useCallback((value: EnsDomainLookupFiltersOptions) => {
setFilterValue(value);
const isAddressSearch = ADDRESS_REGEXP.test(debouncedSearchTerm);
if (isAddressSearch) {
onFilterChange<'addresses_lookup'>({
address: debouncedSearchTerm,
resolved_to: value.includes('resolved_to'),
owned_by: value.includes('owned_by'),
only_active: !value.includes('with_inactive'),
});
} else {
onFilterChange<'domains_lookup'>({
name: debouncedSearchTerm,
only_active: !value.includes('with_inactive'),
});
}
}, [ debouncedSearchTerm, onFilterChange ]);
const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0;
const content = (
<>
<Show below="lg" ssr={ false }>
<Box>
{ data?.items.map((item, index) => (
<NameDomainsListItem
key={ item.id + (isLoading ? index : '') }
{ ...item }
isLoading={ isLoading }
/>
)) }
</Box>
</Show>
<Hide below="lg" ssr={ false }>
<NameDomainsTable
data={ data }
isLoading={ isLoading }
sort={ sort }
onSortToggle={ handleSortToggle }
/>
</Hide>
</>
);
const actionBar = (
<NameDomainsActionBar
isLoading={ isLoading }
searchTerm={ searchTerm }
onSearchChange={ handleSearchTermChange }
filterValue={ filterValue }
onFilterValueChange={ handleFilterValueChange }
sort={ sort }
onSortChange={ setSort }
isAddressSearch={ isAddressSearch }
pagination={ query.pagination }
/>
);
return (
<>
<PageTitle title="ENS domains lookup" withTextAd/>
<DataListDisplay
isError={ isError }
items={ data?.items }
emptyText="There are no name domains."
filterProps={{
emptyFilteredText: `Couldn${ apos }t find name domains that match your filter query.`,
hasActiveFilters,
}}
content={ content }
actionBar={ actionBar }
/>
</>
);
};
export default NameDomains;
ui/pages/SearchResults.pw.tsx
View file @ ccfb4fae
......@@ -32,6 +32,7 @@ test.describe('search by name ', () => {
searchMock.token1,
searchMock.token2,
searchMock.contract1,
searchMock.address2,
searchMock.label1,
],
}),
......@@ -91,6 +92,7 @@ test('search by block number +@mobile', async({ mount, page }) => {
items: [
searchMock.block1,
searchMock.block2,
searchMock.block3,
],
}),
}));
......
ui/searchResults/SearchResultListItem.tsx
View file @ ccfb4fae
import { Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import { chakra, Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import React from 'react';
import xss from 'xss';
......@@ -10,6 +10,7 @@ import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
import { ADDRESS_REGEXP } from 'lib/validations/address';
import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
......@@ -73,13 +74,14 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
case 'contract':
case 'address': {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
ens_domain_name: null,
};
return (
......@@ -173,6 +175,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
/>
</BlockEntity.Link>
{ data.block_type === 'reorg' && <Tag ml={ 2 }>Reorg</Tag> }
{ data.block_type === 'uncle' && <Tag ml={ 2 }>Uncle</Tag> }
</BlockEntity.Container>
);
}
......@@ -264,8 +267,23 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
}
case 'contract':
case 'address': {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
return data.name ? <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(data.name) : highlightText(data.name, searchTerm) }}/> : null;
const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
const addressName = data.name || data.ens_info?.name;
const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
return addressName ? (
<>
<span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
{ data.ens_info &&
(
data.ens_info.names_count > 1 ?
<chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
<chakra.span color="text_secondary">{ expiresText }</chakra.span>
)
}
</>
) :
null;
}
default:
......
ui/searchResults/SearchResultTableItem.tsx
View file @ ccfb4fae
import { Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import { chakra, Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import React from 'react';
import xss from 'xss';
......@@ -10,6 +10,7 @@ import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
import { ADDRESS_REGEXP } from 'lib/validations/address';
import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
......@@ -20,7 +21,6 @@ import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal';
import type { SearchResultAppItem } from 'ui/shared/search/utils';
import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
interface Props {
data: SearchResultItem | SearchResultAppItem;
searchTerm: string;
......@@ -91,70 +91,51 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
case 'contract':
case 'address': {
if (data.name) {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
};
return (
<>
<Td fontSize="sm">
<AddressEntity.Container>
<AddressEntity.Icon address={ address }/>
<AddressEntity.Link
address={ address }
onClick={ handleLinkClick }
>
<AddressEntity.Content
asProp={ shouldHighlightHash ? 'mark' : 'span' }
address={ address }
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 700 }
/>
</AddressEntity.Link>
<AddressEntity.Copy address={ address }/>
</AddressEntity.Container>
</Td>
<Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
<span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(data.name) : highlightText(data.name, searchTerm) }}/>
</Td>
</>
);
}
const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
const addressName = data.name || data.ens_info?.name;
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
ens_domain_name: null,
};
const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
return (
<Td colSpan={ 3 } fontSize="sm">
<AddressEntity.Container>
<AddressEntity.Icon address={ address }/>
<AddressEntity.Link
address={ address }
onClick={ handleLinkClick }
>
<AddressEntity.Content
asProp="mark"
<>
<Td fontSize="sm" colSpan={ addressName ? 1 : 3 }>
<AddressEntity.Container>
<AddressEntity.Icon address={ address }/>
<AddressEntity.Link
address={ address }
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 700 }
/>
</AddressEntity.Link>
<AddressEntity.Copy address={ address }/>
</AddressEntity.Container>
</Td>
onClick={ handleLinkClick }
>
<AddressEntity.Content
asProp={ shouldHighlightHash ? 'mark' : 'span' }
address={ address }
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 700 }
/>
</AddressEntity.Link>
<AddressEntity.Copy address={ address }/>
</AddressEntity.Container>
</Td>
{ addressName && (
<Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
<span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
{ data.ens_info &&
(
data.ens_info.names_count > 1 ?
<chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
<chakra.span color="text_secondary">{ expiresText }</chakra.span>
)
}
</Td>
) }
</>
);
}
......@@ -263,6 +244,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<Td fontSize="sm" verticalAlign="middle">
<Flex columnGap={ 2 } alignItems="center">
{ data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
{ data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
<Box overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
<HashStringShortenDynamic hash={ data.block_hash }/>
</Box>
......
ui/shared/GasInfoTooltipContent/GasInfoRow.tsx 0 → 100644
View file @ ccfb4fae
import { GridItem, chakra } from '@chakra-ui/react';
import React from 'react';
import type { GasPriceInfo } from 'types/api/stats';
import { asymp, space } from 'lib/html-entities';
interface Props {
name: string;
info: GasPriceInfo | null;
}
const GasInfoRow = ({ name, info }: Props) => {
const content = (() => {
if (!info || info.price === null) {
return 'N/A';
}
return (
<>
<span>{ info.fiat_price ? `$${ info.fiat_price }` : `${ info.price } Gwei` }</span>
{ info.time && (
<chakra.span color="text_secondary">
{ space }per tx { asymp } { (info.time / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s
</chakra.span>
) }
</>
);
})();
return (
<>
<GridItem color="blue.100">{ name }</GridItem>
<GridItem color="text" textAlign="right">{ content }</GridItem>
</>
);
};
export default React.memo(GasInfoRow);
ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx
View file @ ccfb4fae
import { Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
import { DarkMode, Grid, GridItem } from '@chakra-ui/react';
import React from 'react';
import type { GasPrices } from 'types/api/stats';
import type { HomeStats } from 'types/api/stats';
const GasInfoTooltipContent = ({ gasPrices }: {gasPrices: GasPrices}) => {
const nameStyleProps = {
color: useColorModeValue('blue.100', 'blue.600'),
};
import dayjs from 'lib/date/dayjs';
import GasInfoRow from './GasInfoRow';
import GasInfoUpdateTimer from './GasInfoUpdateTimer';
interface Props {
data: HomeStats;
dataUpdatedAt: number;
}
const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
if (!data.gas_prices) {
return null;
}
return (
<Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs">
<GridItem { ...nameStyleProps }>Slow</GridItem>
<GridItem>{ gasPrices.slow !== null ? `${ gasPrices.slow } Gwei` : 'N/A' }</GridItem>
<GridItem { ...nameStyleProps }>Average</GridItem>
<GridItem>{ gasPrices.average !== null ? `${ gasPrices.average } Gwei` : 'N/A' }</GridItem>
<GridItem { ...nameStyleProps }>Fast</GridItem>
<GridItem>{ gasPrices.fast !== null ? `${ gasPrices.fast } Gwei` : 'N/A' }</GridItem>
</Grid>
<DarkMode>
<Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
{ data.gas_price_updated_at && (
<>
<GridItem color="text_secondary">Last update</GridItem>
<GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
{ dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
{ data.gas_prices_update_in !== 0 &&
<GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
</GridItem>
</>
) }
<GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
<GasInfoRow name="Normal" info={ data.gas_prices.average }/>
<GasInfoRow name="Fast" info={ data.gas_prices.fast }/>
</Grid>
</DarkMode>
);
};
......
ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx 0 → 100644
View file @ ccfb4fae
import { CircularProgress } from '@chakra-ui/react';
import React from 'react';
import dayjs from 'lib/date/dayjs';
interface Props {
startTime: number;
duration: number;
}
const getValue = (startDate: dayjs.Dayjs, duration: number) => {
const now = dayjs();
const diff = now.diff(startDate, 'ms');
const value = diff / duration * 100;
if (value >= 99) {
return 99;
}
return value;
};
const GasInfoUpdateTimer = ({ startTime, duration }: Props) => {
const [ value, setValue ] = React.useState(getValue(dayjs(startTime), duration));
React.useEffect(() => {
const startDate = dayjs(startTime);
const intervalId = window.setInterval(() => {
const nextValue = getValue(startDate, duration);
setValue(nextValue);
if (nextValue === 99) {
window.clearInterval(intervalId);
}
}, 100);
return () => {
window.clearInterval(intervalId);
};
}, [ startTime, duration ]);
return <CircularProgress value={ value } trackColor="whiteAlpha.100" size={ 4 }/>;
};
export default React.memo(GasInfoUpdateTimer);
ui/shared/Tabs/TabsWithScroll.tsx
View file @ ccfb4fae
......@@ -11,6 +11,8 @@ import React, { useEffect, useRef, useState } from 'react';
import type { TabItem } from './types';
import isBrowser from 'lib/isBrowser';
import AdaptiveTabsList from './AdaptiveTabsList';
import { menuButton } from './utils';
......@@ -39,7 +41,7 @@ const TabsWithScroll = ({
...themeProps
}: Props) => {
const [ activeTabIndex, setActiveTabIndex ] = useState<number>(defaultTabIndex || 0);
const [ screenWidth, setScreenWidth ] = React.useState(0);
const [ screenWidth, setScreenWidth ] = React.useState(isBrowser() ? window.innerWidth : 0);
const tabsRef = useRef<HTMLDivElement>(null);
......
ui/shared/TokenTransfer/TokenTransferFilter.tsx
View file @ ccfb4fae
......@@ -55,7 +55,6 @@ const TokenTransferFilter = ({
</RadioGroup>
</>
) }
<Text variant="secondary" fontWeight={ 600 }>Type</Text>
<TokenTypeFilter<TokenType> onChange={ onTypeFilterChange } defaultValue={ defaultTypeFilters } nftOnly={ false }/>
</PopoverFilter>
);
......
ui/shared/entities/address/AddressEntity.pw.tsx
View file @ ccfb4fae
......@@ -82,6 +82,19 @@ test.describe('loading', () => {
await expect(component).toHaveScreenshot();
});
});
test('with ENS', async({ mount }) => {
const component = await mount(
<TestApp>
<AddressEntity
address={ addressMock.withEns }
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
test('external link', async({ mount }) => {
......
ui/shared/entities/address/AddressEntity.tsx
View file @ ccfb4fae
......@@ -99,10 +99,11 @@ const Icon = (props: IconProps) => {
type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'>;
const Content = chakra((props: ContentProps) => {
if (props.address.name) {
if (props.address.name || props.address.ens_domain_name) {
const text = props.address.ens_domain_name || props.address.name;
const label = (
<VStack gap={ 0 } py={ 1 } color="inherit">
<Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.name }</Box>
<Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ text }</Box>
<Box whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.hash }</Box>
</VStack>
);
......@@ -110,7 +111,7 @@ const Content = chakra((props: ContentProps) => {
return (
<Tooltip label={ label } maxW="100vw">
<Skeleton isLoaded={ !props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" as="span">
{ props.address.name }
{ text }
</Skeleton>
</Tooltip>
);
......@@ -138,7 +139,7 @@ const Copy = (props: CopyProps) => {
const Container = EntityBase.Container;
export interface EntityProps extends EntityBase.EntityBaseProps {
address: Pick<AddressParam, 'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementation_name'>;
address: Pick<AddressParam, 'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementation_name' | 'ens_domain_name'>;
isSafeAddress?: boolean;
}
......
ui/shared/entities/ens/EnsEntity.pw.tsx 0 → 100644
View file @ ccfb4fae
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import EnsEntity from './EnsEntity';
const name = 'cat.eth';
const iconSizes = [ 'md', 'lg' ];
test.use({ viewport: { width: 180, height: 30 } });
test.describe('icon size', () => {
iconSizes.forEach((size) => {
test(size, async({ mount }) => {
const component = await mount(
<TestApp>
<EnsEntity
name={ name }
iconSize={ size }
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
});
});
test('loading', async({ mount }) => {
const component = await mount(
<TestApp>
<EnsEntity
name={ name }
isLoading
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
test('with long name', async({ mount }) => {
const component = await mount(
<TestApp>
<EnsEntity
name="kitty.kitty.kitty.cat.eth"
/>
</TestApp>,
);
await component.getByText(name.slice(0, 4)).hover();
await expect(component).toHaveScreenshot();
});
test('customization', async({ mount }) => {
const component = await mount(
<TestApp>
<EnsEntity
name={ name }
p={ 3 }
borderWidth="1px"
borderColor="blue.700"
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
ui/shared/entities/ens/EnsEntity.tsx 0 → 100644
View file @ ccfb4fae
import { chakra } from '@chakra-ui/react';
import _omit from 'lodash/omit';
import React from 'react';
import { route } from 'nextjs-routes';
import * as EntityBase from 'ui/shared/entities/base/components';
import TruncatedValue from 'ui/shared/TruncatedValue';
type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'name'>;
const Link = chakra((props: LinkProps) => {
const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.name } });
return (
<EntityBase.Link
{ ...props }
href={ props.href ?? defaultHref }
>
{ props.children }
</EntityBase.Link>
);
});
type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
iconName?: EntityBase.IconBaseProps['name'];
};
const Icon = (props: IconProps) => {
return (
<EntityBase.Icon
{ ...props }
name={ props.iconName ?? 'ENS_slim' }
/>
);
};
type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'name'>;
const Content = chakra((props: ContentProps) => {
return (
<TruncatedValue
isLoading={ props.isLoading }
value={ props.name }
/>
);
});
type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'name'>;
const Copy = (props: CopyProps) => {
return (
<EntityBase.Copy
{ ...props }
text={ props.name }
/>
);
};
const Container = EntityBase.Container;
export interface EntityProps extends EntityBase.EntityBaseProps {
name: string;
}
const EnsEntity = (props: EntityProps) => {
const linkProps = _omit(props, [ 'className' ]);
const partsProps = _omit(props, [ 'className', 'onClick' ]);
return (
<Container className={ props.className }>
<Icon { ...partsProps }/>
<Link { ...linkProps }>
<Content { ...partsProps }/>
</Link>
<Copy { ...partsProps }/>
</Container>
);
};
export default React.memo(chakra(EnsEntity));
export {
Container,
Link,
Icon,
Content,
Copy,
};
ui/shared/filters/FilterButton.tsx
View file @ ccfb4fae
......@@ -19,7 +19,7 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
if (isLoading) {
return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base"/>;
return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;
}
return (
......
ui/shared/filters/FilterInput.tsx
View file @ ccfb4fae
......@@ -37,6 +37,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
isLoaded={ !isLoading }
className={ className }
minW="250px"
borderRadius="base"
>
<InputGroup
size={ size }
......
ui/shared/layout/LayoutApp.tsx
View file @ ccfb4fae
......@@ -3,7 +3,6 @@ import React from 'react';
import type { Props } from './types';
import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
import HeaderAlert from 'ui/snippets/header/HeaderAlert';
import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
import HeaderMobile from 'ui/snippets/header/HeaderMobile';
......@@ -19,7 +18,6 @@ const LayoutDefault = ({ children }: Props) => {
paddingTop={{ base: 16, lg: 6 }}
paddingX={{ base: 4, lg: 6 }}
>
<HeaderAlert/>
<HeaderDesktop isMarketplaceAppPage/>
<AppErrorBoundary>
<Layout.Content pt={{ base: 0, lg: 6 }}>
......
ui/shared/layout/components/MainArea.tsx
View file @ ccfb4fae
......@@ -7,7 +7,7 @@ interface Props {
const MainArea = ({ children }: Props) => {
return (
<Flex w="100%" minH="100vh" alignItems="stretch">
<Flex w="100%" minH="calc(100vh - 36px)" alignItems="stretch">
{ children }
</Flex>
);
......
ui/shared/nft/NftMedia.tsx
View file @ ccfb4fae
......@@ -20,13 +20,19 @@ interface Props {
}
const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
const [ isMediaLoading, setIsMediaLoading ] = React.useState(Boolean(url));
const [ isMediaLoading, setIsMediaLoading ] = React.useState(true);
const [ isLoadingError, setIsLoadingError ] = React.useState(false);
const { ref, inView } = useInView({ triggerOnce: true });
const type = useNftMediaType(url, !isLoading && inView);
React.useEffect(() => {
if (!isLoading) {
setIsMediaLoading(Boolean(url));
}
}, [ isLoading, url ]);
const handleMediaLoaded = React.useCallback(() => {
setIsMediaLoading(false);
}, []);
......
ui/shared/pagination/useQueryWithPages.ts
View file @ ccfb4fae
......@@ -37,7 +37,7 @@ function getPaginationParamsFromQuery(queryString: string | Array<string> | unde
export type QueryWithPagesResult<Resource extends PaginatedResources> =
UseQueryResult<ResourcePayload<Resource>, ResourceError<unknown>> &
{
onFilterChange: (filters: PaginationFilters<Resource>) => void;
onFilterChange: <R extends PaginatedResources = Resource>(filters: PaginationFilters<R>) => void;
onSortingChange: (sorting?: PaginationSorting<Resource>) => void;
pagination: PaginationParams;
}
......@@ -136,12 +136,13 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
});
}, [ queryClient, resourceName, router, scrollToTop ]);
const onFilterChange = useCallback((newFilters: PaginationFilters<Resource> | undefined) => {
const onFilterChange = useCallback(<R extends PaginatedResources = Resource>(newFilters: PaginationFilters<R> | undefined) => {
const newQuery = omit<typeof router.query>(router.query, 'next_page_params', 'page', resource.filterFields);
if (newFilters) {
Object.entries(newFilters).forEach(([ key, value ]) => {
if (value && value.length) {
newQuery[key] = Array.isArray(value) ? value.join(',') : (value || '');
const isValidValue = typeof value === 'boolean' || (value && value.length);
if (isValidValue) {
newQuery[key] = Array.isArray(value) ? value.join(',') : (String(value) || '');
}
});
}
......
ui/shared/verificationSteps/VerificationStep.tsx
View file @ ccfb4fae
import { Text, HStack } from '@chakra-ui/react';
import { HStack, Box } from '@chakra-ui/react';
import React from 'react';
import type { Step } from './types';
......@@ -17,7 +17,7 @@ const VerificationStep = ({ step, isLast, isPassed }: Props) => {
return (
<HStack gap={ 2 } color={ stepColor }>
<IconSvg name={ isPassed ? 'finalized' : 'unfinalized' } boxSize={ 5 }/>
<Text color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Text>
<Box color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Box>
{ !isLast && <IconSvg name="arrows/east" boxSize={ 5 }/> }
</HStack>
);
......
ui/shared/verificationSteps/VerificationSteps.tsx
View file @ ccfb4fae
......@@ -30,7 +30,7 @@ const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className
>
{ steps.map((step, index) => (
<VerificationStep
key={ currentStep }
key={ index }
step={ step }
isLast={ index === steps.length - 1 && !rightSlot }
isPassed={ index <= currentStepIndex }
......
ui/snippets/searchBar/SearchBar.pw.tsx
View file @ ccfb4fae
......@@ -65,6 +65,7 @@ test('search by contract name +@mobile +@dark-mode', async({ mount, page }) =>
status: 200,
body: JSON.stringify([
searchMock.contract1,
searchMock.address2,
]),
}));
......@@ -148,6 +149,7 @@ test('search by block number +@mobile', async({ mount, page }) => {
body: JSON.stringify([
searchMock.block1,
searchMock.block2,
searchMock.block3,
]),
}));
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
View file @ ccfb4fae
import { Box, Text, Flex } from '@chakra-ui/react';
import { chakra, Box, Text, Flex } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultAddressOrContract } from 'types/api/search';
import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import { ADDRESS_REGEXP } from 'lib/validations/address';
import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
......@@ -14,23 +16,41 @@ interface Props {
}
const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
const icon = (
<AddressEntity.Icon
address={{ hash: data.address, is_contract: data.type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
address={{
hash: data.address,
is_contract: data.type === 'contract',
name: '',
is_verified: data.is_smart_contract_verified,
implementation_name: null,
ens_domain_name: null,
}}
/>
);
const name = data.name && (
const addressName = data.name || data.ens_info?.name;
const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
const nameEl = addressName && (
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
<chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(addressName, searchTerm) }}/>
{ data.ens_info &&
(
data.ens_info.names_count > 1 ?
<span> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</span> :
<span>{ expiresText }</span>
)
}
</Text>
);
const address = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
const addressEl = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
if (isMobile) {
return (
......@@ -44,10 +64,10 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
whiteSpace="nowrap"
fontWeight={ 700 }
>
{ address }
{ addressEl }
</Box>
</Flex>
{ name }
{ nameEl }
</>
);
}
......@@ -63,10 +83,10 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
whiteSpace="nowrap"
fontWeight={ 700 }
>
{ address }
{ addressEl }
</Box>
</Flex>
{ name }
{ nameEl }
</Flex>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
View file @ ccfb4fae
......@@ -47,6 +47,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
{ icon }
{ blockNumber }
{ data.block_type === 'reorg' && <Tag ml="auto">Reorg</Tag> }
{ data.block_type === 'uncle' && <Tag ml="auto">Uncle</Tag> }
</Flex>
{ hash }
<Text variant="secondary">{ date }</Text>
......@@ -62,6 +63,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
</Flex>
<Flex columnGap={ 3 } minW={ 0 } alignItems="center">
{ data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
{ data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
{ hash }
</Flex>
<Text variant="secondary" textAlign="end">{ date }</Text>
......
ui/snippets/topBar/TopBar.pw.tsx
View file @ ccfb4fae
......@@ -19,7 +19,7 @@ test('default view +@dark-mode +@mobile', async({ mount, page }) => {
</TestApp>,
);
await component.getByText(/gwei/i).hover();
await component.getByText(/\$1\.01/).hover();
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
await component.getByLabel('color mode switch').click();
......
ui/snippets/topBar/TopBarStats.tsx
View file @ ccfb4fae
import { Flex, LightMode, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
import { Flex, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import dayjs from 'lib/date/dayjs';
import { HOMEPAGE_STATS } from 'stubs/stats';
import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
import TextSeparator from 'ui/shared/TextSeparator';
......@@ -16,13 +17,39 @@ const TopBarStats = () => {
onToggle();
}, [ onToggle ]);
const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
const { data, isPlaceholderData, isError, refetch, dataUpdatedAt } = useApiQuery('homepage_stats', {
fetchParams: {
headers: {
'updated-gas-oracle': 'true',
},
},
queryOptions: {
placeholderData: HOMEPAGE_STATS,
refetchOnMount: false,
},
});
React.useEffect(() => {
if (isPlaceholderData || !data?.gas_price_updated_at) {
return;
}
const endDate = dayjs(dataUpdatedAt).add(data.gas_prices_update_in, 'ms');
const timeout = endDate.diff(dayjs(), 'ms');
if (timeout <= 0) {
return;
}
const timeoutId = window.setTimeout(() => {
refetch();
}, timeout);
return () => {
window.clearTimeout(timeoutId);
};
}, [ isPlaceholderData, data?.gas_price_updated_at, dataUpdatedAt, data?.gas_prices_update_in, refetch ]);
if (isError) {
return <div/>;
}
......@@ -34,35 +61,42 @@ const TopBarStats = () => {
fontWeight={ 500 }
>
{ data?.coin_price && (
<Skeleton isLoaded={ !isPlaceholderData }>
<chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
<span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
</Skeleton>
<Flex columnGap={ 1 }>
<Skeleton isLoaded={ !isPlaceholderData }>
<chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
<span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
</Skeleton>
{ data.coin_price_change_percentage && (
<Skeleton isLoaded={ !isPlaceholderData }>
<chakra.span color={ Number(data.coin_price_change_percentage) >= 0 ? 'green.500' : 'red.500' }>
{ Number(data.coin_price_change_percentage).toFixed(2) }%
</chakra.span>
</Skeleton>
) }
</Flex>
) }
{ data?.coin_price && config.UI.homepage.showGasTracker && <TextSeparator color="divider"/> }
{ data?.gas_prices && data.gas_prices.average !== null && config.UI.homepage.showGasTracker && (
<Skeleton isLoaded={ !isPlaceholderData }>
<chakra.span color="text_secondary">Gas </chakra.span>
<LightMode>
<Tooltip
label={ <GasInfoTooltipContent gasPrices={ data.gas_prices }/> }
hasArrow={ false }
borderRadius="md"
offset={ [ 0, 16 ] }
bgColor="blackAlpha.900"
p={ 0 }
isOpen={ isOpen }
<Tooltip
label={ <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> }
hasArrow={ false }
borderRadius="md"
offset={ [ 0, 16 ] }
bgColor="blackAlpha.900"
p={ 0 }
isOpen={ isOpen }
>
<Link
_hover={{ textDecoration: 'none', color: 'link_hovered' }}
onClick={ handleClick }
onMouseEnter={ onOpen }
onMouseLeave={ onClose }
>
<Link
_hover={{ textDecoration: 'none', color: 'link_hovered' }}
onClick={ handleClick }
onMouseEnter={ onOpen }
onMouseLeave={ onClose }
>
{ data.gas_prices.average } Gwei
</Link>
</Tooltip>
</LightMode>
{ data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
</Link>
</Tooltip>
</Skeleton>
) }
</Flex>
......
ui/snippets/walletMenu/WalletMenuContent.tsx
View file @ ccfb4fae
import { Box, Button, Text } from '@chakra-ui/react';
import React from 'react';
import * as mixpanel from 'lib/mixpanel/index';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
......@@ -9,38 +10,45 @@ type Props = {
disconnect?: () => void;
};
const WalletMenuContent = ({ address, disconnect }: Props) => (
<Box>
<Text
fontSize="sm"
fontWeight={ 600 }
mb={ 1 }
{ ...getDefaultTransitionProps() }
>
My wallet
</Text>
<Text
fontSize="sm"
mb={ 5 }
fontWeight={ 400 }
color="text_secondary"
{ ...getDefaultTransitionProps() }
>
Your wallet is used to interact with apps and contracts in the explorer.
</Text>
<AddressEntity
address={{ hash: address }}
noTooltip
truncation="dynamic"
fontSize="sm"
fontWeight={ 700 }
color="text"
mb={ 6 }
/>
<Button size="sm" width="full" variant="outline" onClick={ disconnect }>
Disconnect
</Button>
</Box>
);
const WalletMenuContent = ({ address, disconnect }: Props) => {
const onAddressClick = React.useCallback(() => {
mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Address click' });
}, []);
return (
<Box>
<Text
fontSize="sm"
fontWeight={ 600 }
mb={ 1 }
{ ...getDefaultTransitionProps() }
>
My wallet
</Text>
<Text
fontSize="sm"
mb={ 5 }
fontWeight={ 400 }
color="text_secondary"
{ ...getDefaultTransitionProps() }
>
Your wallet is used to interact with apps and contracts in the explorer.
</Text>
<AddressEntity
address={{ hash: address }}
noTooltip
truncation="dynamic"
fontSize="sm"
fontWeight={ 700 }
color="text"
mb={ 6 }
onClick={ onAddressClick }
/>
<Button size="sm" width="full" variant="outline" onClick={ disconnect }>
Disconnect
</Button>
</Box>
);
};
export default WalletMenuContent;
ui/snippets/walletMenu/WalletMenuDesktop.tsx
View file @ ccfb4fae
......@@ -3,6 +3,7 @@ import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useB
import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import * as mixpanel from 'lib/mixpanel/index';
import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
import HashStringShorten from 'ui/shared/HashStringShorten';
import useWallet from 'ui/snippets/walletMenu/useWallet';
......@@ -48,6 +49,11 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
};
}
const openPopover = React.useCallback(() => {
mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
setIsPopoverOpen.on();
}, [ setIsPopoverOpen ]);
return (
<Popover
openDelay={ 300 }
......@@ -66,7 +72,7 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
flexShrink={ 0 }
isLoading={ isModalOpening || isModalOpen }
loadingText="Connect wallet"
onClick={ isWalletConnected ? setIsPopoverOpen.on : connect }
onClick={ isWalletConnected ? openPopover : connect }
fontSize="sm"
{ ...buttonStyles }
>
......
ui/snippets/walletMenu/WalletMenuMobile.tsx
View file @ ccfb4fae
......@@ -2,6 +2,7 @@ import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconBu
import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import * as mixpanel from 'lib/mixpanel/index';
import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
import IconSvg from 'ui/shared/IconSvg';
import useWallet from 'ui/snippets/walletMenu/useWallet';
......@@ -16,6 +17,11 @@ const WalletMenuMobile = () => {
const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
const isMobile = useIsMobile();
const openPopover = React.useCallback(() => {
mixpanel.logEvent(mixpanel.EventTypes.WALLET_ACTION, { Action: 'Open' });
onOpen();
}, [ onOpen ]);
return (
<>
<WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || !isMobile } isMobile>
......@@ -32,7 +38,7 @@ const WalletMenuMobile = () => {
bg={ isWalletConnected ? themedBackground : undefined }
color={ themedColor }
borderColor={ !isWalletConnected ? themedBorderColor : undefined }
onClick={ isWalletConnected ? onOpen : connect }
onClick={ isWalletConnected ? openPopover : connect }
isLoading={ isModalOpening || isModalOpen }
/>
</WalletTooltip>
......
ui/snippets/walletMenu/WalletTooltip.tsx
View file @ ccfb4fae
......@@ -2,6 +2,8 @@ import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { SECOND } from 'lib/consts';
type Props = {
children: React.ReactNode;
isDisabled?: boolean;
......@@ -26,12 +28,15 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
React.useEffect(() => {
const wasShown = window.localStorage.getItem(localStorageKey);
if (!isDisabled && !wasShown) {
setIsTooltipShown.on();
window.localStorage.setItem(localStorageKey, 'true');
setTimeout(() => setIsTooltipShown.off(), 3000);
const isMarketplacePage = [ '/apps', '/apps/[id]' ].includes(router.pathname);
if (!isDisabled && !wasShown && isMarketplacePage) {
setTimeout(() => {
setIsTooltipShown.on();
window.localStorage.setItem(localStorageKey, 'true');
setTimeout(() => setIsTooltipShown.off(), 5 * SECOND);
}, SECOND);
}
}, [ setIsTooltipShown, localStorageKey, isDisabled ]);
}, [ setIsTooltipShown, localStorageKey, isDisabled, router.pathname ]);
return (
<Tooltip
......
ui/stats/ChartsWidgetsList.tsx
View file @ ccfb4fae
import type { TooltipProps } from '@chakra-ui/react';
import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
import React, { useCallback, useState } from 'react';
import type { StatsChartsSection } from 'types/api/stats';
import type { StatsIntervalIds } from 'types/client/stats';
import useApiQuery from 'lib/api/useApiQuery';
import { apos } from 'lib/html-entities';
import EmptySearchResult from 'ui/shared/EmptySearchResult';
import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
import Hint from 'ui/shared/Hint';
import ChartsLoadingErrorAlert from './ChartsLoadingErrorAlert';
import ChartWidgetContainer from './ChartWidgetContainer';
const GAS_TOOLTIP_PROPS: Partial<TooltipProps> = {
borderRadius: 'md',
hasArrow: false,
padding: 0,
};
type Props = {
filterQuery: string;
isError: boolean;
......@@ -23,6 +33,17 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
const isAnyChartDisplayed = charts?.some((section) => section.charts.length > 0);
const isEmptyChartList = Boolean(filterQuery) && !isAnyChartDisplayed;
const homeStatsQuery = useApiQuery('homepage_stats', {
fetchParams: {
headers: {
'updated-gas-oracle': 'true',
},
},
queryOptions: {
refetchOnMount: false,
},
});
const handleChartLoadingError = useCallback(
() => setIsSomeChartLoadingError(true),
[ setIsSomeChartLoadingError ]);
......@@ -51,10 +72,16 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
marginBottom: 0,
}}
>
<Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-block">
<Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-flex" alignItems="center" columnGap={ 2 }>
<Heading size="md" >
{ section.title }
</Heading>
{ section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
<Hint
label={ <GasInfoTooltipContent data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }/> }
tooltipProps={ GAS_TOOLTIP_PROPS }
/>
) }
</Skeleton>
<Grid
......
ui/tokens/TokensTableItem.tsx
View file @ ccfb4fae
......@@ -48,6 +48,7 @@ const TokensTableItem = ({
implementation_name: null,
is_contract: true,
is_verified: false,
ens_domain_name: null,
};
return (
......
ui/tx/TxDetails.tsx
View file @ ccfb4fae
......@@ -150,10 +150,27 @@ const TxDetails = () => {
</Tag>
) }
</DetailsInfoItem>
<TxDetailsWithdrawalStatus
status={ data.op_withdrawal_status }
l1TxHash={ data.op_l1_transaction_hash }
/>
{ config.features.optimisticRollup.isEnabled && data.op_withdrawals && data.op_withdrawals.length > 0 && (
<DetailsInfoItem
title="Withdrawal status"
hint="Detailed status progress of the transaction"
>
<Flex flexDir="column" rowGap={ 2 }>
{ data.op_withdrawals.map((withdrawal) => (
<Box key={ withdrawal.nonce }>
<Box mb={ 2 }>
<span>Nonce: </span>
<chakra.span fontWeight={ 600 }>{ withdrawal.nonce }</chakra.span>
</Box>
<TxDetailsWithdrawalStatus
status={ withdrawal.status }
l1TxHash={ withdrawal.l1_transaction_hash }
/>
</Box>
)) }
</Flex>
</DetailsInfoItem>
) }
{ data.zkevm_status && (
<DetailsInfoItem
title="Confirmation status"
......
ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx
View file @ ccfb4fae
import { Box } from '@chakra-ui/react';
import { test as base, expect } from '@playwright/experimental-ct-react';
import React from 'react';
......@@ -25,7 +26,9 @@ statuses.forEach((status) => {
const component = await mount(
<TestApp>
<TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
<Box p={ 2 }>
<TxDetailsWithdrawalStatus status={ status } l1TxHash="0x7d93a59a228e97d084a635181c3053e324237d07566ec12287eae6da2bcf9456"/>
</Box>
</TestApp>,
);
......
ui/tx/details/TxDetailsWithdrawalStatus.tsx
View file @ ccfb4fae
......@@ -4,8 +4,6 @@ import React from 'react';
import type { L2WithdrawalStatus } from 'types/api/l2Withdrawals';
import { WITHDRAWAL_STATUSES } from 'types/api/l2Withdrawals';
import config from 'configs/app';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
......@@ -15,10 +13,6 @@ interface Props {
}
const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
if (!config.features.optimisticRollup.isEnabled) {
return null;
}
if (!status || !WITHDRAWAL_STATUSES.includes(status)) {
return null;
}
......@@ -55,23 +49,18 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => {
href="https://app.optimism.io/bridge/withdraw"
target="_blank"
>
Claim funds
Claim funds
</Button>
) : null;
return (
<DetailsInfoItem
title="Withdrawal status"
hint="Detailed status progress of the transaction"
>
<VerificationSteps
steps={ steps as unknown as Array<L2WithdrawalStatus> }
currentStep={ status }
rightSlot={ rightSlot }
my={ hasClaimButton ? '-6px' : 0 }
lineHeight={ hasClaimButton ? 8 : undefined }
/>
</DetailsInfoItem>
<VerificationSteps
steps={ steps as unknown as Array<L2WithdrawalStatus> }
currentStep={ status }
rightSlot={ rightSlot }
my={ hasClaimButton ? '-6px' : 0 }
lineHeight={ hasClaimButton ? 8 : undefined }
/>
);
};
......
yarn.lock
View file @ ccfb4fae
......@@ -2859,6 +2859,20 @@
"@n1ru4l/push-pull-async-iterable-iterator" "^3.1.0"
meros "^1.1.4"
"@growthbook/growthbook-react@0.21.0":
version "0.21.0"
resolved "https://registry.yarnpkg.com/@growthbook/growthbook-react/-/growthbook-react-0.21.0.tgz#e3aee1bda7faf3ea036badfbca09e2230884b7f7"
integrity sha512-LM4jG9xThSYCMfRQECeLtTr8sYyiAxC5NLmT4U3uxKyvVUCB+s0k/vdKrvHcv3YXNJ37mW3VtK9XkNSuW16mcw==
dependencies:
"@growthbook/growthbook" "^0.31.0"
"@growthbook/growthbook@^0.31.0":
version "0.31.0"
resolved "https://registry.yarnpkg.com/@growthbook/growthbook/-/growthbook-0.31.0.tgz#66273344805c45dc406940ab719856385afa4750"
integrity sha512-VtI5IibZHhvtrlZhfopGYhVXZ++FewgY0BtQQyEqFSrhCYFvEEtq+GkuSm4GcC0JxNuHiYJr9/R3GpffJV/T4Q==
dependencies:
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"
......@@ -9314,6 +9328,11 @@ dom-helpers@^5.0.1:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
dom-mutator@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/dom-mutator/-/dom-mutator-0.6.0.tgz#079d7a4b3e8981a562cd777548b99baab51d65c5"
integrity sha512-iCt9o0aYfXMUkz/43ZOAUFQYotjGB+GNbYJiJdz4TgXkyToXbbRy5S6FbTp72lRBtfpUMwEc1KmpFEU4CZeoNg==
dom-serializer@^1.0.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment