Neon: Solana transactions

configs/app/features/externalTxs.ts

@@ -0,0 +1,32 @@
+import type { Feature } from './types';
+
+import { getEnvValue, parseEnvJson } from '../utils';
+
+type TxExternalTransactionsConfig = {
+  chain_name: string;
+  chain_logo_url: string;
+  explorer_url_template: string;
+};
+
+const externalTransactionsConfig = parseEnvJson<TxExternalTransactionsConfig>(getEnvValue('NEXT_PUBLIC_TX_EXTERNAL_TRANSACTIONS_CONFIG'));
+
+const title = 'External transactions';
+
+const config: Feature<{ chainName: string; chainLogoUrl: string; explorerUrlTemplate: string }> = (() => {
+  if (externalTransactionsConfig) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      chainName: externalTransactionsConfig.chain_name,
+      chainLogoUrl: externalTransactionsConfig.chain_logo_url,
+      explorerUrlTemplate: externalTransactionsConfig.explorer_url_template,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -12,6 +12,7 @@ export { default as csvExport } from './csvExport';
 export { default as dataAvailability } from './dataAvailability';
 export { default as deFiDropdown } from './deFiDropdown';
 export { default as easterEggBadge } from './easterEggBadge';
+export { default as externalTxs } from './externalTxs';
 export { default as faultProofSystem } from './faultProofSystem';
 export { default as gasTracker } from './gasTracker';
 export { default as getGasButton } from './getGasButton';

configs/envs/.env.neon_devnet

@@ -0,0 +1,73 @@
+# Set of ENVs for Neon Devnet network explorer
+# https://neon-devnet.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=neon_devnet"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height": "90" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=neon-devnet.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info-test.k8s-dev.blockscout.com
+NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED=true
+NEXT_PUBLIC_DEFI_DROPDOWN_ITEMS=[{'text':'Swap','icon':'swap','dappId':'cow-swap'},{'text':'Payment link','icon':'payment_link','dappId':'peanut-protocol'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/eth-sepolia.json
+NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/sepolia.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e80a08b5b8a3acbd4363
+NEXT_PUBLIC_HAS_BEACON_CHAIN=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(51, 53, 67, 1)'],'text_color':['rgba(165, 252, 122, 1)']}
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=<p>Participated in our recent Blockscout activities? <a href="https://badges.blockscout.com?utm_source=instance&utm_medium=sepolia" target="_blank">Check your eligibility</a> and claim your NFT Scout badges. More exciting things are coming soon!</p>
+NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/maikReal/974c47f86a3158c1a86b092ae2f044b3/raw/abcc7e02150cd85d4974503a0357162c0a2c35a9/merits-banner.html
+NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://swap.blockscout.com?utm_source=blockscout&utm_medium=eth-sepolia
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=patbqG4V2CI998jAq.9810c58c9de973ba2650621c94559088cbdfa1a914498e385621ed035d33c0d0
+NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
+NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-security-reports/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_METASUITES_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'},{'name': 'zapper', 'url_template': 'https://zapper.xyz/account/{address}', 'logo': 'https://blockscout-content.s3.amazonaws.com/zapper-icon.png'}]
+NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NAVIGATION_LAYOUT=horizontal
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/sepolia-testnet/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://sepolia.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/sepolia'}} ]
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/sepolia.png
+NEXT_PUBLIC_NETWORK_ID=11155111
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/sepolia.svg
+NEXT_PUBLIC_NETWORK_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth-sepolia.public.blastapi.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Sepolia
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png
+NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://sepolia.drpc.org?ref=559183','text':'Public RPC'}]
+NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://points.k8s-dev.blockscout.com
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
+NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=noves
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_XSTAR_SCORE_URL=https://docs.xname.app/the-solution-adaptive-proof-of-humanity-on-blockchain/xhs-scoring-algorithm?utm_source=blockscout&utm_medium=address
+NEXT_PUBLIC_DEX_POOLS_ENABLED=true
+NEXT_PUBLIC_TX_EXTERNAL_TRANSACTIONS_CONFIG={'chain_name':'Solana','chain_logo_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/refs/heads/main/configs/network-icons/solana.svg','explorer_url_template':'https://solscan.io/tx/{hash}'}

docs/ENVS.md

@@ -590,6 +590,14 @@ This feature is **enabled by default** with the `['metamask']` value. To switch
 
  
 
+### External transactions
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_TX_EXTERNAL_TRANSACTIONS_CONFIG | `{ chain_name: string; chain_logo_url: string; explorer_url_template: string; }` | Configuration of the external transactions links that should be added to the transaction details. | - | - | `{ chain_name: 'ethereum', chain_logo_url: 'https://example.com/logo.png', explorer_url_template: 'https://explorer.com/tx/{hash}' }` | v1.38.0+ |
+
+ 
+
 ### Verified tokens info
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |

lib/api/resources.ts

@@ -514,6 +514,10 @@ export const RESOURCES = {
     path: '/api/v2/transactions/:hash/summary',
     pathParams: [ 'hash' as const ],
   },
+  tx_external_transactions: {
+    path: '/api/v2/transactions/:hash/external-transactions',
+    pathParams: [ 'hash' as const ],
+  },
   withdrawals: {
     path: '/api/v2/withdrawals',
     filterFields: [],
@@ -1296,6 +1300,7 @@ Q extends 'tx_raw_trace' ? RawTracesResponse :
 Q extends 'tx_state_changes' ? TxStateChanges :
 Q extends 'tx_blobs' ? TxBlobs :
 Q extends 'tx_interpretation' ? TxInterpretationResponse :
+Q extends 'tx_external_transactions' ? Array<string> :
 Q extends 'addresses' ? AddressesResponse :
 Q extends 'addresses_metadata_search' ? AddressesMetadataSearchResult :
 Q extends 'address' ? Address :

playwright/fixtures/mockEnvs.ts

@@ -93,4 +93,7 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
     [ 'NEXT_PUBLIC_ADDRESS_FORMAT', '["bech32","base16"]' ],
     [ 'NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX', 'tom' ],
   ],
+  externalTxs: [
+    [ 'NEXT_PUBLIC_TX_EXTERNAL_TRANSACTIONS_CONFIG', '{"chain_name": "Solana", "chain_logo_url": "http://example.url", "explorer_url_template": "https://scan.io/tx/{hash}"}' ],
+  ],
 };

types/client/externalTxsConfig.ts

@@ -0,0 +1,5 @@
+export type TxExternalTxsConfig = {
+  chain_name: string;
+  chain_logo_url: string;
+  explorer_url_template: string;
+};

ui/tx/TxExternalTxs.pw.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import TxExternalTxs from './TxExternalTxs';
+
+const EXT_TX_HASH = '2uwpB95K9ae8yrpxxVXJ27ivvHXqrmy82jsamgNtdWJrYDGkCHsRwd2LKXubrQUzXMaojGxZmHZ85XVJN8EJ3LW8';
+
+test('base view', async({ page, render, mockEnvs, mockAssetResponse }) => {
+  await mockEnvs(ENVS_MAP.externalTxs);
+  await mockAssetResponse('http://example.url', './playwright/mocks/image_s.jpg');
+  await render(<TxExternalTxs data={ Array(13).fill(EXT_TX_HASH) }/>);
+  await page.getByText('13 Solana txs').hover();
+  const popover = page.locator('.chakra-popover__content');
+  await expect(popover).toBeVisible();
+  await expect(popover).toHaveScreenshot();
+});

ui/tx/TxExternalTxs.tsx

@@ -0,0 +1,61 @@
+import {
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  Flex,
+  Link,
+  Image,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import Popover from 'ui/shared/chakra/Popover';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+
+const externalTxFeature = config.features.externalTxs;
+
+interface Props {
+  data: Array<string>;
+}
+
+const TxExternalTxs: React.FC<Props> = ({ data }) => {
+  if (!externalTxFeature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <Popover placement="bottom-end" openDelay={ 300 } isLazy trigger="hover">
+      <PopoverTrigger>
+        <Link
+          _hover={{ textDecoration: 'none', color: 'link_hovered' }}
+          display="inline-flex"
+          alignItems="center"
+          gap={ 2 }
+        >
+          <Image src={ externalTxFeature.chainLogoUrl } alt={ externalTxFeature.chainName } width={ 5 } height={ 5 }/>
+          { data.length } { externalTxFeature.chainName } tx{ data.length > 1 ? 's' : '' }
+        </Link>
+      </PopoverTrigger>
+      <PopoverContent border="1px solid" borderColor="divider" w={{ base: '300px', lg: '460px' }}>
+        <PopoverBody fontWeight={ 400 } fontSize="sm">
+          <Flex alignItems="center" gap={ 2 } fontSize="md" mb={ 3 }>
+            <Image src={ externalTxFeature.chainLogoUrl } alt={ externalTxFeature.chainName } width={ 5 } height={ 5 }/>
+            { externalTxFeature.chainName } transaction{ data.length > 1 ? 's' : '' }
+          </Flex>
+          <Flex flexDirection="column" gap={ 2 } w="100%" maxHeight="460px" overflowY="auto">
+            { data.map((txHash) => (
+              <TxEntity
+                key={ txHash }
+                hash={ txHash }
+                href={ externalTxFeature.explorerUrlTemplate.replace('{hash}', txHash) }
+                isExternal
+              />
+            )) }
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default TxExternalTxs;

ui/tx/details/TxInfo.pw.tsx

@@ -126,3 +126,12 @@ test('arbitrum L1 status', async({ render, mockEnvs }) => {
 
   await expect(statusElement).toHaveScreenshot();
 });
+
+test('with external txs +@mobile', async({ render, mockEnvs, mockApiResponse, mockAssetResponse }) => {
+  await mockEnvs(ENVS_MAP.externalTxs);
+  await mockApiResponse('tx_external_transactions', [ 'tx1', 'tx2', 'tx3' ], { pathParams: { hash: txMock.base.hash } });
+  await mockAssetResponse('http://example.url', './playwright/mocks/image_s.jpg');
+  const component = await render(<TxInfo data={ txMock.base } isLoading={ false }/>);
+
+  await expect(component).toHaveScreenshot();
+});

ui/tx/details/TxInfo.tsx

@@ -24,7 +24,9 @@ import { ZKSYNC_L2_TX_BATCH_STATUSES } from 'types/api/zkSyncL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import * as arbitrum from 'lib/rollups/arbitrum';
 import { MESSAGE_DESCRIPTIONS } from 'lib/tx/arbitrumMessageStatusDescription';
@@ -61,6 +63,7 @@ import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
 import TxDetailsWithdrawalStatus from 'ui/tx/details/TxDetailsWithdrawalStatus';
 import TxRevertReason from 'ui/tx/details/TxRevertReason';
 import TxAllowedPeekers from 'ui/tx/TxAllowedPeekers';
+import TxExternalTxs from 'ui/tx/TxExternalTxs';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import ZkSyncL2TxnBatchHashesInfo from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo';
 
@@ -74,9 +77,23 @@ interface Props {
   socketStatus?: 'close' | 'error';
 }
 
+const externalTxFeature = config.features.externalTxs;
+
 const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
+  const isMobile = useIsMobile();
+
+  const externalTxsQuery = useApiQuery('tx_external_transactions', {
+    pathParams: {
+      hash: data?.hash,
+    },
+    queryOptions: {
+      enabled: externalTxFeature.isEnabled,
+      placeholderData: [ '1', '2', '3' ],
+    },
+  });
+
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);
     scroller.scrollTo('TxInfo__cutLink', {
@@ -149,18 +166,26 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
       >
         Transaction hash
       </DetailsInfoItem.Label>
-      <DetailsInfoItem.Value flexWrap="nowrap">
-        { data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> }
-        <Skeleton isLoaded={ !isLoading } overflow="hidden">
-          <HashStringShortenDynamic hash={ data.hash }/>
-        </Skeleton>
-        <CopyToClipboard text={ data.hash } isLoading={ isLoading }/>
-
-        { config.features.metasuites.isEnabled && (
-          <>
-            <TextSeparator color="gray.500" flexShrink={ 0 } display="none" id="meta-suites__tx-explorer-separator"/>
-            <Box display="none" flexShrink={ 0 } id="meta-suites__tx-explorer-link"/>
-          </>
+      <DetailsInfoItem.Value>
+        <Flex flexWrap="nowrap" alignItems="center" overflow="hidden">
+          { data.status === null && <Spinner mr={ 2 } size="sm" flexShrink={ 0 }/> }
+          <Skeleton isLoaded={ !isLoading } overflow="hidden">
+            <HashStringShortenDynamic hash={ data.hash }/>
+          </Skeleton>
+          <CopyToClipboard text={ data.hash } isLoading={ isLoading }/>
+
+          { config.features.metasuites.isEnabled && (
+            <>
+              <TextSeparator color="gray.500" flexShrink={ 0 } display="none" id="meta-suites__tx-explorer-separator"/>
+              <Box display="none" flexShrink={ 0 } id="meta-suites__tx-explorer-link"/>
+            </>
+          ) }
+        </Flex>
+        { config.features.externalTxs.isEnabled && externalTxsQuery.data && externalTxsQuery.data.length > 0 && (
+          <Skeleton isLoaded={ !isLoading && !externalTxsQuery.isPlaceholderData } display={{ base: 'block', lg: 'inline-flex' }} alignItems="center">
+            { !isMobile && <TextSeparator color="gray.500" flexShrink={ 0 }/> }
+            <TxExternalTxs data={ externalTxsQuery.data }/>
+          </Skeleton>
         ) }
       </DetailsInfoItem.Value>