From 1828a579366995228643f79b20fc5266228c021e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 24 Jan 2023 12:55:40 +0100
Subject: [PATCH] add reac-zoom-pan-pinch

---
 .../src/lib/solidity-uml-gen.tsx               | 18 ++++--------------
 package.json                                   |  1 +
 yarn.lock                                      |  5 +++++
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
index 5a4c59fb15..8c2a06eae8 100644
--- a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
+++ b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Viewer from 'react-viewer'
 import { ISolidityUmlGen } from '../types'
 export interface RemixUiSolidityUmlGenProps {
   plugin?: ISolidityUmlGen
@@ -63,19 +62,10 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUm
         <ActionButtons buttons={buttons}/>
       </div>
       <div>
-        VIEWEERR
-        <Viewer
-          visible={showViewer}
-          rotatable={false}
-          loop={false}
-          noClose={false}
-          onClose={() => setShowViewer(false)}
-          noFooter={true}
-          showTotal={false}
-          changeable={false}
-          zoomSpeed={0.2}
-          minScale={1}
-          images={[{src: `data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}]}
+        <img 
+          src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
+          width={800}
+          height={600}
         />
       </div>
     </div>
diff --git a/package.json b/package.json
index 845cdae5ea..22a80284d2 100644
--- a/package.json
+++ b/package.json
@@ -188,6 +188,7 @@
     "react-multi-carousel": "^2.8.2",
     "react-router-dom": "^6.3.0",
     "react-tabs": "^3.2.2",
+    "react-zoom-pan-pinch": "^2.2.0",
     "regenerator-runtime": "0.13.7",
     "rss-parser": "^3.12.0",
     "signale": "^1.4.0",
diff --git a/yarn.lock b/yarn.lock
index 2553470668..e3de53c482 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22964,6 +22964,11 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-zoom-pan-pinch@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.2.0.tgz#15dd97aef798699016e4e30182cc51c4bddd4739"
+  integrity sha512-khOlTeTI/ZXtbCfqUmkKW0HpM+w0RklEQ1DlFVi0D9y90r+Z8x+ipKBXvPQC3rUu5VoYK4603SY8GsA6enfa8w==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"