Init contract-verification plugin and add it inside plugins

Author: kuzdogan

apps/contract-verification/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": ["@babel/preset-env", ["@babel/preset-react", 
+    {"runtime": "automatic"}
+  ]],
+  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime", "@babel/plugin-proposal-nullish-coalescing-operator"],
+  "ignore": [
+    "**/node_modules/**"
+  ]
+}

apps/contract-verification/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/contract-verification/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.eslintrc.json",
+}

apps/contract-verification/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "plugin:@nrwl/nx/react",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    }
+  ]
+}

apps/contract-verification/project.json

@@ -0,0 +1,69 @@
+{
+  "name": "contract-verification",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/contract-verification/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "development",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/contract-verification",
+        "index": "apps/contract-verification/src/index.html",
+        "baseHref": "./",
+        "main": "apps/contract-verification/src/main.tsx",
+        "polyfills": "apps/contract-verification/src/polyfills.ts",
+        "tsConfig": "apps/contract-verification/tsconfig.app.json",
+        "assets": [
+          "apps/contract-verification/src/favicon.ico",
+          "apps/contract-verification/src/assets",
+          "apps/contract-verification/src/profile.json"
+        ],
+        "styles": ["apps/contract-verification/src/styles.css"],
+        "scripts": [],
+        "webpackConfig": "apps/contract-verification/webpack.config.js"
+      },
+      "configurations": {
+        "development": {
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/contract-verification/src/environments/environment.ts",
+              "with": "apps/contract-verification/src/environments/environment.prod.ts"
+            }
+          ]
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/contract-verification/**/*.ts"],
+        "eslintConfig": "apps/contract-verification/.eslintrc"
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/webpack:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "contract-verification:build",
+        "hmr": true,
+        "baseHref": "/"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "contract-verification:build:development",
+          "port": 5003
+        },
+        "production": {
+          "buildTarget": "contract-verification:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

apps/contract-verification/src/app/App.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+}
+
+#root {
+  padding: 8px 14px;
+}

apps/contract-verification/src/app/AppContext.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {PluginClient} from '@remixproject/plugin'
+
+import {Receipt, ThemeType} from './types'
+
+export const AppContext = React.createContext({
+  apiKey: '',
+  setAPIKey: (value: string) => {
+    console.log('Set API Key from Context')
+  },
+  clientInstance: {} as PluginClient,
+  receipts: [] as Receipt[],
+  setReceipts: (receipts: Receipt[]) => {
+    console.log('Calling Set Receipts')
+  },
+  contracts: [] as string[],
+  setContracts: (contracts: string[]) => {
+    console.log('Calling Set Contract Names')
+  },
+  themeType: 'dark' as ThemeType,
+  setThemeType: (themeType: ThemeType) => {
+    console.log('Calling Set Theme Type')
+  },
+  networkName: ''
+})

apps/contract-verification/src/app/EtherscanPluginClient.ts

@@ -0,0 +1,70 @@
+import { PluginClient } from '@remixproject/plugin'
+import { createClient } from '@remixproject/plugin-webview'
+import { verify, EtherScanReturn } from './utils/verify'
+import { getReceiptStatus, getEtherScanApi, getNetworkName, getProxyContractReceiptStatus } from './utils'
+import EventManager from 'events'
+
+export class EtherscanPluginClient extends PluginClient {
+  public internalEvents: EventManager
+
+  constructor() {
+    super()
+    this.internalEvents = new EventManager()
+    createClient(this)
+    this.onload()
+  }
+
+  onActivation(): void {
+    this.internalEvents.emit('etherscan_activated')
+  }
+
+  async verify(
+    apiKey: string,
+    contractAddress: string,
+    contractArguments: string,
+    contractName: string,
+    compilationResultParam: any,
+    chainRef?: number | string,
+    isProxyContract?: boolean,
+    expectedImplAddress?: string
+  ) {
+    const result = await verify(
+      apiKey,
+      contractAddress,
+      contractArguments,
+      contractName,
+      compilationResultParam,
+      chainRef,
+      isProxyContract,
+      expectedImplAddress,
+      this,
+      (value: EtherScanReturn) => {},
+      (value: string) => {}
+    )
+    return result
+  }
+
+  async receiptStatus(receiptGuid: string, apiKey: string, isProxyContract: boolean) {
+    try {
+      const { network, networkId } = await getNetworkName(this)
+      if (network === 'vm') {
+        throw new Error('Cannot check the receipt status in the selected network')
+      }
+      const etherscanApi = getEtherScanApi(networkId)
+      let receiptStatus
+
+      if (isProxyContract) receiptStatus = await getProxyContractReceiptStatus(receiptGuid, apiKey, etherscanApi)
+      else receiptStatus = await getReceiptStatus(receiptGuid, apiKey, etherscanApi)
+      return {
+        message: receiptStatus.result,
+        succeed: receiptStatus.status === '0' ? false : true
+      }
+    } catch (e: any) {
+      return {
+        status: 'error',
+        message: e.message,
+        succeed: false
+      }
+    }
+  }
+}

