p2plabsxyz / dscan

A decentralized storage and file-sharing tool that uploads content to IPFS and generates decentralized QR codes.

DScan

DScan enables you to quickly upload files and folders to IPFS using web3.storage, and provides a "decentralized QR code" containing the IPFS CID. This QR code can later be customized and shared with anyone for easy and decentralized file sharing. Users can visit console.web3.storage and log in to manage their accounts.

DScan, leveraging the w3up-client, incorporates DIDs and UCAN to establish a robust framework for decentralized authentication and authorization. The use of DIDs enhances security and promotes digital self-sovereignty, while UCAN facilitates permissioned access and the delegation of capabilities, enabling users to manage access to their content securely.

Thanks to web3.storage, the content can be accessed over IPFS without the user installing and setting up a local instance of Kubo.

💻 Extension

Chrome | Brave | Opera | Edge

🛠 Development

The extension's development code is placed in /src folder. manifest.json is in /public folder. For webpack settings, follow the webpack.config.js file.

1. Install dependencies.

npm install

2. After development of the extension, run the following command. This will create a production build.

npm run build

3. Now, the buidl folder will appear in the root directory.

4. Select Developer mode in your browser extensions tab.

5. Select Load unpacked extension and open the buidl folder.

For more information, read the web3.storage docs.

💫 Achievements

• Listed on awesome ipfs
• IPFS Community Impact Awards Q2’23 recipient
• 2nd prize winner at MARS Asia hackathon 2021

📄 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".
• We look forward to your pull requests and / or involvement in our issues page.

🙏 Thanks to all contributors!

⚖️ License

DScan is licensed under the MIT License.

---

Don't forget to leave a star ⭐️ ~

dscan's Issues

[bug]: "Uncaught TypeError: Cannot read properties of null (reading 'src')"

After clicking on this download svg button (simply downloads the generated QR code) it says Uncaught TypeError: Cannot read properties of null (reading 'src'). Facing this issue after upgrading to webpack.

Make sure to update both main functions, i.e. fileUpload and folderUpload
Code link:

https://github.com/buidltools/dscan/blob/771cbb9c779b01fd0049926050be792b1a37e65f/src/js/qrcode.js#L42

https://github.com/buidltools/dscan/blob/771cbb9c779b01fd0049926050be792b1a37e65f/src/js/qrcode.js#L79

Download function:

$("#svg-download").on("click", function () {
        // gets the base64 source of the qr code image
        var qrCodeSrc = document.getElementById('qr-code-image').src;
        var a = document.createElement("a");
        // an invisible a tag is given that href.
        a.href = qrCodeSrc;
        // filename for the qrcode is set
        a.download = "dscan_QR.png";
        document.body.appendChild(a);
        // the a tag is clicked, triggering the download
        a.click();
        document.body.removeChild(a);
});

For file structure and contributing guide, check the main README.md.

[bug]: loader spinning on the generated QR code

Downloaded QR code png size must be larger (current image 150x150px is unclear and small)

Currently, the default generated QR code image with size 150x150px on extension is also used in the download function. Change the generated QR code image size to 400x400px for download function.

QR code size:
https://github.com/buidltools/dscan/blob/6a0462cc6aa38a731f158fc6d666bad9fe399909/src/js/qrcode.js#L9

QR code download function:
https://github.com/buidltools/dscan/blob/6a0462cc6aa38a731f158fc6d666bad9fe399909/src/js/qrcode.js#L68

Files:

HTML:
For file: https://github.com/buidltools/dscan/blob/main/src/popup.html
For folder: https://github.com/buidltools/dscan/blob/main/src/folderUpload.html

CSS: https://github.com/buidltools/dscan/blob/main/src/css/popup.css

JS: https://github.com/buidltools/dscan/blob/main/src/js/qrcode.js

For development setup and contribution guide, check the main README.md.

feat: integrate w3up client

https://blog.web3.storage/posts/the-data-layer-is-here-with-the-new-web3-storage

feat: add options to customize qr code styles and logos to qr code

[feat]: add small "copied" popup feature after clicking on "copy generated CID" svg button

