updated remaining pages and fixed Package file

Author: desousamario85

tabs/backend/data.json

@@ -1,3 +1,3 @@
 {
-  "rewardName": "Sats"
-}
+  "rewardName": "coins"
+}

tabs/package.json

@@ -25,7 +25,7 @@
     "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "react-toastify": "^11.0.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
     "webrtc-adapter": "^9.0.1"
 
   },

tabs/src/components/WalletAllowanceComponent.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import './WalletAllowanceComponent.css'; // Assuming you'll use CSS for styling
 import BatteryImageDisplay from './BatteryImageDisplay';
 import ArrowClockwise from '../images/ArrowClockwise.svg';
 import Calendar from '../images/Calendar.svg';
 import { getAllowance, getUsers, getWalletTransactionsSince } from '../services/lnbitsServiceLocal';
 import { useMsal } from '@azure/msal-react';
 import WalletTransactionLog from './WalletTransactionLog';
+import { RewardNameContext } from './RewardNameContext';
 
 const adminKey = process.env.REACT_APP_LNBITS_ADMINKEY as string;
 let spentSats =0
@@ -58,7 +59,11 @@ const WalletAllowanceCard: React.FC<AllowanceCardProps> = () => {
 
     fetchAmountReceived();
   }, [accounts]);
-
+  const rewardNameContext = useContext(RewardNameContext);
+  if (!rewardNameContext) {
+    return null; // or handle the case where the context is not available
+  }
+const rewardsName = rewardNameContext.rewardName;
   return (
     <div className="wallet-container">
       <div className="wallet-header">
@@ -75,7 +80,7 @@ const WalletAllowanceCard: React.FC<AllowanceCardProps> = () => {
               <div className="amountDisplay">
                 {balance?.toLocaleString() ?? '0'}
               </div>
-              <div>Sats</div>
+              <div>{rewardsName}</div>
               <div style={{ paddingLeft: '20px', display: 'none' }}>
                 <button className="refreshImageIcon">
                   <img
@@ -102,7 +107,7 @@ const WalletAllowanceCard: React.FC<AllowanceCardProps> = () => {
               <div className="remaining smallTextFont">Next allowance</div>
               <div className="remaining smallTextFont">
                 {allowance ? allowance.amount.toLocaleString() : '0'}{' '}
-                <span>Sats</span>
+                <span>{rewardsName}</span>
               </div>
               <div className="remaining smallTextFont">
                 <div>
@@ -131,10 +136,10 @@ const WalletAllowanceCard: React.FC<AllowanceCardProps> = () => {
           </div>
           <div className="col-md-3">
             <div className="spent smallTextFont">
-              <b>{balance?.toLocaleString() ?? '0'}</b> Sats
+              <b>{balance?.toLocaleString() ?? '0'}</b> {rewardsName}
             </div>
             <div className="spent smallTextFont">
-              <b>{spentSats?.toLocaleString()}</b> Sats
+              <b>{spentSats?.toLocaleString()}</b> {rewardsName}
             </div>
           </div>
         </div>

tabs/src/components/WalletInfoCard.tsx

@@ -1,14 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import './WalletInfoCard.css';
 import ArrowClockwise from '../images/ArrowClockwise.svg';
 import { getUsers } from '../services/lnbitsServiceLocal';
 import { useMsal } from '@azure/msal-react';
 import SendPayment from './SendPayment';
 import ReceivePayment from './ReceivePayment';
+import { RewardNameContext } from './RewardNameContext';
 
 const adminKey = process.env.REACT_APP_LNBITS_ADMINKEY as string;
 
+
 const WalletYourWalletInfoCard: React.FC = () => {
+
   const [balance, setBalance] = useState<number>();
 
   const [isReceivePopupOpen, setIsReceivePopupOpen] = useState(false);
@@ -34,6 +37,8 @@ const WalletYourWalletInfoCard: React.FC = () => {
     }
   };
 
+
+
   useEffect(() => {
     fetchAmountReceived();
   });
@@ -53,6 +58,12 @@ const WalletYourWalletInfoCard: React.FC = () => {
     setIsSendPopupOpen(false);
   };
 
+  const rewardNameContext = useContext(RewardNameContext);
+  if (!rewardNameContext) {
+    return null; // or handle the case where the context is not available
+  }
+const rewardsName = rewardNameContext.rewardName;
+
   // Buttons should be disabled if balance is undefined (still loading)
   const isLoading = false; // balance === undefined;
 
@@ -65,7 +76,7 @@ const WalletYourWalletInfoCard: React.FC = () => {
           {' '}
           <h1>{balance?.toLocaleString() ?? '0'}</h1>
         </div>
-        <div className="item">Sats</div>
+        <div className="item">{rewardsName}</div>
         <div
           className="col-md-1 item"
           style={{ paddingTop: '30px', paddingLeft: '10px' }}

tabs/src/components/WalletTransactionLog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import styles from './WalletTransactionLog.module.css';
 import {
   getUsers,
@@ -8,6 +8,7 @@ import ArrowIncoming from '../images/ArrowIncoming.svg';
 import ArrowOutgoing from '../images/ArrowOutcoming.svg';
 import moment from 'moment';
 import { useMsal } from '@azure/msal-react';
+import { RewardNameContext } from './RewardNameContext';
 
 interface WalletTransactionLogProps {
   activeTab?: string;
@@ -120,6 +121,12 @@ const WalletTransactionLog: React.FC<WalletTransactionLogProps> = ({
     getAllUsers();
     fetchTransactions();
   }, [activeTab, activeWallet]);
+  
+  const rewardNameContext = useContext(RewardNameContext);
+  if (!rewardNameContext) {
+    return null; // or handle the case where the context is not available
+  }
+const rewardsName = rewardNameContext.rewardName;
 
   if (loading) {
     return <div>Loading...</div>;
@@ -137,6 +144,8 @@ const WalletTransactionLog: React.FC<WalletTransactionLogProps> = ({
     return <div>{error}</div>;
   }
 
+
+
   return (
     <div className={styles.feedlist}>
       {transactions
@@ -218,7 +227,7 @@ const WalletTransactionLog: React.FC<WalletTransactionLogProps> = ({
                       ? transaction.amount / 1000
                       : '+' + transaction.amount / 1000}
                   </b>{' '}
-                  Sats{' '}
+                  {rewardsName}{' '}
                 </div>
                 <div
                   style={{ display: 'none' }}