AI DApp Generation

apps/quick-dapp-v2/.eslintrc

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

apps/quick-dapp-v2/README.md

@@ -0,0 +1 @@
+# Remix QuickDapp V2 Plugin

apps/quick-dapp-v2/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "quick-dapp-v2",
+  "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.5",
+    "cid": "multiformats/cid",
+    "esbuild-wasm": "^0.25.12",
+    "ethers": "^6.15.0",
+    "ipfs-http-client": "^47.0.1"
+  }
+}

apps/quick-dapp-v2/project.json

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

apps/quick-dapp-v2/src/App.css

@@ -0,0 +1,127 @@
+/* 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: var(--gray-dark);
+
+  .fas {
+    color: var(--text-bg-mark);
+  }
+}
+
+.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(--bs-light);
+    }
+  }
+
+  .fas {
+    color: var(--text-bg-mark);
+  }
+}
+
+.bg-light {
+  .item-action {
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--dark);
+      }
+    }
+  }
+}
+
+.container {
+  flex-direction: column;
+
+  &.placeholder {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+
+
+.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;
+  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(--bs-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);
+}

apps/quick-dapp-v2/src/App.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useReducer, useState } from 'react';
+import { IntlProvider } from 'react-intl'
+import CreateInstance from './components/CreateInstance';
+import EditInstance from './components/EditInstance';
+import EditHtmlTemplate from './components/EditHtmlTemplate';
+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 [locale, setLocale] = useState<{code: string; messages: any}>({
+    code: 'en',
+    messages: null,
+  })
+  const [appState, dispatch] = useReducer(appReducer, appInitialState);
+  const { isAiLoading } = appState;
+
+  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);
+      });
+      // @ts-ignore
+      remixClient.call('locale', 'currentLocale').then((locale: any) => {
+        setLocale(locale)
+      })
+      // @ts-ignore
+      remixClient.on('locale', 'localeChanged', (locale: any) => {
+        setLocale(locale)
+      })
+      // @ts-ignore
+      remixClient.on('ai-dapp-generator', 'generationProgress', (progress: any) => {
+        if (progress.status === 'started') {
+          dispatch({ type: 'SET_AI_LOADING', payload: true });
+        }
+      });
+      // @ts-ignore
+      remixClient.on('ai-dapp-generator', 'dappGenerated', () => {
+        dispatch({ type: 'SET_AI_LOADING', payload: false });
+      });
+      // @ts-ignore
+      remixClient.on('ai-dapp-generator', 'dappUpdated', () => {
+        dispatch({ type: 'SET_AI_LOADING', payload: false });
+      });
+    });
+  }, []);
+  return (
+    <AppContext.Provider
+      value={{
+        dispatch,
+        appState,
+      }}
+    >
+      <IntlProvider locale={locale.code} messages={locale.messages}>
+        {appState.instance.htmlTemplate ? (
+          <div className="container-fluid pt-3">
+            <EditHtmlTemplate />
+          </div>
+        ) : 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 isAiLoading={isAiLoading} />
+          </div>
+        )}
+        <LoadingScreen />
+      </IntlProvider>
+    </AppContext.Provider>
+  );
+}
+
+export default App;