diff --git a/power-pay-frontend/index.html b/power-pay-frontend/index.html index e4b78eae..ee9ac4c9 100644 --- a/power-pay-frontend/index.html +++ b/power-pay-frontend/index.html @@ -2,7 +2,10 @@ - + + + + Vite + React + TS diff --git a/power-pay-frontend/public/icon144x144.png b/power-pay-frontend/public/icon144x144.png new file mode 100644 index 00000000..cd3d0d0e Binary files /dev/null and b/power-pay-frontend/public/icon144x144.png differ diff --git a/power-pay-frontend/public/icon310x310.png b/power-pay-frontend/public/icon310x310.png new file mode 100644 index 00000000..b9b8c8d5 Binary files /dev/null and b/power-pay-frontend/public/icon310x310.png differ diff --git a/power-pay-frontend/public/icon36x36.png b/power-pay-frontend/public/icon36x36.png new file mode 100644 index 00000000..f365c9d1 Binary files /dev/null and b/power-pay-frontend/public/icon36x36.png differ diff --git a/power-pay-frontend/public/icon48x48.png b/power-pay-frontend/public/icon48x48.png new file mode 100644 index 00000000..9121c781 Binary files /dev/null and b/power-pay-frontend/public/icon48x48.png differ diff --git a/power-pay-frontend/src/components/okpage.tsx b/power-pay-frontend/src/components/okpage.tsx index 3c3fb8d3..bafcd0a5 100644 --- 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 ( -
-
-
-

Success!

-

-

The money was successfully transfered.

-
-
+ return ( +
+
+
+

Success!

+
+

The money was successfully transferred.

+
+
-
- ); - }; - - export default OKPage; \ No newline at end of file +
+ ); +}; + +export default OKPage; \ No newline at end of file diff --git a/power-pay-frontend/vite.config.ts b/power-pay-frontend/vite.config.ts index 518adfc0..56076de6 100644 --- 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', + }, + ], + }, + }), ], -}) \ No newline at end of file +}); \ No newline at end of file