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 sjcl from "sjcl";
export default function App() {
const colors = { primary: "bg-blue-200", secondary: "bg-emerald-400" };
const [keys, setKeys] = useState({ public: "", private: "" });
if (keys.private !== "") {
console.log("heykj");
@ -20,8 +19,8 @@ export default function App() {
}
console.log(keys);
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 (
<div className="flex flex-row pt-5 gap-[20%] h-32 bg-blue-300 ">
<div className="bg-blue-400 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-yellow-200 text-5xl self-center">{balance}</h1>
<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%]">
<h1 className="text-black text-5xl self-center">{balance} BLC</h1>
</div>
<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}
>
Cerrar Sesion

8
src/Components/Pay.jsx
View File

@ -19,14 +19,14 @@ export default function Pay({ keys }) {
send(amount, desprorr2(keys.private), to);
}
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">
Send to:
</label>
<input
name="send2"
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"
type="text"
/>
@ -36,14 +36,14 @@ export default function Pay({ keys }) {
<input
id="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"
/>
<input
name="submit"
type="submit"
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}
/>
</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]))
);*/
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) => (
<div className="bg-teal-400 flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5">
<h1 className="text-xl text-yellow-700 font-bold">
<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">{operation.amount}</h1>
<h1 className="font-semibold text-primary pl-5">
{operation.amount}
</h1>
{operation.funder ? (
<h1 className="font-semibold">By: {operation.funder}</h1>
<h1 className="font-semibold text-primary pl-5">
By: {operation.funder}
</h1>
) : null}
{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}
{operation.from ? (
operation.from === publickey ? (
<h1 className="font-semibold">
from: <span className="text-red-400 text-xl">Me</span>
<h1 className="font-semibold text-primary pl-5">
from: <span className="text-secondary text-xl">Me</span>
</h1>
) : (
<h1 className="font-semibold">from: {operation.from}</h1>
<h1 className="font-semibold text-primary pl-5">
from: {operation.from}
</h1>
)
) : null}
{operation.to ? (
operation.to === publickey ? (
<h1 className="font-semibold">
to: <span className="text-red-400 text-xl">Me</span>
<h1 className="font-semibold text-primary pl-5">
to: <span className="text-secondary text-xl">Me</span>
</h1>
) : (
<h1 className="font-semibold">to: {operation.to}</h1>
<h1 className="font-semibold text-primary pl-5 w-40">
to: {operation.to}
</h1>
)
) : null}
</div>

4
src/Screens/MainApp.jsx
View File

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

8
tailwind.config.js
View File

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