Merge pull request #39 from NethermindEth/feature/test-accounts

plugin/.env

@@ -1,5 +1,5 @@
-VITE_API_URL=$API_SERVICE_URL # https://zksync-plugin-api.nethermind.dev
+VITE_API_URL=$API_SERVICE_URL
 VITE_DEVNET_URL=http://127.0.0.1:8011
-VITE_REMOTE_DEVNET_URL=$ZKSYNC_DEVNET_URL # https://zksync-devnet.nethermind.dev
+VITE_REMOTE_DEVNET_URL=$ZKSYNC_DEVNET_URL
 VITE_VERSION=$npm_package_version
 VITE_WALLET_CONNECT_PROJECT_ID=$WALLETCONNECT_PROJECT_ID

plugin/package.json

@@ -53,7 +53,7 @@
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.1.6",
     "vite": "^4.4.9"
   },
   "scripts": {

plugin/src/components/DeployedContracts/index.tsx

@@ -4,14 +4,15 @@ import React, { useEffect } from 'react'
 import { getContractNameFromFullName, getShortenedHash } from '../../utils/utils'
 import FunctionalInput from '../FunctionalInput'
 import './deployedContracts.css'
-import { useAtom, useAtomValue } from 'jotai'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { deployedContractsAtom, deployedSelectedContractAtom } from '../../atoms/deployedContracts'
 import * as D from '../../ui_components/Dropdown'
 import { BsChevronDown } from 'react-icons/bs'
 import copy from 'copy-to-clipboard'
 import { MdCopyAll } from 'react-icons/md'
 import { FaCheck } from 'react-icons/fa'
 import useRemixClient from '../../hooks/useRemixClient'
+import { envAtom } from '../../atoms/environment'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -27,6 +28,8 @@ const DeployedContracts: React.FC = () => {
 
   const [dropdownControl, setDropdownControl] = React.useState(false)
 
+  const setEnv = useSetAtom(envAtom)
+
   const [copied, setCopied] = React.useState(false)
 
   useEffect(() => {
@@ -77,10 +80,11 @@ const DeployedContracts: React.FC = () => {
                   key={index}
                   onSelect={() => {
                     setSelectedContract(contract)
+                    setEnv(contract.env)
                     setDropdownControl(false)
                   }}
                 >
-                  {`${getContractNameFromFullName(contract.contractName)}, ${getShortenedHash(contract.address, 8, 8)}`}
+                  {`[${contract.env}] ${getContractNameFromFullName(contract.contractName)}, ${getShortenedHash(contract.address, 8, 8)}`}
                 </D.Item>
               )
             })}

plugin/src/components/EnvironmentSelector/index.tsx

@@ -21,10 +21,12 @@ const EnvironmentSelector: React.FC = () => {
     const value = parseInt(ipValue)
     if (!isNaN(value) && value > 0) {
       setDevnet(devnets[value - 1])
-      if (value === 2) {
+      if (value === 3) {
         setEnv('remoteDevnet')
-      } else {
+      } else if (value === 2) {
         setEnv('localDevnet')
+      } else {
+        setEnv('manual')
       }
       setProvider(null)
       return
@@ -69,12 +71,20 @@ const EnvironmentSelector: React.FC = () => {
             >
               Wallet
             </D.Item>
+            <D.Item
+              key={'1manual'}
+              onClick={() => {
+                handleEnvironmentChange('1')
+              }}
+            >
+              Manual
+            </D.Item>
             {devnets.map((devnet, i) => {
               return (
                 <D.Item
                   key={i.toString() + devnet?.name}
                   onClick={() => {
-                    handleEnvironmentChange((i + 1).toString())
+                    handleEnvironmentChange((i + 2).toString())
                   }}
                 >
                   {devnet?.name}

plugin/src/components/FunctionalInput/index.tsx

@@ -5,7 +5,7 @@ import { generateInputName } from '../../utils/utils'
 import { type AbiElement, type Input } from '../../types/contracts'
 import InputField from '../InputField'
 import { Contract } from 'ethers'
-import { type Transaction } from '../../types/transaction'
+import { mockManualChain, type Transaction } from '../../types/transaction'
 import useRemixClient from '../../hooks/useRemixClient'
 import { useAtom, useAtomValue } from 'jotai'
 import { deployedSelectedContractAtom } from '../../atoms/deployedContracts'
@@ -70,7 +70,7 @@ const MethodInput: React.FC<CompiledContractsProps> = ({ element }: CompiledCont
           type: 'invoke',
           txId: result.hash,
           env,
-          chain: walletClient?.chain,
+          chain: (env !== 'manual' ? walletClient?.chain : mockManualChain),
           provider
         }
 

plugin/src/components/ManualAccount/index.css

@@ -4,45 +4,21 @@
     gap: 1rem;
     display: flex;
     flex-direction: column;
-}
 
-.manual-root-wrapper p {
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
+    padding: 0;
 }
 
-.network-selection-wrapper {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 8fr 2fr;
-    align-items: center;
-}
+.add-account-button-plus {
+    font-size: 25px;
 
-.manual-balance-wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 0rem 0.2rem;
-    margin-bottom: 1rem;
-}
+    padding: 0;
 
-.manual-balance-wrapper * {
-    margin: 0;
-}
+    text-align: center;
+    display: flex;
 
-.btn-refresh[data-refreshing='true'] svg {
-    -webkit-animation: rotating 1s linear infinite;
-    -moz-animation: rotating 1s linear infinite;
-    -ms-animation: rotating 1s linear infinite;
-    -o-animation: rotating 1s linear infinite;
-    animation: rotating 1s linear infinite;
+    align-items: center;
 }
 
-.selected-address-wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    align-items: center;
+.add-account-button-plus:focus {
+    outline: none;
 }