verse 2.0に伴う改修

src/components/atoms/input.tsx

@@ -7,8 +7,30 @@ type Props = {
   disabled?: boolean;
   handleClick: (e: ChangeEvent<HTMLInputElement>) => void;
   className?: string;
+  inputType?: InputType;
 };
 
+export enum InputType {
+  Text = "text",
+  Password = "password",
+  Email = "email",
+  Number = "number",
+  Checkbox = "checkbox",
+  Radio = "radio",
+  File = "file",
+  Submit = "submit",
+  Button = "button",
+  Date = "date",
+  Time = "time",
+  DateTimeLocal = "datetime-local",
+  Month = "month",
+  Week = "week",
+  Color = "color",
+  Range = "range",
+  Tel = "tel",
+  Url = "url"
+}
+
 export const Input = (props: Props) =>  {
   const {
     value,
@@ -29,7 +51,7 @@ export const Input = (props: Props) =>  {
         'border',
         'shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-4 focus:outline-green-500 focus:shadow-outline',
       )}
-      type="text"
+      type={props.inputType || InputType.Text}
     />
   );
 };

src/components/organisms/buildVerseModal.tsx

@@ -1,8 +1,8 @@
 import { ethers } from 'ethers';
 import { ChangeEvent, SetStateAction, useState } from 'react';
-import { ZERO_ADDRESS } from '@/consts';
+import { ZERO_ADDRESS, L2_GASLIMIT, L2_OO_SUBMISSION_INTERVAL, FINALIZATION_PERIOD_SECONDS } from '@/consts';
 import { getL1BuildAgentContract, handleError } from '@/features';
