Enable the contract viewer (duneanalytics#322)

* Enable contract viewer

* Fixed theme for contract viewer on initial load

* Show some loading indicator and correctly update url query

* Fixed the reloading of the session route

* Removed emojis

* Fixed issue with 4bytes not being copyable

* Fixed button and icon usage

* minor styling changes

* linting

* improve error handling

* Remove debug check

* fixed text for readonly functions

* fixed error status

* minor button fix

* minor padding fix

* small readme fix

* Fixed hardcoded height

* PR feedback

* Fixed text overflow issue on validation error

* max size on the address input

README.md

@@ -29,6 +29,10 @@ Install the dependencies:
 
     pnpm install
 
+Specify the environment variables if you want to run the contract viewer into `.env.local`
+
+    APIKEY_ETHERSCAN=
+
 Start up the app and see it running at <http://localhost:3000>
 
     pnpm dev

components/ContractViewer/ContractCodeEditor.tsx

@@ -5,7 +5,7 @@ import { useTheme } from 'next-themes'
 
 const ContractCodeEditor = ({ code, line, column, ...props }: any) => {
   const [codeEditor, setCodeEditor] = useState<any>(null)
-  const { theme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   const handleEditorDidMount = (editor: any) => {
     if (!editor) {
@@ -38,7 +38,7 @@ const ContractCodeEditor = ({ code, line, column, ...props }: any) => {
     <div className="h-full">
       <Editor
         defaultLanguage="sol"
-        theme={theme == 'dark' ? 'vs-dark' : 'vs-light'}
+        theme={resolvedTheme == 'dark' ? 'vs-dark' : 'vs-light'}
         onMount={handleEditorDidMount}
         value={code}
         {...props}