apps/contract-verification/src/app/app.tsx

@@ -0,0 +1,136 @@
+import React, {useState, useEffect, useRef} from 'react'
+
+import {CompilationFileSources, CompilationResult} from '@remixproject/plugin-api'
+
+import { EtherscanPluginClient } from './EtherscanPluginClient'
+
+import {AppContext} from './AppContext'
+import {DisplayRoutes} from './routes'
+
+import {useLocalStorage} from './hooks/useLocalStorage'
+
+import {getReceiptStatus, getEtherScanApi, getNetworkName, getProxyContractReceiptStatus} from './utils'
+import {Receipt, ThemeType} from './types'
+
+import './App.css'
+
+export const getNewContractNames = (compilationResult: CompilationResult) => {
+  const compiledContracts = compilationResult.contracts
+  let result: string[] = []
+
+  for (const file of Object.keys(compiledContracts)) {
+    const newContractNames = Object.keys(compiledContracts[file])
+
+    result = [...result, ...newContractNames]
+  }
+
+  return result
+}
+
+const plugin = new EtherscanPluginClient()
+
+const App = () => {
+  const [apiKey, setAPIKey] = useLocalStorage('apiKey', '')
+  const [receipts, setReceipts] = useLocalStorage('receipts', []) 
+  const [contracts, setContracts] = useState<string[]>([])
+  const [themeType, setThemeType] = useState<ThemeType>('dark')
+  const [networkName, setNetworkName] = useState('Loading...')
+  const timer = useRef(null)
+  const contractsRef = useRef(contracts)
+
+  contractsRef.current = contracts
+
+  const setListeners = () => {
+    plugin.on('solidity', 'compilationFinished', (fileName: string, source: CompilationFileSources, languageVersion: string, data: CompilationResult) => {
+      const newContractsNames = getNewContractNames(data)
+
+      const newContractsToSave: string[] = [...contractsRef.current, ...newContractsNames]
+
+      const uniqueContracts: string[] = [...new Set(newContractsToSave)]
+
+      setContracts(uniqueContracts)
+    })
+    plugin.on('blockchain' as any, 'networkStatus', (result) => {
+      setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`)
+    })
+    // @ts-ignore
+    plugin.call('blockchain', 'getCurrentNetworkStatus').then((result: any) => setNetworkName(`${result.network.name} ${result.network.id !== '-' ? `(Chain id: ${result.network.id})` : '(Not supported)'}`))
+
+  }
+
+  useEffect(() => {
+    plugin.onload(() => {
+        setListeners()
+    })
+  }, [])
+
+  useEffect(() => {
+    let receiptsNotVerified: Receipt[] = receipts.filter((item: Receipt) => item.status === 'Pending in queue' || item.status === 'Max rate limit reached')
+
+    if (receiptsNotVerified.length > 0) {
+      if (timer.current) {
+        clearInterval(timer.current)
+        timer.current = null
+      }
+      timer.current = setInterval(async () => {
+        const {network, networkId} = await getNetworkName(plugin)
+
+        if (!plugin) return
+        if (network === 'vm') return
+        let newReceipts = receipts
+
+        for (const item of receiptsNotVerified) {
+          await new Promise((r) => setTimeout(r, 500)) // avoid api rate limit exceed.
+          let status
+          if (item.isProxyContract) {
+            status = await getProxyContractReceiptStatus(item.guid, apiKey, getEtherScanApi(networkId))
+            if (status.status === '1') {
+              status.message = status.result
+              status.result = 'Successfully Updated'
+            }
+          } else status = await getReceiptStatus(item.guid, apiKey, getEtherScanApi(networkId))
+          if (status.result === 'Pass - Verified' || status.result === 'Already Verified' || status.result === 'Successfully Updated') {
+            newReceipts = newReceipts.map((currentReceipt: Receipt) => {
+              if (currentReceipt.guid === item.guid) {
+                const res = {
+                  ...currentReceipt,
+                  status: status.result
+                }
+                if (currentReceipt.isProxyContract) res.message = status.message
+                return res
+              }
+              return currentReceipt
+            })
+          }
+        }
+        receiptsNotVerified = newReceipts.filter((item: Receipt) => item.status === 'Pending in queue' || item.status === 'Max rate limit reached')
+        if (timer.current && receiptsNotVerified.length === 0) {
+          clearInterval(timer.current)
+          timer.current = null
+        }
+        setReceipts(newReceipts)
+      }, 10000)
+    }
+  }, [receipts])
+
+  return (
+    <AppContext.Provider
+      value={{
+        apiKey,
+        setAPIKey,
+        clientInstance: plugin,
+        receipts,
+        setReceipts,
+        contracts,
+        setContracts,
+        themeType,
+        setThemeType,
+        networkName
+      }}
+    >
+      { plugin && <DisplayRoutes /> }
+    </AppContext.Provider>
+  )
+}
+
+export default App