Merge pull request tezos-checker#32 from ishwaryaa-b/development

added min received in swap
OjusWiZard · Oct 20, 2021 · 6414ab7 · 6414ab7
2 parents 9c752fe + d88efad
commit 6414ab7
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 57 deletions.
diff --git a/frontend/app/src/api/tzkt.ts b/frontend/app/src/api/tzkt.ts
@@ -47,3 +47,29 @@ export const getAllOvensAPI = async (): Promise<AllOvenDatum[]> => {
   const data = await get<AllOvenDatum[], unknown>(`bigmaps/${CTEZ_CONTRACT_BIGMAP}/keys`);
   return data;
 };
+
+export const getUserOvenData = async (userAddress: string) => {
+  try {
+    const userOvenData: any = await axios.get(
+      `https://api.granadanet.tzkt.io/v1/bigmaps/59943/keys?key.owner=${userAddress}`,
+    );
+    let tezInOvens: any = 0;
+    let ctezOutstanding: any = 0;
+    const userOvenDataLength: any = userOvenData.data.length;
+
+    for (let i = 0; i < userOvenDataLength; ) {
+      tezInOvens += Number(userOvenData.data[i].value.tez_balance) / 1e6;
+      ctezOutstanding += Number(userOvenData.data[i].value.ctez_outstanding) / 1e6;
+      i += 1;
+    }
+    return {
+      tezInOvens,
+      ctezOutstanding,
+    };
+  } catch (error) {
+    return {
+      tezInOvens: 0,
+      ctezOutstanding: 0,
+    };
+  }
+};
diff --git a/frontend/app/src/api/user.ts b/frontend/app/src/api/user.ts
@@ -1,7 +1,7 @@
-import axios from 'axios';
 import { getTezosInstance } from '../contracts/client';
 import { getCTezFa12Contract } from '../contracts/fa12';
 import { UserBalance } from '../interfaces';
