diff --git a/package-lock.json b/package-lock.json index c49b93f..ba7910e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 517e7eb..dcf96f8 100644 --- a/package.json +++ b/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" } diff --git a/src/Components/Pay.jsx b/src/Components/Pay.jsx index 906816d..110aece 100644 --- a/src/Components/Pay.jsx +++ b/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 ( -
+
diff --git a/src/Components/Transactions.jsx b/src/Components/Transactions.jsx index 42aedc2..d1f7924 100644 --- a/src/Components/Transactions.jsx +++ b/src/Components/Transactions.jsx @@ -1,7 +1,10 @@ /*eslint-disable */ -import { useState, useEffect } from "react"; -import getAccount from "../Scripts/Testnet"; +import { useState, useEffect, useRef } from "react"; +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) => { - const newOperations = []; - setPublickey(account.account_id); - console.log(publickey); - account.payments().then((pay) => { - pay.records.forEach((element) => { - newOperations.push(element); - }); + let cursor = []; + let newOperations = []; + publickey.current = getAddress(desprivate); + server + .payments() + .forAccount(publickey.current) + .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 ( -
+
{operations.map((operation) => (

{operation.type}:

-

+

{operation.amount}

{operation.funder ? ( -

+

By: {operation.funder}

) : null} {operation.asset_code ? ( -

+

Token: {operation.asset_code}

) : null} {operation.from ? ( - operation.from === publickey ? ( -

+ operation.from === publickey.current ? ( +

from: Me

) : ( -

+

from: {operation.from}

) ) : null} {operation.to ? ( - operation.to === publickey ? ( -

+ operation.to === publickey.current ? ( +

to: Me

) : ( -

+

to: {operation.to}

) diff --git a/src/Components/recived.jsx b/src/Components/recived.jsx new file mode 100644 index 0000000..435d12c --- /dev/null +++ b/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
; +} diff --git a/src/Components/tags.jsx b/src/Components/tags.jsx new file mode 100644 index 0000000..89a99b0 --- /dev/null +++ b/src/Components/tags.jsx @@ -0,0 +1,8 @@ +/*eslint-disable */ +export default function normalTag({ content }) { + return ( +

+ {content} +

+ ); +} diff --git a/src/Screens/MainApp.jsx b/src/Screens/MainApp.jsx index 115e4e6..8feb930 100644 --- a/src/Screens/MainApp.jsx +++ b/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 (
@@ -9,6 +10,7 @@ export default function MainApp({ keys, setKeys }) {
+
); diff --git a/src/Scripts/Testnet.js b/src/Scripts/Testnet.js index 85bdbd4..4a0079d 100644 --- a/src/Scripts/Testnet.js +++ b/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