Estimated Network 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
index 8901621e2..af72d3103 100644
--- 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);
}
diff --git a/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx b/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx
index 97d82cc74..c06994662 100644
--- a/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx
+++ b/packages/web/src/containers/select-token-container/SelectTokenContainer.tsx
@@ -49,10 +49,10 @@ const customSortAll = (a: SortedProps, b: SortedProps): number => {
} else {
const priceA = parseFloat(a.price.replace(/,/g, ""));
const priceB = parseFloat(b.price.replace(/,/g, ""));
-
+
if (!isNaN(priceA) && !isNaN(priceB) && priceA < priceB) {
return 1;
- } else if (isNaN(priceA) && isNaN(priceB) ) {
+ } else if (isNaN(priceA) && isNaN(priceB)) {
const numberRegex = /\d+/;
const numberA = numberRegex.test(a.name);
const numberB = numberRegex.test(b.name);
@@ -63,7 +63,7 @@ const customSortAll = (a: SortedProps, b: SortedProps): number => {
} else {
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
}
- } else if (!isNaN(priceA) || isNaN(priceB) ) {
+ } else if (!isNaN(priceA) || isNaN(priceB)) {
if (priceA === 0 && priceB === 0) {
if (a.tokenPrice < b.tokenPrice) {
return 1;
@@ -94,7 +94,14 @@ const SelectTokenContainer: React.FC = ({
modalRef,
}) => {
const { breakpoint } = useWindowSize();
- const { tokens, balances, updateTokens, updateBalances, tokenPrices, displayBalanceMap } = useTokenData();
+ const {
+ tokens,
+ balances,
+ updateTokens,
+ updateBalances,
+ tokenPrices,
+ displayBalanceMap,
+ } = useTokenData();
const [keyword, setKeyword] = useState("");
const clearModal = useClearModal();
const themeKey = useAtomValue(ThemeState.themeKey);
@@ -110,16 +117,15 @@ const SelectTokenContainer: React.FC = ({
setFromSelectToken(true);
changeToken?.(value);
close();
- }
+ },
});
-
+
useEffect(() => {
updateTokens();
}, []);
useEffect(() => {
- if (tokens.length > 0)
- updateBalances();
+ if (tokens.length > 0) updateBalances();
}, [tokens]);
const defaultTokens = useMemo(() => {
@@ -127,7 +133,7 @@ const SelectTokenContainer: React.FC = ({
const sortedTokenList = temp.sort(customSort);
return sortedTokenList.slice(0, 4);
}, [tokens]);
-
+
const filteredTokens = useMemo(() => {
const lowerKeyword = keyword.toLowerCase();
const temp: SortedProps[] = tokens.map((item: TokenModel) => {
@@ -139,28 +145,37 @@ const SelectTokenContainer: React.FC = ({
tokenPrice: tokenPrice || 0,
};
}
- return {...item, price: BigNumber(tokenPrice).multipliedBy(tokenPrices[item?.path]?.usd || "0").toFormat(), tokenPrice: tokenPrice || 0};
+ return {
+ ...item,
+ price: BigNumber(tokenPrice)
+ .multipliedBy(tokenPrices[item?.path]?.usd || "0")
+ .toFormat(),
+ tokenPrice: tokenPrice || 0,
+ };
});
const sortedData = temp.sort(customSortAll);
- return sortedData.filter(token =>
- token.name.toLowerCase().includes(lowerKeyword) ||
- token.symbol.toLowerCase().includes(lowerKeyword) ||
- token.path.toLowerCase().includes(lowerKeyword)
+ return sortedData.filter(
+ token =>
+ token.name.toLowerCase().includes(lowerKeyword) ||
+ token.symbol.toLowerCase().includes(lowerKeyword) ||
+ token.path.toLowerCase().includes(lowerKeyword),
);
}, [keyword, tokens, balances, tokenPrices]);
- console.log(filteredTokens, "filteredTokens");
-
- const selectToken = useCallback((token: TokenModel) => {
- if (!changeToken) {
- return;
- }
- if (token.logoURI) {
- changeToken(token);
- close();
- } else {
- openTradingModal(token);
- }
- }, [changeToken, openTradingModal]);
+
+ const selectToken = useCallback(
+ (token: TokenModel) => {
+ if (!changeToken) {
+ return;
+ }
+ if (token.logoURI) {
+ changeToken(token);
+ close();
+ } else {
+ openTradingModal(token);
+ }
+ },
+ [changeToken, openTradingModal],
+ );
const changeKeyword = useCallback((keyword: string) => {
setKeyword(keyword);
@@ -178,8 +193,7 @@ const SelectTokenContainer: React.FC = ({
}, []);
useEffect(() => {
- if (tokens.length > 0)
- updateBalances();
+ if (tokens.length > 0) updateBalances();
}, [tokens]);
return (
@@ -199,4 +213,4 @@ const SelectTokenContainer: React.FC = ({
);
};
-export default SelectTokenContainer;
\ No newline at end of file
+export default SelectTokenContainer;
diff --git a/packages/web/src/containers/wallet-balance-container/WalletBalanceContainer.tsx b/packages/web/src/containers/wallet-balance-container/WalletBalanceContainer.tsx
index 6b1e669a7..906dd1080 100644
--- a/packages/web/src/containers/wallet-balance-container/WalletBalanceContainer.tsx
+++ b/packages/web/src/containers/wallet-balance-container/WalletBalanceContainer.tsx
@@ -9,8 +9,9 @@ import { useWindowSize } from "@hooks/common/use-window-size";
import { useTokenData } from "@hooks/token/use-token-data";
import { useWallet } from "@hooks/wallet/use-wallet";
import { TokenModel } from "@models/token/token-model";
-import { useQuery } from "@tanstack/react-query";
+import BigNumber from "bignumber.js";
import React, { useCallback, useEffect, useState } from "react";
+import { convertLargePrice } from "@utils/stake-position-utils";
export interface BalanceSummaryInfo {
amount: string;
@@ -75,22 +76,39 @@ const WalletBalanceContainer: React.FC = () => {
const availableBalance: number = Object.keys(displayBalanceMap ?? {})
.map(x => displayBalanceMap[x] ?? 0)
- .reduce((acc: number, cur: number) => acc + cur, 0);
+ .reduce(
+ (acc: number, cur: number) => BigNumber(acc).plus(cur).toNumber(),
+ 0,
+ );
const { stakedBalance, unStakedBalance, claimableRewards } = positions.reduce(
(acc, cur) => {
if (cur.staked) {
- acc.stakedBalance + +cur.stakedUsdValue;
+ acc.stakedBalance = BigNumber(acc.stakedBalance)
+ .plus(cur.stakedUsdValue ?? "0")
+ .toNumber();
} else {
- acc.unStakedBalance + +cur.stakedUsdValue;
+ acc.unStakedBalance = BigNumber(acc.unStakedBalance)
+ .plus(cur.stakedUsdValue ?? "0")
+ .toNumber();
}
- cur.rewards.forEach(x => (acc.claimableRewards += +x.claimableUsdValue));
+ cur.rewards.forEach(x => {
+ acc.claimableRewards = BigNumber(acc.claimableRewards)
+ .plus(x.claimableUsdValue ?? "0")
+ .toNumber();
+ });
return acc;
},
{ stakedBalance: 0, unStakedBalance: 0, claimableRewards: 0 },
);
+ const sumTotalBalance = BigNumber(availableBalance)
+ .plus(unStakedBalance)
+ .plus(stakedBalance)
+ .plus(claimableRewards)
+ .toString();
+
const closeDeposit = () => {
setIsShowDepositModal(false);
};
@@ -114,13 +132,7 @@ const WalletBalanceContainer: React.FC = () => {
void;
+ data?: {
+ [key: string]: string;
+ };
}
export interface INoticeContext {
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
index 4faa32f75..82a8e8638 100644
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "esnext",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -16,24 +20,62 @@
"incremental": true,
"baseUrl": "./",
"paths": {
- "@constants/*": ["src/constants/*"],
- "@containers/*": ["src/containers/*"],
- "@common/*": ["src/common/*"],
- "@components/*": ["src/components/*"],
- "@hooks/*": ["src/hooks/*"],
- "@repositories/*": ["src/repositories/*"],
- "@resources/*": ["src/resources/*"],
- "@utils/*": ["src/utils/*"],
- "@providers/*": ["src/providers/*"],
- "@states/*": ["src/states/*"],
- "@styles/*": ["src/styles/*"],
- "@layouts/*": ["src/layouts/*"],
- "@models/*": ["src/models/*"],
- "@query/*": ["src/react-query/*"],
- "@context/*": ["src/context/*"]
+ "@constants/*": [
+ "src/constants/*"
+ ],
+ "@containers/*": [
+ "src/containers/*"
+ ],
+ "@common/*": [
+ "src/common/*"
+ ],
+ "@components/*": [
+ "src/components/*"
+ ],
+ "@hooks/*": [
+ "src/hooks/*"
+ ],
+ "@repositories/*": [
+ "src/repositories/*"
+ ],
+ "@resources/*": [
+ "src/resources/*"
+ ],
+ "@utils/*": [
+ "src/utils/*"
+ ],
+ "@providers/*": [
+ "src/providers/*"
+ ],
+ "@states/*": [
+ "src/states/*"
+ ],
+ "@styles/*": [
+ "src/styles/*"
+ ],
+ "@layouts/*": [
+ "src/layouts/*"
+ ],
+ "@models/*": [
+ "src/models/*"
+ ],
+ "@query/*": [
+ "src/react-query/*"
+ ],
+ "@context/*": [
+ "src/context/*"
+ ]
},
"jsxImportSource": "@emotion/react"
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest.config.js"],
- "exclude": ["node_modules"]
-}
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "jest.config.js"
+ ],
+ "exclude": [
+ "node_modules"
+ ],
+ "declaration": true
+}
\ No newline at end of file