Merge pull request #30 from studydefi/frontend/enhance-tx-loading

Frontend/enhance tx loading
study-defi · Apr 3, 2020 · 4e9cc9e · 4e9cc9e
2 parents d0ae6c2 + d4401bc
commit 4e9cc9e
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 19 deletions.
diff --git a/packages/frontend/containers/DACProxy.tsx b/packages/frontend/containers/DACProxy.tsx
@@ -64,7 +64,7 @@ function useDACProxy() {
       variant: "processing",
     });
 
-    const receipt = await tx.wait();
+    await tx.wait();
 
     window.toastProvider.addMessage("Smart Wallet created", {
       variant: "success",

diff --git a/packages/frontend/features/import-vault/FromMakerDAO.tsx b/packages/frontend/features/import-vault/FromMakerDAO.tsx
@@ -56,6 +56,14 @@ const ImportButton = () => {
     );
   }
 
+  const handleImportVaultClicked = async () => {
+    await importVault();
+    window.toastProvider.addMessage(`Vault #${selectedVaultId} imported!`, {
+      variant: "success",
+    });
+    closeModal();
+  };
+
   // case 2: no vaults found on MakerDAO for this address
   if (vaultIds.length === 0) {
     return (
@@ -135,7 +143,7 @@ const ImportButton = () => {
             <Button
               disabled={!importAllowed || loadingImport}
               ml={3}
-              onClick={importVault}
+              onClick={handleImportVaultClicked}
             >
               {loadingImport ? (
                 <Flex alignItems="center">

diff --git a/packages/frontend/features/import-vault/useAllowVaultTransfer.ts b/packages/frontend/features/import-vault/useAllowVaultTransfer.ts
@@ -44,13 +44,28 @@ const useAllowVaultTransfer = (selectedVaultId: number) => {
       signer,
     );
 
-    await dedgeHelpers.maker.dsProxyCdpAllowDacProxy(
+    const tx = await dedgeHelpers.maker.dsProxyCdpAllowDacProxy(
       makerDsProxyContract,
       proxyAddress,
       makerCdpManager.address,
       makerProxyActions.address,
       selectedVaultId.toString(),
     );
+
+    window.toastProvider.addMessage(`Allowing vault #${selectedVaultId}...`, {
+      secondaryMessage: "Check progress on Etherscan",
+      actionHref: `https://etherscan.io/tx/${tx.hash}`,
+      actionText: "Check",
+      variant: "processing",
+    });
+
+    await tx.wait();
+
+    window.toastProvider.addMessage(
+      `Vault #${selectedVaultId} allowance approved`,
+      { variant: "success" },
+    );
+
     setLoading(false);
     getAllowStatus();
   };

diff --git a/packages/frontend/features/import-vault/useImportVault.ts b/packages/frontend/features/import-vault/useImportVault.ts
@@ -53,6 +53,13 @@ const useImportVault = selectedVaultId => {
       decimals,
     );
 
+    window.toastProvider.addMessage(`Import vault #${selectedVaultId}...`, {
+      secondaryMessage: "Check progress on Etherscan",
+      actionHref: `https://etherscan.io/tx/${tx.hash}`,
+      actionText: "Check",
+      variant: "processing",
+    });
+
     await tx.wait();
     setLoading(false);
     getVaults();

diff --git a/packages/frontend/features/swap-tokens/SwapConfirm.tsx b/packages/frontend/features/swap-tokens/SwapConfirm.tsx
@@ -8,13 +8,14 @@ import {
   Button,
   Heading,
   Card,
-  EthAddress,
+  Icon,
 } from "rimble-ui";
 
 import { ModalBottom, ModalCloseIcon } from "../../components/Modal";
 
 import CoinsContainer from "../../containers/Coins";
 import useSwap from "./useSwap";
+import CompoundPositions from "../../containers/CompoundPositions";
 
 const SwapConfirm = ({
   thingToSwap,
@@ -30,6 +31,7 @@ const SwapConfirm = ({
   const closeModal = () => setIsOpen(false);
 
   const { COINS } = CoinsContainer.useContainer();
+  const { getBalances } = CompoundPositions.useContainer();
   const { swapFunction, loading } = useSwap(
     thingToSwap,
     fromTokenStr,
@@ -45,14 +47,27 @@ const SwapConfirm = ({
   return (
     <Box>
       <MyButton width="100%" onClick={openModal} disabled={disabled}>
-        Confirm
+        <Flex alignItems="center">
+          <span>Confirm</span>
+          <Icon name="Launch" color={outline ? "primary" : "white"} ml="2" />
+        </Flex>
       </MyButton>
+      {thingToSwap === "collateral" && (
+        <>
+          <Text fontSize="0" color="#999" fontWeight="bold" mt="2">
+            Due to nature of slippages:
+          </Text>
+          <Text fontSize="0" color="#999">
+            MAX: 95% (90% recommended)
+          </Text>
+        </>
+      )}
 
       <Modal isOpen={isOpen}>
         <Card width={"640px"} p={0}>
           <ModalCloseIcon onClick={closeModal} />
 
-          <Box p={4}>
+          <Box p={4} pb={1}>
             <Heading.h3 mb="4">
               Swap {thingToSwap} from {fromToken.symbol} to {toToken.symbol}
             </Heading.h3>
@@ -64,6 +79,12 @@ const SwapConfirm = ({
                 {toToken.symbol}
               </Text>
             </Box>
+
+            <Box>
+              <Text fontSize="0" color="#999">
+                Service Fee: 0.0135% (0.09% to AAVE for flash loan)
+              </Text>
+            </Box>
           </Box>
 
           <ModalBottom>
@@ -73,6 +94,10 @@ const SwapConfirm = ({
               disabled={loading}
               onClick={async () => {
                 await swapFunction();
+                window.toastProvider.addMessage(`Swap completed!`, {
+                  variant: "success",
+                });
+                getBalances();
                 closeModal();
               }}
             >

diff --git a/packages/frontend/features/swap-tokens/SwapOptions.tsx b/packages/frontend/features/swap-tokens/SwapOptions.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, Field, Input, Button, Tooltip } from "rimble-ui";
+import { Box, Text, Field, Input, Link, Tooltip } from "rimble-ui";
 import styled from "styled-components";
 
 import Select from "../../components/Select";
@@ -23,7 +23,7 @@ const SwapOptions = () => {
   const [toTokenStr, setToTokenStr] = useState("eth");
   const [amountToSwap, setAmountToSwap] = useState("");
 
-  const { isAmountAvailable } = useIsAmountAvailable(
+  const { isAmountAvailable, canSwapAmount } = useIsAmountAvailable(
     amountToSwap,
     fromTokenStr,
     thingToSwap,
@@ -32,8 +32,14 @@ const SwapOptions = () => {
   const disableConfirm =
     !hasProxy || // not connected or no smart wallet
     fromTokenStr === toTokenStr || // same token
+    !isAmountAvailable || // amount not available
     amountToSwap === "" || // no amount specified
-    !isAmountAvailable; // amount not available
+    amountToSwap === "0";
+
+  const setMax = () => {
+    if (!hasProxy) return;
+    setAmountToSwap(canSwapAmount.toString());
+  };
 
   return (
     <Container p="3">
@@ -112,8 +118,11 @@ const SwapOptions = () => {
         </Field>
       </Box>
 
-      <Box>
-        <Field label={`Amount of ${fromTokenStr.toLocaleUpperCase()} to swap`}>
+      <Box mb="3">
+        <Field
+          mb="0"
+          label={`Amount of ${fromTokenStr.toLocaleUpperCase()} to swap`}
+        >
           <Input
             type="number"
             required={true}
@@ -122,6 +131,9 @@ const SwapOptions = () => {
             onChange={e => setAmountToSwap(e.target.value.toString())}
           />
         </Field>
+        <Text textAlign="right" opacity={!hasProxy ? "0.5" : "1"}>
+          <Link onClick={setMax}>Set max</Link>
+        </Text>
       </Box>
 
       <SwapConfirm

diff --git a/packages/frontend/features/swap-tokens/useIsAmountAvailable.ts b/packages/frontend/features/swap-tokens/useIsAmountAvailable.ts
@@ -14,12 +14,14 @@ const useIsAmountAvailable = (
     return { isAmountAvailable: false };
   }
 
-  if (thingToSwap === "debt") {
-    const result = parseFloat(amount) < parseFloat(tokenBalance.borrow);
-    return { isAmountAvailable: result };
-  }
-  const result = parseFloat(amount) < parseFloat(tokenBalance.supply);
-  return { isAmountAvailable: result };
+  const canSwapAmount =
+    thingToSwap === "debt"
+      ? parseFloat(tokenBalance.borrow)
+      : 0.95 * parseFloat(tokenBalance.supply);
+
+  const result = parseFloat(amount) <= canSwapAmount;
+
+  return { isAmountAvailable: result, canSwapAmount };
 };
 
 export default useIsAmountAvailable;
diff --git a/packages/frontend/features/swap-tokens/useSwap.ts b/packages/frontend/features/swap-tokens/useSwap.ts
@@ -35,7 +35,12 @@ const useSwap = (thingToSwap, fromTokenStr, toTokenStr, amountToSwap) => {
         ADDRESS_MAP[toTokenStr],
         amount,
       );
-      console.log("Transaction Hash", tx.hash);
+      window.toastProvider.addMessage(`Swapping debt...`, {
+        secondaryMessage: "Check progress on Etherscan",
+        actionHref: `https://etherscan.io/tx/${tx.hash}`,
+        actionText: "Check",
+        variant: "processing",
+      });
       await tx.wait();
       return;
     }
@@ -46,7 +51,12 @@ const useSwap = (thingToSwap, fromTokenStr, toTokenStr, amountToSwap) => {
       ADDRESS_MAP[toTokenStr],
       amount,
     );
-    console.log("Transaction Hash", tx.hash);
+    window.toastProvider.addMessage(`Swapping collateral...`, {
+      secondaryMessage: "Check progress on Etherscan",
+      actionHref: `https://etherscan.io/tx/${tx.hash}`,
+      actionText: "Check",
+      variant: "processing",
+    });
     setLoading(false);
 
     return tx.wait();