ERC 721 constructor + deploy

package.json

@@ -8,6 +8,8 @@
     "@headlessui/react": "^1.4.0",
     "@heroicons/react": "^1.0.3",
     "axios": "^0.21.1",
+    "dotenv": "^10.0.0",
+    "ethers": "^5.5.1",
     "mobx": "^6.3.0",
     "mobx-persist-store": "^1.0.3",
     "mobx-react-lite": "^3.2.0",

src/components/ContractBuilder.tsx

@@ -8,6 +8,7 @@ import ERC20TokenSettingsView from 'views/ERC20TokenSettings'
 import ERC721TokenSettingsView from 'views/ERC721TokenSettings'
 import ERC20DeploymentView from 'views/ERC20Deployment'
 import ERC721DeploymentView from 'views/ERC721Deployment'
+import DeployedContract from 'views/DeployedContract'
 import { appStore } from 'store/AppStore'
 import { inputStore, TokenType } from 'store/InputStore'
 import { classnames } from 'classnames/tailwind'
@@ -37,6 +38,7 @@ const ContractMain: FC = () => {
               inputStore.tokenType === TokenType.ERC721 && (
                 <ERC721DeploymentView />
               )}
+            {appStore.tab === 4 && <DeployedContract />}
           </Card>
           <StepperNavigation />
         </div>

src/components/Stepper.tsx

@@ -12,6 +12,7 @@ const Stepper: FC = () => {
         formatMessage({ id: 'tokenType' }),
         formatMessage({ id: 'tokenSettings' }),
         formatMessage({ id: 'deployment' }),
+        formatMessage({ id: 'deployed' }),
       ]}
       currentTab={appStore.tab}
     />

src/components/StepperNavigation.tsx

@@ -3,22 +3,48 @@ import { observer } from 'mobx-react-lite'
 import { appStore } from 'store/AppStore'
 import Button from 'components/Button'
 import { classnames } from 'classnames/tailwind'
+import { inputStore, TokenType } from 'store/InputStore'
+import { ethers } from 'ethers'
 
 const stepperWrapper = classnames('flex', 'flex-row', 'pt-4', 'space-x-4')
 
 const StepperNavigation: FC = () => {
+  async function deployContract() {
+    const provider = new ethers.providers.JsonRpcProvider(
+      'http://127.0.0.1:7545'
+    )
+    const signer = provider.getSigner(inputStore.deployData.signer)
+    const interfaceContract = new ethers.utils.Interface(
+      inputStore.deployData.abi
+    )
+    const factory = new ethers.ContractFactory(
+      interfaceContract,
+      inputStore.deployData.bytecode,
+      signer
+    )
+    const contract = await factory.deploy()
+    inputStore.deployedContract = await contract.deployTransaction.wait()
+    appStore.incrementTab()
+  }
   return (
     <div className={stepperWrapper}>
       <Button
         intlKey={'previousStep'}
         disabled={appStore.tab === 1}
         onClick={() => appStore.decrementTab()}
       />
-      <Button
-        intlKey={'nextStep'}
-        disabled={appStore.tab === 3}
-        onClick={() => appStore.incrementTab()}
-      />
+
+      {appStore.tab === 3 && inputStore.tokenType === TokenType.ERC721 && (
+        <Button intlKey={'deployButton'} onClick={() => deployContract()} />
+      )}
+
+      {appStore.tab < 3 && (
+        <Button
+          intlKey={'nextStep'}
+          disabled={appStore.tab === 3}
+          onClick={() => appStore.incrementTab()}
+        />
+      )}
     </div>
   )
 }

src/i18n/locales/en.json

@@ -4,9 +4,11 @@
   "buttonTestNetwork": "Test Network",
   "buttonRealNetwork": "Real Network",
   "buttonGetTest": "Get test ETH to your wallet",
+  "bodyOfContract": "Body of contract:",
   "tokenType": "Token type",
   "tokenSettings": "Token settings",
   "deployment": "Deployment",
+  "deployButton": "Deploy",
   "or": "or",
   "previousStep": "Previous step",
   "nextStep": "Next step",
@@ -29,5 +31,18 @@
   "tokenSettingsSold": "You have the maximum value of tokens sold",
   "tokenSettingsRaise": "What is the maximum amount of tokens you intend to raise?",
   "tokenSettingsWhitelist": "Accept Ethereum only from the whitelisted addresses",
