Receive transactions

package-lock.json

@@ -8,6 +8,7 @@
       "name": "wallet",
       "version": "0.0.0",
       "dependencies": {
+        "@sweetalert2/theme-dark": "^5.0.15",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -24,6 +25,7 @@
         "postcss": "^8.4.27",
         "sjcl": "^1.0.8",
         "stellar-sdk": "^10.4.1",
+        "sweetalert2": "^11.7.21",
         "tailwindcss": "^3.3.3",
         "vite": "^4.4.5"
       }
@@ -776,6 +778,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/@sweetalert2/theme-dark": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/@sweetalert2/theme-dark/-/theme-dark-5.0.15.tgz",
+      "integrity": "sha512-g1QCwQVOkiAz5hIEBOIvvu0580lubu4KuQlod+48QetYzGIEXNlHEH36QihCDnGVgE6vx48iO48w9q0WrZWyHQ=="
+    },
     "node_modules/@types/eventsource": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.11.tgz",
@@ -3796,6 +3803,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.7.21",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.21.tgz",
+      "integrity": "sha512-7CU2s2FmCrf/NNuHRINN79oaXB6PQbbG7CyZ9itmRuu9Q73ccCyFznFYwXzzxwusOUeLHkH4AlhavIDR2gE8Vw==",
+      "dev": true,
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@sweetalert2/theme-dark": "^5.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -26,6 +27,7 @@
     "postcss": "^8.4.27",
     "sjcl": "^1.0.8",
     "stellar-sdk": "^10.4.1",
+    "sweetalert2": "^11.7.21",
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.5"
   }

src/Components/Pay.jsx

