Add variables for storing settings and submittedContracts in LocalStorage

pull/5285/head
Manuel Wedler 4 months ago committed by Aniket
parent ba1a3fbe4c
commit 79415306d3
  1. 14
      apps/contract-verification/src/app/AppContext.tsx
  2. 2
      apps/contract-verification/src/app/Receipts/SourcifyReceipt.tsx
  3. 2
      apps/contract-verification/src/app/Verifiers/AbstractVerifier.ts
  4. 2
      apps/contract-verification/src/app/Verifiers/EtherscanVerifier.ts
  5. 2
      apps/contract-verification/src/app/Verifiers/SourcifyVerifier.ts
  6. 2
      apps/contract-verification/src/app/Verifiers/index.ts
  7. 21
      apps/contract-verification/src/app/app.tsx
  8. 2
      apps/contract-verification/src/app/components/AccordionReceipt.tsx
  9. 2
      apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
  10. 12
      apps/contract-verification/src/app/hooks/useLocalStorage.tsx
  11. 19
      apps/contract-verification/src/app/types/SettingsTypes.ts
  12. 6
      apps/contract-verification/src/app/types/VerificationTypes.ts
  13. 2
      apps/contract-verification/src/app/types/index.ts
  14. 2
      apps/contract-verification/src/app/views/LookupView.tsx
  15. 2
      apps/contract-verification/src/app/views/ReceiptsView.tsx
  16. 2
      apps/contract-verification/src/app/views/SettingsView.tsx
  17. 13
      apps/contract-verification/src/app/views/VerifyView.tsx

@ -1,18 +1,15 @@
import React from 'react'
import { ThemeType } from './types'
import { Chain, SubmittedContracts } from './types/VerificationTypes'
import type { ThemeType, Chain, SubmittedContracts, ContractVerificationSettings } from './types'
import { CompilerAbstract } from '@remix-project/remix-solidity'
import { AbstractVerifier } from './Verifiers/AbstractVerifier'
// Define the type for the context
type AppContextType = {
themeType: ThemeType
setThemeType: (themeType: ThemeType) => void
settings: ContractVerificationSettings
setSettings: React.Dispatch<React.SetStateAction<ContractVerificationSettings>>
chains: Chain[]
compilationOutput: { [key: string]: CompilerAbstract } | undefined
targetFileName: string | undefined
verifiers: AbstractVerifier[]
setVerifiers: React.Dispatch<React.SetStateAction<AbstractVerifier[]>>
submittedContracts: SubmittedContracts
setSubmittedContracts: React.Dispatch<React.SetStateAction<SubmittedContracts>>
}
@ -23,11 +20,10 @@ const defaultContextValue: AppContextType = {
setThemeType: (themeType: ThemeType) => {
console.log('Calling Set Theme Type')
},
settings: { chains: {} },
setSettings: () => {},
chains: [],
compilationOutput: undefined,
targetFileName: undefined,
verifiers: [],
setVerifiers: (verifiers: AbstractVerifier[]) => {},
submittedContracts: {},
setSubmittedContracts: (submittedContracts: SubmittedContracts) => {},
}

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'
import { SourcifyVerifier } from '../Verifiers/SourcifyVerifier'
// import { SourcifyVerificationStatus } from '../types/VerificationTypes'
// import { SourcifyVerificationStatus } from '../types'
import { ReceiptProps } from './props'
// A receipt is something to be rendered

@ -1,5 +1,5 @@
import { CompilerAbstract } from '@remix-project/remix-solidity'
import { LookupResponse, SubmittedContract, VerificationResponse, VerificationStatus } from '../types/VerificationTypes'
import type { LookupResponse, SubmittedContract, VerificationResponse, VerificationStatus } from '../types'
export interface AbstractVerifier {
checkVerificationStatus?(receiptId: string): Promise<VerificationStatus>

@ -1,6 +1,6 @@
import { CompilerAbstract } from '@remix-project/remix-solidity'
import { AbstractVerifier } from './AbstractVerifier'
import { LookupResponse, SubmittedContract, VerificationResponse, VerificationStatus } from '../types/VerificationTypes'
import type { LookupResponse, SubmittedContract, VerificationResponse, VerificationStatus } from '../types'
interface EtherscanVerificationRequest {
chainId?: string

@ -1,6 +1,6 @@
import { CompilerAbstract, SourcesCode } from '@remix-project/remix-solidity'
import { AbstractVerifier } from './AbstractVerifier'
import { LookupResponse, SubmittedContract, VerificationResponse, VerificationStatus } from '../types/VerificationTypes'
import type { LookupResponse, SubmittedContract, VerificationResponse, VerificationStatus } from '../types'
interface SourcifyVerificationRequest {
address: string

@ -1,4 +1,4 @@
import { VerifierIdentifier, VerifierSettings } from '../types/VerificationTypes'
import type { VerifierIdentifier, VerifierSettings } from '../types'
import { AbstractVerifier } from './AbstractVerifier'
import { BlockscoutVerifier } from './BlockscoutVerifier'
import { EtherscanVerifier } from './EtherscanVerifier'

@ -1,35 +1,26 @@
import React, { useState, useEffect, useRef } from 'react'
import { useState, useEffect } from 'react'
import { ContractVerificationPluginClient } from './ContractVerificationPluginClient'
import { AppContext } from './AppContext'
import DisplayRoutes from './routes'
import { ThemeType } from './types'
import { ContractVerificationSettings, ThemeType, Chain, SubmittedContracts } from './types'
import './App.css'
import { Chain, SubmittedContracts } from './types/VerificationTypes'
import { CompilerAbstract } from '@remix-project/remix-solidity'
import { SourcifyVerifier } from './Verifiers/SourcifyVerifier'
import { EtherscanVerifier } from './Verifiers/EtherscanVerifier'
import { AbstractVerifier } from './Verifiers/AbstractVerifier'
import { ContractDropdownSelection } from './components/ContractDropdown'
import { useLocalStorage } from './hooks/useLocalStorage'
const plugin = new ContractVerificationPluginClient()
const App = () => {
const [themeType, setThemeType] = useState<ThemeType>('dark')
const [settings, setSettings] = useLocalStorage<ContractVerificationSettings>('contract-verification:settings', { chains: {} })
const [submittedContracts, setSubmittedContracts] = useLocalStorage<SubmittedContracts>('contract-verification:submitted-contracts', {})
// TODO: Types for chains
const [chains, setChains] = useState<Chain[]>([]) // State to hold the chains data
const [targetFileName, setTargetFileName] = useState('')
const [compilationOutput, setCompilationOutput] = useState<{ [key: string]: CompilerAbstract } | undefined>()
const [verifiers, setVerifiers] = useState<AbstractVerifier[]>([])
const [submittedContracts, setSubmittedContracts] = useState<SubmittedContracts>({})
useEffect(() => {
// const sourcifyVerifier = new SourcifyVerifier('http://sourcify.dev/server/', 'Sourcify')
const sourcifyVerifier = new SourcifyVerifier('http://localhost:5555/', 'todo')
const etherscanVerifier = new EtherscanVerifier('https://api.etherscan.io', 'todo', 'API_KEY')
setVerifiers([sourcifyVerifier, etherscanVerifier])
// TODO: Fix 'compilationFinished' event types. The interface is outdated at https://github.com/ethereum/remix-plugin/blob/master/packages/api/src/lib/compiler/api.ts. It does not include data, input, or version. See the current parameters: https://github.com/ethereum/remix-project/blob/9f6c5be882453a555055f07171701459e4ae88a4/libs/remix-solidity/src/compiler/compiler.ts#L189
// Fetch compiler artefacts initially
@ -61,7 +52,7 @@ const App = () => {
}, [])
return (
<AppContext.Provider value={{ themeType, setThemeType, chains, compilationOutput, targetFileName, verifiers, setVerifiers, submittedContracts, setSubmittedContracts }}>
<AppContext.Provider value={{ themeType, setThemeType, settings, setSettings, chains, compilationOutput, submittedContracts, setSubmittedContracts }}>
<DisplayRoutes />
</AppContext.Provider>
)

@ -1,5 +1,5 @@
import React, { useMemo } from 'react'
import { SubmittedContract, SubmittedProxyContract, isContract, isProxy } from '../types/VerificationTypes'
import { SubmittedContract, SubmittedProxyContract, isContract, isProxy } from '../types'
import { shortenAddress, CustomTooltip } from '@remix-ui/helper'
import { AppContext } from '../AppContext'

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef, useMemo } from 'react'
import Fuse from 'fuse.js'
import { Chain } from '../types/VerificationTypes'
import type { Chain } from '../types'
import { AppContext } from '../AppContext'
interface DropdownProps {

@ -1,9 +1,9 @@
import { useState } from 'react'
export function useLocalStorage(key: string, initialValue: any) {
export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
const [storedValue, setStoredValue] = useState<T>(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key)
@ -18,14 +18,12 @@ export function useLocalStorage(key: string, initialValue: any) {
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = (value: any) => {
const setValue = (value: T) => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore = value instanceof Function ? value(storedValue) : value
// Save state
setStoredValue(valueToStore)
setStoredValue(value)
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore))
window.localStorage.setItem(key, JSON.stringify(value))
} catch (error) {
// A more advanced implementation would handle the error case
console.error(error)

@ -0,0 +1,19 @@
import { VerifierIdentifier } from './VerificationTypes'
export interface VerifierSettings {
apiUrl: string
explorerUrl?: string
apiKey?: string
}
export type SettingsForVerifier = Record<VerifierIdentifier, VerifierSettings>
export interface ChainSettings {
verifiers: SettingsForVerifier
}
export type SettingsForChains = Record<string, ChainSettings>
export interface ContractVerificationSettings {
chains: SettingsForChains
}

@ -19,12 +19,6 @@ export interface Chain {
export type VerifierIdentifier = 'Sourcify' | 'Etherscan' | 'Blockscout'
export interface VerifierSettings {
apiUrl: string
explorerUrl?: string
apiKey?: string
}
export interface VerifierInfo {
name: VerifierIdentifier
apiUrl: string

@ -1 +1,3 @@
export * from './ThemeType'
export * from './SettingsTypes'
export * from './VerificationTypes'

@ -1,6 +1,6 @@
import { useState } from 'react'
import { SearchableChainDropdown, ContractAddressInput } from '../components'
import { Chain } from '../types/VerificationTypes'
import type { Chain } from '../types'
export const LookupView = () => {
const [selectedChain, setSelectedChain] = useState<Chain | undefined>()

@ -1,6 +1,6 @@
import example from './example.js'
import { AccordionReceipt } from '../components/AccordionReceipt'
import { SubmittedContracts } from '../types/VerificationTypes'
import type { SubmittedContracts } from '../types'
export const ReceiptsView = () => {
const submittedContracts = example as unknown as SubmittedContracts

@ -1,6 +1,6 @@
import { useState } from 'react'
import { SearchableChainDropdown, ConfigInput } from '../components'
import { Chain } from '../types/VerificationTypes'
import type { Chain } from '../types'
export const SettingsView = () => {
const [selectedChain, setSelectedChain] = useState<Chain | undefined>()

@ -2,22 +2,29 @@ import React, { useEffect, useState } from 'react'
import { AppContext } from '../AppContext'
import { SearchableChainDropdown, ContractDropdown, ContractAddressInput } from '../components'
import { Chain, SubmittedContract, VerificationReceipt, VerifierInfo } from '../types/VerificationTypes'
import type { Chain, SubmittedContract, VerificationReceipt, VerifierInfo } from '../types'
import { SourcifyVerifier } from '../Verifiers/SourcifyVerifier'
import { EtherscanVerifier } from '../Verifiers/EtherscanVerifier'
import { useNavigate } from 'react-router-dom'
import { ConstructorArguments } from '../components/ConstructorArguments'
import { getVerifier } from '../Verifiers'
import { AbstractVerifier, getVerifier } from '../Verifiers'
import { ContractDropdownSelection } from '../components/ContractDropdown'
export const VerifyView = () => {
const { compilationOutput, verifiers, setVerifiers, setSubmittedContracts } = React.useContext(AppContext)
const { compilationOutput, setSubmittedContracts } = React.useContext(AppContext)
const [contractAddress, setContractAddress] = useState('')
const [selectedChain, setSelectedChain] = useState<Chain | undefined>()
const [abiEncodedConstructorArgs, setAbiEncodedConstructorArgs] = React.useState<string>('')
const [selectedContract, setSelectedContract] = useState<ContractDropdownSelection | undefined>()
const navigate = useNavigate()
// TODO
const [verifiers, setVerifiers] = useState<AbstractVerifier[]>([]) // Placeholder, to be derived from settings
// const sourcifyVerifier = new SourcifyVerifier('http://sourcify.dev/server/', 'Sourcify')
const sourcifyVerifier = new SourcifyVerifier('http://localhost:5555/', 'todo')
const etherscanVerifier = new EtherscanVerifier('https://api.etherscan.io', 'todo', 'API_KEY')
setVerifiers([sourcifyVerifier, etherscanVerifier])
useEffect(() => {
console.log('Selected chain changed', selectedChain)
}, [selectedChain])

Loading…
Cancel
Save