+  "tokenSettingsMintable": "Privileged accounts will be able to emit new tokens",
+  "tokenSettingsAutoIncrementIds": "New tokens will be automatically assigned an incremental id",
+  "tokenSettingsBurnable": "Token holders will be able to destroy their tokens",
+  "tokenSettingsEnumerable": "Allows on-chain enumeration of all tokens or those owned by an account",
+  "tokenSettingsUriStorage": "Allows updating token URIs for individual token IDs",
+  "tokenSettingsPausable": "Privileged accounts will be able to pause the functionality marked as whenNotPaused",
+  "tokenSettingsOwnable": "Simple mechanism with a single account authorized for all privileged actions.",
+  "tokenSettingsRoles": "Flexible mechanism with a separate role for each privileged action.",
+  "tokenSettingsBaseUri": "Will be concatenated with token IDs to generate the token URIs.",
+  "deployed": "Success",
+  "deployedContractInfo": "Body of deployed contract:",
+  "deployedContractFrom": "From:",
+  "deployedContractAddress": "Contract Address:",
   "language": "EN"
 }

src/i18n/locales/ru.json

@@ -4,9 +4,11 @@
   "buttonTestNetwork": "Тестовая сеть",
   "buttonRealNetwork": "Реальная сеть",
   "buttonGetTest": "Возьмите на тест ETH в кошелек",
+  "bodyOfContract": "Тело контракта:",
   "tokenType": "Тип токена",
   "tokenSettings": "Настройки токена",
   "deployment": "Размещение",
+  "deployButton": "Разместить",
   "or": "или",
   "previousStep": "Назад",
   "nextStep": "Далее",
@@ -29,5 +31,18 @@
   "tokenSettingsSold": "Ваша максимальная стоимость проданных токенов",
   "tokenSettingsRaise": "Какое максимальное количество токенов вы намерены собрать?",
   "tokenSettingsWhitelist": "Принимайте Ethereum только из 'белого' списка адресов",
+  "tokenSettingsMintable": "Привилигированные аккаунты смогут выпускать новые токены",
+  "tokenSettingsAutoIncrementIds": "Новые токены автоматически получают порядковый номер(ID)",
+  "tokenSettingsBurnable": "Держатели токенов могут уничтожить вои токены",
+  "tokenSettingsEnumerable": "Позволяет выводить все токены аккаунта по очереди",
+  "tokenSettingsUriStorage": "Позволяет обновлять токен URI для уникальных ID",
+  "tokenSettingsPausable": "Привилигированные аккаунты могут останавливать функции помеченные как 'whenNotPaused'",
+  "tokenSettingsOwnable": "Простой механизм с одним аккаунтом, который может выполнять превилигированные действия.",
+  "tokenSettingsRoles": "Удобный механизм для разделения ролей, которые могут выполнять привилигированные действия.",
+  "tokenSettingsBaseUri": "Будет объеденен с токен IDs, чтобы сгенерировать токен URI.",
+  "deployed": "Успех",
+  "deployedContractInfo": "Тело размещенного контракта:",
+  "deployedContractFrom": "От кого:",
+  "deployedContractAddress": "Адрес контракта:",
   "language": "RU"
-}
+}

src/models/DeployData.ts

@@ -0,0 +1,14 @@
+export interface DeployData extends ServerResponse {
+  signer: string
+}
+
+export interface ServerResponse {
+  abi: string
+  bytecode: { object: string }
+  contract: string
+}
+
+export interface DeployedContract {
+  contractAddress: string
+  from: string
+}

src/models/ERC721.ts

@@ -3,4 +3,14 @@ export default interface ERC721 {
   symbol: string
   receiver: string
   privateKey: string
+  baseUri: string
+  mintable: boolean
+  autoIncrementIds: boolean
+  burnable: boolean
+  pausable: boolean
+  enumerable: boolean
+  uriStorage: boolean
+
+  ownable: boolean
+  roles: boolean
 }

src/store/AppStore.ts

