Etherscan settings component

libs/remix-ui/settings/src/lib/etherscan-settings.tsx

@@ -0,0 +1,58 @@
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import React, { useEffect, useState } from 'react'
+import { EtherscanSettingsProps } from '../types'
+import { etherscanTokenTitle, etherscanAccessTokenText, etherscanAccessTokenText2, etherscanTokenLink } from './constants'
+
+
+export function EtherscanSettings (props: EtherscanSettingsProps) {
+  const [etherscanToken, setEtherscanToken] = useState<string>("")
+
+  useEffect(() => {
+    if (props.config) {
+      const etherscanToken = props.config.get('settings/etherscan-access-token') || ''
+      setEtherscanToken(etherscanToken)
+    }
+  }, [props.config])
+
+  const handleChangeTokenState = (event) => {
+    setEtherscanToken(event.target.value)
+  }
+
+  // api key settings
+  const saveEtherscanToken = () => {
+    props.saveToken(etherscanToken)
+  }
+
+  const removeToken = () => {
+    setEtherscanToken('')
+    props.removeToken()
+  }
+  
+  return (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">{etherscanTokenTitle}</h6>
+        <p className="mb-1">{etherscanAccessTokenText}</p>
+        <p className="">{etherscanAccessTokenText2}</p>
+        <p className="mb-1"><a className="text-primary" target="_blank" href={etherscanTokenLink}>{etherscanTokenLink}</a></p>
+        <div>
+          <label className="mb-0 pb-0">TOKEN:</label>
+          <div className="input-group text-secondary mb-0 h6">
+            <input id="etherscanAccessToken" data-id="settingsTabEtherscanAccessToken" type="password" className="form-control" onChange={(e) => handleChangeTokenState(e)} value={ etherscanToken } />
+            <div className="input-group-append">
+              <CopyToClipboard content={etherscanToken} data-id='copyToClipboardCopyIcon' className='far fa-copy ml-1 p-2 mt-1' direction={"top"} />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="text-secondary mb-0 h6">
+            <div className="d-flex justify-content-end pt-2">
+              <input className="btn btn-sm btn-primary ml-2" id="saveetherscantoken" data-id="settingsTabSaveEtherscanToken" onClick={saveEtherscanToken} value="Save" type="button" disabled={etherscanToken === ''}></input>
+              <button className="btn btn-sm btn-secondary ml-2" id="removeetherscantoken" data-id="settingsTabRemoveEtherscanToken" title="Delete Etherscan token" onClick={removeToken}>Remove</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

libs/remix-ui/settings/src/lib/github-settings.tsx

@@ -35,14 +35,14 @@ export function GithubSettings (props: GithubSettingsProps) {
 
   // api key settings
   const saveGithubToken = () => {
-    props.saveTokenToast(githubToken, githubUserName, githubEmail)
+    props.saveToken(githubToken, githubUserName, githubEmail)
   }
 
   const removeToken = () => {
     setGithubToken('')
     setGithubUsername('')
     setGithubEmail('')
-    props.removeTokenToast()
+    props.removeToken()
   }
   
   return (

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -9,6 +9,7 @@ import { initialState, toastInitialState, toastReducer, settingReducer } from '.
 import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
 import { RemixUiThemeModule, ThemeModule} from '@remix-ui/theme-module'
 import { GithubSettings } from './github-settings'
+import { EtherscanSettings } from './etherscan-settings'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
@@ -388,19 +389,27 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
       {state.message ? <Toaster message= {state.message}/> : null}
       {generalConfig()}     
       <GithubSettings
-        saveTokenToast={(githubToken: string, githubUserName: string, githubEmail: string) => {
+        saveToken={(githubToken: string, githubUserName: string, githubEmail: string) => {
           saveTokenToast(props.config, dispatchToast, githubToken, "gist-access-token")
           saveTokenToast(props.config, dispatchToast, githubUserName, "github-user-name")
           saveTokenToast(props.config, dispatchToast, githubEmail, "github-email")
         }}
-        removeTokenToast={() => { 
+        removeToken={() => { 
           removeTokenToast(props.config, dispatchToast, "gist-access-token")
           removeTokenToast(props.config, dispatchToast, "github-user-name")
           removeTokenToast(props.config, dispatchToast, "github-email")
         }}
         config={props.config}
       />
-      {token('etherscan')}
+      <EtherscanSettings
+        saveToken={(etherscanToken: string) => {
+          saveTokenToast(props.config, dispatchToast, etherscanToken, "etherscan-access-token")
+        }}
+        removeToken={() => { 
+          removeTokenToast(props.config, dispatchToast, "etherscan-access-token")
+        }}
+        config={props.config}
+      />
       {swarmSettings()}
       {ipfsSettings()}
       <RemixUiThemeModule themeModule={props._deps.themeModule} />

libs/remix-ui/settings/src/lib/settingsAction.ts

@@ -57,6 +57,7 @@ export const useDisplayErrors = (config, checked, dispatch) => {
 }
 
 export const saveTokenToast = (config, dispatch, tokenValue, key) => {
+  console.log('key in saveToken---->', key)
   config.set('settings/' + key, tokenValue)
   dispatch({ type: 'save', payload: { message: 'GitHub credentials updated' } })
 }

libs/remix-ui/settings/src/types/index.ts

@@ -1,6 +1,19 @@
 export interface GithubSettingsProps {
-  saveTokenToast: (githubToken: string, githubUserName: string, githubEmail: string) => void,
+  saveToken: (githubToken: string, githubUserName: string, githubEmail: string) => void,
-  removeTokenToast: () => void,
+  removeToken: () => void,
+  config: {
+    exists: (key: string) => boolean,
+    get: (key: string) => string,
+    set: (key: string, content: string) => void,
+    clear: () => void,
+    getUnpersistedProperty: (key: string) => void,
+    setUnpersistedProperty: (key: string, value: string) => void
+  }
+}
+
+export interface EtherscanSettingsProps {
+  saveToken: (etherscanToken: string) => void,
+  removeToken: () => void,
   config: {
     exists: (key: string) => boolean,
     get: (key: string) => string,