Merge pull request #110 from dharmesh03/intergrate-api

Integrate create and fetch API

Author: lazycoder1

.env.example

@@ -0,0 +1,10 @@
+COGNITO_DOMAIN=
+COGNITO_CLIENT_ID=
+NEXTAUTH_URL=
+COGNITO_CLIENT_SECRET=
+NEXT_PUBLIC_LOGIN_REGISTER_COGNITO_CLIENT_ID=
+NEXT_PUBLIC_COGNITO_REGION=
+NEXT_PUBLIC_COGNITO_USER_POOL_ID=
+SECRET=
+NEXT_PUBLIC_X_API_KEY=
+NEXT_PUBLIC_APP_ENV=dev // prod,staging

src/components/common/apiCalls/jiffyApis.tsx

@@ -301,7 +301,9 @@ const performApiCall = (network: string): boolean => {
 
 const PRO_API = "https://api.jiffyscan.xyz"
 const DEV_API = "https://api-dev.jiffyscan.xyz"
-const API_URL = process.env.ENV === 'production' ? PRO_API : DEV_API;
+const API_URL = process.env.NEXT_PUBLIC_APP_ENV === 'production' ? PRO_API : DEV_API;
+const X_API_Key = process.env.NEXT_PUBLIC_X_API_KEY ;
+
 
 console.log(API_URL)
 
@@ -316,6 +318,15 @@ export const showToast = (toast: any, message: string, type?: string) => {
             pauseOnHover: true,
             theme: 'colored',
         });
+    } else if (type == 'success') {
+        toast.success(message, {
+            position: 'bottom-left',
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            theme: 'colored',
+        });
     } else {
         toast.error(message, {
             position: 'bottom-left',
@@ -810,7 +821,6 @@ export const getPayMasterDetails = async (
         }
         return data.paymasterDetail as PayMasterActivity;
     }
-
     return {} as PayMasterActivity;
 };
 export const getPoweredBy = async (beneficiary: string, paymaster: string, toast: any): Promise<PoweredBy> => {
@@ -923,7 +933,6 @@ export const getBundleDetails = async (
         if (Object.keys(data.bundleDetails).length == 0) {
             showToast(toast, 'Error fetching data');
         }
-
         return data.bundleDetails as Bundle;
     }
     return {} as Bundle;
@@ -963,3 +972,41 @@ export const getBundlerDetails = async (
     }
     return {} as Bundle;
 };
+
+
+
+export const fetchAPIKeyList = async (Authorization :string, sub :string) => {
+    let config = {
+        method: 'get',
+        maxBodyLength: Infinity,
+        url: `${API_URL}/user/getxapikey?usersub=${sub}`,
+        headers: {
+            Authorization: Authorization,
+            'x-api-key': X_API_Key,
+        },
+    };
+    return await axios.request(config)
+}
+
+export const createAPIKey = async (Authorization :string, toast:any) => {
+    let config = {
+        method: 'post',
+        maxBodyLength: Infinity,
+        url: `${API_URL}/user/createxapikey`,
+        headers: {
+            Authorization,
+            'x-api-key': X_API_Key,
+        },
+    };
+    try {
+       return  await axios.request(config).then(()=>{
+           showToast(toast,    `API Key Created SuccessFully` , "success");
+       });
+    } catch (error: any) {
+        if (error.request) {
+            showToast(toast, `No response received, ${error.request}`);
+        } else {
+            console.error('Error:', error.message);
+        }
+    }
+};

src/views/ApiKeys/index.tsx

@@ -1,22 +1,52 @@
 import Footer from '@/components/global/footer/Footer';
 import Navbar from '@/components/global/navbar/Navbar';
 import React, { useEffect, useState } from 'react';
+import { useSession } from "next-auth/react"
 import Table, { tableDataT } from '@/components/common/table/Table';
 import table_data from './table_data.json';
-import { ToastContainer } from 'react-toastify';
+import moment from 'moment';
+import { ToastContainer , toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
+import { createAPIKey, fetchAPIKeyList } from "@/components/common/apiCalls/jiffyApis";
+
 
 function APIKeys() {
-    const [apiKeysTable] = useState<tableDataT>( table_data as tableDataT);
+    const [apiKeysTable, setApiKeysTable] = useState<tableDataT>(table_data as tableDataT);
+
     const [tableLoading] = useState(false);
     const [captionText, setCaptionText] = useState('');
+    const { data: sessions } = useSession()
+
+    const { id_token, sub } = sessions?.user as { id_token: string; sub: string } || {};;
 
     useEffect(() => {
-        setCaptionText(`${apiKeysTable.rows.length}  API Keys found`);
-    }, []);
+        const fetchData = async () => {
+            if (!sub) return;
+            try {
+                const { data } = await fetchAPIKeyList(id_token, sub);
+                if (Array.isArray(data.data.apiKeys)) {
+                    const newRows = data.data.apiKeys.map((item :any) => ({
+                        keys: item.value,
+                        created: moment(item.createdDate).format('MM/DD/yyyy'),
+                    }));
+                    setApiKeysTable((prevState) => ({ ...prevState, rows: newRows }));
+                }
+            } catch (error) {
+                console.error(error);
+            }
+        };
 
+        fetchData();
+    }, [sub]);
+
+    useEffect(() => {
+        setCaptionText(`${apiKeysTable.rows.length}  API Keys found`);
+    }, [apiKeysTable]);
 
+    const handleCreateApiKey = () => {
+        createAPIKey(id_token, toast);
+    }
 
     return (
         <div className="">
@@ -31,6 +61,7 @@ function APIKeys() {
                     <button
                         className="text-sm border border-dark-200 text-md gap-2 inline-flex tracking-[1.25px] pt-[9px] pb-[9px] px-4 uppercase  rounded bg-black text-white"
                         style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
+                        onClick={handleCreateApiKey}
                     >
                         <img className="-translate-y-[1px]" src="/images/plus.svg" alt="" />
                         <span>CREATE NEW KEY</span>