Skip to content

F
frontend
Commit bb77f8f1 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

Noves.fi tag (#2579)

parent 37b47adb
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 3 deletions
public/static/noves-logo-dark.svg 0 → 100644
View file @ bb77f8f1
<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 0 → 100644
View file @ bb77f8f1
<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
View file @ bb77f8f1
import { Tooltip, Image, chakra } from '@chakra-ui/react'; import { Tooltip, Image, chakra, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
...@@ -38,6 +38,7 @@ type Props = { ...@@ -38,6 +38,7 @@ type Props = {
isLoading?: boolean; isLoading?: boolean;
addressDataMap?: Record<string, AddressParam>; addressDataMap?: Record<string, AddressParam>;
className?: string; className?: string;
isNoves?: boolean;
}; };
type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>; type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>;
...@@ -173,7 +174,8 @@ const TxInterpretationElementByType = ( ...@@ -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) { if (!summary) {
return null; return null;
} }
...@@ -191,7 +193,7 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro ...@@ -191,7 +193,7 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro
const chunks = getStringChunks(intermediateResult); const chunks = getStringChunks(intermediateResult);
return ( 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"> <Tooltip label="Transaction summary">
<IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 1 } verticalAlign="text-top"/> <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 1 } verticalAlign="text-top"/>
</Tooltip> </Tooltip>
...@@ -216,6 +218,14 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro ...@@ -216,6 +218,14 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro
</chakra.span> </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> </Skeleton>
); );
}; };
......
ui/tx/TxSubHeading.pw.tsx
View file @ bb77f8f1
...@@ -5,6 +5,7 @@ import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addre ...@@ -5,6 +5,7 @@ import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addre
import config from 'configs/app'; import config from 'configs/app';
import * as addressMock from 'mocks/address/address'; import * as addressMock from 'mocks/address/address';
import { protocolTagWithMeta } from 'mocks/metadata/address'; import { protocolTagWithMeta } from 'mocks/metadata/address';
import { transaction as novesTransaction } from 'mocks/noves/transaction';
import * as txMock from 'mocks/txs/tx'; import * as txMock from 'mocks/txs/tx';
import { txInterpretation } from 'mocks/txs/txInterpretation'; import { txInterpretation } from 'mocks/txs/txInterpretation';
import { ENVS_MAP } from 'playwright/fixtures/mockEnvs'; import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
...@@ -144,3 +145,15 @@ test.describe('blockscout provider', () => { ...@@ -144,3 +145,15 @@ test.describe('blockscout provider', () => {
await expect(component).toHaveScreenshot(); 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
View file @ bb77f8f1
...@@ -74,6 +74,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => { ...@@ -74,6 +74,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
addressDataMap={ addressDataMap } addressDataMap={ addressDataMap }
fontSize="lg" fontSize="lg"
mr={{ base: 0, lg: 6 }} mr={{ base: 0, lg: 6 }}
isNoves
/> />
); );
} else if (hasInternalInterpretation) { } else if (hasInternalInterpretation) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment