support custom cors-proxy

Author: drafish

apps/remix-ide/src/app/files/dgitProvider.js

@@ -59,8 +59,9 @@ class DGitProvider extends Plugin {
   }
 
   async parseInput (input) {
+    const corsproxy = await this.call('config', 'getAppParameter', 'corsproxy')
     return {
-      corsProxy: 'https://corsproxy.remixproject.org/',
+      corsProxy: corsproxy || 'https://corsproxy.remixproject.org/',
       http,
       onAuth: url => {
         url

apps/remix-ide/src/app/tabs/locales/en/filePanel.json

@@ -22,6 +22,12 @@
   "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",

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

@@ -44,6 +44,8 @@ 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
@@ -395,6 +397,11 @@ export function Workspace() {
 
   const handleTypingUrl = () => {
     const url = cloneUrlRef.current.value
+    const corsproxy = corsproxyUrlRef.current.value
+
+    if (corsproxy) {
+      config.set('corsproxy', corsproxy)
+    }
 
     if (url) {
       global.dispatchCloneRepository(url)
@@ -870,6 +877,7 @@ export function Workspace() {
   const cloneModalMessage = () => {
     return (
       <>
+        <div><FormattedMessage id="filePanel.workspace.gitRepoUrl" /></div>
         <input
           type="text"
           data-id="modalDialogCustomPromptTextClone"
@@ -879,6 +887,43 @@ 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>
       </>
     )
   }