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

UI Tweaks
OjusWiZard · Oct 19, 2021 · 9c752fe · 9c752fe
2 parents 9a0b334 + cf02bd0
commit 9c752fe
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 29 deletions.
diff --git a/frontend/app/src/api/user.ts b/frontend/app/src/api/user.ts
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { getTezosInstance } from '../contracts/client';
 import { getCTezFa12Contract } from '../contracts/fa12';
 import { UserBalance } from '../interfaces';
@@ -24,18 +25,49 @@ 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,
+      tezInOvens,
+      ctezOutstanding,
     };
   } catch (error) {
     return {
       xtz: 0,
       ctez: 0,
+      tezInOvens: 0,
+      ctezOutstanding: 0,
     };
   }
 };
diff --git a/frontend/app/src/components/OvenCard/BakerInfo.tsx b/frontend/app/src/components/OvenCard/BakerInfo.tsx
@@ -21,6 +21,7 @@ import Identicon from '../avatar/Identicon';
 import { AllOvenDatum } from '../../interfaces';
 import SkeletonLayout from '../skeleton';
 import data from '../../assets/data/info.json';
+import { useTxLoader } from '../../hooks/utilHooks';
 
 const BakerInfo: React.FC<{ oven: AllOvenDatum | null }> = ({ oven }) => {
   const { t } = useTranslation(['common']);
@@ -37,6 +38,7 @@ const BakerInfo: React.FC<{ oven: AllOvenDatum | null }> = ({ oven }) => {
   const [loading, setLoading] = useState(false);
   const [edit, setEdit] = useState(false);
   const cardbg = useColorModeValue('bg4', 'darkblue');
+  const handleProcessing = useTxLoader();
 
   const showInfo = useMemo(() => {
     return (
@@ -65,6 +67,7 @@ const BakerInfo: React.FC<{ oven: AllOvenDatum | null }> = ({ oven }) => {
           status: 'success',
         });
       }
+      handleProcessing(result);
     } catch (error) {
       const errorText = cTezError[error?.data?.[1].with.int as number] || t('txFailed');
       toast({

diff --git a/frontend/app/src/components/OvenCard/ProgressPill.tsx b/frontend/app/src/components/OvenCard/ProgressPill.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Stack, Text, useColorModeValue, VStack, Wrap } from '@chakra-ui/react';
 
 interface IProgressPill {
   value: number;

diff --git a/frontend/app/src/components/SignIn/SignIn.tsx b/frontend/app/src/components/SignIn/SignIn.tsx
@@ -116,15 +116,15 @@ const SignIn: React.FC = () => {
                     </Tr>
                   </>
                 )}
-                {typeof userOvenData !== 'undefined' && (
+                {typeof balance !== 'undefined' && (
                   <>
                     <Tr>
                       <Td>ꜩ in ovens:</Td>
-                      <Td textAlign="right">{formatNumber(userOvenData?.xtz)}</Td>
+                      <Td textAlign="right">{formatNumber(balance.tezInOvens, 0)}</Td>
                     </Tr>
                     <Tr>
                       <Td>cꜩ outstanding:</Td>
-                      <Td textAlign="right">{formatNumber(userOvenData?.ctez)}</Td>
+                      <Td textAlign="right">{formatNumber(balance.ctezOutstanding, 0)}</Td>
                     </Tr>
                   </>
                 )}

diff --git a/frontend/app/src/components/Trade/Liquidity/AddLiquidity.tsx b/frontend/app/src/components/Trade/Liquidity/AddLiquidity.tsx
@@ -133,14 +133,13 @@ const AddLiquidity: React.FC = () => {
             flexDirection="column"
             id="to-input-amount"
             mt={-2}
-            mb={6}
+            mb={4}
             w="45%"
           >
             <FormLabel color={text2} fontSize="xs">
               tez to deposit
             </FormLabel>
             <Input
-              type="number"
               name="amount"
               id="amount"
               placeholder="0.0"

diff --git a/frontend/app/src/components/Trade/Liquidity/Liquidity.tsx b/frontend/app/src/components/Trade/Liquidity/Liquidity.tsx
@@ -20,7 +20,7 @@ const Liquidity: React.FC = () => {
   const cardbg = useColorModeValue('bg3', 'darkblue');
 
   return (
-    <Stack spacing={6}>
+    <Stack spacing={5}>
       <Flex mr={-2} ml={-2} p={2} borderRadius={14} backgroundColor={cardbg}>
         <Icon fontSize="2xl" color="#B0B7C3" as={MdInfo} m={1} />
         <Text color="gray.500" fontSize="xs" ml={2}>

diff --git a/frontend/app/src/components/Trade/Liquidity/RemoveLiquidity.tsx b/frontend/app/src/components/Trade/Liquidity/RemoveLiquidity.tsx
@@ -7,6 +7,7 @@ import {
   Stack,
   useColorModeValue,
   useToast,
+  Text,
 } from '@chakra-ui/react';
 import { MdAdd } from 'react-icons/md';
 import { addMinutes } from 'date-fns/fp';
@@ -19,10 +20,11 @@ import { RemoveLiquidityParams } from '../../../interfaces';
 import { cfmmError, removeLiquidity } from '../../../contracts/cfmm';
 import { IRemoveLiquidityForm, TRemoveBtnTxt, REMOVE_BTN_TXT } from '../../../constants/liquidity';
 import { useWallet } from '../../../wallet/hooks';
-import { useCfmmStorage } from '../../../api/queries';
+import { useCfmmStorage, useUserLqtData } from '../../../api/queries';
 import Button from '../../button/Button';
 import { useAppSelector } from '../../../redux/store';
 import { useTxLoader } from '../../../hooks/utilHooks';
+import { formatNumber } from '../../../utils/numbers';
 
 const RemoveLiquidity: React.FC = () => {
   const [{ pkh: userAddress }] = useWallet();
@@ -37,8 +39,10 @@ const RemoveLiquidity: React.FC = () => {
   const text2 = useColorModeValue('text2', 'darkheading');
   const text4 = useColorModeValue('text4', 'darkheading');
   const inputbg = useColorModeValue('darkheading', 'textboxbg');
+  const text4Text4 = useColorModeValue('text4', 'text4');
   const { slippage, deadline: deadlineFromStore } = useAppSelector((state) => state.trade);
   const handleProcessing = useTxLoader();
+  const { data: userLqtData } = useUserLqtData(userAddress);
 
   const calcMinValues = useCallback(
     (lqtBurned: number) => {
@@ -50,9 +54,9 @@ const RemoveLiquidity: React.FC = () => {
       } else if (cfmmStorage) {
         const { cashPool, tokenPool, lqtTotal } = cfmmStorage;
         const cashWithdraw =
-          ((lqtBurned * cashPool.toNumber()) / lqtTotal.toNumber()) * (1 - slippage * 0.01);
+          ((lqtBurned * 1e6 * cashPool.toNumber()) / lqtTotal.toNumber()) * (1 - slippage * 0.01);
         const tokenWithdraw =
-          ((lqtBurned * tokenPool.toNumber()) / lqtTotal.toNumber()) * (1 - slippage * 0.01);
+          ((lqtBurned * 1e6 * tokenPool.toNumber()) / lqtTotal.toNumber()) * (1 - slippage * 0.01);
         setOtherValues({
           cashWithdraw: Number((cashWithdraw / 1e6).toFixed(6)),
           tokenWithdraw: Number((tokenWithdraw / 1e6).toFixed(6)),
@@ -73,11 +77,7 @@ const RemoveLiquidity: React.FC = () => {
     to: string().test({
       test: (value: any) => validateAddress(value) === 3,
     }),
-    lqtBurned: number()
-      .min(1, `${t('shouldMinimum')} 1`)
-      .positive(t('shouldPositive'))
-      .integer(t('shouldInteger'))
-      .required(t('required')),
+    lqtBurned: number().positive(t('shouldPositive')).required(t('required')),
     deadline: number().min(0).optional(),
     slippage: number().min(0).optional(),
   });
@@ -89,7 +89,7 @@ const RemoveLiquidity: React.FC = () => {
         const data: RemoveLiquidityParams = {
           deadline,
           to: formData.to,
-          lqtBurned: formData.lqtBurned,
+          lqtBurned: formData.lqtBurned * 1e6,
           minCashWithdrawn: otherValues.cashWithdraw,
           minTokensWithdrawn: otherValues.tokenWithdraw,
         };
@@ -133,14 +133,19 @@ const RemoveLiquidity: React.FC = () => {
             LQT to burn
           </FormLabel>
           <Input
-            type="number"
             name="lqtBurned"
             id="lqtBurned"
             value={values.lqtBurned}
             color={text4}
             bg={inputbg}
             onChange={handleChange}
+            placeholder="0.0"
           />
+          {typeof userLqtData?.lqt !== 'undefined' && (
+            <Text color={text4Text4} fontSize="xs" mt={1}>
+              Balance: {formatNumber(userLqtData?.lqt)}
+            </Text>
+          )}
         </FormControl>
 
         <Flex alignItems="center" justifyContent="space-between">

diff --git a/frontend/app/src/components/Trade/Settings/Settings.tsx b/frontend/app/src/components/Trade/Settings/Settings.tsx
@@ -56,7 +56,7 @@ const Settings: React.FC = () => {
       </Heading>
       <FormControl id="from-input-amount">
         <FormLabel color={text2} fontSize="xs" mt={6} mb={3}>
-          Max spillage %
+          Max slippage %
         </FormLabel>
         <InputGroup>
           <NumberInput
@@ -75,9 +75,6 @@ const Settings: React.FC = () => {
             </NumberInputStepper>
           </NumberInput>
         </InputGroup>
-        <FormLabel color={text2} fontSize="md" mt={6} mb={3}>
-          Min ctez bought (approx.): 0
-        </FormLabel>
         <FormLabel color={text2} fontSize="xs" mt={6} mb={3}>
           Transaction Timeout
         </FormLabel>

diff --git a/frontend/app/src/components/Trade/Swap/Swap.tsx b/frontend/app/src/components/Trade/Swap/Swap.tsx
@@ -203,7 +203,7 @@ const Swap: React.FC = () => {
 
       <FormControl id="to-input-amount" mt={-2} mb={6}>
         <FormLabel color={text2} fontSize="xs">
-          To (estimate)
+          To
         </FormLabel>
         <InputGroup>
           <Input isReadOnly color={text4} bg={inputbg} value={minBuyValue} type="number" />

diff --git a/frontend/app/src/components/Trade/index.tsx b/frontend/app/src/components/Trade/index.tsx
@@ -30,6 +30,7 @@ const Trade: React.FC = () => {
       p={4}
       mx={largerScreen ? 4 : 0}
       my={4}
+      mt={20}
     >
       <Tabs>
         <TabList>

diff --git a/frontend/app/src/components/modals/Burn.tsx b/frontend/app/src/components/modals/Burn.tsx
@@ -29,6 +29,7 @@ import Button from '../button/Button';
 import { BUTTON_TXT, TButtonText, TOKEN, TToken } from '../../constants/swap';
 import { CTezIcon } from '../icons';
 import { AllOvenDatum } from '../../interfaces';
+import { useTxLoader } from '../../hooks/utilHooks';
 
 interface IBurnProps {
   isOpen: boolean;
@@ -45,6 +46,7 @@ const Burn: React.FC<IBurnProps> = ({ isOpen, onClose, oven }) => {
   const text1 = useColorModeValue('text1', 'darkheading');
   const inputbg = useColorModeValue('darkheading', 'textboxbg');
   const cardbg = useColorModeValue('bg3', 'darkblue');
+  const handleProcessing = useTxLoader();
 
   const getRightElement = useCallback(
     (token: TToken) => {
@@ -92,6 +94,7 @@ const Burn: React.FC<IBurnProps> = ({ isOpen, onClose, oven }) => {
       try {
         const amount = -data.amount;
         const result = await mintOrBurn(Number(oven.key.id), amount);
+        handleProcessing(result);
         if (result) {
           toast({
             description: t('txSubmitted'),

diff --git a/frontend/app/src/components/modals/ChangeDepositor.tsx b/frontend/app/src/components/modals/ChangeDepositor.tsx
@@ -25,6 +25,7 @@ import { trimAddress } from '../../utils/addressUtils';
 import { useWallet } from '../../wallet/hooks';
 import { addRemoveDepositorList, cTezError, enableDisableAnyDepositor } from '../../contracts/ctez';
 import { logger } from '../../utils/logger';
+import { useTxLoader } from '../../hooks/utilHooks';
 
 interface IChangeDepositorProps {
   canAnyoneDeposit: boolean;
@@ -55,6 +56,7 @@ const ChangeDepositor: React.FC<IChangeDepositorProps> = (props) => {
     onChange: setDepType,
   });
   const group = getRootProps();
+  const handleProcessing = useTxLoader();
 
   useEffect(() => {
     if (props.isOpen && depositors.length === 0 && props.ovenStorage) {

diff --git a/frontend/app/src/components/modals/CreateOven.tsx b/frontend/app/src/components/modals/CreateOven.tsx
@@ -30,6 +30,7 @@ import Button from '../button/Button';
 import DepositorsInput from '../input/DepositorsInput';
 import { makeLastOvenIdSelector } from '../../hooks/reduxSelectors';
 import { useAppSelector } from '../../redux/store';
+import { useTxLoader } from '../../hooks/utilHooks';
 
 interface ICreateOvenProps {
   isOpen: boolean;
@@ -63,6 +64,7 @@ const CreateOven: React.FC<ICreateOvenProps> = ({ isOpen, onClose }) => {
   const inputbg = useColorModeValue('darkheading', 'textboxbg');
   const text1 = useColorModeValue('text1', 'darkheading');
   const selectLastOvenId = useMemo(makeLastOvenIdSelector, []);
+  const handleProcessing = useTxLoader();
 
   const lastOvenId = useAppSelector((state) => selectLastOvenId(state, userAddress));
 
@@ -144,6 +146,7 @@ const CreateOven: React.FC<ICreateOvenProps> = ({ isOpen, onClose }) => {
           });
           onClose();
         }
+        handleProcessing(result);
       } catch (error) {
         logger.error(error);
         const errorText = cTezError[error?.data?.[1].with.int as number] || t('txFailed');

diff --git a/frontend/app/src/components/modals/Deposit.tsx b/frontend/app/src/components/modals/Deposit.tsx
@@ -26,8 +26,9 @@ import { cTezError, deposit } from '../../contracts/ctez';
 import { logger } from '../../utils/logger';
 
 import Button from '../button/Button';
-import { CTezIcon } from '../icons';
+import { CTezIcon, TezIcon } from '../icons';
 import { AllOvenDatum } from '../../interfaces';
+import { useTxLoader } from '../../hooks/utilHooks';
 
 interface IDepositProps {
   isOpen: boolean;
@@ -42,14 +43,15 @@ const Deposit: React.FC<IDepositProps> = ({ isOpen, onClose, oven }) => {
   const text2 = useColorModeValue('text2', 'darkheading');
   const text4 = useColorModeValue('text4', 'darkheading');
   const inputbg = useColorModeValue('darkheading', 'textboxbg');
+  const handleProcessing = useTxLoader();
 
   const getRightElement = useCallback(
     (token: TToken) => {
       return (
         <InputRightElement backgroundColor="transparent" w={24} color={text2}>
-          <CTezIcon height={28} width={28} />
+          <TezIcon height={28} width={28} />
           <Text fontWeight="500" mx={2}>
-            ctez
+            tez
           </Text>
         </InputRightElement>
       );
@@ -70,6 +72,7 @@ const Deposit: React.FC<IDepositProps> = ({ isOpen, onClose, oven }) => {
     if (oven?.value.address) {
       try {
         const result = await deposit(oven.value.address, data.amount);
+        handleProcessing(result);
         if (result) {
           toast({
             description: t('txSubmitted'),

diff --git a/frontend/app/src/components/modals/Mint.tsx b/frontend/app/src/components/modals/Mint.tsx
@@ -31,6 +31,7 @@ import Button from '../button/Button';
 import { BUTTON_TXT, TButtonText, TOKEN, TToken } from '../../constants/swap';
 import { CTezIcon } from '../icons';
 import { AllOvenDatum } from '../../interfaces';
+import { useTxLoader } from '../../hooks/utilHooks';
 
 interface IMintProps {
   isOpen: boolean;
@@ -47,6 +48,7 @@ const Mint: React.FC<IMintProps> = ({ isOpen, onClose, oven }) => {
   const text1 = useColorModeValue('text1', 'darkheading');
   const inputbg = useColorModeValue('darkheading', 'textboxbg');
   const cardbg = useColorModeValue('bg3', 'darkblue');
+  const handleProcessing = useTxLoader();
 
   const getRightElement = useCallback(
     (token: TToken) => {
@@ -112,6 +114,7 @@ const Mint: React.FC<IMintProps> = ({ isOpen, onClose, oven }) => {
             status: 'success',
           });
         }
+        handleProcessing(result);
       } catch (error) {
         logger.warn(error);
         const errorText = cTezError[error.data[1].with.int as number] || t('txFailed');
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ const Trade: React.FC = () => { @@
           p={4}
           mx={largerScreen ? 4 : 0}
           my={4}
+          mt={20}
         >
           <Tabs>
             <TabList>
@@ Expand Down @@