Code link:
https://github.com/buidltools/dscan/blob/b6ff5d621213534f8a705901e328a78071240e40/src/js/qrcode.js#L45

Copy function:

  // Copy CID to clipboard when copy button is clicked
  $("#svg-cid")
    .off()
    .on("click", function () {
      navigator.clipboard.writeText(cid);
    });

For file structure and contributing guide, check the main README.md.

> Hi. I researched about the problem of the popup closing when the file selector window is opened. I found out that it has been a major bug in firefox and hasn't been resolved so far. [Link to the issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1292701)

          > Hi. I researched about the problem of the popup closing when the file selector window is opened. I found out that it has been a major bug in firefox and hasn't been resolved so far. [Link to the issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1292701)

One workaround is to open the extension in sidebar instead of in popup. bitwarden/clients#3013 (comment)

Hey!
Thanks for your time and research.

Yes, this is a typical behavior in Firefox, and it happens because the browser treats the opening of a file selector dialog as a focus shift away from the popup, thus closing the popup.

Instead of opening the extension in sidebar, we can:

1.

To resolve this, we have to keep the popup open even after the file selector is opened. Here's a suggested approach to mitigate this problem:

• Background Script: Use a background script to handle the file uploading process. This will prevent the popup from being dismissed as the background script is not tied to the popup UI.

• Message Passing: We'll need to use message passing between our popup script and the background script to facilitate this process.

background.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'uploadFile') {
    // Call the upload function here. For example:
    // uploadToIPFS(request.file);
    // Then send a response back to the popup script.
    sendResponse({success: true, message: 'File uploaded successfully'});
  }
});

web3Storage.js (formerly qrcode.js):
Instead of directly initiating the upload in the popup script when a file is selected, send a message to the background script to handle the upload:

$("#fileUpload").on("change", async function() {
  var files = fileUpload.files;
  if (files.length === 0) return;

  // Send a message to the background script to handle the file upload.
  chrome.runtime.sendMessage({action: 'uploadFile', file: files[0]}, function(response) {
    if (response.success) {
      // Handle successful upload in the popup script.
      // For example: update the UI, show a success message, etc.
    } else {
      // Handle any errors or issues.
    }
  });
});

manifest.json:

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

2.

Instead of directly initiating the file selection from the popup, consider creating a new tab or window from our popup and have the file selection take place there. This way, even if the popup closes, the user will have a dedicated window or tab where they can choose the file and proceed with the upload.

We can use the chrome.tabs.create() method to open a new tab. Once the file is selected and the QR code is generated, we can either display the information in the tab itself or send it back to the popup (if reopened) or even save it in chrome.storage.local temporarily for retrieval.

example:

document.getElementById("UPLOAD_BUTTON").addEventListener("click", function() {
  chrome.tabs.create({ url: chrome.runtime.getURL("file.html") });
});

manifest.json would be:

{
  "permissions": ["tabs", ...other permissions]
}

⚠️ In both of these cases we need a new firefox branch?

We can also check how other open source add-ons are dealing with this issue. I'm always open to any better suggestions.

Originally posted by @akhileshthite in #42 (comment)

[bug]: file and folder buttons not clicking properly

There's a slight misplacement (or bounce) after clicking these two buttons.

Both buttons should click (active one should be pressed) smoothly without any bounce like the "upload" button shown below.

CSS for "file" button:
https://github.com/buidltools/dscan/blob/045fd8ace369ec30dc074e2bab138278b31543a3/src/css/popup.css#L45

CSS for "folder" button:
https://github.com/buidltools/dscan/blob/045fd8ace369ec30dc074e2bab138278b31543a3/src/css/popup.css#L74

For development setup and contributing guide, check the main README.md.

[bug]: extension closes after opening new browser tab

Let me know your thoughts on this.
Should the extension run in background after opening new tab? Is it a good security practice?

refactor: convert HTML to JSX Components

TODOs:

