Remove 50% and Max from the Backstop pool withdraw UI (#496)

* change color of nabla dialog inputs

* fix nabla loading buttons styles

* remove 50percent, max options from Amount Nabla input

* refactor nabla modals to use reusable dialog component

* add a space between nabla pool dialog asset and name

* use AvailableActions component in Nabla Amount input

* fix paths

* use AvailableActions for Backstop Pool Deposit

src/components/Form/From/AvailableActions/index.tsx

@@ -1,13 +1,14 @@
 interface AvailableActionsProps {
   max?: number;
   setValue?: (n: number) => void;
+  hideAvailableBalance?: boolean;
 }
 
-export const AvailableActions = ({ max, setValue }: AvailableActionsProps) => (
+export const AvailableActions = ({ max, setValue, hideAvailableBalance = false }: AvailableActionsProps) => (
   <div className="flex gap-1 text-sm">
     {max !== undefined && setValue !== undefined && (
       <>
-        <span className="mr-1">Available: {max.toFixed(2)}</span>
+        {hideAvailableBalance ? <></> : <span className="mr-1">Available: {max.toFixed(2)}</span>}
         <button className="text-primary hover:underline" onClick={() => setValue(Number(max) * 0.5)} type="button">
           50%
         </button>

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

@@ -66,9 +66,14 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element | null
                 </p>
               </div>
             )}
-            <AmountSelector maxBalance={balanceQuery.data} formFieldName="amount" form={form} />
+            <AmountSelector
+              maxBalance={balanceQuery.data}
+              formFieldName="amount"
+              form={form}
+              showAvailableActions={true}
+            />
             <Validation className="text-center mt-2" errors={errors} />
-            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
+            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-base-300 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
               <div className="flex items-center justify-between">
                 <div>Total LP tokens</div>
                 <div>

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

@@ -67,9 +67,14 @@ const AddLiquidity = ({ data, onClose }: AddLiquidityProps): JSX.Element | null
                 </p>
               </div>
             )}
-            <AmountSelector maxBalance={balanceQuery.data} formFieldName="amount" form={form} />
+            <AmountSelector
+              maxBalance={balanceQuery.data}
+              formFieldName="amount"
+              form={form}
+              showAvailableActions={true}
+            />
             <Validation className="text-center mt-2" errors={errors} />
-            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-300  p-4 mt-4">
+            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-base-300 text-neutral-500 dark:text-neutral-300  p-4 mt-4">
               <div className="flex items-center justify-between">
                 <div>Total LP Tokens</div>
                 <div>

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

@@ -98,7 +98,7 @@ const Redeem = ({ data, onClose }: RedeemProps): JSX.Element | null => {
               </div>
             </AmountSelector>
             <Validation className="text-center mt-2" errors={errors} />
-            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
+            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-base-300 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
               <div className="flex items-center justify-between">
                 <div>Security fee</div>
                 <div>{(data.insuranceFeeBps / 100).toFixed(2)}%</div>
@@ -151,7 +151,8 @@ const Redeem = ({ data, onClose }: RedeemProps): JSX.Element | null => {
               {walletAccount ? (
                 <Button
                   color="primary"
-                  className={`w-full ${withdrawalQuote.isLoading ? 'loading' : ''}`}
+                  className="w-full"
+                  loading={withdrawalQuote.isLoading}
                   type="submit"
                   disabled={!submitEnabled}
                 >

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

@@ -73,7 +73,7 @@ const WithdrawLiquidity = ({ data, onClose }: WithdrawLiquidityProps): JSX.Eleme
               </div>
             </AmountSelector>
             <Validation className="text-center mt-2" errors={errors} />
-            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
+            <div className="relative flex w-full flex-col gap-4 rounded-lg bg-base-300 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
               <div className="flex items-center justify-between">
                 <div>Total LP tokens</div>
                 <div>
@@ -114,7 +114,8 @@ const WithdrawLiquidity = ({ data, onClose }: WithdrawLiquidityProps): JSX.Eleme
               {walletAccount ? (
                 <Button
                   color="primary"
-                  className={`w-full ${withdrawalQuote.isLoading ? 'loading' : ''}`}
+                  className="w-full"
+                  loading={withdrawalQuote.isLoading}
                   type="submit"
                   disabled={!submitEnabled}
                 >

src/components/nabla/Swap/From.tsx

@@ -45,7 +45,7 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
             maxBalance={fromTokenBalance.data}
             formFieldName={fromFormFieldName}
             form={form}
-            onlyShowNumberInput={true}
+            onlyShowNumericInput={true}
           />
         </div>
         <Button

src/components/nabla/common/AmountSelector.tsx

@@ -1,4 +1,4 @@
-import { Button, Range } from 'react-daisyui';
+import { Range } from 'react-daisyui';
 import { FieldPath, FieldValues, PathValue, UseFormReturn, useWatch } from 'react-hook-form';
 import { useEffect, useMemo } from 'preact/hooks';
 import Big from 'big.js';
@@ -9,21 +9,24 @@ import { ContractBalance } from '../../../helpers/contracts';
 import { calcSharePercentageNumber } from '../../../helpers/calc';
 import { NumericInput } from '../../Form/From/NumericInput';
 import { USER_INPUT_MAX_DECIMALS } from '../../../shared/parseNumbers/decimal';
+import { AvailableActions } from '../../Form/From/AvailableActions';
 
 interface AmountSelectorProps<FormFieldValues extends FieldValues, TFieldName extends FieldPath<FormFieldValues>> {
   maxBalance: ContractBalance | undefined;
   formFieldName: TFieldName;
   form: UseFormReturn<FormFieldValues>;
   children?: ReactNode;
-  onlyShowNumberInput?: boolean;
+  onlyShowNumericInput?: boolean;
+  showAvailableActions?: boolean;
 }
 
 export function AmountSelector<FormFieldValues extends FieldValues, TFieldName extends FieldPath<FormFieldValues>>({
   formFieldName,
   maxBalance,
   form,
   children,
-  onlyShowNumberInput,
+  onlyShowNumericInput,
+  showAvailableActions = false,
 }: AmountSelectorProps<FormFieldValues, TFieldName>) {
   type K = PathValue<FormFieldValues, TFieldName>;
 
@@ -64,7 +67,7 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
     }
   }, [amountString, amountBigDecimal, formFieldName, maxBalance, setError, clearErrors]);
 
-  if (onlyShowNumberInput === true) {
+  if (onlyShowNumericInput) {
     return (
       <NumericInput
         additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
@@ -76,47 +79,24 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
   }
 
   return (
-    <div className="relative rounded-lg bg-neutral-100 dark:bg-neutral-700 p-4">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-1">
-          <NumericInput
-            additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
-            register={form.register(formFieldName)}
-            autoFocus
-            maxDecimals={maxBalance?.decimals ?? USER_INPUT_MAX_DECIMALS.PENDULUM}
+    <div className="relative rounded-lg bg-base-300 p-4">
+      <NumericInput
+        additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
+        register={form.register(formFieldName)}
+        autoFocus
+        maxDecimals={maxBalance?.decimals ?? USER_INPUT_MAX_DECIMALS.PENDULUM}
+      />
+      {showAvailableActions ? (
+        <div className="justify-end flex w-full">
+          <AvailableActions
+            setValue={(n) => setValue(formFieldName, n as K)}
+            max={maxBalance?.approximateNumber}
+            hideAvailableBalance={true}
           />
-          <Button
-            className="bg-neutral-200 dark:bg-neutral-800 px-3 rounded-2xl"
-            size="sm"
-            type="button"
-            onClick={() => {
-              if (maxBalance !== undefined) {
-                setValue(formFieldName, fractionOfValue(maxBalance.preciseBigDecimal, 50) as K, {
-                  shouldDirty: true,
-                  shouldTouch: true,
-                });
-              }
-            }}
-          >
-            50%
-          </Button>
-          <Button
-            className="bg-neutral-200 dark:bg-neutral-800 px-3 rounded-2xl"
-            size="sm"
-            type="button"
-            onClick={() => {
-              if (maxBalance !== undefined) {
-                setValue(formFieldName, fractionOfValue(maxBalance.preciseBigDecimal, 100) as K, {
-                  shouldDirty: true,
-                  shouldTouch: true,
-                });
-              }
-            }}
-          >
-            MAX
-          </Button>
         </div>
-      </div>
+      ) : (
+        <></>
+      )}
       <Range
         color={maxBalance === undefined ? 'secondary' : 'primary'}
         min={0}

src/components/nabla/common/PoolSelectorModal.tsx

@@ -1,14 +1,14 @@
 import { CheckIcon } from '@heroicons/react/20/solid';
 import { matchSorter } from 'match-sorter';
 import { ChangeEvent, useMemo, useState } from 'preact/compat';
-import { Avatar, AvatarProps, Button, Input, Modal } from 'react-daisyui';
+import { Avatar, AvatarProps, Button, Input } from 'react-daisyui';
 
 import pendulumIcon from '../../../assets/pendulum-icon.svg';
 import { repeat } from '../../../helpers/general';
-import ModalCloseButton from '../../Button/ModalClose';
 import { Skeleton } from '../../Skeleton';
 import { NablaInstanceBackstopPool, NablaInstanceSwapPool } from '../../../hooks/nabla/useNablaInstance';
 import { getIcon } from '../../../shared/AssetIcons';
+import { Dialog } from '../../../pages/staking/dialogs/Dialog';
 
 export type PoolEntry =
   | { type: 'swapPool'; pool: NablaInstanceSwapPool }
@@ -91,7 +91,7 @@ function PoolList({ swapPools, backstopPool, onSelect, selected }: PoolListProps
                   <CheckIcon className="absolute -right-1 -top-1 w-5 h-5 p-[3px] text-white bg-green-600 rounded-full" />
                 )}
               </span>
-              <span className="flex flex-col">
+              <span className="flex flex-col ml-3">
                 <span className="text-lg dark:text-white leading-5">
                   <strong>
                     {showPoolType ? (type === 'backstopPool' ? 'Backstop Pool ' : 'Swap Pool ') : ''}
@@ -114,30 +114,22 @@ interface PoolSelectorModalProps extends PoolListProps {
   open: boolean;
 }
 
-export function PoolSelectorModal({
+export const PoolSelectorModal = ({
   swapPools,
   backstopPool,
   selected,
   isLoading,
   onSelect,
   onClose,
   open,
-}: PoolSelectorModalProps) {
-  return (
-    <Modal className="bg-[--bg-modal]" open={open}>
-      <Modal.Header className="mb-0">
-        <ModalCloseButton onClick={onClose} />
-        <h3 className="text-2xl font-normal">{backstopPool !== undefined ? 'Select a pool' : 'Select a token'}</h3>
-      </Modal.Header>
-      <Modal.Body>
-        <div className="py-4">
-          {isLoading ? (
-            repeat(<Skeleton className="w-full h-10 mb-2" />)
-          ) : (
-            <PoolList swapPools={swapPools} backstopPool={backstopPool} onSelect={onSelect} selected={selected} />
-          )}
-        </div>
-      </Modal.Body>
-    </Modal>
+}: PoolSelectorModalProps) => {
+  const content = isLoading ? (
+    <>{repeat(<Skeleton className="w-full h-10 mb-2" />)}</>
+  ) : (
+    <PoolList swapPools={swapPools} backstopPool={backstopPool} onSelect={onSelect} selected={selected} />
   );
-}
+
+  const title = backstopPool !== undefined ? 'Select a pool' : 'Select a token';
+
+  return <Dialog visible={open} onClose={onClose} actions={<></>} content={content} headerText={title} />;
+};

src/components/nabla/common/SwapProgress.tsx

@@ -1,7 +1,6 @@
 import { JSX } from 'preact';
-import { Modal } from 'react-daisyui';
-import ModalCloseButton from '../../Button/ModalClose';
 import { TransactionProgress, TransactionProgressProps } from '../common/TransactionProgress';
+import { Dialog } from '../../../pages/staking/dialogs/Dialog';
 
 export type SwapProgressProps = {
   open: boolean;
@@ -10,19 +9,14 @@ export type SwapProgressProps = {
   mutation?: TransactionProgressProps['mutation'];
 };
 
-export function SwapProgress({ mutation, children, ...rest }: SwapProgressProps) {
-  return (
-    <Modal className="modal-top bg-[--bg-modal]" {...rest}>
-      <Modal.Header className="mb-0">
-        <ModalCloseButton onClick={rest.onClose} />
-      </Modal.Header>
-      <Modal.Body>
-        {!!mutation && (
-          <TransactionProgress mutation={mutation} onClose={rest.onClose}>
-            {children}
-          </TransactionProgress>
-        )}
-      </Modal.Body>
-    </Modal>
+export function SwapProgress({ mutation, children, onClose, open }: SwapProgressProps) {
+  const content = mutation ? (
+    <TransactionProgress mutation={mutation} onClose={onClose}>
+      {children}
+    </TransactionProgress>
+  ) : (
+    <></>
   );
+
+  return <Dialog visible={open} onClose={onClose} content={content} actions={<></>} />;
 }