auto settle positive pnl on withdrawal

Author: Tarnadas

app/components/Assets.tsx

@@ -6,8 +6,7 @@ import {
   useWithdraw
 } from '@orderly.network/hooks';
 import { AccountStatusEnum } from '@orderly.network/types';
-import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
-import { Table, Tooltip } from '@radix-ui/themes';
+import { Table } from '@radix-ui/themes';
 import { useNotifications } from '@web3-onboard/react';
 import { FixedNumber } from 'ethers';
 import { FC, useMemo } from 'react';
@@ -40,7 +39,7 @@ export const Assets: FC = () => {
     () => (status >= AccountStatusEnum.Connected ? deposit.balance : undefined),
     [status, deposit]
   );
-  const { withdraw, unsettledPnL, availableWithdraw } = useWithdraw();
+  const { withdraw, availableWithdraw } = useWithdraw();
 
   return (
     <div className="flex flex-col gap-8">
@@ -58,26 +57,14 @@ export const Assets: FC = () => {
               {usdFormatter.format(collateral.availableBalance)} $
             </Table.Cell>
           </Table.Row>
-          <Table.Row>
-            <Table.RowHeaderCell>Unsettled PnL:</Table.RowHeaderCell>
-            <Table.Cell className="text-right">{usdFormatter.format(unsettledPnL)} $</Table.Cell>
-          </Table.Row>
         </Table.Body>
-        <Table.Row>
-          <Table.RowHeaderCell className="flex">
-            <Tooltip content="The maximum withdrawable amount. 'freeCollateral - unsettledPnL'">
-              <div className="content">
-                Withdrawable Balance <QuestionMarkCircledIcon />
-              </div>
-            </Tooltip>
-            :
-          </Table.RowHeaderCell>
-          <Table.Cell className="text-right">{usdFormatter.format(availableWithdraw)} $</Table.Cell>
-        </Table.Row>
       </Table.Root>
       <OrderlyDeposit
         walletBalance={FixedNumber.fromString(balance ?? '0', { decimals: 6 })}
-        orderlyBalance={FixedNumber.fromString(availableWithdraw.toPrecision(6), {
+        orderlyBalance={FixedNumber.fromString(collateral.availableBalance.toPrecision(6), {
+          decimals: 6
+        })}
+        availableWithdraw={FixedNumber.fromString(availableWithdraw.toPrecision(6), {
           decimals: 6
         })}
         withdraw={withdraw}

app/components/OrderlyDeposit.tsx

@@ -13,8 +13,9 @@ import { useIsTestnet } from '~/hooks';
 export const OrderlyDeposit: FC<{
   walletBalance: FixedNumber;
   orderlyBalance: FixedNumber;
+  availableWithdraw: FixedNumber;
   withdraw: ReturnType<typeof useWithdraw>['withdraw'];
-}> = ({ walletBalance, orderlyBalance, withdraw }) => {
+}> = ({ walletBalance, orderlyBalance, availableWithdraw, withdraw }) => {
   const [amount, setAmount] = useState<FixedNumber>();
   const [open, setOpen] = useState(false);
   const [disabled, setDisabled] = useState(true);
@@ -174,6 +175,32 @@ export const OrderlyDeposit: FC<{
                 }
               }
             } else {
+              if (availableWithdraw.lt(orderlyBalance)) {
+                const { update } = customNotification({
+                  eventCode: 'settle',
+                  type: 'pending',
+                  message: 'Settling PnL...'
+                });
+                try {
+                  await account.settle();
+                  update({
+                    eventCode: 'settleSuccess',
+                    type: 'success',
+                    message: 'Successfully settled PnL!',
+                    autoDismiss: 5_000
+                  });
+                } catch (err) {
+                  console.error(err);
+                  update({
+                    eventCode: 'settleError',
+                    type: 'error',
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    message: (err as any).message ?? 'Something went wrong',
+                    autoDismiss: 15_000
+                  });
+                }
+              }
+
               const { update } = customNotification({
                 eventCode: 'withdraw',
                 type: 'pending',
@@ -223,7 +250,7 @@ export const OrderlyDeposit: FC<{
               const { update } = customNotification({
                 eventCode: 'mint',
                 type: 'pending',
-                message: 'Minting 1k USDC on testnet...'
+                message: 'Minting USDC on testnet...'
               });
               try {
                 const chainNamespace = state.chainNamespace;