move custom cors-proxy to settings

ethereum · Feb 3, 2024 · 0dc5a71 · 0dc5a71
1 parent 5ff1e68
commit 0dc5a71
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 49 deletions.
diff --git a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
@@ -27,12 +27,6 @@
   "filePanel.workspace.clone": "Clone Git Repository",
   "filePanel.workspace.cloneMessage": "Please provide a valid git repository url.",
   "filePanel.workspace.enterGitUrl": "Enter git repository url",
-  "filePanel.workspace.enterCorsproxyUrl": "Enter cors proxy url, default to be https://corsproxy.remixproject.org/",
-  "filePanel.workspace.gitRepoUrl": "Git Repo Url:",
-  "filePanel.workspace.corsProxyUrl": "Cors Proxy Url (Optional):",
-  "filePanel.workspace.corsproxyText1": "Note: To run CorsProxy on your system, run:",
-  "filePanel.workspace.corsproxyText2": "Note: Cors Proxy Url must be end with /, such as http://127.0.0.1:9999/",
-  "filePanel.workspace.corsproxyText3": "For more info, visit: <a>CorsProxy Documentation</a>",
   "filePanel.workspace.switch": "Switch To Workspace",
   "filePanel.workspace.solghaction": "Adds a preset yml file to run solidity unit tests on github actions CI.",
   "filePanel.solghaction": "Solidity Test Workflow",

diff --git a/apps/remix-ide/src/app/tabs/locales/en/settings.json b/apps/remix-ide/src/app/tabs/locales/en/settings.json
@@ -33,6 +33,12 @@
   "settings.email": "EMAIL",
   "settings.deleteGithubCredentials": "Delete Github Credentials",
   "settings.deleteGitlabCredentials": "Delete Gitlab Credentials",
+  "settings.url": "URL",
+  "settings.deleteCorsproxy": "Delete Cors Proxy",
+  "settings.corsproxyTitle": "Cors Proxy for Git",
+  "settings.corsproxyText": "Cors Proxy is used to proxy git requests, such as clone, push, pull etc. Follow the commands below to start your own service:",
+  "settings.corsproxyText2": "Cors Proxy Url must be end with /, default to be https://corsproxy.remixproject.org/",
+  "settings.corsproxyText3": "For more info, visit: <a>CorsProxy Documentation</a>",
   "settings.privateBeeAddress": "PRIVATE BEE ADDRESS",
   "settings.postageStampID": "POSTAGE STAMP ID",
   "settings.host": "HOST",

diff --git a/libs/remix-ui/settings/src/lib/corsproxy-settings.tsx b/libs/remix-ui/settings/src/lib/corsproxy-settings.tsx
@@ -0,0 +1,82 @@
+import {CopyToClipboard} from '@remix-ui/clipboard'
+import {CustomTooltip} from '@remix-ui/helper'
+import React, {useEffect, useState} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {CorsproxySettingsProps} from '../types'
+
+export function CorsproxySettings(props: CorsproxySettingsProps) {
+  const [url, setUrl] = useState<string>('')
+  const intl = useIntl()
+
+  useEffect(() => {
+    if (props.config) {
+      const url = props.config.get('settings/corsproxy-url') || 'https://corsproxy.remixproject.org/'
+
+      setUrl(url)
+    }
+  }, [props.config])
+
+  const handleChangeUrlState = (event) => {
+    setUrl(event.target.value)
+  }
+
+  const saveCorsproxy = () => {
+    props.saveCorsproxy(url)
+  }
+
+  const removeToken = () => {
+    setUrl('')
+    props.removeCorsproxy()
+  }
+
+  return (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">
+          <FormattedMessage id="settings.corsproxyTitle" />
+        </h6>
+        <FormattedMessage id="settings.corsproxyText" />
+        <div className="p-1 pl-3">
+          <b>npm install -g @drafish/cors-proxy</b>
+        </div>
+        <div className="p-1 pl-3">
+          <b>cors-proxy start</b>
+        </div>
+        <div className="pt-2">
+          <FormattedMessage
+            id="settings.corsproxyText2"
+          />
+        </div>
+        <div className="pt-2">
+          <FormattedMessage
+            id="settings.corsproxyText3"
+            values={{
+              a: (chunks) => (
+                <a href="https://github.com/drafish/cors-proxy" target="_blank">
+                  {chunks}
+                </a>
+              )
+            }}
+          />
+        </div>
+
+        <div>
+          <label className="pt-2 mb-0 pb-0">
+            <FormattedMessage id="settings.url" />:
+          </label>
+          <div className="text-secondary mb-0 h6">
+            <input id="corsproxy" data-id="settingsTabCorsproxy" type="text" className="form-control" onChange={(e) => handleChangeUrlState(e)} value={url} />
+            <div className="d-flex justify-content-end pt-2">
+              <input className="btn btn-sm btn-primary ml-2" id="savecorsproxy" data-id="settingsTabSaveCorsproxy" onClick={saveCorsproxy} value={intl.formatMessage({id: 'settings.save'})} type="button"></input>
+              <CustomTooltip tooltipText={<FormattedMessage id="settings.deleteCorsproxy" />} tooltipClasses="text-nowrap" tooltipId="removecorsproxyTooltip" placement="top-start">
+                <button className="btn btn-sm btn-secondary ml-2" id="removecorsproxy" data-id="settingsTabRemoveCorsproxy" onClick={removeToken}>
+                  <FormattedMessage id="settings.remove" />
+                </button>
+              </CustomTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
@@ -15,6 +15,8 @@ import {
   useMatomoAnalytics,
   saveTokenToast,
   removeTokenToast,
+  saveCorsproxyToast,
+  removeCorsproxyToast,
   saveSwarmSettingsToast,
   saveIpfsSettingsToast,
   useAutoCompletion,
@@ -28,6 +30,7 @@ import {RemixUiLocaleModule, LocaleModule} from '@remix-ui/locale-module'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {GithubSettings} from './github-settings'
 import {GitlabSettings} from './gitlab-settings'
+import {CorsproxySettings} from './corsproxy-settings'
 import {EtherscanSettings} from './etherscan-settings'
 
 /* eslint-disable-next-line */
@@ -604,6 +607,15 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
         }}
         config={props.config}
       />
+      <CorsproxySettings
+        saveCorsproxy={(url: string) => {
+          saveCorsproxyToast(props.config, dispatchToast, url, 'corsproxy-url')
+        }}
+        removeCorsproxy={() => {
+          removeCorsproxyToast(props.config, dispatchToast, 'corsproxy-url')
+        }}
+        config={props.config}
+      />
       <EtherscanSettings
         saveToken={(etherscanToken: string) => {
           saveTokenToast(props.config, dispatchToast, etherscanToken, 'etherscan-access-token')

diff --git a/libs/remix-ui/settings/src/lib/settingsAction.ts b/libs/remix-ui/settings/src/lib/settingsAction.ts
@@ -76,6 +76,16 @@ export const removeTokenToast = (config, dispatch, key) => {
   dispatch({ type: 'removed', payload: { message: 'Credentials removed' } })
 }
 
+export const saveCorsproxyToast = (config, dispatch, value, key) => {
+  config.set('settings/' + key, value)
+  dispatch({ type: 'save', payload: { message: 'Corsproxy updated' } })
+}
+
+export const removeCorsproxyToast = (config, dispatch, key) => {
+  config.set('settings/' + key, '')
+  dispatch({ type: 'removed', payload: { message: 'Corsproxy removed' } })
+}
+
 export const saveSwarmSettingsToast = (config, dispatch, privateBeeAddress, postageStampId) => {
   config.set('settings/swarm-private-bee-address', privateBeeAddress)
   config.set('settings/swarm-postage-stamp-id', postageStampId)

diff --git a/libs/remix-ui/settings/src/types/index.ts b/libs/remix-ui/settings/src/types/index.ts
@@ -11,6 +11,19 @@ export interface GithubSettingsProps {
   }
 }
 
+export interface CorsproxySettingsProps {
+  saveCorsproxy: (url: string) => void,
+  removeCorsproxy: () => 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,

diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -49,8 +49,6 @@ export function Workspace() {
   const workspaceCreateTemplateInput = useRef()
   const intl = useIntl()
   const cloneUrlRef = useRef<HTMLInputElement>()
-  const config = global.plugin.registry.get('config').api
-  const corsproxyUrlRef = useRef<HTMLInputElement>()
   const initGitRepoRef = useRef<HTMLInputElement>()
   const filteredBranches = selectedWorkspace ? (selectedWorkspace.branches || []).filter((branch) => branch.name.includes(branchFilter) && branch.name !== 'HEAD').slice(0, 20) : []
   const currentBranch = selectedWorkspace ? selectedWorkspace.currentBranch : null
@@ -426,9 +424,6 @@ export function Workspace() {
   const handleTypingUrl = () => {
     const url = cloneUrlRef.current.value
 
-    const corsproxy = corsproxyUrlRef.current.value
-    config.set('corsproxy', corsproxy)
-
     if (url) {
       global.dispatchCloneRepository(url)
     } else {
@@ -915,7 +910,6 @@ export function Workspace() {
   const cloneModalMessage = () => {
     return (
       <>
-        <div><FormattedMessage id="filePanel.workspace.gitRepoUrl" /></div>
         <input
           type="text"
           data-id="modalDialogCustomPromptTextClone"
@@ -925,43 +919,6 @@ export function Workspace() {
           ref={cloneUrlRef}
           className="form-control"
         />
-        <div className="pt-4"><FormattedMessage id="filePanel.workspace.corsProxyUrl" /></div>
-        <input
-          type="text"
-          data-id="modalDialogCustomPromptTextCorsproxy"
-          placeholder={intl.formatMessage({
-            id: 'filePanel.workspace.enterCorsproxyUrl'
-          })}
-          ref={corsproxyUrlRef}
-          defaultValue={config.get('corsproxy')}
-          className="form-control"
-        />
-        <div className="pt-2">
-          <FormattedMessage id="filePanel.workspace.corsproxyText1" />
-          <div className="p-1 pl-3">
-            <b>npm install -g @drafish/cors-proxy</b>
-          </div>
-          <div className="p-1 pl-3">
-            <b>cors-proxy start</b>
-          </div>
-          <div className="pt-2">
-            <FormattedMessage
-              id="filePanel.workspace.corsproxyText2"
-            />
-          </div>
-          <div className="pt-2">
-            <FormattedMessage
-              id="filePanel.workspace.corsproxyText3"
-              values={{
-                a: (chunks) => (
-                  <a href="https://github.com/drafish/cors-proxy" target="_blank">
-                    {chunks}
-                  </a>
-                )
-              }}
-            />
-          </div>
-        </div>
       </>
     )
   }