settle pnl

Author: Tarnadas

app/components/Assets.tsx

@@ -1,11 +1,18 @@
-import { useChains, useCollateral, useDeposit, useWithdraw } from '@orderly.network/hooks';
+import {
+  useAccountInstance,
+  useChains,
+  useCollateral,
+  useDeposit,
+  useWithdraw
+} from '@orderly.network/hooks';
 import { API } from '@orderly.network/types';
-import { Table } from '@radix-ui/themes';
-import { useSetChain } from '@web3-onboard/react';
+import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
+import { Table, Tooltip } from '@radix-ui/themes';
+import { useNotifications, useSetChain } from '@web3-onboard/react';
 import { FixedNumber } from 'ethers';
 import { FC, useMemo } from 'react';
 
-import { OrderlyDeposit } from '~/components';
+import { OrderlyDeposit, PendingButton } from '~/components';
 import { useIsTestnet } from '~/hooks';
 import { supportedChains, usdFormatter } from '~/utils';
 
@@ -15,6 +22,8 @@ export const Assets: FC = () => {
   const [chains] = useChains(isTestnet ? 'testnet' : 'mainnet', {
     filter: (item: API.Chain) => supportedChains.includes(item.network_infos?.chain_id)
   });
+  const account = useAccountInstance();
+  const [_, customNotification] = useNotifications();
 
   const token = useMemo(() => {
     return Array.isArray(chains) ? chains[0].token_infos[0] : undefined;
@@ -45,6 +54,17 @@ export const Assets: FC = () => {
             <Table.Cell>{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>{usdFormatter.format(availableWithdraw)}</Table.Cell>
+        </Table.Row>
       </Table.Root>
       <OrderlyDeposit
         walletBalance={FixedNumber.fromString(deposit.balance, { decimals: 6 })}
@@ -53,6 +73,35 @@ export const Assets: FC = () => {
         })}
         withdraw={withdraw}
       />
+      <PendingButton
+        onClick={async () => {
+          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
+            });
+          }
+        }}
+      >
+        Settle PnL
+      </PendingButton>
     </div>
   );
 };

app/components/Positions.tsx

@@ -22,7 +22,7 @@ export const Positions: FC<{ symbol: API.Symbol }> = ({ symbol }) => {
   return (
     <Table.Root>
       <Table.Header>
-        <Table.Row>
+        <Table.Row className="[&>*]:align-mid">
           <Table.ColumnHeaderCell>Symbol</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell>Quantity</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell>Avg. Open</Table.ColumnHeaderCell>
@@ -34,7 +34,7 @@ export const Positions: FC<{ symbol: API.Symbol }> = ({ symbol }) => {
       </Table.Header>
       <Table.Body>
         {positions.rows.map((position) => (
-          <Table.Row key={position.symbol}>
+          <Table.Row key={position.symbol} className="[&>*]:align-mid">
             <Table.Cell>{position.symbol}</Table.Cell>
             <Table.Cell>{baseFormatter.format(position.position_qty)}</Table.Cell>
             <Table.Cell>{usdFormatter.format(position.average_open_price)}</Table.Cell>