From 288c55fd984db12f9565b39822c8e98beeed60da Mon Sep 17 00:00:00 2001 From: pociej Date: Thu, 11 Apr 2024 15:31:44 +0200 Subject: [PATCH] feat: use new contract #49 --- frontend/src/components/allowanceSummary.tsx | 13 +- frontend/src/components/createDepositForm.tsx | 1 - frontend/src/components/deposit.tsx | 13 +- frontend/src/components/depositSummary.tsx | 116 ++++++++---------- .../src/components/providers/userProvider.tsx | 25 ++-- frontend/src/components/register.tsx | 13 +- .../components/summaryCard/summary.module.css | 0 .../summaryCard/summaryCard.module.css | 7 ++ .../components/summaryCard/summaryCard.tsx | 14 +++ frontend/src/config.ts | 2 +- frontend/src/hooks/depositContract/abi.ts | 105 ++++++++++++---- .../src/hooks/depositContract/useDeposit.ts | 3 +- 12 files changed, 196 insertions(+), 116 deletions(-) delete mode 100644 frontend/src/components/summaryCard/summary.module.css create mode 100644 frontend/src/components/summaryCard/summaryCard.module.css diff --git a/frontend/src/components/allowanceSummary.tsx b/frontend/src/components/allowanceSummary.tsx index d51e50f..f46e15f 100644 --- a/frontend/src/components/allowanceSummary.tsx +++ b/frontend/src/components/allowanceSummary.tsx @@ -3,18 +3,11 @@ import { AnimatePresence, motion } from "framer-motion"; import { useAllowance } from "hooks/GLM/useGLMApprove"; import { formatEther } from "viem"; import { CheckCircleIcon } from "@heroicons/react/20/solid"; +import { SummaryCard } from "./summaryCard/summaryCard"; export const AllowanceSummary = ({ isVisible }: { isVisible: boolean }) => { const { data } = useAllowance(); return ( -
+

{ {formatEther(config.minimalAllowance)})

Spent: x GLM

-

