From 2ef61f7f4d1efc37ae1ca7d7b26be0c52601438e Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 3 Jun 2024 16:01:40 +0200
Subject: [PATCH 1/2] fix nabla modals

---
 .../Pools/Backstop/AddLiquidity/index.tsx     | 15 +++++--
 .../Pools/Backstop/BackstopPoolModals.tsx     | 24 +++++------
 .../Backstop/WithdrawLiquidity/index.tsx      | 18 ++++++--
 .../nabla/Pools/Swap/AddLiquidity/index.tsx   | 14 +++++--
 .../nabla/Pools/Swap/Redeem/index.tsx         | 13 ++++--
 .../nabla/Pools/Swap/SwapPoolModals.tsx       | 42 ++++++++++---------
 .../Pools/Swap/WithdrawLiquidity/index.tsx    | 13 ++++--
 .../nabla/common/TransactionProgress.tsx      | 10 ++---
 8 files changed, 94 insertions(+), 55 deletions(-)

diff --git a/src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx b/src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx
index 6e8555fc..e63299ed 100644
--- a/src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx
+++ b/src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx
@@ -15,11 +15,12 @@ import { AmountSelector } from '../../../common/AmountSelector';
 import { calcSharePercentage } from '../../../../../helpers/calc';
 import { TokenBalance } from '../../../common/TokenBalance';
 
