Merge pull request #118 from NethermindEth/ui-refurbishment

UI refurbishment changes

plugin/package.json

@@ -21,6 +21,7 @@
     "@web3modal/wagmi": "^3.2.1",
     "axios": "^1.4.0",
     "bn.js": "^5.2.1",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.0",
     "form-data": "^4.0.0",

plugin/src/atoms/compilation.ts

@@ -1,12 +1,10 @@
 import { atom } from 'jotai'
 
-const statusAtom = atom<string>('Compiling....')
-
+const compileStatusAtom = atom<string>('Compiling....')
 const hashDirAtom = atom<string>('')
-
 const isCompilingAtom = atom<boolean>(false)
-
-type CompilationKeys = 'status' | 'isCompiling' | 'hashDir'
+type CompilationKeys = 'status' | 'isCompiling' | 'hashDir' | 'errorMessages'
+const compileErrorMessagesAtom = atom<string[]>([])
 
 interface SetCompilationValue {
   key: CompilationKeys
@@ -16,24 +14,36 @@ interface SetCompilationValue {
 const compilationAtom = atom(
   (get) => {
     return {
-      status: get(statusAtom),
+      status: get(compileStatusAtom),
       isCompiling: get(isCompilingAtom),
-      hashDir: get(hashDirAtom)
+      hashDir: get(hashDirAtom),
+      errorMessages: get(compileErrorMessagesAtom)
     }
   },
   (_get, set, newValue: SetCompilationValue) => {
     switch (newValue?.key) {
       case 'status':
-        typeof newValue?.value === 'string' && set(statusAtom, newValue?.value)
+        typeof newValue?.value === 'string' && set(compileStatusAtom, newValue?.value)
         break
       case 'isCompiling':
         typeof newValue?.value === 'boolean' && set(isCompilingAtom, newValue?.value)
         break
       case 'hashDir':
         typeof newValue?.value === 'string' && set(hashDirAtom, newValue?.value)
         break
+      case 'errorMessages':
+        Array.isArray(newValue?.value) && set(compileErrorMessagesAtom, newValue?.value)
+        break
     }
   }
 )
 
-export { statusAtom, isCompilingAtom, hashDirAtom, compilationAtom, type SetCompilationValue, type CompilationKeys }
+export {
+  compileStatusAtom,
+  isCompilingAtom,
+  hashDirAtom,
+  compilationAtom,
+  compileErrorMessagesAtom,
+  type SetCompilationValue,
+  type CompilationKeys
+}

plugin/src/atoms/index.ts

@@ -0,0 +1,36 @@
+export {
+  compilationAtom,
+  compileStatusAtom,
+  hashDirAtom,
+  isCompilingAtom,
+  compileErrorMessagesAtom,
+  type CompilationKeys,
+  type SetCompilationValue
+} from './compilation'
+export { contractsAtom, selectedContractAtom } from './compiledContracts'
+export { accountAtom, providerAtom } from './connection'
+export { deployedContractsAtom, deployedSelectedContractAtom } from './deployedContracts'
+export {
+  constructorInputsAtom,
+  deployStatusAtom,
+  deploymentAtom,
+  isDeployingAtom,
+  notEnoughInputsAtom
+} from './deployment'
+export {
+  availableDevnetAccountsAtom,
+  devnetAtom,
+  envAtom,
+  isDevnetAliveAtom,
+  selectedDevnetAccountAtom
+} from './environment'
+export { accountsAtom, networkNameAtom, selectedAccountAtom } from './manualAccount'
+export { transactionsAtom } from './transaction'
+export {
+  type SetVerificationValue,
+  type VerificationKeys,
+  isVerifyingAtom,
+  verificatationStatusAtom,
+  verificationAtom
+} from './verification'
+export { solidityVersionAtom, versionsAtom } from './version'

plugin/src/atoms/verification.ts

@@ -1,6 +1,6 @@
 import { atom } from 'jotai'
 
-const statusAtom = atom<string>('Verifying...')
+const verificatationStatusAtom = atom<string>('Verifying...')
 
 const isVerifyingAtom = atom<boolean>(false)
 
@@ -14,14 +14,14 @@ interface SetVerificationValue {
 const verificationAtom = atom(
   (get) => {
     return {
-      status: get(statusAtom),
+      status: get(verificatationStatusAtom),
       isVerifying: get(isVerifyingAtom)
     }
   },
   (_get, set, newValue: SetVerificationValue) => {
     switch (newValue?.key) {
       case 'status':
-        typeof newValue?.value === 'string' && set(statusAtom, newValue?.value)
+        typeof newValue?.value === 'string' && set(verificatationStatusAtom, newValue?.value)
         break
       case 'isVerifying':
         typeof newValue?.value === 'boolean' && set(isVerifyingAtom, newValue?.value)
@@ -30,4 +30,4 @@ const verificationAtom = atom(
   }
 )
 
-export { statusAtom, isVerifyingAtom, verificationAtom, type SetVerificationValue, type VerificationKeys }
+export { verificatationStatusAtom, isVerifyingAtom, verificationAtom, type SetVerificationValue, type VerificationKeys }

plugin/src/components/ManualAccount/index.tsx

@@ -65,7 +65,6 @@ const ManualAccountComp: React.FC<{
         if (selectedAccount) {
           const provider = new Provider('https://testnet.era.zksync.dev')
           const balance = await provider.getBalance(selectedAccount.address)
-          console.log('selected account balance', balance)
           setSelectedAccount((prevAccount) => {
             if (prevAccount != null && balance.toString() !== prevAccount.balance) {
               return { ...prevAccount, balance: balance.toString() }

plugin/src/components/StateAction/index.tsx

@@ -2,19 +2,29 @@ import React from 'react'
 
 import './index.css'
 import { MdCheckCircleOutline, MdErrorOutline } from 'react-icons/md'
+import { Tooltip } from '@/ui_components'
 
 interface IStateAction {
   value?: 'loading' | 'success' | 'error' | ''
+  errorTooltipText?: string
 }
 
-const StateAction: React.FC<IStateAction> = ({ value }) => {
+const StateAction: React.FC<IStateAction> = ({ value, errorTooltipText }) => {
   switch (value) {
     case 'loading':
       return <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
     case 'success':
       return <MdCheckCircleOutline color="green" size={18} />
     case 'error':
-      return <MdErrorOutline color="red" size={18} />
+      return (
+        <Tooltip
+          icon={<MdErrorOutline color="red" size={18} />}
+          content={<p>{errorTooltipText}</p>}
+          side="right"
+          sideOffset={-4}
+          contentClassName="max-w-300"
+        />
+      )
     default:
       return <></>
   }