From 7006538c75d30d6f2b97f3244395337732e96761 Mon Sep 17 00:00:00 2001 From: jeremy-babylonchain Date: Tue, 26 Nov 2024 12:26:01 +0800 Subject: [PATCH] add mobile view and new UI configs --- package-lock.json | 120 ++++++++++++++++++ .../components/Delegations/Delegations.tsx | 11 +- src/app/components/Modals/WithdrawModal.tsx | 111 ++++++++-------- src/app/components/Modals/WithdrawV2Modal.tsx | 61 --------- 4 files changed, 176 insertions(+), 127 deletions(-) delete mode 100644 src/app/components/Modals/WithdrawV2Modal.tsx diff --git a/package-lock.json b/package-lock.json index f4dbff58..656f709e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19299,6 +19299,126 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.15.tgz", + "integrity": "sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.15.tgz", + "integrity": "sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.15.tgz", + "integrity": "sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.15.tgz", + "integrity": "sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.15.tgz", + "integrity": "sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.15.tgz", + "integrity": "sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.15.tgz", + "integrity": "sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.15.tgz", + "integrity": "sha512-SzqGbsLsP9OwKNUG9nekShTwhj6JSB9ZLMWQ8g1gG6hdE5gQLncbnbymrwy2yVmH9nikSLYRYxYMFu78Ggp7/g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } } } } diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx index 870d25c6..11ee18b3 100644 --- a/src/app/components/Delegations/Delegations.tsx +++ b/src/app/components/Delegations/Delegations.tsx @@ -5,6 +5,11 @@ import InfiniteScroll from "react-infinite-scroll-component"; import { useLocalStorage } from "usehooks-ts"; import { LoadingTableList } from "@/app/components/Loading/Loading"; +import { + MODE, + MODE_WITHDRAW, + WithdrawModal, +} from "@/app/components/Modals/WithdrawModal"; import { DelegationsPointsProvider } from "@/app/context/api/DelegationsPointsProvider"; import { useError } from "@/app/context/Error/ErrorContext"; import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider"; @@ -21,8 +26,6 @@ import { signWithdrawalTx } from "@/utils/delegations/signWithdrawalTx"; import { getIntermediateDelegationsLocalStorageKey } from "@/utils/local_storage/getIntermediateDelegationsLocalStorageKey"; import { toLocalStorageIntermediateDelegation } from "@/utils/local_storage/toLocalStorageIntermediateDelegation"; -import { MODE, MODE_WITHDRAW, WithdrawModal } from "../Modals/WithdrawModal"; - import { Delegation } from "./Delegation"; export const Delegations = () => { @@ -294,14 +297,12 @@ const DelegationsContent: React.FC = ({ {modalMode && txID && delegation && ( setModalOpen(false)} onProceed={() => { handleWithdraw(txID); }} - mode={modalMode} awaitingWalletResponse={awaitingWalletResponse} - delegation={delegation} /> )} diff --git a/src/app/components/Modals/WithdrawModal.tsx b/src/app/components/Modals/WithdrawModal.tsx index 8cab55de..4fec355f 100644 --- a/src/app/components/Modals/WithdrawModal.tsx +++ b/src/app/components/Modals/WithdrawModal.tsx @@ -1,86 +1,75 @@ -import { IoMdClose } from "react-icons/io"; +import { + Button, + Dialog, + DialogBody, + DialogFooter, + DialogHeader, + MobileDialog, + Text, +} from "@babylonlabs-io/bbn-core-ui"; +import { useMediaQuery } from "usehooks-ts"; -import { Delegation as DelegationInterface } from "@/app/types/delegations"; import { getNetworkConfig } from "@/config/network.config"; - -import { LoadingView } from "../Loading/Loading"; - -import { GeneralModal } from "./GeneralModal"; +import { screenBreakPoints } from "@/config/screen-breakpoints"; export const MODE_TRANSITION = "transition"; export const MODE_WITHDRAW = "withdraw"; export type MODE = typeof MODE_TRANSITION | typeof MODE_WITHDRAW; -interface PreviewModalProps { - open: boolean; - onClose: (value: boolean) => void; +interface WithdrawModalProps { + isOpen: boolean; + onClose: () => void; onProceed: () => void; - mode: MODE; awaitingWalletResponse: boolean; - delegation: DelegationInterface; } const { networkName } = getNetworkConfig(); -export const WithdrawModal: React.FC = ({ - open, +export const WithdrawModal = ({ + isOpen, onClose, onProceed, awaitingWalletResponse, -}) => { - const withdrawTitle = "Withdraw"; - const withdrawContent = ( +}: WithdrawModalProps) => { + const title = "Withdraw"; + const content = ( <> - You are about to withdraw your stake.
A transaction fee will be + You are about to withdraw your stake.
A transaction fee will be deduced from your stake by the {networkName} network ); - const title = withdrawTitle; - const content = withdrawContent; + const isMobileView = useMediaQuery(`(max-width: ${screenBreakPoints.md})`); + + const DialogComponent = isMobileView ? MobileDialog : Dialog; return ( - -
-

{title}

- {!awaitingWalletResponse && ( - - )} -
-
-

{content}

- {awaitingWalletResponse ? ( - - ) : ( -
- - -
- )} -
- + + + + {content} + + + + + + ); }; diff --git a/src/app/components/Modals/WithdrawV2Modal.tsx b/src/app/components/Modals/WithdrawV2Modal.tsx deleted file mode 100644 index ccd12725..00000000 --- a/src/app/components/Modals/WithdrawV2Modal.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { - Button, - Dialog, - DialogBody, - DialogFooter, - DialogHeader, - Text, -} from "@babylonlabs-io/bbn-core-ui"; - -import { getNetworkConfig } from "@/config/network.config"; -interface WithdrawV2ModalProps { - isOpen: boolean; - onClose: () => void; - onProceed: () => void; - awaitingWalletResponse: boolean; -} - -const { networkName } = getNetworkConfig(); - -export const WithdrawV2Modal = ({ - isOpen, - onClose, - onProceed, - awaitingWalletResponse, -}: WithdrawV2ModalProps) => { - const title = "Withdraw"; - const content = ( - <> - You are about to withdraw your stake.
A transaction fee will be - deduced from your stake by the {networkName} network - - ); - - return ( - - - {title} - - - {content} - - - - - - - ); -};