diff --git a/deploy/values/review/values.yaml.gotmpl b/deploy/values/review/values.yaml.gotmpl index 5b2623182f..4c35a9e3d9 100644 --- a/deploy/values/review/values.yaml.gotmpl +++ b/deploy/values/review/values.yaml.gotmpl @@ -82,7 +82,6 @@ frontend: 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 NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID - NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID 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 diff --git a/lib/metadata/types.ts b/lib/metadata/types.ts index ddb29c852a..48854b4076 100644 --- a/lib/metadata/types.ts +++ b/lib/metadata/types.ts @@ -1,5 +1,6 @@ import type { LineChart } from '@blockscout/stats-types'; import type { TokenInfo } from 'types/api/token'; +import type { Transaction } from 'types/api/transaction'; import type { Route } from 'nextjs-routes'; @@ -11,6 +12,7 @@ export type ApiData = Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } : Pathname extends '/apps/[id]' ? { app_name: string } : Pathname extends '/stats/[id]' ? LineChart['info'] : + Pathname extends '/tx/[hash]' ? Transaction : never ) | null; diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx index f90b534fc8..96c1e2cb3f 100644 --- a/pages/tx/[hash].tsx +++ b/pages/tx/[hash].tsx @@ -1,20 +1,39 @@ -import type { NextPage } from 'next'; -import dynamic from 'next/dynamic'; +import type { GetServerSideProps, NextPage } from 'next'; import React from 'react'; +import type { Route } from 'nextjs-routes'; import type { Props } from 'nextjs/getServerSideProps'; +import * as gSSP from 'nextjs/getServerSideProps'; import PageNextJs from 'nextjs/PageNextJs'; +import fetchApi from 'nextjs/utils/fetchApi'; -const Transaction = dynamic(() => import('ui/pages/Transaction'), { ssr: false }); +import getQueryParamString from 'lib/router/getQueryParamString'; +import Transaction from 'ui/pages/Transaction'; + +const pathname: Route['pathname'] = '/tx/[hash]'; const Page: NextPage = (props: Props) => { return ( - + ); }; export default Page; -export { base as getServerSideProps } from 'nextjs/getServerSideProps'; +export const getServerSideProps: GetServerSideProps> = async(ctx) => { + const baseResponse = await gSSP.base(ctx); + + if ('props' in baseResponse) { + const txData = await fetchApi({ + resource: 'tx', + pathParams: { hash: getQueryParamString(ctx.query.hash) }, + timeout: 1000, + }); + + (await baseResponse.props).apiData = txData ?? null; + } + + return baseResponse; +}; diff --git a/ui/pages/Transaction.tsx b/ui/pages/Transaction.tsx index b9086c2fa9..304bf36fab 100644 --- a/ui/pages/Transaction.tsx +++ b/ui/pages/Transaction.tsx @@ -1,6 +1,7 @@ import { useRouter } from 'next/router'; import React from 'react'; +import type { Transaction } from 'types/api/transaction'; import type { RoutedTab } from 'ui/shared/Tabs/types'; import config from 'configs/app'; @@ -31,12 +32,12 @@ import useTxQuery from 'ui/tx/useTxQuery'; const txInterpretation = config.features.txInterpretation; -const TransactionPageContent = () => { +const TransactionPageContent = (props: { apiData: Transaction | null }) => { const router = useRouter(); const appProps = useAppContext(); const hash = getQueryParamString(router.query.hash); - const txQuery = useTxQuery(); + const txQuery = useTxQuery({ apiData: props.apiData }); const { data, isPlaceholderData, isError, error, errorUpdateCount } = txQuery; const showDegradedView = publicClient && ((isError && error.status !== 422) || isPlaceholderData) && errorUpdateCount > 0; diff --git a/ui/tx/useTxQuery.tsx b/ui/tx/useTxQuery.tsx index 4e9c97a13b..0943f80e1a 100644 --- a/ui/tx/useTxQuery.tsx +++ b/ui/tx/useTxQuery.tsx @@ -32,6 +32,7 @@ export type TxQuery = UseQueryResult { if (isRefetchEnabled) { return false;