fix(bond): Solana deposit display (#132)

* feat: add quote liquidity state and update deposit logic in WsolDeposit component * feat: enhance WsolDeposit component with bridged token amount display and improved deposit logic * feat: update WsolDeposit component to display bridged token amount with unit and refactor token amount fetching logic * feat: update WsolDeposit component to rename columns and improve LP amount display * feat: update WsolDeposit component to conditionally render alert and add delay for transaction processing * refactor: rename getLatestBridgeTokenAmount to updateLatestBridgeTokenAmount for clarity
valory-xyz · Nov 6, 2024 · 8f6d182 · 8f6d182
1 parent 8a84cb3
commit 8f6d182
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 18 deletions.
diff --git a/apps/bond/components/BondingProducts/Bonding/TokenManagement/WsolDeposit.jsx b/apps/bond/components/BondingProducts/Bonding/TokenManagement/WsolDeposit.jsx
@@ -1,10 +1,11 @@
-import { Alert, Button, Flex, Form, InputNumber, Spin, Typography } from 'antd';
+import { Alert, Button, Form, InputNumber, Table, Typography } from 'antd';
 import { isNumber } from 'lodash';
 import pDebounce from 'p-debounce';
 import { useState } from 'react';
 
 import { getCommaSeparatedNumber, notifyError } from '@autonolas/frontend-library';
 
+import { NA } from 'libs/util-constants/src';
 import { useSvmConnectivity } from 'common-util/hooks/useSvmConnectivity';
 
 import { SVM_AMOUNT_DIVISOR } from './constants';
@@ -19,12 +20,13 @@ export const WsolDeposit = () => {
   const [estimatedQuote, setEstimatedQuote] = useState(null);
   const [isEstimating, setIsEstimating] = useState(false);
   const [isDepositing, setIsDepositing] = useState(false);
-  const [bridgedTokenAmount, setBridgedTokenAmount] = useState(null);
+  const [quoteLiquidity, setQuoteLiquidity] = useState(null);
 
   const {
     getDepositIncreaseLiquidityQuote: fn,
     getDepositTransformedQuote,
     deposit,
+    bridgedTokenAmount,
   } = useWsolDeposit();
   const getDepositQuote = pDebounce(fn, 500);
 
@@ -59,10 +61,8 @@ export const WsolDeposit = () => {
       const sol = form.getFieldValue('sol');
       const slippage = form.getFieldValue('slippage');
 
-      const bridgedToken = await deposit({ slippage, sol });
-      if (Number(bridgedToken) > 0) {
-        setBridgedTokenAmount(bridgedToken / SVM_AMOUNT_DIVISOR);
-      }
+      const quoteLiquidityAmount = await deposit({ slippage, sol });
+      setQuoteLiquidity(quoteLiquidityAmount / SVM_AMOUNT_DIVISOR);
     } catch (error) {
       console.error(error);
     } finally {
@@ -72,7 +72,10 @@ export const WsolDeposit = () => {
 
   const isDepositButtonDisabled = isEstimating || isDepositing || !isSvmWalletConnected;
   const estimatedOutput =
-    getCommaSeparatedNumber((estimatedQuote?.liquidity || 0) / SVM_AMOUNT_DIVISOR) || '--';
+    getCommaSeparatedNumber((estimatedQuote?.liquidity || 0) / SVM_AMOUNT_DIVISOR) || NA;
+  const bridgedTokenAmountValue = bridgedTokenAmount
+    ? getCommaSeparatedNumber(bridgedTokenAmount)
+    : NA;
 
   return (
     <>
@@ -118,12 +121,33 @@ export const WsolDeposit = () => {
         </Form.Item>
 
         <Form.Item>
-          <Spin spinning={isEstimating} size="small">
-            <Flex vertical gap="small" className="mb-16">
-              <Text strong>ESTIMATED OUTPUT</Text>
-              <Text>{`${estimatedOutput} WSOL-OLAS LP`}</Text>
-            </Flex>
-          </Spin>
+          <Table
+            columns={[
+              {
+                title: 'Estimated LP amount',
+                dataIndex: 'estimatedLpAmount',
+                width: '50%',
+              },
+              {
+                title: 'Current LP balance',
+                dataIndex: 'currentLpBalance',
+                width: '50%',
+              },
+            ]}
+            dataSource={[
+              {
+                key: '1',
+                estimatedLpAmount: `${estimatedOutput} WSOL-OLAS`,
+                currentLpBalance: `${bridgedTokenAmountValue} WSOL-OLAS`,
+              },
+            ]}
+            bordered
+            loading={isEstimating}
+            rowHoverable={false}
+            pagination={false}
+            style={{ width: '100%' }}
+            className="mb-16"
+          />
 
           <Button
             size="large"
@@ -137,18 +161,18 @@ export const WsolDeposit = () => {
         </Form.Item>
       </Form>
 
-      {bridgedTokenAmount && (
+      {quoteLiquidity ? (
         <Alert
           message={
             <>
               You received
-              <Text strong>{` ${getCommaSeparatedNumber(bridgedTokenAmount)} WSOL-OLAS LP`}</Text>
+              <Text strong>{` ${getCommaSeparatedNumber(quoteLiquidity)} WSOL-OLAS`}</Text>
             </>
           }
           type="success"
           showIcon
         />
-      )}
+      ) : null}
     </>
   );
 };
diff --git a/apps/bond/components/BondingProducts/Bonding/TokenManagement/constants.jsx b/apps/bond/components/BondingProducts/Bonding/TokenManagement/constants.jsx
@@ -34,4 +34,5 @@ export const WHIRLPOOL_CONFIG_ID = new web3.PublicKey(
 export const [tickLowerIndex, tickUpperIndex] = TickUtil.getFullRangeTickIndex(TICK_SPACING);
 export const CONNECT_SVM_WALLET = 'Please connect your phantom wallet';
 
+// 10^8
 export const SVM_AMOUNT_DIVISOR = 100000000;
diff --git a/apps/bond/components/BondingProducts/Bonding/TokenManagement/hooks/useWsolDeposit.jsx b/apps/bond/components/BondingProducts/Bonding/TokenManagement/hooks/useWsolDeposit.jsx
@@ -12,6 +12,7 @@ import { useWallet } from '@solana/wallet-adapter-react';
 import { SystemProgram, Transaction } from '@solana/web3.js';
 import Decimal from 'decimal.js';
 import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
 
 import { notifyError, notifySuccess } from '@autonolas/frontend-library';
 
@@ -30,6 +31,7 @@ import {
   POSITION_MINT,
   PROGRAM_ID,
   SOL,
+  SVM_AMOUNT_DIVISOR,
   TICK_ARRAY_LOWER,
   TICK_ARRAY_UPPER,
   TOKEN_VAULT_A,
@@ -118,10 +120,27 @@ export const useWsolDeposit = () => {
   const { svmWalletPublicKey, connection, anchorProvider } = useSvmConnectivity();
   const { getWhirlpoolData } = useWhirlpool();
   const { signTransaction } = useWallet();
+  const [bridgedTokenAmount, setBridgedTokenAmount] = useState(null);
 
   const customGetOrCreateAssociatedTokenAccount = useGetOrCreateAssociatedTokenAccount();
   const program = new Program(idl, PROGRAM_ID, anchorProvider);
 
+  const updateLatestBridgeTokenAmount = useCallback(async () => {
+    if (!svmWalletPublicKey) return;
+    if (!connection) return;
+
+    getBridgeTokenAmount(connection, svmWalletPublicKey).then((bridgedToken) => {
+      const token = bridgedToken.toString();
+      if (Number(token) > 0) {
+        setBridgedTokenAmount(token / SVM_AMOUNT_DIVISOR);
+      }
+    });
+  }, [connection, svmWalletPublicKey]);
+
+  useEffect(() => {
+    updateLatestBridgeTokenAmount();
+  }, [updateLatestBridgeTokenAmount]);
+
   const getDepositIncreaseLiquidityQuote = async ({ sol, slippage }) => {
     const { whirlpoolData, whirlpoolTokenA, whirlpoolTokenB } = await getWhirlpoolData();
     const slippageTolerance = Percentage.fromDecimal(new Decimal(slippage));
@@ -315,13 +334,17 @@ export const useWsolDeposit = () => {
       return null;
     }
 
-    const bridgedToken = await getBridgeTokenAmount(connection, svmWalletPublicKey);
-    return bridgedToken.toString();
+    // wait for 2 seconds to allow the transaction to be processed
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    await updateLatestBridgeTokenAmount(); // refetch bridged token amount
+
+    return quote.liquidityAmount.toString();
   };
 
   return {
     getDepositIncreaseLiquidityQuote,
     getDepositTransformedQuote,
     deposit,
+    bridgedTokenAmount,
   };
 };