@@ -16,10 +16,13 @@ export default function Pay({ keys }) {
     console.log(keys);
     const amount = document.getElementById("amount").value;
     const to = document.getElementById("to").value;
+    console.log(amount);
+    console.log(to);
+    console.log(desprorr2(keys.private));
     send(amount, desprorr2(keys.private), to);
   }
   return (
-    <div className="h-3/6 w-2/6 bg-secondary self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center">
+    <div className="h-3/6 w-2/6 min-h-[20rem] bg-secondary self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center">
       <label htmlFor="send2" className="font-bold text-3xl self-center">
         Send to:
       </label>

src/Components/Transactions.jsx

@@ -1,7 +1,10 @@
 /*eslint-disable */
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
-import getAccount from "../Scripts/Testnet";
+import { getAddress } from "../Scripts/Testnet";
 import sjcl from "sjcl";
+import StellarSdk from "stellar-sdk";
+import normalTag from "./tags";
+const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
   var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
@@ -12,23 +15,37 @@ function desprorr2(encripted) {
   var decryptedMessage = sjcl.decrypt("arstotzka", messageWithParameters);
   return decryptedMessage;
 }
+
 export default function Transactions({ keys }) {
   const [operations, setOperations] = useState([]);
-  const [publickey, setPublickey] = useState("");
+  const publickey = useRef("");
   const desprivate = desprorr2(keys.private);
   useEffect(() => {
-    getAccount(desprivate).then((account) => {
+    let cursor = [];
-      const newOperations = [];
+    let newOperations = [];
-      setPublickey(account.account_id);
+    publickey.current = getAddress(desprivate);
-      console.log(publickey);
+    server
-      account.payments().then((pay) => {
+      .payments()
-        pay.records.forEach((element) => {
+      .forAccount(publickey.current)
-          newOperations.push(element);
+      .limit(50)
-        });
+      .order("desc")
+      .cursor(cursor)
+      .call()
+      .then((payments) => {
+        // Procesar los pagos obtenidos
 
-        setOperations(newOperations.reverse());
+        // Obtener el cursor para la siguiente página
+        cursor =
+          payments.records.length > 0
+            ? payments.records[payments.records.length - 1].paging_token
+            : null;
+        newOperations = payments.records;
+        setOperations(newOperations);
+        // Si hay más transacciones, hacer otra solicitud
+      })
+      .catch((error) => {
+        console.error("Error al obtener pagos:", error);
       });
-    });
   }, []);
   console.log(operations);
 
@@ -36,43 +53,43 @@ export default function Transactions({ keys }) {
     account.transactions().then((tran) => console.log(tran.records[0]))
   );*/
   return (
-    <div className=" w-[32%] h-5/6  bg-secondary shadow-xl rounded-xl flex flex-col gap-5 overflow-scroll mt-10">
+    <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">
             {operation.type}:
           </h1>
-          <h1 className="font-semibold text-primary pl-5">
+          <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 pl-5">
+            <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
               By: {operation.funder}
             </h1>
           ) : null}
           {operation.asset_code ? (
-            <h1 className="font-semibold text-primary pl-5">
+            <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 p-2 rounded-md">
               Token: {operation.asset_code}
             </h1>
           ) : null}
           {operation.from ? (
-            operation.from === publickey ? (
+            operation.from === publickey.current ? (
-              <h1 className="font-semibold text-primary pl-5">
+              <h1 className="font-semibold text-primary bg-primary2 self-center  text-center pl-5 w-5/6 p-2 rounded-md">
                 from: <span className="text-secondary text-xl">Me</span>
               </h1>
             ) : (
-              <h1 className="font-semibold text-primary pl-5">
+              <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
                 from: {operation.from}
               </h1>
             )
           ) : null}
           {operation.to ? (
-            operation.to === publickey ? (
+            operation.to === publickey.current ? (
-              <h1 className="font-semibold text-primary pl-5">
+              <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
                 to: <span className="text-secondary text-xl">Me</span>
               </h1>
             ) : (
-              <h1 className="font-semibold text-primary pl-5 w-40">
+              <h1 className="font-semibold text-primary bg-primary2 self-center text-center pl-5 w-5/6 break-all p-2 rounded-md">
                 to: {operation.to}
               </h1>
             )

src/Components/recived.jsx

@@ -0,0 +1,81 @@
+/*eslint-disable */
+import { 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";
+const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");
+function desprorr2(encripted) {
+  var parsedMessage = JSON.parse(encripted);
+  var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
+
+  //Decrypt
+  var parsedMessage = JSON.parse(encryptedMessageWithoutParameters);
+  var messageWithParameters = JSON.stringify(parsedMessage);
+  var decryptedMessage = sjcl.decrypt("arstotzka", messageWithParameters);
+  return decryptedMessage;
+}
+export default function Recived({ keys }) {
+  const publickey = useRef(getAddress(desprorr2(keys.private)));
+  const desprivate = desprorr2(keys.private);
+  const activado = useRef(false);
+  const cambiosdetectados = useRef(0);
+  const operations = useRef([{ transaction_hash: 0 }]);
+  useEffect(() => {
+    let cursor = [];
+    if (!activado.current) {
+      setInterval(() => {
+        server
+          .payments()
+          .forAccount(publickey.current)
+          .limit(50)
+          .order("desc")
+          .cursor(cursor)
+          .call()
+          .then((payments) => {
+            // Procesar los pagos obtenidos
+
+            // Obtener el cursor para la siguiente página
+            cursor =
+              payments.records.length > 0
+                ? payments.records[payments.records.length - 1].paging_token
+                : null;
+            console.log(payments);
+            if (
+              operations.current[0].transaction_hash !==
+                payments.records[0].transaction_hash &&
+              payments.records[0] !== undefined &&
+              cambiosdetectados.current !== 0
+            ) {
+              Swal.fire({
+                title: "Transacción recibida",
+                text:
+                  payments.records[0].amount +
+                  " BLC de: " +
+                  payments.records[0].from,
+                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;
+            // Si hay más transacciones, hacer otra solicitud
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      }, 12000);
+      activado.current = true;
+    }
+  }, []);
+  return <div></div>;
+}

src/Components/tags.jsx

@@ -0,0 +1,8 @@
+/*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/MainApp.jsx

@@ -2,6 +2,7 @@
 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 }) {
   return (
     <div className={"bg-five w-full h-full"}>
@@ -9,6 +10,7 @@ export default function MainApp({ keys, setKeys }) {
       <div className="flex flex-row w-full h-5/6">
         <Transactions keys={keys} />
         <Pay keys={keys} />
+        <Recived keys={keys} />
       </div>
     </div>
   );

src/Scripts/Testnet.js

@@ -4,16 +4,23 @@ Secret Key
 SAM4KRGZ4YTAQV3XK3FRKVHZV77AA37KSYZLKZ4OZSX3SBWR6C6NYS4M
  */
 import StellarSdk from 'stellar-sdk'
+import Swal from "sweetalert2";
+import '@sweetalert2/theme-dark/dark.css'
 const server = new StellarSdk.Server('https://horizon-testnet.stellar.org'); // const server = new StellarSdk.Server('https://horizon.stellar.org');
 const fee = await server.fetchBaseFee();
 export default function getAccount(privatekey){
     const keypair = StellarSdk.Keypair.fromSecret(privatekey)
     return server.loadAccount(keypair.publicKey())
 }
+export  function getAddress(privatekey){
+    const keypair = StellarSdk.Keypair.fromSecret(privatekey)
+    return keypair.publicKey()
+}
 export function send(amount, privatekey, destination){
     const keypair = StellarSdk.Keypair.fromSecret(privatekey)
     server.loadAccount(keypair.publicKey()).then(account => {
         console.log(account)
+        try{
 const transaction = new StellarSdk.TransactionBuilder(account, {fee, networkPassphrase: StellarSdk.Networks.TESTNET})
   // Add a payment operation to the transaction
   .addOperation(StellarSdk.Operation.payment({
@@ -41,7 +48,19 @@ try {
   } catch (e) {
     console.log('An error has occured:');
     console.log(e);
-  }
+  }Swal.fire({
+    title: "Payment sent successfully",
+    icon: "success",
+    confirmButtonText: "OK",
+  });}
+catch(err){
+    Swal.fire({
+        title: "Error!",
+        text: "Invalid Transaction Data",
+        icon: "error",
+        confirmButtonText: "OK",
+      });
+}
 });
 
 // Let's see the XDR (encoded in base64) of the transaction we just built