fixes

.env.template

@@ -40,7 +40,8 @@ NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_PLATE
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER__
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME__
 NEXT_PUBLIC_AD_DOMAIN_WITH_AD=__PLACEHOLDER_FOR_NEXT_PUBLIC_DOMAIN_WITH_AD__
-NEXT_PUBLIC_AD_ADBUTLER_ON=__PLACEHOLDER_FORNEXT_PUBLIC_AD_ADBUTLER_ON__
+NEXT_PUBLIC_AD_ADBUTLER_ON=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_ON__
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=__PLACEHOLDER_FOR_NEXT_PUBLIC_GRAPHIQL_TRANSACTION__
 
 # api config
 NEXT_PUBLIC_API_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_HOST__

README.md

@@ -81,6 +81,8 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_DOMAIN_WITH_AD | `string` *(optional)* | The domain on which we display ads | `blockscout.com` |
 | NEXT_PUBLIC_AD_ADBUTLER_ON | `boolean` *(optional)* | Set to true to show Adbutler banner instead of Coinzilla banner | `false` |
 | NEXT_PUBLIC_API_SPEC_URL | `string` *(optional)* | Spec to be displayed on api-docs page | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` |
+| NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` *(optional)* | Txn hash for default query at GraphQl playground page | `0x69e3923eef50eada197c3336d546936d0c994211492c9f947a24c02827568f9f` |
+
 ### App configuration
 
 | Variable | Type | Description | Default value

configs/app/config.ts

@@ -136,6 +136,9 @@ const config = Object.freeze({
   googleAnalytics: {
     propertyId: getEnvValue(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID),
   },
+  graphQL: {
+    defaultTxnHash: getEnvValue(process.env.NEXT_PUBLIC_GRAPHIQL_TRANSACTION) || '',
+  },
 });
 
 export default config;

configs/envs/.env.goerli

 # ui config
 NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Ethereum','url':'https://blockscout.com/eth/mainnet','group':'mainnets','type':'eth_mainnet'},{'title':'Ethereum Classic','url':'https://blockscout.com/etx/mainnet','group':'mainnets','type':'etc_mainnet'},{'title':'Gnosis Chain','url':'https://blockscout.com/xdai/mainnet','group':'mainnets','type':'xdai_mainnet'},{'title':'Astar (EVM)','url':'https://blockscout.com/astar','group':'mainnets','type':'astar'},{'title':'Shiden (EVM)','url':'https://blockscout.com/shiden','group':'mainnets','type':'astar'},{'title':'Klaytn Mainnet (Cypress)','url':'https://klaytn-mainnet.aws-k8s.blockscout.com/','group':'mainnets','type':'klaytn'},{'title':'Goerli','url':'https://blockscout.com/eth/goerli/','group':'testnets','type':'goerli'},{'title':'Optimism Goerli','url':'https://blockscout.com/optimism/goerli/','group':'testnets','type':'optimism_goerli'},{'title':'Optimism Bedrock Alpha','url':'https://blockscout.com/optimism/bedrock-alpha','group':'testnets','type':'optimism_bedrock_alpha'},{'title':'Gnosis Chiado','url':'https://blockscout.com/gnosis/chiado/','group':'testnets','type':'gnosis_chiado'},{'title':'Shibuya (EVM)','url':'https://blockscout.com/shibuya','group':'testnets','type':'shibuya'},{'title':'Optimism Opcraft','url':'https://blockscout.com/optimism/opcraft','group':'other','type':'optimism_opcraft'},{'title':'Optimism on Gnosis Chain','url':'https://blockscout.com/xdai/optimism','group':'other','type':'optimism_gnosis'},{'title':'ARTIS-Σ1','url':'https://blockscout.com/artis/sigma1','group':'other','type':'artis_sigma1'},{'title':'LUKSO L14','url':'https://blockscout.com/lukso/l14','group':'other','type':'lukso_l14'},{'title':'POA','url':'https://blockscout.com/poa/core','group':'other','type':'poa_core'},{'title':'POA Sokol','url':'https://blockscout.com/poa/sokol','group':'other','type':'poa_sokol'}]
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/ethereum/goerli/transaction','address':'/ethereum/ethereum/goerli/address'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address'}}]
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=Goerli

configs/envs/.env.goerli.optimism

@@ -2,6 +2,7 @@
 NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Göerli','url':'https://eth-goerli.blockscout.com/','group':'testnets','type':'goerli'},{'title':'Base Göerli','url':'https://l2-goerli.blockscout.com/','group':'testnets','type':'base_goerli'}]
 NEXT_PUBLIC_NETWORK_EXPLORERS=
 NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=Base Göerli

deploy/values/l2-optimism-goerli/values.yaml

