From f7722944b07ea7b00ad9d40134fd7a185a95f491 Mon Sep 17 00:00:00 2001 From: David Totraev Date: Tue, 10 Dec 2024 18:24:27 +0500 Subject: [PATCH] feat: new EOI Modal --- package-lock.json | 53 +++++++-- package.json | 4 +- .../components/Modals/EOIModal/EOIModal.tsx | 108 ++++++++++++++++++ src/app/components/Modals/EOIModal/Step.tsx | 39 +++++++ src/app/components/Staking/Staking.tsx | 11 +- 5 files changed, 198 insertions(+), 17 deletions(-) create mode 100644 src/app/components/Modals/EOIModal/EOIModal.tsx create mode 100644 src/app/components/Modals/EOIModal/Step.tsx diff --git a/package-lock.json b/package-lock.json index bd0db4bd..d9f1f0c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "0.3.9", "dependencies": { "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4", - "@babylonlabs-io/bbn-core-ui": "^0.3.2", - "@babylonlabs-io/bbn-wallet-connect": "^0.1.7", + "@babylonlabs-io/bbn-core-ui": "^0.4.1", + "@babylonlabs-io/bbn-wallet-connect": "^0.1.9", "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", "@bitcoinerlab/secp256k1": "^1.1.1", @@ -2075,9 +2075,13 @@ "license": "(Apache-2.0 AND BSD-3-Clause)" }, "node_modules/@babylonlabs-io/bbn-core-ui": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.3.2.tgz", - "integrity": "sha512-IpGJZ7FJcS3sbqio3rMXO1lG77T/4fY40QkKl6JrNjl/YqzK1dUfr/aeNmVZP7tl5I9h+hSlZMr3WdTQ8XrNWA==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.4.1.tgz", + "integrity": "sha512-M1knyet7lkIpY9t0ngsnwhprQaqkes7OvZqDm2wi983wPucOyHeWrd2DTxHdcE0qiBZqiJHFc7K3pw1YlClYnw==", + "dependencies": { + "@popperjs/core": "^2.11.8", + "react-popper": "^2.3.0" + }, "peerDependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2085,9 +2089,9 @@ } }, "node_modules/@babylonlabs-io/bbn-wallet-connect": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.1.7.tgz", - "integrity": "sha512-W9VaShT4nkY2cYM3WR31iEGX7tCwagz5ExwSPBvHfLSFJMGodWd/IyT/aCxx7vEW2hpvEIUcwkNZ7Ukyq4HdNA==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-wallet-connect/-/bbn-wallet-connect-0.1.9.tgz", + "integrity": "sha512-fcET4J2dZFe703YoPvTScU0ktvRgfKXsIt6OtoCX8GcQe7e0uWwznfhU0vdSgnZj5OD/CGoBzNb4Ky3lBkscTg==", "dependencies": { "@cosmjs/stargate": "^0.32.4", "@keplr-wallet/types": "^0.12.156", @@ -2095,7 +2099,7 @@ "nanoevents": "^9.1.0" }, "peerDependencies": { - "@babylonlabs-io/bbn-core-ui": "^0.3.2", + "@babylonlabs-io/bbn-core-ui": "^0.4.1", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4" @@ -5373,6 +5377,16 @@ "node": ">=18" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@prisma/instrumentation": { "version": "5.19.1", "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-5.19.1.tgz", @@ -16651,6 +16665,12 @@ "react": "^18.3.1" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, "node_modules/react-icons": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", @@ -16714,6 +16734,21 @@ "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "license": "MIT", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-responsive-modal": { "version": "6.4.2", "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz", diff --git a/package.json b/package.json index 3fb3c1fb..8e17bd04 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ }, "dependencies": { "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4", - "@babylonlabs-io/bbn-core-ui": "^0.3.2", - "@babylonlabs-io/bbn-wallet-connect": "^0.1.7", + "@babylonlabs-io/bbn-core-ui": "^0.4.1", + "@babylonlabs-io/bbn-wallet-connect": "^0.1.9", "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", "@bitcoinerlab/secp256k1": "^1.1.1", diff --git a/src/app/components/Modals/EOIModal/EOIModal.tsx b/src/app/components/Modals/EOIModal/EOIModal.tsx new file mode 100644 index 00000000..6c9ecd40 --- /dev/null +++ b/src/app/components/Modals/EOIModal/EOIModal.tsx @@ -0,0 +1,108 @@ +import { + Button, + DialogBody, + DialogFooter, + DialogHeader, + Loader, + Text, +} from "@babylonlabs-io/bbn-core-ui"; + +import { ResponsiveDialog } from "@/app/components/Modals/ResponsiveDialog"; + +import { Step } from "./Step"; + +export enum EOIStepStatus { + UNSIGNED = "UNSIGNED", + SIGNED = "SIGNED", + PROCESSING = "PROCESSING", +} + +interface EOIModalProps { + processing?: boolean; + open: boolean; + title: string; + statuses: { + slashing: EOIStepStatus; + unbonding: EOIStepStatus; + reward: EOIStepStatus; + eoi: EOIStepStatus; + }; + onClose?: () => void; + onSubmit?: () => void; +} + +const STEP_STATES = { + [EOIStepStatus.UNSIGNED]: "upcoming", + [EOIStepStatus.SIGNED]: "completed", + [EOIStepStatus.PROCESSING]: "processing", +} as const; + +export function EOIModal({ + processing = false, + open, + title, + statuses, + onClose, + onSubmit, +}: EOIModalProps) { + return ( + + + + + + Please sign the following messages + + +
+ + Consent to slashing + + + Consent to slashing during unbonding + + + BTC-BBN address binding for receiving staking rewards + + + Staking transaction registration + +
+ + + + {onClose && ( + + )} + + {onSubmit && ( + + )} + + + ); +} diff --git a/src/app/components/Modals/EOIModal/Step.tsx b/src/app/components/Modals/EOIModal/Step.tsx new file mode 100644 index 00000000..60006527 --- /dev/null +++ b/src/app/components/Modals/EOIModal/Step.tsx @@ -0,0 +1,39 @@ +import { Text } from "@babylonlabs-io/bbn-core-ui"; +import type { PropsWithChildren, ReactNode } from "react"; +import { IoCheckmarkSharp } from "react-icons/io5"; +import { twMerge } from "tailwind-merge"; + +interface StepProps { + index: number; + state: "completed" | "processing" | "upcoming"; + children: ReactNode; +} + +export const Step = ({ + index, + state, + children, +}: PropsWithChildren) => ( +
+ {state === "completed" ? ( +
+ +
+ ) : ( +
+ + {index} + +
+ )} + + + Step {index}: {children} + +
+); diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx index c3ac8182..cdd7754e 100644 --- a/src/app/components/Staking/Staking.tsx +++ b/src/app/components/Staking/Staking.tsx @@ -7,7 +7,10 @@ import { useLocalStorage } from "usehooks-ts"; import { UTXO_KEY } from "@/app/common/constants"; import { LoadingView } from "@/app/components/Loading/Loading"; -import { EOIModal, EOIStepStatus } from "@/app/components/Modals/EOIModal"; +import { + EOIModal, + EOIStepStatus, +} from "@/app/components/Modals/EOIModal/EOIModal"; import { useError } from "@/app/context/Error/ErrorContext"; import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider"; import { @@ -581,11 +584,7 @@ export const Staking = () => { awaitingWalletResponse={awaitingWalletResponse} /> )} - setEoiModalOpen(false)} - /> + setInfoModalOpen(false)} /> );