stratisproject · fenix2222 · Jan 24, 2024 · Mar 15, 2024 · Mar 20, 2024
diff --git a/lib/metadata/generate.ts b/lib/metadata/generate.ts
@@ -18,7 +18,7 @@ export default function generate<R extends Route>(route: R, apiData?: ApiData<R>
   };
 
   const compiledTitle = compileValue(templates.title.make(route.pathname), params);
-  const title = compiledTitle ? compiledTitle + (config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '') : '';
+  const title = compiledTitle ? compiledTitle : '';
   const description = compileValue(templates.description.make(route.pathname), params);
 
   const pageOgType = getPageOgType(route.pathname);

diff --git a/lib/metadata/templates/description.ts b/lib/metadata/templates/description.ts
@@ -2,7 +2,7 @@ import type { Route } from 'nextjs-routes';
 
 // equal og:description
 // eslint-disable-next-line max-len
-const DEFAULT_TEMPLATE = 'Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.';
+const DEFAULT_TEMPLATE = 'Stratis Blockchain Explorer and Statistics. Access detailed blockchain information on Stratis (STRAX) transactions, blocks and addresses.';
 
 // FIXME all page descriptions will be updated later
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {

diff --git a/playwright/utils/configs.ts b/playwright/utils/configs.ts
@@ -6,7 +6,7 @@ export const viewport = {
   xl: { width: 1600, height: 1000 },
 };
 
-export const maskColor = '#4299E1'; // blue.400
+export const maskColor = '#9F7AEA'; // blue.400
 
 export const adsBannerSelector = '.adsbyslise';
 

diff --git a/theme/components/Button/Button.ts b/theme/components/Button/Button.ts
@@ -48,18 +48,18 @@ const variantOutline = defineStyle((props) => {
   const isGrayTheme = c === 'gray' || c === 'gray-dark';
   const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
   const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
-  const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
+  const activeBg = isGrayTheme ? mode('purple.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const activeColor = (() => {
     if (c === 'gray') {
-      return mode('blue.600', 'gray.50')(props);
+      return mode('purple.600', 'gray.50')(props);
     }
     if (c === 'gray-dark') {
-      return mode('blue.600', 'gray.50')(props);
+      return mode('purple.600', 'gray.50')(props);
     }
     if (c === 'blue') {
-      return mode('blue.600', 'gray.50')(props);
+      return mode('purple.600', 'gray.50')(props);
     }
-    return 'blue.600';
+    return 'purple.600';
   })();
 
   return {

diff --git a/theme/components/Menu.ts b/theme/components/Menu.ts
@@ -25,13 +25,13 @@ const baseStyleList = defineStyle({
 
 const baseStyleItem = defineStyle({
   _focus: {
-    [$bg.variable]: 'colors.blue.50',
+    [$bg.variable]: 'colors.purple.50',
     _dark: {
       [$bg.variable]: 'colors.gray.800',
     },
   },
   _hover: {
-    [$bg.variable]: 'colors.blue.50',
+    [$bg.variable]: 'colors.purple.50',
     _dark: {
       [$bg.variable]: 'colors.gray.800',
     },

diff --git a/theme/components/Spinner.ts b/theme/components/Spinner.ts
@@ -5,7 +5,7 @@ const baseStyle = defineStyle((props) => {
   const { emptyColor, color } = props;
 
   return {
-    borderColor: color || 'blue.500',
+    borderColor: color || 'purple.500',
     borderBottomColor: emptyColor || mode('blackAlpha.200', 'whiteAlpha.200')(props),
     borderLeftColor: emptyColor || mode('blackAlpha.200', 'whiteAlpha.200')(props),
   };

diff --git a/theme/components/Tabs.ts b/theme/components/Tabs.ts
@@ -13,12 +13,12 @@ const variantSoftRounded = definePartsStyle((props) => {
     tab: {
       borderRadius: 'base',
       fontWeight: '600',
-      color: mode('blue.700', 'gray.400')(props),
+      color: mode('purple.700', 'gray.400')(props),
       _selected: {
-        color: mode('blue.700', 'gray.50')(props),
-        bg: mode('blue.50', 'gray.800')(props),
+        color: mode('purple.700', 'gray.50')(props),
+        bg: mode('purple.50', 'gray.800')(props),
         _hover: {
-          color: mode('blue.700', 'gray.50')(props),
+          color: mode('purple.700', 'gray.50')(props),
         },
       },
       _hover: {

diff --git a/theme/components/Tooltip/Tooltip.ts b/theme/components/Tooltip/Tooltip.ts
@@ -8,8 +8,8 @@ const $arrowBg = cssVar('popper-arrow-bg');
 
 const variantNav = defineStyle((props) => {
   return {
-    bg: mode('blue.50', 'gray.800')(props),
-    color: 'blue.400',
+    bg: mode('purple.50', 'gray.800')(props),
+    color: 'purple.400',
     padding: '15px 12px',
     minWidth: '120px',
     borderRadius: 'base',

diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
@@ -13,11 +13,11 @@ const semanticTokens = {
       _dark: 'gray.400',
     },
     link: {
-      'default': 'blue.600',
-      _dark: 'blue.300',
+      'default': 'purple.600',
+      _dark: 'purple.300',
     },
     link_hovered: {
-      'default': 'blue.400',
+      'default': 'purple.400',
     },
     error: {
       'default': 'red.400',

diff --git a/theme/utils/getDefaultFormColors.ts b/theme/utils/getDefaultFormColors.ts
@@ -4,7 +4,7 @@ import { mode } from '@chakra-ui/theme-tools';
 export default function getDefaultFormColors(props: StyleFunctionProps) {
   const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props;
   return {
-    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
+    focusBorderColor: fc || mode('purple.500', 'purple.300')(props),
     focusPlaceholderColor: fc || 'gray.500',
     errorColor: ec || mode('red.400', 'red.300')(props),
     filledColor: flc || mode('gray.300', 'gray.600')(props),

diff --git a/ui/address/contract/ContractMethodFieldZeroes.tsx b/ui/address/contract/ContractMethodFieldZeroes.tsx
@@ -97,7 +97,7 @@ const ContractMethodFieldZeroes = ({ onClick, isDisabled }: Props) => {
                     cursor="pointer"
                   >
                     <span>10*{ id }</span>
-                    { selectedOption === id && <IconSvg name="check" boxSize={ 6 } color="blue.600"/> }
+                    { selectedOption === id && <IconSvg name="check" boxSize={ 6 } color="purple.600"/> }
                   </ListItem>
                 )) }
                 <ListItem

diff --git a/ui/address/tokenSelect/TokenSelectItem.tsx b/ui/address/tokenSelect/TokenSelectItem.tsx
@@ -60,7 +60,7 @@ const TokenSelectItem = ({ data }: Props) => {
       borderColor="divider"
       borderBottomWidth="1px"
       _hover={{
-        bgColor: useColorModeValue('blue.50', 'gray.800'),
+        bgColor: useColorModeValue('purple.50', 'gray.800'),
       }}
       color="initial"
       fontSize="sm"

diff --git a/ui/apiDocs/SwaggerUI.tsx b/ui/apiDocs/SwaggerUI.tsx
@@ -60,7 +60,7 @@ const SwaggerUI = () => {
       padding: 0,
     },
     '.swagger-ui .prop-type': {
-      color: useColorModeValue('blue.600', 'blue.400'),
+      color: useColorModeValue('purple.600', 'purple.400'),
     },
     '.swagger-ui .btn.try-out__btn': {
       borderColor: useToken('colors', 'link'),

diff --git a/ui/blocks/BlocksTabSlot.tsx b/ui/blocks/BlocksTabSlot.tsx
@@ -31,7 +31,7 @@ const BlocksTabSlot = ({ pagination }: Props) => {
           <Text as="span" fontSize="sm">
               Network utilization (last 50 blocks):{ nbsp }
           </Text>
-          <Skeleton display="inline-block" fontSize="sm" color="blue.400" fontWeight={ 600 } isLoaded={ !statsQuery.isPlaceholderData }>
+          <Skeleton display="inline-block" fontSize="sm" color="purple.400" fontWeight={ 600 } isLoaded={ !statsQuery.isPlaceholderData }>
             <span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
           </Skeleton>
         </Box>

diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx
@@ -87,7 +87,7 @@ const LatestBlocks = () => {
             <Text as="span" fontSize="sm">
               Network utilization:{ nbsp }
             </Text>
-            <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
+            <Text as="span" fontSize="sm" color="purple.400" fontWeight={ 700 }>
               { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }%
             </Text>
           </Skeleton>

diff --git a/ui/home/StatsItem.tsx b/ui/home/StatsItem.tsx
@@ -36,7 +36,7 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading
     [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' },
   };
 
-  const bgColor = useColorModeValue('blue.50', 'blue.800');
+  const bgColor = useColorModeValue('purple.50', 'purple.800');
   const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
   const infoColor = useColorModeValue('gray.600', 'gray.400');
 

diff --git a/ui/home/indicators/ChainIndicatorChart.tsx b/ui/home/indicators/ChainIndicatorChart.tsx
@@ -18,7 +18,7 @@ const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 0 };
 
 const ChainIndicatorChart = ({ data }: Props) => {
   const overlayRef = React.useRef<SVGRectElement>(null);
-  const lineColor = useToken('colors', 'blue.500');
+  const lineColor = useToken('colors', 'purple.500');
 
   const axesConfig = React.useMemo(() => {
     return {

diff --git a/ui/marketplace/MarketplaceAppModal.tsx b/ui/marketplace/MarketplaceAppModal.tsx
@@ -98,7 +98,7 @@ const MarketplaceAppModal = ({
             fontSize={{ base: '2xl', sm: '3xl' }}
             fontWeight="medium"
             lineHeight={ 1 }
-            color="blue.600"
+            color="purple.600"
           >
             { title }
           </Heading>

diff --git a/ui/shared/AdditionalInfoButton.tsx b/ui/shared/AdditionalInfoButton.tsx
@@ -17,7 +17,7 @@ interface Props {
 
 const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-  const infoBgColor = useColorModeValue('blue.50', 'gray.600');
+  const infoBgColor = useColorModeValue('purple.50', 'gray.600');
 
   if (isLoading) {
     return <Skeleton boxSize={ 6 } borderRadius="sm" flexShrink={ 0 }/>;

diff --git a/ui/shared/ContentLoader.tsx b/ui/shared/ContentLoader.tsx
@@ -27,7 +27,7 @@ const ContentLoader = ({ className, text }: Props) => {
           animation: `${ runnerAnimation } 700ms ease-in-out infinite alternate`,
           left: '100%',
           top: 0,
-          backgroundColor: 'blue.300',
+          backgroundColor: 'purple.300',
           borderRadius: 'full',
         }}
       />

diff --git a/ui/shared/GasInfoTooltipContent/GasInfoRow.tsx b/ui/shared/GasInfoTooltipContent/GasInfoRow.tsx
@@ -31,7 +31,7 @@ const GasInfoRow = ({ name, info }: Props) => {
 
   return (
     <>
-      <GridItem color="blue.100">{ name }</GridItem>
+      <GridItem color="purple.100">{ name }</GridItem>
       <GridItem color="text" textAlign="right">{ content }</GridItem>
     </>
   );

diff --git a/ui/shared/ResetIconButton.tsx b/ui/shared/ResetIconButton.tsx
@@ -8,8 +8,8 @@ type Props = {
 }
 
 const ResetIconButton = ({ onClick }: Props) => {
-  const resetTokenIconColor = useColorModeValue('blue.600', 'blue.300');
-  const resetTokenIconHoverColor = useColorModeValue('blue.400', 'blue.200');
+  const resetTokenIconColor = useColorModeValue('purple.600', 'purple.300');
+  const resetTokenIconHoverColor = useColorModeValue('purple.400', 'purple.200');
 
   return (
     <Tooltip label="Reset filter">

diff --git a/ui/shared/Toast.tsx b/ui/shared/Toast.tsx
@@ -16,7 +16,7 @@ function getBgColor(status?: AlertStatus) {
 
     case 'info':
     default:
-      return 'blue.100';
+      return 'purple.100';
   }
 }
 

diff --git a/ui/shared/chart/ChartArea.tsx b/ui/shared/chart/ChartArea.tsx
@@ -21,8 +21,8 @@ const ChartArea = ({ id, xScale, yScale, color, data, disableAnimation, ...props
   const gradientColorId = `${ id || 'gradient' }-${ color }-color`;
   const gradientStopColor = useToken('colors', useColorModeValue('whiteAlpha.200', 'blackAlpha.100'));
   const defaultGradient = {
-    startColor: useToken('colors', useColorModeValue('blue.100', 'blue.400')),
-    stopColor: useToken('colors', transparentize(useColorModeValue('blue.100', 'blue.400'), 0)(theme)),
+    startColor: useToken('colors', useColorModeValue('purple.100', 'purple.400')),
+    stopColor: useToken('colors', transparentize(useColorModeValue('purple.100', 'purple.400'), 0)(theme)),
   };
 
   React.useEffect(() => {

diff --git a/ui/shared/chart/ChartSelectionX.tsx b/ui/shared/chart/ChartSelectionX.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const ChartSelectionX = ({ anchorEl, height, scale, data, onSelect }: Props) => {
-  const borderColor = useToken('colors', 'blue.200');
+  const borderColor = useToken('colors', 'purple.200');
 
   const ref = React.useRef(null);
   const isActive = React.useRef(false);

diff --git a/ui/shared/chart/ChartTooltip.tsx b/ui/shared/chart/ChartTooltip.tsx
@@ -26,7 +26,7 @@ const LABEL_WIDTH = 80;
 
 const ChartTooltip = ({ xScale, yScale, width, tooltipWidth = 200, height, data, anchorEl, ...props }: Props) => {
   const lineColor = useToken('colors', 'gray.400');
-  const titleColor = useToken('colors', 'blue.100');
+  const titleColor = useToken('colors', 'purple.100');
   const textColor = useToken('colors', 'white');
   const markerBgColor = useToken('colors', useColorModeValue('black', 'white'));
   const markerBorderColor = useToken('colors', useColorModeValue('white', 'black'));

diff --git a/ui/shared/chart/ChartWidgetGraph.tsx b/ui/shared/chart/ChartWidgetGraph.tsx
@@ -31,7 +31,7 @@ const DEFAULT_CHART_MARGIN = { bottom: 20, left: 40, right: 20, top: 10 };
 
 const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title, margin: marginProps, units }: Props) => {
   const isMobile = useIsMobile();
-  const color = useToken('colors', 'blue.200');
+  const color = useToken('colors', 'purple.200');
   const chartId = `chart-${ title.split(' ').join('') }-${ isEnlarged ? 'fullscreen' : 'small' }`;
 
   const overlayRef = React.useRef<SVGRectElement>(null);

diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx
@@ -131,7 +131,7 @@ test('customization', async({ mount }) => {
         truncation="constant"
         p={ 3 }
         borderWidth="1px"
-        borderColor="blue.700"
+        borderColor="purple.700"
       />
     </TestApp>,
   );

diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
@@ -148,8 +148,8 @@ const AddressEntry = (props: EntityProps) => {
   const partsProps = _omit(props, [ 'className', 'onClick' ]);
 
   const context = useAddressHighlightContext();
-  const highlightedBgColor = useColorModeValue('blue.50', 'blue.900');
-  const highlightedBorderColor = useColorModeValue('blue.200', 'blue.600');
+  const highlightedBgColor = useColorModeValue('purple.50', 'purple.900');
+  const highlightedBorderColor = useColorModeValue('purple.200', 'purple.600');
 
   return (
     <Container

diff --git a/ui/shared/entities/block/BlockEntity.pw.tsx b/ui/shared/entities/block/BlockEntity.pw.tsx
@@ -73,7 +73,7 @@ test('customization', async({ mount }) => {
         number={ 17943507 }
         p={ 3 }
         borderWidth="1px"
-        borderColor="blue.700"
+        borderColor="purple.700"
       />
     </TestApp>,
   );

diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx
@@ -61,7 +61,7 @@ test('customization', async({ mount }) => {
         name={ name }
         p={ 3 }
         borderWidth="1px"
-        borderColor="blue.700"
+        borderColor="purple.700"
       />
     </TestApp>,
   );

diff --git a/ui/shared/entities/nft/NftEntity.pw.tsx b/ui/shared/entities/nft/NftEntity.pw.tsx
@@ -63,7 +63,7 @@ test('customization', async({ mount }) => {
         id={ 1042 }
         p={ 3 }
         borderWidth="1px"
-        borderColor="blue.700"
+        borderColor="purple.700"
       />
     </TestApp>,
   );

diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx
@@ -82,7 +82,7 @@ test('customization', async({ mount }) => {
           p={ 2 }
           maxW="200px"
           borderWidth="1px"
-          borderColor="blue.700"
+          borderColor="purple.700"
         />
       </Box>
     </TestApp>,

diff --git a/ui/shared/entities/tx/TxEntity.pw.tsx b/ui/shared/entities/tx/TxEntity.pw.tsx
@@ -76,7 +76,7 @@ test('customization', async({ mount }) => {
         truncation="constant"
         p={ 3 }
         borderWidth="1px"
-        borderColor="blue.700"
+        borderColor="purple.700"
       />
     </TestApp>,
   );

diff --git a/ui/shared/filters/FilterButton.tsx b/ui/shared/filters/FilterButton.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const badgeColor = useColorModeValue('white', 'black');
-  const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
+  const badgeBgColor = useColorModeValue('purple.700', 'gray.50');
 
   if (isLoading) {
     return <Skeleton w={{ base: 9, lg: '78px' }} h={ 8 } borderRadius="base" flexShrink={ 0 }/>;

diff --git a/ui/shared/monaco/utils/themes.ts b/ui/shared/monaco/utils/themes.ts
@@ -34,7 +34,7 @@ export const light = {
     'custom.inputOption.hoverBackground': 'rgba(184, 184, 184, 0.31)',
 
     // don't know the name of this variables in vscode
-    'custom.fileLink.hoverForeground': '#4299E1', // blue.400
+    'custom.fileLink.hoverForeground': '#4299E1', // purple.400
     'custom.riskWarning.primaryBackground': '#FEEBCB', // orange.100
     'custom.riskWarning.background': '#FFFAF0', // orange.50
   } as const,
@@ -76,7 +76,7 @@ export const dark = {
     'custom.inputOption.hoverBackground': 'rgba(90, 93, 94, 0.31)',
 
     // don't know the name of this variables in vscode
-    'custom.fileLink.hoverForeground': '#4299E1', // blue.400
+    'custom.fileLink.hoverForeground': '#4299E1', // purple.400
     'custom.riskWarning.primaryBackground': 'rgba(246, 173, 85, 0.3)', // orange.300
     'custom.riskWarning.background': 'rgba(246, 173, 85, 0.1)', // orange.300
   } as const,

diff --git a/ui/shared/radioButtonGroup/RadioButtonGroup.tsx b/ui/shared/radioButtonGroup/RadioButtonGroup.tsx
@@ -19,8 +19,8 @@ type RadioButtonProps = UseRadioProps & RadioItemProps;
 
 const RadioButton = (props: RadioButtonProps) => {
   const { getInputProps, getRadioProps } = useRadio(props);
-  const buttonColor = useColorModeValue('blue.50', 'gray.800');
-  const checkedTextColor = useColorModeValue('blue.700', 'gray.50');
+  const buttonColor = useColorModeValue('purple.50', 'gray.800');
+  const checkedTextColor = useColorModeValue('purple.700', 'gray.50');
 
   const input = getInputProps();
   const checkbox = getRadioProps();

diff --git a/ui/snippets/footer/IntTxsIndexingStatus.tsx b/ui/snippets/footer/IntTxsIndexingStatus.tsx
@@ -67,7 +67,7 @@ const IntTxsIndexingStatus = () => {
       alignItems="center"
       justifyContent="center"
       color="green.400"
-      _hover={{ color: 'blue.400' }}
+      _hover={{ color: 'purple.400' }}
     >
       <IconButton
         colorScheme="none"