From a8c1f2ddcd5b1247c7a8f278dcb968345693d926 Mon Sep 17 00:00:00 2001 From: Bohdan Ohorodnii Date: Thu, 23 Nov 2023 13:58:49 +0200 Subject: [PATCH] update transaction card, fix bug with changing contract does not change env --- plugin/.env | 6 ++--- .../components/DeployedContracts/index.tsx | 8 ++++-- .../src/components/FunctionalInput/index.tsx | 4 +-- plugin/src/features/Deployment/index.tsx | 8 +++--- plugin/src/types/contracts.ts | 17 +++---------- plugin/src/types/transaction.ts | 25 ++++++++++++++++++- 6 files changed, 43 insertions(+), 25 deletions(-) diff --git a/plugin/.env b/plugin/.env index ffdbda7e..d8ca9e94 100644 --- a/plugin/.env +++ b/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 diff --git a/plugin/src/components/DeployedContracts/index.tsx b/plugin/src/components/DeployedContracts/index.tsx index a90e8a55..9fdf40c3 100644 --- a/plugin/src/components/DeployedContracts/index.tsx +++ b/plugin/src/components/DeployedContracts/index.tsx @@ -4,7 +4,7 @@ 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' @@ -12,6 +12,7 @@ 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)}`} ) })} diff --git a/plugin/src/components/FunctionalInput/index.tsx b/plugin/src/components/FunctionalInput/index.tsx index 2b838698..90f16be6 100644 --- a/plugin/src/components/FunctionalInput/index.tsx +++ b/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 = ({ element }: CompiledCont type: 'invoke', txId: result.hash, env, - chain: walletClient?.chain, + chain: (env !== 'manual' ? walletClient?.chain : mockManualChain), provider } diff --git a/plugin/src/features/Deployment/index.tsx b/plugin/src/features/Deployment/index.tsx index e85487c6..5a4b2d67 100644 --- a/plugin/src/features/Deployment/index.tsx +++ b/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 = ({ setActiveTab }) => { ...selectedContract, bytecode: selectedContract.bytecode, transactionHash: txHash, - address + address, + env } deployedSetContracts([deployedContract, ...deployedContracts]) @@ -136,7 +138,7 @@ const Deployment: React.FC = ({ setActiveTab }) => { type: 'deploy', txId: txHash, env, - chain: walletClient?.chain, + chain: (env !== 'manual' ? walletClient?.chain : mockManualChain), provider } diff --git a/plugin/src/types/contracts.ts b/plugin/src/types/contracts.ts index eef2a1dc..d0c39cf7 100644 --- a/plugin/src/types/contracts.ts +++ b/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, -// } -// -// #[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 diff --git a/plugin/src/types/transaction.ts b/plugin/src/types/transaction.ts index 85079d40..8b6228a5 100644 --- a/plugin/src/types/transaction.ts +++ b/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 = { + 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/' + } + } +}