• Convert file.html and folder.html into two separate JSX components, File.jsx and Folder.jsx.
• Ensure that the class attributes are replaced with className for JSX compatibility.
• Include the necessary imports and adjust the component structure to fit into the React ecosystem.
• Instead of directly embedding SVG code or linking externally in the HTML/JSX, load SVG assets locally.
• Update Index.jsx, popup.jsx (handleContinueWithSavedSpace function and handleContinueWithSavedSpace button) and webpack.config.js accordingly.

Expected Outcome:

• The application successfully refactors file.html and folder.html into JSX components.
• SVG assets are loaded locally, improving the maintainability.
  • Please use the SVG files in assets directory.
• The webpack configuration file is updated to support these changes without affecting the current functionality.

feat: build for firefox

⚠️ Use same branch.

• Create publicFF dir (same as public except manifest.json should be according to firefox standards), webpack.configFF.js flle, webpack.prodFF.js file.
• Update .gitignore with buidlFF
• Update package.json with "buildFF": "webpack --config webpack.prodFF.js" command

Testing:

1. Install firefox.
2. Type about:debugging in search bar.
3. Click -> This Firefox.
4. Click -> Load Temporary Add-on...
5. Open the BuidlFF folder (select manifest.json).

Problem:

#42 (comment)

Investigation:

#42 (comment)

Extension loses focus on file/folder upload

Describe the Bug

On file/folder upload the extension closes as soon as the focus is shifted to the file picker. This is due to the design of the browser.

Steps to Reproduce

Steps to reproduce the behavior:

1. Open extension
2. Click Upload

Expected Behavior

Extension stays in focus and generates QR

Actual Behavior

Extension closes but file picker remains

Additional Details

A good solution to this may be to open a new window to upload file/folder. Something like how the ad blocking extensions work when you open their logs.

feat: integrate w3up (user-controllable keys)

w3up uses the power of UCANs and DIDs to create user controllable keys.

After this integration users will be able to:

• Control the data and keys
• Create a self-sovereign identity

Extension behaviour:
get user email -> run extension popup in the background (a separate window) -> user will verify the email -> user key is generated -> the rest UX is same

Learn more about w3up: https://blog.web3.storage/posts/w3up-beta-launch
Development: https://blog.web3.storage/posts/introducing-w3up
Example application: https://blog.web3.storage/posts/forever-note

w3up is currently in beta, they'll release this feature in Q1 2023 (soon). Upto 5Gib is free per user key (not sure).

Add code of conduct

Add button loader animation

After clicking on upload button and selecting the file, add button loader animation till the QR code is generated.

Hint:
You can use this.classList.toggle('btn-loading')

code example:

 <input type="file" class="loader" onclick="this.classList.toggle('btn-loading')" />

const btnLoader = document.querySelector(".loader");
btnLoader.classList.add("btn-loading");

You can add button loader animation or whole page loading gif

Directory structure:
CSS: /static/style.css
Main HTML: /popup.html
Main js: /script.js

feat: update progress percentage UI in accordance with w3up-client

Use onShardStored option in uploadFile and uploadDirectory.

See how it gets used in the w3cli here:
https://github.com/web3-storage/w3cli/blob/55f546be85e321b00ddd18c8ded277935eedebde/index.js#L129C5-L129C18

See how the progress percentage UI was implemented previously in web3storage script:
Files:

dscan/src/scripts/web3Storage.js

Line 20 in b01101a

onStoredChunk: getProgressUpdater(files),

Folder:

dscan/src/scripts/web3Storage.js

Line 50 in b01101a

onStoredChunk: getProgressUpdater(updatedFiles),

contributing.md file is missing

According to hacktoberfest guidelines a contributing.md file should be there for projects which are participating in hacktoberfest.
Please assign this issue to me...

test: Implement Unit Tests for Web3.Storage Integration and QR Code Generation

As the codebase grows, it's important to ensure that the core functionalities related to Web3.Storage uploads and QR code generation remain robust and error-free. This issue aims to introduce unit tests that ensure the integrity of these functionalities.

TODOs:

• Write unit tests to ensure that the web3.storage is correctly uploading files and folders to IPFS.
• Write tests to ensure that upon successful upload, a QR code is generated correctly.
• The tests can be written using a popular testing framework like mocha.
• Upon running npm run test, the results of these tests should be visible.

