Merge branch 'master' into desktope2e-remixai

Author: STetsing

CONTRIBUTING.md

@@ -27,7 +27,7 @@ Then you can replace the string with a intl component. The `id` prop will be the
 +  <FormattedMessage id="home.learn" />
 </label>
 ```
-In some cases, jsx maybe not acceptable, you can use `intl.formatMessage` .
+In some cases, jsx maybe not be acceptable, you can use `intl.formatMessage` .
 ```jsx
 <input
    ref={searchInputRef}
@@ -77,7 +77,7 @@ const locales = [
 ]
 ```
 You can find the language's `code, name, localeName` in this link
-https://github.com/ethereum/ethereum-org-website/blob/dev/i18n/config.json
+https://github.com/ethereum/ethereum-org-website/blob/dev/i18n.config.json
 
 ### Whether or not to use `defaultMessage`?
 If you search `FormattedMessage` or `intl.formatMessage` in this project, you will notice that most of them only have a `id` prop, but a few of them have a `defaultMessage` prop.
@@ -92,7 +92,7 @@ But in some cases, the `id` prop may not be static. For example,
  <FormattedMessage id={plugin?.profile.name + '.displayName'} defaultMessage={plugin?.profile.displayName || plugin?.profile.name} />
 </h6>
 ```
-You can't be sure there is a match key in locale file or not. So it will be better to provide a `defaultMessage` prop.
+You can't be sure whether there is a match key in locale file or not. So it will be better to provide a `defaultMessage` prop.
 
 ### Should I update the non-english locale json files?
 You probably will have this question when you are updating the english locale json files. 

README.md

@@ -68,7 +68,7 @@ git clone https://github.com/ethereum/remix-project.git
 2. Install dependencies: `yarn install` or simply run `yarn`
 3. Build Remix libraries: `yarn run build:libs`
 4. Build Remix project: `yarn build`
-5. Build and run project server: `yarn serve`. Optionally, run `yarn serve:hot` to enable hot module reload for frontend updates.
+5. Build and run project server: `yarn serve`. Optionally, run `yarn serve:hot` to enable hot module to reload for frontend updates.
 
 Open `http://127.0.0.1:8080` in your browser to load Remix IDE locally.
 

apps/quick-dapp/src/actions/index.ts

