Integrate web3.storage

p2plabsxyz · Mar 7, 2022 · 771cbb9 · 771cbb9
1 parent 3c1e746
commit 771cbb9
Show file tree

Hide file tree

Showing 17 changed files with 2,081 additions and 210 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 buidl
 .env
+
+.DS_Store
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
     <img src="https://img.shields.io/badge/contributions-welcome-orange.svg?" alt="Contributions welcome">
 </div><br>
 
-DScan allows you to quickly upload images, audio, video, and any type of files (including NFTs and static websites) to [IPFS](https://ipfs.io/) and get a decentralized QR code with IPFS links. Later you can share the QR code or hosted [Infura](https://infura.io/) link with everyone for easy and decentralized file sharing.<br>
+DScan allows you to quickly upload files as well as folders to [IPFS](https://ipfs.io/) by using [web3.storage](https://web3.storage/) and get a "decentralized QR code" with IPFS [CID](https://docs.ipfs.io/concepts/content-addressing/). Later you can share the QR code or hosted gateway link with everyone for easy and decentralized file sharing.<br>
 For more information, you can read this [blog post](https://dev.to/akhileshthite/dscan-decentralized-qr-code-generator-use-web3-for-file-sharing-2lp8). If you have any queries, then follow this [discussion thread](https://github.com/filecoin-project/community/discussions/410).
 
 ## Extension
@@ -46,7 +46,7 @@ For more information, read the [Webpack docs](https://webpack.js.org/concepts/)
 
 ## Contribute
 * Thanks for your interest in contributing to DScan. There are many ways you can contribute to the project.
-* To start, take a few minutes to read the [contribution guide](https://github.com/buidltools/dscan/blob/main/.github/CONTRIBUTING.md).
+* To start, take a few minutes to read the "[contribution guide](https://github.com/buidltools/dscan/blob/main/.github/CONTRIBUTING.md)".
 * We look forward to your [pull requests](https://github.com/buidltools/dscan/pulls) and / or involvement in our [issues page](https://github.com/buidltools/dscan/issues).
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,9 +15,11 @@
     "davidshimjs-qrcodejs": "0.0.2",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.1",
+    "jquery": "^3.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "style-loader": "^3.3.1"
+    "style-loader": "^3.3.1",
+    "web3.storage": "^3.5.6"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -27,6 +29,8 @@
     "copy-webpack-plugin": "^10.2.4",
     "dotenv-webpack": "^7.1.0",
     "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "regenerator-runtime": "^0.13.9",
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0"

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,11 +1,10 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "DScan: Decentralized QR code generator",
   "description": "DScan is a chrome extension that uploads the content to IPFS and generates decentralized QR codes.",
   "version": "2.0",
-  "browser_action": {
+  "action": {
     "default_popup": "popup.html",
     "default_icon": "./logo.png"
-  },
-  "content_security_policy": "script-src 'self' https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js https://unpkg.com/[email protected]/dist/index.js https://bundle.run/[email protected]; object-src 'self'"
+  }
 }
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/css/.DS_Store b/src/css/.DS_Store
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -3,9 +3,11 @@ body {
   height: 600px;
   width: 400px;
   position: relative;
-  /* margin: 0px auto; */
   font-family: arial;
   background-color: #f1f2f8;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
 }
 .center {
   text-align: center;
@@ -14,10 +16,9 @@ body {
 header {
   background-color: #192234;
   margin-left: -8px;
-  margin-top: -18px;
+  margin-top: -20px;
   height: 75px;
-  margin-bottom: 60px;
-  /* shadow */
+  margin-bottom: 25px;
   -webkit-box-shadow: 0 4px 6px -6px #222;
   -moz-box-shadow: 0 4px 6px -6px #222;
   box-shadow: 0 4px 6px -6px #222;
@@ -38,22 +39,110 @@ h1 {
   cursor: default;
 }
 
-.btn-upload {
-  width: 250px;
-  padding: 10px;
-  border: 2px solid #326d6e;
-  border-radius: 8px;
-  background-color: #449394;
-  font-size: large;
-  color: white;
-  text-align: center;
+.pages {
+  margin-bottom: 25px;
+}
+.file {
+  font-family: "Open Sans", sans-serif;
+  font-size: 15px;
+  letter-spacing: 2px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #000;
+  background-color: white;
+  width: 110px;
+  cursor: pointer;
+  border: 3px solid;
+  padding: 0.35em 1.2em;
+  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px,
+    5px 5px 0px 0px;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+.file:active {
+  box-shadow: 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
+  top: 2px;
+  left: 5px;
+}
+@media (min-width: 768px) {
+  .file {
+    padding: 0.25em 0.75em;
+  }
+}
+.folder {
+  display: inline;
+  font-family: "Open Sans", sans-serif;
+  font-size: 15px;
+  margin-left: 40px;
+  letter-spacing: 2px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #000;
+  background-color: white;
+  width: 110px;
   cursor: pointer;
+  border: 3px solid;
+  padding: 0.35em 0.5em;
+  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px,
+    5px 5px 0px 0px;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+.folder:active {
+  box-shadow: 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
+  top: 2px;
+  left: 5px;
 }
-.btn-upload:hover {
+@media (min-width: 768px) {
+  .folder {
+    padding: 0.25em 0.75em;
+  }
+}
+.active{
+  box-shadow: 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
+  top: 2px;
+  left: 5px;
+}
+
+hr {
+  margin-bottom: 30px;
+  margin-left: -8px;
+}
+
+.btn-upload {
+  font-family: "Open Sans", sans-serif;
+  font-size: 20px;
+  letter-spacing: 2px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #326d6e;
   background-color: lightseagreen;
+  width: 120px;
+  cursor: pointer;
+  border: 3px solid;
+  padding: 0.25em 0.5em;
+  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px,
+    5px 5px 0px 0px;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+.btn-upload:active {
+  box-shadow: 0px 0px 0px 0px;
+  top: 5px;
+  left: 5px;
+}
+@media (min-width: 768px) {
+  .btn-upload {
+    padding: 0.25em 0.75em;
+  }
 }
 
-/* loader */
 .loader {
   border: 10px solid #e0dada;
   border-radius: 50%;
@@ -62,31 +151,39 @@ h1 {
   height: 70px;
   display: none;
   position: absolute;
-  top: 230px;
+  top: 275px;
   left: 160px;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 1s linear infinite;
 }
-
-/* Safari */
 @-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
 }
-
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 #qrcode {
   margin-top: 40px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 
 #svg-download {
   margin-bottom: 0px;
   margin-left: 15px;
+  -webkit-box-shadow: 0 2px 6px -6px #222;
+  -moz-box-shadow: 0 2px 6px -6px #222;
+  box-shadow: 0 2px 6px -6px #222;
 }
 
 .output-label {
@@ -105,13 +202,20 @@ h1 {
   margin-right: 8px;
   margin-left: 4px;
   font-size: medium;
-  border: 2px solid #CCCDCD;
+  border: 2px solid #cccdcd;
   border-radius: 5px;
   text-align: center;
   align-items: center;
+  -webkit-box-shadow: 0 2px 6px -6px #222;
+  -moz-box-shadow: 0 2px 6px -6px #222;
+  box-shadow: 0 2px 6px -6px #222;
+  user-select:text;
+  -webkit-user-select: text;
+  touch-action: manipulation;
 }
-#cid:hover, #link:hover {
-  background-color: #FBFAFA;
+#cid:hover,
+#link:hover {
+  background-color: #fbfafa;
 }
 svg {
   display: inline-flex;
@@ -122,19 +226,21 @@ svg {
   margin-top: 20px;
   margin-bottom: -12px;
   margin-right: 14px;
-  border: 2px solid #CCCDCD;
-  color: #326D6E;
+  border: 2px solid #cccdcd;
+  color: #326d6e;
   border-radius: 5px;
   text-align: center;
   align-items: center;
+  -webkit-box-shadow: 0 2px 6px -6px #222;
+  -moz-box-shadow: 0 2px 6px -6px #222;
+  box-shadow: 0 2px 6px -6px #222;
 }
 svg:hover {
   color: #449394;
-  background-color: #FBFAFA;
+  background-color: #fbfafa;
   cursor: pointer;
 }
 
-
 /* hide scrollbar but allow scrolling */
 #cid,
 #link {