From 3e16a873a1f7b503da0742949dab36468f672784 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Tue, 2 Jul 2024 12:12:21 +0200
Subject: [PATCH 1/3] migrate to stats-types package

---
 lib/api/resources.ts           |  9 +++++----
 mocks/stats/line.ts            | 35 ++++++++++++++++++++++++++++++++-
 mocks/stats/lines.ts           | 28 ++++++++++++++------------
 package.json                   |  1 +
 stubs/stats.ts                 | 11 ++++++-----
 types/api/stats.ts             | 36 ----------------------------------
 ui/stats/ChartsWidgetsList.tsx |  4 ++--
 ui/stats/NumberWidgetsList.tsx |  2 +-
 ui/stats/StatsFilters.tsx      |  4 ++--
 ui/stats/useStats.tsx          |  6 +++---
 yarn.lock                      | 34 ++++++--------------------------
 11 files changed, 75 insertions(+), 95 deletions(-)

diff --git a/lib/api/resources.ts b/lib/api/resources.ts
index e2770a12b5..d4986f6992 100644
--- a/lib/api/resources.ts
+++ b/lib/api/resources.ts
@@ -1,4 +1,5 @@
 import type * as bens from '@blockscout/bens-types';
+import type * as stats from '@blockscout/stats-types';
 import { getFeaturePayload } from 'configs/app/features/types';
 import type {
   UserInfo,
@@ -71,7 +72,7 @@ import type {
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search';
 import type { ShibariumWithdrawalsResponse, ShibariumDepositsResponse } from 'types/api/shibarium';
-import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats';
+import type { HomeStats } from 'types/api/stats';
 import type {
   TokenCounters,
   TokenInfo,
@@ -931,9 +932,9 @@ Q extends 'homepage_zkevm_l2_batches' ? { items: Array<ZkEvmL2TxnBatchesItem> }
 Q extends 'homepage_indexing_status' ? IndexingStatus :
 Q extends 'homepage_zkevm_latest_batch' ? number :
 Q extends 'homepage_zksync_latest_batch' ? number :
-Q extends 'stats_counters' ? Counters :
-Q extends 'stats_lines' ? StatsCharts :
-Q extends 'stats_line' ? StatsChart :
+Q extends 'stats_counters' ? stats.Counters :
+Q extends 'stats_lines' ? stats.LineCharts :
+Q extends 'stats_line' ? stats.LineChart :
 Q extends 'blocks' ? BlocksResponse :
 Q extends 'block' ? Block :
 Q extends 'block_txs' ? BlockTransactionsResponse :
diff --git a/mocks/stats/line.ts b/mocks/stats/line.ts
index 47de79b184..799cff4c45 100644
--- a/mocks/stats/line.ts
+++ b/mocks/stats/line.ts
@@ -1,128 +1,161 @@
-export const averageGasPrice = {
+import type * as stats from '@blockscout/stats-types';
+
+export const averageGasPrice: stats.LineChart = {
   chart: [
     {
       date: '2023-12-22',
       value: '37.7804422597599',
+      is_approximate: false,
     },
     {
       date: '2023-12-23',
       value: '25.84889883009387',
+      is_approximate: false,
     },
     {
       date: '2023-12-24',
       value: '25.818463227198574',
+      is_approximate: false,
     },
     {
       date: '2023-12-25',
       value: '26.045513050051298',
+      is_approximate: false,
     },
     {
       date: '2023-12-26',
       value: '21.42600692652399',
+      is_approximate: false,
     },
     {
       date: '2023-12-27',
       value: '31.066730409846656',
+      is_approximate: false,
     },
     {
       date: '2023-12-28',
       value: '33.63955781902089',
+      is_approximate: false,
     },
     {
       date: '2023-12-29',
       value: '28.064736756058384',
+      is_approximate: false,
     },
     {
       date: '2023-12-30',
       value: '23.074500869678175',
+      is_approximate: false,
     },
     {
       date: '2023-12-31',
       value: '17.651005734615133',
+      is_approximate: false,
     },
     {
       date: '2024-01-01',
       value: '14.906085174476441',
+      is_approximate: false,
     },
     {
       date: '2024-01-02',
       value: '22.28459059038656',
+      is_approximate: false,
     },
     {
       date: '2024-01-03',
       value: '39.8311646806592',
+      is_approximate: false,
     },
     {
       date: '2024-01-04',
       value: '26.09989322256083',
+      is_approximate: false,
     },
     {
       date: '2024-01-05',
       value: '22.821996688111998',
+      is_approximate: false,
     },
     {
       date: '2024-01-06',
       value: '20.32680041262083',
+      is_approximate: false,
     },
     {
       date: '2024-01-07',
       value: '32.535045831809704',
+      is_approximate: false,
     },
     {
       date: '2024-01-08',
       value: '27.443477102139482',
+      is_approximate: false,
     },
     {
       date: '2024-01-09',
       value: '20.7911332558055',
+      is_approximate: false,
     },
     {
       date: '2024-01-10',
       value: '42.10740192523919',
+      is_approximate: false,
     },
     {
       date: '2024-01-11',
       value: '35.75215680343582',
+      is_approximate: false,
     },
     {
       date: '2024-01-12',
       value: '27.430414798093253',
+      is_approximate: false,
     },
     {
       date: '2024-01-13',
       value: '20.170934096589875',
+      is_approximate: false,
     },
     {
       date: '2024-01-14',
       value: '38.79660984371034',
+      is_approximate: false,
     },
     {
       date: '2024-01-15',
       value: '26.140740484554204',
+      is_approximate: false,
     },
     {
       date: '2024-01-16',
       value: '36.708543184194156',
+      is_approximate: false,
     },
     {
       date: '2024-01-17',
       value: '40.325438794298876',
+      is_approximate: false,
     },
     {
       date: '2024-01-18',
       value: '37.55145309930694',
+      is_approximate: false,
     },
     {
       date: '2024-01-19',
       value: '33.271450114434664',
+      is_approximate: false,
     },
     {
       date: '2024-01-20',
       value: '19.303304377685638',
+      is_approximate: false,
     },
     {
       date: '2024-01-21',
       value: '14.375908594704976',
+      is_approximate: false,
     },
   ],
 };
diff --git a/mocks/stats/lines.ts b/mocks/stats/lines.ts
index 51aca3c97d..9f8870249f 100644
--- a/mocks/stats/lines.ts
+++ b/mocks/stats/lines.ts
@@ -1,4 +1,6 @@
-export const base = {
+import type * as stats from '@blockscout/stats-types';
+
+export const base: stats.LineCharts = {
   sections: [
     {
       id: 'accounts',
@@ -8,19 +10,19 @@ export const base = {
           id: 'accountsGrowth',
           title: 'Accounts growth',
           description: 'Cumulative accounts number per period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'activeAccounts',
           title: 'Active accounts',
           description: 'Active accounts number per period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'newAccounts',
           title: 'New accounts',
           description: 'New accounts number per day',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -38,7 +40,7 @@ export const base = {
           id: 'newTxns',
           title: 'New transactions',
           description: 'New transactions number',
-          units: null,
+          units: undefined,
         },
         {
           id: 'txnsFee',
@@ -50,13 +52,13 @@ export const base = {
           id: 'txnsGrowth',
           title: 'Transactions growth',
           description: 'Cumulative transactions number',
-          units: null,
+          units: undefined,
         },
         {
           id: 'txnsSuccessRate',
           title: 'Transactions success rate',
           description: 'Successful transactions rate per day',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -80,7 +82,7 @@ export const base = {
           id: 'newBlocks',
           title: 'New blocks',
           description: 'New blocks number',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -92,7 +94,7 @@ export const base = {
           id: 'newNativeCoinTransfers',
           title: 'New ETH transfers',
           description: 'New token transfers number for the period',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -104,7 +106,7 @@ export const base = {
           id: 'averageGasLimit',
           title: 'Average gas limit',
           description: 'Average gas limit per block for the period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'averageGasPrice',
@@ -116,7 +118,7 @@ export const base = {
           id: 'gasUsedGrowth',
           title: 'Gas used growth',
           description: 'Cumulative gas used for the period',
-          units: null,
+          units: undefined,
         },
       ],
     },
@@ -128,13 +130,13 @@ export const base = {
           id: 'newVerifiedContracts',
           title: 'New verified contracts',
           description: 'New verified contracts number for the period',
-          units: null,
+          units: undefined,
         },
         {
           id: 'verifiedContractsGrowth',
           title: 'Verified contracts growth',
           description: 'Cumulative number verified contracts for the period',
-          units: null,
+          units: undefined,
         },
       ],
     },
diff --git a/package.json b/package.json
index 2e6d782c4e..31bc89411d 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@blockscout/bens-types": "v1.3.0-beta",
+    "@blockscout/stats-types": "../blockscout-rs/stats/types",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",
diff --git a/stubs/stats.ts b/stubs/stats.ts
index d21ba588fd..e1e70724fb 100644
--- a/stubs/stats.ts
+++ b/stubs/stats.ts
@@ -1,4 +1,5 @@
-import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
+import type { HomeStats } from 'types/api/stats';
 
 export const HOMEPAGE_STATS: HomeStats = {
   average_block_time: 14346,
@@ -41,7 +42,7 @@ export const HOMEPAGE_STATS: HomeStats = {
   tvl: '1767425.102766552',
 };
 
-export const STATS_CHARTS_SECTION: StatsChartsSection = {
+export const STATS_CHARTS_SECTION: stats.LineChartSection = {
   id: 'placeholder',
   title: 'Placeholder',
   charts: [
@@ -61,13 +62,13 @@ export const STATS_CHARTS_SECTION: StatsChartsSection = {
       id: 'chart_2',
       title: 'New transactions',
       description: 'New transactions number',
-      units: null,
+      units: undefined,
     },
     {
       id: 'chart_3',
       title: 'Transactions growth',
       description: 'Cumulative transactions number',
-      units: null,
+      units: undefined,
     },
   ],
 };
@@ -76,7 +77,7 @@ export const STATS_CHARTS = {
   sections: [ STATS_CHARTS_SECTION ],
 };
 
-export const STATS_COUNTER: Counter = {
+export const STATS_COUNTER: stats.Counter = {
   id: 'stub',
   value: '9074405',
   title: 'Placeholder Counter',
diff --git a/types/api/stats.ts b/types/api/stats.ts
index c7585f3797..3d75a5f3e9 100644
--- a/types/api/stats.ts
+++ b/types/api/stats.ts
@@ -34,39 +34,3 @@ export interface GasPriceInfo {
   base_fee: number | null;
   priority_fee: number | null;
 }
-
-export type Counters = {
-  counters: Array<Counter>;
-}
-
-export type Counter = {
-  id: string;
-  value: string;
-  title: string;
-  description?: string;
-  units: string;
-}
-
-export type StatsCharts = {
-  sections: Array<StatsChartsSection>;
-}
-
-export type StatsChartsSection = {
-  id: string;
-  title: string;
-  charts: Array<StatsChartInfo>;
-}
-
-export type StatsChartInfo = {
-  id: string;
-  title: string;
-  description: string;
-  units: string | null;
-}
-
-export type StatsChart = { chart: Array<StatsChartItem> };
-
-export type StatsChartItem = {
-  date: string;
-  value: string;
-}
diff --git a/ui/stats/ChartsWidgetsList.tsx b/ui/stats/ChartsWidgetsList.tsx
index 5002e599b5..9526f463d6 100644
--- a/ui/stats/ChartsWidgetsList.tsx
+++ b/ui/stats/ChartsWidgetsList.tsx
@@ -1,7 +1,7 @@
 import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
@@ -18,7 +18,7 @@ type Props = {
   initialFilterQuery: string;
   isError: boolean;
   isPlaceholderData: boolean;
-  charts?: Array<StatsChartsSection>;
+  charts?: Array<stats.LineChartSection>;
   interval: StatsIntervalIds;
 }
 
diff --git a/ui/stats/NumberWidgetsList.tsx b/ui/stats/NumberWidgetsList.tsx
index 758d9810c5..ad222401b5 100644
--- a/ui/stats/NumberWidgetsList.tsx
+++ b/ui/stats/NumberWidgetsList.tsx
@@ -29,7 +29,7 @@ const NumberWidgetsList = () => {
         data?.counters?.map(({ id, title, value, units, description }, index) => {
 
           let unitsStr = '';
-          if (UNITS_WITHOUT_SPACE.includes(units)) {
+          if (units && UNITS_WITHOUT_SPACE.includes(units)) {
             unitsStr = units;
           } else if (units) {
             unitsStr = ' ' + units;
diff --git a/ui/stats/StatsFilters.tsx b/ui/stats/StatsFilters.tsx
index df96c3ac35..09891555e4 100644
--- a/ui/stats/StatsFilters.tsx
+++ b/ui/stats/StatsFilters.tsx
@@ -1,7 +1,7 @@
 import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
 
 import FilterInput from 'ui/shared/filters/FilterInput';
@@ -15,7 +15,7 @@ const intervalList = Object.keys(STATS_INTERVALS).map((id: string) => ({
 })) as Array<StatsInterval>;
 
 type Props = {
-  sections?: Array<StatsChartsSection>;
+  sections?: Array<stats.LineChartSection>;
   currentSection: string;
   onSectionChange: (newSection: string) => void;
   interval: StatsIntervalIds;
diff --git a/ui/stats/useStats.tsx b/ui/stats/useStats.tsx
index 96117b9622..f4a15dc110 100644
--- a/ui/stats/useStats.tsx
+++ b/ui/stats/useStats.tsx
@@ -1,18 +1,18 @@
 import { useRouter } from 'next/router';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import type { StatsChartInfo, StatsChartsSection } from 'types/api/stats';
+import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { STATS_CHARTS } from 'stubs/stats';
 
-function isSectionMatches(section: StatsChartsSection, currentSection: string): boolean {
+function isSectionMatches(section: stats.LineChartSection, currentSection: string): boolean {
   return currentSection === 'all' || section.id === currentSection;
 }
 
-function isChartNameMatches(q: string, chart: StatsChartInfo) {
+function isChartNameMatches(q: string, chart: stats.LineChartInfo) {
   return chart.title.toLowerCase().includes(q.toLowerCase());
 }
 
diff --git a/yarn.lock b/yarn.lock
index 2e79f65273..fedaf47bd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1332,6 +1332,9 @@
   resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.3.0-beta.tgz#791fa102a33b1add14188beffe7c879219825424"
   integrity sha512-Gh4qYrj7bNo6fzPGsdtPDPqwboxv/4OWx9QyrblkKt4YSNAlyElIS9rcpGGJ9rVP3YyhflaCh52YOvtDcRXRLw==
 
+"@blockscout/stats-types@../blockscout-rs/stats/types":
+  version "0.0.1"
+
 "@braintree/sanitize-url@=6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
@@ -14846,16 +14849,7 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14983,14 +14977,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -16150,7 +16137,7 @@ word-wrap@^1.2.5, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -16168,15 +16155,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 227b62b5b4b1d1b698a28027cc526f1a7e73f69d Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Tue, 2 Jul 2024 13:18:15 +0200
Subject: [PATCH 2/3] migrate to visualizer-types package

---
 lib/api/resources.ts          | 4 ++--
 package.json                  | 1 +
 types/api/visualization.ts    | 4 ----
 ui/sol2uml/Sol2UmlDiagram.tsx | 7 ++++---
 yarn.lock                     | 3 +++
 5 files changed, 10 insertions(+), 9 deletions(-)
 delete mode 100644 types/api/visualization.ts

diff --git a/lib/api/resources.ts b/lib/api/resources.ts
index d4986f6992..ee25a7ef09 100644
--- a/lib/api/resources.ts
+++ b/lib/api/resources.ts
@@ -1,5 +1,6 @@
 import type * as bens from '@blockscout/bens-types';
 import type * as stats from '@blockscout/stats-types';
+import type * as visualizer from '@blockscout/visualizer-types';
 import { getFeaturePayload } from 'configs/app/features/types';
 import type {
   UserInfo,
@@ -100,7 +101,6 @@ import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { UserOpsResponse, UserOp, UserOpsFilters, UserOpsAccount } from 'types/api/userOps';
 import type { ValidatorsCountersResponse, ValidatorsFilters, ValidatorsResponse, ValidatorsSorting } from 'types/api/validators';
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
-import type { VisualizedContract } from 'types/api/visualization';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
 import type {
   ZkEvmL2DepositsResponse,
@@ -987,7 +987,7 @@ Q extends 'contract' ? SmartContract :
 Q extends 'contract_solidityscan_report' ? SolidityscanReport :
 Q extends 'verified_contracts' ? VerifiedContractsResponse :
 Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
-Q extends 'visualize_sol2uml' ? VisualizedContract :
+Q extends 'visualize_sol2uml' ? visualizer.VisualizeResponse :
 Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
 Q extends 'withdrawals' ? WithdrawalsResponse :
 Q extends 'withdrawals_counters' ? WithdrawalsCounters :
diff --git a/package.json b/package.json
index 31bc89411d..8332f18b9a 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   "dependencies": {
     "@blockscout/bens-types": "v1.3.0-beta",
     "@blockscout/stats-types": "../blockscout-rs/stats/types",
+    "@blockscout/visualizer-types": "../blockscout-rs/visualizer/types",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",
diff --git a/types/api/visualization.ts b/types/api/visualization.ts
deleted file mode 100644
index f80dc493b1..0000000000
--- a/types/api/visualization.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface VisualizedContract {
-  png: string | null;
-  svg: string | null;
-}
diff --git a/ui/sol2uml/Sol2UmlDiagram.tsx b/ui/sol2uml/Sol2UmlDiagram.tsx
index eaebf9c3c1..840b05fb9e 100644
--- a/ui/sol2uml/Sol2UmlDiagram.tsx
+++ b/ui/sol2uml/Sol2UmlDiagram.tsx
@@ -1,6 +1,7 @@
 import { chakra, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type * as visualizer from '@blockscout/visualizer-types';
 import type { SmartContract } from 'types/api/contract';
 
 import type { ResourceError } from 'lib/api/resources';
@@ -13,7 +14,7 @@ interface Props {
   addressHash: string;
 }
 
-function composeSources(contract: SmartContract | undefined) {
+function composeSources(contract: SmartContract | undefined): visualizer.VisualizeStorageRequest['sources'] {
   if (!contract) {
     return {};
   }
@@ -23,7 +24,7 @@ function composeSources(contract: SmartContract | undefined) {
   }, {});
 
   return {
-    [contract.file_path || 'index.sol']: contract.source_code,
+    [contract.file_path || 'index.sol']: contract.source_code || '',
     ...additionalSources,
   };
 }
@@ -76,7 +77,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
   return (
     <Tooltip label="Click on image to zoom" placement="top">
       <chakra.img
-        src={ `data:image/svg+xml;base64,${ umlQuery.data.svg }` }
+        src={ imgUrl }
         alt={ `Contract ${ contractQuery.data.name } UML diagram` }
         onClick={ handleClick }
         cursor="pointer"
diff --git a/yarn.lock b/yarn.lock
index fedaf47bd0..52aabf44d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1335,6 +1335,9 @@
 "@blockscout/stats-types@../blockscout-rs/stats/types":
   version "0.0.1"
 
+"@blockscout/visualizer-types@../blockscout-rs/visualizer/types":
+  version "0.0.1"
+
 "@braintree/sanitize-url@=6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"

From 24bfdd1fd98582f93459a198cff91e886fd0f3c3 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Tue, 2 Jul 2024 13:38:56 +0200
Subject: [PATCH 3/3] update package.json

---
 package.json |  6 +++---
 yarn.lock    | 20 ++++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 8332f18b9a..185fee93ee 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,9 @@
     "monitoring:grafana:local": "docker run -d -p 4000:3000 --name=blockscout_grafana --user $(id -u) --volume $(pwd)/grafana:/var/lib/grafana grafana/grafana-enterprise"
   },
   "dependencies": {
-    "@blockscout/bens-types": "v1.3.0-beta",
-    "@blockscout/stats-types": "../blockscout-rs/stats/types",
-    "@blockscout/visualizer-types": "../blockscout-rs/visualizer/types",
+    "@blockscout/bens-types": "1.3.4",
+    "@blockscout/stats-types": "1.6.0",
+    "@blockscout/visualizer-types": "0.2.0",
     "@chakra-ui/react": "2.7.1",
     "@chakra-ui/theme-tools": "^2.0.18",
     "@emotion/react": "^11.10.4",
diff --git a/yarn.lock b/yarn.lock
index 52aabf44d4..bf968e6963 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1327,16 +1327,20 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@blockscout/bens-types@v1.3.0-beta":
-  version "1.3.0-beta"
-  resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.3.0-beta.tgz#791fa102a33b1add14188beffe7c879219825424"
-  integrity sha512-Gh4qYrj7bNo6fzPGsdtPDPqwboxv/4OWx9QyrblkKt4YSNAlyElIS9rcpGGJ9rVP3YyhflaCh52YOvtDcRXRLw==
+"@blockscout/bens-types@1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@blockscout/bens-types/-/bens-types-1.3.4.tgz#e75b863c6d065e7d6d5d01e1a1d64da8df261640"
+  integrity sha512-kKRa8jKu/CBLR3QbWpRXmtwIXiIwIPDrFeEPIYUQp5bg9uY+ActOyQERixo/9FE+BHZShWUDm+75FoaAmIGIOw==
 
-"@blockscout/stats-types@../blockscout-rs/stats/types":
-  version "0.0.1"
+"@blockscout/stats-types@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@blockscout/stats-types/-/stats-types-1.6.0.tgz#cdb27ab3d3cb1eef7b8b069c39d4e09afda1aec9"
+  integrity sha512-MzItYOsLa3zgoFzRgFAgg7gynSXG0w/GqHzg5BGHcBPbPSp/g7A6mMtyIchI6TnZxxnCwziHHvzmJFXz11emUg==
 
-"@blockscout/visualizer-types@../blockscout-rs/visualizer/types":
-  version "0.0.1"
+"@blockscout/visualizer-types@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@blockscout/visualizer-types/-/visualizer-types-0.2.0.tgz#a8ef326d69e29417db124c78f868d68aca959ad1"
+  integrity sha512-gasqbEL89iH8YnH/TIEk0MBSG9SwhEJegY9tnQ1c/jFZOCYjiVkgNwm4oH0ncwCKoNX1GoKAregbkEUwDDw7FQ==
 
 "@braintree/sanitize-url@=6.0.4":
   version "6.0.4"