XLM Balance

src/Components/Header.jsx

@@ -13,14 +13,23 @@ function desprorr2(encripted) {
   return decryptedMessage;
 }
 export default function Header({ keys, setKeys }) {
-  const [balance, setBalance] = useState(null);
+  const [balance, setBalance] = useState([null, null]);
   const desprivate = desprorr2(keys.private);
   console.log(desprivate);
-  if (balance === null) {
+  if (balance[0] === null) {
     getAccount(desprivate).then((account) => {
-      if (account.balances[0].asset_code === "BLC") {
-        setBalance(Math.trunc(account.balances[0].balance * 100) / 100);
-      }
+      console.log(account.balances);
+      const newBalance = [];
+      account.balances.map((prop) => {
+        console.log(prop);
+        if (prop.asset_type === "native") {
+          newBalance[0] = Math.trunc(prop.balance * 100) / 100;
+        }
+        if (prop.asset_code === "BLC") {
+          newBalance[1] = Math.trunc(prop.balance * 100) / 100;
+        }
+      });
+      setBalance(newBalance);
     });
   }
   function handleLogout() {
@@ -32,7 +41,8 @@ export default function Header({ keys, setKeys }) {
   return (
     <div className="flex flex-row pt-5 gap-[20%] h-32 bg-secondary ">
       <div className="bg-secondary w-[25rem] self-center flex flex-col justify-center rounded-xl ml-[45%]">
-        <h1 className="text-black text-5xl self-center">{balance} BLC</h1>
+        <h1 className="text-primary2 text-2xl self-center">{balance[0]} XLM</h1>
+        <h1 className="text-primary text-5xl self-center">{balance[1]} BLC</h1>
       </div>
       <button
         className="w-[8rem] h-[3rem] bg-five text-white rounded-3xl self-center"

src/Components/Pay.jsx

@@ -1,7 +1,8 @@
 /*eslint-disable */
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { send } from "../Scripts/Testnet";
 import sjcl from "sjcl";
+import { getFee } from "../Scripts/Testnet";
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
   var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
@@ -14,6 +15,10 @@ function desprorr2(encripted) {
 }
 export default function Pay({ keys }) {
   const [comision, setComision] = useState("0");
+  const [fee, setFee] = useState("0");
+  useEffect(() => {
+    setFee(((parseFloat(getFee()) * 0.00001) / 100).toString());
+  }, []);
   function calculatecomision() {
     let amount = document.getElementById("amount").value;
     if (amount < 1) {
@@ -55,7 +60,10 @@ export default function Pay({ keys }) {
           type="number"
           onChange={calculatecomision}
         />
-        <p className="text-alert self-center text-sm">Comision: {comision}</p>
+        <p className="text-alert self-center text-sm">
+          Comision BLC: {comision}
+        </p>
+        <p className="text-alert self-center text-sm">Comision XLM: {fee}</p>
       </div>
       <label htmlFor="send2" className="font-bold text-3xl self-center">
         Extra comment:

src/Scripts/Testnet.js

@@ -16,6 +16,9 @@ export  function getAddress(privatekey){
     const keypair = StellarSdk.Keypair.fromSecret(privatekey)
     return keypair.publicKey()
 }
+export  function getFee(){
+    return fee
+}
 export function send(amount, privatekey, destination, memo){
     if(memo === undefined || memo === null){
      memo = ".";