+ ); }; diff --git a/frontend/src/components/createDepositForm.tsx b/frontend/src/components/createDepositForm.tsx index 19e55a0..b1e46d0 100644 --- a/frontend/src/components/createDepositForm.tsx +++ b/frontend/src/components/createDepositForm.tsx @@ -60,7 +60,6 @@ export const CreateDepositForm = ({ isVisible }: { isVisible: boolean }) => { { const { user } = useUser(); console.log("Deposit rendered", user.hasDeposit()); + const { address } = useAccount(); return ( { variants={variants} transition={{ duration: 0.5 }} > - - + {user.hasDepositDataLoaded() && address && ( + + )} + + {user.hasDeposit() && } ); }; diff --git a/frontend/src/components/depositSummary.tsx b/frontend/src/components/depositSummary.tsx index c4bff2c..e56861e 100644 --- a/frontend/src/components/depositSummary.tsx +++ b/frontend/src/components/depositSummary.tsx @@ -1,75 +1,67 @@ -import { config } from "config"; import { AnimatePresence, motion } from "framer-motion"; -import { useAllowance } from "hooks/GLM/useGLMApprove"; import { formatEther } from "viem"; import { CheckCircleIcon } from "@heroicons/react/20/solid"; import { useUserCurrentDeposit } from "hooks/depositContract/useDeposit"; import { Button, Input } from "react-daisyui"; -export const DepositSummary = ({ isVisible }: { isVisible: boolean }) => { +export const DepositSummary = () => { const { data } = useUserCurrentDeposit(); console.log("data", data); - if (!data?.amount) { - throw new Error("No deposit found"); - } return ( - - {isVisible && ( - +

+ {" "} + -

- {" "} - - Deposit Summary - -

-

-
-
- Amount: - {formatEther(data.amount)} -
-
- - -
-
- - )} - + Deposit Summary + +

+

+
+
+ Amount: + //@ts-ignore + {formatEther(data?.amount || 0n)} +
+
+ + +
+
+ ); }; diff --git a/frontend/src/components/providers/userProvider.tsx b/frontend/src/components/providers/userProvider.tsx index b40448f..0b53284 100644 --- a/frontend/src/components/providers/userProvider.tsx +++ b/frontend/src/components/providers/userProvider.tsx @@ -119,30 +119,35 @@ export const UserProvider = ({ children }: PropsWithChildren<{}>) => { //TODO : check if user is registered const [isRegistered, setIsRegistered] = useState(false); + const [user, dispatch] = useReducer( + userActionReducer, + isConnected + ? isRegistered + ? { state: UserState.REGISTERED } + : { state: UserState.CONNECTED } + : { state: UserState.DISCONNECTED } + ); + useEffect(() => { - const currentDeposit = userData?.deposits.find( + const currentDeposit = (userData?.deposits || []).find( (deposit) => deposit.isCurrent ); if (!isUserLoading && userData?._id) { + console.log("userData", userData); setIsRegistered(true); } if (currentDeposit) { console.log("currentDeposit", currentDeposit); dispatch({ kind: UserAction.HAS_DEPOSIT, payload: { currentDeposit } }); } else { - dispatch({ kind: UserAction.HAS_NO_DEPOSIT }); + if (userData?.deposits) { + console.log("aaa"); + dispatch({ kind: UserAction.HAS_NO_DEPOSIT }); + } } }, [isUserLoading, userData]); const { isFetched, isLoading: isLoadingAllowance, data } = useAllowance(); - const [user, dispatch] = useReducer( - userActionReducer, - isConnected - ? isRegistered - ? { state: UserState.REGISTERED } - : { state: UserState.CONNECTED } - : { state: UserState.DISCONNECTED } - ); useEffect(() => { if (isConnected) { diff --git a/frontend/src/components/register.tsx b/frontend/src/components/register.tsx index 74d9633..c86923c 100644 --- a/frontend/src/components/register.tsx +++ b/frontend/src/components/register.tsx @@ -4,6 +4,7 @@ import { AllowanceSummary } from "./allowanceSummary"; import { ApproveForm } from "./approveForm"; import { RegisterSummary } from "./registerSummary"; import { RegisterButton } from "./RegisterButton"; +import { useAccount } from "wagmi"; const variants = { onTop: { @@ -17,6 +18,8 @@ const variants = { export const Register = () => { const { user } = useUser(); + const { address } = useAccount(); + console.log("user", user.state); return ( { variants={variants} transition={{ duration: 0.5 }} > - - + {user.isConnected() && address && ( + + )} + {user.isRegistered() && ( + + )} ); }; diff --git a/frontend/src/components/summaryCard/summary.module.css b/frontend/src/components/summaryCard/summary.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/components/summaryCard/summaryCard.module.css b/frontend/src/components/summaryCard/summaryCard.module.css new file mode 100644 index 0000000..5747ae8 --- /dev/null +++ b/frontend/src/components/summaryCard/summaryCard.module.css @@ -0,0 +1,7 @@ +.summaryCard { + background-color: #0000005b; + border-radius: 16px; + padding: 1rem; + font-size: 1.3rem; + min-width: 350px; +} \ No newline at end of file diff --git a/frontend/src/components/summaryCard/summaryCard.tsx b/frontend/src/components/summaryCard/summaryCard.tsx index e69de29..e323ec7 100644 --- a/frontend/src/components/summaryCard/summaryCard.tsx +++ b/frontend/src/components/summaryCard/summaryCard.tsx @@ -0,0 +1,14 @@ +import { AnimatePresence } from "framer-motion"; +import styles from "./summaryCard.module.css"; +import { PropsWithChildren } from "react"; + +export const SummaryCard = ({ + isVisible, + children, +}: PropsWithChildren<{ isVisible: boolean }>) => { + return ( + + {isVisible &&
{children}
} + + ); +}; diff --git a/frontend/src/config.ts b/frontend/src/config.ts index 0c46410..3e96cea 100644 --- a/frontend/src/config.ts +++ b/frontend/src/config.ts @@ -22,7 +22,7 @@ export const config: Config<[typeof holesky]> = { supportedChains: [holesky] as const, projectId: "20bd2ed396d80502980b6d2a3fb425f4", depositContractAddress: { - [holesky.id]: "0xb9919c8D8D384d93C195503064A3b303Ea8Fdbaa", + [holesky.id]: "0xA3D86ebF4FAC94114526f4D09C3fA093898347a6", }, GLMContractAddress: { [holesky.id]: "0x8888888815bf4db87e57b609a50f938311eed068", diff --git a/frontend/src/hooks/depositContract/abi.ts b/frontend/src/hooks/depositContract/abi.ts index 2bd5431..c170fdb 100644 --- a/frontend/src/hooks/depositContract/abi.ts +++ b/frontend/src/hooks/depositContract/abi.ts @@ -7,40 +7,72 @@ export const abi = [ type: "constructor", }, { - inputs: [], - name: "GLM", - outputs: [{ internalType: "contract IERC20", name: "", type: "address" }], - stateMutability: "view", - type: "function", - }, - { - inputs: [{ internalType: "uint256", name: "id", type: "uint256" }], - name: "closeDeposit", - outputs: [], - stateMutability: "nonpayable", - type: "function", + anonymous: false, + inputs: [ + { indexed: false, internalType: "uint256", name: "id", type: "uint256" }, + { + indexed: false, + internalType: "address", + name: "spender", + type: "address", + }, + ], + name: "DepositClosed", + type: "event", }, { + anonymous: false, inputs: [ + { indexed: false, internalType: "uint256", name: "id", type: "uint256" }, { + indexed: false, internalType: "address", name: "spender", type: "address", }, + ], + name: "DepositCreated", + type: "event", + }, + { + anonymous: false, + inputs: [ + { indexed: false, internalType: "uint256", name: "id", type: "uint256" }, { - internalType: "uint256", - name: "amount", - type: "uint256", + indexed: false, + internalType: "address", + name: "spender", + type: "address", }, ], - name: "approve", - outputs: [ + name: "DepositExtended", + type: "event", + }, + { + anonymous: false, + inputs: [ + { indexed: false, internalType: "uint256", name: "id", type: "uint256" }, { - internalType: "bool", - name: "", - type: "bool", + indexed: false, + internalType: "address", + name: "spender", + type: "address", }, ], + name: "DepositTerminated", + type: "event", + }, + { + inputs: [], + name: "GLM", + outputs: [{ internalType: "contract IERC20", name: "", type: "address" }], + stateMutability: "view", + type: "function", + }, + { + inputs: [{ internalType: "uint256", name: "id", type: "uint256" }], + name: "closeDeposit", + outputs: [], stateMutability: "nonpayable", type: "function", }, @@ -49,10 +81,33 @@ export const abi = [ { internalType: "uint64", name: "nonce", type: "uint64" }, { internalType: "address", name: "spender", type: "address" }, { internalType: "uint128", name: "amount", type: "uint128" }, - { internalType: "uint128", name: "feeAmount", type: "uint128" }, + { internalType: "uint128", name: "flatFeeAmount", type: "uint128" }, + { internalType: "int64", name: "percentFee", type: "int64" }, { internalType: "uint64", name: "validToTimestamp", type: "uint64" }, ], name: "createDeposit", + outputs: [{ internalType: "uint256", name: "", type: "uint256" }], + stateMutability: "nonpayable", + type: "function", + }, + { + inputs: [ + { internalType: "uint256", name: "id", type: "uint256" }, + { internalType: "address", name: "addr", type: "address" }, + { internalType: "uint128", name: "amount", type: "uint128" }, + ], + name: "depositSingleTransfer", + outputs: [], + stateMutability: "nonpayable", + type: "function", + }, + { + inputs: [ + { internalType: "uint256", name: "id", type: "uint256" }, + { internalType: "address", name: "addr", type: "address" }, + { internalType: "uint128", name: "amount", type: "uint128" }, + ], + name: "depositSingleTransferAndClose", outputs: [], stateMutability: "nonpayable", type: "function", @@ -92,8 +147,8 @@ export const abi = [ { inputs: [ { internalType: "uint64", name: "nonce", type: "uint64" }, - { internalType: "uint128", name: "extraAmount", type: "uint128" }, - { internalType: "uint128", name: "extraFee", type: "uint128" }, + { internalType: "uint128", name: "additionalAmount", type: "uint128" }, + { internalType: "uint128", name: "additionalFlatFee", type: "uint128" }, { internalType: "uint64", name: "validToTimestamp", type: "uint64" }, ], name: "extendDeposit", @@ -142,7 +197,7 @@ export const abi = [ { internalType: "uint64", name: "nonce", type: "uint64" }, { internalType: "address", name: "funder", type: "address" }, ], - name: "getDeposit2", + name: "getDepositByNonce", outputs: [ { components: [ @@ -215,4 +270,4 @@ export const abi = [ stateMutability: "nonpayable", type: "function", }, -] as const; +]; diff --git a/frontend/src/hooks/depositContract/useDeposit.ts b/frontend/src/hooks/depositContract/useDeposit.ts index e1473f3..ddfe3fc 100644 --- a/frontend/src/hooks/depositContract/useDeposit.ts +++ b/frontend/src/hooks/depositContract/useDeposit.ts @@ -26,6 +26,7 @@ export function useCreateDeposit() { config.requestorWalletAddress[chainId], BigInt(amount * Math.pow(10, 18)), BigInt(fee * Math.pow(10, 18)), + BigInt(0), BigInt(validToTimestamp), ], }); @@ -57,7 +58,7 @@ export function useUserCurrentDeposit() { return useReadContract({ address: config.depositContractAddress[useChainId()], abi: abi, - functionName: "getDeposit2", + functionName: "getDepositByNonce", args: [user.currentDeposit.nonce || BigInt(0), address], }); }