+import { getUserOvenData } from './tzkt';
 
 const getXtzBalance = async (userAddress: string) => {
   try {
@@ -25,37 +25,11 @@ const getCtezBalance = async (userAddress: string) => {
   }
 };
 
-export const getUserOvenData = async (userAddress: string) => {
-  try {
-    const userOvenData: any = await axios.get(
-      `https://api.granadanet.tzkt.io/v1/bigmaps/59943/keys?key.owner=${userAddress}`,
-    );
-    let tezInOvens: any = 0;
-    let ctezOutstanding: any = 0;
-    const userOvenDataLength: any = userOvenData.data.length;
-    for (let i = 0; i < userOvenDataLength; ) {
-      tezInOvens += Number(userOvenData.data[i].value.tez_balance) / 1e6;
-      ctezOutstanding += Number(userOvenData.data[i].value.ctez_outstanding) / 1e6;
-      i += 1;
-    }
-    return {
-      tezInOvens,
-      ctezOutstanding,
-    };
-  } catch (error) {
-    return {
-      tezInOvens: 0,
-      ctezOutstanding: 0,
-    };
-  }
-};
-
 export const getUserBalance = async (userAddress: string): Promise<UserBalance> => {
   try {
     const ctez = await getCtezBalance(userAddress);
     const xtz = await getXtzBalance(userAddress);
     const { tezInOvens, ctezOutstanding } = await getUserOvenData(userAddress);
-    console.log(tezInOvens);
     return {
       xtz,
       ctez,

diff --git a/frontend/app/src/components/OvenCard/OvenCard.tsx b/frontend/app/src/components/OvenCard/OvenCard.tsx
@@ -103,7 +103,7 @@ const OvenCard: React.FC<IOvenCardProps> = (props) => {
           </Box>
         ))}
         <Box>
-          <ProgressPill value={Number(stats?.collateralUtilization ?? 0)} />
+          <ProgressPill value={Number(stats?.collateralUtilization ?? 0)} oven={props.oven} />
           <Text color="#B0B7C3" fontSize="xs">
             Collateral Utilization
           </Text>

diff --git a/frontend/app/src/components/OvenCard/OvenStats.tsx b/frontend/app/src/components/OvenCard/OvenStats.tsx
@@ -86,7 +86,7 @@ const OvenStats: React.FC<{ oven: AllOvenDatum | null }> = ({ oven }) => {
 
         <Stack w="70%" textAlign="right">
           <Skeleton isLoaded={stats?.collateralUtilization != null}>
-            <ProgressPill value={Number(stats?.collateralUtilization)} />
+            <ProgressPill value={Number(stats?.collateralUtilization)} oven={null} />
           </Skeleton>
           <Text color={text4color} fontSize="xs">
             Collateral utilization

diff --git a/frontend/app/src/components/OvenCard/ProgressPill.tsx b/frontend/app/src/components/OvenCard/ProgressPill.tsx
@@ -1,29 +1,67 @@
-import { Box, Flex, Stack, Text, useColorModeValue, VStack, Wrap } from '@chakra-ui/react';
+import { Box, Flex, Icon, Stack, Text, useColorModeValue, VStack, Wrap } from '@chakra-ui/react';
+import { useMemo, useState } from 'react';
+import { BsArrowRight } from 'react-icons/bs';
+import { AllOvenDatum } from '../../interfaces';
+import LiquidateOven from '../modals/Liquidate';
 
 interface IProgressPill {
   value: number;
+  oven: AllOvenDatum | null;
 }
 
-const ProgressPill: React.FC<IProgressPill> = ({ value }) => {
+const ProgressPill: React.FC<IProgressPill> = ({ value, oven }) => {
   const progressPillBg = useColorModeValue('white', 'darkblue');
+  const [liquidateOven, setliquidateOven] = useState(false);
+
+  const SetOpen = (v: boolean) => {
+    setliquidateOven(v);
+  };
+
+  const modals = useMemo(() => {
+    return (
+      <>
+        <LiquidateOven oven={oven} isOpen={liquidateOven} onClose={() => setliquidateOven(false)} />
+      </>
+    );
+  }, [liquidateOven, setliquidateOven]);
+
   return (
-    <Stack
-      direction="row"
-      backgroundColor={value < 99 ? (value > 80 ? '#F6F5E5AA' : '#E5F6EFAA') : '#FFE3E2AA'}
-      borderRadius={16}
-      px={4}
-      w="100%"
-    >
-      <Box h={2} borderRadius={4} w="100%" my="auto" backgroundColor={progressPillBg}>
-        <Box
-          h="100%"
-          w={`${value}%`}
-          borderRadius={4}
-          backgroundColor={value < 99 ? (value > 80 ? '#F3DD63' : '#38CB89') : '#CC3936'}
-        />
-      </Box>
-      <Text maxWidth={40}>{value}%</Text>
-    </Stack>
+    <div>
+      <Stack
+        direction="row"
+        backgroundColor={value < 99 ? (value > 80 ? '#F6F5E5AA' : '#E5F6EFAA') : '#FFE3E2AA'}
+        borderRadius={16}
+        px={4}
+        pb={4}
+        w="100%"
+      >
+        <Box h={2} borderRadius={4} w="100%" my="auto" backgroundColor={progressPillBg}>
+          <Box
+            h="100%"
+            w={`${value}%`}
+            borderRadius={4}
+            backgroundColor={value < 99 ? (value > 80 ? '#F3DD63' : '#38CB89') : '#CC3936'}
+          />
+        </Box>
+        <Text maxWidth={40}>{value}%</Text>
+        {modals}
+      </Stack>
+      {value > 99 && (
+        <Text
+          color="#CC3936"
+          position="relative"
+          top="-22px"
+          left="22"
+          fontSize="12px"
+          fontWeight="500"
+          onClick={(e) => SetOpen(true)}
+          _hover={{ cursor: 'pointer' }}
+        >
+          Liquidate oven
+          <Icon as={BsArrowRight} />
+        </Text>
+      )}
+    </div>
   );
 };
 

diff --git a/frontend/app/src/components/SignIn/SignIn.tsx b/frontend/app/src/components/SignIn/SignIn.tsx
@@ -120,11 +120,13 @@ const SignIn: React.FC = () => {
                   <>
                     <Tr>
                       <Td>ꜩ in ovens:</Td>
-                      <Td textAlign="right">{formatNumber(balance.tezInOvens, 0)}</Td>
+                      <Td textAlign="right">{formatNumber(balance.tezInOvens, 0)?.toFixed(6)}</Td>
                     </Tr>
                     <Tr>
                       <Td>cꜩ outstanding:</Td>
-                      <Td textAlign="right">{formatNumber(balance.ctezOutstanding, 0)}</Td>
+                      <Td textAlign="right">
+                        {formatNumber(balance.ctezOutstanding, 0)?.toFixed(6)}
+                      </Td>
                     </Tr>
                   </>
                 )}

diff --git a/frontend/app/src/components/Trade/Swap/Swap.tsx b/frontend/app/src/components/Trade/Swap/Swap.tsx
@@ -52,6 +52,7 @@ const Swap: React.FC = () => {
   const handleProcessing = useTxLoader();
 
   const { slippage, deadline: deadlineFromStore } = useAppSelector((state) => state.trade);
+  const [minReceived, setMinReceived] = useState(0);
 
   const getRightElement = useCallback((token: TToken) => {
     if (token === TOKEN.Tez) {
@@ -106,13 +107,13 @@ const Swap: React.FC = () => {
             ? await cashToToken({
                 amount: formData.amount,
                 deadline,
-                minTokensBought: minBuyValue,
+                minTokensBought: minReceived,
                 to: formData.to,
               })
             : await tokenToCash(
                 {
                   deadline,
-                  minCashBought: minBuyValue,
+                  minCashBought: minReceived,
                   to: formData.to,
                   tokensSold: formData.amount,
                 },
@@ -142,10 +143,13 @@ const Swap: React.FC = () => {
       const tokWithoutSlippage =
         (cashSold * 997 * aPool.toNumber()) / (bPool.toNumber() * 1000 + cashSold * 997) / 1e6;
       setMinBuyValue(Number(tokWithoutSlippage.toFixed(6)));
+      const minRece = tokWithoutSlippage - (tokWithoutSlippage * slippage) / 100;
+      setMinReceived(minRece);
     } else {
       setMinBuyValue(0);
+      setMinReceived(0);
     }
-  }, [cfmmStorage, formType, values.amount]);
+  }, [cfmmStorage, formType, values.amount, slippage]);
 
   const { buttonText, errorList } = useMemo(() => {
     logger.info(errors);
@@ -220,6 +224,12 @@ const Swap: React.FC = () => {
           1 tez = {(1 / Number(baseStats?.currentPrice ?? 1)).toFixed(6)} ctez
         </Text>
       </Flex>
+      <Flex justifyContent="space-between">
+        <Text fontSize="xs">Min Received</Text>
+        <Text color="#4E5D78" fontSize="xs">
+          {Number(minReceived).toFixed(6)} {formType === FORM_TYPE.CTEZ_TEZ ? 'tez' : 'ctez'}
+        </Text>
+      </Flex>
       <Flex justifyContent="space-between">
         <Text fontSize="xs">Price Impact</Text>
         <Text fontSize="xs">0.0000%</Text>

diff --git a/frontend/app/src/components/input/DepositorsInput.tsx b/frontend/app/src/components/input/DepositorsInput.tsx
@@ -58,7 +58,7 @@ const DepositorsInput: React.FC<IDepositorsInputProps> = (props) => {
     <Box {...props.outerBoxProps}>
       <FormControl>
         <FormLabel fontSize="xs" fontWeight="500">
-          Authorised Deposters
+          Authorized Depositors
         </FormLabel>
 
         <Wrap mb={2}>