fix nabla modals

src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx

@@ -17,11 +17,12 @@ import { TokenBalance } from '../../../common/TokenBalance';
 import { useGlobalState } from '../../../../../GlobalStateProvider';
 import OpenWallet from '../../../../Wallet';
 
-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);
 
@@ -37,11 +38,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>

src/components/nabla/Pools/Backstop/BackstopPoolModals.tsx

@@ -1,34 +1,31 @@
 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;
 };
 
 // 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} /> : <></>}
+    />
   );
 }

src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx

@@ -19,7 +19,12 @@ import { AmountSelector } from '../../../common/AmountSelector';
 import { useGlobalState } from '../../../../../GlobalStateProvider';
 import OpenWallet from '../../../../Wallet';
 
-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,
@@ -61,11 +66,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>
@@ -184,7 +190,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(
@@ -202,7 +212,7 @@ function WithdrawLiquidity() {
 
   if (!filteredNabla) return <>Nothing found</>;
 
-  return <WithdrawLiquidityBody nabla={filteredNabla} />;
+  return <WithdrawLiquidityBody nabla={filteredNabla} onClose={onClose} />;
 }
 
 export default WithdrawLiquidity;

src/components/nabla/Pools/Swap/AddLiquidity/index.tsx

@@ -19,9 +19,10 @@ import OpenWallet from '../../../../Wallet';
 
 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);
 
@@ -35,13 +36,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>

src/components/nabla/Pools/Swap/Redeem/index.tsx

@@ -23,9 +23,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);
 
@@ -43,11 +44,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>

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;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const modalsUi: Partial<Record<ModalTypes, FunctionalComponent<any>>> = {
-  AddLiquidity: AddLiquidity,
-  WithdrawLiquidity: WithdrawLiquidity,
-  Redeem: Redeem,
+  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;
 }

src/components/nabla/Pools/Swap/WithdrawLiquidity/index.tsx

@@ -17,9 +17,10 @@ import OpenWallet from '../../../../Wallet';
 
 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);
 
@@ -37,11 +38,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>

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