diff --git a/.changeset/late-foxes-learn.md b/.changeset/late-foxes-learn.md
new file mode 100644
index 0000000..13687d5
--- /dev/null
+++ b/.changeset/late-foxes-learn.md
@@ -0,0 +1,5 @@
+---
+"solive-core": patch
+---
+
+update default environment to Shanghai
diff --git a/packages/core/src/components/DeployAndCall/Deploy.tsx b/packages/core/src/components/DeployAndCall/Deploy.tsx
index 2e32c02..31f580c 100644
--- a/packages/core/src/components/DeployAndCall/Deploy.tsx
+++ b/packages/core/src/components/DeployAndCall/Deploy.tsx
@@ -1,30 +1,32 @@
-import {useForm} from "react-hook-form";
-import {Hardfork} from "@ethereumjs/common";
-import {useEffect, useMemo, useRef, useState} from "react";
-import VmProvider from "solive-provider";
-import {ArrowPathIcon} from "@heroicons/react/24/outline";
+import {
+  useEffect, useMemo, useRef, useState,
+} from 'react';
 
-import {FormProvider} from "../HookForm";
-import RHFInput from "../HookForm/RHFInput";
-import RHFSelect from "../HookForm/RHFSelect";
-import Button from "../Button";
-import {useEditor} from "../../editor/contexts/editorContext";
-import Copy from "../Copy";
-import deploy from "../../editor/utils/deploy";
-import {useDeployed} from "../../editor/contexts/deployedContext";
-import {useConsole} from "../../editor/contexts/consoleContext";
-import {useRelayNetwork} from "../../editor/contexts/relayNetworkContext";
+import { useForm } from 'react-hook-form';
+import { Hardfork } from '@ethereumjs/common';
+import VmProvider from 'solive-provider';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
 
-import AbiInput from "./AbiInput";
-import {getAccountOptions} from "./accounts";
+import { FormProvider } from '../HookForm';
+import RHFInput from '../HookForm/RHFInput';
+import RHFSelect from '../HookForm/RHFSelect';
+import Button from '../Button';
+import { useEditor } from '../../editor/contexts/editorContext';
+import Copy from '../Copy';
+import deploy from '../../editor/utils/deploy';
+import { useDeployed } from '../../editor/contexts/deployedContext';
+import { useConsole } from '../../editor/contexts/consoleContext';
+import { useRelayNetwork } from '../../editor/contexts/relayNetworkContext';
 
+import AbiInput from './AbiInput';
+import { getAccountOptions } from './accounts';
 
 const ENVIRONMENT_OPTIONS = [
-  {label: 'London', value: Hardfork.London},
-  {label: 'Berlin', value: Hardfork.Berlin},
-  {label: 'shanghai', value: Hardfork.Shanghai},
-  {label: 'merge', value: Hardfork.Merge},
-]
+  { label: 'London', value: Hardfork.London },
+  { label: 'Berlin', value: Hardfork.Berlin },
+  { label: 'Shanghai', value: Hardfork.Shanghai },
+  { label: 'merge', value: Hardfork.Merge },
+];
 
 const DEFAULT_ACCOUNT = '0x5B38Da6a701c568545dCfcB03FcB875f56beddC4';
 const DEFAULT_GAS_LIMIT = 3000000;
@@ -33,11 +35,11 @@ const DEFAULT_VALUE = 0;
 const resolveConstructor = (abi: any = []) => {
   const constructor = abi.filter((item: any) => item.type === 'constructor')[0];
   return constructor ? constructor.inputs : [];
-}
+};
 
 const useCompile = () => {
-  const {state, actions, id} = useEditor();
-  const {addConsole} = useConsole();
+  const { state, actions, id } = useEditor();
+  const { addConsole } = useConsole();
   const models = state.models || [];
   const modelIndex = state.modelIndex || 0;
   const curModel = models[modelIndex];
@@ -61,27 +63,25 @@ const useCompile = () => {
 
       setError(false);
       setCompiledContracts(compileResult.output.contracts[curModel?.filename]);
-      setCompiledOptions(Object.keys(compileResult.output.contracts[curModel?.filename]).map((key: string) => {
-        return {
-          label: key,
-          value: key,
-        }
-      }));
+      setCompiledOptions(Object.keys(compileResult.output.contracts[curModel?.filename]).map((key: string) => ({
+        label: key,
+        value: key,
+      })));
     } catch (e: any) {
       console.log(e);
       setError(true);
       addConsole([{
-        type: "error",
+        type: 'error',
         message: e.message,
       }]);
     }
     setLoading(false);
-  }
+  };
 
   const resetAll = () => {
     setCompiledContracts([]);
     setCompiledOptions([]);
-  }
+  };
 
   return {
     compile,
@@ -89,12 +89,12 @@ const useCompile = () => {
     compiledOptions,
     loading,
     error,
-  }
-}
+  };
+};
 
 const useDeploy = () => {
-  const {addConsole} = useConsole();
-  const {addCompiledContract} = useDeployed();
+  const { addConsole } = useConsole();
+  const { addCompiledContract } = useDeployed();
   const [loading, setLoading] = useState(false);
 
   const startDeploy = async (
@@ -104,7 +104,7 @@ const useDeploy = () => {
     params: any,
     signerAddress: string,
     callOptions: { gasLimit: number; value: number },
-    provider: VmProvider
+    provider: VmProvider,
   ) => {
     try {
       setLoading(true);
@@ -113,88 +113,89 @@ const useDeploy = () => {
       }
       const signer = await provider.provider.getSigner(signerAddress);
       const [contract, tx] = await deploy(abi, bytecode, signer, callOptions, Object.values(params || {}));
-      console.log(contract, contract.address);
       addCompiledContract({
         name,
         address: contract.address,
-        abi: abi,
+        abi,
         signerAddress,
       });
       addConsole([
         {
-          type: "success",
-          message: JSON.stringify(tx)
-        }
-      ])
+          type: 'success',
+          message: JSON.stringify(tx),
+        },
+      ]);
       addConsole([
         {
-          type: "success",
-          message: name + " - Contract deployment succeeded: " + contract.address
-        }
-      ])
+          type: 'success',
+          message: `${name} - Contract deployment succeeded: ${contract.address}`,
+        },
+      ]);
     } catch (e: any) {
       console.log(e);
       addConsole([
         {
-          type: "error",
+          type: 'error',
           message: e.message,
-        }
-      ])
+        },
+      ]);
     }
     setLoading(false);