@@ -25,7 +25,7 @@ class AppStore {
   }
 
   incrementTab() {
-    if (this.tab < 3) {
+    if (this.tab < 4) {
       this.tab++
     }
   }

src/store/InputStore.ts

@@ -1,6 +1,7 @@
 import { makeAutoObservable } from 'mobx'
 import erc20 from 'models/ERC20'
 import erc721 from 'models/ERC721'
+import { DeployData, ServerResponse, DeployedContract } from 'models/DeployData'
 
 export enum TokenType {
   ERC20,
@@ -25,13 +26,39 @@ class InputStore {
     name: 'Fondu',
     symbol: 'FDU',
     receiver: '',
+    baseUri: '',
     privateKey: '',
-  }
-
+    mintable: false,
+    autoIncrementIds: false,
+    burnable: false,
+    pausable: false,
+    enumerable: false,
+    uriStorage: false,
+
+    ownable: true,
+    roles: false,
+  }
+  deployData: DeployData = {
+    abi: '',
+    bytecode: { object: '' },
+    contract: '',
+    signer: '',
+  }
+  deployedContract: DeployedContract = { contractAddress: '', from: '' }
   constructor() {
     makeAutoObservable(this)
   }
 
+  setDeployData(serverResponse: ServerResponse) {
+    this.deployData.abi = serverResponse.abi
+    this.deployData.bytecode = serverResponse.bytecode
+    this.deployData.contract = serverResponse.contract
+    this.deployData.signer =
+      this.tokenType === TokenType.ERC721
+        ? this.erc721.receiver
+        : this.erc20.receiver
+  }
+
   setTokenType(tokenType: TokenType) {
     this.tokenType = tokenType
   }
@@ -91,6 +118,44 @@ class InputStore {
   setERC721PrivateKey(key: string) {
     this.erc721.privateKey = key
   }
+
+  setERC721Mintable(key: boolean) {
+    this.erc721.mintable = key
+  }
+
+  setERC721AutoIncrementIds(key: boolean) {
+    this.erc721.autoIncrementIds = key
+  }
+
+  setERC721Burnable(key: boolean) {
+    this.erc721.burnable = key
+  }
+
+  setERC721Pausable(key: boolean) {
+    this.erc721.pausable = key
+  }
+
+  setERC721Enumerable(key: boolean) {
+    this.erc721.enumerable = key
+  }
+
+  setERC721UriStorage(key: boolean) {
+    this.erc721.uriStorage = key
+  }
+
+  setERC721Ownable(key: boolean) {
+    this.erc721.ownable = key
+    this.erc721.roles = !key
+  }
+
+  setERC721Roles(key: boolean) {
+    this.erc721.roles = key
+    this.erc721.ownable = !key
+  }
+
+  setERC721BaseUri(key: string) {
+    this.erc721.baseUri = key
+  }
 }
 
 export const inputStore = new InputStore()

src/views/DeployedContract.tsx

@@ -0,0 +1,30 @@
+import { observer } from 'mobx-react-lite'
+import { FC } from 'react'
+import { inputStore } from 'store/InputStore'
+import { BodyText } from 'components/Text'
+import { FormattedMessage } from 'react-intl'
+
+const DeployedContract: FC = () => {
+  return (
+    <>
+      <br />
+      <BodyText>
+        <FormattedMessage id="deployedContractInfo" />
+      </BodyText>
+      <br />
+      <br />
+      <p>
+        <BodyText>
+          <FormattedMessage id="deployedContractFrom" />
+        </BodyText>
+        <BodyText> {inputStore.deployedContract.from}</BodyText>
+      </p>
+      <BodyText>
+        <FormattedMessage id="deployedContractAddress" />
+      </BodyText>
+      <BodyText> {inputStore.deployedContract.contractAddress}</BodyText>
+    </>
+  )
+}
+
+export default observer(DeployedContract)

src/views/ERC721Deployment.tsx

@@ -5,37 +5,28 @@ import { BodyText } from 'components/Text'
 import { FormattedMessage } from 'react-intl'
 
 const ERC721DeploymentView: FC = () => {
+  const url = 'http://localhost:1337/erc721'
+  let xhr = new XMLHttpRequest()
+  xhr.open('POST', url, false)
+  xhr.setRequestHeader('Content-Type', 'application/json')
+  xhr.send(JSON.stringify(inputStore.erc721))
+  if (xhr.status !== 200) {
+    console.log(`Ошибка ${xhr.status}: ${xhr.statusText}`)
+  } else {
+    inputStore.setDeployData(JSON.parse(xhr.response))
+  }
+
   return (
     <>
+      <br />
       <BodyText>
-        <FormattedMessage id="deployCheck" />
+        <FormattedMessage id="bodyOfContract" />
       </BodyText>
-      <ol className="list-disc list-inside pt-2">
-        <li>
-          <BodyText>
-            <FormattedMessage id="deployTokenType" />
-          </BodyText>
-          <BodyText> ERC-721</BodyText>
-        </li>
-        <li>
-          <BodyText>
-            <FormattedMessage id="deployTokenName" />
-          </BodyText>
-          <BodyText> {inputStore.erc721.name}</BodyText>
-        </li>
-        <li>
-          <BodyText>
-            <FormattedMessage id="deployTokenSymbol" />
-          </BodyText>
-          <BodyText> {inputStore.erc721.symbol}</BodyText>
-        </li>
-        <li>
-          <BodyText>
-            <FormattedMessage id="deployReceiver" />
-          </BodyText>
-          <BodyText> {inputStore.erc721.receiver}</BodyText>
-        </li>
-      </ol>
+      <br />
+      <br />
+      <pre>
+        <BodyText>{inputStore.deployData.contract}</BodyText>
+      </pre>
     </>
   )
 }