update transaction card, fix bug with changing contract does not chan…

…ge env

plugin/.env

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

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/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/features/Deployment/index.tsx

@@ -8,7 +8,7 @@ import { type AccordianTabs } from '../Plugin'
 import * as zksync from 'zksync-web3'
 import ConstructorInput from '../../components/ConstructorInput'
 import { type DeployedContract } from '../../types/contracts'
-import { type Transaction } from '../../types/transaction'
+import { mockManualChain, type Transaction } from '../../types/transaction'
 import { type Contract } from 'ethers'
 import { useWalletClient } from 'wagmi'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
@@ -18,6 +18,7 @@ import { contractsAtom, selectedContractAtom } from '../../atoms/compiledContrac
 import { accountAtom, providerAtom } from '../../atoms/connection'
 import { deployedContractsAtom, deployedSelectedContractAtom } from '../../atoms/deployedContracts'
 import { envAtom } from '../../atoms/environment'
+import { Chain, ChainFormatters } from 'viem'
 
 interface DeploymentProps {
   setActiveTab: (tab: AccordianTabs) => void
@@ -123,7 +124,8 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
         ...selectedContract,
         bytecode: selectedContract.bytecode,
         transactionHash: txHash,
-        address
+        address,
+        env
       }
 
       deployedSetContracts([deployedContract, ...deployedContracts])
@@ -136,7 +138,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
         type: 'deploy',
         txId: txHash,
         env,
-        chain: walletClient?.chain,
+        chain: (env !== 'manual' ? walletClient?.chain : mockManualChain),
         provider
       }
 

plugin/src/types/contracts.ts

@@ -1,3 +1,5 @@
+import type { EnvType } from './transaction'
+
 interface Contract {
   contractName: string
   sourceName: string
@@ -12,22 +14,9 @@ interface Contract {
 interface DeployedContract extends Contract {
   address: string
   transactionHash: string
+  env: EnvType
 }
 
-// #[derive(Debug, Deserialize, Serialize)]
-// #[serde(crate = "rocket::serde")]
-// pub struct CompileResponse {
-//   pub status: String,
-//     pub message: String,
-//     pub file_content: Vec<SolFile>,
-// }
-//
-// #[derive(Debug, Deserialize, Serialize)]
-// #[serde(crate = "rocket::serde")]
-// pub struct SolFile {
-//   pub file_name: String,
-//     pub file_content: String,
-// }
 interface CompilationResult {
   status: string
   message: string

plugin/src/types/transaction.ts

@@ -1,5 +1,5 @@
 import { type Provider, type Signer, type Wallet } from 'zksync-web3'
-import { type Chain } from 'viem'
+import { type Chain, ChainFormatters } from 'viem'
 
 export type EnvType = 'localDevnet' | 'remoteDevnet' | 'wallet' | 'manual'
 
@@ -11,3 +11,26 @@ export interface Transaction {
   provider: Provider | null
   chain: Chain | undefined | null
 }
+
+export const mockManualChain: Chain<ChainFormatters> = {
+  id: 0,
+  nativeCurrency: {
+    name: 'ETH',
+    symbol: 'ETH',
+    decimals: 18
+  },
+  rpcUrls: {
+    default:
+      {http: [''], webSocket: ['']},
+    public:
+      {http: [''], webSocket: ['']},
+  },
+  network: 'testnet',
+  name: 'testnet',
+  blockExplorers: {
+    default: {
+      name: 'testnet',
+      url: 'https://goerli.explorer.zksync.io/'
+    }
+  }
+}