-import { ErrorMsg, SuccessMsg, Modal } from '@/components/atoms';
+import { ErrorMsg, SuccessMsg, Modal, InputType } from '@/components/atoms';
 import { Form, LoadingModal } from '@/components/organisms';
 
 type Props = {
@@ -19,26 +19,42 @@ export const BuildVerseModal = (props: Props) => {
   const [buildSuccess, setBuildSuccess] = useState('');
   const [isBuilding, setIsBuilding] = useState(false);
   const [buildError, setBuildError] = useState('');
-  const [newChainId, setNewChainId] = useState('');
-  const [sequencerAddress, setSequencerAddress] = useState('');
+  const [newChainId, setNewChainId] = useState<number>();
+  const [finalSystemOwner, setFinalSystemOwner] = useState('');
   const [proposerAddress, setProposerAddress] = useState('');
+  const [batchSenderAddress, setBatchSenderAddress] = useState('');
+  const [p2pSequencerAddress, setP2PSequencerAddress] = useState('');
+  const [l2BlockTime, setL2BlockTime] = useState<number>();
+  const [l2OOStartingBlockNumber, setL2OOStartingBlockNumber] = useState<number>();
+  const [l2OOStartingTimestamp, setL2OOStartingTimestamp] = useState<number>();
 
   const build = async () => {
-    const L1BuildAgentContract = await getL1BuildAgentContract();
+    const isLegacy = false;
+    const L1BuildAgentContract = await getL1BuildAgentContract(isLegacy);
 
     try {
       setIsBuilding(true);
-      const verseChainId = ethers.BigNumber.from(newChainId).toNumber();
-      const addressManager = await L1BuildAgentContract.getAddressManager(verseChainId);
-      if (addressManager !== ZERO_ADDRESS) throw new Error(`Chain_id ${verseChainId} is already used`);
 
-      const tx: ethers.providers.TransactionResponse = await L1BuildAgentContract.build(verseChainId, sequencerAddress, proposerAddress);
+      if (l2BlockTime! < 1 || l2BlockTime! > 7) {
+        throw new Error('L2 Block Time must be between 1 and 7');
+      }
+
+      const tx: ethers.providers.TransactionResponse = await L1BuildAgentContract.build(
+        newChainId!,
+        [finalSystemOwner, proposerAddress, finalSystemOwner, batchSenderAddress, p2pSequencerAddress, l2BlockTime!, L2_GASLIMIT, L2_OO_SUBMISSION_INTERVAL, FINALIZATION_PERIOD_SECONDS, l2OOStartingBlockNumber!, l2OOStartingTimestamp!]
+      );
       const receipt = await tx.wait();
       if (receipt.status === 1) {
-        setBuildSuccess(`Verse build is successful. Please memo build_transaction (${tx.hash}) to check VerseInfo at check-verse-page by non_verse_builder`);
-        setNewChainId('');
-        setSequencerAddress('');
+        setBuildSuccess(`Verse build is successful. build transaction (${tx.hash})`);
+        setNewChainId(undefined);
+        setFinalSystemOwner('');
         setProposerAddress('');
+        setBatchSenderAddress('');
+        setP2PSequencerAddress('');
+        setL2BlockTime(undefined);
+        setL2OOStartingBlockNumber(undefined);
+        setL2OOStartingTimestamp(undefined);
+        setBuildError('');
         setIsBuilding(false);
       }
     } catch (err) {
@@ -50,25 +66,53 @@ export const BuildVerseModal = (props: Props) => {
   const buildInputs = [
     {
       placeholder: 'set verse chain_id',
-      value: newChainId,
-      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setNewChainId(e.target.value)},
+      value: newChainId?.toString() || '',
+      inputType: InputType.Number,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setNewChainId(Number(e.target.value))},
     },
     {
-      placeholder: 'set sequencer address',
-      value: sequencerAddress,
-      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setSequencerAddress(e.target.value)},
+      placeholder: 'set final system owner',
+      value: finalSystemOwner,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setFinalSystemOwner(e.target.value)},
     },
     {
       placeholder: 'set proposer address',
       value: proposerAddress,
       handleClick: (e: ChangeEvent<HTMLInputElement>) => {setProposerAddress(e.target.value)},
     },
+    {
+      placeholder: 'set batch sender address',
+      value: batchSenderAddress,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setBatchSenderAddress(e.target.value)},
+    },
+    {
+      placeholder: 'set p2p sequencer address',
+      value: p2pSequencerAddress,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setP2PSequencerAddress(e.target.value)},
+    },
+    {
+      placeholder: 'set L2 Block Time (range of 1 to 7)',
+      value: l2BlockTime?.toString() || '',
+      inputType: InputType.Number,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setL2BlockTime(Number(e.target.value))},
+    },
+    {
+      placeholder: 'set L2 Output Oracle Starting Block Number',
+      value: l2OOStartingBlockNumber?.toString() || '',
+      inputType: InputType.Number,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setL2OOStartingBlockNumber(Number(e.target.value))},
+    },
+    {
+      placeholder: 'set L2 Output Oracle Starting Block Timestamp (sec)',
+      value: l2OOStartingTimestamp?.toString() || '',
+      inputType: InputType.Number,
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setL2OOStartingTimestamp(Number(e.target.value))},
+    },
   ];
-
   const buildButtons = [
     {
       handleClick: build,
-      disabled: !sequencerAddress || !proposerAddress || isBuilding,
+      disabled: !finalSystemOwner || !batchSenderAddress || !p2pSequencerAddress || !proposerAddress || !l2BlockTime || !(l2OOStartingBlockNumber || l2OOStartingBlockNumber === 0) || !(l2OOStartingTimestamp || l2OOStartingTimestamp === 0) || isBuilding,
       value: 'Build',
     }
   ];

src/components/organisms/changeDepositModal.tsx

