feat: adds capability to export user qr-code into wallpaper

[akash19coder]

Fixes Issue

Closes #9115

Changes proposed

• Created a component called QRcodeWallpaper.js. We are using inline-style in the component instead of Tailwind CSS because the tailwind style to place the QR code and Biodrop logo at appropriate position(please refer screenshot attached in the screenshot section) was not reflecting in the corresponding image.

function QRcodeWallpaper({ BASE_URL, data }) {
  const fallbackImageSize = 120;

  return (
    <div style={{ marginTop: "50%", marginLeft: "16%" }}>
      <QRCodeSVG
        className="border border-white"
        value={`${BASE_URL}/${data.username}`}
        size={fallbackImageSize * 6}
      />
      <div style={{ marginLeft: "7rem", marginTop: "5rem" }}>
        <LogoWide width={512} />
      </div>
    </div>
  );
}

• The newly created component will be transformed into HTML String with the following function. The renderToString() function used below is coming from import { renderToString } from "react-dom/server";

const renderQRCodeWallpaperToString = (BASE_URL, data) => {
  const qrCodeElement = React.createElement(QRcodeWallpaper, {
    BASE_URL: BASE_URL,
    data: data,
  });

  const qrCodeString = renderToString(qrCodeElement);

  return qrCodeString;
};

• The HTML String is then converted into image using a library called html-to-image library on a button click that is added into UserProfile.js. On button click following function is executed

const downloadWallpaper = async () => {
    try {
      const qrCodeString = renderQRCodeWallpaperToString(BASE_URL, data);

      const container = document.createElement("div");
      container.innerHTML = qrCodeString;

      const dataUrl = await toPng(container, {
        cacheBust: false,
        backgroundColor: "#122640",
        width: 1080,
        height: 1920,
      });

      saveAs(dataUrl, `Biodrop-Wallpaper-${data.username}.png`);
    } catch (e) {
      console.error(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

Note to reviewers

• The pull request feat: exports qr-code as wallpaper for lock-screen #9535 serves the same purpose but different implementation. Please click the PR to compare implementations.
• Upon usage of logger in the place of console in downloadWallpaper function I been getting ADMIN_USER_NOT_FOUND error hence I have place console for the time being.
• The Link to the library Click Here

[akash19coder]

@eddiejaoude a gentle reminder for review. please take a glance when you have time.

[eddiejaoude]

Thank you 👍

[akash19coder]

Thank you 👍

Thank you so much though BioDrop will be archived very soon. Contributing to Biodrop taught me many things - creating PRs, raising issues, reviewing code, and most importantly collaboration 1st, code 2nd.

I will keep contributing to open-source projects...

[eddiejaoude]

Yes unfortunately it will be archived in 2 days.

Thank you for your contributions

We will have more EddieHub projects soon