-interface AddLiquidityProps {
+export interface AddLiquidityProps {
   data: NablaInstanceBackstopPool;
+  onClose: () => void;
 }
 
-const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
+const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element | null => {
   const { toggle, onSubmit, mutation, depositQuery, balanceQuery, amountString, amountBigDecimal, form } =
     useAddLiquidity(data.id, data.token.id, data.token.decimals, data.lpTokenDecimals);
 
@@ -33,11 +34,17 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
   const hideCss = !mutation.isIdle ? 'hidden' : '';
   return (
     <div className="text-[initial] dark:text-neutral-200">
-      <TransactionProgress mutation={mutation} onClose={mutation.reset}>
+      <TransactionProgress
+        mutation={mutation}
+        onClose={() => {
+          mutation.reset();
+          onClose();
+        }}
+      >
         <PoolProgress symbol={data.token.symbol} amount={amountString} />
       </TransactionProgress>
       <div className={hideCss}>
-        <div className="flex items-center gap-2 mb-8 mt-2">
+        <div className="flex items-center gap-2 mb-8 mt-2  absolute top-0 translate-y-2/4">
           <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle(undefined)}>
             <ArrowLeftIcon className="w-4 h-4 dark:text-neutral-400" />
           </Button>
diff --git a/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx b/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx
index 8ce1f93a..d5a5c758 100644
--- a/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx
+++ b/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx
@@ -1,34 +1,32 @@
 import { FunctionalComponent } from 'preact';
-import { Modal } from 'react-daisyui';
-
 import { NablaInstanceBackstopPool } from '../../../../hooks/nabla/useNablaInstance';
 import { ModalTypes, useModal } from '../../../../services/modal';
-import ModalCloseButton from '../../../Button/ModalClose';
 import AddLiquidity from './AddLiquidity';
 import WithdrawLiquidity from './WithdrawLiquidity';
+import { Dialog } from '../../../../pages/collators/dialogs/Dialog';
 
 export type LiquidityModalProps = {
   data?: NablaInstanceBackstopPool;
+  onClose: () => void;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const modalsUi: Partial<Record<ModalTypes, FunctionalComponent<any>>> = {
-  AddLiquidity: AddLiquidity,
-  WithdrawLiquidity: WithdrawLiquidity,
+  AddLiquidity,
+  WithdrawLiquidity,
 };
 
 export function BackstopPoolModals() {
   const [{ type, props }, setModal] = useModal<LiquidityModalProps>();
 
   const Component = type ? modalsUi[type] : undefined;
+  const onClose = () => setModal();
   return (
-    <>
-      <Modal className="bg-[--bg-modal]" open={!!Component}>
-        <Modal.Header className="mb-0">
-          <ModalCloseButton onClick={() => setModal()} />
-        </Modal.Header>
-        <Modal.Body>{Component ? <Component {...props} /> : null}</Modal.Body>
-      </Modal>
-    </>
+    <Dialog
+      onClose={onClose}
+      visible={!!Component}
+      actions={<></>}
+      content={Component ? <Component {...props} onClose={onClose} /> : <></>}
+    />
   );
 }
diff --git a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx
index 7cc55b67..20deb9b5 100644
--- a/src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx
+++ b/src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx
@@ -17,7 +17,12 @@ import { PoolSelectorModal } from '../../../common/PoolSelectorModal';
 import { TokenBalance } from '../../../common/TokenBalance';
 import { AmountSelector } from '../../../common/AmountSelector';
 
-const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element | null => {
+interface WithdrawLiquidityBodyProps {
+  nabla: NablaInstance;
+  onClose: () => void;
+}
+
+const WithdrawLiquidityBody = ({ nabla, onClose }: WithdrawLiquidityBodyProps): JSX.Element | null => {
   const [showTokenModal, setShowTokenModal] = useState(false);
   const {
     form,
@@ -57,11 +62,12 @@ const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element
         onClose={() => {
           backstopWithdraw.mutation.reset();
           backstopDrain.mutation.reset();
+          onClose();
         }}
       >
         <PoolProgress symbol={backstopPool.symbol} amount={amountString} />
       </TransactionProgress>
-      <h3 className={`flex items-center gap-2 mb-8 mt-2 ${hideCss}`}>
+      <h3 className={`flex items-center gap-2 mb-8 mt-2 ${hideCss} absolute top-0 translate-y-2/4`}>
         <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle()}>
           <ArrowLeftIcon className="w-4 h-4 dark:text-neutral-400" />
         </Button>
@@ -170,7 +176,11 @@ function filter(swapPools: NablaInstanceSwapPool[]): NablaInstanceSwapPool[] {
   return swapPools?.filter((pool) => getPoolSurplusNativeAmount(pool) > 0n);
 }
 
-function WithdrawLiquidity() {
+export interface WithdrawLiquidityProps {
+  onClose: () => void;
+}
+
+function WithdrawLiquidity({ onClose }: WithdrawLiquidityProps) {
   const { nabla, isLoading } = useNablaInstance();
 
   const filteredNabla = useMemo(
@@ -188,7 +198,7 @@ function WithdrawLiquidity() {
 
   if (!filteredNabla) return <>Nothing found</>;
 
-  return <WithdrawLiquidityBody nabla={filteredNabla} />;
+  return <WithdrawLiquidityBody nabla={filteredNabla} onClose={onClose} />;
 }
 
 export default WithdrawLiquidity;
diff --git a/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx b/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx
index d2aaee5a..58d82913 100644
--- a/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx
+++ b/src/components/nabla/Pools/Swap/AddLiquidity/index.tsx
@@ -17,9 +17,10 @@ import { AmountSelector } from '../../../common/AmountSelector';
 
 export interface AddLiquidityProps {
   data: SwapPoolColumn;
+  onClose: () => void;
 }
 
-const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
+const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element | null => {
   const { toggle, onSubmit, mutation, depositQuery, balanceQuery, amountString, amountBigDecimal, form } =
     useAddLiquidity(data.id, data.token.id, data.token.decimals, data.lpTokenDecimals);
 
@@ -31,13 +32,20 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
   const submitEnabled = amountBigDecimal?.gt(new Big(0)) && Object.keys(errors).length === 0;
 
   const hideCss = !mutation.isIdle ? 'hidden' : '';
+
   return (
     <div className="text-[initial] dark:text-neutral-200">
-      <TransactionProgress mutation={mutation} onClose={mutation.reset}>
+      <TransactionProgress
+        mutation={mutation}
+        onClose={() => {
+          mutation.reset();
+          onClose();
+        }}
+      >
         <PoolProgress symbol={data.token.symbol} amount={amountString} />
       </TransactionProgress>
       <div className={hideCss}>
-        <div className="flex items-center gap-2 mb-8 mt-2">
+        <div className="flex items-center gap-2 mb-8 mt-2 absolute top-0 translate-y-2/4">
           <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle()}>
             <ArrowLeftIcon className="w-4 h-4 dark:text-neutral-400" />
           </Button>
diff --git a/src/components/nabla/Pools/Swap/Redeem/index.tsx b/src/components/nabla/Pools/Swap/Redeem/index.tsx
index d1728756..8c033e70 100644
--- a/src/components/nabla/Pools/Swap/Redeem/index.tsx
+++ b/src/components/nabla/Pools/Swap/Redeem/index.tsx
@@ -21,9 +21,10 @@ export type RedeemLiquidityValues = {
 
 export interface RedeemProps {
   data: SwapPoolColumn;
+  onClose: () => void;
 }
 
-const Redeem = ({ data }: RedeemProps): JSX.Element | null => {
+const Redeem = ({ data, onClose }: RedeemProps): JSX.Element | null => {
   const { toggle, mutation, onSubmit, updateStorage, balanceQuery, depositQuery, amountString, form, withdrawalQuote } =
     useRedeem(data);
 
@@ -39,11 +40,17 @@ const Redeem = ({ data }: RedeemProps): JSX.Element | null => {
   const hideCss = !mutation.isIdle ? 'hidden' : '';
   return (
     <div className="text-[initial] dark:text-neutral-200">
-      <TransactionProgress mutation={mutation} onClose={mutation.reset}>
+      <TransactionProgress
+        mutation={mutation}
+        onClose={() => {
+          mutation.reset();
+          onClose();
+        }}
+      >
         <PoolProgress symbol={data.symbol} amount={amountString} />
       </TransactionProgress>
       <div className={hideCss}>
-        <div className="flex items-center gap-2 mt-2 mb-8">
+        <div className="flex items-center gap-2 mt-2 mb-8 absolute top-0 translate-y-2/4">
           <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle()}>
             <ArrowLeftIcon className="w-4 h-4" />
           </Button>
diff --git a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx b/src/components/nabla/Pools/Swap/SwapPoolModals.tsx
index c0dccd6f..c65419b8 100644
--- a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx
+++ b/src/components/nabla/Pools/Swap/SwapPoolModals.tsx
@@ -1,36 +1,38 @@
 import { FunctionalComponent } from 'preact';
-import { Modal } from 'react-daisyui';
 import { ModalTypes, useModal } from '../../../../services/modal';
-import ModalCloseButton from '../../../Button/ModalClose';
+import { Dialog } from '../../../../pages/collators/dialogs/Dialog';
+import { SwapPoolColumn } from './columns';
 import AddLiquidity from './AddLiquidity';
 import Redeem from './Redeem';
 import WithdrawLiquidity from './WithdrawLiquidity';
 
-import { SwapPoolColumn } from './columns';
-
 export type LiquidityModalProps = {
-  data?: SwapPoolColumn;
+  data: SwapPoolColumn;
+  onClose: () => void;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const modalsUi: Partial<Record<ModalTypes, FunctionalComponent<any>>> = {
-  AddLiquidity: AddLiquidity,
-  WithdrawLiquidity: WithdrawLiquidity,
-  Redeem: Redeem,
+const modalsUi: Partial<Record<ModalTypes, FunctionalComponent<LiquidityModalProps>>> = {
+  AddLiquidity,
+  WithdrawLiquidity,
+  Redeem,
 };
 
 export function SwapPoolModals() {
   const [{ type, props }, setModal] = useModal<LiquidityModalProps>();
 
   const Component = type ? modalsUi[type] : undefined;
-  return (
-    <>
-      <Modal className="bg-[--bg-modal]" open={!!Component}>
-        <Modal.Header className="mb-0">
-          <ModalCloseButton onClick={() => setModal()} />
-        </Modal.Header>
-        <Modal.Body>{Component ? <Component {...props} /> : null}</Modal.Body>
-      </Modal>
-    </>
-  );
+  const onClose = () => setModal();
+
+  if (props && props.data) {
+    return (
+      <Dialog
+        onClose={onClose}
+        visible={!!Component}
+        actions={<></>}
+        content={Component ? <Component {...props} onClose={onClose} /> : <></>}
+      />
+    );
+  }
+
+  return null;
 }
diff --git a/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx b/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx
index e7c4fb70..7dce270a 100644
--- a/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx
+++ b/src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx
@@ -15,9 +15,10 @@ import { TokenBalance } from '../../../common/TokenBalance';
 
 export interface WithdrawLiquidityProps {
   data: SwapPoolColumn;
+  onClose: () => void;
 }
 
-const WithdrawLiquidity = ({ data }: WithdrawLiquidityProps): JSX.Element | null => {
+const WithdrawLiquidity = ({ data, onClose }: WithdrawLiquidityProps): JSX.Element | null => {
   const { toggle, mutation, onSubmit, balanceQuery, depositQuery, amountString, form, withdrawalQuote } =
     useSwapPoolWithdrawLiquidity(data.id, data.token.id, data.token.decimals, data.lpTokenDecimals);
 
@@ -33,11 +34,17 @@ const WithdrawLiquidity = ({ data }: WithdrawLiquidityProps): JSX.Element | null
   const hideCss = !mutation.isIdle ? 'hidden' : '';
   return (
     <div className="text-[initial] dark:text-neutral-200">
-      <TransactionProgress mutation={mutation} onClose={mutation.reset}>
+      <TransactionProgress
+        mutation={mutation}
+        onClose={() => {
+          mutation.reset();
+          onClose();
+        }}
+      >
         <PoolProgress symbol={data.symbol} amount={amountString} />
       </TransactionProgress>
       <div className={hideCss}>
-        <div className="flex items-center gap-2 mt-2 mb-8">
+        <div className="flex items-center gap-2 mt-2 mb-8 absolute top-0 translate-y-2/4">
           <Button size="sm" color="ghost" className="px-2" type="button" onClick={() => toggle()}>
             <ArrowLeftIcon className="w-4 h-4" />
           </Button>
diff --git a/src/components/nabla/common/TransactionProgress.tsx b/src/components/nabla/common/TransactionProgress.tsx
index 5d612be8..6b3cacdf 100644
--- a/src/components/nabla/common/TransactionProgress.tsx
+++ b/src/components/nabla/common/TransactionProgress.tsx
@@ -28,8 +28,6 @@ const getErrorMessage = (data?: ExecuteMessageResult['result']) => {
 
 export function TransactionProgress({ mutation, children, onClose }: TransactionProgressProps): JSX.Element | null {
   if (mutation.isIdle) return null;
-  const status = mutation.data?.result?.type;
-  const isSuccess = status === 'success';
   const errorMsg = getErrorMessage(mutation.data?.result);
   if (mutation.isLoading) {
     const isPending = false; // TODO: currently there is not status for this (waiting confirmation in wallet)
@@ -51,16 +49,18 @@ export function TransactionProgress({ mutation, children, onClose }: Transaction
   return (
     <>
       <div className="center mt-6">
-        {isSuccess ? (
+        {mutation.isSuccess ? (
           <CheckCircleIcon className="w-36 h-36 text-green-400" stroke-width={1} />
         ) : (
           <ExclamationCircleIcon className="w-36 h-36 text-red-400" stroke-width={1} />
         )}
       </div>
       <div className="text-center mt-4">
-        <h4 className="text-2xl text-[--text]">{isSuccess ? 'Transaction successful' : 'Transaction failed'}</h4>
+        <h4 className="text-2xl text-[--text]">
+          {mutation.isSuccess ? 'Transaction successful' : 'Transaction failed'}
+        </h4>
       </div>
-      {!isSuccess && !!errorMsg && <p className="text-center mt-1">{errorMsg}</p>}
+      {!mutation.isSuccess && !!errorMsg && <p className="text-center mt-1">{errorMsg}</p>}
       {!!onClose && (
         <Button color="primary" className="w-full mt-6" onClick={onClose}>
           Close

From dd37cda57ea59d90fd94101a4315b062a370db62 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 3 Jun 2024 22:04:06 +0200
Subject: [PATCH 2/2] fix component types

---
 src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx | 1 -
 src/components/nabla/Pools/Swap/SwapPoolModals.tsx         | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx b/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx
index d5a5c758..f0f456de 100644
--- a/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx
+++ b/src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx
@@ -7,7 +7,6 @@ import { Dialog } from '../../../../pages/collators/dialogs/Dialog';
 
 export type LiquidityModalProps = {
   data?: NablaInstanceBackstopPool;
-  onClose: () => void;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx b/src/components/nabla/Pools/Swap/SwapPoolModals.tsx
index c65419b8..1bec25b7 100644
--- a/src/components/nabla/Pools/Swap/SwapPoolModals.tsx
+++ b/src/components/nabla/Pools/Swap/SwapPoolModals.tsx
@@ -8,10 +8,10 @@ import WithdrawLiquidity from './WithdrawLiquidity';
 
 export type LiquidityModalProps = {
   data: SwapPoolColumn;
-  onClose: () => void;
 };
 
-const modalsUi: Partial<Record<ModalTypes, FunctionalComponent<LiquidityModalProps>>> = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const modalsUi: Partial<Record<ModalTypes, FunctionalComponent<any>>> = {
   AddLiquidity,
   WithdrawLiquidity,
   Redeem,