Key Files and their Responsibilities:

1. ./src/scripts/web3Storage.js:

• Handles the uploading of files and folders to Web3.Storage.
• Generates decentralized QR codes for uploaded content.

2. ./src/scripts/qrHandler.js:

• Responsible for creating QR codes.

3. ./src/scripts/utils.js:

• Contains utility functions such as loaders, progress updaters, and QR code color handlers.

For development setup and contribution guide, check the main README.md.

feat: add options to customize qr code styles and add logos

Description:

Integrate the QR code styling library (referenced below) to the DScan extension, allowing users to customize the styles of QR codes (e.g., rounded dots) and add logos in the center. This enhancement will improve user experience by providing aesthetically pleasing and branded QR codes.

Library: https://github.com/kozakdenys/qr-code-styling

Task:

1. QR code library:

• Update QR Code Generation Library: Transition from the current davidshimjs-qrcodejs library to the latest qr-code-styling library for QR code generation. An example of the current implementation:

Copy code
const createQRCodeFor = (identifier, dimension) => {
  return new QRCode(identifier, {
    width: dimension,
    height: dimension,
    colorDark: "#000000", // default
    colorLight: "#ffffff", // default
    correctLevel: QRCode.CorrectLevel.L,
  });
};

• This function will need modifications to align with the new library's capabilities. An example:

    const qrCode = new QRCodeStyling({
        width: dimension,
        height: dimension,
        type: "png",
        data: cid?,
        image: "https://github.com/p2plabsxyz/dscan/blob/main/public/logo.png", // default
        dotsOptions: {
            colorDark: "#000000", // default
            type: "rounded"
        },
        backgroundOptions: {
            colorLight: "#ffffff", // default
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });

2. Style Picker:

• Integrate an option for users to pick different styles for the QR code (e.g., rounded dots, square dots).

3. Logo Picker:

• Allow users to upload a logo that will be placed in the center of the QR code.
• Ensure the logo does not obstruct the QR code's readability.

4. UI Integration:

• Adjust the UI on file.html and folder.html to incorporate the style and logo pickers.
• Update the main.css for any required styling related to the new UI elements.

Refer to the #31 color picker pull request for this implementation.

Important files:

./src/scripts/qrcode.js
./src/file.html
./src/folder.html
./src/css/main.css

Please make sure you're using the latest stable versions of npm and Node.js :)

feat: show list of previous uploads

Add Contributing.md file

Define You:

• [x ] Contributor

Is your feature request related to a problem? Please describe.

For new users who want to contribute to any open-source project, it becomes difficult to start when they are not aware of the basic steps. Having a file that describes the initial steps will be helpful for them.

Describe the solution you'd like...

I suggest adding a contributing.md file to the project. You can assign this task to me, and I will create the file

Add Issue & Pull Request template

MISSING Code of Conduct and Contribution.md file

The repository didn't have contribution.md file and code of conduct in it .
I would like to add the files for the same

It would be great if you could assign this issue to me!

[bug]: the long URI doesn't fit in the IPFS gateway URI text field

Long URI:

Should look like this:

CSS code:
https://github.com/buidltools/dscan/blob/045fd8ace369ec30dc074e2bab138278b31543a3/src/css/popup.css#L194

For development setup and contributing guide, check the main README.md.

[feat]: progress percentage UI

Progress percentage should appear in the middle of the loader to check how much percentage of the content (file/folder) is uploaded over IPFS for better UX.

Files:

HTML:
For file: https://github.com/buidltools/dscan/blob/main/src/popup.html
For folder: https://github.com/buidltools/dscan/blob/main/src/folderUpload.html

CSS: https://github.com/buidltools/dscan/blob/main/src/css/popup.css

JS: https://github.com/buidltools/dscan/blob/main/src/js/qrcode.js

For development setup and contribution guide, check the main README.md.

feat: colour customisation for QR codes

A colour bar or an input box appears with QR code for customisations.

Files:

Colour input:
https://github.com/buidltools/dscan/blob/adaa07878bfef9216f43e0656736e4570af68593/src/js/qrcode.js#L12

HTML:
For file: https://github.com/buidltools/dscan/blob/main/src/popup.html
For folder: https://github.com/buidltools/dscan/blob/main/src/folderUpload.html

CSS: https://github.com/buidltools/dscan/blob/main/src/css/popup.css

JS: https://github.com/buidltools/dscan/blob/main/src/js/qrcode.js

For development setup and contribution guide, check the main README.md.

feat: space management

In create space UI:

• Fetch space names and DIDs created by the actor
• Display the list of space names under create space UI
• Instead of entering space name, user will select any created space; set it as current space with setCurrentSpace option
• Write a logic to Prevent creation of space with same names

Implement this in handleSpaceSubmit function:

Add button to download QR code

Add a button (SVG) to download the generated QR code.

CSS: /static/style.css
Main HTML: /popup.html
Main js: /script.js

feat: dark mode

Add dark mode toggle and make sure it caches the option.

Files:

HTML:
For file: https://github.com/buidltools/dscan/blob/main/src/popup.html
For folder: https://github.com/buidltools/dscan/blob/main/src/folderUpload.html

CSS: https://github.com/buidltools/dscan/blob/main/src/css/popup.css

JS: https://github.com/buidltools/dscan/blob/main/src/js/qrcode.js

For development setup and contribution guide, check the main README.md.

refactor: split qrcode script in several files for maintainability

Please break down the qrcode.js file into several files for better maintainability.

These files should be:

• ./src/scripts/web3Storage.js
• ./src/scripts/qrHandler.js
• ./src/scripts/utils.js

The file qrcode.js is already organized into these sections. However, please ensure you import and export all necessary functions and variables.

⚠️ Important: To avoid listeners being called multiple times, ensure they are set only once. You can wrap the listeners in a function and ensure that this function is called just once (or adopt any other solution you prefer).

Source:
./src/scripts/qrcode.js
./webpack.config.js

For development setup and contribution guide, check the main README.md.

Fix copy CID

Write a script for Copy to clipboard to copy the generated IPFS CID.

Main HTML: /popup.html
Main js: /script.js

bug: popup window fails to gain focus after email verification

After a user clicks to log in, a popup window is created for email verification. However, once the email is verified and the user is expected to return to the popup, the window does not come to the forefront as intended, even after invoking popupWindow.focus(). Additionally, popupWindow is logged as null in the useEffect hook, suggesting that the window reference is lost.

Steps to Reproduce

1. Enter your email and click on the 'Login' button to trigger the popup window.
2. Navigate away from the popup window to check email for verification.
3. Verify the email.
4. Expect the popup window to come into focus automatically.

code:

dscan/src/popup.jsx

Line 56 in aab4109

if (popupWindow) {

dscan/src/popup.jsx

Line 114 in aab4109

setPopupWindow(newWindow);

feat: add to ipfs context menu

https://developer.chrome.com/docs/extensions/reference/contextMenus/

bug: size of qrcode is not fixed when data string is different

Originally posted by @akhileshthite in #46 (comment)

QR code display issue with long name files:

• Files with long names are generating smaller QR codes. Because it's an URI; https://w3s.link/ipfs/<CID>/<file_name>

QR code display issue with folder:

• Folders use URL; https://w3s.link/ipfs/<CID>/, so it's fixed length string.

I tried changing the values here and found that 140 works perfect, but it will mess the file's QR code.

export var QR_CODE_DISPLAY = createQRCodeFor(140);

Expected behavior:

The generated QR code should fit in a fixed size 150 regardless of its link length just like previously.

Error on upload cancel

Define You:

• Contributor

Describe the Bug

An error is thrown when you successfully upload a file and then cancel a second file upload. The same happens when uploading folders

Steps to Reproduce

Steps to reproduce the behavior:

While on file upload screen:

1. Click on "Upload" button
2. Select a file and confirm upload
3. Click on "Upload" again
4. Cancel the file upload

Expected Behavior

When the second upload is cancelled, the application should not change its state and should continue displaying the previous qr code

Actual Behavior

When the upload is cancelled, the app appears to be uploading another file, but the loading stays on 0% and an error is throw in the console.

Screenshots

Error message: