Global Props

src/App.jsx

@@ -1,26 +1,29 @@
 /*eslint-disable */
 import Login from "./Screens/Login.jsx";
-import { useState, useEffect } from "react";
+import { useState, useEffect, createContext } from "react";
 import MainApp from "./Screens/MainApp.jsx";
 import sjcl from "sjcl";
+export const Appcontext = createContext();
 export default function App() {
   const [keys, setKeys] = useState({ public: "", private: "" });
+  useEffect(() => {
     if (keys.private !== "") {
-    console.log("heykj");
-    console.log(keys.private);
       window.localStorage.setItem("private", keys.private);
     } else {
       if (window.localStorage.getItem("private") !== null) {
-      console.log(window.localStorage.getItem("private"));
         setKeys({
           private: window.localStorage.getItem("private"),
         });
       }
     }
-  console.log(keys);
+  }, [keys.private]);
   return keys.private.length < 10 ? (
-    <Login setKeys={setKeys} />
+    <Appcontext.Provider value={{ setKeys, keys }}>
+      <Login />
+    </Appcontext.Provider>
   ) : (
-    <MainApp keys={keys} setKeys={setKeys} />
+    <Appcontext.Provider value={{ setKeys, keys }}>
+      <MainApp />
+    </Appcontext.Provider>
   );
 }

src/Components/Header.jsx

@@ -1,7 +1,8 @@
 /*eslint-disable */
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import getAccount from "../Scripts/Testnet";
 import sjcl from "sjcl";
+import { Appcontext } from "../App";
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
   var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
@@ -12,10 +13,10 @@ function desprorr2(encripted) {
   var decryptedMessage = sjcl.decrypt("arstotzka", messageWithParameters);
   return decryptedMessage;
 }
-export default function Header({ keys, setKeys }) {
+export default function Header() {
+  const props = useContext(Appcontext);
   const [balance, setBalance] = useState([null, null]);
-  const desprivate = desprorr2(keys.private);
+  const desprivate = desprorr2(props.keys.private);
-  console.log(desprivate);
   if (balance[0] === null) {
     getAccount(desprivate).then((account) => {
       console.log(account.balances);
@@ -33,7 +34,7 @@ export default function Header({ keys, setKeys }) {
     });
   }
   function handleLogout() {
-    setKeys({
+    props.setKeys({
       public: "r",
       private: "r",
     });

src/Components/Pay.jsx

@@ -3,6 +3,8 @@ import { useEffect, useRef, useState } from "react";
 import { send } from "../Scripts/Testnet";
 import sjcl from "sjcl";
 import { getFee } from "../Scripts/Testnet";
+import { useContext } from "react";
+import { Appcontext } from "../App";
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
   var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
@@ -13,29 +15,20 @@ function desprorr2(encripted) {
   var decryptedMessage = sjcl.decrypt("arstotzka", messageWithParameters);
   return decryptedMessage;
 }
-export default function Pay({ keys }) {
+export default function Pay() {
-  const [comision, setComision] = useState("0");
+  const props = useContext(Appcontext);
   const [fee, setFee] = useState("0");
   useEffect(() => {
     setFee(((parseFloat(getFee()) * 0.00001) / 100).toString());
   }, []);
-  function calculatecomision() {
-    let amount = document.getElementById("amount").value;
-    if (amount < 1) {
-      setComision("0.001");
-    } else {
-      setComision((parseFloat(amount) / 500).toString());
-    }
-  }
   function handleSend() {
-    console.log(keys);
     const amount = document.getElementById("amount").value;
     const to = document.getElementById("to").value;
     const memo = document.getElementById("memo").value;
     console.log(amount);
     console.log(to);
-    console.log(desprorr2(keys.private));
+    console.log(desprorr2(props.keys.private));
-    send(amount, desprorr2(keys.private), to, memo);
+    send(amount, desprorr2(props.keys.private), to, memo);
   }
   return (
     <div className="h-3/6 w-2/6 min-h-[25rem] bg-secondary self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center">
@@ -45,7 +38,7 @@ export default function Pay({ keys }) {
       <input
         name="send2"
         id="to"
-        className="h-[2rem] w-3/6 self-center border-4 border-tertiary rounded-md"
+        className="h-[2rem] w-3/6 self-center border-4 border-five rounded-md"
         placeholder="Example: GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3"
         type="text"
       />
@@ -56,13 +49,9 @@ export default function Pay({ keys }) {
         <input
           id="amount"
           name="amount"
-          className="self-center w-full border-4 border-tertiary rounded-md"
+          className="self-center w-full border-4 border-five rounded-md"
           type="number"
-          onChange={calculatecomision}
         />
-        <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">
@@ -71,7 +60,7 @@ export default function Pay({ keys }) {
       <input
         name="memo"
         id="memo"
-        className="h-[2rem] w-3/6 self-center border-4 border-tertiary rounded-md"
+        className="h-[2rem] w-3/6 self-center border-4 border-five rounded-md"
         placeholder="Example: Buy a great coffee"
         type="text"
       />

src/Components/Transactions.jsx

@@ -1,9 +1,10 @@
 /*eslint-disable */
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useContext } from "react";
 import { getAddress } from "../Scripts/Testnet";
 import sjcl from "sjcl";
 import StellarSdk from "stellar-sdk";
-import normalTag from "./tags";
+import { NormalTag, SpanTag, TitleTag } from "./Transactions/Tags";
+import { Appcontext } from "../App";
 const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
@@ -16,10 +17,11 @@ function desprorr2(encripted) {
   return decryptedMessage;
 }
 
-export default function Transactions({ keys }) {
+export default function Transactions() {
+  const props = useContext(Appcontext);
   const [operations, setOperations] = useState([]);
   const publickey = useRef("");
-  const desprivate = desprorr2(keys.private);
+  const desprivate = desprorr2(props.keys.private);
   useEffect(() => {
     let cursor = [];
     let newOperations = [];
@@ -56,42 +58,30 @@ export default function Transactions({ keys }) {
     <div className=" w-[32%] h-5/6  bg-secondary shadow-xl rounded-xl flex flex-col gap-5 overflow-y-scroll overflow-x-clip mt-10">
       {operations.map((operation) => (
         <div className="bg-five flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5">
-          <h1 className="pl-5 text-2xl text-secondary font-bold">
+          <TitleTag>{operation.type}:</TitleTag>
-            {operation.type}:
+          <NormalTag>{operation.amount}</NormalTag>
-          </h1>
-          <h1 className="font-semibold text-primary bg-primary2 self-center pl-5 w-5/6 text-center p-2 rounded-md">
-            {operation.amount}
-          </h1>
           {operation.funder ? (
-            <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
+            <NormalTag>By: {operation.funder}</NormalTag>
-              By: {operation.funder}
-            </h1>
           ) : null}
           {operation.asset_code ? (
-            <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 p-2 rounded-md">
+            <NormalTag>Token: {operation.asset_code}</NormalTag>
-              Token: {operation.asset_code}
-            </h1>
           ) : null}
           {operation.from ? (
             operation.from === publickey.current ? (
-              <h1 className="font-semibold text-primary bg-primary2 self-center  text-center pl-5 w-5/6 p-2 rounded-md">
+              <NormalTag>
-                from: <span className="text-secondary text-xl">Me</span>
+                from: <SpanTag>Me</SpanTag>
-              </h1>
+              </NormalTag>
             ) : (
-              <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
+              <NormalTag>from: {operation.from}</NormalTag>
-                from: {operation.from}
-              </h1>
             )
           ) : null}
           {operation.to ? (
             operation.to === publickey.current ? (
-              <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
+              <NormalTag>
-                to: <span className="text-secondary text-xl">Me</span>
+                to: <SpanTag>Me</SpanTag>
-              </h1>
+              </NormalTag>
             ) : (
-              <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
+              <NormalTag>to: {operation.to}</NormalTag>
-                to: {operation.to}
-              </h1>
             )
           ) : null}
         </div>

src/Components/Transactions/Tags.jsx

@@ -0,0 +1,17 @@
+/*eslint-disable */
+export function NormalTag(props) {
+  return (
+    <h1 className="font-semibold text-primary bg-primary2 self-center  text-center break-all pl-5 w-5/6 p-2 rounded-md">
+      {props.children}
+    </h1>
+  );
+}
+
+export function TitleTag(props) {
+  return (
+    <h1 className="pl-5 text-2xl text-secondary font-bold">{props.children}</h1>
+  );
+}
+export function SpanTag(props) {
+  return <span className="text-secondary text-xl">{props.children}</span>;
+}

src/Components/recived.jsx

@@ -1,10 +1,11 @@
 /*eslint-disable */
-import { useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import getAccount, { getAddress } from "../Scripts/Testnet";
 import StellarSdk from "stellar-sdk";
 import sjcl from "sjcl";
 import Swal from "sweetalert2";
 import "@sweetalert2/theme-dark/dark.css";
+import { Appcontext } from "../App";
 const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
@@ -16,9 +17,10 @@ function desprorr2(encripted) {
   var decryptedMessage = sjcl.decrypt("arstotzka", messageWithParameters);
   return decryptedMessage;
 }
-export default function Recived({ keys }) {
+export default function Recived() {
-  const publickey = useRef(getAddress(desprorr2(keys.private)));
+  const props = useContext(Appcontext);
-  const desprivate = desprorr2(keys.private);
+  const publickey = useRef(getAddress(desprorr2(props.keys.private)));
+  const desprivate = desprorr2(props.keys.private);
   const activado = useRef(false);
   const cambiosdetectados = useRef(0);
   const operations = useRef([{ transaction_hash: 0 }]);
@@ -42,7 +44,6 @@ export default function Recived({ keys }) {
               payments.records.length > 0
                 ? payments.records[payments.records.length - 1].paging_token
                 : null;
-            console.log(payments);
             const timestamp = "2023-08-10T08:15:07Z";
             const date = new Date(timestamp);
             const dayoftransaction = date.getUTCDate();
@@ -62,20 +63,16 @@ export default function Recived({ keys }) {
                 icon: "success",
                 confirmButtonText: "OK",
               });
-              console.log(payments.records[0].transaction_hash);
             }
             if (
               operations.current[0].transaction_hash !==
                 payments.records[0].transaction_hash &&
               payments.records[0] !== undefined
             ) {
-              console.log(cambiosdetectados.current);
               cambiosdetectados.current += 1;
             }
             operations.current = payments.records;
             operationsday.current = dayoftransaction;
-            console.log(operationsday.current);
-            console.log(dayoftransaction);
             // Si hay más transacciones, hacer otra solicitud
           })
           .catch((error) => {

src/Components/tags.jsx

@@ -1,8 +0,0 @@
-/*eslint-disable */
-export default function normalTag({ content }) {
-  return (
-    <h1 className="font-semibold text-five bg-primary2 self-center pl-5 w-5/6">
-      {content}
-    </h1>
-  );
-}

src/Screens/Login.jsx

@@ -1,10 +1,12 @@
 /*eslint-disable */
-import { useEffect, useState } from "react";
 import sjcl from "sjcl";
-export default function Login({ setKeys }) {
+import { Appcontext } from "../App";
+import { useContext } from "react";
+export default function Login() {
+  const props = useContext(Appcontext);
   function handleSubmit() {
     const privatekey = document.getElementById("privatekey").value;
-    setKeys({
+    props.setKeys({
       private: sjcl.encrypt("arstotzka", privatekey),
     });
   }

src/Screens/MainApp.jsx

@@ -3,14 +3,17 @@ import Header from "../Components/Header";
 import Pay from "../Components/Pay";
 import Transactions from "../Components/Transactions";
 import Recived from "../Components/recived";
-export default function MainApp({ keys, setKeys }) {
+import { Appcontext } from "../App";
+import { useContext } from "react";
+export default function MainApp() {
+  const props = useContext(Appcontext);
   return (
     <div className={"bg-five w-full h-full"}>
-      <Header keys={keys} setKeys={setKeys} />
+      <Header keys={props.keys} setkeys={props.setKeys} />
       <div className="flex flex-row w-full h-5/6 justify-center">
-        <Transactions keys={keys} />
+        <Transactions keys={props.keys} />
-        <Pay keys={keys} />
+        <Pay keys={props.keys} />
-        <Recived keys={keys} />
+        <Recived keys={props.keys} />
       </div>
     </div>
   );

src/Scripts/Testnet.js

@@ -1,8 +1,3 @@
-/*Public Key
-GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3
-Secret Key
-SAM4KRGZ4YTAQV3XK3FRKVHZV77AA37KSYZLKZ4OZSX3SBWR6C6NYS4M
- */
 import StellarSdk from 'stellar-sdk'
 import Swal from "sweetalert2";
 import '@sweetalert2/theme-dark/dark.css'
@@ -23,14 +18,6 @@ export function send(amount, privatekey, destination, memo){
     if(memo === undefined || memo === null){
      memo = ".";
     }
-    let comision = '0.001';
-    if(parseFloat(amount) < 1){
-        comision = '0.001';
-    } else{
-        comision = parseFloat(amount) / 500;
-        comision = comision. toString();
-    }
-    console.log(comision)
     const keypair = StellarSdk.Keypair.fromSecret(privatekey)
     server.loadAccount(keypair.publicKey()).then(account => {
         console.log(account)
@@ -45,14 +32,6 @@ const transaction = new StellarSdk.TransactionBuilder(account, {fee, networkPass
     // the decimal. They are represented in JS Stellar SDK in string format
     // to avoid errors from the use of the JavaScript Number data structure.
     amount: amount,
-  })).addOperation(StellarSdk.Operation.payment({
-    destination: "GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3",
-    // The term native asset refers to lumens
-    asset: new StellarSdk.Asset("BLC", "GBPKUSD5ZGMEXCS5YW7WAOC2QJSJLEX6LHGUTJIMDYYPFLPOT6GYFNNX"),
-    // Specify 350.1234567 lumens. Lumens are divisible to seven digits past
-    // the decimal. They are represented in JS Stellar SDK in string format
-    // to avoid errors from the use of the JavaScript Number data structure.
-    amount: comision,
   }))
   // Make this transaction valid for the next 30 seconds only
   .setTimeout(30)
@@ -72,7 +51,7 @@ try {
     console.log('An error has occured:');
     console.log(e);
   }Swal.fire({
-    title: "Payment sent successfully Comision: " + comision+ " BLC",
+    title: "Payment sent successfully",
     icon: "success",
     confirmButtonText: "OK",
   });}