From df9ded51b84534607c94180a5c2842ecdc598822 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 20 Aug 2024 11:18:52 +0200
Subject: [PATCH 01/67] remixd flaky test

---
 .circleci/config.yml                        | 2 +-
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d5a065c41d..a95ed97b6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: false
+    default: true
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
   win: circleci/windows@5.0
diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 6fb821820a..529a77b71b 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -66,7 +66,7 @@ module.exports = {
   '@sources': function () {
     return sources
   },
-  'run Remixd tests #group1': function (browser) {
+  'run Remixd tests #group1 #flaky': function (browser) {
     browser.perform(async (done) => {
       try {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))

From de79b46977eff8a678fb5cd0f9af691d33239010 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 20 Aug 2024 11:49:35 +0200
Subject: [PATCH 02/67] flaky failed test

---
 apps/remix-ide-e2e/src/tests/ballot.test.ts | 4 ++--
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index c9fb7c27bc..656a90414b 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -20,10 +20,10 @@ module.exports = {
     browser
       .addFile('Untitled.sol', sources[0]['Untitled.sol'])
   },
-  'Deploy Ballot #group1': function (browser: NightwatchBrowser) {
+  'Deploy Ballot #group1 #flaky': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
-      .clickLaunchIcon('solidity')
+      .clickLaunchIcon('solidity2')
       .testContracts('Untitled.sol', sources[0]['Untitled.sol'], ['Ballot'])
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c')
diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 529a77b71b..6fb821820a 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -66,7 +66,7 @@ module.exports = {
   '@sources': function () {
     return sources
   },
-  'run Remixd tests #group1 #flaky': function (browser) {
+  'run Remixd tests #group1': function (browser) {
     browser.perform(async (done) => {
       try {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))

From b23dc4bde544ec1eb3767184610f659f6be88a5c Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 20 Aug 2024 12:00:44 +0200
Subject: [PATCH 03/67] rerun flaky

---
 apps/remix-ide/ci/flaky.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/ci/flaky.sh b/apps/remix-ide/ci/flaky.sh
index 5373daec0b..69c7bbe734 100755
--- a/apps/remix-ide/ci/flaky.sh
+++ b/apps/remix-ide/ci/flaky.sh
@@ -23,7 +23,7 @@ yarn run serve:production &
 sleep 5
 
 for TESTFILE in $TESTFILES; do
-    npx nightwatch --config dist/apps/remix-ide-e2e/nightwatch-${1}.js $TESTFILE --env=$1  || TEST_EXITCODE=1
+    npx nightwatch --config dist/apps/remix-ide-e2e/nightwatch-${1}.js $TESTFILE --env=$1  || npx nightwatch --config dist/apps/remix-ide-e2e/nightwatch-${1}.js $TESTFILE --env=$1  || TEST_EXITCODE=1
 done
 
 echo "$TEST_EXITCODE"

From 13b942902daa0ad14792544febe11a357b2dfb67 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 20 Aug 2024 12:15:34 +0200
Subject: [PATCH 04/67] remixd

---
 apps/remix-ide-e2e/src/tests/ballot.test.ts | 2 +-
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index 656a90414b..d97a362ea3 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -20,7 +20,7 @@ module.exports = {
     browser
       .addFile('Untitled.sol', sources[0]['Untitled.sol'])
   },
-  'Deploy Ballot #group1 #flaky': function (browser: NightwatchBrowser) {
+  'Deploy Ballot #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('solidity2')
diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 6fb821820a..529a77b71b 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -66,7 +66,7 @@ module.exports = {
   '@sources': function () {
     return sources
   },
-  'run Remixd tests #group1': function (browser) {
+  'run Remixd tests #group1 #flaky': function (browser) {
     browser.perform(async (done) => {
       try {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))

From 9d2c0c62d6840e8c8ad61f2b3503f68427ea723a Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 15:04:20 +0200
Subject: [PATCH 05/67] more checks

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 529a77b71b..323d779fc5 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -322,8 +322,10 @@ function runTests(browser: NightwatchBrowser, done: any) {
     .setEditorValue('contract test1Changed { function get () returns (uint) { return 10; }}')
     .testEditorValue('contract test1Changed { function get () returns (uint) { return 10; }}')
     .setEditorValue('contract test1 { function get () returns (uint) { return 10; }}')
+    .waitForElementVisible('[data-path="folder1/contract_' + browserName + '.sol"]')
     .click('[data-path="folder1/contract_' + browserName + '.sol"]') // rename a file and check
     .pause(1000)
+    .saveScreenshot('./reports/screenshots/remixd1.png')
     .renamePath('folder1/contract_' + browserName + '.sol', 'renamed_contract_' + browserName, 'folder1/renamed_contract_' + browserName + '.sol')
     .pause(1000)
     .removeFile('folder1/contract_' + browserName + '_toremove.sol', 'localhost')

From b6fb99130cace3de61ec45718acc1aa67d3727dc Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 15:33:45 +0200
Subject: [PATCH 06/67] run aftereach

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 323d779fc5..a234c6a4b6 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -55,6 +55,10 @@ module.exports = {
   before: function (browser, done) {
     init(browser, done)
   },
+  afterEach: function (browser, done) {
+    console.log('afterEach')
+    done()
+  },
   after: function (browser) {
     browser.perform((done) => {
       console.log('remixd', remixd.pid)
@@ -322,6 +326,7 @@ function runTests(browser: NightwatchBrowser, done: any) {
     .setEditorValue('contract test1Changed { function get () returns (uint) { return 10; }}')
     .testEditorValue('contract test1Changed { function get () returns (uint) { return 10; }}')
     .setEditorValue('contract test1 { function get () returns (uint) { return 10; }}')
+    .waitForElementVisible('[data-path="folder1"]')
     .waitForElementVisible('[data-path="folder1/contract_' + browserName + '.sol"]')
     .click('[data-path="folder1/contract_' + browserName + '.sol"]') // rename a file and check
     .pause(1000)

From 11b5366179afd4897cc6cb64bd47c56fe6aefb1d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:04:38 +0000
Subject: [PATCH 07/67] Bump elliptic from 6.5.4 to 6.5.7 in
 /apps/remix-ide-e2e

Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.4 to 6.5.7.
- [Commits](https://github.com/indutny/elliptic/compare/v6.5.4...v6.5.7)

---
updated-dependencies:
- dependency-name: elliptic
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 apps/remix-ide-e2e/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/yarn.lock b/apps/remix-ide-e2e/yarn.lock
index ec987d4405..8355207ece 100644
--- a/apps/remix-ide-e2e/yarn.lock
+++ b/apps/remix-ide-e2e/yarn.lock
@@ -923,9 +923,9 @@ ejs@3.1.8:
     jake "^10.8.5"
 
 elliptic@^6.5.4:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"

From 84f102091bc86a149680664627a343e68689e185 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 16:01:03 +0200
Subject: [PATCH 08/67] spawn kill

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 41 ++++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index a234c6a4b6..5b07e5bfa9 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -55,15 +55,25 @@ module.exports = {
   before: function (browser, done) {
     init(browser, done)
   },
-  afterEach: function (browser, done) {
-    console.log('afterEach')
-    done()
+  afterEach: async function (browser, done) {
+    if (browser.currentTest.results.failed > 0) {
+      // Perform actions if the test case failed
+      console.log('Test failed, disconnecting services...');
+      console.log('remixd', remixd.pid)
+    }
+    done();
   },
   after: function (browser) {
-    browser.perform((done) => {
+    console.log('after')
+    browser.perform(async (done) => {
       console.log('remixd', remixd.pid)
-      kill(remixd.pid)
+      try {
+        await killProcess(remixd.pid)
+      }catch(e){
+        
+      }
       done()
+      browser.end()
     })
   },
 
@@ -402,6 +412,27 @@ async function spawnRemixd(path: string): Promise<ChildProcess> {
   })
 }
 
+function killProcess(pid, signal = 'SIGKILL') {
+  return new Promise<void>((resolve, reject) => {
+    const kill = spawn('kill', ['-s', signal, pid]);
+
+    kill.on('close', (code) => {
+      if (code === 0) {
+        console.log(`Successfully killed process with PID: ${pid}`);
+        resolve();
+      } else {
+        console.error(`Failed to kill process with PID: ${pid}. Exit code: ${code}`);
+        reject(new Error(`kill process failed with code ${code}`));
+      }
+    });
+
+    kill.on('error', (err) => {
+      console.error(`Error spawning kill process: ${err.message}`);
+      reject(err);
+    });
+  });
+}
+
 function connectRemixd(browser: NightwatchBrowser, done: any) {
   const browserName = browser.options.desiredCapabilities.browserName
   if (browserName === 'safari' || browserName === 'internet explorer') {

From 7537b70f53320dbc4af8672d365f1809de475160 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 16:32:45 +0200
Subject: [PATCH 09/67] refactor

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 33 +++++++++++----------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 5b07e5bfa9..7f518abb54 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -55,26 +55,27 @@ module.exports = {
   before: function (browser, done) {
     init(browser, done)
   },
-  afterEach: async function (browser, done) {
+  afterEach: async function (browser) {
     if (browser.currentTest.results.failed > 0) {
-      // Perform actions if the test case failed
       console.log('Test failed, disconnecting services...');
-      console.log('remixd', remixd.pid)
-    }
-    done();
-  },
-  after: function (browser) {
-    console.log('after')
-    browser.perform(async (done) => {
-      console.log('remixd', remixd.pid)
+      console.log('remixd', remixd.pid);
+  
       try {
-        await killProcess(remixd.pid)
-      }catch(e){
-        
+        await killProcess(remixd.pid);
+        console.log('Service disconnected successfully.');
+      } catch (error) {
+        console.error('Failed to disconnect service:', error);
       }
-      done()
-      browser.end()
-    })
+    }
+  },
+  
+  after: async function (browser) {
+    try {
+      await killProcess(remixd.pid);
+      console.log('Service disconnected successfully.');
+    } catch (error) {
+      console.error('Failed to disconnect service:', error);
+    }
   },
 
   '@sources': function () {

From b8b43e4812d0c84d7d350ceecaae91d1b9e7439a Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 17:18:01 +0200
Subject: [PATCH 10/67] try another way

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 7f518abb54..51c4c61f24 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -6,6 +6,7 @@ import { ChildProcess, spawn } from 'child_process'
 import { homedir } from 'os'
 
 import kill from 'tree-kill'
+import treeKill from 'tree-kill'
 
 let remixd: ChildProcess
 const assetsTestContract = `import "./contract.sol";
@@ -59,19 +60,15 @@ module.exports = {
     if (browser.currentTest.results.failed > 0) {
       console.log('Test failed, disconnecting services...');
       console.log('remixd', remixd.pid);
-  
-      try {
-        await killProcess(remixd.pid);
-        console.log('Service disconnected successfully.');
-      } catch (error) {
-        console.error('Failed to disconnect service:', error);
-      }
     }
   },
   
   after: async function (browser) {
     try {
-      await killProcess(remixd.pid);
+      console.log('remixd pid', remixd.pid);
+      treeKill(remixd.pid, 'SIGKILL', (err) => {
+        console.log('remixd killed', err)
+      })
       console.log('Service disconnected successfully.');
     } catch (error) {
       console.error('Failed to disconnect service:', error);

From 9d60c853d277ef8123a0fb99061ce8d0277dc792 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 17:46:43 +0200
Subject: [PATCH 11/67] no async

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 31 ++++++++++-----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 51c4c61f24..994d44d18f 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -56,23 +56,20 @@ module.exports = {
   before: function (browser, done) {
     init(browser, done)
   },
-  afterEach: async function (browser) {
-    if (browser.currentTest.results.failed > 0) {
-      console.log('Test failed, disconnecting services...');
-      console.log('remixd', remixd.pid);
-    }
-  },
-  
-  after: async function (browser) {
-    try {
-      console.log('remixd pid', remixd.pid);
-      treeKill(remixd.pid, 'SIGKILL', (err) => {
-        console.log('remixd killed', err)
-      })
-      console.log('Service disconnected successfully.');
-    } catch (error) {
-      console.error('Failed to disconnect service:', error);
-    }
+
+  after: function (browser) {
+    browser.perform((done) => {
+      try {
+        console.log('remixd pid', remixd.pid);
+        treeKill(remixd.pid, 'SIGKILL', (err) => {
+          console.log('remixd killed', err)
+        })
+        console.log('Service disconnected successfully.');
+      } catch (error) {
+        console.error('Failed to disconnect service:', error);
+      }
+      done()
+    })
   },
 
   '@sources': function () {

From 283a1432046e4cb3080bd7b6f1a5084ee8593527 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 18:00:41 +0200
Subject: [PATCH 12/67] fix rename path

---
 apps/remix-ide-e2e/src/commands/renamePath.ts | 28 +++++-----
 apps/remix-ide-e2e/src/tests/remixd.test.ts   | 52 +++++++++++++++----
 2 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/renamePath.ts b/apps/remix-ide-e2e/src/commands/renamePath.ts
index d87faf7261..7ac7606631 100644
--- a/apps/remix-ide-e2e/src/commands/renamePath.ts
+++ b/apps/remix-ide-e2e/src/commands/renamePath.ts
@@ -2,7 +2,7 @@ import EventEmitter from 'events'
 import { NightwatchBrowser } from 'nightwatch'
 
 class RenamePath extends EventEmitter {
-  command (this: NightwatchBrowser, path: string, newFileName: string, renamedPath: string) {
+  command(this: NightwatchBrowser, path: string, newFileName: string, renamedPath: string) {
     this.api.perform((done) => {
       renamePath(this.api, path, newFileName, renamedPath, () => {
         done()
@@ -13,9 +13,9 @@ class RenamePath extends EventEmitter {
   }
 }
 
-function renamePath (browser: NightwatchBrowser, path: string, newFileName: string, renamedPath: string, done: VoidFunction) {
+function renamePath(browser: NightwatchBrowser, path: string, newFileName: string, renamedPath: string, done: VoidFunction) {
   browser.execute(function (path: string) {
-    function contextMenuClick (element) {
+    function contextMenuClick(element) {
       const evt = element.ownerDocument.createEvent('MouseEvents')
       const RIGHT_CLICK_BUTTON_CODE = 2 // the same for FF and IE
 
@@ -32,15 +32,19 @@ function renamePath (browser: NightwatchBrowser, path: string, newFileName: stri
     }
     contextMenuClick(document.querySelector('[data-path="' + path + '"]'))
   }, [path], function () {
-    browser
-      .click('#menuitemrename')
-      .sendKeys('[data-input-path="' + path + '"]', newFileName)
-      .sendKeys('[data-input-path="' + path + '"]', browser.Keys.ENTER)
-      .waitForElementNotPresent('[data-path="' + path + '"]')
-      .waitForElementPresent('[data-path="' + renamedPath + '"]')
-      .perform(() => {
-        done()
-      })
+    try {
+      browser
+        .click('#menuitemrename')
+        .sendKeys('[data-input-path="' + path + '"]', newFileName)
+        .sendKeys('[data-input-path="' + path + '"]', browser.Keys.ENTER)
+        .waitForElementNotPresent('[data-path="' + path + '"]')
+        .waitForElementPresent('[data-path="' + renamedPath + '"]');
+    } catch (error) {
+      console.error('An error occurred:', error.message);
+      // Handle error (e.g., take a screenshot, log the error, etc.)
+    } finally {
+      done(); // Ensure done is called even if there's an error
+    }
   })
 }
 
diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 994d44d18f..b6be54cb5f 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -51,6 +51,36 @@ const sources = [
   }
 ]
 
+function isPortInUse(port) {
+  return new Promise((resolve, reject) => {
+    const lsof = spawn('lsof', ['-i', `:${port}`]);
+
+    let output = '';
+    let error = '';
+
+    lsof.stdout.on('data', (data) => {
+      output += data.toString();
+    });
+
+    lsof.stderr.on('data', (data) => {
+      error += data.toString();
+    });
+
+    lsof.on('close', (code) => {
+      if (code === 0 && output) {
+        // Port is in use if lsof has output
+        resolve(true);
+      } else if (error) {
+        // Handle potential errors (e.g., lsof command not found)
+        reject(new Error(`lsof error: ${error}`));
+      } else {
+        // Port is not in use
+        resolve(false);
+      }
+    });
+  });
+}
+
 module.exports = {
   '@disabled': true,
   before: function (browser, done) {
@@ -59,15 +89,17 @@ module.exports = {
 
   after: function (browser) {
     browser.perform((done) => {
-      try {
-        console.log('remixd pid', remixd.pid);
-        treeKill(remixd.pid, 'SIGKILL', (err) => {
-          console.log('remixd killed', err)
-        })
-        console.log('Service disconnected successfully.');
-      } catch (error) {
-        console.error('Failed to disconnect service:', error);
-      }
+      isPortInUse(65520).then((inUse) => {
+        try {
+          console.log('remixd pid', remixd.pid);
+          treeKill(remixd.pid, 'SIGKILL', (err) => {
+            console.log('remixd killed', err)
+          })
+          console.log('Service disconnected successfully.');
+        } catch (error) {
+          console.error('Failed to disconnect service:', error);
+        }
+      })
       done()
     })
   },
@@ -334,7 +366,7 @@ function runTests(browser: NightwatchBrowser, done: any) {
     .waitForElementVisible('[data-path="folder1"]')
     .waitForElementVisible('[data-path="folder1/contract_' + browserName + '.sol"]')
     .click('[data-path="folder1/contract_' + browserName + '.sol"]') // rename a file and check
-    .pause(1000)
+    .pause()
     .saveScreenshot('./reports/screenshots/remixd1.png')
     .renamePath('folder1/contract_' + browserName + '.sol', 'renamed_contract_' + browserName, 'folder1/renamed_contract_' + browserName + '.sol')
     .pause(1000)

From 96b37d405ac6055ba07e5373056f96a1253780ef Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 18:15:07 +0200
Subject: [PATCH 13/67] rm pause

---
 apps/remix-ide-e2e/src/commands/renamePath.ts | 1 -
 apps/remix-ide-e2e/src/tests/remixd.test.ts   | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/renamePath.ts b/apps/remix-ide-e2e/src/commands/renamePath.ts
index 7ac7606631..e87df0cb95 100644
--- a/apps/remix-ide-e2e/src/commands/renamePath.ts
+++ b/apps/remix-ide-e2e/src/commands/renamePath.ts
@@ -41,7 +41,6 @@ function renamePath(browser: NightwatchBrowser, path: string, newFileName: strin
         .waitForElementPresent('[data-path="' + renamedPath + '"]');
     } catch (error) {
       console.error('An error occurred:', error.message);
-      // Handle error (e.g., take a screenshot, log the error, etc.)
     } finally {
       done(); // Ensure done is called even if there's an error
     }
diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index b6be54cb5f..78e98a1eef 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -366,7 +366,7 @@ function runTests(browser: NightwatchBrowser, done: any) {
     .waitForElementVisible('[data-path="folder1"]')
     .waitForElementVisible('[data-path="folder1/contract_' + browserName + '.sol"]')
     .click('[data-path="folder1/contract_' + browserName + '.sol"]') // rename a file and check
-    .pause()
+    .pause(1000)
     .saveScreenshot('./reports/screenshots/remixd1.png')
     .renamePath('folder1/contract_' + browserName + '.sol', 'renamed_contract_' + browserName, 'folder1/renamed_contract_' + browserName + '.sol')
     .pause(1000)

From ae073ecdffc1c9f9d4cfeb3044859d7d063718d9 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 18:16:33 +0200
Subject: [PATCH 14/67] rm screenshot

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 50 +++++----------------
 1 file changed, 10 insertions(+), 40 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 78e98a1eef..1b71322931 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -51,35 +51,7 @@ const sources = [
   }
 ]
 
-function isPortInUse(port) {
-  return new Promise((resolve, reject) => {
-    const lsof = spawn('lsof', ['-i', `:${port}`]);
-
-    let output = '';
-    let error = '';
 
-    lsof.stdout.on('data', (data) => {
-      output += data.toString();
-    });
-
-    lsof.stderr.on('data', (data) => {
-      error += data.toString();
-    });
-
-    lsof.on('close', (code) => {
-      if (code === 0 && output) {
-        // Port is in use if lsof has output
-        resolve(true);
-      } else if (error) {
-        // Handle potential errors (e.g., lsof command not found)
-        reject(new Error(`lsof error: ${error}`));
-      } else {
-        // Port is not in use
-        resolve(false);
-      }
-    });
-  });
-}
 
 module.exports = {
   '@disabled': true,
@@ -89,17 +61,15 @@ module.exports = {
 
   after: function (browser) {
     browser.perform((done) => {
-      isPortInUse(65520).then((inUse) => {
-        try {
-          console.log('remixd pid', remixd.pid);
-          treeKill(remixd.pid, 'SIGKILL', (err) => {
-            console.log('remixd killed', err)
-          })
-          console.log('Service disconnected successfully.');
-        } catch (error) {
-          console.error('Failed to disconnect service:', error);
-        }
-      })
+      try {
+        console.log('remixd pid', remixd.pid);
+        treeKill(remixd.pid, 'SIGKILL', (err) => {
+          console.log('remixd killed', err)
+        })
+        console.log('Service disconnected successfully.');
+      } catch (error) {
+        console.error('Failed to disconnect service:', error);
+      }
       done()
     })
   },
@@ -367,7 +337,7 @@ function runTests(browser: NightwatchBrowser, done: any) {
     .waitForElementVisible('[data-path="folder1/contract_' + browserName + '.sol"]')
     .click('[data-path="folder1/contract_' + browserName + '.sol"]') // rename a file and check
     .pause(1000)
-    .saveScreenshot('./reports/screenshots/remixd1.png')
+
     .renamePath('folder1/contract_' + browserName + '.sol', 'renamed_contract_' + browserName, 'folder1/renamed_contract_' + browserName + '.sol')
     .pause(1000)
     .removeFile('folder1/contract_' + browserName + '_toremove.sol', 'localhost')

From f7b22c4c6435843a30e40bad52bc00046b01fbc3 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 18:50:49 +0200
Subject: [PATCH 15/67] reset head

---
 apps/remix-ide-e2e/src/tests/ballot.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index d97a362ea3..c9fb7c27bc 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -23,7 +23,7 @@ module.exports = {
   'Deploy Ballot #group1': function (browser: NightwatchBrowser) {
     browser
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
-      .clickLaunchIcon('solidity2')
+      .clickLaunchIcon('solidity')
       .testContracts('Untitled.sol', sources[0]['Untitled.sol'], ['Ballot'])
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c')

From 697bbf9af652a2935034cd5653272e183111dc64 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 18:50:55 +0200
Subject: [PATCH 16/67] reset head

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 33 +++++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 1b71322931..6cc9018710 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -2,10 +2,9 @@
 import { NightwatchBrowser } from 'nightwatch'
 import init from '../helpers/init'
 import { join } from 'path'
-import { ChildProcess, spawn } from 'child_process'
+import { ChildProcess, exec, spawn } from 'child_process'
 import { homedir } from 'os'
-
-import kill from 'tree-kill'
+import fs from 'fs'
 import treeKill from 'tree-kill'
 
 let remixd: ChildProcess
@@ -70,6 +69,11 @@ module.exports = {
       } catch (error) {
         console.error('Failed to disconnect service:', error);
       }
+      try {
+        resetGitToHead()
+      } catch (error) {
+        console.error('Failed to restore git changes:', error);
+      }
       done()
     })
   },
@@ -593,3 +597,26 @@ async function installSlither(): Promise<void> {
     console.log(e)
   }
 }
+
+
+function resetGitToHead() {
+  if (process.env.CIRCLECI) {
+    console.log("Running on CircleCI, resetting Git to HEAD...");
+  } else {
+    console.log("Not running on CircleCI, skipping Git reset.");
+    return
+  }
+  const command = 'git reset --hard HEAD && git clean -fd';
+
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`Error executing command: ${command}\n${error.message}`);
+      return;
+    }
+    if (stderr) {
+      console.error(`Error output from command: ${command}\n${stderr}`);
+      return;
+    }
+    console.log(`Git reset to HEAD successfully.\n${stdout}`);
+  });
+}
\ No newline at end of file

From 4f4c16c12c120b172d9d00e6f739b5c9721b7293 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 19:10:49 +0200
Subject: [PATCH 17/67] end session

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 6cc9018710..8b327af6f3 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -87,6 +87,8 @@ module.exports = {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))
       } catch (err) {
         console.error(err)
+        // end the session 
+        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)

From afb552ff9a39d544a56998f51792db3cf395e0fa Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 19:30:09 +0200
Subject: [PATCH 18/67] add fails

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 37 +++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 8b327af6f3..addbfa9294 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -4,7 +4,6 @@ import init from '../helpers/init'
 import { join } from 'path'
 import { ChildProcess, exec, spawn } from 'child_process'
 import { homedir } from 'os'
-import fs from 'fs'
 import treeKill from 'tree-kill'
 
 let remixd: ChildProcess
@@ -81,12 +80,14 @@ module.exports = {
   '@sources': function () {
     return sources
   },
-  'run Remixd tests #group1 #flaky': function (browser) {
+  'run Remixd tests #group1 #flaky': function (browser: NightwatchBrowser) {
     browser.perform(async (done) => {
       try {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))
       } catch (err) {
         console.error(err)
+        // fail
+        browser.assert.fail('Failed to start remixd')
         // end the session 
         browser.end()
       }
@@ -103,7 +104,13 @@ module.exports = {
       remix try to resolve it against the node_modules and installed_contracts folder.
     */
     browser.perform(async (done) => {
+      try{
       remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))
+      } catch (err) {
+        console.error(err)
+        browser.assert.fail('Failed to start remixd')
+        browser.end()
+      }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
     })
@@ -114,7 +121,13 @@ module.exports = {
   },
   'Import from node_modules and reference a github import #group3': function (browser) {
     browser.perform(async (done) => {
+      try{
       remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))
+      } catch (err) {
+        console.error(err)
+        browser.assert.fail('Failed to start remixd')
+        browser.end()
+      }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
     })
@@ -134,7 +147,13 @@ module.exports = {
   'Should listen on compilation result from hardhat #group4': function (browser: NightwatchBrowser) {
 
     browser.perform(async (done) => {
+      try{
       remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide/hardhat-boilerplate'))
+      } catch (err) {
+        console.error(err)
+        browser.assert.fail('Failed to start remixd')
+        browser.end()
+      }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
     })
@@ -205,7 +224,13 @@ module.exports = {
 
     browser.perform(async (done) => {
       console.log('working directory', homedir() + '/foundry_tmp/hello_foundry')
+      try{
       remixd = await spawnRemixd(join(homedir(), '/foundry_tmp/hello_foundry'))
+      } catch (err) {
+        console.error(err)
+        browser.assert.fail('Failed to start remixd')
+        browser.end()
+      }
       connectRemixd(browser, done)
     })
       .perform(async (done) => {
@@ -266,7 +291,13 @@ module.exports = {
   'Should disable git when running remixd #group9': function (browser: NightwatchBrowser) {
 
     browser.perform(async (done) => {
+      try{
       remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts/hardhat'))
+      } catch (err) {
+        console.error(err)
+        browser.assert.fail('Failed to start remixd')
+        browser.end()
+      }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
     })
@@ -298,6 +329,8 @@ module.exports = {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))
       } catch (err) {
         console.error(err)
+        browser.assert.fail('Failed to start remixd')
+        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)

From 4df544954422f4303a08e8c9ea62c24dd707cf11 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 19:31:39 +0200
Subject: [PATCH 19/67] fail

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index addbfa9294..7bd1036781 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -88,8 +88,6 @@ module.exports = {
         console.error(err)
         // fail
         browser.assert.fail('Failed to start remixd')
-        // end the session 
-        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
@@ -109,7 +107,6 @@ module.exports = {
       } catch (err) {
         console.error(err)
         browser.assert.fail('Failed to start remixd')
-        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
@@ -126,7 +123,6 @@ module.exports = {
       } catch (err) {
         console.error(err)
         browser.assert.fail('Failed to start remixd')
-        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
@@ -152,7 +148,6 @@ module.exports = {
       } catch (err) {
         console.error(err)
         browser.assert.fail('Failed to start remixd')
-        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
@@ -229,7 +224,6 @@ module.exports = {
       } catch (err) {
         console.error(err)
         browser.assert.fail('Failed to start remixd')
-        browser.end()
       }
       connectRemixd(browser, done)
     })
@@ -296,7 +290,6 @@ module.exports = {
       } catch (err) {
         console.error(err)
         browser.assert.fail('Failed to start remixd')
-        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)
@@ -330,7 +323,6 @@ module.exports = {
       } catch (err) {
         console.error(err)
         browser.assert.fail('Failed to start remixd')
-        browser.end()
       }
       console.log('working directory', process.cwd())
       connectRemixd(browser, done)

From bee420d8907951e9ab2c1a8ee734fbeb71cda7ea Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 19:32:20 +0200
Subject: [PATCH 20/67] rm fn

---
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 7bd1036781..12740b413d 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -440,27 +440,6 @@ async function spawnRemixd(path: string): Promise<ChildProcess> {
   })
 }
 
-function killProcess(pid, signal = 'SIGKILL') {
-  return new Promise<void>((resolve, reject) => {
-    const kill = spawn('kill', ['-s', signal, pid]);
-
-    kill.on('close', (code) => {
-      if (code === 0) {
-        console.log(`Successfully killed process with PID: ${pid}`);
-        resolve();
-      } else {
-        console.error(`Failed to kill process with PID: ${pid}. Exit code: ${code}`);
-        reject(new Error(`kill process failed with code ${code}`));
-      }
-    });
-
-    kill.on('error', (err) => {
-      console.error(`Error spawning kill process: ${err.message}`);
-      reject(err);
-    });
-  });
-}
-
 function connectRemixd(browser: NightwatchBrowser, done: any) {
   const browserName = browser.options.desiredCapabilities.browserName
   if (browserName === 'safari' || browserName === 'internet explorer') {

From 1a2b0c747e120d3452ced1a71b580ec8cd900519 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 20:23:09 +0200
Subject: [PATCH 21/67] undo flaky

---
 .circleci/config.yml                        | 2 +-
 apps/remix-ide-e2e/src/tests/remixd.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a95ed97b6b..d5a065c41d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: true
+    default: false
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
   win: circleci/windows@5.0
diff --git a/apps/remix-ide-e2e/src/tests/remixd.test.ts b/apps/remix-ide-e2e/src/tests/remixd.test.ts
index 12740b413d..31dc3c686b 100644
--- a/apps/remix-ide-e2e/src/tests/remixd.test.ts
+++ b/apps/remix-ide-e2e/src/tests/remixd.test.ts
@@ -80,7 +80,7 @@ module.exports = {
   '@sources': function () {
     return sources
   },
-  'run Remixd tests #group1 #flaky': function (browser: NightwatchBrowser) {
+  'run Remixd tests #group1': function (browser: NightwatchBrowser) {
     browser.perform(async (done) => {
       try {
         remixd = await spawnRemixd(join(process.cwd(), '/apps/remix-ide', '/contracts'))

From 2061210ee83c8bb961041aa1cebc83700e7489c3 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 21 Aug 2024 20:23:40 +0200
Subject: [PATCH 22/67] restore flaky

---
 apps/remix-ide/ci/flaky.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/ci/flaky.sh b/apps/remix-ide/ci/flaky.sh
index 69c7bbe734..5373daec0b 100755
--- a/apps/remix-ide/ci/flaky.sh
+++ b/apps/remix-ide/ci/flaky.sh
@@ -23,7 +23,7 @@ yarn run serve:production &
 sleep 5
 
 for TESTFILE in $TESTFILES; do
-    npx nightwatch --config dist/apps/remix-ide-e2e/nightwatch-${1}.js $TESTFILE --env=$1  || npx nightwatch --config dist/apps/remix-ide-e2e/nightwatch-${1}.js $TESTFILE --env=$1  || TEST_EXITCODE=1
+    npx nightwatch --config dist/apps/remix-ide-e2e/nightwatch-${1}.js $TESTFILE --env=$1  || TEST_EXITCODE=1
 done
 
 echo "$TEST_EXITCODE"

From 18ccd758c5e716968b9cd13c1cfabefb7f824741 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 14 Aug 2024 14:56:15 +0200
Subject: [PATCH 23/67] persist providers

---
 apps/remix-ide-e2e/src/commands/pinGrid.ts    | 19 ++++++++---
 .../src/commands/switchEnvironment.ts         | 34 +++++++++++++++----
 apps/remix-ide-e2e/src/tests/grid.test.ts     | 20 +++++++++++
 apps/remix-ide-e2e/src/tests/plugin_api.ts    |  8 +++++
 apps/remix-ide/src/blockchain/blockchain.tsx  | 18 +++++++++-
 .../src/lib/components/environment.tsx        |  2 +-
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx  |  2 +-
 7 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/pinGrid.ts b/apps/remix-ide-e2e/src/commands/pinGrid.ts
index 6c82922960..fb902006a9 100644
--- a/apps/remix-ide-e2e/src/commands/pinGrid.ts
+++ b/apps/remix-ide-e2e/src/commands/pinGrid.ts
@@ -3,11 +3,20 @@ import EventEmitter from 'events'
 
 class pinGrid extends EventEmitter {
   command (this: NightwatchBrowser, provider: string, status: boolean): NightwatchBrowser {
-    this.api.useCss().waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
-    .click('[data-id="settingsSelectEnvOptions"] button')
-    .waitForElementVisible(`[data-id="dropdown-item-another-chain"]`)
-    .click(`[data-id="dropdown-item-another-chain"]`)
-    .waitForElementVisible(`[data-id="${provider}-${status ? 'unpinned' : 'pinned'}"]`)
+    this.api.useCss()
+    .perform((done) => {
+      // check if the providers plugin is loaded.
+      this.api.isVisible({ selector: '[data-id="remixUIGSDeploy using a Browser Extension."]', suppressNotFoundErrors: true}, (result) => {
+        if (!result.value) {
+          this.api.waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
+            .click('[data-id="settingsSelectEnvOptions"] button')
+            .waitForElementVisible(`[data-id="dropdown-item-another-chain"]`)
+            .click(`[data-id="dropdown-item-another-chain"]`)
+            .perform(() => done())
+        } else done()
+      })
+    })    
+    .waitForElementVisible(`[data-id="${provider}-${status ? 'unpinned' : 'pinned'}"]`, 60000)
     .click(`[data-id="${provider}-${status ? 'unpinned' : 'pinned'}"]`)
     .perform((done) => {
       done()
diff --git a/apps/remix-ide-e2e/src/commands/switchEnvironment.ts b/apps/remix-ide-e2e/src/commands/switchEnvironment.ts
index a2fc655cac..bd58e3121c 100644
--- a/apps/remix-ide-e2e/src/commands/switchEnvironment.ts
+++ b/apps/remix-ide-e2e/src/commands/switchEnvironment.ts
@@ -4,13 +4,35 @@ import EventEmitter from 'events'
 class switchEnvironment extends EventEmitter {
   command (this: NightwatchBrowser, provider: string): NightwatchBrowser {
     this.api.useCss().waitForElementVisible('[data-id="settingsSelectEnvOptions"]')
-    .click('[data-id="settingsSelectEnvOptions"] button')
-    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
-    .click(`[data-id="dropdown-item-${provider}"]`)
     .perform((done) => {
-      done()
-      this.emit('complete')
-    })
+      this.api.isPresent({ selector: `[data-id="selected-provider-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000}, (result) => {
+        if (result.value) {
+          done()
+        } else {
+          browser.perform(() => {
+            this.api
+              .click('[data-id="settingsSelectEnvOptions"] button') // open dropdown
+              .isPresent({ selector: `[data-id="dropdown-item-${provider}"]`, suppressNotFoundErrors: true, timeout: 5000}, (result) => {
+                console.log(result)
+                this.api.click('[data-id="settingsSelectEnvOptions"] button') // close dropdown
+                if (!result.value) {
+                  this.api.pinGrid(provider, true)
+                    .click('[data-id="settingsSelectEnvOptions"] button')
+                    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
+                    .click(`[data-id="dropdown-item-${provider}"]`)
+                    .perform(() => done())
+                } else {
+                  browser.click('[data-id="settingsSelectEnvOptions"] button')
+                    .waitForElementVisible(`[data-id="dropdown-item-${provider}"]`)
+                    .click(`[data-id="dropdown-item-${provider}"]`)
+                    .perform(() => done())
+                }
+              })
+            })     
+        }
+      })
+    }).perform(() => this.emit('complete'))      
+    
     return this
   }
 }
diff --git a/apps/remix-ide-e2e/src/tests/grid.test.ts b/apps/remix-ide-e2e/src/tests/grid.test.ts
index 5da7379328..73713d0dcd 100644
--- a/apps/remix-ide-e2e/src/tests/grid.test.ts
+++ b/apps/remix-ide-e2e/src/tests/grid.test.ts
@@ -32,5 +32,25 @@ module.exports = {
             .click('[data-id="settingsSelectEnvOptions"] button')
             .waitForElementNotPresent(`[data-id="dropdown-item-vm-sepolia-fork"]`)
             .click('[data-id="settingsSelectEnvOptions"] button') // close the dropdown
+    },
+    'remember pin upon reload': function (browser: NightwatchBrowser) {
+        browser
+            .pinGrid('vm-paris', true)
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementPresent(`[data-id="dropdown-item-vm-paris"]`)
+            .refreshPage()
+            .waitForElementVisible('[data-id="treeViewLitreeViewItemcontracts"]') // wait loaded
+            .clickLaunchIcon('udapp')
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementPresent(`[data-id="dropdown-item-vm-paris"]`)
+            .click('[data-id="settingsSelectEnvOptions"] button') // close the dropdown
+            .pinGrid('vm-paris', false)
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementNotPresent(`[data-id="dropdown-item-vm-paris"]`)
+            .refreshPage()
+            .waitForElementVisible('[data-id="treeViewLitreeViewItemcontracts"]') // wait loaded
+            .clickLaunchIcon('udapp')
+            .click('[data-id="settingsSelectEnvOptions"] button') // open the dropdown
+            .waitForElementNotPresent(`[data-id="dropdown-item-vm-paris"]`)
     }
 }
\ No newline at end of file
diff --git a/apps/remix-ide-e2e/src/tests/plugin_api.ts b/apps/remix-ide-e2e/src/tests/plugin_api.ts
index b42f082b3e..801e7c4e6d 100644
--- a/apps/remix-ide-e2e/src/tests/plugin_api.ts
+++ b/apps/remix-ide-e2e/src/tests/plugin_api.ts
@@ -179,6 +179,14 @@ module.exports = {
   },
 
   'Should select another provider #group1': async function (browser: NightwatchBrowser) {
+    await browser
+      .frameParent()
+      .useCss()
+      .clickLaunchIcon('udapp')
+      .pinGrid('vm-berlin', true)
+      .clickLaunchIcon('localPlugin')
+      .useXpath()
+      .frame(0)
     await clickAndCheckLog(browser, 'udapp:setEnvironmentMode', null, null, { context: 'vm-berlin' })
     await browser
       .frameParent()
diff --git a/apps/remix-ide/src/blockchain/blockchain.tsx b/apps/remix-ide/src/blockchain/blockchain.tsx
index 00a64273f0..66f3baafc1 100644
--- a/apps/remix-ide/src/blockchain/blockchain.tsx
+++ b/apps/remix-ide/src/blockchain/blockchain.tsx
@@ -80,6 +80,7 @@ export class Blockchain extends Plugin {
   providers: {[key: string]: VMProvider | InjectedProvider | NodeProvider}
   transactionContextAPI: TransactionContextAPI
   registeredPluginEvents: string[]
+  defaultPinnedProviders: string[]
   pinnedProviders: string[]
 
   // NOTE: the config object will need to be refactored out in remix-lib
@@ -112,7 +113,8 @@ export class Blockchain extends Plugin {
     this.networkcallid = 0
     this.networkStatus = { network: { name: ' - ', id: ' - ' } }
     this.registeredPluginEvents = []
-    this.pinnedProviders = ['vm-cancun', 'vm-shanghai', 'vm-mainnet-fork', 'vm-london', 'vm-berlin', 'vm-paris', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'ganache-provider', 'hardhat-provider', 'foundry-provider']
+    this.defaultPinnedProviders = ['vm-cancun', 'vm-mainnet-fork', 'walletconnect', 'injected-MetaMask', 'basic-http-provider', 'hardhat-provider', 'foundry-provider']
+    this.pinnedProviders = []
     this.setupEvents()
     this.setupProviders()
   }
@@ -139,11 +141,25 @@ export class Blockchain extends Plugin {
 
     this.on('environmentExplorer', 'providerPinned', (name, provider) => {
       this.emit('shouldAddProvidertoUdapp', name, provider)
+      this.pinnedProviders.push(name)
+      this.call('config', 'setAppParameter', 'settings/pinned-providers', JSON.stringify(this.pinnedProviders))
     })
 
     this.on('environmentExplorer', 'providerUnpinned', (name, provider) => {
       this.emit('shouldRemoveProviderFromUdapp', name, provider)
+      const index = this.pinnedProviders.indexOf(name)
+      this.pinnedProviders.splice(index, 1)
+      this.call('config', 'setAppParameter', 'settings/pinned-providers', JSON.stringify(this.pinnedProviders))
     })
+
+    this.call('config', 'getAppParameter', 'settings/pinned-providers').then((providers) => {
+      if (!providers) {
+        this.call('config', 'setAppParameter', 'settings/pinned-providers', JSON.stringify(this.defaultPinnedProviders))
+        this.pinnedProviders = this.defaultPinnedProviders
+      } else {
+        this.pinnedProviders = JSON.parse(providers)
+      }
+    }).catch((error) => { console.log(error) })
   }
 
   onDeactivation() {
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 95fbf0afa4..d499b9c917 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -39,7 +39,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
           </a>
         </CustomTooltip>
       </label>
-      <div className="udapp_environment">
+      <div className="udapp_environment" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
         <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
           <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
             {isL2(currentProvider && currentProvider.displayName)}
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index f5c3a668c0..311b4c166a 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -320,7 +320,7 @@ export const TabsUI = (props: TabsUIProps) => {
         >
           <TabList className="d-flex flex-row align-items-center">
             {props.tabs.map((tab, i) => (
-              <Tab className="" key={tab.name}>
+              <Tab className="" key={tab.name} data-id={tab.id}>
                 {renderTab(tab, i)}
               </Tab>
             ))}

From 9a8e4d70aaec04788835526109da06bcada32f81 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 08:50:37 +0200
Subject: [PATCH 24/67] set flaky test

---
 .circleci/config.yml                            | 2 +-
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d5a065c41d..a95ed97b6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: false
+    default: true
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
   win: circleci/windows@5.0
diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index fc0ec93f98..d6fabe17d8 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -238,7 +238,7 @@ module.exports = {
             .waitForElementVisible('*[data-id="branches-current-branch-testbranch"]')
             .pause(1000)
     },
-    'check if the branch is in the filePanel #group2': function (browser: NightwatchBrowser) {
+    'check if the branch is in the filePanel #flaky #group2': function (browser: NightwatchBrowser) {
         browser
             .clickLaunchIcon('filePanel')
             .click('[data-id="workspaceGitBranchesDropdown"]')

From 441c98138c57ea43a788294c8addba95e673bbde Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 09:10:43 +0200
Subject: [PATCH 25/67] save screenshots

---
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index d6fabe17d8..105f6ea961 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -241,7 +241,10 @@ module.exports = {
     'check if the branch is in the filePanel #flaky #group2': function (browser: NightwatchBrowser) {
         browser
             .clickLaunchIcon('filePanel')
+            .saveScreenshot('./reports/screenshots/dgit_local.test.png')
+            .waitForElementVisible('*[data-id="workspaceGitBranchesDropdown"]')
             .click('[data-id="workspaceGitBranchesDropdown"]')
+            .saveScreenshot('./reports/screenshots/dgit_local_2.test.png')
             .expect.element('[data-id="workspaceGit-testbranch"]').text.to.contain('✓ ')
     },
     'publish the branch #group2': function (browser: NightwatchBrowser) {

From 4f6251fdb6c7fc9454c86417350a6a9f033ab800 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 09:35:48 +0200
Subject: [PATCH 26/67] wait for element

---
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index 105f6ea961..7cc791228d 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -317,6 +317,10 @@ module.exports = {
     },
     'switch back to master #group2': function (browser: NightwatchBrowser) {
         browser
+            .waitForElementVisible({
+                selector: "//*[@data-id='branches-panel-content']//*[@data-id='branches-toggle-branch-master']",
+                locateStrategy: 'xpath',
+            })
             .click({
                 selector: "//*[@data-id='branches-panel-content']//*[@data-id='branches-toggle-branch-master']",
                 locateStrategy: 'xpath',

From ab218260087e800eee50632f7007540633d47b07 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 09:45:58 +0200
Subject: [PATCH 27/67] timeout

---
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index 7cc791228d..27c30a5275 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -328,6 +328,7 @@ module.exports = {
             .waitForElementVisible({
                 selector: "//*[@data-id='branches-panel-content']//*[@data-id='branches-toggle-current-branch-master']",
                 locateStrategy: 'xpath',
+                timeout: 60000
             })
     },
     'check if test file is gone #group2': function (browser: NightwatchBrowser) {

From bf5982e979e3a3acad636f08680764353ef08e1b Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 10:05:10 +0200
Subject: [PATCH 28/67] rm screens

---
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index 27c30a5275..984d17113f 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -241,10 +241,8 @@ module.exports = {
     'check if the branch is in the filePanel #flaky #group2': function (browser: NightwatchBrowser) {
         browser
             .clickLaunchIcon('filePanel')
-            .saveScreenshot('./reports/screenshots/dgit_local.test.png')
             .waitForElementVisible('*[data-id="workspaceGitBranchesDropdown"]')
             .click('[data-id="workspaceGitBranchesDropdown"]')
-            .saveScreenshot('./reports/screenshots/dgit_local_2.test.png')
             .expect.element('[data-id="workspaceGit-testbranch"]').text.to.contain('✓ ')
     },
     'publish the branch #group2': function (browser: NightwatchBrowser) {

From cded07a83f7b38e2fba5a0479f0c7033b342e43b Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 10:14:23 +0200
Subject: [PATCH 29/67] add a pause

---
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index 984d17113f..5c51074217 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -242,6 +242,7 @@ module.exports = {
         browser
             .clickLaunchIcon('filePanel')
             .waitForElementVisible('*[data-id="workspaceGitBranchesDropdown"]')
+            .pause(1000)
             .click('[data-id="workspaceGitBranchesDropdown"]')
             .expect.element('[data-id="workspaceGit-testbranch"]').text.to.contain('✓ ')
     },

From d82978ed032521c0f2dfdba1f69a9aa7eaf13d4d Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 10:24:53 +0200
Subject: [PATCH 30/67] run nx

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 7db9ea7eb2..ac30557b8c 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "serve:hot": "nx serve remix-ide --configuration=hot",
     "serve:plugin": "nx serve ${npm_config_plugin} --configuration=development",
     "build:plugin": "NODE_ENV=production nx build ${npm_config_plugin} --configuration=production --skip-nx-cache",
-    "build": "nx build",
+    "build": "nx build --parallel --maxParallel=6",
     "test": "nx test",
     "lint": "nx lint",
     "affected:apps": "nx affected:apps",
@@ -72,7 +72,7 @@
     "downloadsolc_assets_e2e": "node ./apps/remix-ide/ci/download_e2e_assets.js",
     "make-mock-compiler": "node apps/remix-ide/ci/makeMockCompiler.js",
     "minify": "uglifyjs --in-source-map inline --source-map-inline -c warnings=false",
-    "build:production": "NODE_ENV=production nx build remix-ide --configuration=production --skip-nx-cache",
+    "build:production": "NODE_ENV=production nx build remix-ide --configuration=production --skip-nx-cache --parallel --maxParallel=6",
     "serve:production": "npx http-server ./dist/apps/remix-ide",
     "install_webdriver": "bash ./apps/remix-ide-e2e/install-webdriver.sh",
     "select_test": "bash apps/remix-ide-e2e/src/select_tests.sh",

From 6ffcbc696b8371813c68251d8baecb505213cbe6 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 10:29:51 +0200
Subject: [PATCH 31/67] restore pack

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ac30557b8c..7db9ea7eb2 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "serve:hot": "nx serve remix-ide --configuration=hot",
     "serve:plugin": "nx serve ${npm_config_plugin} --configuration=development",
     "build:plugin": "NODE_ENV=production nx build ${npm_config_plugin} --configuration=production --skip-nx-cache",
-    "build": "nx build --parallel --maxParallel=6",
+    "build": "nx build",
     "test": "nx test",
     "lint": "nx lint",
     "affected:apps": "nx affected:apps",
@@ -72,7 +72,7 @@
     "downloadsolc_assets_e2e": "node ./apps/remix-ide/ci/download_e2e_assets.js",
     "make-mock-compiler": "node apps/remix-ide/ci/makeMockCompiler.js",
     "minify": "uglifyjs --in-source-map inline --source-map-inline -c warnings=false",
-    "build:production": "NODE_ENV=production nx build remix-ide --configuration=production --skip-nx-cache --parallel --maxParallel=6",
+    "build:production": "NODE_ENV=production nx build remix-ide --configuration=production --skip-nx-cache",
     "serve:production": "npx http-server ./dist/apps/remix-ide",
     "install_webdriver": "bash ./apps/remix-ide-e2e/install-webdriver.sh",
     "select_test": "bash apps/remix-ide-e2e/src/select_tests.sh",

From f27c5a5cf4f8f1ad023bcbed634df786275d196e Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 11:10:08 +0200
Subject: [PATCH 32/67] add extra click

---
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index 5c51074217..5d618638ac 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -324,6 +324,13 @@ module.exports = {
                 selector: "//*[@data-id='branches-panel-content']//*[@data-id='branches-toggle-branch-master']",
                 locateStrategy: 'xpath',
             })
+            .pause(1000)
+            .click({
+                selector: "//*[@data-id='branches-panel-content']//*[@data-id='branches-toggle-branch-master']",
+                locateStrategy: 'xpath',
+                abortOnFailure: false,
+                suppressNotFoundErrors: true
+            })
             .waitForElementVisible({
                 selector: "//*[@data-id='branches-panel-content']//*[@data-id='branches-toggle-current-branch-master']",
                 locateStrategy: 'xpath',
@@ -332,7 +339,7 @@ module.exports = {
     },
     'check if test file is gone #group2': function (browser: NightwatchBrowser) {
         browser
-            .pause()
+            .pause(2000)
             .clickLaunchIcon('filePanel')
             .waitForElementNotPresent('*[data-id="treeViewLitreeViewItemtest.txt"]')
     },

From ac488b70ec13310fd467ff2cb663b5eae16b931c Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 12:17:44 +0200
Subject: [PATCH 33/67] turn off flaky

---
 .circleci/config.yml                            | 2 +-
 apps/remix-ide-e2e/src/tests/dgit_local.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a95ed97b6b..d5a065c41d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: true
+    default: false
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
   win: circleci/windows@5.0
diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index 5d618638ac..b6ee642a27 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -238,7 +238,7 @@ module.exports = {
             .waitForElementVisible('*[data-id="branches-current-branch-testbranch"]')
             .pause(1000)
     },
-    'check if the branch is in the filePanel #flaky #group2': function (browser: NightwatchBrowser) {
+    'check if the branch is in the filePanel #group2': function (browser: NightwatchBrowser) {
         browser
             .clickLaunchIcon('filePanel')
             .waitForElementVisible('*[data-id="workspaceGitBranchesDropdown"]')

From 4b10b3e4bd269d8b79b2bf99f016c16376389634 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 12:26:26 +0200
Subject: [PATCH 34/67] optimize zip

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d5a065c41d..ce6ee8f3bf 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -45,7 +45,7 @@ jobs:
           paths:
             - dist/apps/remix-ide/assets/js/soljson
       
-      - run: mkdir persist && zip -0 -r persist/dist.zip dist
+      - run: mkdir persist && zip -4 -r persist/dist.zip dist
       - persist_to_workspace:
           root: .
           paths:

From b2b322c2b625319e4c632e210884d1a9d5f04983 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 12:33:59 +0200
Subject: [PATCH 35/67] zip increase

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ce6ee8f3bf..d7c1a030c0 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -45,7 +45,7 @@ jobs:
           paths:
             - dist/apps/remix-ide/assets/js/soljson
       
-      - run: mkdir persist && zip -4 -r persist/dist.zip dist
+      - run: mkdir persist && zip -5 -r persist/dist.zip dist
       - persist_to_workspace:
           root: .
           paths:

From 9a102dd68bc4fba0fd2960ecf94aeaa7c6df554d Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 12:53:18 +0200
Subject: [PATCH 36/67] use zst

---
 .circleci/config.yml | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d7c1a030c0..d5e3a00d94 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -45,7 +45,7 @@ jobs:
           paths:
             - dist/apps/remix-ide/assets/js/soljson
       
-      - run: mkdir persist && zip -5 -r persist/dist.zip dist
+      - run: mkdir persist && tar -cf - dist | zstd -5 -o persist/dist.tar.zst
       - persist_to_workspace:
           root: .
           paths:
@@ -360,7 +360,8 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: unzip ./persist/dist.zip
+      - run: zstd -d persist/dist.tar.zst -o persist/dist.tar
+      - run: tar -xf persist/dist.tar
       - run: yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules || yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules
       - run: mkdir node_modules/hardhat && wget https://unpkg.com/hardhat/console.sol -O node_modules/hardhat/console.sol
       - run: ls -la ./dist/apps/remix-ide/assets/js
@@ -416,7 +417,8 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: unzip ./persist/dist.zip
+      - run: zstd -d persist/dist.tar.zst -o persist/dist.tar
+      - run: tar -xf persist/dist.tar
       - run: unzip ./persist/plugin-<< parameters.plugin >>.zip
       - run: yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules || yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules
       - browser-tools/install-browser-tools:

From bde5886961f9b48dbb45533f8209fe3015a7aa25 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 12:57:46 +0200
Subject: [PATCH 37/67] install zstd

---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d5e3a00d94..b462a3969a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -34,7 +34,7 @@ jobs:
               NX_BIN_URL=http://127.0.0.1:8080/assets/js/soljson NX_WASM_URL=http://127.0.0.1:8080/assets/js/soljson NX_NPM_URL=http://127.0.0.1:9090/ yarn build
             fi
       - run: yarn run build:e2e
-      
+      - run: sudo apt install zstd
       - run: grep -ir "[0-9]+commit" apps/* libs/* --include \*.ts --include \*.tsx --include \*.json > soljson-versions.txt
       - restore_cache:
           keys:
@@ -44,7 +44,7 @@ jobs:
           key: soljson-v7-{{ checksum "soljson-versions.txt" }}
           paths:
             - dist/apps/remix-ide/assets/js/soljson
-      
+
       - run: mkdir persist && tar -cf - dist | zstd -5 -o persist/dist.tar.zst
       - persist_to_workspace:
           root: .

From 53b873feb1cac49f0bd36b047936a76c668f7533 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 13:00:50 +0200
Subject: [PATCH 38/67] install zstd

---
 .circleci/config.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index b462a3969a..83b22c12c1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -16,6 +16,7 @@ jobs:
       xlarge
     working_directory: ~/remix-project
     steps:
+      - run: sudo apt update&& sudo apt install zstd
       - checkout
       - restore_cache:
           keys:
@@ -34,7 +35,7 @@ jobs:
               NX_BIN_URL=http://127.0.0.1:8080/assets/js/soljson NX_WASM_URL=http://127.0.0.1:8080/assets/js/soljson NX_NPM_URL=http://127.0.0.1:9090/ yarn build
             fi
       - run: yarn run build:e2e
-      - run: sudo apt install zstd
+      
       - run: grep -ir "[0-9]+commit" apps/* libs/* --include \*.ts --include \*.tsx --include \*.json > soljson-versions.txt
       - restore_cache:
           keys:

From 53a84a0edd577fc061e211a48951aca35a19daa6 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 13:07:01 +0200
Subject: [PATCH 39/67] install zstd

---
 .circleci/config.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 83b22c12c1..a91bc450ae 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -16,7 +16,7 @@ jobs:
       xlarge
     working_directory: ~/remix-project
     steps:
-      - run: sudo apt update&& sudo apt install zstd
+      - run: sudo apt update && sudo apt install zstd
       - checkout
       - restore_cache:
           keys:
@@ -361,12 +361,13 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
+      - run: sudo apt update && sudo apt install python3-pip -y zstd
       - run: zstd -d persist/dist.tar.zst -o persist/dist.tar
       - run: tar -xf persist/dist.tar
       - run: yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules || yarn install --cwd ./apps/remix-ide-e2e --modules-folder ../../node_modules
       - run: mkdir node_modules/hardhat && wget https://unpkg.com/hardhat/console.sol -O node_modules/hardhat/console.sol
       - run: ls -la ./dist/apps/remix-ide/assets/js
-      - run: sudo apt update && sudo apt install python3-pip -y
+
       - when:
           condition:
               equal: [ "chrome", << parameters.browser >> ]

From f7474d94fdb9851abe378a6d3e25775340ade0e3 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 13:14:49 +0200
Subject: [PATCH 40/67] 6

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a91bc450ae..f941165205 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -46,7 +46,7 @@ jobs:
           paths:
             - dist/apps/remix-ide/assets/js/soljson
 
-      - run: mkdir persist && tar -cf - dist | zstd -5 -o persist/dist.tar.zst
+      - run: mkdir persist && tar -cf - dist | zstd -6 -o persist/dist.tar.zst
       - persist_to_workspace:
           root: .
           paths:

From 93fa561f8af4a65417b8f6d39fc2e73c3aba9e1f Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 13:19:48 +0200
Subject: [PATCH 41/67] 3

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f941165205..1389718f30 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -46,7 +46,7 @@ jobs:
           paths:
             - dist/apps/remix-ide/assets/js/soljson
 
-      - run: mkdir persist && tar -cf - dist | zstd -6 -o persist/dist.tar.zst
+      - run: mkdir persist && tar -cf - dist | zstd -3 -o persist/dist.tar.zst
       - persist_to_workspace:
           root: .
           paths:

From a6ad34592f9990c0bbf07586118a68624fcc18dc Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 13:28:17 +0200
Subject: [PATCH 42/67] 1

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1389718f30..387ee29962 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -46,7 +46,7 @@ jobs:
           paths:
             - dist/apps/remix-ide/assets/js/soljson
 
-      - run: mkdir persist && tar -cf - dist | zstd -3 -o persist/dist.tar.zst
+      - run: mkdir persist && tar -cf - dist | zstd -1 -o persist/dist.tar.zst
       - persist_to_workspace:
           root: .
           paths:

From 019b79125588ee121dc3fe8c87d1ca2492d7bd43 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 13:57:05 +0200
Subject: [PATCH 43/67] install zstd

---
 .circleci/config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 387ee29962..f0e6ede965 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -419,6 +419,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
+      - run: sudo apt update && sudo apt install zstd
       - run: zstd -d persist/dist.tar.zst -o persist/dist.tar
       - run: tar -xf persist/dist.tar
       - run: unzip ./persist/plugin-<< parameters.plugin >>.zip

From f8a9a99b90759ad7f1aac59a4dd14aa6560b3ef7 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 15:07:32 +0200
Subject: [PATCH 44/67] set to flaky

---
 .circleci/config.yml                              | 2 +-
 apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d5a065c41d..a95ed97b6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: false
+    default: true
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
   win: circleci/windows@5.0
diff --git a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
index 8af5c611d9..b3fb9ecd65 100644
--- a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
@@ -153,7 +153,7 @@ module.exports = {
       .waitForElementContainsText('[data-id="treeViewLi0"]', 'uint256: 10')
   },
 
-  'Should save state after running web3 script #group4': function (browser: NightwatchBrowser) {
+  'Should save state after running web3 script #flaky #group4': function (browser: NightwatchBrowser) {
     browser
       .clickLaunchIcon('settings')
       .waitForElementPresent('[data-id="settingsTabGenerateContractMetadataLabel"]')
@@ -163,16 +163,17 @@ module.exports = {
       .click('.remixui_compilerConfigSection')
       .setValue('#evmVersionSelector', 'london')
       .click('*[data-id="compilerContainerCompileBtn"]')
-      .pause(5000)
       .clickLaunchIcon('udapp')
       .switchEnvironment('vm-london')
       .clickLaunchIcon('filePanel')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts"]')
       .click('*[data-id="treeViewLitreeViewItemscripts"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]')
       .openFile('scripts/deploy_with_web3.ts')
       .click('[data-id="play-editor"]')
       .waitForElementPresent('[data-id="treeViewDivDraggableItem.states/vm-london/state.json"]')
       .click('[data-id="treeViewDivDraggableItem.states/vm-london/state.json"]')
-      .pause(100000)
+      .pause(1000)
       .getEditorValue((content) => {
         browser
           .assert.ok(content.includes('"latestBlockNumber": "0x1"'), 'State is saved')

From fbfda30afc6d09fac5973ab9ba6b0b72028cee0b Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 22 Aug 2024 15:19:59 +0200
Subject: [PATCH 45/67] unflaky

---
 .circleci/config.yml                              | 2 +-
 apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 20d48f5099..f0e6ede965 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: true
+    default: false
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
   win: circleci/windows@5.0
diff --git a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
index b3fb9ecd65..fc61df37b3 100644
--- a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
@@ -153,7 +153,7 @@ module.exports = {
       .waitForElementContainsText('[data-id="treeViewLi0"]', 'uint256: 10')
   },
 
-  'Should save state after running web3 script #flaky #group4': function (browser: NightwatchBrowser) {
+  'Should save state after running web3 script #group4': function (browser: NightwatchBrowser) {
     browser
       .clickLaunchIcon('settings')
       .waitForElementPresent('[data-id="settingsTabGenerateContractMetadataLabel"]')

From 3349be1f7fa5be82a4f012673a48262ccb9483c8 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 5 Jun 2024 15:15:40 +0800
Subject: [PATCH 46/67] add quick-dapp plugin

---
 apps/quick-dapp/.eslintrc                     |   3 +
 apps/quick-dapp/README.md                     | 134 ++++
 apps/quick-dapp/package.json                  |  11 +
 apps/quick-dapp/project.json                  |  70 ++
 apps/quick-dapp/src/App.css                   | 146 ++++
 apps/quick-dapp/src/App.tsx                   |  56 ++
 apps/quick-dapp/src/actions/index.ts          | 320 +++++++++
 apps/quick-dapp/src/assets/edit-dapp.png      | Bin 0 -> 13764 bytes
 .../src/components/ContractGUI/index.tsx      | 128 ++++
 .../src/components/CreateInstance/index.tsx   | 100 +++
 .../src/components/DeployPanel/index.tsx      | 258 +++++++
 .../src/components/DeployPanel/theme.tsx      | 157 +++++
 .../src/components/EditInstance/index.tsx     |  76 ++
 .../src/components/EditableText/index.tsx     |  76 ++
 .../src/components/LoadingScreen/index.tsx    |  31 +
 .../components/Container/Container.tsx        |  69 ++
 .../components/Container/index.ts             |   2 +
 .../components/Item/Item.tsx                  | 120 ++++
 .../Item/components/Action/Action.tsx         |  31 +
 .../Item/components/Action/index.ts           |   2 +
 .../Item/components/Handle/Handle.tsx         |  20 +
 .../Item/components/Handle/index.ts           |   1 +
 .../Item/components/Remove/Remove.tsx         |  19 +
 .../Item/components/Remove/index.ts           |   1 +
 .../components/Item/components/index.ts       |   3 +
 .../components/Item/index.ts                  |   2 +
 .../MultipleContainers/components/index.ts    |   3 +
 .../components/MultipleContainers/index.tsx   | 653 ++++++++++++++++++
 .../multipleContainersKeyboardCoordinates.ts  | 114 +++
 apps/quick-dapp/src/contexts/index.ts         |   3 +
 apps/quick-dapp/src/index.css                 |  13 +
 apps/quick-dapp/src/index.html                |  16 +
 apps/quick-dapp/src/main.tsx                  |   9 +
 apps/quick-dapp/src/polyfills.ts              |   7 +
 apps/quick-dapp/src/profile.json              |  19 +
 apps/quick-dapp/src/reducers/state.ts         |  33 +
 apps/quick-dapp/src/remix-client.ts           |  32 +
 apps/quick-dapp/tsconfig.app.json             |  23 +
 apps/quick-dapp/tsconfig.json                 |  16 +
 apps/quick-dapp/webpack.config.js             |  90 +++
 apps/quick-dapp/yarn.lock                     |  70 ++
 apps/remix-ide/project.json                   |   2 +-
 .../src/assets/img/quickDappLogo.webp         | Bin 0 -> 3474 bytes
 apps/remix-ide/src/remixAppManager.js         |   2 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |   2 +-
 45 files changed, 2940 insertions(+), 3 deletions(-)
 create mode 100644 apps/quick-dapp/.eslintrc
 create mode 100644 apps/quick-dapp/README.md
 create mode 100644 apps/quick-dapp/package.json
 create mode 100644 apps/quick-dapp/project.json
 create mode 100644 apps/quick-dapp/src/App.css
 create mode 100644 apps/quick-dapp/src/App.tsx
 create mode 100644 apps/quick-dapp/src/actions/index.ts
 create mode 100644 apps/quick-dapp/src/assets/edit-dapp.png
 create mode 100644 apps/quick-dapp/src/components/ContractGUI/index.tsx
 create mode 100644 apps/quick-dapp/src/components/CreateInstance/index.tsx
 create mode 100644 apps/quick-dapp/src/components/DeployPanel/index.tsx
 create mode 100644 apps/quick-dapp/src/components/DeployPanel/theme.tsx
 create mode 100644 apps/quick-dapp/src/components/EditInstance/index.tsx
 create mode 100644 apps/quick-dapp/src/components/EditableText/index.tsx
 create mode 100644 apps/quick-dapp/src/components/LoadingScreen/index.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Container/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/index.ts
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/index.tsx
 create mode 100644 apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts
 create mode 100644 apps/quick-dapp/src/contexts/index.ts
 create mode 100644 apps/quick-dapp/src/index.css
 create mode 100644 apps/quick-dapp/src/index.html
 create mode 100644 apps/quick-dapp/src/main.tsx
 create mode 100644 apps/quick-dapp/src/polyfills.ts
 create mode 100644 apps/quick-dapp/src/profile.json
 create mode 100644 apps/quick-dapp/src/reducers/state.ts
 create mode 100644 apps/quick-dapp/src/remix-client.ts
 create mode 100644 apps/quick-dapp/tsconfig.app.json
 create mode 100644 apps/quick-dapp/tsconfig.json
 create mode 100644 apps/quick-dapp/webpack.config.js
 create mode 100644 apps/quick-dapp/yarn.lock
 create mode 100644 apps/remix-ide/src/assets/img/quickDappLogo.webp

diff --git a/apps/quick-dapp/.eslintrc b/apps/quick-dapp/.eslintrc
new file mode 100644
index 0000000000..2d85f9fa66
--- /dev/null
+++ b/apps/quick-dapp/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../../.eslintrc.json",
+}
\ No newline at end of file
diff --git a/apps/quick-dapp/README.md b/apps/quick-dapp/README.md
new file mode 100644
index 0000000000..ff8a5ce950
--- /dev/null
+++ b/apps/quick-dapp/README.md
@@ -0,0 +1,134 @@
+# Remix LearnEth Plugin
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run serve:plugin --plugin=learneth`
+
+Runs the app in the development mode.\
+Open [http://localhost:2024](http://localhost:2024) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm run build:plugin --plugin=learneth`
+
+Builds the app for production to the `dist/apps/learneth` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+## Loading the plugin in remix
+
+When testing with localhost you should use the HTTP version of either REMIX or REMIX ALPHA. Click on the plugin manager icon and
+add the plugin 'Connect to a local plugin'. Your plugin will be at http://localhost:2024/.
+
+## Setting up the REMIX IDE for working with the plugin
+
+The plugin only works when a compiler environment is loaded as well, for example on the home screen of the IDE you select 'Solidity' or 'Vyper'. Without this the plugin
+cannot compile and test files in the workshops.
+
+## Setting up your Github workshops repo
+
+You can create your own workshops that can be imported in the plugin.
+When importing a github repo the plugin will look for a directory structure describing the workshops.
+For example: https://github.com/ethereum/remix-workshops
+
+### Root directories
+
+Root directories are individual workshops, the name used will be the name of the workshop unless you override this with the name property in the config.yml.
+
+### README.md
+
+The readme in each directory contains an explanation of what the workshop is about. If an additional summary property is provided in the config.yml that will be used in the overview section of the plugin.
+
+### config.yml
+
+This config file contains metadata describing some properties of your workshop, for example
+
+```
+---
+id: someid
+name: my workshop name
+summary: something about this workshop
+level: 4
+tags:
+  - solidity
+  - beginner
+```
+
+Level: a level of difficulty indicator ( 1 - 5 )
+
+Tags: an array of tags
+
+id: this is used by the system to let REMIX call startTutorial(repo,branch,id). See below for more instructions.
+
+### Steps
+
+Each workshop contains what we call steps.
+Each step is a directory containing:
+
+- a readme describing the step, what to do.
+- sol files:
+  - these can be sol files and test sol files. The test files should be name yoursolname_test.sol
+  - ANSWER files: these are named yoursolname_answer.sol and can be used to show the solution or the correct answer. The plugin will load the
+    file in the IDE when a user clicks on 'Show Answer'
+- js files
+- vyper files
+
+## Functions to call the plugin from the IDE
+
+### Add a repository:
+
+```
+addRepository(repoName, branch)
+```
+
+### Start a tutorial
+
+```
+startTutorial(repoName,branch,id)
+```
+
+You don't need to add a separate addRepository before calling startTutorial, this call will also add the repo.
+
+_Parameters_
+
+id: this can be two things:
+
+- type of number, it specifies the n-th tutorial in the list
+- type of string, this refers to the ID parameter in the config.yml file in the tutorial
+  for example:
+
+```
+---
+id: basics
+name: 1 Basics of Solidity
+summary: Some basic functions explained
+level: 4
+tags:
+    - solidity
+```
+
+### How to call these functions in the REMIX IDE
+
+```
+(function ()  {
+try {
+    // You don't need to add a separate addRepository before calling startTutorial, this is just an example
+    remix.call('LearnEth', 'addRepository', "ethereum/remix-workshops", "master")
+    remix.call('LearnEth', 'startTutorial', "ethereum/remix-workshops", "master", "basics")
+    remix.call('LearnEth', 'startTutorial', "ethereum/remix-workshops", "master", 2)
+} catch (e) {
+   console.log(e.message)
+}
+})()
+```
+
+Then call this in the REMIX console
+
+```
+remix.exeCurrent()
+```
diff --git a/apps/quick-dapp/package.json b/apps/quick-dapp/package.json
new file mode 100644
index 0000000000..ed130ad7dc
--- /dev/null
+++ b/apps/quick-dapp/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "quick-dapp",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@drafish/surge-client": "^1.1.1"
+  }
+}
diff --git a/apps/quick-dapp/project.json b/apps/quick-dapp/project.json
new file mode 100644
index 0000000000..8ca9b6c42f
--- /dev/null
+++ b/apps/quick-dapp/project.json
@@ -0,0 +1,70 @@
+{
+  "name": "quick-dapp",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/quick-dapp/src",
+  "projectType": "application",
+  "implicitDependencies": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "development",
+      "dependsOn": ["install"],
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/quick-dapp",
+        "index": "apps/quick-dapp/src/index.html",
+        "baseHref": "./",
+        "main": "apps/quick-dapp/src/main.tsx",
+        "polyfills": "apps/quick-dapp/src/polyfills.ts",
+        "tsConfig": "apps/quick-dapp/tsconfig.app.json",
+        "assets": ["apps/quick-dapp/src/profile.json", "apps/quick-dapp/src/assets/edit-dapp.png"],
+        "styles": ["apps/quick-dapp/src/index.css"],
+        "scripts": [],
+        "webpackConfig": "apps/quick-dapp/webpack.config.js"
+      },
+      "configurations": {
+        "development": {
+        },
+        "production": {
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/quick-dapp/**/*.ts"],
+        "eslintConfig": "apps/quick-dapp/.eslintrc"
+      }
+    },
+    "install": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "cd apps/quick-dapp && yarn"
+        ],
+        "parallel": false
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/webpack:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "quick-dapp:build",
+        "hmr": true,
+        "baseHref": "/"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "quick-dapp:build:development",
+          "port": 2025
+        },
+        "production": {
+          "buildTarget": "quick-dapp:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/apps/quick-dapp/src/App.css b/apps/quick-dapp/src/App.css
new file mode 100644
index 0000000000..1fa7e5637a
--- /dev/null
+++ b/apps/quick-dapp/src/App.css
@@ -0,0 +1,146 @@
+/* You can add global styles to this file, and also import other style files */
+
+.item-wrapper {
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
+    scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
+
+  &:hover {
+    .item-remove {
+      visibility: visible;
+    }
+  }
+}
+
+.item-remove {
+  visibility: hidden;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  &:active {
+    background-color: rgba(255, 70, 70, 0.9);
+  }
+
+  svg {
+    fill: #fff;
+  }
+}
+
+.item-action {
+  touch-action: none;
+  outline: none !important;
+  appearance: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+
+      svg {
+        fill: #6f7b88;
+      }
+    }
+  }
+
+  svg {
+    overflow: visible;
+    fill: #919eab;
+  }
+
+  &:active {
+    background-color: var(--background, rgba(0, 0, 0, 0.05));
+
+    svg {
+      fill: var(--fill, #788491);
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
+      0 0px 0px 2px #4c9ffe;
+  }
+}
+
+.container {
+  flex-direction: column;
+
+  &.placeholder {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &:focus-visible {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
+  }
+}
+
+
+.container-header {
+  &:hover {
+    .container-actions > * {
+      opacity: 1 !important;
+    }
+  }
+}
+
+.container-actions {
+  > *:first-child:not(:last-child) {
+    opacity: 0;
+
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+}
+
+.instance-input {
+  background-color: var(--custom-select) !important;
+  color: #dfe1ea !important;
+  font-size: 10px;
+}
+.has-args {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.udapp_intro {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  white-space: pre-wrap;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.udapp_intro:hover {
+  -webkit-line-clamp: inherit;
+}
+.cursor_pointer {
+  cursor: pointer;
+}
+.cursor_pointer:hover {
+  color: var(--secondary);
+}
+.custom-dropdown-items {
+  padding: 0.25rem 0.25rem;
+  border-radius: .25rem;
+  background: var(--custom-select);
+}
+
+.custom-dropdown-items a {
+  border-radius: .25rem;
+  text-transform: none;
+  text-decoration: none;
+  font-weight: normal;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.25rem;
+  width: auto;
+  color: var(--text);
+}
diff --git a/apps/quick-dapp/src/App.tsx b/apps/quick-dapp/src/App.tsx
new file mode 100644
index 0000000000..5adacb2e2f
--- /dev/null
+++ b/apps/quick-dapp/src/App.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useReducer } from 'react';
+import CreateInstance from './components/CreateInstance';
+import EditInstance from './components/EditInstance';
+import DeployPanel from './components/DeployPanel';
+import LoadingScreen from './components/LoadingScreen';
+import { appInitialState, appReducer } from './reducers/state';
+import {
+  connectRemix,
+  initDispatch,
+  updateState,
+  selectTheme,
+} from './actions';
+import { AppContext } from './contexts';
+import remixClient from './remix-client';
+import './App.css';
+
+function App(): JSX.Element {
+  const [appState, dispatch] = useReducer(appReducer, appInitialState);
+  useEffect(() => {
+    updateState(appState);
+  }, [appState]);
+  useEffect(() => {
+    initDispatch(dispatch);
+    updateState(appState);
+    connectRemix().then(() => {
+      remixClient.call('theme', 'currentTheme').then((theme: any) => {
+        selectTheme(theme.name);
+      });
+      remixClient.on('theme', 'themeChanged', (theme: any) => {
+        selectTheme(theme.name);
+      });
+    });
+  }, []);
+  return (
+    <AppContext.Provider
+      value={{
+        dispatch,
+        appState,
+      }}
+    >
+      {Object.keys(appState.instance.abi).length > 0 ? (
+        <div className="row m-0 pt-3">
+          <EditInstance />
+          <DeployPanel />
+        </div>
+      ) : (
+        <div className="row m-0 pt-3">
+          <CreateInstance />
+        </div>
+      )}
+      <LoadingScreen />
+    </AppContext.Provider>
+  );
+}
+
+export default App;
diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
new file mode 100644
index 0000000000..5990d13cec
--- /dev/null
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -0,0 +1,320 @@
+import axios from 'axios';
+import { omitBy } from 'lodash';
+import { execution } from '@remix-project/remix-lib';
+import SurgeClient from '@drafish/surge-client';
+import remixClient from '../remix-client';
+import { themeMap } from '../components/DeployPanel/theme';
+
+const { encodeFunctionId } = execution.txHelper;
+
+const surgeClient = new SurgeClient({
+  proxy: 'https://vercel-proxy-bice-six.vercel.app',
+  onError: (err: Error) => {
+    console.log(err);
+  },
+});
+
+let dispatch: any, state: any;
+
+export const initDispatch = (_dispatch: any) => {
+  dispatch = _dispatch;
+};
+
+export const updateState = (_state: any) => {
+  state = _state;
+};
+
+export const connectRemix = async () => {
+  await dispatch({
+    type: 'SET_LOADING',
+    payload: {
+      screen: true,
+    },
+  });
+
+  await remixClient.onload();
+
+  await dispatch({
+    type: 'SET_LOADING',
+    payload: {
+      screen: false,
+    },
+  });
+};
+
+export const saveDetails = async (payload: any) => {
+  const { abi, userInput, natSpec } = state.instance;
+
+  await dispatch({
+    type: 'SET_INSTANCE',
+    payload: {
+      abi: {
+        ...abi,
+        [payload.id]: {
+          ...abi[payload.id],
+          details:
+            natSpec.checked && !payload.details
+              ? natSpec.methods[payload.id]
+              : payload.details,
+        },
+      },
+      userInput: {
+        ...omitBy(userInput, (item) => item === ''),
+        methods: omitBy(
+          {
+            ...userInput.methods,
+            [payload.id]: payload.details,
+          },
+          (item) => item === ''
+        ),
+      },
+    },
+  });
+};
+
+export const saveTitle = async (payload: any) => {
+  const { abi } = state.instance;
+
+  await dispatch({
+    type: 'SET_INSTANCE',
+    payload: {
+      abi: {
+        ...abi,
+        [payload.id]: { ...abi[payload.id], title: payload.title },
+      },
+    },
+  });
+};
+
+export const getInfoFromNatSpec = async (value: boolean) => {
+  const { abi, userInput, natSpec } = state.instance;
+  const input = value
+    ? {
+      ...natSpec,
+      ...userInput,
+      methods: { ...natSpec.methods, ...userInput.methods },
+    }
+    : userInput;
+  Object.keys(abi).forEach((id) => {
+    abi[id].details = input.methods[id] || '';
+  });
+  await dispatch({
+    type: 'SET_INSTANCE',
+    payload: {
+      abi,
+      title: input.title || '',
+      details: input.details || '',
+      natSpec: { ...natSpec, checked: value },
+    },
+  });
+};
+
+export const deploy = async (payload: any, callback: any) => {
+  const surgeToken = localStorage.getItem('__SURGE_TOKEN');
+  const surgeEmail = localStorage.getItem('__SURGE_EMAIL');
+  let isLogin = false;
+  if (surgeToken && surgeEmail === payload.email) {
+    try {
+      await surgeClient.whoami();
+      isLogin = true;
+    } catch (error) {
+      /* empty */
+    }
+  }
+  if (!isLogin) {
+    try {
+      await surgeClient.login({
+        user: payload.email,
+        password: payload.password,
+      });
+      localStorage.setItem('__SURGE_EMAIL', payload.email);
+      localStorage.setItem('__SURGE_PASSWORD', payload.password);
+      localStorage.setItem('__DISQUS_SHORTNAME', payload.shortname);
+    } catch (error: any) {
+      callback({ code: 'ERROR', error: error.message });
+      return;
+    }
+  }
+
+  const { data } = await axios.get(
+    'https://remix-dapp.pages.dev/manifest.json'
+  );
+  const { src, file, css, assets } = data['index.html'];
+  const paths = [src, file, ...css, ...assets];
+
+  const instance = state.instance;
+
+  const files: Record<string, string> = {
+    'dir/instance.json': JSON.stringify({
+      ...instance,
+      shortname: payload.shortname,
+      shareTo: payload.shareTo,
+    }),
+  };
+
+  // console.log(
+  //   JSON.stringify({
+  //     ...instance,
+  //     shareTo: payload.shareTo,
+  //   })
+  // );
+
+  for (let index = 0; index < paths.length; index++) {
+    const path = paths[index];
+    const resp = await axios.get(`https://remix-dapp.pages.dev/${path}`);
+    files[`dir/${path}`] = resp.data;
+  }
+
+  files['dir/index.html'] = files['dir/index.html'].replace(
+    'assets/css/themes/remix-dark_tvx1s2.css',
+    themeMap[instance.theme].url
+  );
+
+  try {
+    await surgeClient.publish({
+      files,
+      domain: `${payload.subdomain}.surge.sh`,
+      onProgress: ({
+        id,
+        progress,
+        file,
+      }: {
+        id: string;
+        progress: number;
+        file: string;
+      }) => {
+        // console.log({ id, progress, file });
+      },
+      onTick: (tick: string) => {},
+    });
+  } catch (error) {
+    callback({ code: 'ERROR', error: 'this domain belongs to someone else' });
+    return;
+  }
+
+  callback({ code: 'SUCCESS', error: '' });
+  return;
+};
+
+export const initInstance = async ({
+  methodIdentifiers,
+  devdoc,
+  ...payload
+}: any) => {
+  const functionHashes: any = {};
+  const natSpec: any = { checked: false, methods: {} };
+  if (methodIdentifiers && devdoc) {
+    for (const fun in methodIdentifiers) {
+      functionHashes[`0x${methodIdentifiers[fun]}`] = fun;
+    }
+    natSpec.title = devdoc.title;
+    natSpec.details = devdoc.details;
+    Object.keys(functionHashes).forEach((hash) => {
+      const method = functionHashes[hash];
+      if (devdoc.methods[method]) {
+        const { details, params, returns } = devdoc.methods[method];
+        const detailsStr = details ? `@dev ${details}` : '';
+        const paramsStr = params
+          ? Object.keys(params)
+            .map((key) => `@param ${key} ${params[key]}`)
+            .join('\n')
+          : '';
+        const returnsStr = returns
+          ? Object.keys(returns)
+            .map(
+              (key) =>
+                `@return${/^_\d$/.test(key) ? '' : ' ' + key} ${returns[key]}`
+            )
+            .join('\n')
+          : '';
+        natSpec.methods[hash] = [detailsStr, paramsStr, returnsStr]
+          .filter((str) => str !== '')
+          .join('\n');
+      }
+    });
+  }
+
+  const abi: any = {};
+  payload.abi.forEach((item: any) => {
+    if (item.type === 'function') {
+      item.id = encodeFunctionId(item);
+      abi[item.id] = item;
+    }
+  });
+  const ids = Object.keys(abi);
+  const items =
+    ids.length > 2
+      ? {
+        A: ids.slice(0, ids.length / 2 + 1),
+        B: ids.slice(ids.length / 2 + 1),
+      }
+      : { A: ids };
+  await dispatch({
+    type: 'SET_INSTANCE',
+    payload: {
+      ...payload,
+      abi,
+      items,
+      containers: Object.keys(items),
+      natSpec,
+    },
+  });
+};
+
+export const resetInstance = async () => {
+  const abi = state.instance.abi;
+  const ids = Object.keys(abi);
+  ids.forEach((id) => {
+    abi[id] = { ...abi[id], title: '', details: '' };
+  });
+  const items =
+    ids.length > 1
+      ? {
+        A: ids.slice(0, ids.length / 2 + 1),
+        B: ids.slice(ids.length / 2 + 1),
+      }
+      : { A: ids };
+  await dispatch({
+    type: 'SET_INSTANCE',
+    payload: {
+      items,
+      containers: Object.keys(items),
+      title: '',
+      details: '',
+      abi,
+    },
+  });
+};
+
+export const emptyInstance = async () => {
+  await dispatch({
+    type: 'SET_INSTANCE',
+    payload: {
+      name: '',
+      address: '',
+      network: '',
+      abi: {},
+      items: {},
+      containers: [],
+      title: '',
+      details: '',
+      theme: 'Dark',
+      userInput: { methods: {} },
+      natSpec: { checked: false, methods: {} },
+    },
+  });
+};
+
+export const selectTheme = async (selectedTheme: string) => {
+  await dispatch({ type: 'SET_INSTANCE', payload: { theme: selectedTheme } });
+
+  const linkEles = document.querySelectorAll('link');
+  const nextTheme = themeMap[selectedTheme]; // Theme
+  for (const link of linkEles) {
+    if (link.href.indexOf('/assets/css/themes/') > 0) {
+      link.href = 'https://remix.ethereum.org/' + nextTheme.url;
+      document.documentElement.style.setProperty('--theme', nextTheme.quality);
+      break;
+    }
+  }
+};
diff --git a/apps/quick-dapp/src/assets/edit-dapp.png b/apps/quick-dapp/src/assets/edit-dapp.png
new file mode 100644
index 0000000000000000000000000000000000000000..445ce2a218b6101b58d934b4524f579b2afc75bc
GIT binary patch
literal 13764
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
Q|F-)`ipq)93K<0b5B{THQvd(}

literal 0
HcmV?d00001

diff --git a/apps/quick-dapp/src/components/ContractGUI/index.tsx b/apps/quick-dapp/src/components/ContractGUI/index.tsx
new file mode 100644
index 0000000000..0976531c9e
--- /dev/null
+++ b/apps/quick-dapp/src/components/ContractGUI/index.tsx
@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import { execution } from '@remix-project/remix-lib';
+import { saveDetails, saveTitle } from '../../actions';
+
+const txHelper = execution.txHelper;
+
+const getFuncABIInputs = (funABI: any) => {
+  if (!funABI.inputs) {
+    return '';
+  }
+  return txHelper.inputParametersDeclarationToString(funABI.inputs);
+};
+
+export function ContractGUI(props: { funcABI: any }) {
+  const isConstant =
+    props.funcABI.constant !== undefined ? props.funcABI.constant : false;
+  const lookupOnly =
+    props.funcABI.stateMutability === 'view' ||
+    props.funcABI.stateMutability === 'pure' ||
+    isConstant;
+  const inputs = getFuncABIInputs(props.funcABI);
+  const [title, setTitle] = useState<string>('');
+  const [buttonOptions, setButtonOptions] = useState<{
+    title: string;
+    content: string;
+    classList: string;
+    dataId: string;
+  }>({ title: '', content: '', classList: '', dataId: '' });
+
+  useEffect(() => {
+    if (props.funcABI.name) {
+      setTitle(props.funcABI.name);
+    } else {
+      setTitle(props.funcABI.type === 'receive' ? '(receive)' : '(fallback)');
+    }
+  }, [props.funcABI]);
+
+  useEffect(() => {
+    if (lookupOnly) {
+      setButtonOptions({
+        title: title + ' - call',
+        content: 'call',
+        classList: 'btn-info',
+        dataId: title + ' - call',
+      });
+    } else if (
+      props.funcABI.stateMutability === 'payable' ||
+      props.funcABI.payable
+    ) {
+      setButtonOptions({
+        title: title + ' - transact (payable)',
+        content: 'transact',
+        classList: 'btn-danger',
+        dataId: title + ' - transact (payable)',
+      });
+    } else {
+      setButtonOptions({
+        title: title + ' - transact (not payable)',
+        content: 'transact',
+        classList: 'btn-warning',
+        dataId: title + ' - transact (not payable)',
+      });
+    }
+  }, [lookupOnly, props.funcABI, title]);
+
+  return (
+    <div className={`d-inline-block`} style={{ width: '90%' }}>
+      <div className="p-2">
+        <input
+          className="form-control"
+          placeholder="Title of function"
+          value={props.funcABI.title}
+          onChange={({ target: { value } }) => {
+            saveTitle({ id: props.funcABI.id, title: value });
+          }}
+        />
+      </div>
+      <div className="p-2 d-flex">
+        <div
+          className="d-flex p-0 wrapperElement"
+          data-id={buttonOptions.dataId}
+          data-title={buttonOptions.title}
+        >
+          <button
+            disabled
+            className={`text-nowrap overflow-hidden text-truncate btn btn-sm ${
+              buttonOptions.classList
+            } ${
+              props.funcABI.inputs && props.funcABI.inputs.length > 0
+                ? 'has-args'
+                : ''
+            }`}
+            data-id={buttonOptions.dataId}
+            data-title={buttonOptions.title}
+            style={{ pointerEvents: 'none', width: 100 }}
+          >
+            {title}
+          </button>
+        </div>
+        <input
+          disabled
+          className="instance-input w-100 p-2 border-0 rounded-right"
+          data-id={'multiParamManagerBasicInputField'}
+          placeholder={inputs}
+          data-title={inputs}
+          style={{
+            height: '2rem',
+            visibility: !(
+              props.funcABI.inputs && props.funcABI.inputs.length > 0
+            )
+              ? 'hidden'
+              : 'visible',
+          }}
+        />
+      </div>
+      <div className="p-2">
+        <textarea
+          className="form-control"
+          placeholder="Instructions for function"
+          value={props.funcABI.details}
+          onChange={({ target: { value } }) => {
+            saveDetails({ id: props.funcABI.id, details: value });
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/quick-dapp/src/components/CreateInstance/index.tsx b/apps/quick-dapp/src/components/CreateInstance/index.tsx
new file mode 100644
index 0000000000..735a1c1535
--- /dev/null
+++ b/apps/quick-dapp/src/components/CreateInstance/index.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { Alert, Button, Form } from 'react-bootstrap';
+import { initInstance } from '../../actions';
+
+const CreateInstance: React.FC = () => {
+  const [formVal, setFormVal] = useState({
+    address: '',
+    abi: [],
+    name: '',
+    network: '',
+  });
+  return (
+    <Form
+      className="w-50 m-auto"
+      onSubmit={(e: any) => {
+        e.preventDefault();
+        initInstance({ ...formVal });
+      }}
+    >
+      <Form.Group className="mb-2" controlId="formAddress">
+        <Form.Label className="text-uppercase mb-0">address</Form.Label>
+        <Form.Control
+          type="address"
+          placeholder="Enter address"
+          value={formVal.address}
+          onChange={(e) => {
+            setFormVal({ ...formVal, address: e.target.value });
+          }}
+        />
+      </Form.Group>
+
+      <Form.Group className="mb-2" controlId="formAbi">
+        <Form.Label className="text-uppercase mb-0">abi</Form.Label>
+        <Form.Control
+          as="textarea"
+          rows={3}
+          type="abi"
+          placeholder="Enter abi"
+          value={formVal.abi.length > 0 ? JSON.stringify(formVal.abi) : ''}
+          onChange={(e) => {
+            let abi = [];
+            try {
+              abi = JSON.parse(e.target.value);
+            } catch (error) {
+              /* empty */
+            }
+            setFormVal({ ...formVal, abi });
+          }}
+        />
+      </Form.Group>
+
+      <Form.Group className="mb-2" controlId="formName">
+        <Form.Label className="text-uppercase mb-0">name</Form.Label>
+        <Form.Control
+          type="name"
+          placeholder="Enter name"
+          value={formVal.name}
+          onChange={(e) => {
+            setFormVal({ ...formVal, name: e.target.value });
+          }}
+        />
+      </Form.Group>
+
+      <Form.Group className="mb-2" controlId="formNetwork">
+        <Form.Label className="text-uppercase mb-0">network</Form.Label>
+        <Form.Control
+          type="network"
+          placeholder="Enter network"
+          value={formVal.network}
+          onChange={(e) => {
+            setFormVal({ ...formVal, network: e.target.value });
+          }}
+        />
+      </Form.Group>
+      <Button
+        variant="primary"
+        type="submit"
+        className="mt-2"
+        disabled={
+          !formVal.address ||
+          !formVal.name ||
+          !formVal.network ||
+          !formVal.abi.length
+        }
+      >
+        Submit
+      </Button>
+      <Alert className="mt-4" variant="info">
+        Dapp Draft only work for Injected Provider currently. More providers
+        will be adapted in further iterations.
+        <br />
+        Click the edit icon in a deployed contract will input the parameters
+        automatically.
+      </Alert>
+      <img src='./assets/edit-dapp.png' />
+    </Form>
+  );
+};
+
+export default CreateInstance;
diff --git a/apps/quick-dapp/src/components/DeployPanel/index.tsx b/apps/quick-dapp/src/components/DeployPanel/index.tsx
new file mode 100644
index 0000000000..80312d727d
--- /dev/null
+++ b/apps/quick-dapp/src/components/DeployPanel/index.tsx
@@ -0,0 +1,258 @@
+import React, { useContext, useState } from 'react';
+import { Form, Button, Alert, InputGroup } from 'react-bootstrap';
+import {
+  deploy,
+  emptyInstance,
+  resetInstance,
+  getInfoFromNatSpec,
+} from '../../actions';
+import { ThemeUI } from './theme';
+import { CustomTooltip } from '@remix-ui/helper';
+import { AppContext } from '../../contexts';
+
+function DeployPanel(): JSX.Element {
+  const { appState, dispatch } = useContext(AppContext);
+  const { verified, natSpec } = appState.instance;
+  const [formVal, setFormVal] = useState<any>({
+    email: localStorage.getItem('__SURGE_EMAIL') || '',
+    password: localStorage.getItem('__SURGE_PASSWORD') || '',
+    subdomain: '',
+    shortname: localStorage.getItem('__DISQUS_SHORTNAME') || '',
+    shareTo: [],
+  });
+  const setShareTo = (type: string) => {
+    let shareTo = formVal.shareTo;
+    if (formVal.shareTo.includes(type)) {
+      shareTo = shareTo.filter((item: string) => item !== type);
+    } else {
+      shareTo.push(type);
+    }
+    setFormVal({ ...formVal, shareTo });
+  };
+  const [deployState, setDeployState] = useState({
+    code: '',
+    error: '',
+    loading: false,
+  });
+  return (
+    <div className="col-3 d-inline-block">
+      <h3 className="mb-3">QuickDapp Admin</h3>
+      <Button
+        onClick={() => {
+          resetInstance();
+        }}
+      >
+        Reset Functions
+      </Button>
+      <Button
+        className="ml-3"
+        onClick={() => {
+          emptyInstance();
+        }}
+      >
+        Delete Dapp
+      </Button>
+      <Alert variant="info" className="my-2">
+        QuickDapp deploys to Surge.sh. Surge accounts are free until you reach a
+        level of use. The email & password you input below will register you
+        with a Surge account. The subdomain is your choice but it must be
+        unique. More about{' '}
+        <a target="_blank" href="https://surge.sh/help/">
+          surge.sh
+        </a>
+      </Alert>
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          setDeployState({ code: '', error: '', loading: true });
+          deploy(formVal, (state: any) => {
+            setDeployState({ ...state, loading: false });
+          });
+        }}
+      >
+        <Form.Group className="mb-2" controlId="formEmail">
+          <Form.Label className="text-uppercase mb-0">Email</Form.Label>
+          <Form.Control
+            type="email"
+            placeholder="Surge email"
+            required
+            value={formVal.email}
+            onChange={(e) => {
+              setFormVal({ ...formVal, email: e.target.value });
+            }}
+          />
+        </Form.Group>
+        <Form.Group className="mb-2" controlId="formPassword">
+          <Form.Label className="text-uppercase mb-0">Password</Form.Label>
+          <Form.Control
+            type="password"
+            placeholder="Surge password"
+            required
+            value={formVal.password}
+            onChange={(e) => {
+              setFormVal({ ...formVal, password: e.target.value });
+            }}
+          />
+        </Form.Group>
+        <Form.Group className="mb-2" controlId="formPassword">
+          <Form.Label className="text-uppercase mb-0">Subdomain</Form.Label>
+          <InputGroup>
+            <InputGroup.Text>https://</InputGroup.Text>
+            <Form.Control
+              type="subdomain"
+              placeholder="Unique subdomain name"
+              required
+              value={formVal.subdomain}
+              onChange={(e) => {
+                setFormVal({ ...formVal, subdomain: e.target.value });
+              }}
+            />
+            <InputGroup.Text>.surge.sh</InputGroup.Text>
+          </InputGroup>
+        </Form.Group>
+        {/* <Form.Group className="mb-3" controlId="formShortname">
+          <Form.Label>Disqus Shortname (Optional)</Form.Label>
+          <Form.Control
+            type="shortname"
+            placeholder="Disqus Shortname"
+            value={formVal.shortname}
+            onChange={(e) => {
+              setFormVal({ ...formVal, shortname: e.target.value });
+            }}
+          />
+        </Form.Group> */}
+        <Form.Group className="mb-2" controlId="formShareTo">
+          <Form.Label className="text-uppercase mb-0">
+            Share To (Optional)
+          </Form.Label>
+          <br />
+          <div className="d-inline-flex align-items-center custom-control custom-checkbox">
+            <input
+              id="inline-checkbox-1"
+              className="form-check-input custom-control-input"
+              type="checkbox"
+              name="group1"
+              value="twitter"
+              onChange={(e) => {
+                setShareTo(e.target.value);
+              }}
+              checked={formVal.shareTo.includes('twitter')}
+            />
+
+            <label
+              htmlFor="inline-checkbox-1"
+              className="m-0 form-check-label custom-control-label"
+              style={{ paddingTop: 1 }}
+            >
+              Twitter
+            </label>
+          </div>
+          <div className="d-inline-flex align-items-center custom-control custom-checkbox ml-3">
+            <input
+              id="inline-checkbox-2"
+              className="form-check-input custom-control-input"
+              type="checkbox"
+              name="group1"
+              value="facebook"
+              onChange={(e) => {
+                setShareTo(e.target.value);
+              }}
+              checked={formVal.shareTo.includes('facebook')}
+            />
+
+            <label
+              htmlFor="inline-checkbox-2"
+              className="m-0 form-check-label custom-control-label"
+              style={{ paddingTop: 1 }}
+            >
+              Facebook
+            </label>
+          </div>
+        </Form.Group>
+        <Form.Group className="mb-2" controlId="formShareTo">
+          <Form.Label className="text-uppercase mb-0">
+            Use NatSpec (Optional)
+          </Form.Label>
+          <br />
+          <span
+            data-id="remix_ai_switch"
+            id="remix_ai_switch"
+            className="btn ai-switch pl-0 py-0"
+            onClick={async () => {
+              getInfoFromNatSpec(!natSpec.checked);
+            }}
+          >
+            <CustomTooltip
+              placement="top"
+              tooltipText="Retrieve info from the contract's NatSpec"
+            >
+              <i
+                className={
+                  natSpec.checked
+                    ? 'fas fa-toggle-on fa-lg'
+                    : 'fas fa-toggle-off fa-lg'
+                }
+              ></i>
+            </CustomTooltip>
+          </span>
+        </Form.Group>
+        <Form.Group className="mb-2" controlId="formVerified">
+          <Form.Label className="text-uppercase mb-0">
+            Verified by Etherscan (Optional)
+          </Form.Label>
+          <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+            <input
+              id="inline-checkbox-3"
+              className="form-check-input custom-control-input"
+              type="checkbox"
+              onChange={(e) => {
+                dispatch({
+                  type: 'SET_INSTANCE',
+                  payload: { verified: e.target.checked },
+                });
+              }}
+              checked={verified}
+            />
+
+            <label
+              htmlFor="inline-checkbox-3"
+              className="m-0 form-check-label custom-control-label"
+              style={{ paddingTop: 1 }}
+            >
+              Verified
+            </label>
+          </div>
+        </Form.Group>
+        <ThemeUI />
+        <Button
+          variant="primary"
+          type="submit"
+          className="mt-3"
+          disabled={!formVal.email || !formVal.password || !formVal.subdomain}
+        >
+          {deployState.loading && (
+            <i className="fas fa-spinner fa-spin mr-1"></i>
+          )}
+          Deploy
+        </Button>
+        {deployState.code === 'SUCCESS' && (
+          <Alert variant="success" className="mt-4">
+            Deployed successfully! <br /> Click the link below to view your dapp
+            <br />
+            <a
+              target="_blank"
+              href={`https://${formVal.subdomain}.surge.sh`}
+            >{`https://${formVal.subdomain}.surge.sh`}</a>
+          </Alert>
+        )}
+        {deployState.error && (
+          <Alert variant="danger" className="mt-4">
+            {deployState.error}
+          </Alert>
+        )}
+      </Form>
+    </div>
+  );
+}
+
+export default DeployPanel;
diff --git a/apps/quick-dapp/src/components/DeployPanel/theme.tsx b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
new file mode 100644
index 0000000000..e566168e12
--- /dev/null
+++ b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
@@ -0,0 +1,157 @@
+import { Ref, useContext, useEffect } from 'react';
+import { AppContext } from '../../contexts';
+import { selectTheme } from '../../actions';
+import { Dropdown } from 'react-bootstrap';
+import React from 'react';
+
+export const themeMap: Record<string, any> = {
+  Dark: { quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' },
+  Light: { quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' },
+  Violet: { quality: 'light', url: 'assets/css/themes/remix-violet.css' },
+  Unicorn: { quality: 'light', url: 'assets/css/themes/remix-unicorn.css' },
+  Midcentury: {
+    quality: 'light',
+    url: 'assets/css/themes/remix-midcentury_hrzph3.css',
+  },
+  Black: { quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' },
+  Candy: { quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' },
+  HackerOwl: { quality: 'dark', url: 'assets/css/themes/remix-hacker_owl.css' },
+  Cerulean: {
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-cerulean.min.css',
+  },
+  Flatly: {
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-flatly.min.css',
+  },
+  Spacelab: {
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-spacelab.min.css',
+  },
+  Cyborg: {
+    quality: 'dark',
+    url: 'assets/css/themes/bootstrap-cyborg.min.css',
+  },
+};
+
+const CustomToggle = React.forwardRef(
+  (
+    {
+      children,
+      onClick,
+      icon,
+      className = '',
+    }: {
+      children: React.ReactNode;
+      onClick: (e: any) => void;
+      icon: string;
+      className: string;
+    },
+    ref: Ref<HTMLButtonElement>
+  ) => (
+    <button
+      ref={ref}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(e);
+      }}
+      className={className.replace('dropdown-toggle', '')}
+    >
+      <div className="d-flex">
+        <div className="mr-auto text-nowrap overflow-hidden">{children}</div>
+        {icon && (
+          <div className="pr-1">
+            <i className={`${icon} pr-1`}></i>
+          </div>
+        )}
+        <div>
+          <i className="fad fa-sort-circle"></i>
+        </div>
+      </div>
+    </button>
+  )
+);
+
+const CustomMenu = React.forwardRef(
+  (
+    {
+      children,
+      style,
+      'data-id': dataId,
+      className,
+      'aria-labelledby': labeledBy,
+    }: {
+      children: React.ReactNode;
+      style?: React.CSSProperties;
+      'data-id'?: string;
+      className: string;
+      'aria-labelledby'?: string;
+    },
+    ref: Ref<HTMLDivElement>
+  ) => {
+    const height = window.innerHeight * 0.6;
+    return (
+      <div
+        ref={ref}
+        style={style}
+        className={className}
+        aria-labelledby={labeledBy}
+        data-id={dataId}
+      >
+        <ul
+          className="overflow-auto list-unstyled mb-0"
+          style={{ maxHeight: height + 'px' }}
+        >
+          {children}
+        </ul>
+      </div>
+    );
+  }
+);
+
+export function ThemeUI() {
+  const { appState } = useContext(AppContext);
+  const { theme } = appState.instance;
+
+  const themeList = Object.keys(themeMap);
+
+  useEffect(() => {
+    selectTheme(theme);
+  }, []);
+
+  return (
+    <div className="d-block">
+      <label className="text-uppercase mb-0">Themes</label>
+      <Dropdown className="w-100">
+        <Dropdown.Toggle
+          as={CustomToggle}
+          id="dropdown-custom-components"
+          className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control"
+          icon={''}
+        >
+          {theme} - {themeMap[theme].quality}
+        </Dropdown.Toggle>
+        <Dropdown.Menu
+          as={CustomMenu}
+          className="w-100 custom-dropdown-items"
+          data-id="custom-dropdown-items"
+        >
+          {themeList.map((item) => (
+            <Dropdown.Item
+              key={item}
+              onClick={() => {
+                selectTheme(item);
+              }}
+              data-id={`dropdown-item-${item}`}
+            >
+              {theme === item && (
+                <span className="fas fa-check text-success mr-2"></span>
+              )}
+              {item} - {themeMap[item].quality}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+}
diff --git a/apps/quick-dapp/src/components/EditInstance/index.tsx b/apps/quick-dapp/src/components/EditInstance/index.tsx
new file mode 100644
index 0000000000..72129820e8
--- /dev/null
+++ b/apps/quick-dapp/src/components/EditInstance/index.tsx
@@ -0,0 +1,76 @@
+import { useContext } from 'react';
+import { omitBy } from 'lodash';
+import { MultipleContainers } from '../MultipleContainers';
+import { AppContext } from '../../contexts';
+
+function EditInstance(): JSX.Element {
+  const { appState, dispatch } = useContext(AppContext);
+  const { abi, items, containers, title, details, userInput, natSpec } =
+    appState.instance;
+  return (
+    <div className="col-9 d-inline-block row">
+      <div className="mx-4 my-2 p-3 w-75 bg-light">
+        <input
+          className="form-control"
+          placeholder="Dapp title"
+          value={title}
+          onChange={({ target: { value } }) => {
+            dispatch({
+              type: 'SET_INSTANCE',
+              payload: {
+                title: natSpec.checked && !value ? natSpec.title : value,
+                userInput: omitBy(
+                  { ...userInput, title: value },
+                  (item) => item === ''
+                ),
+              },
+            });
+          }}
+        />
+      </div>
+      <div className="mx-4 my-2 p-3 w-75 bg-light">
+        <textarea
+          className="form-control"
+          placeholder="Dapp instructions"
+          value={details}
+          onChange={({ target: { value } }) => {
+            dispatch({
+              type: 'SET_INSTANCE',
+              payload: {
+                details: natSpec.checked && !value ? natSpec.details : value,
+                userInput: omitBy(
+                  { ...userInput, details: value },
+                  (item) => item === ''
+                ),
+              },
+            });
+          }}
+        />
+      </div>
+      <MultipleContainers
+        abi={abi}
+        items={items}
+        containers={containers}
+        setItemsAndContainers={(
+          newItems: any = items,
+          newContainers: any = containers
+        ) => {
+          dispatch({
+            type: 'SET_INSTANCE',
+            payload: {
+              items: newItems,
+              containers: newContainers,
+            },
+          });
+        }}
+        handle
+        scrollable
+        containerStyle={{
+          maxHeight: '90vh',
+        }}
+      />
+    </div>
+  );
+}
+
+export default EditInstance;
diff --git a/apps/quick-dapp/src/components/EditableText/index.tsx b/apps/quick-dapp/src/components/EditableText/index.tsx
new file mode 100644
index 0000000000..e3917bc500
--- /dev/null
+++ b/apps/quick-dapp/src/components/EditableText/index.tsx
@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+
+const EditableText = ({
+  value,
+  onSave,
+  textarea,
+  placeholder,
+}: {
+  value: string;
+  onSave: (str: string) => void;
+  textarea?: boolean;
+  placeholder?: string;
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempText, setTempText] = useState(value);
+
+  useEffect(() => {
+    setTempText(value);
+  }, [value]);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleSave = () => {
+    onSave(tempText);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  const handleChange = (event: {
+    target: { value: React.SetStateAction<string> };
+  }) => {
+    setTempText(event.target.value);
+  };
+
+  const InputElement = textarea ? 'textarea' : 'input';
+  const TextElement = textarea ? 'span' : 'h1';
+
+  return isEditing ? (
+    <>
+      <InputElement
+        className="form-control"
+        placeholder={placeholder}
+        value={tempText}
+        onChange={handleChange}
+        style={{ height: textarea ? 100 : 'auto' }}
+      />
+      <div className="d-flex justify-content-end">
+        <i
+          className="fas ml-2 mt-2 fa-save cursor_pointer"
+          onClick={handleSave}
+        />
+        <i
+          className="fas ml-2 mt-2 fa-ban cursor_pointer"
+          onClick={handleCancel}
+        />
+      </div>
+    </>
+  ) : (
+    <div className="d-flex justify-content-between align-items-center">
+      <TextElement className="udapp_intro">
+        {value ? value : placeholder}
+      </TextElement>
+      <i
+        className="fas fa-edit ml-2 float-right cursor_pointer"
+        onClick={handleEdit}
+      />
+    </div>
+  );
+};
+
+export default EditableText;
diff --git a/apps/quick-dapp/src/components/LoadingScreen/index.tsx b/apps/quick-dapp/src/components/LoadingScreen/index.tsx
new file mode 100644
index 0000000000..78d9741f16
--- /dev/null
+++ b/apps/quick-dapp/src/components/LoadingScreen/index.tsx
@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import BounceLoader from 'react-spinners/BounceLoader';
+import { AppContext } from '../../contexts';
+
+const LoadingScreen: React.FC = () => {
+  const { appState } = useContext(AppContext);
+  const loading = appState.loading.screen;
+
+  return loading ? (
+    <div
+      className="w-100 h-100 position-fixed opacity-100 z-3"
+      style={{
+        top: 0,
+        backgroundColor: 'rgba(51, 51, 51, 0.8)',
+      }}
+    >
+      <BounceLoader
+        color="#a7b0ae"
+        size={100}
+        className="position-absolute m-0"
+        style={{
+          top: '40%',
+          left: '50%',
+          transform: 'translate(-50%,-50%)',
+        }}
+      />
+    </div>
+  ) : null;
+};
+
+export default LoadingScreen;
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
new file mode 100644
index 0000000000..3790e4cb66
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
@@ -0,0 +1,69 @@
+import React, { forwardRef } from 'react';
+import { Handle, Remove } from '../Item';
+
+export interface Props {
+  children: React.ReactNode;
+  columns?: number;
+  label?: string;
+  style?: React.CSSProperties;
+  hover?: boolean;
+  handleProps?: React.HTMLAttributes<any>;
+  placeholder?: boolean;
+  onClick?(): void;
+  onRemove?(): void;
+}
+
+export const Container = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      columns = 1,
+      handleProps,
+      hover,
+      onClick,
+      onRemove,
+      label,
+      placeholder,
+      style,
+      ...props
+    }: Props,
+    ref
+  ) => {
+    return (
+      <div
+        {...props}
+        ref={ref}
+        style={
+          {
+            ...style,
+            '--columns': columns,
+          } as React.CSSProperties
+        }
+        className={`col pr-0 d-flex rounded container ${hover && 'hover'} ${
+          placeholder && 'placeholder'
+        }`}
+        onClick={onClick}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        {label ? (
+          <div
+            className={`px-2 py-1 d-flex align-items-center justify-content-between container-header`}
+          >
+            {label}
+            <div className={`d-flex container-actions`}>
+              <Remove onClick={onRemove} />
+              <Handle {...handleProps} />
+            </div>
+          </div>
+        ) : null}
+        {placeholder ? (
+          children
+        ) : (
+          <ul className="p-0 m-0 list-unstyled" style={{ overflowY: 'auto' }}>
+            {children}
+          </ul>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Container/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Container/index.ts
new file mode 100644
index 0000000000..efd2eb83de
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Container/index.ts
@@ -0,0 +1,2 @@
+export { Container } from './Container'
+export type { Props as ContainerProps } from './Container'
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
new file mode 100644
index 0000000000..4ae6c263d3
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect } from 'react';
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { Transform } from '@dnd-kit/utilities';
+import { Handle } from './components/Handle';
+
+const removeIcon = (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 22 22"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
+  </svg>
+);
+
+export interface Props {
+  dragOverlay?: boolean;
+  disabled?: boolean;
+  dragging?: boolean;
+  handle?: boolean;
+  handleProps?: any;
+  height?: number;
+  index?: number;
+  fadeIn?: boolean;
+  transform?: Transform | null;
+  listeners?: DraggableSyntheticListeners;
+  sorting?: boolean;
+  style?: React.CSSProperties;
+  transition?: string | null;
+  wrapperStyle?: React.CSSProperties;
+  children: React.ReactNode;
+  onRemove?(): void;
+}
+
+export const Item = React.memo(
+  React.forwardRef<HTMLLIElement, Props>(
+    (
+      {
+        dragOverlay,
+        dragging,
+        disabled,
+        fadeIn,
+        handle,
+        handleProps,
+        height,
+        index,
+        listeners,
+        onRemove,
+        sorting,
+        style,
+        transition,
+        transform,
+        children,
+        wrapperStyle,
+        ...props
+      },
+      ref
+    ) => {
+      useEffect(() => {
+        if (!dragOverlay) {
+          return;
+        }
+
+        document.body.style.cursor = 'grabbing';
+
+        return () => {
+          document.body.style.cursor = '';
+        };
+      }, [dragOverlay]);
+
+      return (
+        <li
+          className={`position-relative mb-3 list-unstyled item-wrapper`}
+          style={
+            {
+              ...wrapperStyle,
+              transition: [transition, wrapperStyle?.transition]
+                .filter(Boolean)
+                .join(', '),
+              '--translate-x': transform
+                ? `${Math.round(transform.x)}px`
+                : undefined,
+              '--translate-y': transform
+                ? `${Math.round(transform.y)}px`
+                : undefined,
+              '--scale-x': transform?.scaleX
+                ? `${transform.scaleX}`
+                : undefined,
+              '--scale-y': transform?.scaleY
+                ? `${transform.scaleY}`
+                : undefined,
+              '--index': index,
+            } as React.CSSProperties
+          }
+          ref={ref}
+        >
+          <div
+            style={style}
+            data-cypress="draggable-item"
+            {...(!handle ? listeners : undefined)}
+            {...props}
+            tabIndex={!handle ? 0 : undefined}
+          >
+            <div className="border-dark bg-light d-flex">
+              {children}
+              <Handle {...handleProps} {...listeners} />
+            </div>
+            <button
+              className={`d-flex justify-content-center align-items-center position-absolute border-0 rounded-circle item-remove`}
+              onClick={onRemove}
+            >
+              {removeIcon}
+            </button>
+          </div>
+        </li>
+      );
+    }
+  )
+);
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx
new file mode 100644
index 0000000000..49901e3b16
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx
@@ -0,0 +1,31 @@
+import React, { forwardRef, CSSProperties } from 'react';
+
+export interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  active?: {
+    fill: string;
+    background: string;
+  };
+  cursor?: CSSProperties['cursor'];
+}
+
+export const Action = forwardRef<HTMLButtonElement, Props>(
+  ({ active, className, cursor, style, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        {...props}
+        className={`d-flex align-items-center justify-content-center border-0 rounded p-3 item-action`}
+        tabIndex={0}
+        style={
+          {
+            ...style,
+            cursor,
+            '--fill': active?.fill,
+            '--background': active?.background,
+            width: 12,
+          } as CSSProperties
+        }
+      />
+    );
+  }
+);
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts
new file mode 100644
index 0000000000..4b3291686b
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts
@@ -0,0 +1,2 @@
+export { Action } from './Action';
+export type { Props as ActionProps } from './Action';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
new file mode 100644
index 0000000000..9cb3215303
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+
+import { Action, ActionProps } from '../Action';
+
+export const Handle = forwardRef<HTMLButtonElement, ActionProps>(
+  (props, ref) => {
+    return (
+      <Action
+        ref={ref}
+        cursor="grab"
+        data-cypress="draggable-handle"
+        {...props}
+      >
+        <svg viewBox="0 0 20 20" width="12">
+          <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+        </svg>
+      </Action>
+    );
+  }
+);
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts
new file mode 100644
index 0000000000..316aeed4f4
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts
@@ -0,0 +1 @@
+export { Handle } from './Handle';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
new file mode 100644
index 0000000000..6bf8252f4f
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Action, ActionProps } from '../Action';
+
+export function Remove(props: ActionProps) {
+  return (
+    <Action
+      {...props}
+      active={{
+        fill: 'rgba(255, 70, 70, 0.95)',
+        background: 'rgba(255, 70, 70, 0.1)',
+      }}
+    >
+      <svg width="8" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
+      </svg>
+    </Action>
+  );
+}
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts
new file mode 100644
index 0000000000..b7c2fb22e7
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts
@@ -0,0 +1 @@
+export { Remove } from './Remove';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts
new file mode 100644
index 0000000000..fb2af46f16
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts
@@ -0,0 +1,3 @@
+export { Action } from './Action';
+export { Handle } from './Handle';
+export { Remove } from './Remove';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts
new file mode 100644
index 0000000000..a08123dad3
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts
@@ -0,0 +1,2 @@
+export { Item } from './Item';
+export { Action, Handle, Remove } from './components';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/index.ts
new file mode 100644
index 0000000000..48624748a5
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/index.ts
@@ -0,0 +1,3 @@
+export { Container } from './Container';
+export type { ContainerProps } from './Container';
+export { Item, Action, Handle, Remove } from './Item';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/index.tsx b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
new file mode 100644
index 0000000000..e2a39b0372
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
@@ -0,0 +1,653 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal, unstable_batchedUpdates } from 'react-dom';
+import {
+  CancelDrop,
+  closestCenter,
+  pointerWithin,
+  rectIntersection,
+  CollisionDetection,
+  DndContext,
+  DragOverlay,
+  DropAnimation,
+  getFirstCollision,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  Modifiers,
+  UniqueIdentifier,
+  useSensors,
+  useSensor,
+  MeasuringStrategy,
+  KeyboardCoordinateGetter,
+  defaultDropAnimationSideEffects,
+} from '@dnd-kit/core';
+import {
+  AnimateLayoutChanges,
+  SortableContext,
+  useSortable,
+  arrayMove,
+  defaultAnimateLayoutChanges,
+  verticalListSortingStrategy,
+  SortingStrategy,
+  horizontalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { coordinateGetter as multipleContainersCoordinateGetter } from './multipleContainersKeyboardCoordinates';
+
+import { Item, Container, ContainerProps } from './components';
+
+import { ContractGUI } from '../ContractGUI';
+
+export default {
+  title: 'Presets/Sortable/Multiple Containers',
+};
+
+const animateLayoutChanges: AnimateLayoutChanges = (args) =>
+  defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+
+function DroppableContainer({
+  children,
+  columns = 1,
+  disabled,
+  id,
+  items,
+  style,
+  ...props
+}: ContainerProps & {
+  disabled?: boolean;
+  id: UniqueIdentifier;
+  items: UniqueIdentifier[];
+  style?: React.CSSProperties;
+}) {
+  const {
+    active,
+    attributes,
+    isDragging,
+    listeners,
+    over,
+    setNodeRef,
+    transition,
+    transform,
+  } = useSortable({
+    id,
+    data: {
+      type: 'container',
+      children: items,
+    },
+    animateLayoutChanges,
+  });
+  const isOverContainer = over
+    ? (id === over.id && active?.data.current?.type !== 'container') ||
+      items.includes(over.id)
+    : false;
+
+  return (
+    <Container
+      ref={disabled ? undefined : setNodeRef}
+      style={{
+        ...style,
+        transition,
+        transform: CSS.Translate.toString(transform),
+        opacity: isDragging ? 0.5 : undefined,
+      }}
+      hover={isOverContainer}
+      handleProps={{
+        ...attributes,
+        ...listeners,
+      }}
+      columns={columns}
+      {...props}
+    >
+      {children}
+    </Container>
+  );
+}
+
+const dropAnimation: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: '0.5',
+      },
+    },
+  }),
+};
+
+type Items = Record<UniqueIdentifier, UniqueIdentifier[]>;
+
+interface Props {
+  adjustScale?: boolean;
+  cancelDrop?: CancelDrop;
+  columns?: number;
+  containerStyle?: React.CSSProperties;
+  coordinateGetter?: KeyboardCoordinateGetter;
+  getItemStyles?(args: {
+    value: UniqueIdentifier;
+    index: number;
+    overIndex: number;
+    isDragging: boolean;
+    containerId: UniqueIdentifier;
+    isSorting: boolean;
+    isDragOverlay: boolean;
+  }): React.CSSProperties;
+  wrapperStyle?(args: { index: number }): React.CSSProperties;
+  itemCount?: number;
+  abi?: any;
+  items: Items;
+  containers: any;
+  setItemsAndContainers: (item?: any, containers?: any) => void;
+  handle?: boolean;
+  strategy?: SortingStrategy;
+  modifiers?: Modifiers;
+  scrollable?: boolean;
+  vertical?: boolean;
+}
+
+const PLACEHOLDER_ID = 'placeholder';
+const empty: UniqueIdentifier[] = [];
+
+export function MultipleContainers({
+  adjustScale = false,
+  cancelDrop,
+  columns,
+  handle = false,
+  items,
+  containers,
+  setItemsAndContainers,
+  abi,
+  containerStyle,
+  coordinateGetter = multipleContainersCoordinateGetter,
+  getItemStyles = () => ({}),
+  wrapperStyle = () => ({}),
+  modifiers,
+  strategy = verticalListSortingStrategy,
+  vertical = false,
+  scrollable,
+}: Props) {
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const lastOverId = useRef<UniqueIdentifier | null>(null);
+  const recentlyMovedToNewContainer = useRef(false);
+  const isSortingContainer = activeId ? containers.includes(activeId) : false;
+
+  /**
+   * Custom collision detection strategy optimized for multiple containers
+   *
+   * - First, find any droppable containers intersecting with the pointer.
+   * - If there are none, find intersecting containers with the active draggable.
+   * - If there are no intersecting containers, return the last matched intersection
+   *
+   */
+  const collisionDetectionStrategy: CollisionDetection = useCallback(
+    (args) => {
+      if (activeId && activeId in items) {
+        return closestCenter({
+          ...args,
+          droppableContainers: args.droppableContainers.filter(
+            (container) => container.id in items
+          ),
+        });
+      }
+
+      // Start by finding any intersecting droppable
+      const pointerIntersections = pointerWithin(args);
+      const intersections =
+        pointerIntersections.length > 0
+          ? // If there are droppables intersecting with the pointer, return those
+          pointerIntersections
+          : rectIntersection(args);
+      let overId = getFirstCollision(intersections, 'id');
+
+      if (overId != null) {
+        if (overId in items) {
+          const containerItems = items[overId];
+
+          // If a container is matched and it contains items (columns 'A', 'B', 'C')
+          if (containerItems.length > 0) {
+            // Return the closest droppable within that container
+            overId = closestCenter({
+              ...args,
+              droppableContainers: args.droppableContainers.filter(
+                (container) =>
+                  container.id !== overId &&
+                  containerItems.includes(container.id)
+              ),
+            })[0]?.id;
+          }
+        }
+
+        lastOverId.current = overId;
+
+        return [{ id: overId }];
+      }
+
+      // When a draggable item moves to a new container, the layout may shift
+      // and the `overId` may become `null`. We manually set the cached `lastOverId`
+      // to the id of the draggable item that was moved to the new container, otherwise
+      // the previous `overId` will be returned which can cause items to incorrectly shift positions
+      if (recentlyMovedToNewContainer.current) {
+        lastOverId.current = activeId;
+      }
+
+      // If no droppable is matched, return the last match
+      return lastOverId.current ? [{ id: lastOverId.current }] : [];
+    },
+    [activeId, items]
+  );
+  const [clonedItems, setClonedItems] = useState<Items | null>(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter,
+    })
+  );
+  const findContainer = (id: UniqueIdentifier) => {
+    if (id in items) {
+      return id;
+    }
+
+    return Object.keys(items).find((key) => items[key].includes(id));
+  };
+
+  const getIndex = (id: UniqueIdentifier) => {
+    const container = findContainer(id);
+
+    if (!container) {
+      return -1;
+    }
+
+    const index = items[container].indexOf(id);
+
+    return index;
+  };
+
+  const onDragCancel = () => {
+    if (clonedItems) {
+      // Reset items to their original state in case items have been
+      // Dragged across containers
+      setItemsAndContainers(clonedItems);
+    }
+
+    setActiveId(null);
+    setClonedItems(null);
+  };
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      recentlyMovedToNewContainer.current = false;
+    });
+  }, [items]);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={collisionDetectionStrategy}
+      measuring={{
+        droppable: {
+          strategy: MeasuringStrategy.Always,
+        },
+      }}
+      onDragStart={({ active }) => {
+        setActiveId(active.id);
+        setClonedItems(items);
+      }}
+      onDragOver={({ active, over }) => {
+        const overId = over?.id;
+
+        if (overId == null || active.id in items) {
+          return;
+        }
+
+        const overContainer = findContainer(overId);
+        const activeContainer = findContainer(active.id);
+
+        if (!overContainer || !activeContainer) {
+          return;
+        }
+
+        if (activeContainer !== overContainer) {
+          const activeItems = items[activeContainer];
+          const overItems = items[overContainer];
+          const overIndex = overItems.indexOf(overId);
+          const activeIndex = activeItems.indexOf(active.id);
+
+          let newIndex: number;
+
+          if (overId in items) {
+            newIndex = overItems.length + 1;
+          } else {
+            const isBelowOverItem =
+              over &&
+              active.rect.current.translated &&
+              active.rect.current.translated.top >
+                over.rect.top + over.rect.height;
+
+            const modifier = isBelowOverItem ? 1 : 0;
+
+            newIndex =
+              overIndex >= 0 ? overIndex + modifier : overItems.length + 1;
+          }
+
+          recentlyMovedToNewContainer.current = true;
+
+          setItemsAndContainers({
+            ...items,
+            [activeContainer]: items[activeContainer].filter(
+              (item) => item !== active.id
+            ),
+            [overContainer]: [
+              ...items[overContainer].slice(0, newIndex),
+              items[activeContainer][activeIndex],
+              ...items[overContainer].slice(
+                newIndex,
+                items[overContainer].length
+              ),
+            ],
+          });
+        }
+      }}
+      onDragEnd={({ active, over }) => {
+        if (active.id in items && over?.id) {
+          const activeIndex = containers.indexOf(active.id);
+          const overIndex = containers.indexOf(over.id);
+          setItemsAndContainers(
+            undefined,
+            arrayMove(containers, activeIndex, overIndex)
+          );
+        }
+
+        const activeContainer = findContainer(active.id);
+
+        if (!activeContainer) {
+          setActiveId(null);
+          return;
+        }
+
+        const overId = over?.id;
+
+        if (overId == null) {
+          setActiveId(null);
+          return;
+        }
+
+        if (overId === PLACEHOLDER_ID) {
+          const newContainerId = getNextContainerId();
+
+          unstable_batchedUpdates(() => {
+            setItemsAndContainers(
+              {
+                ...items,
+                [activeContainer]: items[activeContainer].filter(
+                  (id) => id !== activeId
+                ),
+                [newContainerId]: [active.id],
+              },
+              [...containers, newContainerId]
+            );
+            setActiveId(null);
+          });
+          return;
+        }
+
+        const overContainer = findContainer(overId);
+
+        if (overContainer) {
+          const activeIndex = items[activeContainer].indexOf(active.id);
+          const overIndex = items[overContainer].indexOf(overId);
+
+          if (activeIndex !== overIndex) {
+            setItemsAndContainers({
+              ...items,
+              [overContainer]: arrayMove(
+                items[overContainer],
+                activeIndex,
+                overIndex
+              ),
+            });
+          }
+        }
+
+        setActiveId(null);
+      }}
+      cancelDrop={cancelDrop}
+      onDragCancel={onDragCancel}
+      modifiers={modifiers}
+    >
+      <div
+        className="row pt-0"
+        style={{
+          boxSizing: 'border-box',
+          padding: 20,
+          gridAutoFlow: vertical ? 'row' : 'column',
+        }}
+      >
+        <SortableContext
+          items={[...containers, PLACEHOLDER_ID]}
+          strategy={
+            vertical
+              ? verticalListSortingStrategy
+              : horizontalListSortingStrategy
+          }
+        >
+          {containers.map((containerId: any) => (
+            <DroppableContainer
+              key={containerId}
+              id={containerId}
+              label={`Column ${containerId}`}
+              columns={columns}
+              items={items[containerId]}
+              style={containerStyle}
+              onRemove={() => handleRemove(containerId)}
+            >
+              <SortableContext items={items[containerId]} strategy={strategy}>
+                {items[containerId].map((value, index) => {
+                  return (
+                    <SortableItem
+                      disabled={isSortingContainer}
+                      key={value}
+                      id={value}
+                      abi={abi}
+                      index={index}
+                      handle={handle}
+                      style={getItemStyles}
+                      wrapperStyle={wrapperStyle}
+                      containerId={containerId}
+                      getIndex={getIndex}
+                      onRemove={() => {
+                        setItemsAndContainers({
+                          ...items,
+                          [containerId]: items[containerId].filter(
+                            (id) => id !== value
+                          ),
+                        });
+                      }}
+                    />
+                  );
+                })}
+              </SortableContext>
+            </DroppableContainer>
+          ))}
+          {containers.length < 3 && (
+            <DroppableContainer
+              id={PLACEHOLDER_ID}
+              key={PLACEHOLDER_ID}
+              disabled={isSortingContainer}
+              items={empty}
+              onClick={handleAddColumn}
+              placeholder
+            >
+              + Add column
+            </DroppableContainer>
+          )}
+        </SortableContext>
+      </div>
+      {createPortal(
+        <DragOverlay adjustScale={adjustScale} dropAnimation={dropAnimation}>
+          {activeId
+            ? containers.includes(activeId)
+              ? renderContainerDragOverlay(activeId)
+              : renderSortableItemDragOverlay(activeId)
+            : null}
+        </DragOverlay>,
+        document.body
+      )}
+    </DndContext>
+  );
+
+  function renderSortableItemDragOverlay(id: UniqueIdentifier) {
+    return (
+      <Item
+        handle={handle}
+        style={getItemStyles({
+          containerId: findContainer(id) as UniqueIdentifier,
+          overIndex: -1,
+          index: getIndex(id),
+          value: id,
+          isSorting: true,
+          isDragging: true,
+          isDragOverlay: true,
+        })}
+        wrapperStyle={wrapperStyle({ index: 0 })}
+        dragOverlay
+      >
+        <ContractGUI funcABI={abi[id]} />
+      </Item>
+    );
+  }
+
+  function renderContainerDragOverlay(containerId: UniqueIdentifier) {
+    return (
+      <Container label={`Column ${containerId}`} columns={columns}>
+        {items[containerId].map((item, index) => (
+          <Item
+            key={item}
+            handle={handle}
+            style={getItemStyles({
+              containerId,
+              overIndex: -1,
+              index: getIndex(item),
+              value: item,
+              isDragging: false,
+              isSorting: false,
+              isDragOverlay: false,
+            })}
+            wrapperStyle={wrapperStyle({ index })}
+          >
+            <ContractGUI funcABI={abi[item]} />
+          </Item>
+        ))}
+      </Container>
+    );
+  }
+
+  function handleRemove(containerID: UniqueIdentifier) {
+    const newContainers = containers.filter((id: any) => id !== containerID);
+    const newItems: any = {};
+    newContainers.forEach((id: string) => {
+      newItems[id] = items[id];
+    });
+    setItemsAndContainers(newItems, newContainers);
+  }
+
+  function handleAddColumn() {
+    const newContainerId = getNextContainerId();
+
+    unstable_batchedUpdates(() => {
+      setItemsAndContainers(
+        {
+          ...items,
+          [newContainerId]: [],
+        },
+        [...containers, newContainerId]
+      );
+    });
+  }
+
+  function getNextContainerId() {
+    const containerIds = Object.keys(items);
+    const lastContainerId = containerIds[containerIds.length - 1];
+
+    return String.fromCharCode(lastContainerId.charCodeAt(0) + 1);
+  }
+}
+
+interface SortableItemProps {
+  containerId: UniqueIdentifier;
+  id: UniqueIdentifier;
+  abi: any;
+  index: number;
+  handle: boolean;
+  disabled?: boolean;
+  style(args: any): React.CSSProperties;
+  getIndex(id: UniqueIdentifier): number;
+  wrapperStyle({ index }: { index: number }): React.CSSProperties;
+  onRemove?: () => void;
+}
+
+function SortableItem({
+  disabled,
+  id,
+  abi,
+  index,
+  handle,
+  style,
+  containerId,
+  getIndex,
+  wrapperStyle,
+  onRemove,
+}: SortableItemProps) {
+  const {
+    setNodeRef,
+    setActivatorNodeRef,
+    listeners,
+    isDragging,
+    isSorting,
+    over,
+    overIndex,
+    transform,
+    transition,
+  } = useSortable({
+    id,
+  });
+  const mounted = useMountStatus();
+  const mountedWhileDragging = isDragging && !mounted;
+
+  return (
+    <Item
+      ref={disabled ? undefined : setNodeRef}
+      dragging={isDragging}
+      sorting={isSorting}
+      handle={handle}
+      handleProps={handle ? { ref: setActivatorNodeRef } : undefined}
+      index={index}
+      wrapperStyle={wrapperStyle({ index })}
+      style={style({
+        index,
+        value: id,
+        isDragging,
+        isSorting,
+        overIndex: over ? getIndex(over.id) : overIndex,
+        containerId,
+      })}
+      transition={transition}
+      transform={transform}
+      fadeIn={mountedWhileDragging}
+      listeners={listeners}
+      onRemove={onRemove}
+    >
+      <ContractGUI funcABI={abi[id]} />
+    </Item>
+  );
+}
+
+function useMountStatus() {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setIsMounted(true), 500);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return isMounted;
+}
diff --git a/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts b/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts
new file mode 100644
index 0000000000..d59aa7e7b2
--- /dev/null
+++ b/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts
@@ -0,0 +1,114 @@
+import {
+  closestCorners,
+  getFirstCollision,
+  KeyboardCode,
+  DroppableContainer,
+  KeyboardCoordinateGetter,
+} from '@dnd-kit/core';
+
+const directions: string[] = [
+  KeyboardCode.Down,
+  KeyboardCode.Right,
+  KeyboardCode.Up,
+  KeyboardCode.Left,
+];
+
+export const coordinateGetter: KeyboardCoordinateGetter = (
+  event,
+  { context: { active, droppableRects, droppableContainers, collisionRect } }
+) => {
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+
+    if (!active || !collisionRect) {
+      return;
+    }
+
+    const filteredContainers: DroppableContainer[] = [];
+
+    droppableContainers.getEnabled().forEach((entry) => {
+      if (!entry || entry?.disabled) {
+        return;
+      }
+
+      const rect = droppableRects.get(entry.id);
+
+      if (!rect) {
+        return;
+      }
+
+      const data = entry.data.current;
+
+      if (data) {
+        const { type, children } = data;
+
+        if (type === 'container' && children?.length > 0) {
+          if (active.data.current?.type !== 'container') {
+            return;
+          }
+        }
+      }
+
+      switch (event.code) {
+      case KeyboardCode.Down:
+        if (collisionRect.top < rect.top) {
+          filteredContainers.push(entry);
+        }
+        break;
+      case KeyboardCode.Up:
+        if (collisionRect.top > rect.top) {
+          filteredContainers.push(entry);
+        }
+        break;
+      case KeyboardCode.Left:
+        if (collisionRect.left >= rect.left + rect.width) {
+          filteredContainers.push(entry);
+        }
+        break;
+      case KeyboardCode.Right:
+        if (collisionRect.left + collisionRect.width <= rect.left) {
+          filteredContainers.push(entry);
+        }
+        break;
+      }
+    });
+
+    const collisions = closestCorners({
+      active,
+      collisionRect: collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null,
+    });
+    const closestId = getFirstCollision(collisions, 'id');
+
+    if (closestId != null) {
+      const newDroppable = droppableContainers.get(closestId);
+      const newNode = newDroppable?.node.current;
+      const newRect = newDroppable?.rect.current;
+
+      if (newNode && newRect) {
+        if (newDroppable.id === 'placeholder') {
+          return {
+            x: newRect.left + (newRect.width - collisionRect.width) / 2,
+            y: newRect.top + (newRect.height - collisionRect.height) / 2,
+          };
+        }
+
+        if (newDroppable.data.current?.type === 'container') {
+          return {
+            x: newRect.left + 20,
+            y: newRect.top + 74,
+          };
+        }
+
+        return {
+          x: newRect.left,
+          y: newRect.top,
+        };
+      }
+    }
+  }
+
+  return undefined;
+};
diff --git a/apps/quick-dapp/src/contexts/index.ts b/apps/quick-dapp/src/contexts/index.ts
new file mode 100644
index 0000000000..c92823eee8
--- /dev/null
+++ b/apps/quick-dapp/src/contexts/index.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const AppContext = createContext<any>({})
diff --git a/apps/quick-dapp/src/index.css b/apps/quick-dapp/src/index.css
new file mode 100644
index 0000000000..ec2585e8c0
--- /dev/null
+++ b/apps/quick-dapp/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/apps/quick-dapp/src/index.html b/apps/quick-dapp/src/index.html
new file mode 100644
index 0000000000..7ec87c231c
--- /dev/null
+++ b/apps/quick-dapp/src/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>QuickDapp</title>
+    <link rel="stylesheet" integrity="ha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" href="https://remix.ethereum.org/assets/fontawesome/css/all.css">
+  </head>
+  <body>
+    <script>
+      var global = window
+    </script>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/apps/quick-dapp/src/main.tsx b/apps/quick-dapp/src/main.tsx
new file mode 100644
index 0000000000..599c94b683
--- /dev/null
+++ b/apps/quick-dapp/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(<App />);
diff --git a/apps/quick-dapp/src/polyfills.ts b/apps/quick-dapp/src/polyfills.ts
new file mode 100644
index 0000000000..53c485753e
--- /dev/null
+++ b/apps/quick-dapp/src/polyfills.ts
@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
diff --git a/apps/quick-dapp/src/profile.json b/apps/quick-dapp/src/profile.json
new file mode 100644
index 0000000000..1bdfb05d8c
--- /dev/null
+++ b/apps/quick-dapp/src/profile.json
@@ -0,0 +1,19 @@
+{
+  "name": "quick-dapp",
+  "displayName": "Quick Dapp",
+  "description": "Edit & deploy a Dapp",
+  "version": "1.0.0",
+  "methods": [
+    "edit"
+  ],
+  "kind": "none",
+  "icon": "assets/img/quickDappLogo.webp",
+  "location": "mainPanel",
+  "url": "plugins/quick-dapp/index.html",
+  "repo": "https://github.com/ethereum/remix-project/tree/master/apps/quick-dapp",
+  "maintainedBy": "Remix",
+  "authorContact": "https://github.com/drafish",
+  "targets": [
+    "remix"
+  ]
+}
diff --git a/apps/quick-dapp/src/reducers/state.ts b/apps/quick-dapp/src/reducers/state.ts
new file mode 100644
index 0000000000..94ee8b92ef
--- /dev/null
+++ b/apps/quick-dapp/src/reducers/state.ts
@@ -0,0 +1,33 @@
+export const appInitialState: any = {
+  loading: { screen: true },
+  instance: {
+    name: '',
+    address: '',
+    network: '',
+    abi: {},
+    items: {},
+    containers: [],
+    theme: 'Dark',
+    userInput: { methods: {} },
+    natSpec: { checked: false, methods: {} },
+  },
+};
+
+export const appReducer = (state = appInitialState, action: any): any => {
+  switch (action.type) {
+  case 'SET_LOADING':
+    return {
+      ...state,
+      loading: { ...state.loading, ...action.payload },
+    };
+
+  case 'SET_INSTANCE':
+    return {
+      ...state,
+      instance: { ...state.instance, ...action.payload },
+    };
+
+  default:
+    throw new Error();
+  }
+};
diff --git a/apps/quick-dapp/src/remix-client.ts b/apps/quick-dapp/src/remix-client.ts
new file mode 100644
index 0000000000..aa3e6f3b94
--- /dev/null
+++ b/apps/quick-dapp/src/remix-client.ts
@@ -0,0 +1,32 @@
+import { PluginClient } from '@remixproject/plugin';
+import { createClient } from '@remixproject/plugin-webview';
+import { initInstance } from './actions';
+
+class RemixClient extends PluginClient {
+  constructor() {
+    super();
+    createClient(this);
+  }
+
+  edit({ address, abi, network, name, devdoc, methodIdentifiers }: any): void {
+    // console.log(
+    //   'edit dapp',
+    //   address,
+    //   abi,
+    //   network,
+    //   name,
+    //   devdoc,
+    //   methodIdentifiers
+    // );
+    initInstance({
+      address,
+      abi,
+      network,
+      name,
+      devdoc,
+      methodIdentifiers,
+    });
+  }
+}
+
+export default new RemixClient();
diff --git a/apps/quick-dapp/tsconfig.app.json b/apps/quick-dapp/tsconfig.app.json
new file mode 100644
index 0000000000..af84f21cfc
--- /dev/null
+++ b/apps/quick-dapp/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/apps/quick-dapp/tsconfig.json b/apps/quick-dapp/tsconfig.json
new file mode 100644
index 0000000000..5aab5e7911
--- /dev/null
+++ b/apps/quick-dapp/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/apps/quick-dapp/webpack.config.js b/apps/quick-dapp/webpack.config.js
new file mode 100644
index 0000000000..4db6b9fc00
--- /dev/null
+++ b/apps/quick-dapp/webpack.config.js
@@ -0,0 +1,90 @@
+const {composePlugins, withNx} = require('@nrwl/webpack')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+
+// Nx plugins for webpack.
+module.exports = composePlugins(withNx(), (config) => {
+  // Update the webpack config as needed here.
+  // e.g. `config.plugins.push(new MyPlugin())`
+  // add fallback for node modules
+  config.resolve.fallback = {
+    ...config.resolve.fallback,
+    crypto: require.resolve('crypto-browserify'),
+    stream: require.resolve('stream-browserify'),
+    path: require.resolve('path-browserify'),
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    constants: require.resolve('constants-browserify'),
+    os: false, //require.resolve("os-browserify/browser"),
+    timers: false, // require.resolve("timers-browserify"),
+    zlib: require.resolve('browserify-zlib'),
+    fs: false,
+    module: false,
+    tls: false,
+    net: false,
+    readline: false,
+    child_process: false,
+    buffer: require.resolve('buffer/'),
+    vm: require.resolve('vm-browserify'),
+  }
+
+  // add externals
+  config.externals = {
+    ...config.externals,
+    solc: 'solc',
+  }
+
+  // add public path
+  config.output.publicPath = './'
+
+  // add copy & provide plugin
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      url: ['url', 'URL'],
+      process: 'process/browser',
+    })
+  )
+
+  // set the define plugin to load the WALLET_CONNECT_PROJECT_ID
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      WALLET_CONNECT_PROJECT_ID: JSON.stringify(process.env.WALLET_CONNECT_PROJECT_ID),
+    })
+  )
+
+  // souce-map loader
+  config.module.rules.push({
+    test: /\.js$/,
+    use: ['source-map-loader'],
+    enforce: 'pre',
+  })
+
+  config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
+
+  // set minimizer
+  config.optimization.minimizer = [
+    new TerserPlugin({
+      parallel: true,
+      terserOptions: {
+        ecma: 2015,
+        compress: false,
+        mangle: false,
+        format: {
+          comments: false,
+        },
+      },
+      extractComments: false,
+    }),
+    new CssMinimizerPlugin(),
+  ]
+
+  config.watchOptions = {
+    ignored: /node_modules/,
+  }
+
+  config.experiments.syncWebAssembly = true
+
+  return config
+})
diff --git a/apps/quick-dapp/yarn.lock b/apps/quick-dapp/yarn.lock
new file mode 100644
index 0000000000..295a40a219
--- /dev/null
+++ b/apps/quick-dapp/yarn.lock
@@ -0,0 +1,70 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@dnd-kit/accessibility@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz#1054e19be276b5f1154ced7947fc0cb5d99192e0"
+  integrity sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==
+  dependencies:
+    tslib "^2.0.0"
+
+"@dnd-kit/core@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz#e81a3d10d9eca5d3b01cbf054171273a3fe01def"
+  integrity sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==
+  dependencies:
+    "@dnd-kit/accessibility" "^3.1.0"
+    "@dnd-kit/utilities" "^3.2.2"
+    tslib "^2.0.0"
+
+"@dnd-kit/sortable@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz#086b7ac6723d4618a4ccb6f0227406d8a8862a96"
+  integrity sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==
+  dependencies:
+    "@dnd-kit/utilities" "^3.2.2"
+    tslib "^2.0.0"
+
+"@dnd-kit/utilities@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b"
+  integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==
+  dependencies:
+    tslib "^2.0.0"
+
+"@drafish/surge-client@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@drafish/surge-client/-/surge-client-1.1.1.tgz#c457f0988e2c11a6867fa42c0189d8f0fa3d3511"
+  integrity sha512-xTRCZfeAaoImYAV72YStozKcMjYs9RhKgLqEvXDx6QyHSI9udiSUyBxtYtt1ymwiF8qBxLwdVcjIUTI7pg+qnA==
+  dependencies:
+    buffer "^6.0.3"
+    pako "^2.1.0"
+
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
+ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+pako@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+
+tslib@^2.0.0:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
diff --git a/apps/remix-ide/project.json b/apps/remix-ide/project.json
index 67c0a39cd3..4a37224fa3 100644
--- a/apps/remix-ide/project.json
+++ b/apps/remix-ide/project.json
@@ -3,7 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/remix-ide/src",
   "projectType": "application",
-  "implicitDependencies": ["doc-gen", "doc-viewer", "etherscan", "vyper", "solhint", "walletconnect", "circuit-compiler", "learneth"],
+  "implicitDependencies": ["doc-gen", "doc-viewer", "etherscan", "vyper", "solhint", "walletconnect", "circuit-compiler", "learneth", "quick-dapp"],
   "targets": {
     "build": {
       "executor": "@nrwl/webpack:webpack",
diff --git a/apps/remix-ide/src/assets/img/quickDappLogo.webp b/apps/remix-ide/src/assets/img/quickDappLogo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..efa8af83a47b9b7e30f36dd260ea9d2275a2d906
GIT binary patch
literal 3474
zcmeH~Su`7p7KRg3MQAissZhiml&G<W#t=he7V1QgsClNw)@f-(O+`=4Qyq?}W>KMP
zC^1D1HC513MN3UVi`H~|)?N4UzTb!Yuf5m$*V-@N+G{`T-`WI?PUHdr><#rS?JU)A
zaR2}S?q7Wd{HIVDOJh$k004xs`pp@GqUcB4>;^q7(YITHuk&rA4Y(k|{ze)41;?I(
zTKKszObW%%1KV_Aj#BW1kka>6*upp1R|VO;y_|BL;um_KS1QJndv2?8Hmj7nt~t7-
zS-WIsNEA0FEmLS)=TYaD>k9$KXQl3Q`x~^p;=4T_@z1I+Ov#YFGo6{l&!uqHH$-Hv
zh7!*1n>!k)`_7?B>49feA2ltDF>7}1r>zmgnT3$8IkNv6188B(kVTcF3v>E|&hl~U
zEk*V{rtM9aAkY4edO(LeE(Z8Mn%dapLELIMIgJ+5C~&-0(N<v5RqOchx^?ka_wJF6
zDC_*<Q{m|0oD5v1tbg2z#<zO$rdLctwEO*VbO6d;GWN~WZKt<cQ#)eECwqS>FRWw~
z#v8uP+g>8-;zNmybC{j@ttW1Zq5-rmI=h1zQTL;z@XH6&*+blO4Ja?fiE~s5;~ZxO
z9U}1AT6ibw@P?X2LLVq$(+N9rveMhp|14qZuyN|A`NG4CDS4v-g+h4WtG5r@=FD|K
z{Udb{`#GrYp-B>wn$oqnx3<RD<0gNEEy!kN+ufl%+icjmdIPkU``6`TwU?W)x6YD2
z!nY4*qv~OwODF|{en7-be!m24ztL*kP%+I<<2~vN{orR`XLMn8atN#TX2W`&1{ch&
z<u0pKdV|q>Q%1VDJtK}n`I0Q386)Gd_wvy`W#!2l9s$n)uR3iqE-@r5O?INX{}2=>
zG?pMvf8hnbTodylbL=bx)HwOhGtDC{lRG2j)*+vLu|8a9F)?-*TVEI8yHrkA6spPy
z?cz0SY7@n>z*9~fGp1y|_Jt?%uraVk<p|=A`=d`W38h=7a_m;ALVf)gkI&D|JDa&w
zrSrFO69G0iX9@ZaD!s$C#hb*7t-Q{s<&T1udaHYB-Y?EW93q2eO!!WoF;8lak-YI^
zk73KRGo%i!%h;t_sAf@{#6-lT+PNlb!5~RUt8$EhU!d%#**k;`rV;QlrSdXBKCbX|
zfpO1B3wpJj*U;aRBS=DA!n+rD#?Gh443#KQc5>i_Dp%{JX()8#hw9T#JJ{@6Xs*@u
zMdNhCIyO1_qzQVLf$i-W8&N7AX4D4+w7ER-JZa)RP_PZn&I#`}6%<xqnjg+QkIaqJ
zH3;0Eok&rtY<EN{ZNG=7AQKljC1pPQ$$t@n-#@JV^r2?bxSxL}#j*`&W2VtJ5Y~|z
z{73?VC>QAB;WLt@xVd#;F&cyM!U{>&pMUOht5$tUU0sm<T}DcvNar=@e*M=z2Xy5@
z!B`3R`U7`W>E-*Q0wbWVd6zO5J#zSPglYVKN)7}x<DLqDy9x?Dmln}$Nn{ayd`(WI
z?*-xtn+if0-6SjYSVb1r*CZpzrYdt8O_3IOtSZglN0GY3rY6OQZkD|GSWS|*uUUeJ
zB^L^U%A2qx3qNKdV6N}ps1OJenM%CI?PI_{&?E|G$>U}v$s03`v9UbzJ%c390b1`h
z{+Mw(J38<W-`i{cu>&@CLLEZM)7<Ux%UG7H@Nl69u*q$cRcqul^ksI>6pMmXfOZhr
z6lX;zk>Bw)Rg_>^<q;mYmB2S090tab@Aw*8h*PX`SDha0aA546TcC|o{51ovST=;R
zeL(|<8P==9T6ya7bGpG4o2;5edk}}YO;9$eaS~R#DvmuTbKU5J5{HG=z4&qEN#UYH
zmZ@{ny1FMj0wUTxL=WP|5O;wnN!c*4Z(tbKARw-iMs!af8iM9HL#bSf8;ov<0%rrX
zR-F(lVHcqnD`VZl6f19j*iBS2RgWR6pd<8&8hS0vL~WfzY79zKofu=N8etG)f)vLK
zEDm$pK%Yw8_<4)v8C+Z75WE8FQtjp;<UedpBS@{8b6V5P&v*Q-sS*FmFof_ncU625
zoXZo-N#coJ737ry56hVI>qx45-7*Ro=MKtv-?Mn(Zd%+yg_(#QH17uScCku=r?HQi
zQu?Ip9i>tlaa*ehWGJMUmIw@y<l7s-$Z3^7$0$_V<lw(aB5BzsE~G^b)SY50+VSvt
zd-7OvH_?UTkx9Sko|KT=aA8CUKdE^?x<Mc+AMAMjWbad*lftTOiN(O)z^ZbK1qGt;
zN%&ax%C-$|M+7uf{Rzsu6fpd-J4RAbvJk=03{SF%%g8sm%ZyfT&W&_dqQZYPXEm$5
zVt?b1l@=KrF{iAC*QcyF&)=-BSqr6;0$lE?<u_v6*z=J6)K={$^4@~JH+4r=z{s%n
z#nJlFVecoA&l<3!gyfm!#W^SbSJU+uD4*Rr{J!{@IoB1oIlfu*@bT909Z`0SOsvab
zr~8Rck8|d`bf((bp~@Zv%)^eaywD!~M5g~{-gzR)sOG}i_&IkjMC?o8Y?xKp`^a)s
zakU9*dKy27>p86<JFl#zNkT*PH;tQoU*BfB$m0nJ0UF3kt1amvv|ndzYqv6$M=V`=
zB~nN;$hX}t%dY)<V9VWF-?1VDRjke@`0f}kv|aZ4_#XQUb)811+o^*oEbRfEF3PX$
zu+4D8s*TXVJJaK`*Gar#Gkx31e>9d1rd(4YZ%6jphKYZbUq9AO!3<TA;n<sUI&lpv
zbqO!AVJvUL=LZi+g@ez@aL3Rce69QYP%y3C^vLIQ@E;s(7}59iL4fEl6yjh?{=Jd+
z)Lv}(2lUgX%PrJ|R{^3l+?9{?56w?qx4ws!PHnaXO7QGD4Md5a#U5Y!w>hz|n}Bnf
z55_S&)n438FZSuwVo=lnWczYW0L7#J^b~DXZnH7`Ee6Pc1zG8S^q1I3>FP(J7NIOK
z<7&WCkk~T{f(dYS+&%nAvHZfkGX!vni=MX{#0z=_Y~~uMSciS}VDg7C!Iuh981fYb
zA%>BU)Z2aTkMpAH$j7Y}%K%4hyvN1a$}Oh%I*tz$$XRta0MUOg+Qv$p6J@@YkyQ4+
z3MlisW0yDM6hw$l<683y;V6zq$UpbG59*E<9G%!*4vl9%-ju$#!pFkY)e#Z`xgpLC
zGwsEp*jX9ETrt3xuW`KJ;ym&7KYr?|6SOhYGSWiqVJf&IKo9e&z1jYK029+0`15^P
zuoz+8EV+F;P)LuE^nJ*7PpgNeyehlm7{tzzl8$7s_IB#q*4IUQacsoa<30Qvm+2fq
zDEDfsZE-S?DaOr;t-Zxlz<_Oi>B&9kHB)vj)!sbOFs>f9yx?4sX*F)xMpdO#Z=r~0
z%W<*4g;O*`Bzt3mb`Zq<iP^Wh#A1c>1|blkp*Mk}wTCk6v21u(=%;;%h5@U-(radi
zL|j2#hE1EcZg&7rB}Ej^Wb)>#RX5gHXN+nAMjEHnmsK4-ejY*q3P78gKi|pDc5kk{
zqlPgBLJkMNW3NcqrM49gd`-Ag({cVa7O!x6k|ddI{IEQHJDg;M`R&C*>Rgauw%LD9
zW8qBZ-S3&RYYc*%cDX*n!SroWgPh7_QH$Kgv94eTl0sy9if>klylIjb>6&4x4r$UR
z)th8%0vQd`&@8*=MuH_zmnOrS-u6ZsB&Hmu*Or)AC61ScWO9CxEltgp)?Z3TXD~sR
z>nhT6#i<L`*si_Z;G+89E9;KGS?2!eNPC7U^snr3n9*?hZEe&BMFZ)SV+IsyCU$5>
z33w|AUMFCCh<xsFu?S<b!I9&@S2bkP!<&%9TZ>7w|GiT#d&BDSN=|Th>ui3-&`mF^
z+mD9io@1UI3@hJhrPD{tIn9bdzzf<QiXG8NbvN`pbX4D+2O&eX(fl6o3Nx1}W$&4m
zJ;}zvgt9(jU9DeEr`HrmI1%39%Dz>Xtd`!2Azqqo|5O-uRs5QCSx@29Grd#r4+~}1
zUmv*0F%ST-)C3d&WdTe8CY?Wxi_9cS;9?@|fO;s%%YQN4S?~sEgL%O>Kdxg&1M+};
sSNO<vS$m&05V@K5^k7a(bem$X|Nrs-<XWl$fYY;i_Db@vi1lCeFS1alb^rhX

literal 0
HcmV?d00001

diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index f512e93f2d..f823069585 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -91,7 +91,7 @@ let requiredModules = [ // services + layout views + system views
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
 const dependentModules = ['foundry', 'hardhat', 'truffle', 'slither']
 
-const loadLocalPlugins = ['doc-gen', 'doc-viewer', 'etherscan', 'vyper', 'solhint', 'walletconnect', 'circuit-compiler', 'learneth']
+const loadLocalPlugins = ['doc-gen', 'doc-viewer', 'etherscan', 'vyper', 'solhint', 'walletconnect', 'circuit-compiler', 'learneth', 'quick-dapp']
 
 const sensitiveCalls = {
   fileManager: ['writeFile', 'copyFile', 'rename', 'copyDir'],
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 10ceded22d..42fd41490d 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -356,7 +356,7 @@ export function RunTabUI(props: RunTabProps) {
             getFuncABIInputs={getFuncABIValues}
             exEnvironment={runTab.selectExEnv}
             editInstance={(instance) => {
-              plugin.call('dapp-draft', 'edit', {
+              plugin.call('quick-dapp', 'edit', {
                 address: instance.address,
                 abi: instance.contractData.abi,
                 name: instance.name,

From 7fc8957fe49fa44429e5edc1673495d37599a113 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 5 Jun 2024 15:19:51 +0800
Subject: [PATCH 47/67] update quick-dapp readme

---
 apps/quick-dapp/README.md | 135 +-------------------------------------
 1 file changed, 1 insertion(+), 134 deletions(-)

diff --git a/apps/quick-dapp/README.md b/apps/quick-dapp/README.md
index ff8a5ce950..d4509521b6 100644
--- a/apps/quick-dapp/README.md
+++ b/apps/quick-dapp/README.md
@@ -1,134 +1 @@
-# Remix LearnEth Plugin
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm run serve:plugin --plugin=learneth`
-
-Runs the app in the development mode.\
-Open [http://localhost:2024](http://localhost:2024) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm run build:plugin --plugin=learneth`
-
-Builds the app for production to the `dist/apps/learneth` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-## Loading the plugin in remix
-
-When testing with localhost you should use the HTTP version of either REMIX or REMIX ALPHA. Click on the plugin manager icon and
-add the plugin 'Connect to a local plugin'. Your plugin will be at http://localhost:2024/.
-
-## Setting up the REMIX IDE for working with the plugin
-
-The plugin only works when a compiler environment is loaded as well, for example on the home screen of the IDE you select 'Solidity' or 'Vyper'. Without this the plugin
-cannot compile and test files in the workshops.
-
-## Setting up your Github workshops repo
-
-You can create your own workshops that can be imported in the plugin.
-When importing a github repo the plugin will look for a directory structure describing the workshops.
-For example: https://github.com/ethereum/remix-workshops
-
-### Root directories
-
-Root directories are individual workshops, the name used will be the name of the workshop unless you override this with the name property in the config.yml.
-
-### README.md
-
-The readme in each directory contains an explanation of what the workshop is about. If an additional summary property is provided in the config.yml that will be used in the overview section of the plugin.
-
-### config.yml
-
-This config file contains metadata describing some properties of your workshop, for example
-
-```
----
-id: someid
-name: my workshop name
-summary: something about this workshop
-level: 4
-tags:
-  - solidity
-  - beginner
-```
-
-Level: a level of difficulty indicator ( 1 - 5 )
-
-Tags: an array of tags
-
-id: this is used by the system to let REMIX call startTutorial(repo,branch,id). See below for more instructions.
-
-### Steps
-
-Each workshop contains what we call steps.
-Each step is a directory containing:
-
-- a readme describing the step, what to do.
-- sol files:
-  - these can be sol files and test sol files. The test files should be name yoursolname_test.sol
-  - ANSWER files: these are named yoursolname_answer.sol and can be used to show the solution or the correct answer. The plugin will load the
-    file in the IDE when a user clicks on 'Show Answer'
-- js files
-- vyper files
-
-## Functions to call the plugin from the IDE
-
-### Add a repository:
-
-```
-addRepository(repoName, branch)
-```
-
-### Start a tutorial
-
-```
-startTutorial(repoName,branch,id)
-```
-
-You don't need to add a separate addRepository before calling startTutorial, this call will also add the repo.
-
-_Parameters_
-
-id: this can be two things:
-
-- type of number, it specifies the n-th tutorial in the list
-- type of string, this refers to the ID parameter in the config.yml file in the tutorial
-  for example:
-
-```
----
-id: basics
-name: 1 Basics of Solidity
-summary: Some basic functions explained
-level: 4
-tags:
-    - solidity
-```
-
-### How to call these functions in the REMIX IDE
-
-```
-(function ()  {
-try {
-    // You don't need to add a separate addRepository before calling startTutorial, this is just an example
-    remix.call('LearnEth', 'addRepository', "ethereum/remix-workshops", "master")
-    remix.call('LearnEth', 'startTutorial', "ethereum/remix-workshops", "master", "basics")
-    remix.call('LearnEth', 'startTutorial', "ethereum/remix-workshops", "master", 2)
-} catch (e) {
-   console.log(e.message)
-}
-})()
-```
-
-Then call this in the REMIX console
-
-```
-remix.exeCurrent()
-```
+# Remix QuickDapp Plugin

From 7b894dcb20536b0f978e05efab06f3380e108a57 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Thu, 13 Jun 2024 10:11:19 +0800
Subject: [PATCH 48/67] add some comments for the references in quick-dapp

---
 apps/quick-dapp/src/actions/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 5990d13cec..52824e6c36 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -8,6 +8,8 @@ import { themeMap } from '../components/DeployPanel/theme';
 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',
   onError: (err: Error) => {
     console.log(err);
@@ -137,6 +139,8 @@ 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://remix-dapp.pages.dev/manifest.json'
   );
   const { src, file, css, assets } = data['index.html'];
@@ -161,6 +165,8 @@ export const deploy = async (payload: any, callback: any) => {
 
   for (let index = 0; index < paths.length; index++) {
     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://remix-dapp.pages.dev/${path}`);
     files[`dir/${path}`] = resp.data;
   }

From b508b329a81dbf59cecdba1f406388a27dff13f9 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Tue, 18 Jun 2024 13:56:15 +0800
Subject: [PATCH 49/67] fix deploy with dynamicImports

---
 apps/quick-dapp/src/actions/index.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 52824e6c36..4aebc365fc 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -143,8 +143,17 @@ export const deploy = async (payload: any, callback: any) => {
     // It's generated through the build process automatically.
     'https://remix-dapp.pages.dev/manifest.json'
   );
-  const { src, file, css, assets } = data['index.html'];
-  const paths = [src, file, ...css, ...assets];
+
+  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 instance = state.instance;
 

From 3995e4eaf92d19d9a3a4b12045758403051a6d74 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 19 Jun 2024 16:58:52 +0800
Subject: [PATCH 50/67] update @drafish/surge-client

---
 apps/quick-dapp/package.json         | 2 +-
 apps/quick-dapp/src/actions/index.ts | 8 ++++++--
 apps/quick-dapp/yarn.lock            | 8 ++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/quick-dapp/package.json b/apps/quick-dapp/package.json
index ed130ad7dc..73cc34a5d8 100644
--- a/apps/quick-dapp/package.json
+++ b/apps/quick-dapp/package.json
@@ -6,6 +6,6 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@drafish/surge-client": "^1.1.1"
+    "@drafish/surge-client": "^1.1.4"
   }
 }
diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 4aebc365fc..35a3bd1e86 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -202,8 +202,12 @@ export const deploy = async (payload: any, callback: any) => {
       },
       onTick: (tick: string) => {},
     });
-  } catch (error) {
-    callback({ code: 'ERROR', error: 'this domain belongs to someone else' });
+  } catch ({ message }: any) {
+    if (message === '403') {
+      callback({ code: 'ERROR', error: 'this domain belongs to someone else' });
+    } else {
+      callback({ code: 'ERROR', error: 'unknow error, please try again' });
+    }
     return;
   }
 
diff --git a/apps/quick-dapp/yarn.lock b/apps/quick-dapp/yarn.lock
index 295a40a219..986fb9289c 100644
--- a/apps/quick-dapp/yarn.lock
+++ b/apps/quick-dapp/yarn.lock
@@ -33,10 +33,10 @@
   dependencies:
     tslib "^2.0.0"
 
-"@drafish/surge-client@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/@drafish/surge-client/-/surge-client-1.1.1.tgz#c457f0988e2c11a6867fa42c0189d8f0fa3d3511"
-  integrity sha512-xTRCZfeAaoImYAV72YStozKcMjYs9RhKgLqEvXDx6QyHSI9udiSUyBxtYtt1ymwiF8qBxLwdVcjIUTI7pg+qnA==
+"@drafish/surge-client@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/@drafish/surge-client/-/surge-client-1.1.4.tgz#786c257ca8e0d6907a02d8e4f885b9358d328d22"
+  integrity sha512-2OfX2fqcykay0BYnodLYEhLKGfehuTRVEuwLbkwOD8ZSpeH2hSvCBGRZgaEvCpznGfU0QNwVZbq2dJVKLxi2Mg==
   dependencies:
     buffer "^6.0.3"
     pako "^2.1.0"

From 50b861cf4e4d48c965f9036c3e7aa9107a7b0561 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 19 Jun 2024 17:09:25 +0800
Subject: [PATCH 51/67] update dapp deployment error

---
 apps/quick-dapp/src/actions/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 35a3bd1e86..45cfdca9f8 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -206,7 +206,7 @@ export const deploy = async (payload: any, callback: any) => {
     if (message === '403') {
       callback({ code: 'ERROR', error: 'this domain belongs to someone else' });
     } else {
-      callback({ code: 'ERROR', error: 'unknow error, please try again' });
+      callback({ code: 'ERROR', error: 'gateway timeout, please try again' });
     }
     return;
   }

From c6c304bcd0c276b999fce2fef81134cacc34d585 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Sun, 30 Jun 2024 12:21:38 +0800
Subject: [PATCH 52/67] make terminal optional

---
 .../src/components/DeployPanel/index.tsx      | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/apps/quick-dapp/src/components/DeployPanel/index.tsx b/apps/quick-dapp/src/components/DeployPanel/index.tsx
index 80312d727d..15caec4b81 100644
--- a/apps/quick-dapp/src/components/DeployPanel/index.tsx
+++ b/apps/quick-dapp/src/components/DeployPanel/index.tsx
@@ -12,7 +12,7 @@ import { AppContext } from '../../contexts';
 
 function DeployPanel(): JSX.Element {
   const { appState, dispatch } = useContext(AppContext);
-  const { verified, natSpec } = appState.instance;
+  const { verified, natSpec, noTerminal } = appState.instance;
   const [formVal, setFormVal] = useState<any>({
     email: localStorage.getItem('__SURGE_EMAIL') || '',
     password: localStorage.getItem('__SURGE_PASSWORD') || '',
@@ -223,6 +223,33 @@ function DeployPanel(): JSX.Element {
             </label>
           </div>
         </Form.Group>
+        <Form.Group className="mb-2" controlId="formNoTerminal">
+          <Form.Label className="text-uppercase mb-0">
+            No Terminal (Optional)
+          </Form.Label>
+          <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+            <input
+              id="inline-checkbox-4"
+              className="form-check-input custom-control-input"
+              type="checkbox"
+              onChange={(e) => {
+                dispatch({
+                  type: 'SET_INSTANCE',
+                  payload: { noTerminal: e.target.checked },
+                });
+              }}
+              checked={noTerminal}
+            />
+
+            <label
+              htmlFor="inline-checkbox-4"
+              className="m-0 form-check-label custom-control-label"
+              style={{ paddingTop: 1 }}
+            >
+              No Terminal
+            </label>
+          </div>
+        </Form.Group>
         <ThemeUI />
         <Button
           variant="primary"

From 8348dc0e11a02e6444ec6cdcfc008e9c6ad4fcb1 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Sun, 30 Jun 2024 18:43:00 +0800
Subject: [PATCH 53/67] hide terminal when quick-dapp is activated

---
 apps/quick-dapp/src/actions/index.ts                 | 3 +++
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 45cfdca9f8..d0fa157f6d 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -36,6 +36,9 @@ export const connectRemix = async () => {
 
   await remixClient.onload();
 
+  // @ts-expect-error
+  await remixClient.call('layout', 'minimize', 'terminal', true);
+
   await dispatch({
     type: 'SET_LOADING',
     payload: {
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 9304f56d3d..29f471be3a 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -27,7 +27,7 @@ import RenderUnKnownTransactions from './components/RenderUnknownTransactions' /
 import RenderCall from './components/RenderCall' // eslint-disable-line
 import RenderKnownTransactions from './components/RenderKnownTransactions' // eslint-disable-line
 import parse from 'html-react-parser'
-import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, SET_ISVM, UNKNOWN_TRANSACTION } from './types/terminalTypes'
+import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, SET_ISVM, SET_OPEN, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
 import { TerminalContext } from './context'
 const _paq = (window._paq = window._paq || [])
@@ -570,6 +570,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
     props.plugin.on('layout', 'change', (panels) => {
       setIsOpen(!panels.terminal.minimized)
+      dispatch({ type: SET_OPEN, payload: !panels.terminal.minimized })
     })
 
     return () => {

From 5cac56ccc910a673b1eff89fdbbda2fa1f28c0b7 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Tue, 2 Jul 2024 19:04:43 +0800
Subject: [PATCH 54/67] add comments in MultipleContainers

---
 .../components/MultipleContainers/index.tsx   | 11 ++++++
 .../multipleContainersKeyboardCoordinates.ts  | 39 +++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/apps/quick-dapp/src/components/MultipleContainers/index.tsx b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
index e2a39b0372..3f9e551ea7 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/index.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
@@ -42,9 +42,11 @@ export default {
   title: 'Presets/Sortable/Multiple Containers',
 };
 
+// This function is used to animate layout changes.
 const animateLayoutChanges: AnimateLayoutChanges = (args) =>
   defaultAnimateLayoutChanges({ ...args, wasDragging: true });
 
+// This is a container component that can be dragged and dropped.
 function DroppableContainer({
   children,
   columns = 1,
@@ -81,6 +83,7 @@ function DroppableContainer({
       items.includes(over.id)
     : false;
 
+  // Return the container.
   return (
     <Container
       ref={disabled ? undefined : setNodeRef}
@@ -103,6 +106,7 @@ function DroppableContainer({
   );
 }
 
+// This setting is used for drop animation.
 const dropAnimation: DropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -113,8 +117,10 @@ const dropAnimation: DropAnimation = {
   }),
 };
 
+// This type is used to define the items.
 type Items = Record<UniqueIdentifier, UniqueIdentifier[]>;
 
+// This interface is used to define the props for the MultipleContainers component.
 interface Props {
   adjustScale?: boolean;
   cancelDrop?: CancelDrop;
@@ -146,6 +152,9 @@ interface Props {
 const PLACEHOLDER_ID = 'placeholder';
 const empty: UniqueIdentifier[] = [];
 
+// This is a complex component. It allows items in multiple containers to be sorted using drag and drop.
+// The containers themselves can also be sorted. The DndContext component from the @dnd-kit/core package provides the drag and drop context.
+// The MultipleContainers component is the main component, it handles the sorting logic when an item is dragged over another item or when an item is dropped.
 export function MultipleContainers({
   adjustScale = false,
   cancelDrop,
@@ -584,6 +593,7 @@ interface SortableItemProps {
   onRemove?: () => void;
 }
 
+// The SortableItem component represents an individual item that can be dragged and dropped.
 function SortableItem({
   disabled,
   id,
@@ -640,6 +650,7 @@ function SortableItem({
   );
 }
 
+// The useMountStatus function is used to track the mount status of a component.
 function useMountStatus() {
   const [isMounted, setIsMounted] = useState(false);
 
diff --git a/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts b/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts
index d59aa7e7b2..8e97b88ae9 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts
+++ b/apps/quick-dapp/src/components/MultipleContainers/multipleContainersKeyboardCoordinates.ts
@@ -6,6 +6,7 @@ import {
   KeyboardCoordinateGetter,
 } from '@dnd-kit/core';
 
+// Define the directions that can be used with the keyboard
 const directions: string[] = [
   KeyboardCode.Down,
   KeyboardCode.Right,
@@ -13,66 +14,93 @@ const directions: string[] = [
   KeyboardCode.Left,
 ];
 
+// This is a custom coordinate getter for keyboard events.
+// It's used to handle keyboard navigation when moving items around in a drag and drop context.
+// It determines the next position of an item based on the direction of the keyboard event.
+// The function filters droppable containers based on their position relative to the currently dragged item,
+// then finds the closest container in the direction of the keyboard event and returns its coordinates.
 export const coordinateGetter: KeyboardCoordinateGetter = (
   event,
   { context: { active, droppableRects, droppableContainers, collisionRect } }
 ) => {
+  // If the key pressed is one of the defined directions
   if (directions.includes(event.code)) {
+    // Prevent the default browser behaviour
     event.preventDefault();
 
+    // If there is no active draggable or collision rectangle, return
     if (!active || !collisionRect) {
       return;
     }
 
+    // Create an array to store the droppable containers that meet the criteria
     const filteredContainers: DroppableContainer[] = [];
 
+    // For each enabled droppable container
     droppableContainers.getEnabled().forEach((entry) => {
+      // If the container is not defined or it is disabled, return
       if (!entry || entry?.disabled) {
         return;
       }
 
+      // Get the rectangle of the droppable container
       const rect = droppableRects.get(entry.id);
 
+      // If the rectangle is not defined, return
       if (!rect) {
         return;
       }
 
+      // Get the data of the droppable container
       const data = entry.data.current;
 
+      // If the data is defined
       if (data) {
         const { type, children } = data;
 
+        // If the droppable container is of type 'container' and it has children
         if (type === 'container' && children?.length > 0) {
+          // If the active draggable is not of type 'container', return
           if (active.data.current?.type !== 'container') {
             return;
           }
         }
       }
 
+      // Depending on the direction of the keyboard event
       switch (event.code) {
+      // If the direction is down and the top of the collision rectangle is above the top of the container rectangle
       case KeyboardCode.Down:
         if (collisionRect.top < rect.top) {
+          // Add the container to the array of filtered containers
           filteredContainers.push(entry);
         }
         break;
+      // If the direction is up and the top of the collision rectangle is below the top of the container rectangle
       case KeyboardCode.Up:
         if (collisionRect.top > rect.top) {
+          // Add the container to the array of filtered containers
           filteredContainers.push(entry);
         }
         break;
+      // If the direction is left and the left of the collision rectangle is to the right of the right of the container rectangle
       case KeyboardCode.Left:
         if (collisionRect.left >= rect.left + rect.width) {
+          // Add the container to the array of filtered containers
           filteredContainers.push(entry);
         }
         break;
+      // If the direction is right and the right of the collision rectangle is to the left of the left of the container rectangle
       case KeyboardCode.Right:
         if (collisionRect.left + collisionRect.width <= rect.left) {
+          // Add the container to the array of filtered containers
           filteredContainers.push(entry);
         }
         break;
       }
     });
 
+    // Get the closest corners of the collision rectangle and the filtered containers
     const collisions = closestCorners({
       active,
       collisionRect: collisionRect,
@@ -80,28 +108,38 @@ export const coordinateGetter: KeyboardCoordinateGetter = (
       droppableContainers: filteredContainers,
       pointerCoordinates: null,
     });
+    // Get the id of the first collision
     const closestId = getFirstCollision(collisions, 'id');
 
+    // If there is a closest id
     if (closestId != null) {
+      // Get the droppable container with the closest id
       const newDroppable = droppableContainers.get(closestId);
+      // Get the node and rectangle of the droppable container
       const newNode = newDroppable?.node.current;
       const newRect = newDroppable?.rect.current;
 
+      // If there is a node and rectangle
       if (newNode && newRect) {
+        // If the droppable container is the placeholder
         if (newDroppable.id === 'placeholder') {
+          // Return the center coordinates of the droppable container
           return {
             x: newRect.left + (newRect.width - collisionRect.width) / 2,
             y: newRect.top + (newRect.height - collisionRect.height) / 2,
           };
         }
 
+        // If the droppable container is of type 'container'
         if (newDroppable.data.current?.type === 'container') {
+          // Return specific coordinates within the droppable container
           return {
             x: newRect.left + 20,
             y: newRect.top + 74,
           };
         }
 
+        // Otherwise, return the top left coordinates of the droppable container
         return {
           x: newRect.left,
           y: newRect.top,
@@ -110,5 +148,6 @@ export const coordinateGetter: KeyboardCoordinateGetter = (
     }
   }
 
+  // If none of the above conditions are met, return undefined
   return undefined;
 };

From 52c4eafc2f9ef9aca4b9d30b04d36e1f758c490b Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 3 Jul 2024 16:38:31 +0800
Subject: [PATCH 55/67] rm console

---
 apps/quick-dapp/src/remix-client.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/apps/quick-dapp/src/remix-client.ts b/apps/quick-dapp/src/remix-client.ts
index aa3e6f3b94..9687dee67c 100644
--- a/apps/quick-dapp/src/remix-client.ts
+++ b/apps/quick-dapp/src/remix-client.ts
@@ -9,15 +9,6 @@ class RemixClient extends PluginClient {
   }
 
   edit({ address, abi, network, name, devdoc, methodIdentifiers }: any): void {
-    // console.log(
-    //   'edit dapp',
-    //   address,
-    //   abi,
-    //   network,
-    //   name,
-    //   devdoc,
-    //   methodIdentifiers
-    // );
     initInstance({
       address,
       abi,

From 5bee5ad753d6480953443b98f55b166edf4adc78 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 3 Jul 2024 16:39:03 +0800
Subject: [PATCH 56/67] rm custom colors

---
 apps/quick-dapp/src/App.css | 45 +++++++++++--------------------------
 1 file changed, 13 insertions(+), 32 deletions(-)

diff --git a/apps/quick-dapp/src/App.css b/apps/quick-dapp/src/App.css
index 1fa7e5637a..5fc3d64ba8 100644
--- a/apps/quick-dapp/src/App.css
+++ b/apps/quick-dapp/src/App.css
@@ -19,14 +19,10 @@
   right: 5px;
   width: 20px;
   height: 20px;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--gray-dark);
 
-  &:active {
-    background-color: rgba(255, 70, 70, 0.9);
-  }
-
-  svg {
-    fill: #fff;
+  .fas {
+    color: var(--text-bg-mark);
   }
 }
 
@@ -39,32 +35,23 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--action-background, rgba(0, 0, 0, 0.05));
-
-      svg {
-        fill: #6f7b88;
-      }
+      background-color: var(--light);
     }
   }
 
-  svg {
-    overflow: visible;
-    fill: #919eab;
+  .fas {
+    color: var(--text-bg-mark);
   }
+}
 
-  &:active {
-    background-color: var(--background, rgba(0, 0, 0, 0.05));
-
-    svg {
-      fill: var(--fill, #788491);
+.bg-light {
+  .item-action {
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--dark);
+      }
     }
   }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
-      0 0px 0px 2px #4c9ffe;
-  }
 }
 
 .container {
@@ -75,11 +62,6 @@
     align-items: center;
     cursor: pointer;
   }
-
-  &:focus-visible {
-    border-color: transparent;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
-  }
 }
 
 
@@ -103,7 +85,6 @@
 
 .instance-input {
   background-color: var(--custom-select) !important;
-  color: #dfe1ea !important;
   font-size: 10px;
 }
 .has-args {

From ef974d066fcc2eb5e83c32c95aa6c158b6cbc584 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 3 Jul 2024 16:39:32 +0800
Subject: [PATCH 57/67] rm svg

---
 .../MultipleContainers/components/Item/Item.tsx     | 13 +------------
 .../components/Item/components/Handle/Handle.tsx    |  4 +---
 .../components/Item/components/Remove/Remove.tsx    |  4 +---
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
index 4ae6c263d3..3184e94d75 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
@@ -3,17 +3,6 @@ import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 import type { Transform } from '@dnd-kit/utilities';
 import { Handle } from './components/Handle';
 
-const removeIcon = (
-  <svg
-    width="10"
-    height="10"
-    viewBox="0 0 22 22"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
-  </svg>
-);
-
 export interface Props {
   dragOverlay?: boolean;
   disabled?: boolean;
@@ -110,7 +99,7 @@ export const Item = React.memo(
               className={`d-flex justify-content-center align-items-center position-absolute border-0 rounded-circle item-remove`}
               onClick={onRemove}
             >
-              {removeIcon}
+              <i className="fas fa-times"></i>
             </button>
           </div>
         </li>
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
index 9cb3215303..e77ccd0a8b 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
@@ -11,9 +11,7 @@ export const Handle = forwardRef<HTMLButtonElement, ActionProps>(
         data-cypress="draggable-handle"
         {...props}
       >
-        <svg viewBox="0 0 20 20" width="12">
-          <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
-        </svg>
+        <i className="fas fa-grip-vertical"></i>
       </Action>
     );
   }
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
index 6bf8252f4f..c4c6c55b90 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
@@ -11,9 +11,7 @@ export function Remove(props: ActionProps) {
         background: 'rgba(255, 70, 70, 0.1)',
       }}
     >
-      <svg width="8" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-        <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
-      </svg>
+      <i className="fas fa-times"></i>
     </Action>
   );
 }

From e5c8f9036c9c5c2e986a32152e902172e07ff422 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Sat, 6 Jul 2024 14:39:47 +0800
Subject: [PATCH 58/67] fallback and receive for quick-dapp

---
 apps/quick-dapp/src/actions/index.ts      | 26 +++++++++++++++++++++++
 apps/quick-dapp/src/remix-client.ts       |  3 ++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx |  8 ++++---
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index d0fa157f6d..fa90328401 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { omitBy } from 'lodash';
+import semver from 'semver';
 import { execution } from '@remix-project/remix-lib';
 import SurgeClient from '@drafish/surge-client';
 import remixClient from '../remix-client';
@@ -16,6 +17,21 @@ const surgeClient = new SurgeClient({
   },
 });
 
+const getVersion = (solcVersion) => {
+  let version = '0.8.25'
+  try {
+    const arr = solcVersion.split('+')
+    if (arr && arr[0]) version = arr[0]
+    if (semver.lt(version, '0.6.0')) {
+      return { version: version, canReceive: false };
+    } else {
+      return { version: version, canReceive: true };
+    }
+  } catch (e) {
+    return { version, canReceive: true };
+  }
+};
+
 let dispatch: any, state: any;
 
 export const initDispatch = (_dispatch: any) => {
@@ -221,6 +237,7 @@ export const deploy = async (payload: any, callback: any) => {
 export const initInstance = async ({
   methodIdentifiers,
   devdoc,
+  solcVersion,
   ...payload
 }: any) => {
   const functionHashes: any = {};
@@ -257,11 +274,18 @@ export const initInstance = async ({
   }
 
   const abi: any = {};
+  const lowLevel: any = {}
   payload.abi.forEach((item: any) => {
     if (item.type === 'function') {
       item.id = encodeFunctionId(item);
       abi[item.id] = item;
     }
+    if (item.type === 'fallback') {
+      lowLevel.fallback = item;
+    }
+    if (item.type === 'receive') {
+      lowLevel.receive = item;
+    }
   });
   const ids = Object.keys(abi);
   const items =
@@ -279,6 +303,8 @@ export const initInstance = async ({
       items,
       containers: Object.keys(items),
       natSpec,
+      solcVersion: getVersion(solcVersion),
+      ...lowLevel,
     },
   });
 };
diff --git a/apps/quick-dapp/src/remix-client.ts b/apps/quick-dapp/src/remix-client.ts
index 9687dee67c..1f213f0a77 100644
--- a/apps/quick-dapp/src/remix-client.ts
+++ b/apps/quick-dapp/src/remix-client.ts
@@ -8,7 +8,7 @@ class RemixClient extends PluginClient {
     createClient(this);
   }
 
-  edit({ address, abi, network, name, devdoc, methodIdentifiers }: any): void {
+  edit({ address, abi, network, name, devdoc, methodIdentifiers, solcVersion }: any): void {
     initInstance({
       address,
       abi,
@@ -16,6 +16,7 @@ class RemixClient extends PluginClient {
       name,
       devdoc,
       methodIdentifiers,
+      solcVersion,
     });
   }
 }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 42fd41490d..403c13b24b 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -356,13 +356,15 @@ export function RunTabUI(props: RunTabProps) {
             getFuncABIInputs={getFuncABIValues}
             exEnvironment={runTab.selectExEnv}
             editInstance={(instance) => {
+              const { metadata, abi, object } = instance.contractData;
               plugin.call('quick-dapp', 'edit', {
                 address: instance.address,
-                abi: instance.contractData.abi,
+                abi: abi,
                 name: instance.name,
                 network: runTab.networkName,
-                devdoc: instance.contractData.object.devdoc,
-                methodIdentifiers: instance.contractData.object.evm.methodIdentifiers,
+                devdoc: object.devdoc,
+                methodIdentifiers: object.evm.methodIdentifiers,
+                solcVersion: JSON.parse(metadata).compiler.version,
               })
             }}
           />

From e99ec6328a6eed9802650e9d1073d302b399c5a9 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Sun, 7 Jul 2024 19:53:27 +0800
Subject: [PATCH 59/67] upload logo in quick-dapp

---
 apps/quick-dapp/package.json                  |  2 +-
 apps/quick-dapp/src/actions/index.ts          | 12 ++-
 .../src/components/EditInstance/index.tsx     | 80 ++++++++++---------
 .../src/components/ImageUpload/index.tsx      | 48 +++++++++++
 apps/quick-dapp/yarn.lock                     |  8 +-
 5 files changed, 105 insertions(+), 45 deletions(-)
 create mode 100644 apps/quick-dapp/src/components/ImageUpload/index.tsx

diff --git a/apps/quick-dapp/package.json b/apps/quick-dapp/package.json
index 73cc34a5d8..b18fa18435 100644
--- a/apps/quick-dapp/package.json
+++ b/apps/quick-dapp/package.json
@@ -6,6 +6,6 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@drafish/surge-client": "^1.1.4"
+    "@drafish/surge-client": "^1.1.5"
   }
 }
diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index fa90328401..5bb71c2c12 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -160,7 +160,7 @@ 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://remix-dapp.pages.dev/manifest.json'
+    'https://dev.remix-dapp.pages.dev/manifest.json'
   );
 
   let paths: any = [];
@@ -174,7 +174,7 @@ export const deploy = async (payload: any, callback: any) => {
     }
   });
 
-  const instance = state.instance;
+  const {logo, ...instance} = state.instance;
 
   const files: Record<string, string> = {
     'dir/instance.json': JSON.stringify({
@@ -195,10 +195,12 @@ 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://remix-dapp.pages.dev/${path}`);
+    const resp = await axios.get(`https://dev.remix-dapp.pages.dev/${path}`);
     files[`dir/${path}`] = resp.data;
   }
 
+  files['dir/logo.png'] = logo
+
   files['dir/index.html'] = files['dir/index.html'].replace(
     'assets/css/themes/remix-dark_tvx1s2.css',
     themeMap[instance.theme].url
@@ -295,6 +297,9 @@ export const initInstance = async ({
         B: ids.slice(ids.length / 2 + 1),
       }
       : { A: ids };
+
+  const logo = await axios.get('https://dev.remix-dapp.pages.dev/logo.png', { responseType: 'arraybuffer' })
+  
   await dispatch({
     type: 'SET_INSTANCE',
     payload: {
@@ -305,6 +310,7 @@ export const initInstance = async ({
       natSpec,
       solcVersion: getVersion(solcVersion),
       ...lowLevel,
+      logo: logo.data,
     },
   });
 };
diff --git a/apps/quick-dapp/src/components/EditInstance/index.tsx b/apps/quick-dapp/src/components/EditInstance/index.tsx
index 72129820e8..0064f24fc4 100644
--- a/apps/quick-dapp/src/components/EditInstance/index.tsx
+++ b/apps/quick-dapp/src/components/EditInstance/index.tsx
@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { omitBy } from 'lodash';
 import { MultipleContainers } from '../MultipleContainers';
 import { AppContext } from '../../contexts';
+import ImageUpload from '../ImageUpload'
 
 function EditInstance(): JSX.Element {
   const { appState, dispatch } = useContext(AppContext);
@@ -9,43 +10,48 @@ function EditInstance(): JSX.Element {
     appState.instance;
   return (
     <div className="col-9 d-inline-block row">
-      <div className="mx-4 my-2 p-3 w-75 bg-light">
-        <input
-          className="form-control"
-          placeholder="Dapp title"
-          value={title}
-          onChange={({ target: { value } }) => {
-            dispatch({
-              type: 'SET_INSTANCE',
-              payload: {
-                title: natSpec.checked && !value ? natSpec.title : value,
-                userInput: omitBy(
-                  { ...userInput, title: value },
-                  (item) => item === ''
-                ),
-              },
-            });
-          }}
-        />
-      </div>
-      <div className="mx-4 my-2 p-3 w-75 bg-light">
-        <textarea
-          className="form-control"
-          placeholder="Dapp instructions"
-          value={details}
-          onChange={({ target: { value } }) => {
-            dispatch({
-              type: 'SET_INSTANCE',
-              payload: {
-                details: natSpec.checked && !value ? natSpec.details : value,
-                userInput: omitBy(
-                  { ...userInput, details: value },
-                  (item) => item === ''
-                ),
-              },
-            });
-          }}
-        />
+      <div className="row">
+        <ImageUpload />
+        <div className="col-9 pl-0">
+          <div className="my-2 p-3 bg-light">
+            <input
+              className="form-control"
+              placeholder="Dapp title"
+              value={title}
+              onChange={({ target: { value } }) => {
+                dispatch({
+                  type: 'SET_INSTANCE',
+                  payload: {
+                    title: natSpec.checked && !value ? natSpec.title : value,
+                    userInput: omitBy(
+                      { ...userInput, title: value },
+                      (item) => item === ''
+                    ),
+                  },
+                });
+              }}
+            />
+          </div>
+          <div className="my-2 p-3 bg-light">
+            <textarea
+              className="form-control"
+              placeholder="Dapp instructions"
+              value={details}
+              onChange={({ target: { value } }) => {
+                dispatch({
+                  type: 'SET_INSTANCE',
+                  payload: {
+                    details: natSpec.checked && !value ? natSpec.details : value,
+                    userInput: omitBy(
+                      { ...userInput, details: value },
+                      (item) => item === ''
+                    ),
+                  },
+                });
+              }}
+            />
+          </div>
+        </div>
       </div>
       <MultipleContainers
         abi={abi}
diff --git a/apps/quick-dapp/src/components/ImageUpload/index.tsx b/apps/quick-dapp/src/components/ImageUpload/index.tsx
new file mode 100644
index 0000000000..150cb0f33b
--- /dev/null
+++ b/apps/quick-dapp/src/components/ImageUpload/index.tsx
@@ -0,0 +1,48 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { CustomTooltip } from '@remix-ui/helper';
+import { AppContext } from '../../contexts'
+
+const ImageUpload = () => {
+  const { appState, dispatch } = useContext(AppContext)
+  const { logo } = appState.instance
+  const [preview, setPreview] = useState(null)
+
+  useEffect(() => {
+    if (logo) {
+      const base64data = btoa(new Uint8Array(logo).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+      setPreview('data:image/jpeg;base64,' + base64data)
+    } else {
+      setPreview(null)
+    }
+  }, [logo])
+
+  const handleImageChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      const reader: any = new FileReader()
+      reader.onloadend = () => {
+        dispatch({ type: 'SET_INSTANCE', payload: { logo: reader.result } })
+      }
+      reader.readAsArrayBuffer(e.target.files[0])
+    }
+  }
+
+  return (
+    <div className="col-3 pr-0">
+      <input className="d-none" type="file" accept="image/*" onChange={handleImageChange} id="upload-button" />
+      <CustomTooltip
+        placement="right"
+        tooltipText="Click here to change logo"
+      >
+        <label htmlFor="upload-button" className="cursor_pointer d-flex justify-content-center align-items-center position-relative" style={{height: 170}}>
+          {logo ? (
+            <img src={preview} alt="preview" style={{ width: 120, height: 120 }} />
+          ) : (
+            <i className="fas fa-upload" style={{ fontSize: 120 }}></i>
+          )}
+        </label>
+      </CustomTooltip>
+    </div>
+  )
+}
+
+export default ImageUpload
diff --git a/apps/quick-dapp/yarn.lock b/apps/quick-dapp/yarn.lock
index 986fb9289c..e0ea43b0dc 100644
--- a/apps/quick-dapp/yarn.lock
+++ b/apps/quick-dapp/yarn.lock
@@ -33,10 +33,10 @@
   dependencies:
     tslib "^2.0.0"
 
-"@drafish/surge-client@^1.1.4":
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/@drafish/surge-client/-/surge-client-1.1.4.tgz#786c257ca8e0d6907a02d8e4f885b9358d328d22"
-  integrity sha512-2OfX2fqcykay0BYnodLYEhLKGfehuTRVEuwLbkwOD8ZSpeH2hSvCBGRZgaEvCpznGfU0QNwVZbq2dJVKLxi2Mg==
+"@drafish/surge-client@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/@drafish/surge-client/-/surge-client-1.1.5.tgz#7663f336dcd23bdc490deb9be01b9f83fab35e04"
+  integrity sha512-kWzs5PlnWDh4sl+WlNkbkNG+o3SNecW7xXvcM4WnQaQe6CB8anwXXmGtp5JEw3zJxKTKRB5W2xViyEszhh89ZQ==
   dependencies:
     buffer "^6.0.3"
     pako "^2.1.0"

From 8daf6223ad15305765daf68952bc37586ec2906c Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Mon, 8 Jul 2024 10:38:27 +0800
Subject: [PATCH 60/67] i18n for quick-dapp

---
 apps/quick-dapp/src/App.tsx                   | 39 +++++++++----
 .../src/components/ContractGUI/index.tsx      |  6 +-
 .../src/components/CreateInstance/index.tsx   | 24 ++++----
 .../src/components/DeployPanel/index.tsx      | 55 ++++++++++---------
 .../src/components/DeployPanel/theme.tsx      |  3 +-
 .../src/components/EditInstance/index.tsx     |  6 +-
 .../src/components/ImageUpload/index.tsx      |  6 +-
 .../components/MultipleContainers/index.tsx   |  6 +-
 .../src/app/tabs/locales/en/quickDapp.json    | 40 ++++++++++++++
 9 files changed, 127 insertions(+), 58 deletions(-)
 create mode 100644 apps/remix-ide/src/app/tabs/locales/en/quickDapp.json

diff --git a/apps/quick-dapp/src/App.tsx b/apps/quick-dapp/src/App.tsx
index 5adacb2e2f..c01f92bb7d 100644
--- a/apps/quick-dapp/src/App.tsx
+++ b/apps/quick-dapp/src/App.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useReducer } from 'react';
+import React, { useEffect, useReducer, useState } from 'react';
+import { IntlProvider } from 'react-intl'
 import CreateInstance from './components/CreateInstance';
 import EditInstance from './components/EditInstance';
 import DeployPanel from './components/DeployPanel';
@@ -15,6 +16,10 @@ import remixClient from './remix-client';
 import './App.css';
 
 function App(): JSX.Element {
+  const [locale, setLocale] = useState<{code: string; messages: any}>({
+    code: 'en',
+    messages: null,
+  })
   const [appState, dispatch] = useReducer(appReducer, appInitialState);
   useEffect(() => {
     updateState(appState);
@@ -29,6 +34,14 @@ function App(): JSX.Element {
       remixClient.on('theme', 'themeChanged', (theme: any) => {
         selectTheme(theme.name);
       });
+      // @ts-ignore
+      remixClient.call('locale', 'currentLocale').then((locale: any) => {
+        setLocale(locale)
+      })
+      // @ts-ignore
+      remixClient.on('locale', 'localeChanged', (locale: any) => {
+        setLocale(locale)
+      })
     });
   }, []);
   return (
@@ -38,17 +51,19 @@ function App(): JSX.Element {
         appState,
       }}
     >
-      {Object.keys(appState.instance.abi).length > 0 ? (
-        <div className="row m-0 pt-3">
-          <EditInstance />
-          <DeployPanel />
-        </div>
-      ) : (
-        <div className="row m-0 pt-3">
-          <CreateInstance />
-        </div>
-      )}
-      <LoadingScreen />
+      <IntlProvider locale={locale.code} messages={locale.messages}>
+        {Object.keys(appState.instance.abi).length > 0 ? (
+          <div className="row m-0 pt-3">
+            <EditInstance />
+            <DeployPanel />
+          </div>
+        ) : (
+          <div className="row m-0 pt-3">
+            <CreateInstance />
+          </div>
+        )}
+        <LoadingScreen />
+      </IntlProvider>
     </AppContext.Provider>
   );
 }
diff --git a/apps/quick-dapp/src/components/ContractGUI/index.tsx b/apps/quick-dapp/src/components/ContractGUI/index.tsx
index 0976531c9e..50f4f6a424 100644
--- a/apps/quick-dapp/src/components/ContractGUI/index.tsx
+++ b/apps/quick-dapp/src/components/ContractGUI/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
 import { execution } from '@remix-project/remix-lib';
 import { saveDetails, saveTitle } from '../../actions';
 
@@ -12,6 +13,7 @@ const getFuncABIInputs = (funABI: any) => {
 };
 
 export function ContractGUI(props: { funcABI: any }) {
+  const intl = useIntl()
   const isConstant =
     props.funcABI.constant !== undefined ? props.funcABI.constant : false;
   const lookupOnly =
@@ -68,7 +70,7 @@ export function ContractGUI(props: { funcABI: any }) {
       <div className="p-2">
         <input
           className="form-control"
-          placeholder="Title of function"
+          placeholder={intl.formatMessage({ id: 'quickDapp.functionTitle' })}
           value={props.funcABI.title}
           onChange={({ target: { value } }) => {
             saveTitle({ id: props.funcABI.id, title: value });
@@ -116,7 +118,7 @@ export function ContractGUI(props: { funcABI: any }) {
       <div className="p-2">
         <textarea
           className="form-control"
-          placeholder="Instructions for function"
+          placeholder={intl.formatMessage({ id: 'quickDapp.functionInstructions' })}
           value={props.funcABI.details}
           onChange={({ target: { value } }) => {
             saveDetails({ id: props.funcABI.id, details: value });
diff --git a/apps/quick-dapp/src/components/CreateInstance/index.tsx b/apps/quick-dapp/src/components/CreateInstance/index.tsx
index 735a1c1535..c71e594864 100644
--- a/apps/quick-dapp/src/components/CreateInstance/index.tsx
+++ b/apps/quick-dapp/src/components/CreateInstance/index.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import { Alert, Button, Form } from 'react-bootstrap';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { initInstance } from '../../actions';
 
 const CreateInstance: React.FC = () => {
+  const intl = useIntl()
   const [formVal, setFormVal] = useState({
     address: '',
     abi: [],
@@ -18,10 +20,10 @@ const CreateInstance: React.FC = () => {
       }}
     >
       <Form.Group className="mb-2" controlId="formAddress">
-        <Form.Label className="text-uppercase mb-0">address</Form.Label>
+        <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.address" /></Form.Label>
         <Form.Control
           type="address"
-          placeholder="Enter address"
+          placeholder={intl.formatMessage({ id: 'quickDapp.enterAddress' })}
           value={formVal.address}
           onChange={(e) => {
             setFormVal({ ...formVal, address: e.target.value });
@@ -35,7 +37,7 @@ const CreateInstance: React.FC = () => {
           as="textarea"
           rows={3}
           type="abi"
-          placeholder="Enter abi"
+          placeholder={intl.formatMessage({ id: 'quickDapp.enterAbi' })}
           value={formVal.abi.length > 0 ? JSON.stringify(formVal.abi) : ''}
           onChange={(e) => {
             let abi = [];
@@ -50,10 +52,10 @@ const CreateInstance: React.FC = () => {
       </Form.Group>
 
       <Form.Group className="mb-2" controlId="formName">
-        <Form.Label className="text-uppercase mb-0">name</Form.Label>
+        <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.name" /></Form.Label>
         <Form.Control
           type="name"
-          placeholder="Enter name"
+          placeholder={intl.formatMessage({ id: 'quickDapp.enterName' })}
           value={formVal.name}
           onChange={(e) => {
             setFormVal({ ...formVal, name: e.target.value });
@@ -62,10 +64,10 @@ const CreateInstance: React.FC = () => {
       </Form.Group>
 
       <Form.Group className="mb-2" controlId="formNetwork">
-        <Form.Label className="text-uppercase mb-0">network</Form.Label>
+        <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.network" /></Form.Label>
         <Form.Control
           type="network"
-          placeholder="Enter network"
+          placeholder={intl.formatMessage({ id: 'quickDapp.enterNetwork' })}
           value={formVal.network}
           onChange={(e) => {
             setFormVal({ ...formVal, network: e.target.value });
@@ -83,14 +85,12 @@ const CreateInstance: React.FC = () => {
           !formVal.abi.length
         }
       >
-        Submit
+        <FormattedMessage id="quickDapp.submit" />
       </Button>
       <Alert className="mt-4" variant="info">
-        Dapp Draft only work for Injected Provider currently. More providers
-        will be adapted in further iterations.
+        <FormattedMessage id="quickDapp.text1" />
         <br />
-        Click the edit icon in a deployed contract will input the parameters
-        automatically.
+        <FormattedMessage id="quickDapp.text2" />
       </Alert>
       <img src='./assets/edit-dapp.png' />
     </Form>
diff --git a/apps/quick-dapp/src/components/DeployPanel/index.tsx b/apps/quick-dapp/src/components/DeployPanel/index.tsx
index 15caec4b81..959bbbb117 100644
--- a/apps/quick-dapp/src/components/DeployPanel/index.tsx
+++ b/apps/quick-dapp/src/components/DeployPanel/index.tsx
@@ -1,5 +1,6 @@
 import React, { useContext, useState } from 'react';
 import { Form, Button, Alert, InputGroup } from 'react-bootstrap';
+import { FormattedMessage, useIntl } from 'react-intl';
 import {
   deploy,
   emptyInstance,
@@ -11,6 +12,7 @@ import { CustomTooltip } from '@remix-ui/helper';
 import { AppContext } from '../../contexts';
 
 function DeployPanel(): JSX.Element {
+  const intl = useIntl()
   const { appState, dispatch } = useContext(AppContext);
   const { verified, natSpec, noTerminal } = appState.instance;
   const [formVal, setFormVal] = useState<any>({
@@ -36,13 +38,13 @@ function DeployPanel(): JSX.Element {
   });
   return (
     <div className="col-3 d-inline-block">
-      <h3 className="mb-3">QuickDapp Admin</h3>
+      <h3 className="mb-3">QuickDapp <FormattedMessage id="quickDapp.admin" /></h3>
       <Button
         onClick={() => {
           resetInstance();
         }}
       >
-        Reset Functions
+        <FormattedMessage id="quickDapp.resetFunctions" />
       </Button>
       <Button
         className="ml-3"
@@ -50,16 +52,19 @@ function DeployPanel(): JSX.Element {
           emptyInstance();
         }}
       >
-        Delete Dapp
+        <FormattedMessage id="quickDapp.deleteDapp" />
       </Button>
       <Alert variant="info" className="my-2">
-        QuickDapp deploys to Surge.sh. Surge accounts are free until you reach a
-        level of use. The email & password you input below will register you
-        with a Surge account. The subdomain is your choice but it must be
-        unique. More about{' '}
-        <a target="_blank" href="https://surge.sh/help/">
-          surge.sh
-        </a>
+        <FormattedMessage
+          id="quickDapp.text3"
+          values={{
+            a: (chunks) => (
+              <a target="_blank" href="https://surge.sh/help/">
+                {chunks}
+              </a>
+            ),
+          }}
+        />
       </Alert>
       <Form
         onSubmit={(e) => {
@@ -71,10 +76,10 @@ function DeployPanel(): JSX.Element {
         }}
       >
         <Form.Group className="mb-2" controlId="formEmail">
-          <Form.Label className="text-uppercase mb-0">Email</Form.Label>
+          <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.email" /></Form.Label>
           <Form.Control
             type="email"
-            placeholder="Surge email"
+            placeholder={intl.formatMessage({ id: 'quickDapp.surgeEmail' })}
             required
             value={formVal.email}
             onChange={(e) => {
@@ -83,10 +88,10 @@ function DeployPanel(): JSX.Element {
           />
         </Form.Group>
         <Form.Group className="mb-2" controlId="formPassword">
-          <Form.Label className="text-uppercase mb-0">Password</Form.Label>
+          <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.password" /></Form.Label>
           <Form.Control
             type="password"
-            placeholder="Surge password"
+            placeholder={intl.formatMessage({ id: 'quickDapp.surgePassword' })}
             required
             value={formVal.password}
             onChange={(e) => {
@@ -95,12 +100,12 @@ function DeployPanel(): JSX.Element {
           />
         </Form.Group>
         <Form.Group className="mb-2" controlId="formPassword">
-          <Form.Label className="text-uppercase mb-0">Subdomain</Form.Label>
+          <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.subdomain" /></Form.Label>
           <InputGroup>
             <InputGroup.Text>https://</InputGroup.Text>
             <Form.Control
               type="subdomain"
-              placeholder="Unique subdomain name"
+              placeholder={intl.formatMessage({ id: 'quickDapp.uniqueSubdomain' })}
               required
               value={formVal.subdomain}
               onChange={(e) => {
@@ -123,7 +128,7 @@ function DeployPanel(): JSX.Element {
         </Form.Group> */}
         <Form.Group className="mb-2" controlId="formShareTo">
           <Form.Label className="text-uppercase mb-0">
-            Share To (Optional)
+            <FormattedMessage id="quickDapp.shareTo" />
           </Form.Label>
           <br />
           <div className="d-inline-flex align-items-center custom-control custom-checkbox">
@@ -171,7 +176,7 @@ function DeployPanel(): JSX.Element {
         </Form.Group>
         <Form.Group className="mb-2" controlId="formShareTo">
           <Form.Label className="text-uppercase mb-0">
-            Use NatSpec (Optional)
+            <FormattedMessage id="quickDapp.useNatSpec" />
           </Form.Label>
           <br />
           <span
@@ -184,7 +189,7 @@ function DeployPanel(): JSX.Element {
           >
             <CustomTooltip
               placement="top"
-              tooltipText="Retrieve info from the contract's NatSpec"
+              tooltipText={intl.formatMessage({ id: 'quickDapp.useNatSpecTooltip' })}
             >
               <i
                 className={
@@ -198,7 +203,7 @@ function DeployPanel(): JSX.Element {
         </Form.Group>
         <Form.Group className="mb-2" controlId="formVerified">
           <Form.Label className="text-uppercase mb-0">
-            Verified by Etherscan (Optional)
+            <FormattedMessage id="quickDapp.verifiedByEtherscan" />
           </Form.Label>
           <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
             <input
@@ -219,13 +224,13 @@ function DeployPanel(): JSX.Element {
               className="m-0 form-check-label custom-control-label"
               style={{ paddingTop: 1 }}
             >
-              Verified
+              <FormattedMessage id="quickDapp.verified" />
             </label>
           </div>
         </Form.Group>
         <Form.Group className="mb-2" controlId="formNoTerminal">
           <Form.Label className="text-uppercase mb-0">
-            No Terminal (Optional)
+            <FormattedMessage id="quickDapp.noTerminal" />
           </Form.Label>
           <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
             <input
@@ -246,7 +251,7 @@ function DeployPanel(): JSX.Element {
               className="m-0 form-check-label custom-control-label"
               style={{ paddingTop: 1 }}
             >
-              No Terminal
+              <FormattedMessage id="quickDapp.no" />
             </label>
           </div>
         </Form.Group>
@@ -260,11 +265,11 @@ function DeployPanel(): JSX.Element {
           {deployState.loading && (
             <i className="fas fa-spinner fa-spin mr-1"></i>
           )}
-          Deploy
+          <FormattedMessage id="quickDapp.deploy" />
         </Button>
         {deployState.code === 'SUCCESS' && (
           <Alert variant="success" className="mt-4">
-            Deployed successfully! <br /> Click the link below to view your dapp
+            <FormattedMessage id="quickDapp.text4" /> <br /> <FormattedMessage id="quickDapp.text5" />
             <br />
             <a
               target="_blank"
diff --git a/apps/quick-dapp/src/components/DeployPanel/theme.tsx b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
index e566168e12..e9d08bfb70 100644
--- a/apps/quick-dapp/src/components/DeployPanel/theme.tsx
+++ b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
@@ -1,4 +1,5 @@
 import { Ref, useContext, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { AppContext } from '../../contexts';
 import { selectTheme } from '../../actions';
 import { Dropdown } from 'react-bootstrap';
@@ -121,7 +122,7 @@ export function ThemeUI() {
 
   return (
     <div className="d-block">
-      <label className="text-uppercase mb-0">Themes</label>
+      <label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.themes" /></label>
       <Dropdown className="w-100">
         <Dropdown.Toggle
           as={CustomToggle}
diff --git a/apps/quick-dapp/src/components/EditInstance/index.tsx b/apps/quick-dapp/src/components/EditInstance/index.tsx
index 0064f24fc4..ac6b18065b 100644
--- a/apps/quick-dapp/src/components/EditInstance/index.tsx
+++ b/apps/quick-dapp/src/components/EditInstance/index.tsx
@@ -1,10 +1,12 @@
 import { useContext } from 'react';
 import { omitBy } from 'lodash';
+import { useIntl } from 'react-intl';
 import { MultipleContainers } from '../MultipleContainers';
 import { AppContext } from '../../contexts';
 import ImageUpload from '../ImageUpload'
 
 function EditInstance(): JSX.Element {
+  const intl = useIntl()
   const { appState, dispatch } = useContext(AppContext);
   const { abi, items, containers, title, details, userInput, natSpec } =
     appState.instance;
@@ -16,7 +18,7 @@ function EditInstance(): JSX.Element {
           <div className="my-2 p-3 bg-light">
             <input
               className="form-control"
-              placeholder="Dapp title"
+              placeholder={intl.formatMessage({ id: 'quickDapp.dappTitle' })}
               value={title}
               onChange={({ target: { value } }) => {
                 dispatch({
@@ -35,7 +37,7 @@ function EditInstance(): JSX.Element {
           <div className="my-2 p-3 bg-light">
             <textarea
               className="form-control"
-              placeholder="Dapp instructions"
+              placeholder={intl.formatMessage({ id: 'quickDapp.dappInstructions' })}
               value={details}
               onChange={({ target: { value } }) => {
                 dispatch({
diff --git a/apps/quick-dapp/src/components/ImageUpload/index.tsx b/apps/quick-dapp/src/components/ImageUpload/index.tsx
index 150cb0f33b..65e88aa24e 100644
--- a/apps/quick-dapp/src/components/ImageUpload/index.tsx
+++ b/apps/quick-dapp/src/components/ImageUpload/index.tsx
@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react'
+import { useIntl } from 'react-intl';
 import { CustomTooltip } from '@remix-ui/helper';
 import { AppContext } from '../../contexts'
 
 const ImageUpload = () => {
+  const intl = useIntl()
   const { appState, dispatch } = useContext(AppContext)
   const { logo } = appState.instance
   const [preview, setPreview] = useState(null)
@@ -31,9 +33,9 @@ const ImageUpload = () => {
       <input className="d-none" type="file" accept="image/*" onChange={handleImageChange} id="upload-button" />
       <CustomTooltip
         placement="right"
-        tooltipText="Click here to change logo"
+        tooltipText={intl.formatMessage({ id: 'quickDapp.uploadLogoTooltip' })}
       >
-        <label htmlFor="upload-button" className="cursor_pointer d-flex justify-content-center align-items-center position-relative" style={{height: 170}}>
+        <label htmlFor="upload-button" className="cursor_pointer d-flex justify-content-center align-items-center position-relative" style={{ height: 170 }}>
           {logo ? (
             <img src={preview} alt="preview" style={{ width: 120, height: 120 }} />
           ) : (
diff --git a/apps/quick-dapp/src/components/MultipleContainers/index.tsx b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
index 3f9e551ea7..ea9109ded2 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/index.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal, unstable_batchedUpdates } from 'react-dom';
+import { FormattedMessage, useIntl } from 'react-intl';
 import {
   CancelDrop,
   closestCenter,
@@ -173,6 +174,7 @@ export function MultipleContainers({
   vertical = false,
   scrollable,
 }: Props) {
+  const intl = useIntl()
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
   const lastOverId = useRef<UniqueIdentifier | null>(null);
   const recentlyMovedToNewContainer = useRef(false);
@@ -442,7 +444,7 @@ export function MultipleContainers({
             <DroppableContainer
               key={containerId}
               id={containerId}
-              label={`Column ${containerId}`}
+              label={`${intl.formatMessage({ id: 'quickDapp.column' })} ${containerId}`}
               columns={columns}
               items={items[containerId]}
               style={containerStyle}
@@ -485,7 +487,7 @@ export function MultipleContainers({
               onClick={handleAddColumn}
               placeholder
             >
-              + Add column
+              + <FormattedMessage id='quickDapp.addColumn' />
             </DroppableContainer>
           )}
         </SortableContext>
diff --git a/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json b/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
new file mode 100644
index 0000000000..4ce5fe9b7e
--- /dev/null
+++ b/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
@@ -0,0 +1,40 @@
+{
+  "quickDapp.address": "address",
+  "quickDapp.enterAddress": "Enter address",
+  "quickDapp.enterAbi": "Enter abi",
+  "quickDapp.name": "name",
+  "quickDapp.enterName": "Enter name",
+  "quickDapp.network": "network",
+  "quickDapp.enterNetwork": "Enter network",
+  "quickDapp.submit": "Submit",
+  "quickDapp.text1": "QuickDapp only work for Injected Provider currently. More providers will be adapted in further iterations.",
+  "quickDapp.text2": "Click the edit icon in a deployed contract will input the parameters automatically.",
+  "quickDapp.admin": "Admin",
+  "quickDapp.resetFunctions": "Reset Functions",
+  "quickDapp.deleteDapp": "Delete Dapp",
+  "quickDapp.text3": "QuickDapp deploys to Surge.sh. Surge accounts are free until you reach a level of use. The email & password you input below will register you with a Surge account. The subdomain is your choice but it must be unique. More about <a>surge.sh</a>",
+  "quickDapp.email": "Email",
+  "quickDapp.surgeEmail": "Surge email",
+  "quickDapp.password": "Password",
+  "quickDapp.surgePassword": "Surge password",
+  "quickDapp.subdomain": "Subdomain",
+  "quickDapp.uniqueSubdomain": "Unique subdomain name",
+  "quickDapp.shareTo": "Share To (Optional)",
+  "quickDapp.useNatSpec": "Use NatSpec (Optional)",
+  "quickDapp.useNatSpecTooltip": "Retrieve info from the contract's NatSpec",
+  "quickDapp.verifiedByEtherscan": "Verified by Etherscan (Optional)",
+  "quickDapp.verified": "Verified",
+  "quickDapp.noTerminal": "No Terminal (Optional)",
+  "quickDapp.no": "No",
+  "quickDapp.themes": "Themes",
+  "quickDapp.deploy": "Deploy",
+  "quickDapp.text4": "Deployed successfully!",
+  "quickDapp.text5": "Click the link below to view your dapp",
+  "quickDapp.uploadLogoTooltip": "Click here to change logo",
+  "quickDapp.dappTitle": "Dapp Title",
+  "quickDapp.dappInstructions": "Dapp Instructions",
+  "quickDapp.functionTitle": "Title of function",
+  "quickDapp.functionInstructions": "Instructions for function",
+  "quickDapp.addColumn": "Add column",
+  "quickDapp.column": "Column"
+}

From a7f01cfb45cda35a5e4944ffdbb7da0a8f6021f5 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 17 Jul 2024 15:38:49 +0800
Subject: [PATCH 61/67] double check dapp deployment

---
 apps/quick-dapp/src/actions/index.ts | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 5bb71c2c12..d27d264d14 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -176,12 +176,14 @@ export const deploy = async (payload: any, callback: any) => {
 
   const {logo, ...instance} = state.instance;
 
+  const instanceJson = JSON.stringify({
+    ...instance,
+    shortname: payload.shortname,
+    shareTo: payload.shareTo,
+  })
+
   const files: Record<string, string> = {
-    'dir/instance.json': JSON.stringify({
-      ...instance,
-      shortname: payload.shortname,
-      shareTo: payload.shareTo,
-    }),
+    'dir/instance.json': instanceJson,
   };
 
   // console.log(
@@ -200,7 +202,7 @@ export const deploy = async (payload: any, callback: any) => {
   }
 
   files['dir/logo.png'] = logo
-
+  files['dir/CORS'] = '*'
   files['dir/index.html'] = files['dir/index.html'].replace(
     'assets/css/themes/remix-dark_tvx1s2.css',
     themeMap[instance.theme].url
@@ -232,7 +234,15 @@ export const deploy = async (payload: any, callback: any) => {
     return;
   }
 
-  callback({ code: 'SUCCESS', error: '' });
+  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`);
+    if (instanceResp.status === 200 && JSON.stringify(instanceResp.data) === instanceJson) {
+      callback({ code: 'SUCCESS', error: '' });
+      return;
+    }
+  } catch (error) {}
+  callback({ code: 'ERROR', error: 'deploy failed, please try again' });
   return;
 };
 
@@ -299,7 +309,7 @@ export const initInstance = async ({
       : { A: ids };
 
   const logo = await axios.get('https://dev.remix-dapp.pages.dev/logo.png', { responseType: 'arraybuffer' })
-  
+
   await dispatch({
     type: 'SET_INSTANCE',
     payload: {

From a1565b7b69a6ab121bd98cab66df4a01a300d051 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 17 Jul 2024 15:41:39 +0800
Subject: [PATCH 62/67] add teardown and data-id for quick-dapp e2e

---
 apps/quick-dapp/src/actions/index.ts          | 42 +++++++++++
 .../src/components/ContractGUI/index.tsx      |  4 +-
 .../src/components/DeployPanel/index.tsx      | 75 +++++++++++++++----
 .../src/components/DeployPanel/theme.tsx      |  3 +-
 .../src/components/EditInstance/index.tsx     |  2 +
 .../src/components/ImageUpload/index.tsx      |  2 +-
 .../components/Container/Container.tsx        |  6 +-
 .../components/Item/Item.tsx                  |  5 +-
 .../components/MultipleContainers/index.tsx   |  9 ++-
 .../src/app/tabs/locales/en/quickDapp.json    |  2 +
 .../src/lib/components/universalDappUI.tsx    |  1 +
 11 files changed, 127 insertions(+), 24 deletions(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index d27d264d14..2c791e42ea 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -244,8 +244,50 @@ export const deploy = async (payload: any, callback: any) => {
   } catch (error) {}
   callback({ code: 'ERROR', error: 'deploy failed, please try again' });
   return;
+
 };
 
+export const teardown = async (payload: any, callback: any) => {
+  const surgeToken = localStorage.getItem('__SURGE_TOKEN');
+  const surgeEmail = localStorage.getItem('__SURGE_EMAIL');
+  let isLogin = false;
+  if (surgeToken && surgeEmail === payload.email) {
+    try {
+      await surgeClient.whoami();
+      isLogin = true;
+    } catch (error) {
+      /* empty */
+    }
+  }
+  if (!isLogin) {
+    try {
+      await surgeClient.login({
+        user: payload.email,
+        password: payload.password,
+      });
+      localStorage.setItem('__SURGE_EMAIL', payload.email);
+      localStorage.setItem('__SURGE_PASSWORD', payload.password);
+      localStorage.setItem('__DISQUS_SHORTNAME', payload.shortname);
+    } catch (error: any) {
+      callback({ code: 'ERROR', error: error.message });
+      return;
+    }
+  }
+
+  try {
+    await surgeClient.teardown(`${payload.subdomain}.surge.sh`);
+  } catch ({ message }: any) {
+    if (message === '403') {
+      callback({ code: 'ERROR', error: 'this domain belongs to someone else' });
+    } else {
+      callback({ code: 'ERROR', error: 'gateway timeout, please try again' });
+    }
+    return;
+  }
+  callback({ code: 'SUCCESS', error: '' });
+  return;
+}
+
 export const initInstance = async ({
   methodIdentifiers,
   devdoc,
diff --git a/apps/quick-dapp/src/components/ContractGUI/index.tsx b/apps/quick-dapp/src/components/ContractGUI/index.tsx
index 50f4f6a424..f66f095ca1 100644
--- a/apps/quick-dapp/src/components/ContractGUI/index.tsx
+++ b/apps/quick-dapp/src/components/ContractGUI/index.tsx
@@ -12,7 +12,7 @@ const getFuncABIInputs = (funABI: any) => {
   return txHelper.inputParametersDeclarationToString(funABI.inputs);
 };
 
-export function ContractGUI(props: { funcABI: any }) {
+export function ContractGUI(props: { funcABI: any, funcId: any }) {
   const intl = useIntl()
   const isConstant =
     props.funcABI.constant !== undefined ? props.funcABI.constant : false;
@@ -69,6 +69,7 @@ export function ContractGUI(props: { funcABI: any }) {
     <div className={`d-inline-block`} style={{ width: '90%' }}>
       <div className="p-2">
         <input
+          data-id={`functionTitle${props.funcId}`}
           className="form-control"
           placeholder={intl.formatMessage({ id: 'quickDapp.functionTitle' })}
           value={props.funcABI.title}
@@ -117,6 +118,7 @@ export function ContractGUI(props: { funcABI: any }) {
       </div>
       <div className="p-2">
         <textarea
+          data-id={`functionInstructions${props.funcId}`}
           className="form-control"
           placeholder={intl.formatMessage({ id: 'quickDapp.functionInstructions' })}
           value={props.funcABI.details}
diff --git a/apps/quick-dapp/src/components/DeployPanel/index.tsx b/apps/quick-dapp/src/components/DeployPanel/index.tsx
index 959bbbb117..8eba18e683 100644
--- a/apps/quick-dapp/src/components/DeployPanel/index.tsx
+++ b/apps/quick-dapp/src/components/DeployPanel/index.tsx
@@ -1,8 +1,9 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { Form, Button, Alert, InputGroup } from 'react-bootstrap';
 import { FormattedMessage, useIntl } from 'react-intl';
 import {
   deploy,
+  teardown,
   emptyInstance,
   resetInstance,
   getInfoFromNatSpec,
@@ -36,10 +37,21 @@ function DeployPanel(): JSX.Element {
     error: '',
     loading: false,
   });
+  const [teardownState, setTeardownState] = useState({
+    code: '',
+    error: '',
+    loading: false,
+  });
+
+  useEffect(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  }, [deployState, teardownState])
+
   return (
     <div className="col-3 d-inline-block">
-      <h3 className="mb-3">QuickDapp <FormattedMessage id="quickDapp.admin" /></h3>
+      <h3 className="mb-3" data-id="quick-dapp-admin">QuickDapp <FormattedMessage id="quickDapp.admin" /></h3>
       <Button
+        data-id="resetFunctions"
         onClick={() => {
           resetInstance();
         }}
@@ -47,6 +59,7 @@ function DeployPanel(): JSX.Element {
         <FormattedMessage id="quickDapp.resetFunctions" />
       </Button>
       <Button
+        data-id="deleteDapp"
         className="ml-3"
         onClick={() => {
           emptyInstance();
@@ -78,6 +91,7 @@ function DeployPanel(): JSX.Element {
         <Form.Group className="mb-2" controlId="formEmail">
           <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.email" /></Form.Label>
           <Form.Control
+            data-id="surgeEmail"
             type="email"
             placeholder={intl.formatMessage({ id: 'quickDapp.surgeEmail' })}
             required
@@ -90,6 +104,7 @@ function DeployPanel(): JSX.Element {
         <Form.Group className="mb-2" controlId="formPassword">
           <Form.Label className="text-uppercase mb-0"><FormattedMessage id="quickDapp.password" /></Form.Label>
           <Form.Control
+            data-id="surgePassword"
             type="password"
             placeholder={intl.formatMessage({ id: 'quickDapp.surgePassword' })}
             required
@@ -104,6 +119,7 @@ function DeployPanel(): JSX.Element {
           <InputGroup>
             <InputGroup.Text>https://</InputGroup.Text>
             <Form.Control
+              data-id="surgeSubdomain"
               type="subdomain"
               placeholder={intl.formatMessage({ id: 'quickDapp.uniqueSubdomain' })}
               required
@@ -133,7 +149,7 @@ function DeployPanel(): JSX.Element {
           <br />
           <div className="d-inline-flex align-items-center custom-control custom-checkbox">
             <input
-              id="inline-checkbox-1"
+              id="shareToTwitter"
               className="form-check-input custom-control-input"
               type="checkbox"
               name="group1"
@@ -145,7 +161,7 @@ function DeployPanel(): JSX.Element {
             />
 
             <label
-              htmlFor="inline-checkbox-1"
+              htmlFor="shareToTwitter"
               className="m-0 form-check-label custom-control-label"
               style={{ paddingTop: 1 }}
             >
@@ -154,7 +170,7 @@ function DeployPanel(): JSX.Element {
           </div>
           <div className="d-inline-flex align-items-center custom-control custom-checkbox ml-3">
             <input
-              id="inline-checkbox-2"
+              id="shareToFacebook"
               className="form-check-input custom-control-input"
               type="checkbox"
               name="group1"
@@ -166,7 +182,7 @@ function DeployPanel(): JSX.Element {
             />
 
             <label
-              htmlFor="inline-checkbox-2"
+              htmlFor="shareToFacebook"
               className="m-0 form-check-label custom-control-label"
               style={{ paddingTop: 1 }}
             >
@@ -180,8 +196,8 @@ function DeployPanel(): JSX.Element {
           </Form.Label>
           <br />
           <span
-            data-id="remix_ai_switch"
-            id="remix_ai_switch"
+            data-id="useNatSpec"
+            id="useNatSpec"
             className="btn ai-switch pl-0 py-0"
             onClick={async () => {
               getInfoFromNatSpec(!natSpec.checked);
@@ -207,7 +223,7 @@ function DeployPanel(): JSX.Element {
           </Form.Label>
           <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
             <input
-              id="inline-checkbox-3"
+              id="verifiedByEtherscan"
               className="form-check-input custom-control-input"
               type="checkbox"
               onChange={(e) => {
@@ -220,7 +236,7 @@ function DeployPanel(): JSX.Element {
             />
 
             <label
-              htmlFor="inline-checkbox-3"
+              htmlFor="verifiedByEtherscan"
               className="m-0 form-check-label custom-control-label"
               style={{ paddingTop: 1 }}
             >
@@ -234,7 +250,7 @@ function DeployPanel(): JSX.Element {
           </Form.Label>
           <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
             <input
-              id="inline-checkbox-4"
+              id="noTerminal"
               className="form-check-input custom-control-input"
               type="checkbox"
               onChange={(e) => {
@@ -247,7 +263,7 @@ function DeployPanel(): JSX.Element {
             />
 
             <label
-              htmlFor="inline-checkbox-4"
+              htmlFor="noTerminal"
               className="m-0 form-check-label custom-control-label"
               style={{ paddingTop: 1 }}
             >
@@ -257,6 +273,7 @@ function DeployPanel(): JSX.Element {
         </Form.Group>
         <ThemeUI />
         <Button
+          data-id="deployDapp"
           variant="primary"
           type="submit"
           className="mt-3"
@@ -267,21 +284,51 @@ function DeployPanel(): JSX.Element {
           )}
           <FormattedMessage id="quickDapp.deploy" />
         </Button>
+        <Button
+          data-id="teardownDapp"
+          variant="primary"
+          className="mt-3 ml-3"
+          disabled={!formVal.email || !formVal.password || !formVal.subdomain}
+          // hide this button for now, just for e2e use
+          style={{ display: 'none' }}
+          onClick={() => {
+            setTeardownState({ code: '', error: '', loading: true });
+            teardown(formVal, (state) => {
+              setTeardownState({ ...state, loading: false });
+            })
+          }}
+        >
+          {teardownState.loading && (
+            <i className="fas fa-spinner fa-spin mr-1"></i>
+          )}
+          <FormattedMessage id="quickDapp.teardown" />
+        </Button>
         {deployState.code === 'SUCCESS' && (
-          <Alert variant="success" className="mt-4">
+          <Alert variant="success" className="mt-4" data-id="deploySuccess">
             <FormattedMessage id="quickDapp.text4" /> <br /> <FormattedMessage id="quickDapp.text5" />
             <br />
             <a
+              data-id="dappUrl"
               target="_blank"
               href={`https://${formVal.subdomain}.surge.sh`}
             >{`https://${formVal.subdomain}.surge.sh`}</a>
           </Alert>
         )}
         {deployState.error && (
-          <Alert variant="danger" className="mt-4">
+          <Alert variant="danger" className="mt-4" data-id="deployFail">
             {deployState.error}
           </Alert>
         )}
+        {teardownState.code === 'SUCCESS' && (
+          <Alert variant="success" className="mt-4" data-id="teardownSuccess">
+            <FormattedMessage id="quickDapp.text6" />
+          </Alert>
+        )}
+        {teardownState.error && (
+          <Alert variant="danger" className="mt-4" data-id="teardownFail">
+            {teardownState.error}
+          </Alert>
+        )}
       </Form>
     </div>
   );
diff --git a/apps/quick-dapp/src/components/DeployPanel/theme.tsx b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
index e9d08bfb70..5e96b547c9 100644
--- a/apps/quick-dapp/src/components/DeployPanel/theme.tsx
+++ b/apps/quick-dapp/src/components/DeployPanel/theme.tsx
@@ -56,6 +56,8 @@ const CustomToggle = React.forwardRef(
         e.preventDefault();
         onClick(e);
       }}
+      id="dropdown-custom-components"
+      data-id="selectThemesOptions"
       className={className.replace('dropdown-toggle', '')}
     >
       <div className="d-flex">
@@ -126,7 +128,6 @@ export function ThemeUI() {
       <Dropdown className="w-100">
         <Dropdown.Toggle
           as={CustomToggle}
-          id="dropdown-custom-components"
           className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control"
           icon={''}
         >
diff --git a/apps/quick-dapp/src/components/EditInstance/index.tsx b/apps/quick-dapp/src/components/EditInstance/index.tsx
index ac6b18065b..3ad08ceb13 100644
--- a/apps/quick-dapp/src/components/EditInstance/index.tsx
+++ b/apps/quick-dapp/src/components/EditInstance/index.tsx
@@ -17,6 +17,7 @@ function EditInstance(): JSX.Element {
         <div className="col-9 pl-0">
           <div className="my-2 p-3 bg-light">
             <input
+              data-id="dappTitle"
               className="form-control"
               placeholder={intl.formatMessage({ id: 'quickDapp.dappTitle' })}
               value={title}
@@ -36,6 +37,7 @@ function EditInstance(): JSX.Element {
           </div>
           <div className="my-2 p-3 bg-light">
             <textarea
+              data-id="dappInstructions"
               className="form-control"
               placeholder={intl.formatMessage({ id: 'quickDapp.dappInstructions' })}
               value={details}
diff --git a/apps/quick-dapp/src/components/ImageUpload/index.tsx b/apps/quick-dapp/src/components/ImageUpload/index.tsx
index 65e88aa24e..74deb54a74 100644
--- a/apps/quick-dapp/src/components/ImageUpload/index.tsx
+++ b/apps/quick-dapp/src/components/ImageUpload/index.tsx
@@ -30,7 +30,7 @@ const ImageUpload = () => {
 
   return (
     <div className="col-3 pr-0">
-      <input className="d-none" type="file" accept="image/*" onChange={handleImageChange} id="upload-button" />
+      <input data-id="uploadLogo" className="d-none" type="file" accept="image/*" onChange={handleImageChange} id="upload-button" />
       <CustomTooltip
         placement="right"
         tooltipText={intl.formatMessage({ id: 'quickDapp.uploadLogoTooltip' })}
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
index 3790e4cb66..026a2a6c73 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
@@ -51,15 +51,15 @@ export const Container = forwardRef<HTMLDivElement, Props>(
           >
             {label}
             <div className={`d-flex container-actions`}>
-              <Remove onClick={onRemove} />
-              <Handle {...handleProps} />
+              <Remove onClick={onRemove} data-id={`remove${label.replace(/\s*/g,"")}`} />
+              <Handle {...handleProps} data-id={`handle${label.replace(/\s*/g,"")}`} />
             </div>
           </div>
         ) : null}
         {placeholder ? (
           children
         ) : (
-          <ul className="p-0 m-0 list-unstyled" style={{ overflowY: 'auto' }}>
+          <ul className="p-0 m-0 list-unstyled" style={{ overflowY: 'auto' }} data-id={`container${label.replace(/\s*/g,"")}`}>
             {children}
           </ul>
         )}
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
index 3184e94d75..3485d4ad69 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
@@ -20,6 +20,7 @@ export interface Props {
   wrapperStyle?: React.CSSProperties;
   children: React.ReactNode;
   onRemove?(): void;
+  id?: any;
 }
 
 export const Item = React.memo(
@@ -42,6 +43,7 @@ export const Item = React.memo(
         transform,
         children,
         wrapperStyle,
+        id,
         ...props
       },
       ref
@@ -93,9 +95,10 @@ export const Item = React.memo(
           >
             <div className="border-dark bg-light d-flex">
               {children}
-              <Handle {...handleProps} {...listeners} />
+              <Handle {...handleProps} {...listeners} data-id={`handle${id}`} />
             </div>
             <button
+              data-id={`remove${id}`}
               className={`d-flex justify-content-center align-items-center position-absolute border-0 rounded-circle item-remove`}
               onClick={onRemove}
             >
diff --git a/apps/quick-dapp/src/components/MultipleContainers/index.tsx b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
index ea9109ded2..a7cea589b1 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/index.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/index.tsx
@@ -508,6 +508,7 @@ export function MultipleContainers({
   function renderSortableItemDragOverlay(id: UniqueIdentifier) {
     return (
       <Item
+        id={id}
         handle={handle}
         style={getItemStyles({
           containerId: findContainer(id) as UniqueIdentifier,
@@ -521,7 +522,7 @@ export function MultipleContainers({
         wrapperStyle={wrapperStyle({ index: 0 })}
         dragOverlay
       >
-        <ContractGUI funcABI={abi[id]} />
+        <ContractGUI funcABI={abi[id]} funcId={id} />
       </Item>
     );
   }
@@ -532,6 +533,7 @@ export function MultipleContainers({
         {items[containerId].map((item, index) => (
           <Item
             key={item}
+            id={item}
             handle={handle}
             style={getItemStyles({
               containerId,
@@ -544,7 +546,7 @@ export function MultipleContainers({
             })}
             wrapperStyle={wrapperStyle({ index })}
           >
-            <ContractGUI funcABI={abi[item]} />
+            <ContractGUI funcABI={abi[item]} funcId={item} />
           </Item>
         ))}
       </Container>
@@ -626,6 +628,7 @@ function SortableItem({
 
   return (
     <Item
+      id={id}
       ref={disabled ? undefined : setNodeRef}
       dragging={isDragging}
       sorting={isSorting}
@@ -647,7 +650,7 @@ function SortableItem({
       listeners={listeners}
       onRemove={onRemove}
     >
-      <ContractGUI funcABI={abi[id]} />
+      <ContractGUI funcABI={abi[id]} funcId={id} />
     </Item>
   );
 }
diff --git a/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json b/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
index 4ce5fe9b7e..1a7164f261 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
@@ -28,8 +28,10 @@
   "quickDapp.no": "No",
   "quickDapp.themes": "Themes",
   "quickDapp.deploy": "Deploy",
+  "quickDapp.teardown": "Teardown",
   "quickDapp.text4": "Deployed successfully!",
   "quickDapp.text5": "Click the link below to view your dapp",
+  "quickDapp.text6": "Teardown successfully!",
   "quickDapp.uploadLogoTooltip": "Click here to change logo",
   "quickDapp.dappTitle": "Dapp Title",
   "quickDapp.dappInstructions": "Dapp Instructions",
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 79a0490710..6aa426d1d5 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -300,6 +300,7 @@ export function UniversalDappUI(props: UdappProps) {
               {props.exEnvironment && props.exEnvironment.startsWith('injected') && (
                 <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappEditTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextEdit" />}>
                   <i
+                    data-id="instanceEditIcon"
                     className="fas fa-edit pr-3"
                     onClick={() => {
                       props.editInstance(props.instance)

From 3b4961e2c132ce7efb49c4214608ab78e085fa21 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Wed, 17 Jul 2024 19:21:35 +0800
Subject: [PATCH 63/67] add e2e for quick-dapp

---
 .../src/components/DeployPanel/index.tsx      |  36 ++-
 .../remix-ide-e2e/src/tests/quickDapp.test.ts | 213 ++++++++++++++++++
 2 files changed, 227 insertions(+), 22 deletions(-)
 create mode 100644 apps/remix-ide-e2e/src/tests/quickDapp.test.ts

diff --git a/apps/quick-dapp/src/components/DeployPanel/index.tsx b/apps/quick-dapp/src/components/DeployPanel/index.tsx
index 8eba18e683..48a774a9bd 100644
--- a/apps/quick-dapp/src/components/DeployPanel/index.tsx
+++ b/apps/quick-dapp/src/components/DeployPanel/index.tsx
@@ -303,30 +303,22 @@ function DeployPanel(): JSX.Element {
           )}
           <FormattedMessage id="quickDapp.teardown" />
         </Button>
-        {deployState.code === 'SUCCESS' && (
-          <Alert variant="success" className="mt-4" data-id="deploySuccess">
-            <FormattedMessage id="quickDapp.text4" /> <br /> <FormattedMessage id="quickDapp.text5" />
-            <br />
-            <a
-              data-id="dappUrl"
-              target="_blank"
-              href={`https://${formVal.subdomain}.surge.sh`}
-            >{`https://${formVal.subdomain}.surge.sh`}</a>
+        {deployState.code !== '' && (
+          <Alert variant={deployState.code === 'SUCCESS' ? "success" : "danger"} className="mt-4" data-id="deployResult">
+            {deployState.code === 'SUCCESS' ? <>
+              <FormattedMessage id="quickDapp.text4" /> <br /> <FormattedMessage id="quickDapp.text5" />
+              <br />
+              <a
+                data-id="dappUrl"
+                target="_blank"
+                href={`https://${formVal.subdomain}.surge.sh`}
+              >{`https://${formVal.subdomain}.surge.sh`}</a>
+            </> : deployState.error}
           </Alert>
         )}
-        {deployState.error && (
-          <Alert variant="danger" className="mt-4" data-id="deployFail">
-            {deployState.error}
-          </Alert>
-        )}
-        {teardownState.code === 'SUCCESS' && (
-          <Alert variant="success" className="mt-4" data-id="teardownSuccess">
-            <FormattedMessage id="quickDapp.text6" />
-          </Alert>
-        )}
-        {teardownState.error && (
-          <Alert variant="danger" className="mt-4" data-id="teardownFail">
-            {teardownState.error}
+        {teardownState.code !== '' && (
+          <Alert variant={teardownState.code === 'SUCCESS' ? "success" : "danger"} className="mt-4" data-id="teardownResult">
+            {teardownState.code === 'SUCCESS' ? <FormattedMessage id="quickDapp.text6" /> : teardownState.error}
           </Alert>
         )}
       </Form>
diff --git a/apps/remix-ide-e2e/src/tests/quickDapp.test.ts b/apps/remix-ide-e2e/src/tests/quickDapp.test.ts
new file mode 100644
index 0000000000..5913ffb2ce
--- /dev/null
+++ b/apps/remix-ide-e2e/src/tests/quickDapp.test.ts
@@ -0,0 +1,213 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import path from 'path'
+import axios from 'axios'
+import crypto from 'crypto'
+import init from '../helpers/init'
+
+const passphrase = process.env.account_passphrase
+const password = process.env.account_password
+const extension_id = 'nkbihfbeogaeaoehlefnkodbefgpgknn'
+const extension_url = `chrome-extension://${extension_id}/home.html`
+const address = '0xc55Ad2a09718634faC91Cca4b9cCAcea7d11ac80'
+const surgeEmail = 'e2e@remix.org'
+const surgePassword = 'remixe2e'
+const surgeSubdomain = 'remixe2e'
+const logoFilePath = path.resolve(__dirname, '../../../remix-ide/assets/img/remixLogo.webp')
+const logoHash = 'ba8db45b3af49365bd482c7037dacaf1c549dc73c070ad963922adfeece4f37d'
+
+const checkBrowserIsChrome = function (browser: NightwatchBrowser) {
+  return browser.browserName.indexOf('chrome') > -1
+}
+
+const tests = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+
+  '@sources': function () {
+    return sources
+  },
+
+  'Should connect to Sepolia Test Network using MetaMask #group1': function (browser: NightwatchBrowser) {
+    if (!checkBrowserIsChrome(browser)) return
+    browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
+      .setupMetamask(passphrase, password)
+      .useCss().switchBrowserTab(0)
+      .refreshPage()
+      .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+      .click('*[data-id="landingPageStartSolidity"]')
+      .clickLaunchIcon('udapp')
+      .switchEnvironment('injected-MetaMask')
+      .waitForElementPresent('*[data-id="settingsNetworkEnv"]')
+      .assert.containsText('*[data-id="settingsNetworkEnv"]', 'Sepolia (11155111) network')
+      .pause(5000)
+      .switchBrowserWindow(extension_url, 'MetaMask', (browser) => {
+        browser
+          .waitForElementVisible('*[data-testid="page-container-footer-next"]', 60000)
+          .click('*[data-testid="page-container-footer-next"]') // this connects the metamask account to remix
+          .pause(2000)
+          .waitForElementVisible('*[data-testid="page-container-footer-next"]', 60000)
+          .click('*[data-testid="page-container-footer-next"]')
+          // .waitForElementVisible('*[data-testid="popover-close"]')
+          // .click('*[data-testid="popover-close"]')
+      })
+      .switchBrowserTab(0) // back to remix
+  },
+
+  'Should load quick-dapp plugin #group1': function (browser: NightwatchBrowser) {
+    if (!checkBrowserIsChrome(browser)) return
+    browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
+      .useCss()
+      .openFile('contracts')
+      .openFile('contracts/1_Storage.sol')
+      .clickLaunchIcon('udapp')
+      .clickLaunchIcon('udapp')
+      .addAtAddressInstance(address, true, true, false)
+      .waitForElementPresent(`*[data-id="unpinnedInstance${address}"]`)
+      .clickInstance(0)
+      .click('*[data-id="instanceEditIcon"]')
+      .pause(5000)
+      .frame(0)
+      .assert.containsText('*[data-id="quick-dapp-admin"]', 'QuickDapp Admin')
+  },
+
+  'Should edit and deploy a dapp to surge.sh #group1': function (browser: NightwatchBrowser) {
+    if (!checkBrowserIsChrome(browser)) return
+
+    browser.perform((done) => {
+      browser.findElement('.container.placeholder', (el: any) => {
+        browser.dragAndDrop('*[data-id="handle0x2e64cec1"]', el.value.getId())
+          .dragAndDrop('*[data-id="handleColumnA"]', el.value.getId())
+          .click('.container.placeholder')
+          .click('*[data-id="removeColumnC"]')
+          .perform(() => done())
+      })
+    })
+      .setValue('input[data-id="surgeEmail"]', surgeEmail)
+      .setValue('input[data-id="surgePassword"]', surgePassword)
+      .setValue('input[data-id="surgeSubdomain"]', surgeSubdomain)
+      .setValue('input[data-id="functionTitle0x6057361d"]', 'Function Store Title')
+      .setValue('input[data-id="functionTitle0x2e64cec1"]', 'Function Retrive Title')
+      .execute((function() {
+        document.querySelector('input[data-id="uploadLogo"]').classList.remove('d-none');
+      }))
+      .setValue('input[data-id="uploadLogo"]', logoFilePath)
+      .execute((function() {
+        document.querySelector('input[data-id="uploadLogo"]').classList.add('d-none');
+      }))
+      .click('[for="shareToTwitter"]')
+      .click('[for="shareToFacebook"]')
+      .click('*[data-id="useNatSpec"]')
+      .click('[for="verifiedByEtherscan"]')
+      .click('[for="noTerminal"]')
+      .click('*[data-id="selectThemesOptions"]')
+      .click('*[data-id="dropdown-item-Light"]')
+      .click('*[data-id="deployDapp"]')
+      .waitForElementVisible('*[data-id="deployResult"]', 20000)
+      .perform((done) => {
+        browser.getAttribute('*[data-id="deployResult"]', 'class', function (result) {
+          // @ts-expect-error
+          if (result.value.includes('alert-danger')) {
+            browser.click('*[data-id="deployDapp"]').waitForElementVisible('*[data-id="deployResult"]', 20000).perform(() => done())
+          } else {
+            done()
+          }
+        })
+      })
+      .assert.containsText('*[data-id="deployResult"]', `https://${surgeSubdomain}.surge.sh`)
+  },
+
+  'Should load and call dapp successfully #group1': function (browser: NightwatchBrowser) {
+    if (!checkBrowserIsChrome(browser)) return
+    browser
+      .switchBrowserTab(1).url(`https://${surgeSubdomain}.surge.sh`)
+      .pause(5000)
+      .switchBrowserWindow(extension_url, 'MetaMask', (browser) => {
+        browser
+          .waitForElementVisible('*[data-testid="page-container-footer-next"]', 60000)
+          .click('*[data-testid="page-container-footer-next"]') // this connects the metamask account to remix
+          .pause(2000)
+          .waitForElementVisible('*[data-testid="page-container-footer-next"]', 60000)
+          .click('*[data-testid="page-container-footer-next"]')
+        // .waitForElementVisible('*[data-testid="popover-close"]')
+        // .click('*[data-testid="popover-close"]')
+      })
+      .switchBrowserTab(1)
+      .setValue('input[placeholder="uint256 num"]', '11')
+      .pause(1000)
+      .click('*[data-id="store - transact (not payable)"]')
+      .perform((done) => {
+        browser.switchBrowserWindow(extension_url, 'MetaMask', (browser) => {
+          browser
+            .isVisible({
+              selector: 'button[data-testid="popover-close"]',
+              locateStrategy: 'css selector',
+              suppressNotFoundErrors: true,
+              timeout: 3000
+            }, (okVisible) => {
+              console.log('okVisible', okVisible)
+              if (!okVisible.value) {
+                console.log('popover not found')
+              } else {
+                browser.click('button[data-testid="popover-close"]').click('.transaction-status-label--unapproved')
+              }
+            })
+            .waitForElementPresent('[data-testid="page-container-footer-next"]', 60000)
+            .click('[data-testid="page-container-footer-next"]') // approve the tx
+            .perform(() => done())
+        })
+      })
+      .switchBrowserTab(1) // back to dapp
+      .waitForElementVisible('.Toastify__toast--success', 60000)
+      .assert.containsText('.Toastify__toast--success', 'success')
+      .click('*[data-id="retrieve - call"]')
+      .waitForElementVisible('*[data-id="treeViewDiv0"]', 20000)
+      .assert.containsText('*[data-id="treeViewDiv0"]', 'uint256: 11')
+      .perform((done) => {
+        axios.get(`https://${surgeSubdomain}.surge.sh/logo.png?t=${new Date().getTime()}`, { responseType: 'arraybuffer' }).then((resp) => {
+          const hash = crypto.createHash('sha256');
+          hash.update(resp.data);
+          const hashValue = hash.digest('hex');
+          console.log('Hash:', hashValue);
+          browser.assert.strictEqual(hashValue, logoHash, 'Hash values match!').perform(() => done())
+        })
+      })
+      .assert.containsText('*[data-id="functionTitle0x6057361d"]', 'Function Store Title')
+      .assert.containsText('*[data-id="functionTitle0x2e64cec1"]', 'Function Retrive Title')
+      .assert.containsText('*[data-id="dappTitle"]', 'Storage')
+      .assert.containsText('*[data-id="dappInstructions"]', 'Store & retrieve value in a variable')
+      .assert.elementPresent('.fa-twitter.btn', 'Twitter icon should be present')
+      .assert.elementPresent('.fa-facebook.btn', 'Facebook icon should be present')
+      .checkElementStyle(':root', '--secondary', '#b3bcc483')
+      .element('css selector', '#terminal-view', function (result) {
+        browser.assert.strictEqual(result.status, -1)
+      })
+      .getAttribute('a[data-id="viewSourceCode"]', 'href', function (result) {
+        browser.assert.strictEqual(result.value, `https://remix.ethereum.org/address/${address}`)
+      })
+  },
+
+  'Should teardown dapp successfully #group1': function (browser: NightwatchBrowser) {
+    if (!checkBrowserIsChrome(browser)) return
+    browser.switchBrowserTab(0).frame(0)
+      .execute((function() {
+        // @ts-expect-error
+        document.querySelector('*[data-id="teardownDapp"]').style.display = 'inline-block';
+      }))
+      .pause(500)
+      .click('*[data-id="teardownDapp"]')
+      .waitForElementVisible('*[data-id="teardownResult"]', 30000)
+      .assert.containsText('*[data-id="teardownResult"]', 'Teardown successfully!')
+  }
+}
+
+const branch = process.env.CIRCLE_BRANCH;
+const isMasterBranch = branch === 'master';
+
+module.exports = {
+  ...(branch ? (isMasterBranch ? tests : {}) : tests),
+};
+
+const sources = []

From 0db17edca8bf913d0bbe685ecd267696991686c4 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Thu, 18 Jul 2024 12:26:26 +0800
Subject: [PATCH 64/67] update quick-dapp e2e

---
 .../src/components/CreateInstance/index.tsx   |  19 ++-
 .../remix-ide-e2e/src/tests/quickDapp.test.ts | 139 ++++++++++++++++--
 2 files changed, 137 insertions(+), 21 deletions(-)

diff --git a/apps/quick-dapp/src/components/CreateInstance/index.tsx b/apps/quick-dapp/src/components/CreateInstance/index.tsx
index c71e594864..9f4f763a20 100644
--- a/apps/quick-dapp/src/components/CreateInstance/index.tsx
+++ b/apps/quick-dapp/src/components/CreateInstance/index.tsx
@@ -11,6 +11,7 @@ const CreateInstance: React.FC = () => {
     name: '',
     network: '',
   });
+  const [error, setError] = useState('')
   return (
     <Form
       className="w-50 m-auto"
@@ -38,17 +39,22 @@ const CreateInstance: React.FC = () => {
           rows={3}
           type="abi"
           placeholder={intl.formatMessage({ id: 'quickDapp.enterAbi' })}
-          value={formVal.abi.length > 0 ? JSON.stringify(formVal.abi) : ''}
           onChange={(e) => {
+            setError('')
             let abi = [];
-            try {
-              abi = JSON.parse(e.target.value);
-            } catch (error) {
-              /* empty */
+            if (e.target.value !== '') {
+              try {
+                abi = JSON.parse(e.target.value);
+              } catch (error) {
+                setError(error.toString())
+              }
             }
             setFormVal({ ...formVal, abi });
           }}
         />
+        {error && <Form.Text className='text-danger'>
+          {error}
+        </Form.Text>}
       </Form.Group>
 
       <Form.Group className="mb-2" controlId="formName">
@@ -78,6 +84,7 @@ const CreateInstance: React.FC = () => {
         variant="primary"
         type="submit"
         className="mt-2"
+        data-id="createDapp"
         disabled={
           !formVal.address ||
           !formVal.name ||
@@ -87,7 +94,7 @@ const CreateInstance: React.FC = () => {
       >
         <FormattedMessage id="quickDapp.submit" />
       </Button>
-      <Alert className="mt-4" variant="info">
+      <Alert className="mt-4" variant="info" data-id="quickDappTooltips">
         <FormattedMessage id="quickDapp.text1" />
         <br />
         <FormattedMessage id="quickDapp.text2" />
diff --git a/apps/remix-ide-e2e/src/tests/quickDapp.test.ts b/apps/remix-ide-e2e/src/tests/quickDapp.test.ts
index 5913ffb2ce..fa10a63d2f 100644
--- a/apps/remix-ide-e2e/src/tests/quickDapp.test.ts
+++ b/apps/remix-ide-e2e/src/tests/quickDapp.test.ts
@@ -9,7 +9,7 @@ const passphrase = process.env.account_passphrase
 const password = process.env.account_password
 const extension_id = 'nkbihfbeogaeaoehlefnkodbefgpgknn'
 const extension_url = `chrome-extension://${extension_id}/home.html`
-const address = '0xc55Ad2a09718634faC91Cca4b9cCAcea7d11ac80'
+const address = '0x3b3f6501A7fE68d22eFbc07d4424D4b9115C3038'
 const surgeEmail = 'e2e@remix.org'
 const surgePassword = 'remixe2e'
 const surgeSubdomain = 'remixe2e'
@@ -60,8 +60,7 @@ const tests = {
     if (!checkBrowserIsChrome(browser)) return
     browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
       .useCss()
-      .openFile('contracts')
-      .openFile('contracts/1_Storage.sol')
+      .addFile('Storage.sol', sources[0]['Storage.sol'])
       .clickLaunchIcon('udapp')
       .clickLaunchIcon('udapp')
       .addAtAddressInstance(address, true, true, false)
@@ -76,15 +75,16 @@ const tests = {
   'Should edit and deploy a dapp to surge.sh #group1': function (browser: NightwatchBrowser) {
     if (!checkBrowserIsChrome(browser)) return
 
-    browser.perform((done) => {
-      browser.findElement('.container.placeholder', (el: any) => {
-        browser.dragAndDrop('*[data-id="handle0x2e64cec1"]', el.value.getId())
-          .dragAndDrop('*[data-id="handleColumnA"]', el.value.getId())
-          .click('.container.placeholder')
-          .click('*[data-id="removeColumnC"]')
-          .perform(() => done())
+    browser.click('.container.placeholder')
+      .perform((done) => {
+        browser.findElement('*[data-id="containerColumnC"]', (el: any) => {
+          browser.dragAndDrop('*[data-id="handle0x6057361d"]', el.value.getId())
+            .dragAndDrop('*[data-id="handleColumnA"]', el.value.getId())
+            .click('*[data-id="remove0x1003e2d2"]')
+            .click('*[data-id="removeColumnA"]')
+            .perform(() => done())
+        })
       })
-    })
       .setValue('input[data-id="surgeEmail"]', surgeEmail)
       .setValue('input[data-id="surgePassword"]', surgePassword)
       .setValue('input[data-id="surgeSubdomain"]', surgeSubdomain)
@@ -182,16 +182,42 @@ const tests = {
       .assert.elementPresent('.fa-facebook.btn', 'Facebook icon should be present')
       .checkElementStyle(':root', '--secondary', '#b3bcc483')
       .element('css selector', '#terminal-view', function (result) {
-        browser.assert.strictEqual(result.status, -1)
+        browser.assert.strictEqual(result.status, -1, 'terminal should not shown')
+      })
+      .element('css selector', '*[data-id="function0x1003e2d2"]', function (result) {
+        browser.assert.strictEqual(result.status, -1, 'function add should not shown')
+      })
+      .getLocation('*[data-id="function0x6057361d"]', function (result: any) {
+        const funcStoreLocation = result.value
+        browser.getLocation('*[data-id="function0x2e64cec1"]', function (result: any) {
+          const funcRetriveLocation = result.value
+          browser.assert.strictEqual(funcStoreLocation.y, funcRetriveLocation.y, 'Both functions should be on the same horizontal line')
+          browser.assert.ok(funcStoreLocation.x > funcRetriveLocation.x, 'Function Store should be on the right of Function Retrive')
+        })
       })
       .getAttribute('a[data-id="viewSourceCode"]', 'href', function (result) {
-        browser.assert.strictEqual(result.value, `https://remix.ethereum.org/address/${address}`)
+        browser.assert.strictEqual(result.value, `https://remix.ethereum.org/address/${address}`, 'view source code url should match')
       })
   },
 
-  'Should teardown dapp successfully #group1': function (browser: NightwatchBrowser) {
+  'Should reset and delete and submit dapp params #group1': function (browser: NightwatchBrowser) {
     if (!checkBrowserIsChrome(browser)) return
     browser.switchBrowserTab(0).frame(0)
+      .click('*[data-id="resetFunctions"]')
+      .assert.elementPresent('*[data-id="remove0x1003e2d2"]', 'Function add should be present again')
+      .click('*[data-id="deleteDapp"]')
+      .assert.containsText('*[data-id="quickDappTooltips"]', 'QuickDapp only work for Injected Provider currently')
+      .setValue('input[id="formAddress"]', address)
+      .setValue('textarea[id="formAbi"]', abi)
+      .setValue('input[id="formName"]', 'Storage')
+      .setValue('input[id="formNetwork"]', 'Sepolia (11155111) network')
+      .click('*[data-id="createDapp"]')
+      .assert.containsText('*[data-id="quick-dapp-admin"]', 'QuickDapp Admin')
+  },
+
+  'Should teardown dapp successfully #group1': function (browser: NightwatchBrowser) {
+    if (!checkBrowserIsChrome(browser)) return
+    browser.setValue('input[data-id="surgeSubdomain"]', surgeSubdomain)
       .execute((function() {
         // @ts-expect-error
         document.querySelector('*[data-id="teardownDapp"]').style.display = 'inline-block';
@@ -210,4 +236,87 @@ module.exports = {
   ...(branch ? (isMasterBranch ? tests : {}) : tests),
 };
 
-const sources = []
+const sources = [
+  {
+    'Storage.sol': {
+      content:
+      `
+      // SPDX-License-Identifier: GPL-3.0
+
+      pragma solidity >=0.8.2 <0.9.0;
+
+      /**
+       * @title Storage
+       * @dev Store & retrieve value in a variable
+       * @custom:dev-run-script ./scripts/deploy_with_ethers.ts
+       */
+      contract Storage {
+
+          uint256 number;
+
+          /**
+           * @dev Store value in variable
+           * @param num value to store
+           */
+          function store(uint256 num) public {
+              number = num;
+          }
+
+          /**
+           * @dev Return value
+           * @return value of 'number'
+           */
+          function retrieve() public view returns (uint256){
+              return number;
+          }
+
+          function add(uint256 num) public {
+              number = number + num;
+          }
+
+      }`
+    }
+  }
+]
+
+const abi = JSON.stringify([
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "num",
+        "type": "uint256"
+      }
+    ],
+    "name": "add",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "retrieve",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "num",
+        "type": "uint256"
+      }
+    ],
+    "name": "store",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+])

From 3aa39f779bddd0ff7347dbd69a9244e64ff218f9 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Thu, 18 Jul 2024 17:39:10 +0800
Subject: [PATCH 65/67] fix lint

---
 apps/quick-dapp/src/actions/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/quick-dapp/src/actions/index.ts b/apps/quick-dapp/src/actions/index.ts
index 2c791e42ea..fb42b459aa 100644
--- a/apps/quick-dapp/src/actions/index.ts
+++ b/apps/quick-dapp/src/actions/index.ts
@@ -174,7 +174,7 @@ export const deploy = async (payload: any, callback: any) => {
     }
   });
 
-  const {logo, ...instance} = state.instance;
+  const { logo, ...instance } = state.instance;
 
   const instanceJson = JSON.stringify({
     ...instance,

From e792b34219820e6816399b1e952127e9941813bd Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Tue, 13 Aug 2024 16:55:07 +0800
Subject: [PATCH 66/67] optimize MultipleContainers

---
 .../MultipleContainers/components/Container/Container.tsx   | 3 ++-
 .../{Item/components/Remove => Container}/Remove.tsx        | 6 +-----
 .../components/Item/{components/Action => }/Action.tsx      | 2 --
 .../components/Item/{components/Handle => }/Handle.tsx      | 2 +-
 .../components/MultipleContainers/components/Item/Item.tsx  | 2 +-
 .../components/Item/components/Action/index.ts              | 2 --
 .../components/Item/components/Handle/index.ts              | 1 -
 .../components/Item/components/Remove/index.ts              | 1 -
 .../MultipleContainers/components/Item/components/index.ts  | 3 ---
 .../components/MultipleContainers/components/Item/index.ts  | 3 ++-
 .../src/components/MultipleContainers/components/index.ts   | 2 +-
 11 files changed, 8 insertions(+), 19 deletions(-)
 rename apps/quick-dapp/src/components/MultipleContainers/components/{Item/components/Remove => Container}/Remove.tsx (52%)
 rename apps/quick-dapp/src/components/MultipleContainers/components/Item/{components/Action => }/Action.tsx (89%)
 rename apps/quick-dapp/src/components/MultipleContainers/components/Item/{components/Handle => }/Handle.tsx (85%)
 delete mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts
 delete mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts
 delete mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts
 delete mode 100644 apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts

diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
index 026a2a6c73..517979415b 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import { Handle, Remove } from '../Item';
+import { Handle } from '../Item';
+import { Remove } from './Remove'
 
 export interface Props {
   children: React.ReactNode;
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Remove.tsx
similarity index 52%
rename from apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
rename to apps/quick-dapp/src/components/MultipleContainers/components/Container/Remove.tsx
index c4c6c55b90..9210c97971 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/Remove.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Container/Remove.tsx
@@ -1,15 +1,11 @@
 import React from 'react';
 
-import { Action, ActionProps } from '../Action';
+import { Action, Props as ActionProps } from '../Item/Action';
 
 export function Remove(props: ActionProps) {
   return (
     <Action
       {...props}
-      active={{
-        fill: 'rgba(255, 70, 70, 0.95)',
-        background: 'rgba(255, 70, 70, 0.1)',
-      }}
     >
       <i className="fas fa-times"></i>
     </Action>
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Action.tsx
similarity index 89%
rename from apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx
rename to apps/quick-dapp/src/components/MultipleContainers/components/Item/Action.tsx
index 49901e3b16..ec2ef3ca4f 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/Action.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Action.tsx
@@ -20,8 +20,6 @@ export const Action = forwardRef<HTMLButtonElement, Props>(
           {
             ...style,
             cursor,
-            '--fill': active?.fill,
-            '--background': active?.background,
             width: 12,
           } as CSSProperties
         }
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Handle.tsx
similarity index 85%
rename from apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
rename to apps/quick-dapp/src/components/MultipleContainers/components/Item/Handle.tsx
index e77ccd0a8b..48b056db5e 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/Handle.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Handle.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { Action, ActionProps } from '../Action';
+import { Action, Props as ActionProps } from './Action';
 
 export const Handle = forwardRef<HTMLButtonElement, ActionProps>(
   (props, ref) => {
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
index 3485d4ad69..1b2fa0fe9f 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 import type { Transform } from '@dnd-kit/utilities';
-import { Handle } from './components/Handle';
+import { Handle } from './Handle';
 
 export interface Props {
   dragOverlay?: boolean;
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts
deleted file mode 100644
index 4b3291686b..0000000000
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Action } from './Action';
-export type { Props as ActionProps } from './Action';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts
deleted file mode 100644
index 316aeed4f4..0000000000
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Handle } from './Handle';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts
deleted file mode 100644
index b7c2fb22e7..0000000000
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Remove } from './Remove';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts
deleted file mode 100644
index fb2af46f16..0000000000
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Action } from './Action';
-export { Handle } from './Handle';
-export { Remove } from './Remove';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts
index a08123dad3..f237606814 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts
@@ -1,2 +1,3 @@
 export { Item } from './Item';
-export { Action, Handle, Remove } from './components';
+export { Action } from './Action';
+export { Handle } from './Handle';
diff --git a/apps/quick-dapp/src/components/MultipleContainers/components/index.ts b/apps/quick-dapp/src/components/MultipleContainers/components/index.ts
index 48624748a5..eb349c43c7 100644
--- a/apps/quick-dapp/src/components/MultipleContainers/components/index.ts
+++ b/apps/quick-dapp/src/components/MultipleContainers/components/index.ts
@@ -1,3 +1,3 @@
 export { Container } from './Container';
 export type { ContainerProps } from './Container';
-export { Item, Action, Handle, Remove } from './Item';
+export { Item, Action, Handle } from './Item';

From 32b5e47644fb4eb33cc27009392f4959dc546417 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Tue, 13 Aug 2024 16:55:35 +0800
Subject: [PATCH 67/67] use bootstrap classes

---
 apps/quick-dapp/src/components/LoadingScreen/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/quick-dapp/src/components/LoadingScreen/index.tsx b/apps/quick-dapp/src/components/LoadingScreen/index.tsx
index 78d9741f16..68c0f0c25e 100644
--- a/apps/quick-dapp/src/components/LoadingScreen/index.tsx
+++ b/apps/quick-dapp/src/components/LoadingScreen/index.tsx
@@ -8,10 +8,10 @@ const LoadingScreen: React.FC = () => {
 
   return loading ? (
     <div
-      className="w-100 h-100 position-fixed opacity-100 z-3"
+      className="w-100 h-100 position-fixed bg-dark z-3"
       style={{
         top: 0,
-        backgroundColor: 'rgba(51, 51, 51, 0.8)',
+        opacity: 0.8
       }}
     >
       <BounceLoader