Merge pull request #326 from yieldprotocol/marcomariscal/issue325

issue325: ensure proper position path on tx success in tx widget
yieldprotocol · Sep 18, 2021 · f442778 · f442778
2 parents fcdae2c + 514665b
commit f442778
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 84 deletions.
diff --git a/src/components/TransactionItem.tsx b/src/components/TransactionItem.tsx
@@ -2,8 +2,10 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Box, Text, Spinner } from 'grommet';
 import { FiX, FiCheckCircle, FiXCircle } from 'react-icons/fi';
-import { TxState } from '../types';
+import { ActionCodes, TxState } from '../types';
 import EtherscanButton from './buttons/EtherscanButton';
+import { getPositionPathPrefix, getVaultIdFromReceipt } from '../utils/appUtils';
+import { ChainContext } from '../contexts/ChainContext';
 
 interface ITransactionItem {
   tx: any;
@@ -12,11 +14,20 @@ interface ITransactionItem {
 }
 
 const TransactionItem = ({ tx, handleRemove, wide }: ITransactionItem) => {
-  const { status, txCode, tx: t } = tx;
-  const action = txCode.split('_')[0];
-  const link = txCode.split('_')[1];
+  const {
+    chainState: { contractMap },
+  } = useContext(ChainContext);
+
+  const { status, txCode, tx: t, receipt } = tx;
   console.log(tx);
 
+  /* get position link based on position id */
+  const action = txCode.split('_')[0];
+  const pathPrefix = getPositionPathPrefix(txCode);
+  const positionId =
+    action === ActionCodes.BORROW && receipt ? getVaultIdFromReceipt(receipt, contractMap) : txCode.split('_')[1];
+  const link = `${pathPrefix}/${positionId}`;
+
   return tx.remove ? null : (
     <Box
       align="center"
@@ -26,7 +37,7 @@ const TransactionItem = ({ tx, handleRemove, wide }: ITransactionItem) => {
       elevation={wide ? undefined : 'small'}
       pad={wide ? 'xsmall' : 'small'}
       key={t.hash}
-      background='white'
+      background="white"
       round="xsmall"
     >
       <Box width="3rem">
@@ -40,10 +51,7 @@ const TransactionItem = ({ tx, handleRemove, wide }: ITransactionItem) => {
         </Box>
         <Box direction="row" alignSelf="start">
           {status === TxState.SUCCESSFUL && action !== 'Borrow' ? (
-            <Link
-              to={`${action !== 'Borrow' ? action.toLowerCase() : 'vault'}position/${link}`}
-              style={{ textDecoration: 'none' }}
-            >
+            <Link to={link} style={{ textDecoration: 'none' }}>
               <Text size="xsmall" color="tailwind-blue" style={{ verticalAlign: 'middle' }}>
                 View Position
               </Text>

diff --git a/src/components/TransactionWidget.tsx b/src/components/TransactionWidget.tsx
@@ -1,11 +1,10 @@
-import React, { useCallback, useState, useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { Box, Text } from 'grommet';
 import { FiAlertCircle, FiAlertTriangle } from 'react-icons/fi';
 import { TxContext } from '../contexts/TxContext';
-import { IYieldProcess, ProcessStage, TxState } from '../types';
+import { IYieldProcess, ProcessStage } from '../types';
 import TransactionItem from './TransactionItem';
-import { useProcess } from '../hooks/useProcess';
 
 // look to see if there is a better way
 const StyledBox = styled(Box)`
@@ -25,65 +24,65 @@ const TransactionWidget = () => {
     <>
       {Array.from(processes.values() as IYieldProcess[])
         .filter((process: IYieldProcess) => process.stage > 0)
-        .map((process: IYieldProcess) => {
-          const r = 9;
-          return (
-            <StyledBox key={process.txCode}>
-              {(process.stage === ProcessStage.SIGNING_REQUESTED ||
-                process.stage === ProcessStage.TRANSACTION_REQUESTED) && (
-                <Box
-                  direction="row"
-                  justify="start"
-                  align="center"
-                  fill
-                  gap="small"
-                  pad="small"
-                  elevation="small"
-                  // background='gradient-transparent'
-                  animation={{ type:'slideLeft', size:'large' }}
-                  background='white'
-                  round={{size:"xsmall", corner:"left"}}
-                >
-                  <Box width="3rem" align="center">
-                    <FiAlertTriangle size="1.5rem" color="#D97706" />
-                  </Box>
-                  <Box align="start">
-                    <Text size="small" color='text'>Action Required</Text>
-                    <Text size="xsmall" color='text'>Please Check your wallet</Text>
-                  </Box>
+        .map((process: IYieldProcess) => (
+          <StyledBox key={process.txCode}>
+            {(process.stage === ProcessStage.SIGNING_REQUESTED ||
+              process.stage === ProcessStage.TRANSACTION_REQUESTED) && (
+              <Box
+                direction="row"
+                justify="start"
+                align="center"
+                fill
+                gap="small"
+                pad="small"
+                elevation="small"
+                // background='gradient-transparent'
+                animation={{ type: 'slideLeft', size: 'large' }}
+                background="white"
+                round={{ size: 'xsmall', corner: 'left' }}
+              >
+                <Box width="3rem" align="center">
+                  <FiAlertTriangle size="1.5rem" color="#D97706" />
                 </Box>
-              )}
+                <Box align="start">
+                  <Text size="small" color="text">
+                    Action Required
+                  </Text>
+                  <Text size="xsmall" color="text">
+                    Please Check your wallet
+                  </Text>
+                </Box>
+              </Box>
+            )}
 
-            {process.stage === ProcessStage.SIGNING_TRANSACTION_PENDING 
-              && (
-                <Box
-                  direction="row"
-                  justify="start"
-                  align="center"
-                  fill
-                  // elevation="small"
-                  gap="small"
-                  pad="small"
-                  background='white'
-                  round="xsmall"
-                >
-                  <Box width="3rem" align="center">
-                    <FiAlertCircle size="1.5rem" color="#D97706" />
-                  </Box>
-                  <Box align="start">
-                    <Text size="small">Aproval transaction pending</Text>
-                    <Text size="xsmall">....</Text>
-                  </Box>
+            {process.stage === ProcessStage.SIGNING_TRANSACTION_PENDING && (
+              <Box
+                direction="row"
+                justify="start"
+                align="center"
+                fill
+                // elevation="small"
+                gap="small"
+                pad="small"
+                background="white"
+                round="xsmall"
+              >
+                <Box width="3rem" align="center">
+                  <FiAlertCircle size="1.5rem" color="#D97706" />
+                </Box>
+                <Box align="start">
+                  <Text size="small">Approval transaction pending</Text>
+                  <Text size="xsmall">....</Text>
                 </Box>
-              )}
+              </Box>
+            )}
 
-              {(process.stage === ProcessStage.TRANSACTION_PENDING ||   
-                process.stage === ProcessStage.PROCESS_COMPLETE) && (
-                <TransactionItem tx={process.tx!} key={process.txHash} wide={false} />
-              )}
-            </StyledBox>
-          );
-        })}
+            {(process.stage === ProcessStage.TRANSACTION_PENDING ||
+              process.stage === ProcessStage.PROCESS_COMPLETE) && (
+              <TransactionItem tx={process.tx!} key={process.txHash} wide={false} />
+            )}
+          </StyledBox>
+        ))}
     </>
   );
 };

diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts
@@ -223,6 +223,7 @@ export const getPositionPathPrefix = (txCode: string) => {
   switch (action) {
     // BORROW
     case ActionCodes.BORROW:
+    case ActionCodes.ADD_COLLATERAL:
     case ActionCodes.REMOVE_COLLATERAL:
     case ActionCodes.REPAY:
     case ActionCodes.ROLL_DEBT:

diff --git a/src/views/LendPosition.tsx b/src/views/LendPosition.tsx
@@ -85,7 +85,8 @@ const LendPosition = () => {
   const handleStepper = (back: boolean = false) => {
     const step = back ? -1 : 1;
     const newStepArray = stepPosition.map((x: any, i: number) => (i === actionActive.index ? x + step : x));
-    setStepPosition(newStepArray);
+    const validatedSteps = newStepArray.map((x: number) => (x >= 0 ? x : 0));
+    setStepPosition(validatedSteps);
   };
 
   const handleClosePosition = () => {

diff --git a/src/views/PoolPosition.tsx b/src/views/PoolPosition.tsx
@@ -90,7 +90,8 @@ const PoolPosition = () => {
   const handleStepper = (back: boolean = false) => {
     const step = back ? -1 : 1;
     const newStepArray = stepPosition.map((x: any, i: number) => (i === actionActive.index ? x + step : x));
-    setStepPosition(newStepArray);
+    const validatedSteps = newStepArray.map((x: number) => (x >= 0 ? x : 0));
+    setStepPosition(validatedSteps);
   };
 
   const handleRemove = () => {
@@ -104,19 +105,18 @@ const PoolPosition = () => {
     selectedSeries && rollToSeries && rollLiquidity(rollInput!, selectedSeries, rollToSeries);
   };
 
-  const resetInputs = 
-    (actionCode: ActionCodes) => {
-      if (actionCode === ActionCodes.REMOVE_LIQUIDITY) {
-        handleStepper(true);
-        setRemoveInput(undefined);
-        resetRemoveProcess();
-      }
-      if (actionCode === ActionCodes.ROLL_LIQUIDITY) {
-        handleStepper(true);
-        setRollInput(undefined);
-        resetRollProcess();
-      }
-    };
+  const resetInputs = (actionCode: ActionCodes) => {
+    if (actionCode === ActionCodes.REMOVE_LIQUIDITY) {
+      handleStepper(true);
+      setRemoveInput(undefined);
+      resetRemoveProcess();
+    }
+    if (actionCode === ActionCodes.ROLL_LIQUIDITY) {
+      handleStepper(true);
+      setRollInput(undefined);
+      resetRollProcess();
+    }
+  };
 
   /* SET MAX VALUES */
   useEffect(() => {

diff --git a/src/views/VaultPosition.tsx b/src/views/VaultPosition.tsx
@@ -150,7 +150,8 @@ const VaultPosition = () => {
   const handleStepper = (back: boolean = false) => {
     const step = back ? -1 : 1;
     const newStepArray = stepPosition.map((x: any, i: number) => (i === actionActive.index ? x + step : x));
-    setStepPosition(newStepArray);
+    const validatedSteps = newStepArray.map((x: number) => (x >= 0 ? x : 0));
+    setStepPosition(validatedSteps);
   };
 
   const handleRepay = () => {
@@ -172,7 +173,7 @@ const VaultPosition = () => {
     switch (actionCode) {
       case ActionCodes.REPAY:
         handleStepper(true);
-        setRepayInput(undefined);
+        setRepayInput(null);
         resetRepayProcess();
         break;
       case ActionCodes.ROLL_DEBT: