cleaned up a lot of files

components/QRCodeDisplay.tsx

@@ -1,20 +1,44 @@
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useState } from "react";
-import { useReactDaraja } from "../hooks/useReactDaraja";
-import { useScannableQrCode } from "../hooks/useScannableQrCode";
-import { ScannableQrParams } from "../types";
+import { ScannableQrCodeResponse, ScannableQrParams } from "../types";
+import axios from "axios";
+import { BASE_URL } from "../src/env";
+import { generateAccessToken } from "../src/access-token";
 
 export const QRCodeDisplay = ({
   scannableQrParams,
 }: {
   scannableQrParams: ScannableQrParams;
 }) => {
   const [qrString, setQrString] = useState<string | null>(null);
-  const getQRcode = useScannableQrCode(scannableQrParams);
+  const [fetchError, setFetchError] = useState(false);
+
+  const accessToken = generateAccessToken();
+
+  const fetchQrCode = async (): Promise<ScannableQrCodeResponse> => {
+    try {
+      const res: ScannableQrCodeResponse = await axios.post(
+        `${BASE_URL}/mpesa/qrcode/v1/generate`,
+        scannableQrParams,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      return res;
+    } catch (err: any) {
+      throw new Error(
+        `Error occurred with status code ${err.response?.status}, ${err.response?.statusText}`
+      );
+    }
+  };
 
   useEffect(() => {
-    getQRcode().then((res) => setQrString(res.QRCode));
+    fetchQrCode()
+      .then((res) => setQrString(res.QRCode))
+      .catch((err) => setFetchError(true));
   }, []);
 
   const qrImage = new Image();
@@ -24,7 +48,9 @@ export const QRCodeDisplay = ({
     <div
       className={`w-[${scannableQrParams.Size}] h-[${scannableQrParams.Size}]`}
     >
-      {qrString ? (
+      {fetchError ? (
+        <p>An error occurred!</p>
+      ) : qrString ? (
         <img src={qrImage.src} alt="QR Code" className="w-full h-full" />
       ) : (
         <FontAwesomeIcon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-daraja",
-  "version": "1.0.3",
+  "version": "0.0.1",
   "description": "A react library for interacting with Safaricom`s daraja APIs",
   "main": "dist/index.js",
   "module": "dist/index.cjs",
@@ -36,8 +36,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@types/memory-cache": "^0.2.5",
     "axios": "^1.5.1",
-    "base-64": "^1.0.0"
+    "base-64": "^1.0.0",
+    "memory-cache": "^0.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0"

src/access-token.ts

@@ -0,0 +1,35 @@
+import axios from "axios";
+import { BASE_URL, CONSUMER_KEY, CONSUMER_SECRET } from "./env";
+import cache from "memory-cache";
+import { AccessTokenResponse } from "../types";
+
+export const generateAccessToken = async (): Promise<AccessTokenResponse> => {
+  const credentials = `${CONSUMER_KEY}:${CONSUMER_SECRET}`;
+  const encodedCredentials = btoa(credentials);
+
+  const token: AccessTokenResponse = cache.get("act");
+
+  if (token) {
+    return token;
+  }
+
+  try {
+    const res = await axios.get(
+      `${BASE_URL}/oauth/v1/generate?grant_type=client_credentials`,
+      {
+        headers: {
+          Authorization: `Bearer ${encodedCredentials}`,
+          "Access-Control-Allow-Origin": "*",
+        },
+      }
+    );
+
+    cache.put("act", res.data, res.data.expires_in);
+
+    return res.data;
+  } catch (err: any) {
+    throw new Error(
+      `Error occurred with status code ${err.response?.status}, ${err.response?.statusText}`
+    );
+  }
+};

src/env.ts

@@ -0,0 +1,40 @@
+export const ENVIRONMENT = assertValue(
+  process.env.NODE_ENV,
+  "Missing environment variable: NODE_ENV"
+);
+
+export const BASE_URL =
+  ENVIRONMENT === "production"
+    ? "https://api.safaricom.co.ke"
+    : "https://sandbox.safaricom.co.ke";
+
+export const CONSUMER_KEY = assertValue(
+  process.env.MPESA_CONSUMER_KEY,
+  "Missing environment variable: MPESA_CONSUMER_KEY"
+);
+
+export const CONSUMER_SECRET = assertValue(
+  process.env.MPESA_CONSUMER_SECRET,
+  "Missing environment variable: MPESA_CONSUMER_SECRET"
+);
+
+export const BUSINESS_SHORT_CODE = assertValue(
+  process.env.BUSINESS_SHORT_CODE,
+  "Missing environment variable: BUSINESS_SHORT_CODE"
+);
+
+export const PRODUCTION_PASS_KEY =
+  ENVIRONMENT === "production"
+    ? assertValue(
+        process.env.PRODUCTION_PASS_KEY,
+        "Missing environment variable: PRODUCTION_PASS_KEY"
+      )
+    : null;
+
+function assertValue<T>(v: T | undefined, errorMessage: string): T {
+  if (v === undefined) {
+    throw new Error(errorMessage);
+  }
+
+  return v;
+}