GSM-471 add enter all amount avalidate for withdraw modal

gnoswap-labs · Dec 20, 2023 · ce2b8ff · ce2b8ff
1 parent 4ed8373
commit ce2b8ff
Show file tree

Hide file tree

Showing 11 changed files with 263 additions and 96 deletions.
diff --git a/packages/web/src/components/common/notice/NoticeToast.tsx b/packages/web/src/components/common/notice/NoticeToast.tsx
@@ -16,6 +16,9 @@ interface NoticeProps {
   onClose?: (id: number) => void;
   type: TNoticeType;
   id: number;
+  data?: {
+    [key: string]: string;
+  };
 }
 
 const TEMP_URL =
@@ -36,6 +39,24 @@ const SuccessContent: FC = () => {
   );
 };
 
+const SuccessNormalContent: FC<{ title: string; description?: string }> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="notice-body">
+      <IconSuccess className="icon-success" />
+      <div>
+        <h5>{title}</h5>
+        {description && <p>{description}</p>}
+        <a href={TEMP_URL} target="_blank">
+          View transaction <IconNewTab />
+        </a>
+      </div>
+    </div>
+  );
+};
+
 const PendingContent: FC = () => {
   return (
     <div className="notice-body">
@@ -66,7 +87,30 @@ const FailContent: FC = () => {
   );
 };
 
-const NoticeUIItem: FC<NoticeProps> = ({ onClose, type = "success", id }) => {
+const FailNormalContent: FC<{ title: string; description?: string }> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="notice-body">
+      <IconFailed className="icon-success" />
+      <div>
+        <h5>{title}</h5>
+        {description && <p>{description}</p>}
+        <a href={TEMP_URL} target="_blank">
+          View transaction <IconNewTab />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+const NoticeUIItem: FC<NoticeProps> = ({
+  onClose,
+  type = "success",
+  id,
+  data,
+}) => {
   const [typeAnimation, setTypeAnimation] = useState<
     "toast-item" | "closing" | ""
   >("toast-item");
@@ -97,7 +141,15 @@ const NoticeUIItem: FC<NoticeProps> = ({ onClose, type = "success", id }) => {
   return (
     <NoticeUIWrapper className={`${typeAnimation}`}>
       {type === "success" && <SuccessContent />}
+      {type === "withdraw-success" && (
+        <SuccessNormalContent title="Withdraw - Success!" {...data} />
+      )}
+
       {type === "error" && <FailContent />}
+      {type === "withdraw-error" && (
+        <FailNormalContent title="Withdraw - Failure!" {...data} />
+      )}
+
       {type === "pending" && <PendingContent />}
       <div className="icon-close" onClick={handleClose}>
         <IconClose />
@@ -117,7 +169,14 @@ const Notice: FC<{ children: React.ReactNode }> = ({ children }) => {
       setCurrentNotice({
         ...options,
       });
-      setList(prev => [...prev, { type: options.type, id: options.id }]);
+      setList(prev => [
+        ...prev,
+        {
+          ...options,
+          type: options.type,
+          id: options.id,
+        },
+      ]);
     },
     [list],
   );
@@ -161,12 +220,7 @@ const Notice: FC<{ children: React.ReactNode }> = ({ children }) => {
         <NoticeUIList>
           {list.map(item_ => {
             return (
-              <NoticeUIItem
-                key={item_.id}
-                type={item_.type}
-                id={item_.id}
-                onClose={handleClose}
-              />
+              <NoticeUIItem {...item_} key={item_.id} onClose={handleClose} />
             );
           })}
         </NoticeUIList>

diff --git a/packages/web/src/components/wallet/deposit-modal/DepositModal.styles.ts b/packages/web/src/components/wallet/deposit-modal/DepositModal.styles.ts
@@ -168,7 +168,7 @@ export const DepositLabel = styled.div`
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
-      color: ${({ theme }) => theme.color.text05};
+      color: ${({ theme }) => theme.color.text10};
     }
 
     path {

diff --git a/packages/web/src/components/wallet/wallet-balance-detail-info/WalletBalanceDetailInfo.tsx b/packages/web/src/components/wallet/wallet-balance-detail-info/WalletBalanceDetailInfo.tsx
@@ -4,6 +4,7 @@ import {
   SHAPE_TYPES,
   skeletonBalanceDetail,
 } from "@constants/skeleton.constant";
+import { convertLargePrice } from "@utils/stake-position-utils";
 import React from "react";
 import {
   WalletBalanceDetailInfoTooltipContent,
@@ -44,12 +45,7 @@ const WalletBalanceDetailInfo: React.FC<WalletBalanceDetailInfoProps> = ({
               />
             </div>
           ) : (
-            <span className="value">
-              $
-              {Number(value).toLocaleString("en-US", {
-                maximumFractionDigits: 2,
-              })}
-            </span>
+            <span className="value">${convertLargePrice(value, 2)}</span>
           )
         ) : (
           <span className="value">$0</span>

diff --git a/packages/web/src/components/wallet/wallet-balance-detail/WalletBalanceDetail.tsx b/packages/web/src/components/wallet/wallet-balance-detail/WalletBalanceDetail.tsx
@@ -12,6 +12,7 @@ import {
   SHAPE_TYPES,
   skeletonBalanceDetail,
 } from "@constants/skeleton.constant";
+import { convertLargePrice } from "@utils/stake-position-utils";
 
 interface WalletBalanceDetailProps {
   balanceDetailInfo: BalanceDetailInfo;
@@ -72,13 +73,7 @@ const WalletBalanceDetail: React.FC<WalletBalanceDetailProps> = ({
                 </div>
               ) : (
                 <span className="value">
-                  $
-                  {Number(balanceDetailInfo.claimableRewards).toLocaleString(
-                    "en-US",
-                    {
-                      maximumFractionDigits: 2,
-                    },
-                  )}
+                  ${convertLargePrice(balanceDetailInfo.claimableRewards, 2)}
                 </span>
               )
             ) : (

diff --git a/packages/web/src/components/wallet/withdraw-modal/WithDrawModal.styles.ts b/packages/web/src/components/wallet/withdraw-modal/WithDrawModal.styles.ts
@@ -102,7 +102,7 @@ export const WithdrawContent = styled.div`
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
-      color: ${({ theme }) => theme.color.text05};
+      color: ${({ theme }) => theme.color.text10};
     }
 
     path {
@@ -113,7 +113,7 @@ export const WithdrawContent = styled.div`
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
-    color: ${({ theme }) => theme.color.text05};
+    color: ${({ theme }) => theme.color.text10};
     margin-bottom: 8px;
   }
 
@@ -147,6 +147,11 @@ export const WithdrawContent = styled.div`
       font-style: normal;
       font-weight: 500;
       line-height: 130%;
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
     }
 
     .approximately {
@@ -172,11 +177,28 @@ export const WithdrawContent = styled.div`
     }
   }
 
+  .estimate-box {
+    ${mixins.flexbox("row", "center", "space-between")};
+    flex-wrap: wrap;
+
+    width: 100%;
+    padding: 15px;
+    height: 60px;
+
+    background-color: ${({ theme }) => theme.color.background01};
+    border: 1px solid ${({ theme }) => theme.color.border02};
+    border-radius: 8px;
+    ${media.mobile} {
+      padding: 11px;
+    }
+  }
+
   .withdraw-address {
     width: 100%;
     .address-input {
       color: ${({ theme }) => theme.color.text01};
       width: 100%;
+      font-size: 14px;
       
       ::placeholder {
         color: ${({ theme }) => theme.color.text04};
@@ -233,6 +255,10 @@ export const WithdrawContent = styled.div`
       ${fonts.p2}
     }
   }
+
+  .balance-text {
+    cursor: pointer;
+  }
 `;
 
 export const BoxFromTo = styled.div`

diff --git a/packages/web/src/components/wallet/withdraw-modal/WithDrawModal.tsx b/packages/web/src/components/wallet/withdraw-modal/WithDrawModal.tsx
@@ -111,7 +111,7 @@ const WithDrawModal: React.FC<Props> = ({
         fromAddress: account?.address,
         toAddress: address,
         token: withdrawInfo,
-        tokenAmount: Number(amount),
+        tokenAmount: BigNumber(amount).multipliedBy(1000000).toNumber(),
       },
       withdrawInfo.type,
     );
@@ -141,6 +141,12 @@ const WithDrawModal: React.FC<Props> = ({
   const currentAvailableBalance =
     displayBalanceMap?.[withdrawInfo?.path ?? ""] ?? null;
 
+  const handleEnterAllBalanceAvailable = () => {
+    if (currentAvailableBalance) {
+      setAmount(`${currentAvailableBalance}`);
+    }
+  };
+
   if (isConfirm) {
     return <WithdrawStatus withdrawResult={result} close={onCancelConfirm} />;
   }
@@ -179,9 +185,14 @@ const WithDrawModal: React.FC<Props> = ({
                   <span className="price-text">
                     {!Number(amount) ? "-" : `$${amount}`}
                   </span>
-                  <span className="balance-text">{`Available: ${
+                  <span
+                    className="balance-text"
+                    onClick={handleEnterAllBalanceAvailable}
+                  >{`Available: ${
                     currentAvailableBalance
-                      ? BigNumber(currentAvailableBalance).toFormat()
+                      ? BigNumber(currentAvailableBalance)
+                          .decimalPlaces(2)
+                          .toFormat()
                       : "-"
                   }`}</span>
                 </div>
@@ -252,7 +263,7 @@ const WithDrawModal: React.FC<Props> = ({
             </BoxDescription>
 
             <WithdrawContent>
-              <div className="withdraw">
+              <div className="estimate-box">
                 <p className="estimate-fee">Estimated Network Fee</p>
                 <p className="tokens-fee">{`${estimateFee} GNOT${
                   estimateFeeUSD !== 0 ? ` ($${estimateFeeUSD})` : ""

diff --git a/packages/web/src/components/wallet/withdraw-modal/useWithdrawTokens.tsx b/packages/web/src/components/wallet/withdraw-modal/useWithdrawTokens.tsx
@@ -7,6 +7,7 @@ import {
 import { makeRandomId, parseJson } from "@utils/common";
 import { useState } from "react";
 import { TNoticeType } from "@context/NoticeContext";
+import BigNumber from "bignumber.js";
 
 type Request = TransferGRC20TokenRequest | TransferNativeTokenRequest;
 export type WithdrawResponse = {
@@ -27,6 +28,13 @@ const useWithdrawTokens = () => {
   const onSubmit = async (request: Request, type: "native" | "grc20") => {
     setLoading(true);
 
+    const descriptionFail = `Failed to Send ${BigNumber(
+      request?.tokenAmount,
+    ).div(1000000)} ${request?.token?.symbol}`;
+    const descriptionSuccess = `Sent ${BigNumber(request?.tokenAmount).div(
+      1000000,
+    )} ${request?.token?.symbol}`;
+
     const callAction =
       type === "native"
         ? walletRepository.transferGNOTToken(request)
@@ -47,16 +55,20 @@ const useWithdrawTokens = () => {
         setTimeout(() => {
           setNotice(null, {
             timeout: 50000,
-            type: "success" as TNoticeType,
+            type: "withdraw-success" as TNoticeType,
             closeable: true,
             id: makeRandomId(),
+            data: {
+              description: descriptionSuccess,
+            },
           });
         }, 1000);
       })
       .catch((error: Error) => {
         const { code } = parseJson(error?.message);
+        const isSuccess = code === 0;
         setResult({
-          success: code === 0 ? true : false,
+          success: isSuccess,
           code,
         });
         if (code !== 4000) {
@@ -69,12 +81,14 @@ const useWithdrawTokens = () => {
           setTimeout(() => {
             setNotice(null, {
               timeout: 50000,
-              type:
-                code === 0
-                  ? ("success" as TNoticeType)
-                  : ("error" as TNoticeType),
+              type: isSuccess
+                ? ("withdraw-success" as TNoticeType)
+                : ("withdraw-error" as TNoticeType),
               closeable: true,
               id: makeRandomId(),
+              data: {
+                description: isSuccess ? descriptionSuccess : descriptionFail,
+              },
             });
           }, 1000);
         }