Noves.fi tag (#2579)

public/static/noves-logo-dark.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 99 16">
+  <g clip-path="url(#a)">
+    <mask id="b" width="99" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+      <path fill="#fff" d="M98.647.001H0V16h98.647z"/>
+    </mask>
+    <g mask="url(#b)">
+      <path fill="#fff" d="M29.348.04h3.25l5.409 7.47c.873 1.19 1.867 2.887 1.867 2.887V.039h3.396v15.718h-3.275l-5.24-7.18c-1.043-1.407-2.014-3.08-2.014-3.08v10.26h-3.396V.04zm16.834 9.653c0-3.518 2.862-6.307 6.476-6.307 3.615 0 6.5 2.789 6.5 6.307 0 3.517-2.861 6.306-6.5 6.306s-6.476-2.789-6.476-6.306m9.654 0c0-1.892-1.358-3.3-3.178-3.3s-3.177 1.407-3.177 3.3 1.359 3.3 3.177 3.3 3.178-1.383 3.178-3.3m4.487-6.063h3.25l2.256 6.234c.46 1.261.849 2.522.898 2.692.024-.17.436-1.48.874-2.668l2.256-6.258h3.225l-4.779 12.15h-3.2zm13.924 6.063c0-3.494 2.716-6.307 6.282-6.307 3.3 0 5.895 2.813 5.895 6.258 0 .582-.073 1.165-.073 1.165h-8.805c.387 1.673 1.77 2.474 3.372 2.474 1.165 0 2.377-.34 3.275-.947l1.214 2.33a8.17 8.17 0 0 1-4.513 1.333c-3.542 0-6.646-2.304-6.646-6.306zm9.12-1.044c-.243-1.528-1.456-2.547-2.935-2.547s-2.62 1.02-2.935 2.547zm5.045 5.701 1.165-2.498c.824.631 1.965 1.285 3.784 1.285.75 0 1.988-.29 1.988-1.019s-1.044-.898-2.087-1.188c-2.402-.632-4.365-1.431-4.365-3.76 0-2.474 2.425-3.784 4.706-3.784 1.988 0 3.249.484 4.512 1.213l-1.092 2.426c-1.188-.582-2.304-.85-3.372-.85-.751 0-1.455.34-1.455.85 0 .68 1.02.897 2.135 1.14 2.062.484 4.317 1.382 4.317 3.857 0 2.983-3.031 3.977-5.287 3.977-2.596 0-4.269-1.019-4.949-1.649"/>
+      <path fill="url(#c)" d="M21.666 11.897v3.86h-2.368a15.95 15.95 0 0 1-7.292-1.764l-4.714-2.422A16 16 0 0 0 0 9.807V5.95h.933c2.536 0 5.035.604 7.29 1.762l4.717 2.422a15.96 15.96 0 0 0 7.288 1.763h1.436z"/>
+      <path fill="url(#d)" d="M0 11.907v3.85h6.042v-2.456A13.9 13.9 0 0 0 0 11.907"/>
+      <path fill="url(#e)" d="M21.666 5.95v3.858h-.937c-2.536 0-5.034-.604-7.29-1.764L8.723 5.62a15.96 15.96 0 0 0-7.29-1.763H0V0h2.366C4.902 0 7.4.604 9.655 1.762l4.719 2.424a15.95 15.95 0 0 0 7.289 1.762h.003"/>
+      <path fill="url(#f)" d="M21.666 3.848V0h-6.042v2.455a13.9 13.9 0 0 0 6.04 1.392z"/>
+    </g>
+  </g>
+  <defs>
+    <linearGradient id="c" x1="27.02" x2="6.463" y1=".199" y2="13.729" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <linearGradient id="d" x1="26.026" x2="5.472" y1="-1.311" y2="12.22" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <linearGradient id="e" x1="24.287" x2="3.732" y1="-3.951" y2="9.578" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <linearGradient id="f" x1="25.28" x2="4.725" y1="-2.443" y2="11.086" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h98.667v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>

public/static/noves-logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 99 16">
+  <g clip-path="url(#a)">
+    <mask id="b" width="99" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+      <path fill="#fff" d="M98.647.001H0V16h98.647z"/>
+    </mask>
+    <g mask="url(#b)">
+      <path fill="#404141" d="M29.348.04h3.25l5.409 7.47c.873 1.19 1.867 2.887 1.867 2.887V.039h3.396v15.718h-3.275l-5.24-7.18c-1.043-1.407-2.014-3.08-2.014-3.08v10.26h-3.396V.04zm16.834 9.653c0-3.518 2.862-6.307 6.476-6.307 3.615 0 6.5 2.789 6.5 6.307 0 3.517-2.861 6.306-6.5 6.306s-6.476-2.789-6.476-6.306m9.654 0c0-1.892-1.358-3.3-3.178-3.3s-3.177 1.407-3.177 3.3 1.359 3.3 3.177 3.3 3.178-1.383 3.178-3.3m4.487-6.063h3.25l2.256 6.234c.46 1.261.849 2.522.898 2.692.024-.17.436-1.48.874-2.668l2.256-6.258h3.225l-4.779 12.15h-3.2zm13.924 6.063c0-3.494 2.716-6.307 6.282-6.307 3.3 0 5.895 2.813 5.895 6.258 0 .582-.073 1.165-.073 1.165h-8.805c.387 1.673 1.77 2.474 3.372 2.474 1.165 0 2.377-.34 3.275-.947l1.214 2.33a8.17 8.17 0 0 1-4.513 1.333c-3.542 0-6.646-2.304-6.646-6.306zm9.12-1.044c-.243-1.528-1.456-2.547-2.935-2.547s-2.62 1.02-2.935 2.547zm5.045 5.701 1.165-2.498c.824.631 1.965 1.285 3.784 1.285.75 0 1.988-.29 1.988-1.019s-1.044-.898-2.087-1.188c-2.402-.632-4.365-1.431-4.365-3.76 0-2.474 2.425-3.784 4.706-3.784 1.988 0 3.249.484 4.512 1.213l-1.092 2.426c-1.188-.582-2.304-.85-3.372-.85-.751 0-1.455.34-1.455.85 0 .68 1.02.897 2.135 1.14 2.062.484 4.317 1.382 4.317 3.857 0 2.983-3.031 3.977-5.287 3.977-2.596 0-4.269-1.019-4.949-1.649"/>
+      <path fill="url(#c)" d="M21.666 11.897v3.86h-2.368a15.95 15.95 0 0 1-7.292-1.764l-4.714-2.422A16 16 0 0 0 0 9.807V5.95h.933c2.536 0 5.035.604 7.29 1.762l4.717 2.422a15.96 15.96 0 0 0 7.288 1.763h1.436z"/>
+      <path fill="url(#d)" d="M0 11.907v3.85h6.042v-2.456A13.9 13.9 0 0 0 0 11.907"/>
+      <path fill="url(#e)" d="M21.666 5.95v3.858h-.937c-2.536 0-5.034-.604-7.29-1.764L8.723 5.62a15.96 15.96 0 0 0-7.29-1.763H0V0h2.366C4.902 0 7.4.604 9.655 1.762l4.719 2.424a15.95 15.95 0 0 0 7.289 1.762h.003"/>
+      <path fill="url(#f)" d="M21.666 3.848V0h-6.042v2.455a13.9 13.9 0 0 0 6.04 1.392z"/>
+    </g>
+  </g>
+  <defs>
+    <linearGradient id="c" x1="27.02" x2="6.463" y1=".199" y2="13.729" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <linearGradient id="d" x1="26.026" x2="5.472" y1="-1.311" y2="12.22" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <linearGradient id="e" x1="24.287" x2="3.732" y1="-3.951" y2="9.578" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <linearGradient id="f" x1="25.28" x2="4.725" y1="-2.443" y2="11.086" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3CF"/>
+      <stop offset="1" stop-color="#93C"/>
+    </linearGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h98.667v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>

ui/shared/tx/interpretation/TxInterpretation.tsx

-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>
   );
 };

ui/tx/TxSubHeading.pw.tsx

@@ -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/tx/TxSubHeading.tsx

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