prorr2/BrokenLabCredit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Colors alive

Browse Source
This commit is contained in:
Prrorr2 2023-08-09 17:22:24 +02:00
parent 1548975971
commit 03bf877f64
6 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.jsx
View File

@ -4,7 +4,6 @@ import { useState, useEffect } from "react";
import MainApp from "./Screens/MainApp.jsx"; import MainApp from "./Screens/MainApp.jsx";
import sjcl from "sjcl"; import sjcl from "sjcl";
export default function App() { export default function App() {
const colors = { primary: "bg-blue-200", secondary: "bg-emerald-400" };
const [keys, setKeys] = useState({ public: "", private: "" }); const [keys, setKeys] = useState({ public: "", private: "" });
if (keys.private !== "") { if (keys.private !== "") {
console.log("heykj"); console.log("heykj");
@ -20,8 +19,8 @@ export default function App() {
} }
console.log(keys); console.log(keys);
return keys.private.length < 10 ? ( return keys.private.length < 10 ? (
<Login colors={colors} setKeys={setKeys} /> <Login setKeys={setKeys} />
) : ( ) : (
<MainApp colors={colors} keys={keys} setKeys={setKeys} /> <MainApp keys={keys} setKeys={setKeys} />
); );
} }

9
src/Components/Header.jsx
View File

@ -30,13 +30,12 @@ export default function Header({ keys, setKeys }) {
}); });
} }
return ( return (
<div className="flex flex-row pt-5 gap-[20%] h-32 bg-blue-300 "> <div className="flex flex-row pt-5 gap-[20%] h-32 bg-secondary ">
<div className="bg-blue-400 w-[25rem] self-center flex flex-col justify-center rounded-xl ml-[45%]"> <div className="bg-secondary w-[25rem] self-center flex flex-col justify-center rounded-xl ml-[45%]">
<h1 className="text-white text-5xl self-center">Balance Actual:</h1> <h1 className="text-black text-5xl self-center">{balance} BLC</h1>
<h1 className=" text-yellow-200 text-5xl self-center">{balance}</h1>
</div> </div>
<button <button
className="w-[7rem] h-[3rem] bg-teal-600 text-white rounded-3xl self-center" className="w-[8rem] h-[3rem] bg-five text-white rounded-3xl self-center"
onClick={handleLogout} onClick={handleLogout}
> >
Cerrar Sesion Cerrar Sesion

8
src/Components/Pay.jsx
View File

@ -19,14 +19,14 @@ export default function Pay({ keys }) {
send(amount, desprorr2(keys.private), to); send(amount, desprorr2(keys.private), to);
} }
return ( return (
<div className="h-3/6 w-2/6 bg-teal-400 self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center"> <div className="h-3/6 w-2/6 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"> <label htmlFor="send2" className="font-bold text-3xl self-center">
Send to: Send to:
</label> </label>
<input <input
name="send2" name="send2"
id="to" id="to"
className="h-[2rem] w-3/6 self-center border-4 border-teal-200 rounded-md" className="h-[2rem] w-3/6 self-center border-4 border-tertiary rounded-md"
placeholder="Example: GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3" placeholder="Example: GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3"
type="text" type="text"
/> />
@ -36,14 +36,14 @@ export default function Pay({ keys }) {
<input <input
id="amount" id="amount"
name="amount" name="amount"
className="h-[2rem] w-3/6 self-center border-4 border-teal-200 rounded-md" className="h-[2rem] w-3/6 self-center border-4 border-tertiary rounded-md"
type="number" type="number"
/> />
<input <input
name="submit" name="submit"
type="submit" type="submit"
value="Send" value="Send"
className="rounded bg-blue-500 text-white px-4 py-2 cursor-pointer w-3/6 self-center" className="rounded bg-primary text-tertiary px-4 py-2 cursor-pointer w-3/6 self-center"
onClick={handleSend} onClick={handleSend}
/> />
</div> </div>

34
src/Components/Transactions.jsx
View File

@ -36,35 +36,45 @@ export default function Transactions({ keys }) {
account.transactions().then((tran) => console.log(tran.records[0])) account.transactions().then((tran) => console.log(tran.records[0]))
);*/ );*/
return ( return (
<div className=" w-[32%] h-5/6 bg-teal-200 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-scroll mt-10">
{operations.map((operation) => ( {operations.map((operation) => (
<div className="bg-teal-400 flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5"> <div className="bg-five flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5">
<h1 className="text-xl text-yellow-700 font-bold"> <h1 className="pl-5 text-2xl text-secondary font-bold">
{operation.type}: {operation.type}:
</h1> </h1>
<h1 className="font-semibold">{operation.amount}</h1> <h1 className="font-semibold text-primary pl-5">
{operation.amount}
</h1>
{operation.funder ? ( {operation.funder ? (
<h1 className="font-semibold">By: {operation.funder}</h1> <h1 className="font-semibold text-primary pl-5">
By: {operation.funder}
</h1>
) : null} ) : null}
{operation.asset_code ? ( {operation.asset_code ? (
<h1 className="font-semibold">Token: {operation.asset_code}</h1> <h1 className="font-semibold text-primary pl-5">
Token: {operation.asset_code}
</h1>
) : null} ) : null}
{operation.from ? ( {operation.from ? (
operation.from === publickey ? ( operation.from === publickey ? (
<h1 className="font-semibold"> <h1 className="font-semibold text-primary pl-5">
from: <span className="text-red-400 text-xl">Me</span> from: <span className="text-secondary text-xl">Me</span>
</h1> </h1>
) : ( ) : (
<h1 className="font-semibold">from: {operation.from}</h1> <h1 className="font-semibold text-primary pl-5">
from: {operation.from}
</h1>
) )
) : null} ) : null}
{operation.to ? ( {operation.to ? (
operation.to === publickey ? ( operation.to === publickey ? (
<h1 className="font-semibold"> <h1 className="font-semibold text-primary pl-5">
to: <span className="text-red-400 text-xl">Me</span> to: <span className="text-secondary text-xl">Me</span>
</h1> </h1>
) : ( ) : (
<h1 className="font-semibold">to: {operation.to}</h1> <h1 className="font-semibold text-primary pl-5 w-40">
to: {operation.to}
</h1>
) )
) : null} ) : null}
</div> </div>

4
src/Screens/MainApp.jsx
View File

@ -2,9 +2,9 @@
import Header from "../Components/Header"; import Header from "../Components/Header";
import Pay from "../Components/Pay"; import Pay from "../Components/Pay";
import Transactions from "../Components/Transactions"; import Transactions from "../Components/Transactions";
export default function MainApp({ colors, keys, setKeys }) { export default function MainApp({ keys, setKeys }) {
return ( return (
<div className={colors.primary + " w-full h-full"}> <div className={"bg-five w-full h-full"}>
<Header keys={keys} setKeys={setKeys} /> <Header keys={keys} setKeys={setKeys} />
<div className="flex flex-row w-full h-5/6"> <div className="flex flex-row w-full h-5/6">
<Transactions keys={keys} /> <Transactions keys={keys} />

8
tailwind.config.js
View File

@ -4,6 +4,14 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}"], "./src/**/*.{js,ts,jsx,tsx}"],
theme: { theme: {
extend: {}, extend: {},
colors: {
'primary':'#050505',
'primary2':'#c2c2c2',
'secondary':'#1B9AAA',
'tertiary':'#DDDBCB',
'four':'#F5F1E3',
'five':'#FFFFFF'
},
}, },
plugins: [], plugins: [],
} }