Themes Daisyui

package.json

@@ -10,25 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@sweetalert2/theme-dark": "^5.0.15",
+    "autoprefixer": "^10.4.14",
+    "daisyui": "^3.5.1",
+    "postcss": "^8.4.27",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sjcl": "^1.0.8",
+    "stellar-sdk": "^10.4.1",
+    "sweetalert2": "^11.7.21",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "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/App.jsx

@@ -4,6 +4,7 @@ import { useState, useEffect, createContext } from "react";
 import MainApp from "./Screens/MainApp.jsx";
 import sjcl from "sjcl";
 export const Appcontext = createContext();
+import Swal from "sweetalert2";
 export default function App() {
   const [keys, setKeys] = useState({ public: "", private: "" });
   useEffect(() => {
@@ -17,7 +18,13 @@ export default function App() {
       }
     }
   }, [keys.private]);
-  return keys.private.length < 10 ? (
+  Swal.fire({
+    title: "Bienvenido a mi wallet",
+    text: "La que NO te cobra 0.12% en comisiones por transaccion",
+    icon: "succes",
+    confirmButtonText: "YEAH",
+  });
+  return keys.private.length < 200 ? (
     <Appcontext.Provider value={{ setKeys, keys }}>
       <Login />
     </Appcontext.Provider>

src/Components/Header.jsx

@@ -1,6 +1,6 @@
 /*eslint-disable */
 import { useContext, useEffect, useState } from "react";
-import getAccount from "../Scripts/Testnet";
+import getAccount from "../Scripts/Public";
 import sjcl from "sjcl";
 import { Appcontext } from "../App";
 function desprorr2(encripted) {
@@ -41,12 +41,12 @@ export default function Header() {
   }
   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%]">
+      <div className="bg-accent w-[25rem] self-center flex flex-col justify-center rounded-xl ml-[45%]">
-        <h1 className="text-primary2 text-2xl self-center">{balance[0]} XLM</h1>
+        <h1 className="text-accent-content text-2xl self-center">{balance[0]} XLM</h1>
-        <h1 className="text-primary text-5xl self-center">{balance[1]} BLC</h1>
+        <h1 className="text-accent-content text-5xl self-center">{balance[1]} BLC</h1>
       </div>
       <button
-        className="w-[8rem] h-[3rem] bg-five text-white rounded-3xl self-center"
+        className="btn btn-primary self-center"
         onClick={handleLogout}
       >
         Cerrar Sesion

src/Components/Pay.jsx

@@ -1,8 +1,7 @@
 /*eslint-disable */
 import { useEffect, useRef, useState } from "react";
-import { send } from "../Scripts/Testnet";
 import sjcl from "sjcl";
-import { getFee } from "../Scripts/Testnet";
+import { getFee,send } from "../Scripts/Public";
 import { useContext } from "react";
 import { Appcontext } from "../App";
 function desprorr2(encripted) {
@@ -31,36 +30,36 @@ export default function Pay() {
     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">
+    <div className="h-3/6 w-2/6 min-h-[25rem] bg-info self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center">
-      <label htmlFor="send2" className="font-bold text-3xl self-center">
+      <label htmlFor="send2" className="font-bold text-3xl text-info-content self-center">
         Send to:
       </label>
       <input
         name="send2"
         id="to"
-        className="h-[2rem] w-3/6 self-center border-4 border-five rounded-md"
+        className="h-[2rem] w-3/6 self-center input input-info"
         placeholder="Example: GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3"
         type="text"
       />
-      <label htmlFor="amount" className="font-bold text-3xl self-center">
+      <label htmlFor="amount" className="font-bold text-3xl text-info-content self-center">
         BLC Amount:
       </label>
       <div className="self-center h-[2rem] w-3/6 flex flex-col justify-center gap-1 m-2">
         <input
           id="amount"
           name="amount"
-          className="self-center w-full border-4 border-five rounded-md"
+          className="self-center w-full input input-info"
           type="number"
         />
-        <p className="text-alert self-center text-sm">Comision XLM: {fee}</p>
+        <p className="text-error self-center text-lg">Comision XLM: 0.00001</p>
       </div>
-      <label htmlFor="send2" className="font-bold text-3xl self-center">
+      <label htmlFor="send2" className="font-bold text-3xl text-info-content self-center">
         Extra comment:
       </label>
       <input
         name="memo"
         id="memo"
-        className="h-[2rem] w-3/6 self-center border-4 border-five rounded-md"
+        className="h-[2rem] w-3/6 self-center input input-info"
         placeholder="Example: Buy a great coffee"
         type="text"
       />
@@ -68,7 +67,7 @@ export default function Pay() {
         name="submit"
         type="submit"
         value="Send"
-        className="rounded bg-primary text-tertiary px-4 py-2 cursor-pointer w-3/6 self-center"
+        className="rounded btn btn-accent w-3/6 self-center"
         onClick={handleSend}
       />
     </div>

src/Components/Transactions.jsx

@@ -1,11 +1,11 @@
 /*eslint-disable */
 import { useState, useEffect, useRef, useContext } from "react";
-import { getAddress } from "../Scripts/Testnet";
+import { getAddress } from "../Scripts/Public";
 import sjcl from "sjcl";
 import StellarSdk from "stellar-sdk";
 import { NormalTag, SpanTag, TitleTag } from "./Transactions/Tags";
 import { Appcontext } from "../App";
-const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");
+const server = new StellarSdk.Server("https://horizon.stellar.org");
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
   var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
@@ -55,11 +55,12 @@ export default function Transactions() {
     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-y-scroll overflow-x-clip mt-10">
+    <div className=" w-[32%] h-5/6  bg-primary 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">
+        <div className="bg-neutral flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5">
           <TitleTag>{operation.type}:</TitleTag>
           <NormalTag>{operation.amount}</NormalTag>
+          <NormalTag>DATE: {operation.created_at}</NormalTag>
           {operation.funder ? (
             <NormalTag>By: {operation.funder}</NormalTag>
           ) : null}

src/Components/Transactions/Tags.jsx

@@ -1,7 +1,7 @@
 /*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">
+    <h1 className="font-semibold text-info-content bg-info self-center  text-center break-all pl-5 w-5/6 p-2 rounded-md mb-1">
       {props.children}
     </h1>
   );
@@ -9,9 +9,9 @@ export function NormalTag(props) {
 
 export function TitleTag(props) {
   return (
-    <h1 className="pl-5 text-2xl text-secondary font-bold">{props.children}</h1>
+    <h1 className="pl-5 text-2xl text-neutral-content font-bold">{props.children}</h1>
   );
 }
 export function SpanTag(props) {
-  return <span className="text-secondary text-xl">{props.children}</span>;
+  return <span className="text-primary-content text-xl">{props.children}</span>;
 }

src/Components/recived.jsx

@@ -1,12 +1,12 @@
 /*eslint-disable */
 import { useContext, useEffect, useRef } from "react";
-import getAccount, { getAddress } from "../Scripts/Testnet";
+import getAccount, { getAddress } from "../Scripts/Public";
 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");
+const server = new StellarSdk.Server("https://horizon.stellar.org");
 function desprorr2(encripted) {
   var parsedMessage = JSON.parse(encripted);
   var encryptedMessageWithoutParameters = JSON.stringify(parsedMessage);
@@ -52,7 +52,7 @@ export default function Recived() {
                 payments.records[0].transaction_hash &&
               payments.records[0] !== undefined &&
               operationsday.current === dayoftransaction &&
-              cambiosdetectados.current !== 0
+              cambiosdetectados.current !== 0 && parseFloat(payments.records[0].amount) > 0.001 && publickey.current != payments.records[0].from
             ) {
               Swal.fire({
                 title: "Transacción recibida",

src/Screens/Login.jsx

@@ -5,14 +5,15 @@ import { useContext } from "react";
 export default function Login() {
   const props = useContext(Appcontext);
   function handleSubmit() {
+    console.log("hello boton")
     const privatekey = document.getElementById("privatekey").value;
     props.setKeys({
       private: sjcl.encrypt("arstotzka", privatekey),
     });
   }
   return (
-    <div className={"bg-five w-full h-full flex flex-col"}>
+    <div className={"bg-base-100 w-full h-full flex flex-col"}>
-      <h1 className="text-black text-opacity-70 text-6xl self-center mt-[10rem] shadow-blue-300 shadow-sm">
+      <h1 className="text-base-content text-opacity-70 text-6xl self-center mt-[10rem]">
         BLC Wallet Login
       </h1>
       <div
@@ -21,10 +22,10 @@ export default function Login() {
         }
       >
         <div className="flex flex-col justify-center gap-5 w-3/6 ">
-          <div className="bg-blue-400 text-center rounded-lg h-10 flex flex-col justify-center">
+          <div className="bg-neutral text-center rounded-lg h-10 flex flex-col justify-center">
             <label
               htmlFor="privatekey"
-              className="text-white text-2xl self-center"
+              className="text-neutral-content text-2xl self-center"
             >
               Your Private Key:
             </label>
@@ -32,7 +33,7 @@ export default function Login() {
           <input
             name="privatekey"
             id="privatekey"
-            className="h-8 rounded-sm"
+            className="input text-neutral-content"
             type="password"
             placeholder=" Starts with 'S'"
           />
@@ -40,7 +41,7 @@ export default function Login() {
             name="submit"
             type="submit"
             value="Enter"
-            className={"rounded bg-primary text-five px-4 py-2 cursor-pointer"}
+            className={"btn rounded bg-neutral text-neutral-content px-4 py-2 cursor-pointer"}
             onClick={handleSubmit}
           />
         </div>

src/Screens/MainApp.jsx

@@ -8,7 +8,7 @@ import { useContext } from "react";
 export default function MainApp() {
   const props = useContext(Appcontext);
   return (
-    <div className={"bg-five w-full h-full"}>
+    <div className={"bg-base-100 w-full h-full"}>
       <Header keys={props.keys} setkeys={props.setKeys} />
       <div className="flex flex-row w-full h-5/6 justify-center">
         <Transactions keys={props.keys} />

src/Scripts/Public.js

@@ -0,0 +1,76 @@
+import StellarSdk from 'stellar-sdk'
+import Swal from "sweetalert2";
+import '@sweetalert2/theme-dark/dark.css'
+const server = new StellarSdk.Server('https://horizon.stellar.org'); // const server = new StellarSdk.Server('https://horizon.stellar.org');
+const fee = 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 getFee(){
+    return fee
+}
+export function send(amount, privatekey, destination, memo){
+  console.log(amount)
+  console.log(privatekey)
+    if(memo === undefined || memo === null){
+     memo = ".";
+    }
+    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.PUBLIC})
+  // Add a payment operation to the transaction
+  .addOperation(StellarSdk.Operation.payment({
+    destination: destination,
+    // The term native asset refers to lumens
+    asset: new StellarSdk.Asset("BLC", "GC4PNLO7X3AVON2RZQ44FJDPODB5RCWORWJY6O5I4O7GHSWFECGDF662"),
+    // 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: amount,
+  }))
+  // Make this transaction valid for the next 30 seconds only
+  .setTimeout(30)
+  .addMemo(StellarSdk.Memo.text(memo))
+  // Uncomment to add a memo (https://www.stellar.org/developers/learn/concepts/transactions.html)
+  // .addMemo(StellarSdk.Memo.text('Hello world!'))
+  .build();
+
+// Sign this transaction with the secret key
+// NOTE: signing is transaction is network specific. Test network transactions
+// won't work in the public network. To switch networks, use the Network object
+// as explained above (look for StellarSdk.Network).
+transaction.sign(keypair) 
+try {
+    server.submitTransaction(transaction);
+  } catch (e) {
+    console.log('An error has occured:');
+    console.log(e);
+  }Swal.fire({
+    title: "Payment sent successfully",
+    icon: "success",
+    confirmButtonText: "OK",
+  });}
+catch(err){
+    console.log(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
+
+// Submit the transaction to the Horizon server. The Horizon server will then
+// submit the transaction into the network for us.
+
+}

tailwind.config.js

@@ -1,19 +1,51 @@
+import daisyui from 'daisyui';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html",
     "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
-    colors: {
-      'primary':'#050505',
-      'primary2':'#c2c2c2',
-      'secondary':'#1B9AAA',
-      'tertiary':'#DDDBCB',
-      'four':'#F5F1E3',
-      'five':'#FFFFFF',
-      'alert':'darkred',
   },
+  daisyui: {
+    themes: [{
+      apptheme: {
+        "primary": "#f46ed5",
+          
+
+ 
+        "secondary": "#6385ce",
+                  
+        
+         
+        "accent": "#289ab7",
+                  
+        
+         
+        "neutral": "#17161d",
+                  
+        
+         
+        "base-100": "#38373e",
+                  
+        
+         
+        "info": "#6aa4f6",
+                  
+        
+         
+        "success": "#6fe7b9",
+                  
+        
+         
+        "warning": "#d37d0d",
+                  
+        
+         
+        "error": "#f4736c",
+      }
+    }]
   },
-  plugins: [],
+  plugins: [daisyui],
 }