Skip to content

Commit

Permalink
feat: proper support for events with rxjs
Browse files Browse the repository at this point in the history 
#62
  • Loading branch information
@pociej
pociej committed Jun 2, 2024
1 parent 418253d commit 8346371
Show file tree
Hide file tree
Showing 25 changed files with 424 additions and 270 deletions.
1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"react": "^18.2.0",
"react-daisyui": "^5.0.0",
"react-dom": "^18.2.0",
"rxjs": "^7.8.1",
"siwe": "^2.3.2",
"socket.io-client": "^4.7.5",
"swr": "^2.2.5",
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/components/homePage/events.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useWatchDepositPayments } from "hooks/depositContract/useWatchDepositPayments";
import { Card } from "react-daisyui";

export const Events = () => {
const events = useWatchDepositPayments();
return (
<>
{["Event1", "Event2", "Event3", "Event4", "Event5"].map(
Expand Down
Empty file added frontend/src/components/homePage/events/types.ts
View file
Empty file.
4 changes: 2 additions & 2 deletions frontend/src/components/approveForm.tsx → ...omponents/homePage/modals/approveForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { useApprove } from "hooks/GLM/useGLMApprove";
import { useUser } from "hooks/useUser";
import { Button, Loading } from "react-daisyui";
import { formatEther, parseEther } from "viem";
import { LoadingSpinner } from "./loadingSpinner";
import { LoadingSpinner } from "../../loadingSpinner";
import { useBalance } from "hooks/useBalance";
import { useState } from "react";
import { formatBalance } from "utils/formatBalance";
import { number } from "ts-pattern/dist/patterns";
import { GolemCoinIcon } from "./atoms/golem.coin.icon";
import { GolemCoinIcon } from "../../atoms/golem.coin.icon";

export const ApproveForm = () => {
const { user } = useUser();
Expand Down
0 ...tend/src/components/createDepositForm.tsx → ...nts/homePage/modals/createDepositForm.tsx
View file
File renamed without changes.
3 changes: 2 additions & 1 deletion ...nents/molecules/deposit/createDeposit.tsx → ...homePage/modals/deposit/createDeposit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const CreateDeposit = () => {
error: errorPrepareDeposit,
setAmount,
isPending,
validToTimestamp,
setValidToTimestamp,
depositId,
nonce,
Expand Down Expand Up @@ -66,7 +67,7 @@ export const CreateDeposit = () => {
title="Create Deposit"
buttonText="Create"
subtitle="Create a new deposit to start using app"
validToTimestamp={dayjs().add(1, "day").unix()}
validToTimestamp={validToTimestamp}
setValidToTimestamp={setValidToTimestamp}
errorContext={errorContext}
></UpsertDepositPresentational>
Expand Down
0 ...nents/molecules/deposit/extendDeposit.tsx → ...homePage/modals/deposit/extendDeposit.tsx
View file
File renamed without changes.
7 changes: 6 additions & 1 deletion ...s/deposit/upsertDepositPresentational.tsx → ...s/deposit/upsertDepositPresentational.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { GLMAmountInput } from "components/molecules/glmAmountInput/glmAmountInput";
import dayjs from "dayjs";
import { ChangeEvent } from "react";
import { ChangeEvent, useEffect } from "react";
import { Button, Input, Loading } from "react-daisyui";
import { RPC_ERROR_CONTEXT } from "hooks/useHandleRpcError";
import { use } from "i18next";
export const UpsertDepositPresentational = ({
title,
subtitle,
Expand Down Expand Up @@ -30,6 +31,10 @@ export const UpsertDepositPresentational = ({
isPending: boolean;
errorContext?: RPC_ERROR_CONTEXT[];
}) => {
useEffect(() => {
console.log("validToTimestamp", validToTimestamp);
console.log("s", dayjs(validToTimestamp * 1000).format("YYYY-MM-DD"));
}, [validToTimestamp]);
return (
<>
<div className="flex flex-row justify-between w-full">{title}</div>
Expand Down
0 ...tend/src/components/extendDepositForm.tsx → ...nts/homePage/modals/extendDepositForm.tsx
View file
File renamed without changes.
265 changes: 11 additions & 254 deletions frontend/src/components/homePage/status.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,264 +1,21 @@
import { AllocationLink } from "components/alloctionLink";
import { ApproveForm } from "components/approveForm";
import { GLMAmountStat } from "components/atoms/GLMAmount";
import { CreateDeposit } from "components/molecules/deposit/createDeposit";
import { ExtendDeposit } from "components/molecules/deposit/extendDeposit";
import { useLayout } from "components/providers/layoutProvider";
import { useAllowanceTx } from "hooks/GLM/useAllowanceTx";
import { useUserCurrentDeposit } from "hooks/depositContract/useDeposit";
import { useCreateAllocation } from "hooks/useCreateAllocation";
import { useCurrentAllocation } from "hooks/useCurrentAllocation";
import { useReleaseAllocation } from "hooks/useReleaseAllocation";
import { useUser } from "hooks/useUser";
import { useCallback } from "react";
import { Card, Link, Loading } from "react-daisyui";
import { formatBalance } from "utils/formatBalance";
import { shortTransaction } from "utils/shortTransaction";
import { Card } from "react-daisyui";
import { Register } from "./statusSections/register";
import { Approve } from "./statusSections/approve";
import { Deposit } from "./statusSections/deposit";
import { Allocation } from "./statusSections/allocation";
import { Agreement } from "./statusSections/agreement";

export const Status = () => {
const { user } = useUser();
const { setModalContent, openModal, isModalOpen } = useLayout();
const openExtendApproveModal = useCallback(() => {
setModalContent(<ApproveForm />);
openModal();
}, []);

const openExtendDepositModal = useCallback(() => {
setModalContent(<ExtendDeposit />);
openModal();
}, []);

const openCreateDepositModal = useCallback(() => {
setModalContent(<CreateDeposit />);
openModal();
}, []);

const deposit = useUserCurrentDeposit();

const { isCreating: isCreatingAllocation, createAllocation } =
useCreateAllocation();

const { currentAllocation } = useCurrentAllocation();
const { releaseAllocation } = useReleaseAllocation();
const { txHash } = useAllowanceTx();
return (
<Card>
<Card.Body>
<Card.Title>Status</Card.Title>
<div className="flex flex-col justify-between">
<div className="stats shadow">
<div className="stat ">
<div className="stat-title">Registered</div>
<div className="stat-value">
{user.isRegistered() ? "OK" : "Not registered"}{" "}
</div>
</div>
</div>
<div className="stats shadow mt-2">
<div className="stat">
<div className="stat-title">Approve</div>
<div className="stat-value">
{user.hasEnoughAllowance()
? "OK"
: user.allowanceAmount && user.allowanceAmount > 0
? "Not enough"
: "-"}
</div>
</div>
<div className="stat">
<div className="stat-title">Given</div>
<GLMAmountStat
amount={formatBalance(user.allowanceAmount || 0n)}
/>
</div>
<div className="stat ">
{txHash && (
<>
<div className="stat-title">Tx</div>
<div className="state-content">
<Link
href={`https://holesky.etherscan.io/tx/${txHash}`}
target="_blank"
rel="noreferrer"
>
{shortTransaction(txHash)}
</Link>
</div>
</>
)}
</div>
<div className="stat "></div>
<div className="stat ">
<div className="stat-actions mt-0 ">
<button className="btn" onClick={openExtendApproveModal}>
{user.hasEnoughAllowance()
? "Extend"
: user.allowanceAmount && user.allowanceAmount > 0
? "Extend"
: "Approve"}
</button>
</div>
</div>
<div
className="stat p-0 w-0"
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
width: "0px",
}}
></div>{" "}
</div>
<div className="stats shadow mt-2">
<div className="stat">
<div className="stat-title">Deposit</div>
<div className="stat-value">
{deposit.isPending ? (
<Loading variant="infinity" />
) : user.hasDeposit() ? (
"OK"
) : (
"-"
)}
</div>
</div>

<div className="stat">
<div className="stat-title">Amount locked</div>
<GLMAmountStat amount={deposit.amount} />
</div>
<div className="stat">
<div className="stat-title">Fee locked</div>
<GLMAmountStat amount={deposit.flatFeeAmount} />
</div>
<div className="stat">
{/* <div className="stat-title">Amount spent</div>
<div className="stat-value"></div> */}
</div>
<div className="stat ">
<div className="stat-actions">
{user.hasDeposit() ? (
<button className="btn" onClick={openExtendDepositModal}>
Extend
</button>
) : (
<button className="btn" onClick={openCreateDepositModal}>
Create
</button>
)}
</div>
</div>
<div
className="stat p-0 w-0"
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
width: "0px",
}}
></div>
</div>
<div className="stats shadow mt-2 ">
<div
className="stat "
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
}}
>
<div className="stat-title">Allocation </div>
<div className="stat-value">
<AllocationLink
allocationId={user?.currentAllocation?.id}
></AllocationLink>
</div>
</div>
<div
className="stat "
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
}}
>
<div className="stat-title">Total</div>
<div className="stat-value">
{currentAllocation?.totalAmount || "-"}
</div>
</div>
<div
className="stat "
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
}}
>
<div className="stat-title">Spent</div>
<div className="stat-value">
{currentAllocation?.spentAmount || "-"}
</div>
</div>
<div
className="stat "
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
}}
>
<div className="stat-title">Remaining</div>
<div className="stat-value">
{currentAllocation?.remainingAmount || "-"}
</div>
</div>
<div
className="stat "
style={{
opacity: 1,
}}
>
<div className="stat-actions m-0">
{isCreatingAllocation ? (
<Loading />
) : user.hasAllocation() ? (
<div className="btn-group">
<button className="btn">Extend </button>
<button className="btn" onClick={() => releaseAllocation()}>
Close{" "}
</button>
</div>
) : (
<button
className="btn"
onClick={() => {
createAllocation();
}}
>
Create{" "}
</button>
)}
</div>
</div>
<div
className="stat p-0 w-0"
style={{
opacity: user.hasAllocation() ? 1 : 0.3,
width: "0px",
}}
></div>
</div>
<div className="stats shadow mt-2">
<div className="stat " style={{ opacity: 0.3 }}>
<div className="stat-title">Agreement</div>
<div className="stat-value">-</div>
</div>
<div className="stat ">
{/* <div className="stat-title">Given</div>
<div className="stat-value">4200</div> */}
</div>
<div className="stat "></div>
<div className="stat "></div>
<div
className="stat "
style={{
opacity: 0.3,
}}
>
<div className="stat-actions m-0">
<button className="btn">Create </button>
</div>
</div>{" "}
</div>
<Register />
<Approve />
<Deposit />
<Allocation />
<Agreement />
</div>
</Card.Body>
</Card>
Expand Down
26 changes: 26 additions & 0 deletions frontend/src/components/homePage/statusSections/agreement.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export const Agreement = () => {
return (
<div className="stats shadow mt-2">
<div className="stat " style={{ opacity: 0.3 }}>
<div className="stat-title">Agreement</div>
<div className="stat-value">-</div>
</div>
<div className="stat ">
{/* <div className="stat-title">Given</div>
<div className="stat-value">4200</div> */}
</div>
<div className="stat "></div>
<div className="stat "></div>
<div
className="stat "
style={{
opacity: 0.3,
}}
>
<div className="stat-actions m-0">
<button className="btn">Create </button>
</div>
</div>{" "}
</div>
);
};
Loading

0 comments on commit 8346371

Please sign in to comment.