Second Commit

ADORSYS-GIS · Apr 9, 2024 · 273a45f · 273a45f
1 parent 07b471d
commit 273a45f
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 43 deletions.
diff --git a/power-pay-frontend/index.html b/power-pay-frontend/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="manifest" href="/manifest.json">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

diff --git a/power-pay-frontend/public/icon144x144.png b/power-pay-frontend/public/icon144x144.png
diff --git a/power-pay-frontend/public/icon310x310.png b/power-pay-frontend/public/icon310x310.png
diff --git a/power-pay-frontend/public/icon36x36.png b/power-pay-frontend/public/icon36x36.png
diff --git a/power-pay-frontend/public/icon48x48.png b/power-pay-frontend/public/icon48x48.png
diff --git a/power-pay-frontend/src/components/okpage.tsx b/power-pay-frontend/src/components/okpage.tsx
@@ -1,59 +1,56 @@
-//faking the API
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import axios from 'axios';
 
-const OKpage: React.FC = () => {
+const OKPage: React.FC = () => {
   const baseURL = 'http://localhost:5000';   // specifying the base URL with the desired port
   const api = axios.create({ 
     baseURL, 
     timeout: 5000,
   });
 
-    // Mock function to simulate a succesful API call
+  // Mock function to simulate a successful API call
   const mockSend_MoneyAPI = async ( 
     senderPhoneNumber: string, 
     recipientPhoneNumber: string, 
     amount: number
-     ) => {
+  ) => {
     try {
       const response = await api.post('/send_money', { 
         senderPhoneNumber, 
         recipientPhoneNumber, 
-        amount });
+        amount 
+      });
       return response.data;
     } catch (error) {
       throw error;
     }
-  }
+  };
 
-  //  Handle API call when component mounts
+  // Handle API call when component mounts
   useEffect(() => {
     mockSend_MoneyAPI('12347656', '1234567890', 100)
-    .then((response) => {
-      console.log("Mock API Response", response);
-    })
-    .catch((error) => {
-      console.error("Mock API Error", error);
-    });
+      .then((response) => {
+        console.log("Mock API Response", response);
+      })
+      .catch((error) => {
+        console.error("Mock API Error", error);
+      });
   }, []);
-}
 
-//building the ok page for successful transfer
-const OKPage = () => {
-    return (
-      <div className="flex justify-center items-center p-10 mb-34 border border-white rounded-3xl bg--500 text-white">
-        <div className="card">
-          <div className="ok-page">
-            <h1>Success!</h1>
-            <br></br>
-            <p>The money was successfully transfered.</p>
-          </div> 
-          <div className="mt-16">
+  return (
+    <div className="flex justify-center items-center p-10 mb-34 border border-white rounded-3xl bg--500 text-white">
+      <div className="card">
+        <div className="ok-page">
+          <h1>Success!</h1>
+          <br />
+          <p>The money was successfully transferred.</p>
+        </div> 
+        <div className="mt-16">
           <button className="w-96 mt-16 bg-Gray10-color rounded-3xl p-2 text-center text-white bg-green-500">OK</button>
-          </div>
         </div>
       </div>
-    );
-  };
-
-  export default OKPage;
+    </div>
+  );
+};
+
+export default OKPage;
diff --git a/power-pay-frontend/vite.config.ts b/power-pay-frontend/vite.config.ts
@@ -1,23 +1,51 @@
-import { VitePWA } from 'vite-plugin-pwa'
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  plugins: [react(),
+  plugins: [
+    react(),
     VitePWA({
       injectRegister: 'auto',
-      registerType: 'autoUpdate', 
+      registerType: 'autoUpdate',
       workbox: {
         clientsClaim: true,
         skipWaiting: true,
-        globPatterns: ['**/*.{ts,css,html,}']
+        globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
       },
       devOptions: {
         enabled: true,
-        type: 'module',
       },
-    })
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
+      manifest: {
+        name: 'PPA',
+        short_name: 'PPA',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/public/icon36x36.png',
+            sizes: '36x36',
+            type: 'image/png',
+          },
+          {
+            src: '/public/icon48x48.png',
+            sizes: '48x48',
+            type: 'image/png',
+          },
+          {
+            src: '/public/icon310x310.png',
+            sizes: '310x310',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: '/public/icon144x144.png',
+            sizes: '144x144',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
   ],
-})
+});