feat: exports qr-code as wallpaper for lock-screen

[akash19coder]

The Pull Request is about implementing a feature where in we make it possible for BioDrop user's to download their BioDrop QR code as a lock screen wallpaper so that they can set it as a wallpaper on their smartphone.

Fixes Issue

Closes #9115

Changes proposed

• I have created a button in the Profile page, below Download button called Download as Wallpaper. When the user click on the button. The following piece of code(JSX or HTML whatever we wanna call😅) will be converted to image. For more context, please refer the video attached in screenshot section below.

    // component/user/UserProfile.js

        {/*  Part that gets converted into the image  using the html-to-image library  */}
        <div
          ref={elementRef}
          className="flex flex-col items-center justify-center mt-10 px-8 hidden"
        >
          {qrShow && (
            <QRCodeCanvas
              className="border border-white"
              value={`${BASE_URL}/${data.username}`}
              size={fallbackImageSize * 6}
            />
          )}
          <div className="flex m-20">
            <LogoWide width={512} />
          </div>
        </div>

• To convert HTML into Image I have added a library called html-to-image. If you want to inspect the library, please Click here

• On Download as Wallpaper button click. The follwing functon will execute to convert above mentioned HTML code into image;

const downloadWallpaper = async () => {
    try {
      // It removes the "hidden" class to make the element visible for rendering it.
      elementRef.current.classList.remove("hidden");

      const dataUrl = await toPng(elementRef.current, {    // toPng() is a library function(html-to-image)
        cacheBust: false,      // Set to true, appends the current time as a query string to URL requests to enable cache busting.
        backgroundColor: "#122640",
        width: 1080,
        height: 1920,
      });

      const link = document.createElement("a");
      link.download = "Biodrop-QRCode-Wallpaper.png";
      link.href = dataUrl;
      link.click();

      // It adds the "hidden" class back to hide the element again.
      elementRef.current.classList.add("hidden");
    } catch (e) {
      console.log(e);
    }
  };

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Screen.Recording.-.Oct.8.2023.mp4

Lockscreen wallpaper

Note to reviewers

• I have been getting ADMIN_USERS NOT FOUND error upon using Logger in the code. For the time being, I have added
  console(in the line no 56)

[eddiejaoude]

Thank you for your contribution. I have left inline comments about being consistent with our coding style of async/await and try/catch

[akash19coder]

To be replaced with Logger

[eddiejaoude]

Did you try from an existing example pages/account/manage/profile.js

[akash19coder]

Whenever I use Logger in the file. I get logged out. I have attached the screenshot below:

WIth console.log in the file

Whenever I replace console with logger in the file, it changes Account into Login. Then when I presss the FaShare icon it throws ADMIN_USERS NOT FOUND(may be the "Account-to-Login Change" has something to do with the error")

[eddiejaoude]

Thank you for addressing the comments.

Btw I was testing in lightmode and the QR was not displayed

[akash19coder]

Btw I was testing in lightmode and the QR was not displayed

I tested in light mode but it seems to be working fine in my machine. The QR code is being rendered in the image. I am thinking where the error is ...🤔

Screen.Recording.-.Oct.27.2023.mp4

[akash19coder]

@eddiejaoude I seem to be stuck with the PR😌 and would really appreciate your guidance. Could you please take a moment to review it again and provide some feedback or suggestions? I have also left some comments above

[eddiejaoude]

Sure, it is on my list of things to look into @akash19coder 👍

[eddiejaoude]

I still get a blank QR code when downloading, I think we need to fix before progressing on the logging issue

[eddiejaoude]

I think it would be better to move this to it's own page, rather than in the overlay

[akash19coder]

@eddiejaoude I haven't been able to make progress to the PR because I have my end sem examination going on right now. Once it ends on December 19, I will be back.

[eddiejaoude]

eddiejaoude I haven't been able to make progress to the PR because I have my end sem examination going on right now. Once it ends on December 19, I will be back.

No problem, good luck in your exams 💪 - I have also been slow on reviewing Pull Requests recently.

[akash19coder]

I think it would be better to move this to it's own page, rather than in the overlay

My examination got over today. I want to resume working on PR. You recommended to move this on its own page rather than in the overlay. I am confused which folder should I move it into. Should I create a component probably call it 'QRCodeWallpaper'? On 'Export as Wallpaper' click convert the component into image?