@@ -10,8 +10,8 @@ const { encodeFunctionId } = execution.txHelper;
 
 const surgeClient = new SurgeClient({
   // surge backend doesn't support cross-domain, that's why the proxy goes
-  // here is the codebase of proxy: https://github.com/drafish/vercel-proxy
-  proxy: 'https://vercel-proxy-bice-six.vercel.app',
+  // here is the codebase of proxy: https://github.com/remix-project-org/remix-wildcard/blob/master/src/hosts/common-corsproxy.ts
+  proxy: 'https://common-corsproxy.remixproject.org/',
   onError: (err: Error) => {
     console.log(err);
   },
@@ -160,19 +160,10 @@ export const deploy = async (payload: any, callback: any) => {
   const { data } = await axios.get(
     // It's the json file contains all the static files paths of dapp-template.
     // It's generated through the build process automatically.
-    'https://dev.remix-dapp.pages.dev/manifest.json'
+    `${window.origin}/plugins/remix-dapp/manifest.json`
   );
 
-  let paths: any = [];
-
-  Object.keys(data).forEach((key) => {
-    if (data[key].src === 'index.html') {
-      const { src, file, css, assets } = data[key];
-      paths = paths.concat([src, file, ...css, ...assets]);
-    } else {
-      paths.push(data[key].file);
-    }
-  });
+  const paths = Object.keys(data);
 
   const { logo, ...instance } = state.instance;
 
@@ -183,7 +174,7 @@ export const deploy = async (payload: any, callback: any) => {
   })
 
   const files: Record<string, string> = {
-    'dir/instance.json': instanceJson,
+    'dir/assets/instance.json': instanceJson,
   };
 
   // console.log(
@@ -197,11 +188,11 @@ export const deploy = async (payload: any, callback: any) => {
     const path = paths[index];
     // download all the static files from the dapp-template domain.
     // here is the codebase of dapp-template: https://github.com/drafish/remix-dapp
-    const resp = await axios.get(`https://dev.remix-dapp.pages.dev/${path}`);
+    const resp = await axios.get(`${window.origin}/plugins/remix-dapp/${path}`);
     files[`dir/${path}`] = resp.data;
   }
 
-  files['dir/logo.png'] = logo
+  files['dir/assets/logo.png'] = logo
   files['dir/CORS'] = '*'
   files['dir/index.html'] = files['dir/index.html'].replace(
     'assets/css/themes/remix-dark_tvx1s2.css',
@@ -236,7 +227,7 @@ export const deploy = async (payload: any, callback: any) => {
 
   try {
     // some times deployment might fail even if it says successfully, that's why we need to do the double check.
-    const instanceResp = await axios.get(`https://${payload.subdomain}.surge.sh/instance.json`);
+    const instanceResp = await axios.get(`https://${payload.subdomain}.surge.sh/assets/instance.json`);
     if (instanceResp.status === 200 && JSON.stringify(instanceResp.data) === instanceJson) {
       callback({ code: 'SUCCESS', error: '' });
       return;

apps/remix-dapp/.eslintrc

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

apps/remix-dapp/README.md

@@ -0,0 +1 @@
+# Remix Dapp

apps/remix-dapp/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "remix-dapp",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "webpack-manifest-plugin": "^5.0.0"
+  }
+}

apps/remix-dapp/project.json

@@ -0,0 +1,69 @@
+{
+  "name": "remix-dapp",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/remix-dapp/src",
+  "projectType": "application",
+  "implicitDependencies": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "development",
+      "dependsOn": ["install"],
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/remix-dapp",
+        "index": "apps/remix-dapp/src/index.html",
+        "baseHref": "./",
+        "main": "apps/remix-dapp/src/main.tsx",
+        "tsConfig": "apps/remix-dapp/tsconfig.app.json",
+        "assets": ["apps/remix-dapp/src/assets/instance.json", "apps/remix-dapp/src/assets/logo.png"],
+        "styles": ["apps/remix-dapp/src/App.css"],
+        "scripts": [],
+        "webpackConfig": "apps/remix-dapp/webpack.config.js"
+      },
+      "configurations": {
+        "development": {
+        },
+        "production": {
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/remix-dapp/**/*.ts"],
+        "eslintConfig": "apps/remix-dapp/.eslintrc"
+      }
+    },
+    "install": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "cd apps/remix-dapp && yarn"
+        ],
+        "parallel": false
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/webpack:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "remix-dapp:build",
+        "hmr": true,
+        "baseHref": "/"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "remix-dapp:build:development",
+          "port": 2026
+        },
+        "production": {
+          "buildTarget": "remix-dapp:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

apps/remix-dapp/src/App.css

@@ -0,0 +1,25 @@
+.dragbar_terminal {
+  left: 0px;
+  top: 0px;
+  height: 0.3em;
+}
+
+.dragbar_terminal:hover,
+.dragbar_terminal.ondrag {
+  background-color: var(--secondary);
+  cursor: row-resize;
+}
+
+.label_item {
+  word-break: break-all;
+  max-width: 90%;
+}
+.label_key {
+  max-width: 65%;
+  min-width: fit-content;
+}
+.label_value {
+  min-width: 10%;
+}
+
+

apps/remix-dapp/src/App.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useReducer } from 'react';
+import { IntlProvider } from 'react-intl';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { AppContext } from './contexts';
+import { appInitialState, appReducer } from './reducers/state';
+import { initDispatch, initInstance, updateState } from './actions';
+import enJson from './locales/en';
+import zhJson from './locales/zh';
+import esJson from './locales/es';
+import frJson from './locales/fr';
+import itJson from './locales/it';
+import './App.css';
+import { isMobile } from './utils/tools';
+import MobilePage from './components/Home/mobile';
+import PCPage from './components/Home/pc';
+
+const localeMap: Record<string, any> = {
+  zh: zhJson,
+  en: enJson,
+  fr: frJson,
+  it: itJson,
+  es: esJson,
+};
+
+function App(): JSX.Element {
+  const [appState, dispatch] = useReducer(appReducer, appInitialState);
+  const selectedLocaleCode = appState.settings.selectedLocaleCode;
+  useEffect(() => {
+    updateState(appState);
+  }, [appState]);
+  useEffect(() => {
+    initDispatch(dispatch);
+    updateState(appState);
+    initInstance();
+  }, []);
+
+  return (
+    <AppContext.Provider
+      value={{
+        dispatch,
+        appState,
+      }}
+    >
+      <IntlProvider
+        locale={selectedLocaleCode}
+        messages={localeMap[selectedLocaleCode]}
+      >
+        {isMobile() ? <MobilePage /> : <PCPage />}
+        <ToastContainer
+          position="bottom-right"
+          newestOnTop
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="colored"
+        />
+      </IntlProvider>
+    </AppContext.Provider>
+  );
+}
+
+export default App;