@@ -400,6 +400,8 @@ frontend:
       _default: https://blockscout-main.test.aws-k8s.blockscout.com
     NEXT_PUBLIC_L2_WITHDRAWAL_URL:
       _default: https://app.optimism.io/bridge/withdraw
+    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 
+      _default: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
 # enable blockscout-allowance
 allowance:
   enabled: false

deploy/values/main/values.yaml

@@ -443,3 +443,5 @@ frontend:
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
     NEXT_PUBLIC_IS_TESTNET:
       _default: true
+    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 
+      _default: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d

deploy/values/review-l2/values.yaml

@@ -125,3 +125,5 @@ frontend:
       _default: https://blockscout-main.test.aws-k8s.blockscout.com
     NEXT_PUBLIC_L2_WITHDRAWAL_URL:
       _default: https://app.optimism.io/bridge/withdraw
+    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 
+      _default: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62

deploy/values/review/values.yaml

@@ -121,3 +121,5 @@ frontend:
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
     NEXT_PUBLIC_IS_TESTNET:
       _default: true
+    NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 
+      _default: 0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d

lib/api/resources.ts

@@ -354,6 +354,11 @@ export const RESOURCES = {
     path: '/api/v2/search/check-redirect',
   },
 
+  // GraphQL
+  graphql: {
+    path: '/graphiql',
+  },
+
   // DEPRECATED
   old_api: {
     path: '/api',

pages/graphiql.tsx → pages/graphql.tsx

@@ -10,16 +10,15 @@ import React from 'react';
 
 import isBrowser from 'lib/isBrowser';
 import Page from 'ui/shared/Page/Page';
+import PageTitle from 'ui/shared/Page/PageTitle';
 
 const AppsPage: NextPage = () => {
   const { colorMode } = useColorMode();
   const [ show, setShow ] = React.useState(true);
 
   React.useEffect(() => {
-    if (!show) {
     // force re-render GraphQL component to apply new theme
     setShow(true);
-    }
   }, [ show ]);
 
   React.useEffect(() => {
@@ -35,6 +34,7 @@ const AppsPage: NextPage = () => {
   return (
     <Page>
       <Head><title>Graph Page</title></Head>
+      <PageTitle text="GraphQL playground"/>
       { show && <GraphQL key={ colorMode }/> }
     </Page>
   );

types/nextjs-routes.d.ts

@@ -25,7 +25,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/blocks">
     | StaticRoute<"/csv-export">
     | StaticRoute<"/graph">
-    | StaticRoute<"/graphiql">
+    | StaticRoute<"/graphql">
     | StaticRoute<"/">
     | StaticRoute<"/login">
     | StaticRoute<"/search-results">

ui/graphQL/GraphQL.tsx

@@ -2,6 +2,9 @@ import { Box } from '@chakra-ui/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
 import React from 'react';
+
+import appConfig from 'configs/app/config';
+import buildUrl from 'lib/api/buildUrl';
 import 'graphiql/graphiql.css';
 
 const graphQLStyle = {
@@ -10,15 +13,11 @@ const graphQLStyle = {
   },
 };
 
-// транзакция из переменных
-// минимальная ширина (мобилка)
-// сокет??????
-
 const GraphQL = () => {
 
   const initialQuery = `{
     transaction(
-      hash: "0x69e3923eef50eada197c3336d546936d0c994211492c9f947a24c02827568f9f"
+      hash: "${ appConfig.graphQL.defaultTxnHash }"
     ) {
       hash
       blockNumber
@@ -26,15 +25,24 @@ const GraphQL = () => {
       gasUsed
     }
   }`;
+
+  const graphqlUrl = buildUrl('graphql');
+
   const fetcher = createGraphiQLFetcher({
-    url: 'https://base-goerli.blockscout.com/graphiql',
-    subscriptionUrl: 'wss://blockscout-main.test.aws-k8s.blockscout.com/socket/v2/websocket?vsn=2.0.0',
+    url: graphqlUrl,
+    // graphql ws implementation with absinthe plugin is incompatible with graphiql-ws protocol
+    // or the older one subscriptions-transport-ws
+    // so we (isstuev & vbaranov) decided to configure playground without subscriptions
+    // in case of any complaint consider reconfigure the graphql ws server with absinthe_graphql_ws package
+    // subscriptionUrl: `wss://${appConfig.host}/socket/`,
   });
 
   return (
-    <Box h="100vh" sx={ graphQLStyle }>
+    <Box h="100vh" overflowX="scroll" sx={ graphQLStyle }>
+      <Box h="100vh" minW="900px" sx={ graphQLStyle }>
         <GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery }/>
       </Box>
+    </Box>
   );
 };