From 834637174bbeecb8f7b7cd5d60e45bf947e859e4 Mon Sep 17 00:00:00 2001 From: pociej Date: Sun, 2 Jun 2024 10:47:51 +0200 Subject: [PATCH] feat: proper support for events with rxjs #62 --- frontend/package.json | 1 + frontend/src/components/homePage/events.tsx | 2 + .../src/components/homePage/events/types.ts | 0 .../{ => homePage/modals}/approveForm.tsx | 4 +- .../modals}/createDepositForm.tsx | 0 .../modals}/deposit/createDeposit.tsx | 3 +- .../modals}/deposit/extendDeposit.tsx | 0 .../deposit/upsertDepositPresentational.tsx | 7 +- .../modals}/extendDepositForm.tsx | 0 frontend/src/components/homePage/status.tsx | 265 +----------------- .../homePage/statusSections/agreement.tsx | 26 ++ .../homePage/statusSections/allocation.tsx | 119 ++++++++ .../homePage/statusSections/approve.tsx | 73 +++++ .../homePage/statusSections/deposit.tsx | 76 +++++ .../homePage/statusSections/register.tsx | 15 + .../src/components/providers/userProvider.tsx | 7 +- frontend/src/components/register.tsx | 2 +- .../src/hooks/depositContract/useDeposit.ts | 11 +- .../useWatchDepositPayments.ts | 2 +- .../events/useCreateAllocationEvents.tsx | 6 + .../src/hooks/events/useSyncExternalEvent.ts | 60 ++++ frontend/src/hooks/useCurrentAllocation.ts | 6 +- frontend/src/types/reducerArgs.ts | 2 +- frontend/src/utils/formatBalance.ts | 4 +- pnpm-lock.yaml | 3 + 25 files changed, 424 insertions(+), 270 deletions(-) create mode 100644 frontend/src/components/homePage/events/types.ts rename frontend/src/components/{ => homePage/modals}/approveForm.tsx (95%) rename frontend/src/components/{ => homePage/modals}/createDepositForm.tsx (100%) rename frontend/src/components/{molecules => homePage/modals}/deposit/createDeposit.tsx (96%) rename frontend/src/components/{molecules => homePage/modals}/deposit/extendDeposit.tsx (100%) rename frontend/src/components/{molecules => homePage/modals}/deposit/upsertDepositPresentational.tsx (90%) rename frontend/src/components/{ => homePage/modals}/extendDepositForm.tsx (100%) create mode 100644 frontend/src/components/homePage/statusSections/agreement.tsx create mode 100644 frontend/src/components/homePage/statusSections/allocation.tsx create mode 100644 frontend/src/components/homePage/statusSections/approve.tsx create mode 100644 frontend/src/components/homePage/statusSections/deposit.tsx create mode 100644 frontend/src/components/homePage/statusSections/register.tsx create mode 100644 frontend/src/hooks/events/useCreateAllocationEvents.tsx create mode 100644 frontend/src/hooks/events/useSyncExternalEvent.ts diff --git a/frontend/package.json b/frontend/package.json index 3eea58b..54bae66 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/src/components/homePage/events.tsx b/frontend/src/components/homePage/events.tsx index 390c61a..3ce4288 100644 --- a/frontend/src/components/homePage/events.tsx +++ b/frontend/src/components/homePage/events.tsx @@ -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( diff --git a/frontend/src/components/homePage/events/types.ts b/frontend/src/components/homePage/events/types.ts new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/approveForm.tsx b/frontend/src/components/homePage/modals/approveForm.tsx similarity index 95% rename from frontend/src/components/approveForm.tsx rename to frontend/src/components/homePage/modals/approveForm.tsx index c1b4fce..ce59648 100644 --- a/frontend/src/components/approveForm.tsx +++ b/frontend/src/components/homePage/modals/approveForm.tsx @@ -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(); diff --git a/frontend/src/components/createDepositForm.tsx b/frontend/src/components/homePage/modals/createDepositForm.tsx similarity index 100% rename from frontend/src/components/createDepositForm.tsx rename to frontend/src/components/homePage/modals/createDepositForm.tsx diff --git a/frontend/src/components/molecules/deposit/createDeposit.tsx b/frontend/src/components/homePage/modals/deposit/createDeposit.tsx similarity index 96% rename from frontend/src/components/molecules/deposit/createDeposit.tsx rename to frontend/src/components/homePage/modals/deposit/createDeposit.tsx index bc1dc3d..1a0a20d 100644 --- a/frontend/src/components/molecules/deposit/createDeposit.tsx +++ b/frontend/src/components/homePage/modals/deposit/createDeposit.tsx @@ -16,6 +16,7 @@ export const CreateDeposit = () => { error: errorPrepareDeposit, setAmount, isPending, + validToTimestamp, setValidToTimestamp, depositId, nonce, @@ -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} > diff --git a/frontend/src/components/molecules/deposit/extendDeposit.tsx b/frontend/src/components/homePage/modals/deposit/extendDeposit.tsx similarity index 100% rename from frontend/src/components/molecules/deposit/extendDeposit.tsx rename to frontend/src/components/homePage/modals/deposit/extendDeposit.tsx diff --git a/frontend/src/components/molecules/deposit/upsertDepositPresentational.tsx b/frontend/src/components/homePage/modals/deposit/upsertDepositPresentational.tsx similarity index 90% rename from frontend/src/components/molecules/deposit/upsertDepositPresentational.tsx rename to frontend/src/components/homePage/modals/deposit/upsertDepositPresentational.tsx index 51980e8..b18b65d 100644 --- a/frontend/src/components/molecules/deposit/upsertDepositPresentational.tsx +++ b/frontend/src/components/homePage/modals/deposit/upsertDepositPresentational.tsx @@ -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, @@ -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 ( <>
{title}
diff --git a/frontend/src/components/extendDepositForm.tsx b/frontend/src/components/homePage/modals/extendDepositForm.tsx similarity index 100% rename from frontend/src/components/extendDepositForm.tsx rename to frontend/src/components/homePage/modals/extendDepositForm.tsx diff --git a/frontend/src/components/homePage/status.tsx b/frontend/src/components/homePage/status.tsx index 6c2cfea..d09a5e1 100644 --- a/frontend/src/components/homePage/status.tsx +++ b/frontend/src/components/homePage/status.tsx @@ -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(); - openModal(); - }, []); - - const openExtendDepositModal = useCallback(() => { - setModalContent(); - openModal(); - }, []); - - const openCreateDepositModal = useCallback(() => { - setModalContent(); - openModal(); - }, []); - - const deposit = useUserCurrentDeposit(); - - const { isCreating: isCreatingAllocation, createAllocation } = - useCreateAllocation(); - - const { currentAllocation } = useCurrentAllocation(); - const { releaseAllocation } = useReleaseAllocation(); - const { txHash } = useAllowanceTx(); return ( Status
-
-
-
Registered
-
- {user.isRegistered() ? "OK" : "Not registered"}{" "} -
-
-
-
-
-
Approve
-
- {user.hasEnoughAllowance() - ? "OK" - : user.allowanceAmount && user.allowanceAmount > 0 - ? "Not enough" - : "-"} -
-
-
-
Given
- -
-
- {txHash && ( - <> -
Tx
-
- - {shortTransaction(txHash)} - -
- - )} -
-
-
-
- -
-
-
{" "} -
-
-
-
Deposit
-
- {deposit.isPending ? ( - - ) : user.hasDeposit() ? ( - "OK" - ) : ( - "-" - )} -
-
- -
-
Amount locked
- -
-
-
Fee locked
- -
-
- {/*
Amount spent
-
*/} -
-
-
- {user.hasDeposit() ? ( - - ) : ( - - )} -
-
-
-
-
-
-
Allocation
-
- -
-
-
-
Total
-
- {currentAllocation?.totalAmount || "-"} -
-
-
-
Spent
-
- {currentAllocation?.spentAmount || "-"} -
-
-
-
Remaining
-
- {currentAllocation?.remainingAmount || "-"} -
-
-
-
- {isCreatingAllocation ? ( - - ) : user.hasAllocation() ? ( -
- - -
- ) : ( - - )} -
-
-
-
-
-
-
Agreement
-
-
-
-
- {/*
Given
-
4200
*/} -
-
-
-
-
- -
-
{" "} -
+ + + + +
diff --git a/frontend/src/components/homePage/statusSections/agreement.tsx b/frontend/src/components/homePage/statusSections/agreement.tsx new file mode 100644 index 0000000..82c1bf9 --- /dev/null +++ b/frontend/src/components/homePage/statusSections/agreement.tsx @@ -0,0 +1,26 @@ +export const Agreement = () => { + return ( +
+
+
Agreement
+
-
+
+
+ {/*
Given
+
4200
*/} +
+
+
+
+
+ +
+
{" "} +
+ ); +}; diff --git a/frontend/src/components/homePage/statusSections/allocation.tsx b/frontend/src/components/homePage/statusSections/allocation.tsx new file mode 100644 index 0000000..07d6d38 --- /dev/null +++ b/frontend/src/components/homePage/statusSections/allocation.tsx @@ -0,0 +1,119 @@ +import { AllocationLink } from "components/alloctionLink"; +import { useCreateAllocationEvents } from "hooks/events/useCreateAllocationEvents"; +import { useCreateAllocation } from "hooks/useCreateAllocation"; +import { useCurrentAllocation } from "hooks/useCurrentAllocation"; +import { useReleaseAllocation } from "hooks/useReleaseAllocation"; +import { useUser } from "hooks/useUser"; +import { Loading } from "react-daisyui"; +import { formatBalance } from "utils/formatBalance"; + +export const Allocation = () => { + const { isCreating: isCreatingAllocation, createAllocation } = + useCreateAllocation(); + const { currentAllocation } = useCurrentAllocation(); + const { releaseAllocation } = useReleaseAllocation(); + const { user } = useUser(); + const { events$, emit } = useCreateAllocationEvents(); + + return ( +
+
+
Allocation
+
+ +
+
+
+
Total
+
+ {currentAllocation?.totalAmount || "-"} +
+
+
+
Spent
+
+ {currentAllocation?.spentAmount || "-"} +
+
+
+
Remaining
+
+ {currentAllocation?.remainingAmount + ? formatBalance(currentAllocation?.remainingAmount) + : "-"} +
+
+
+
+ + {/* {isCreatingAllocation ? ( + + ) : user.hasAllocation() ? ( +
+ + +
+ ) : ( + + )} */} +
+
+
+
+ ); +}; diff --git a/frontend/src/components/homePage/statusSections/approve.tsx b/frontend/src/components/homePage/statusSections/approve.tsx new file mode 100644 index 0000000..099288c --- /dev/null +++ b/frontend/src/components/homePage/statusSections/approve.tsx @@ -0,0 +1,73 @@ +import { ApproveForm } from "components/homePage/modals/approveForm"; +import { GLMAmountStat } from "components/atoms/GLMAmount"; +import { useLayout } from "components/providers/layoutProvider"; +import { useAllowanceTx } from "hooks/GLM/useAllowanceTx"; +import { useUser } from "hooks/useUser"; +import { useCallback } from "react"; +import { Link } from "react-daisyui"; +import { formatBalance } from "utils/formatBalance"; +import { shortTransaction } from "utils/shortTransaction"; + +export const Approve = () => { + const { txHash } = useAllowanceTx(); + + const { user } = useUser(); + const { setModalContent, openModal } = useLayout(); + const openExtendApproveModal = useCallback(() => { + setModalContent(); + openModal(); + }, []); + return ( +
+
+
Approve
+
+ {user.hasEnoughAllowance() + ? "OK" + : user.allowanceAmount && user.allowanceAmount > 0 + ? "Not enough" + : "-"} +
+
+
+
Given
+ +
+
+ {txHash && ( + <> +
Tx
+
+ + {shortTransaction(txHash)} + +
+ + )} +
+
+
+
+ +
+
+
{" "} +
+ ); +}; diff --git a/frontend/src/components/homePage/statusSections/deposit.tsx b/frontend/src/components/homePage/statusSections/deposit.tsx new file mode 100644 index 0000000..f0a0c12 --- /dev/null +++ b/frontend/src/components/homePage/statusSections/deposit.tsx @@ -0,0 +1,76 @@ +import { ApproveForm } from "components/homePage/modals/approveForm"; +import { GLMAmountStat } from "components/atoms/GLMAmount"; +import { CreateDeposit } from "components/homePage/modals/deposit/createDeposit"; +import { ExtendDeposit } from "components/homePage/modals/deposit/extendDeposit"; +import { useLayout } from "components/providers/layoutProvider"; +import { useUserCurrentDeposit } from "hooks/depositContract/useDeposit"; +import { useUser } from "hooks/useUser"; +import { useCallback } from "react"; +import { Loading } from "react-daisyui"; +import { formatBalance } from "utils/formatBalance"; + +export const Deposit = () => { + const { user } = useUser(); + const { setModalContent, openModal } = useLayout(); + + const openExtendDepositModal = useCallback(() => { + setModalContent(); + openModal(); + }, []); + + const openCreateDepositModal = useCallback(() => { + setModalContent(); + openModal(); + }, []); + + const deposit = useUserCurrentDeposit(); + return ( +
+
+
Deposit
+
+ {deposit.isPending ? ( + + ) : user.hasDeposit() ? ( + "OK" + ) : ( + "-" + )} +
+
+ +
+
Amount locked
+ +
+
+
Fee locked
+ +
+
+ {/*
Amount spent
+
*/} +
+
+
+ {user.hasDeposit() ? ( + + ) : ( + + )} +
+
+
+
+ ); +}; diff --git a/frontend/src/components/homePage/statusSections/register.tsx b/frontend/src/components/homePage/statusSections/register.tsx new file mode 100644 index 0000000..f34ba69 --- /dev/null +++ b/frontend/src/components/homePage/statusSections/register.tsx @@ -0,0 +1,15 @@ +import { useUser } from "hooks/useUser"; + +export const Register = () => { + const { user } = useUser(); + return ( +
+
+
Registered
+
+ {user.isRegistered() ? "OK" : "Not registered"}{" "} +
+
+
+ ); +}; diff --git a/frontend/src/components/providers/userProvider.tsx b/frontend/src/components/providers/userProvider.tsx index 521e66e..5c71f51 100644 --- a/frontend/src/components/providers/userProvider.tsx +++ b/frontend/src/components/providers/userProvider.tsx @@ -13,7 +13,7 @@ import { } from "react"; import { match } from "ts-pattern"; -import { ReducerArgs } from "types/reducerArgs"; +import { EventWithPayload } from "types/reducerArgs"; import { UserState, UserAction, UserStateOrderValue } from "types/user"; import { useAccount, useReadContract } from "wagmi"; import { useChainId } from "hooks/useChainId"; @@ -131,7 +131,10 @@ type Payload = { }; }; -const userActionReducer = (user: UserProps, action: ReducerArgs) => { +const userActionReducer = ( + user: UserProps, + action: EventWithPayload +) => { const { kind, payload = {} } = action; const state = match(kind) .with(UserAction.CONNECT, () => UserState.CONNECTED) diff --git a/frontend/src/components/register.tsx b/frontend/src/components/register.tsx index af34114..0fb7316 100644 --- a/frontend/src/components/register.tsx +++ b/frontend/src/components/register.tsx @@ -1,7 +1,7 @@ import { AnimatePresence, motion } from "framer-motion"; import { useUser } from "hooks/useUser"; import { AllowanceSummary } from "./allowanceSummary"; -import { ApproveForm } from "./approveForm"; +import { ApproveForm } from "./homePage/modals/approveForm"; import { RegisterSummary } from "./registerSummary"; import { RegisterButton } from "./RegisterButton"; import { useAccount } from "wagmi"; diff --git a/frontend/src/hooks/depositContract/useDeposit.ts b/frontend/src/hooks/depositContract/useDeposit.ts index d291cfe..c61cd52 100644 --- a/frontend/src/hooks/depositContract/useDeposit.ts +++ b/frontend/src/hooks/depositContract/useDeposit.ts @@ -22,7 +22,9 @@ export function useCreateDeposit() { const chainId = useChainId(); const [fee, setFee] = useState(0); const [amount, setAmount] = useState(0); - const [validToTimestamp, setValidToTimestamp] = useState(0); + const [validToTimestamp, setValidToTimestamp] = useState( + dayjs().add(1, "day").unix() + ); const nonce = useRef(Math.floor(Math.random() * 1000000)); const { data: requestorData } = useRequestorWalletAddress(); const { showNotification, errorContext } = useHandleRpcError(); @@ -75,6 +77,7 @@ export function useCreateDeposit() { isPending, isIdle, setValidToTimestamp, + validToTimestamp, depositId: (contractSimulationData?.result as any)?.toString(), nonce: nonce.current, setAmount, @@ -96,9 +99,9 @@ export function useUserCurrentDeposit() { }, }); return { - amount: formatEther(data ? data[1] : 0n), - flatFeeAmount: formatEther(data ? data[2] : 0n), - validToTimestamp: Number(data ? data[3] : 0n), + amount: data ? data[1] : 0n, + flatFeeAmount: data ? data[2] : 0n, + validToTimestamp: data ? data[3] : 0n, isError, isSuccess, isPending, diff --git a/frontend/src/hooks/depositContract/useWatchDepositPayments.ts b/frontend/src/hooks/depositContract/useWatchDepositPayments.ts index de3bf50..6e539a4 100644 --- a/frontend/src/hooks/depositContract/useWatchDepositPayments.ts +++ b/frontend/src/hooks/depositContract/useWatchDepositPayments.ts @@ -4,7 +4,7 @@ import { useWatchContractEvent } from "wagmi"; import { abi } from "./abi"; import { useCallback } from "react"; export const useWatchDepositPayments = () => { - const onLogs = useCallback((logs) => { + const onLogs = useCallback((logs: any) => { console.log("Deposit", logs); }, []); diff --git a/frontend/src/hooks/events/useCreateAllocationEvents.tsx b/frontend/src/hooks/events/useCreateAllocationEvents.tsx new file mode 100644 index 0000000..e940be0 --- /dev/null +++ b/frontend/src/hooks/events/useCreateAllocationEvents.tsx @@ -0,0 +1,6 @@ +import { use } from "i18next"; +import { useSyncExternalEvents } from "./useSyncExternalEvent"; + +export const useCreateAllocationEvents = () => { + return useSyncExternalEvents("allocationEvents"); +}; diff --git a/frontend/src/hooks/events/useSyncExternalEvent.ts b/frontend/src/hooks/events/useSyncExternalEvent.ts new file mode 100644 index 0000000..c461a1c --- /dev/null +++ b/frontend/src/hooks/events/useSyncExternalEvent.ts @@ -0,0 +1,60 @@ +import { useCallback, useMemo, useSyncExternalStore } from "react"; +import { Subject } from "rxjs"; +import { useCall } from "wagmi"; + +const getId = (e: any) => e.id; +export const useSyncExternalEvents = (key: string) => { + const events$ = useMemo(() => { + return new Subject(); + }, []); + + const store = useMemo(() => { + return { + getSnapshot: () => { + return localStorage.getItem(key); + }, + subscribe: () => { + const callback = (event: StorageEvent) => { + console.log("storage event", event); + const lastEvent = JSON.parse(event.newValue || "[]").find( + (e: any) => + !JSON.parse(event.oldValue || "[]") + .map(getId) + .includes(e.id) + ); + console.log("last event", lastEvent); + if (lastEvent) { + events$.next(lastEvent); + } + }; + window.addEventListener("storage", callback); + return () => { + window.removeEventListener("storage", callback); + }; + }, + }; + }, []); + + const emit = useCallback((event: any) => { + const currentEvents = JSON.parse(localStorage.getItem(key) || "[]"); + const newEvents = [ + ...currentEvents, + { ...event, id: currentEvents.length + 1 }, + ]; + localStorage.setItem(key, JSON.stringify(newEvents)); + console.log("emitting", newEvents); + window.dispatchEvent( + new StorageEvent("storage", { + key, + newValue: JSON.stringify(newEvents), + oldValue: JSON.stringify(currentEvents), + }) + ); + }, []); + + return { + events$, + emit, + currentEvents: useSyncExternalStore(store.subscribe, store.getSnapshot), + }; +}; diff --git a/frontend/src/hooks/useCurrentAllocation.ts b/frontend/src/hooks/useCurrentAllocation.ts index 53314a9..d6034af 100644 --- a/frontend/src/hooks/useCurrentAllocation.ts +++ b/frontend/src/hooks/useCurrentAllocation.ts @@ -2,7 +2,11 @@ import axios from "axios"; import useSWR from "swr"; export const useCurrentAllocation = () => { - const { data, error } = useSWR( + const { data, error } = useSWR<{ + totalAmount: number; + spentAmount: number; + remainingAmount: number; + }>( `${import.meta.env.VITE_BACKEND_HTTP_URL}/allocation`, async (url) => { const response = await axios.get(url); diff --git a/frontend/src/types/reducerArgs.ts b/frontend/src/types/reducerArgs.ts index 8b0cc3b..50e965c 100644 --- a/frontend/src/types/reducerArgs.ts +++ b/frontend/src/types/reducerArgs.ts @@ -1,4 +1,4 @@ -export type ReducerArgs = { +export type EventWithPayload = { [K in keyof T]: T[K] extends never ? { kind: K; payload?: never } : { kind: K; payload: T[K] }; diff --git a/frontend/src/utils/formatBalance.ts b/frontend/src/utils/formatBalance.ts index 7cf77e0..ee3f089 100644 --- a/frontend/src/utils/formatBalance.ts +++ b/frontend/src/utils/formatBalance.ts @@ -1,4 +1,4 @@ import { formatEther } from "viem"; -export const formatBalance = (rawBalance: bigint) => { - return parseFloat(formatEther(rawBalance)).toFixed(2); +export const formatBalance = (rawBalance: bigint | number) => { + return parseFloat(formatEther(BigInt(rawBalance))).toFixed(2); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ee9506..468f319 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -190,6 +190,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + rxjs: + specifier: ^7.8.1 + version: 7.8.1 siwe: specifier: ^2.3.2 version: 2.3.2(ethers@6.12.1)