@@ -11,12 +11,14 @@ import { LoadingModal } from '.';
 type Props = {
   className?: string;
   setModalState: (value: SetStateAction<boolean>) => void;
+  isLegacy: boolean;
 };
 
 export const ChangeDepositModal = (props: Props) => {
   const {
     className,
     setModalState,
+    isLegacy,
   } = props;
 
   const [depositSuccess, setDepositSuccess] = useState('');
@@ -26,12 +28,12 @@ export const ChangeDepositModal = (props: Props) => {
   const [SOASVerseBuilder, setSOASVerseBuilder] = useState('');
   const [OASAmount, setOASAmount] = useState('');
   const [SOASAmount, setSOASAmount] = useState('');
-  
+
   const refreshL1BuildDeposit = useRefreshL1BuildDeposit();
 
   const depositOAS = async () => {
     try {
-      const L1BuildDepositContract = await getL1BuildDepositContract();
+      const L1BuildDepositContract = await getL1BuildDepositContract(isLegacy);
       const value = ethers.utils.parseEther(OASAmount);
       const options = { value: value };
       setIsDepositLoading(true);
@@ -43,6 +45,7 @@ export const ChangeDepositModal = (props: Props) => {
         setDepositSuccess(`${oasAmount}${OASTokenUnit} deposit is successful`);
         setOASAmount('');
         setOASVerseBuilder('');
+        setDepositError('');
         setIsDepositLoading(false);
         refreshL1BuildDeposit();
       });
@@ -54,7 +57,7 @@ export const ChangeDepositModal = (props: Props) => {
 
   const withdrawOAS = async () => {
     try {
-      const L1BuildDepositContract = await getL1BuildDepositContract();
+      const L1BuildDepositContract = await getL1BuildDepositContract(isLegacy);
       const value = ethers.utils.parseEther(OASAmount);
       setIsDepositLoading(true);
       await L1BuildDepositContract.withdraw(OASVerseBuilder, value);
@@ -65,6 +68,7 @@ export const ChangeDepositModal = (props: Props) => {
         setDepositSuccess(`${oasAmount}${OASTokenUnit} withdraw is successful`);
         setOASAmount('');
         setOASVerseBuilder('');
+        setDepositError('');
         setIsDepositLoading(false);
         refreshL1BuildDeposit();
       });
@@ -76,7 +80,7 @@ export const ChangeDepositModal = (props: Props) => {
 
   const depositSOAS = async () => {
     try {
-      const L1BuildDepositContract = await getL1BuildDepositContract();
+      const L1BuildDepositContract = await getL1BuildDepositContract(isLegacy);
       const sOASContract = await getSOASContract();
       const value = ethers.utils.parseEther(SOASAmount);
       setIsDepositLoading(true);
@@ -101,7 +105,7 @@ export const ChangeDepositModal = (props: Props) => {
 
   const withdrawSOAS = async () => {
     try {
-      const L1BuildDepositContract = await getL1BuildDepositContract();
+      const L1BuildDepositContract = await getL1BuildDepositContract(isLegacy);
       const value = ethers.utils.parseEther(SOASAmount);
       setIsDepositLoading(true);
       await L1BuildDepositContract.withdrawERC20(SOASVerseBuilder, sOASAddress, value);
@@ -147,18 +151,22 @@ export const ChangeDepositModal = (props: Props) => {
           withdraw={withdrawOAS}
           idDepositLoading={idDepositLoading}
           tokenUnit={OASTokenUnit}
+          isLegacy={isLegacy}
         />
-        <Deposit
-          className='space-y-0.5'
-          amount={SOASAmount}
-          builder={SOASVerseBuilder}
-          setAmount={setSOASAmount}
-          setBuilder={setSOASVerseBuilder}
-          deposit={depositSOAS}
-          withdraw={withdrawSOAS}
-          idDepositLoading={idDepositLoading}
-          tokenUnit={sOASTokenUnit}
-        />
+        {isLegacy && (
+          <Deposit
+            className='space-y-0.5'
+            amount={SOASAmount}
+            builder={SOASVerseBuilder}
+            setAmount={setSOASAmount}
+            setBuilder={setSOASVerseBuilder}
+            deposit={depositSOAS}
+            withdraw={withdrawSOAS}
+            idDepositLoading={idDepositLoading}
+            tokenUnit={sOASTokenUnit}
+            isLegacy={isLegacy}
+          />
+        )}
       </div>
     </Modal>
     }

src/components/organisms/checkDepositModal.tsx

@@ -9,14 +9,11 @@ type Props = {
   className?: string;
   ownerAddress: string;
   setModalState: (value: SetStateAction<boolean>) => void;
+  isLegacy: boolean;
 };
 
 export const CheckDepositModal = (props: Props) => {
-  const {
-    className,
-    ownerAddress,
-    setModalState,
-  } = props;
+  const { className, ownerAddress, setModalState, isLegacy } = props;
 
   const [checkSuccess, setCheckSuccess] = useState('');
   const [isChecking, setIsChecking] = useState(false);
@@ -27,13 +24,20 @@ export const CheckDepositModal = (props: Props) => {
   const [depositSOAS, setDepositSOAS] = useState<ethers.BigNumber>();
 
   const check = async () => {
-    const L1BuildDepositContract = await getL1BuildDepositContract();
+    const L1BuildDepositContract = await getL1BuildDepositContract(isLegacy);
 
     try {
       setIsChecking(true);
-      const depositTotal: ethers.BigNumber = await L1BuildDepositContract.getDepositTotal(builder);
-      const depositOAS: ethers.BigNumber = await L1BuildDepositContract.getDepositAmount(builder, ownerAddress);
-      const depositSOAS: ethers.BigNumber = await L1BuildDepositContract.getDepositERC20Amount(builder, ownerAddress, sOASAddress);
+      const depositTotal: ethers.BigNumber =
+        await L1BuildDepositContract.getDepositTotal(builder);
+      const depositOAS: ethers.BigNumber =
+        await L1BuildDepositContract.getDepositAmount(builder, ownerAddress);
+      const depositSOAS: ethers.BigNumber =
+        await L1BuildDepositContract.getDepositERC20Amount(
+          builder,
+          ownerAddress,
+          sOASAddress,
+        );
 
       setDepositTotal(depositTotal);
       setDepositOAS(depositOAS);
@@ -52,7 +56,9 @@ export const CheckDepositModal = (props: Props) => {
     {
       placeholder: 'set builder address',
       value: builder,
-      handleClick: (e: ChangeEvent<HTMLInputElement>) => {setBuilder(e.target.value)},
+      handleClick: (e: ChangeEvent<HTMLInputElement>) => {
+        setBuilder(e.target.value);
+      },
     },
   ];
 
@@ -61,39 +67,30 @@ export const CheckDepositModal = (props: Props) => {
       handleClick: check,
       disabled: !builder || isChecking,
       value: 'Check Deposit',
-    }
+    },
   ];
 
   return (
     <>
-    {isChecking &&
-      <LoadingModal />
-    }
-    {!isChecking &&
-    <Modal
-      setModalState={setModalState}
-    >
-      <div className='space-y-4'>
-        {checkSuccess && (
-          <SuccessMsg className='w-full' text={checkSuccess} />
-        )}
-        {checkError && (
-          <ErrorMsg className='w-full' text={ checkError } />
-        )}
-        <Form
-          inputs={inputs}
-          buttons={buttons}
-        />
-        {depositTotal && depositOAS && depositSOAS &&
-          <DepositDetail 
-            depositTotal={depositTotal}
-            depositOAS={depositOAS}
-            depositSOAS={depositSOAS}
-          />
-        }
-      </div>
-    </Modal>
-    }
+      {isChecking && <LoadingModal />}
+      {!isChecking && (
+        <Modal setModalState={setModalState}>
+          <div className='space-y-4'>
+            {checkSuccess && (
+              <SuccessMsg className='w-full' text={checkSuccess} />
+            )}
+            {checkError && <ErrorMsg className='w-full' text={checkError} />}
+            <Form inputs={inputs} buttons={buttons} />
+            {depositTotal && depositOAS && depositSOAS && (
+              <DepositDetail
+                depositTotal={depositTotal}
+                depositOAS={depositOAS}
+                depositSOAS={depositSOAS}
+              />
+            )}
+          </div>
+        </Modal>
+      )}
     </>
-  )
+  );
 };