created a contributing.md file and made QRCodeDisplay as a server com…

…ponent

.changeset/pretty-pigs-bake.md

@@ -0,0 +1,5 @@
+---
+"react-daraja": patch
+---
+
+made QRCodeDisplay a server component and created a contributing.md file

contributing.md

@@ -0,0 +1,34 @@
+# Contributing to React Daraja
+
+Welcome to React Daraja! We're excited that you're interested in contributing. Before you start, please follow the guidelines below.
+
+## How to Contribute
+
+We use [changesets](https://github.com/atlassian/changesets) to manage releases and versioning. Follow the three-step process below to contribute:
+
+### Step 1: Make Changes
+
+Make your code changes or additions in your local repository. Before committing your changes, run the following command:
+
+```bash
+npx changeset
+
+```
+
+This command will prompt you to select the type of change you are making (patch, minor, major), and it will create a changeset file.
+
+Although its not mandatory, you only run the command if you feel your changes are ready to be pushed to NPM or if its a critical bug that the users of the lib need in their code ASAP.
+
+### Step 2: Fill out the Changeset
+
+Navigate to the .changeset directory and open the generated changeset file. Fill out the details of your changes, including a description of the modifications you made.
+
+### Step 3: Commit and Push
+
+Commit your changes and the generated changeset file. Push your changes to your fork or branch. When your pull request is merged, the changeset will be used to create a release.
+
+## Releasing Changes
+
+Changesets help manage versioning and releases. Whenever you commit the generated changesets file, Github Actions automatically pushes the new package version to NPM.
+
+Thank you for contributing to React Daraja! 🚀

src/react/QRCodeDisplay.tsx

@@ -1,21 +1,26 @@
+"use server";
+
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import { twMerge } from "tailwind-merge";
+import { fetchQrCode } from "../wrapper-fns";
+import { ScannableQrParams } from "../../types";
 
-export const QRCodeDisplay = ({
-  qrString,
+export const QRCodeDisplay = async ({
   className,
+  scannableQRParams,
 }: {
-  qrString: string;
   className?: string;
+  scannableQRParams: ScannableQrParams;
 }) => {
+  const { QRCode } = await fetchQrCode(scannableQRParams);
   const qrImage = new Image();
-  qrImage.src = `data:image/png;base64,${qrString}`;
+  qrImage.src = `data:image/png;base64,${QRCode}`;
 
   return (
     <div className={twMerge(`w-16 aspect-square`, className)}>
-      {qrString ? (
+      {QRCode ? (
         <img src={qrImage.src} alt="QR Code" className="w-full h-full" />
       ) : (
         <FontAwesomeIcon