upload logo in quick-dapp

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"
   }
 }

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,
     },
   });
 };

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}

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

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"