-  }
+  };
 
   return {
     startDeploy,
     loading,
-  }
-}
+  };
+};
 
 // Hardfork
-const Deploy = () => {
-  const {compile, loading: compileLoading, error, compiledContracts, compiledOptions} = useCompile();
-  const {startDeploy, loading: deployLoading} = useDeploy();
-  const {setSelectedNetwork, providerRef} = useRelayNetwork();
+function Deploy() {
+  const {
+    compile, loading: compileLoading, error, compiledContracts, compiledOptions,
+  } = useCompile();
+  const { startDeploy, loading: deployLoading } = useDeploy();
+  const { setSelectedNetwork, providerRef } = useRelayNetwork();
 
   const [accounts, setAccounts] = useState<string[]>([]);
   const [accountOptions, setAccountOptions] = useState<{ label: string; value: string }[]>([]);
 
   const methods = useForm({
     defaultValues: {
-      environment: Hardfork.London,
+      environment: Hardfork.Shanghai,
       account: DEFAULT_ACCOUNT,
       gasLimit: DEFAULT_GAS_LIMIT,
       value: DEFAULT_VALUE,
-      contract: ''
-    }
+      contract: '',
+    },
   });
 
-  useEffect(()=>{
-    if(compiledOptions.length > 0){
+  useEffect(() => {
+    if (compiledOptions.length > 0) {
       methods.setValue('contract', compiledOptions[0]?.value);
     }
   }, [compiledOptions]);
 
-  const {watch, setValue} = methods;
+  const { watch, setValue } = methods;
   const environment = watch('environment');
   const selectAccount = watch('account');
   const selectedContract = watch('contract');
   const selectedContractDeployParams = useMemo(() => {
     if (!selectedContract || selectedContract === '') {
-      return []
+      return [];
     }
     return resolveConstructor(compiledContracts[selectedContract]?.abi);
   }, [selectedContract, compiledContracts]);
-  const abiInputRef = useRef<{ getValues: () => any; watch: (v: string) => any; }>();
+  const abiInputRef = useRef<{ getValues:() => any; watch: (v: string) => any; }>();
 
   const updateAccountOptions = async (accounts: string[]) => {
     try {
       const options = await getAccountOptions(accounts, providerRef.current);
       setAccountOptions(options);
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-  }
+  };
 
   const handleDeploy = async () => {
     const abi = selectedContract ? compiledContracts[selectedContract]?.abi : undefined;
@@ -209,16 +210,16 @@ const Deploy = () => {
       bytecode,
       deployParams,
       selectAccount,
-      {value, gasLimit},
-      providerRef.current
+      { value, gasLimit },
+      providerRef.current,
     );
     updateAccountOptions(accounts);
-  }
+  };
 
   const handleCompile = () => {
     setValue('contract', '');
     compile();
-  }
+  };
 
   useEffect(() => {
     if (environment) {
@@ -229,40 +230,40 @@ const Deploy = () => {
           setAccounts(accounts);
           await updateAccountOptions(accounts);
         });
-      })
+      });
     }
   }, [environment]);
 
   return (
     <div className="h-full w-full flex flex-col overflow-auto pb-2">
       <FormProvider methods={methods}>
-        <RHFSelect name="environment" label="Environment" options={ENVIRONMENT_OPTIONS}/>
+        <RHFSelect name="environment" label="Environment" options={ENVIRONMENT_OPTIONS} />
         <RHFSelect
           name="account"
           label="Account"
           options={accountOptions}
           widget={(
             <div className="flex items-center gap-1">
-              <ArrowPathIcon className="w-3 h-3" onClick={() => updateAccountOptions(accounts)}/>
-              <Copy text={selectAccount}/>
+              <ArrowPathIcon className="w-3 h-3" onClick={() => updateAccountOptions(accounts)} />
+              <Copy text={selectAccount} />
             </div>
           )}
         />
         <div className="flex justify-between gap-3">
-          <RHFInput name="gasLimit" label="Gas Limit"/>
-          <RHFInput name="value" label="Value"/>
+          <RHFInput name="gasLimit" label="Gas Limit" />
+          <RHFInput name="value" label="Value" />
         </div>
-        <RHFSelect name="contract" label="Contract" options={compiledOptions}/>
+        <RHFSelect name="contract" label="Contract" options={compiledOptions} />
       </FormProvider>
       {selectedContractDeployParams.length > 0 && (
-        <AbiInput ref={abiInputRef} inputs={selectedContractDeployParams}/>
+        <AbiInput ref={abiInputRef} inputs={selectedContractDeployParams} />
       )}
       <div className="flex justify-end gap-2 mb-2">
         <Button type="default" loading={compileLoading} onClick={handleCompile}>Compile</Button>
         <Button type="primary" loading={deployLoading} onClick={handleDeploy}>Deploy</Button>
       </div>
     </div>
-  )
+  );
 }
 
 export default Deploy;