Update Liquidity page to display HDFC deposits (#212)

* Update local deployment addresses * Add intent cancellation to HDFC * Fix resetting write config for Cancel intent and Withdraw deposit * Update Liquidity page to show HDFC deposits
zkp2p · Dec 8, 2023 · 4ac2cec · 4ac2cec
1 parent 6e7dc31
commit 4ac2cec
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 60 deletions.
diff --git a/client/src/components/Deposit/PositionTable.tsx b/client/src/components/Deposit/PositionTable.tsx
@@ -210,7 +210,9 @@ export const PositionTable: React.FC<PositionTableProps> = ({
 
   useEffect(() => {
     const executeWithdrawDeposit = async () => {
-      if (shouldConfigureWithdrawWrite && writeSubmitWithdrawAsync && submitWithdrawStatus === 'idle') {
+      const requiredStatusForExecution = submitWithdrawStatus === 'idle' || submitWithdrawStatus === 'error';
+
+      if (shouldConfigureWithdrawWrite && writeSubmitWithdrawAsync && requiredStatusForExecution) {
         try {
           await writeSubmitWithdrawAsync();
         } catch (error) {

diff --git a/client/src/components/Liquidity/DepositsRow.tsx b/client/src/components/Liquidity/DepositsRow.tsx
@@ -11,20 +11,20 @@ import { alchemyMainnetEthersProvider } from "index";
 
 
 interface DepositsRowProps {
+  isVenmo: boolean;
   availableDepositAmount: string;
-  totalDepositAmount: string;
   conversionRate: string;
   rowIndex: number;
   depositorAddress: string;
   depositId: bigint;
   targeted: boolean;
   isSelectingDeposits: boolean;
-  handleTargetLiquidityCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>, depositId: bigint) => void;
+  handleTargetLiquidityCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>, depositId: bigint, isVenmo: boolean) => void;
 }
 
 export const DepositsRow: React.FC<DepositsRowProps> = ({
+  isVenmo,
   availableDepositAmount,
-  totalDepositAmount,
   conversionRate,
   rowIndex,
   depositorAddress,
@@ -46,15 +46,15 @@ export const DepositsRow: React.FC<DepositsRowProps> = ({
    */
 
   const depositRemainingLabel = `${availableDepositAmount}`;
-  const originalAmountLabel = `${totalDepositAmount}`
+  const platformLabel = isVenmo ? 'Venmo' : 'HDFC';
   const depositorEtherscanLink = `${blockscanUrl}/address/${depositorAddress}`;
 
   /*
    * Handlers
    */
 
   const onCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    handleTargetLiquidityCheckboxChange(event, depositId);
+    handleTargetLiquidityCheckboxChange(event, depositId, isVenmo);
   };
 
   /*
@@ -72,6 +72,10 @@ export const DepositsRow: React.FC<DepositsRowProps> = ({
         USD Coin
       </IconAndTokenNameContainer>
 
+      <TitleAndValueContainer>
+        <Value>{platformLabel}</Value>
+      </TitleAndValueContainer>
+
       <TitleAndValueContainer>
         <Value>
           <Link href={depositorEtherscanLink} target="_blank">
@@ -92,10 +96,6 @@ export const DepositsRow: React.FC<DepositsRowProps> = ({
         <Value>{conversionRate}</Value>
       </PercentageLabel>
 
-      <TitleAndValueContainer>
-        <Value>{originalAmountLabel}</Value>
-      </TitleAndValueContainer>
-
       {isSelectingDeposits ? (
         <CheckboxContainer>
           <CustomCheckbox
@@ -113,7 +113,7 @@ export const DepositsRow: React.FC<DepositsRowProps> = ({
 const Container = styled.div`
   height: 100%;
   display: grid;
-  grid-template-columns: .2fr repeat(5, minmax(0,1fr)) .4fr;
+  grid-template-columns: .2fr 1fr .7fr repeat(3, minmax(0,1fr)) .4fr;
   gap: 8px;
   flex-direction: row;
   align-items: center;

diff --git a/client/src/components/Liquidity/DepositsTable.tsx b/client/src/components/Liquidity/DepositsTable.tsx
@@ -6,14 +6,18 @@ import { RowBetween } from '../layouts/Row'
 import { ThemedText } from '../../theme/text'
 import { Button } from "../Button";
 import { DepositWithAvailableLiquidity } from "../../contexts/venmo/Deposits/types";
+import { PaymentPlatformType, PaymentPlatform } from '../../contexts/common/PlatformSettings/types';
 import { DepositsRow } from "./DepositsRow";
 import { toUsdcString, conversionRateToString } from '@helpers/units'
-import useLiquidity from '@hooks/useLiquidity';
+
+import useVenmoLiquidity from '@hooks/useLiquidity';
+import useHdfcLiquidity from '@hooks/hdfc/useHdfcLiquidity';
 
 
 const ROWS_PER_PAGE = 10;
 
 export interface DepositPrime {
+  platformType: PaymentPlatformType,
   depositor: string;
   depositId: bigint;
   availableDepositAmount: string;
@@ -27,13 +31,24 @@ export const DepositsTable: React.FC = () => {
    * Contexts
    */
 
-  const { depositStore, targetedDepositIds, setTargetedDepositIds } = useLiquidity();
+  const {
+    depositStore: venmoDepositStore,
+    targetedDepositIds: venmoTargetedDepositIds,
+    setTargetedDepositIds: setVenmoTargetedDepositIds
+  } = useVenmoLiquidity();
+
+  const {
+    depositStore: hdfcDepositStore,
+    targetedDepositIds: hdfcTargetedDepositIds,
+    setTargetedDepositIds: setHdfcTargetedDepositIds
+  } = useHdfcLiquidity();
 
   /*
    * State
    */
 
   const [positionsRowData, setPositionsRowData] = useState<DepositPrime[]>([]);
+  const [combinedDepositStore, setCombinedDepositStore] = useState<DepositWithAvailableLiquidity[]>([]);
 
   const [currentPage, setCurrentPage] = useState(0);
 
@@ -44,30 +59,49 @@ export const DepositsTable: React.FC = () => {
    */
 
   useEffect(() => {
-    if (!depositStore) {
+    if (venmoDepositStore && hdfcDepositStore) {
+      const combinedDepositStore = [...venmoDepositStore, ...hdfcDepositStore];
+
+      setCombinedDepositStore(combinedDepositStore);
+    } else if (venmoDepositStore) {
+      setCombinedDepositStore(venmoDepositStore);
+    } else if (hdfcDepositStore) {
+      setCombinedDepositStore(hdfcDepositStore);
+    }
+  }, [venmoDepositStore, hdfcDepositStore]);
+
+  useEffect(() => {
+    if (combinedDepositStore.length === 0) {
       setPositionsRowData([]);  
     } else {
-      var sanitizedPositions: DepositPrime[] = [];
-      sanitizedPositions = depositStore.map((depositWithLiquidity: DepositWithAvailableLiquidity) => {
+      var sanitizedDeposits: DepositPrime[] = [];
+      sanitizedDeposits = combinedDepositStore.map((depositWithLiquidity: DepositWithAvailableLiquidity) => {
         const deposit = depositWithLiquidity.deposit
-
+        const platformType = deposit.platformType
         const depositor = deposit.depositor;
         const depositId = depositWithLiquidity.depositId;
         const availableDepositAmount = toUsdcString(depositWithLiquidity.availableLiquidity, true);
         const totalDepositAmount = toUsdcString(deposit.depositAmount, true);
         const conversionRate = conversionRateToString(deposit.conversionRate);
 
         let targeted = false;
-        if (targetedDepositIds) {
-          const targetedDepotiIdsSet = new Set(targetedDepositIds.map(id => id.toString()));
+        if (platformType === PaymentPlatform.VENMO && venmoTargetedDepositIds) {
+          const targetedDepositIdsSet = new Set(venmoTargetedDepositIds.map(id => id.toString()));
 
-          if (targetedDepotiIdsSet.has(depositWithLiquidity.depositId.toString())) {
+          if (targetedDepositIdsSet.has(depositWithLiquidity.depositId.toString())) {
+            targeted = true;
+          }
+        } else if (platformType === PaymentPlatform.HDFC && hdfcTargetedDepositIds) {
+          const targetedDepositIdsSet = new Set(hdfcTargetedDepositIds.map(id => id.toString()));
+
+          if (targetedDepositIdsSet.has(depositWithLiquidity.depositId.toString())) {
             targeted = true;
           }
         }
 
         return {
           depositor,
+          platformType,
           depositId,
           availableDepositAmount,
           totalDepositAmount,
@@ -76,9 +110,14 @@ export const DepositsTable: React.FC = () => {
         };
       });
 
-      setPositionsRowData(sanitizedPositions);
+      setPositionsRowData(sanitizedDeposits);
     }
-  }, [depositStore, isTargetingDeposits, targetedDepositIds]);
+  }, [
+    combinedDepositStore,
+    isTargetingDeposits,
+    venmoTargetedDepositIds,
+    hdfcTargetedDepositIds,
+  ]);
 
   useEffect(() => {
     setCurrentPage(0);
@@ -100,17 +139,32 @@ export const DepositsTable: React.FC = () => {
     }
   };
 
-  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>, depositId: bigint) => {
-    if (targetedDepositIds) {
-      const didSelectDeposit = event.target.checked;
-      if (didSelectDeposit) {
-        const depositIdsToStore = [...targetedDepositIds, depositId];
-
-        setTargetedDepositIds(depositIdsToStore);
-      } else {
-        const filteredTargetedDepositIds = targetedDepositIds.filter(id => id !== depositId);
-
-        setTargetedDepositIds(filteredTargetedDepositIds);
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>, depositId: bigint, isVenmo: boolean) => {
+    if (isVenmo) {
+      if (venmoTargetedDepositIds) {
+        const didSelectDeposit = event.target.checked;
+        if (didSelectDeposit) {
+          const depositIdsToStore = [...venmoTargetedDepositIds, depositId];
+
+          setVenmoTargetedDepositIds(depositIdsToStore);
+        } else {
+          const filteredTargetedDepositIds = venmoTargetedDepositIds.filter(id => id !== depositId);
+
+          setVenmoTargetedDepositIds(filteredTargetedDepositIds);
+        }
+      }
+    } else {
+      if (hdfcTargetedDepositIds) {
+        const didSelectDeposit = event.target.checked;
+        if (didSelectDeposit) {
+          const depositIdsToStore = [...hdfcTargetedDepositIds, depositId];
+
+          setHdfcTargetedDepositIds(depositIdsToStore);
+        } else {
+          const filteredTargetedDepositIds = hdfcTargetedDepositIds.filter(id => id !== depositId);
+
+          setHdfcTargetedDepositIds(filteredTargetedDepositIds);
+        }
       }
     }
 };
@@ -158,22 +212,22 @@ export const DepositsTable: React.FC = () => {
 
               <ColumnHeader>Token</ColumnHeader>
 
+              <ColumnHeader>Platform</ColumnHeader>
+
               <ColumnHeader>Depositor</ColumnHeader>
 
               <ColumnHeader>Available Amount</ColumnHeader>
 
               <ColumnHeader>Conversion Rate</ColumnHeader>
 
-              <ColumnHeader>Deposit Amount</ColumnHeader>
-
               <ColumnHeader>Targeted</ColumnHeader>
             </TableHeaderRow>
             <Table>
               {paginatedData.map((positionRow, rowIndex) => (
                 <PositionRowStyled key={rowIndex}>
                   <DepositsRow
+                    isVenmo={positionRow.platformType === PaymentPlatform.VENMO}
                     availableDepositAmount={positionRow.availableDepositAmount}
-                    totalDepositAmount={positionRow.totalDepositAmount}
                     conversionRate={positionRow.conversionRate}
                     depositorAddress={positionRow.depositor}
                     rowIndex={rowIndex}
@@ -258,7 +312,7 @@ const TableContainer = styled.div`
 
 const TableHeaderRow = styled.div`
   display: grid;
-  grid-template-columns: .2fr repeat(5, minmax(0,1fr)) .4fr;
+  grid-template-columns: .2fr 1fr .7fr repeat(3, minmax(0,1fr)) .4fr;
   gap: 8px;
   text-align: left;
   padding: 1.3rem 1.75rem 1rem 1.75rem;

diff --git a/client/src/components/Liquidity/index.tsx b/client/src/components/Liquidity/index.tsx
@@ -4,51 +4,88 @@ import styled from 'styled-components/macro'
 import { AutoColumn } from '../layouts/Column'
 import { DepositsTable } from './DepositsTable'
 import { DEPOSIT_REFETCH_INTERVAL } from '@helpers/constants'
-import useLiquidity from '@hooks/useLiquidity';
-import useRampState from '@hooks/useRampState';
+
+import useVenmoLiquidity from '@hooks/useLiquidity';
+import useVenmoRampState from '@hooks/useRampState';
+
+import useHdfcRampState from '@hooks/hdfc/useHdfcRampState';
+import useHdfcLiquidity from '@hooks/hdfc/useHdfcLiquidity';
 
 
 export default function Deposit() {
   /*
    * Contexts
    */
 
-  const { refetchDepositCounter, shouldFetchRampState } = useRampState();
-  const { refetchDeposits, shouldFetchDeposits } = useLiquidity();
+  const {
+    refetchDepositCounter: refetchVenmoDepositCounter,
+    shouldFetchRampState: shouldFetchVenmoRampState
+  } = useVenmoRampState();
+  const {
+    refetchDeposits: refetchVenmoDeposits,
+    shouldFetchDeposits: shouldFetchVenmoDeposits
+  } = useVenmoLiquidity();
+
+  const {
+    refetchDepositCounter: refetchHdfcDepositCounter,
+    shouldFetchRampState: shouldFetchHdfcRampState
+  } = useHdfcRampState();
+  const {
+    refetchDeposits: refetchHdfcDeposits,
+    shouldFetchDeposits: shouldFetchHdfcDeposits
+  } = useHdfcLiquidity();
 
   /*
    * Hooks
    */
 
   useEffect(() => {
-    if (shouldFetchDeposits) {
+    if (shouldFetchVenmoDeposits) {
+      const intervalId = setInterval(() => {
+        refetchVenmoDeposits?.();
+      }, DEPOSIT_REFETCH_INTERVAL);
+
+      return () => clearInterval(intervalId);
+    }
+  }, [shouldFetchVenmoDeposits, refetchVenmoDeposits]);
+
+  useEffect(() => {
+    if (shouldFetchVenmoRampState) {
+      const intervalId = setInterval(() => {
+        refetchVenmoDepositCounter?.();
+      }, DEPOSIT_REFETCH_INTERVAL);
+
+      return () => clearInterval(intervalId);
+    }
+  }, [shouldFetchVenmoRampState, refetchVenmoDepositCounter]);
+
+  useEffect(() => {
+    if (shouldFetchHdfcDeposits) {
       const intervalId = setInterval(() => {
-        refetchDeposits?.();
+        refetchHdfcDeposits?.();
       }, DEPOSIT_REFETCH_INTERVAL);
 
       return () => clearInterval(intervalId);
     }
-  }, [shouldFetchDeposits, refetchDeposits]);
+  }, [shouldFetchHdfcDeposits, refetchHdfcDeposits]);
 
   useEffect(() => {
-    if (shouldFetchRampState) {
+    if (shouldFetchHdfcRampState) {
       const intervalId = setInterval(() => {
-        refetchDepositCounter?.();
+        refetchHdfcDepositCounter?.();
       }, DEPOSIT_REFETCH_INTERVAL);
 
       return () => clearInterval(intervalId);
     }
-  }, [shouldFetchRampState, refetchDepositCounter]);
+  }, [shouldFetchHdfcRampState, refetchHdfcDepositCounter]);
 
   /*
    * Component
    */
 
   return (
     <Wrapper>
-      <main>
-        <DepositsTable/>
-      </main>
+      <DepositsTable/>
     </Wrapper>
   );
 };

diff --git a/client/src/components/Swap/OnRamperIntentTable.tsx b/client/src/components/Swap/OnRamperIntentTable.tsx
@@ -145,7 +145,9 @@ export const OnRamperIntentTable: React.FC<OnRamperIntentTableProps> = ({
 
   useEffect(() => {
     const executeCancelIntent = async () => {
-      if (shouldConfigureCancelIntentWrite && writeSubmitCancelIntentAsync && submitCancelStatus === 'idle') {
+      const statusForExecution = submitCancelStatus === 'idle' || submitCancelStatus === 'error';
+
+      if (shouldConfigureCancelIntentWrite && writeSubmitCancelIntentAsync && statusForExecution) {
         try {
           await writeSubmitCancelIntentAsync();
         } catch (error) {