Noves.fi tag (#2579)

Author: isstuev

public/static/noves-logo-dark.svg

@@ -1,4 +1,4 @@
-import { Tooltip, Image, chakra } from '@chakra-ui/react';
+import { Tooltip, Image, chakra, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -38,6 +38,7 @@ type Props = {
   isLoading?: boolean;
   addressDataMap?: Record<string, AddressParam>;
   className?: string;
+  isNoves?: boolean;
 };
 
 type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>;
@@ -173,7 +174,8 @@ const TxInterpretationElementByType = (
   }
 };
 
-const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Props) => {
+const TxInterpretation = ({ summary, isLoading, addressDataMap, className, isNoves }: Props) => {
+  const novesLogoUrl = useColorModeValue('/static/noves-logo.svg', '/static/noves-logo-dark.svg');
   if (!summary) {
     return null;
   }
@@ -191,7 +193,7 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro
   const chunks = getStringChunks(intermediateResult);
 
   return (
-    <Skeleton isLoaded={ !isLoading } className={ className } fontWeight={ 500 } whiteSpace="pre-wrap" >
+    <Skeleton isLoaded={ !isLoading } className={ className } fontWeight={ 500 } whiteSpace="pre-wrap">
       <Tooltip label="Transaction summary">
         <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 1 } verticalAlign="text-top"/>
       </Tooltip>
@@ -216,6 +218,14 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro
           </chakra.span>
         );
       }) }
+      { isNoves && (
+        <Tooltip label="Human readable transaction provided by Noves.fi">
+          <Tag ml={ 2 } display="inline-flex" alignItems="center" verticalAlign="unset" transform="translateY(-2px)">
+            by
+            <Image src={ novesLogoUrl } alt="Noves logo" h="12px" ml={ 1.5 }/>
+          </Tag>
+        </Tooltip>
+      ) }
     </Skeleton>
   );
 };

public/static/noves-logo.svg

@@ -5,6 +5,7 @@ import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addre
 import config from 'configs/app';
 import * as addressMock from 'mocks/address/address';
 import { protocolTagWithMeta } from 'mocks/metadata/address';
+import { transaction as novesTransaction } from 'mocks/noves/transaction';
 import * as txMock from 'mocks/txs/tx';
 import { txInterpretation } from 'mocks/txs/txInterpretation';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
@@ -144,3 +145,15 @@ test.describe('blockscout provider', () => {
     await expect(component).toHaveScreenshot();
   });
 });
+
+test.describe('noves provider', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([ [ 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', 'noves' ] ]);
+  });
+
+  test('with interpretation +@mobile +@dark-mode', async({ render, mockApiResponse }) => {
+    await mockApiResponse('noves_transaction', novesTransaction, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/shared/tx/interpretation/TxInterpretation.tsx

@@ -74,6 +74,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
           addressDataMap={ addressDataMap }
           fontSize="lg"
           mr={{ base: 0, lg: 6 }}
+          isNoves
         />
       );
     } else if (hasInternalInterpretation) {