From 66fbf4b3a0b2eb38bfd861045a57f2903b5efb33 Mon Sep 17 00:00:00 2001 From: naturexie <786281870@qq.com> Date: Fri, 17 Jan 2025 17:19:12 +0800 Subject: [PATCH 1/2] feat: contain near + wnear balance as total balance --- screens/Trading/components/ConfirmMobile.tsx | 15 +---- screens/Trading/components/TradingOperate.tsx | 6 +- screens/Trading/components/tokenbox.tsx | 62 +++++++++++-------- screens/Trading/index.tsx | 4 +- store/marginActions/openPosition.ts | 14 ++++- 5 files changed, 58 insertions(+), 43 deletions(-) diff --git a/screens/Trading/components/ConfirmMobile.tsx b/screens/Trading/components/ConfirmMobile.tsx index 71931eeb..2fb27856 100644 --- a/screens/Trading/components/ConfirmMobile.tsx +++ b/screens/Trading/components/ConfirmMobile.tsx @@ -21,6 +21,7 @@ import { showPositionFailure } from "../../../components/HashResultModal"; import { getSymbolById } from "../../../transformers/nearSymbolTrans"; import { IConfirmMobileProps } from "../comInterface"; import { useRegisterTokenType } from "../../../hooks/useRegisterTokenType"; +import { getAccountCategory } from "../../../redux/accountSelectors"; export const ModalContext = createContext(null) as any; const ConfirmMobile: React.FC = ({ @@ -48,7 +49,7 @@ const ConfirmMobile: React.FC = ({ const { max_slippage_rate, min_safety_buffer } = isMainStream ? marginConfigTokens : marginConfigTokensMEME; - + const account = useAppSelector(getAccountCategory(!isMainStream)); const { getAssetDetails, getAssetById, getAssetByIdMEME } = useMarginAccount(); const assetP = isMainStream ? getAssetById( @@ -109,6 +110,7 @@ const ConfirmMobile: React.FC = ({ swap_indication: confirmInfo.estimateData.swap_indication, assets: confirmInfo.assets.data, isMeme: isMemeStream, + account, }; const confirmOpenPosition = async () => { setIsDisabled(true); @@ -131,17 +133,6 @@ const ConfirmMobile: React.FC = ({ const tokenPPrice = confirmInfo.assets.data[openPositionParams.token_p_id].price.usd; const slippageRate = 1 - max_slippage_rate / 10000; const calculatedValue = ((+tokenDAmount * tokenDPrice) / tokenPPrice) * slippageRate; - console.log( - openPositionParams, - decimalsP, - tokenDAmount, - tokenDPrice, - tokenPPrice, - slippageRate, - calculatedValue, - minTokenPAmount, - "for nico confirmOpenPosition", - ); if (minTokenPAmount < calculatedValue) { setIsMinTokenPAmount(true); hasError = true; diff --git a/screens/Trading/components/TradingOperate.tsx b/screens/Trading/components/TradingOperate.tsx index d8ec813f..bb3ed4b1 100644 --- a/screens/Trading/components/TradingOperate.tsx +++ b/screens/Trading/components/TradingOperate.tsx @@ -336,7 +336,7 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => shortInput, ], ); - const setOwnBanlance = (key: string) => { + const setMaxInputBanlance = (key: string) => { if (activeTab === "long") { setLongInput(key); } else { @@ -649,7 +649,7 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => />
= ({ onMobileClose, id }) => />
; type: string; - setOwnBanlance?: (key: string) => void; + setMaxInputBanlance?: (key: string) => void; setForceUpdate?: () => void; isMemeCategory?: boolean; } const TradingToken: React.FC = ({ tokenList, type, - setOwnBanlance, + setMaxInputBanlance, setForceUpdate, isMemeCategory, }) => { @@ -33,30 +35,30 @@ const TradingToken: React.FC = ({ const dispatch = useAppDispatch(); const account = useAppSelector(getAccountCategory(isMemeCategory)); const { ReduxcategoryAssets1, ReduxcategoryAssets2 } = useAppSelector((state) => state.category); - const [ownBalance, setOwnBalance] = useState("-"); - const [ownBalanceDetail, setOwnBalanceDetail] = useState(""); + const [selectedTokenBalance, setSelectedTokenBalance] = useState(""); const [showModal, setShowModal] = useState(false); const accountId = useAppSelector(getAccountId); const [selectedItem, setSelectedItem] = useState( type === "cate1" ? ReduxcategoryAssets1 : ReduxcategoryAssets2, ); + const typeDispatchMap: Record any) | undefined> = { + cate1: setCategoryAssets1, + cate2: setCategoryAssets2, + }; useDebounce( () => { const { selectedAsset, setReduxcategoryCurrentBalance } = getSelectedAssetAndBalanceSetter(); const tokenId = selectedAsset?.metadata["token_id"]; - const balance = account?.balances[tokenId]; if (!tokenId) return; - const { decimals } = selectedAsset.metadata; - const waitUseKey = shrinkToken(balance, decimals); - const formattedBalance = toInternationalCurrencySystem_number(waitUseKey); - setOwnBalance(formattedBalance); - setOwnBalanceDetail(waitUseKey); - setReduxcategoryCurrentBalance && setReduxcategoryCurrentBalance(waitUseKey); + const selectedAssetBalance = getTokenBalance(selectedAsset); + setSelectedTokenBalance(selectedAssetBalance); + setReduxcategoryCurrentBalance && setReduxcategoryCurrentBalance(selectedAssetBalance); setSelectedItem(selectedAsset); }, 300, [type, accountId, account.balances, ReduxcategoryAssets1, ReduxcategoryAssets2], ); + // get selected asset from store and Setter api to store balance of asset const getSelectedAssetAndBalanceSetter = () => { if (type === "cate1" && ReduxcategoryAssets1) { return { @@ -73,21 +75,16 @@ const TradingToken: React.FC = ({ } return { selectedAsset: null, setReduxcategoryCurrentBalance: null }; }; + // click to select a token and dispatch to store const handleTokenClick = (item: any) => { if (!item) return; setSelectedItem(item); - const typeDispatchMap: Record any) | undefined> = { - cate1: setCategoryAssets1, - cate2: setCategoryAssets2, - }; - const dispatchAction = typeDispatchMap[type]; if (dispatchAction) { dispatch(dispatchAction(item)); } else { console.warn(`Unsupported type: ${type}`); } - setForceUpdate && setForceUpdate(); setShowModal(false); }; @@ -104,15 +101,27 @@ const TradingToken: React.FC = ({ }, 200); }; const sendBalance = () => { - if (setOwnBanlance) { - setOwnBanlance(ownBalanceDetail); + if (setMaxInputBanlance) { + setMaxInputBanlance(selectedTokenBalance); } }; + function getTokenBalance(asset: Asset) { + if (asset.token_id == nearTokenId) { + return shrinkToken( + new Decimal(account.balances[asset.metadata.token_id]) + .plus(account.balances["near"]) + .toFixed(0), + asset.metadata.decimals, + ); + } + return shrinkToken(account.balances[asset.metadata.token_id], asset.metadata.decimals); + } return (
+ {/* selected token symbol */}
= ({
{type === "cate2" && }
- + {/* selected token balance */} {type === "cate2" && (
Balance:  - {ownBalance} + + {selectedTokenBalance + ? toInternationalCurrencySystem_number(selectedTokenBalance) + : "-"} +
)} + {/* token list */} {showModal && type === "cate2" && (
= ({

{selectedItem?.metadata?.symbol === token.metadata.symbol && }

- {toInternationalCurrencySystem_number( - shrinkToken(account.balances[token.metadata.token_id], token.metadata.decimals), - )} + {toInternationalCurrencySystem_number(getTokenBalance(token))}

))} diff --git a/screens/Trading/index.tsx b/screens/Trading/index.tsx index cef2d09a..1836429f 100644 --- a/screens/Trading/index.tsx +++ b/screens/Trading/index.tsx @@ -92,7 +92,7 @@ const Trading = () => { setCurrentTokenCate1(ReduxcategoryAssets1); }, [ReduxcategoryAssets1]); - // get selected category 2 + // get or init selected category 2 useEffect(() => { if (id) { if ( @@ -115,6 +115,7 @@ const Trading = () => { const handlePopupToggle = () => { setShowPopup2(!showPopupCate2); }; + // click to select a token and dispatch to store (left top side) const handleTokenSelectCate2 = (item) => { dispatch(setCategoryAssets2(item)); setShowPopup2(false); @@ -393,6 +394,7 @@ const Trading = () => { {id && }
+ {/* for mobile */}
Date: Fri, 17 Jan 2025 19:14:28 +0800 Subject: [PATCH 2/2] feat: adjust wnear icon and symbol --- screens/MarginTrading/components/MarketTrading.tsx | 5 ++--- .../Trading/components/ChangeCollateralMobile.tsx | 4 ++-- screens/Trading/components/tokenbox.tsx | 6 ++++-- screens/Trading/index.tsx | 14 ++------------ transformers/asstets.ts | 3 ++- 5 files changed, 12 insertions(+), 20 deletions(-) diff --git a/screens/MarginTrading/components/MarketTrading.tsx b/screens/MarginTrading/components/MarketTrading.tsx index 6d9dfa2e..225a1324 100644 --- a/screens/MarginTrading/components/MarketTrading.tsx +++ b/screens/MarginTrading/components/MarketTrading.tsx @@ -67,11 +67,10 @@ const MarketMarginTrading = ({ hidden }: { hidden: boolean }) => { const results = await Promise.all(promises); const mergedData: any[] = Object.values(marginConfigList).map((item, index) => { const volumeData: any | undefined = results[index]; - // console.log(volumeData, "volumeData"); return { ...item, - totalVolume: volumeData?.data.total_volume || 0, - volume24h: volumeData?.data["24h_volume"] || 0, + totalVolume: volumeData?.data?.total_volume || 0, + volume24h: volumeData?.data?.["24h_volume"] || 0, }; }); setMergedData(mergedData); diff --git a/screens/Trading/components/ChangeCollateralMobile.tsx b/screens/Trading/components/ChangeCollateralMobile.tsx index 9edcd15d..3c1614ec 100644 --- a/screens/Trading/components/ChangeCollateralMobile.tsx +++ b/screens/Trading/components/ChangeCollateralMobile.tsx @@ -497,7 +497,7 @@ const ChangeCollateralMobile: FC = ({ open, onClose
- +

{symbolC}

@@ -640,7 +640,7 @@ const ChangeCollateralMobile: FC = ({ open, onClose

- +

{symbolC}

diff --git a/screens/Trading/components/tokenbox.tsx b/screens/Trading/components/tokenbox.tsx index fd5cef40..8e56b74e 100644 --- a/screens/Trading/components/tokenbox.tsx +++ b/screens/Trading/components/tokenbox.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import { useDebounce } from "react-use"; +import _ from "lodash"; import Decimal from "decimal.js"; import { NearIcon } from "../../MarginTrading/components/Icon"; import { TokenThinArrow, TokenSelected } from "./TradingIcon"; @@ -106,10 +107,11 @@ const TradingToken: React.FC = ({ } }; function getTokenBalance(asset: Asset) { + if (_.isEmpty(account?.balances)) return ""; if (asset.token_id == nearTokenId) { return shrinkToken( - new Decimal(account.balances[asset.metadata.token_id]) - .plus(account.balances["near"]) + new Decimal(account?.balances?.[asset.metadata.token_id] || 0) + .plus(account?.balances?.["near"] || 0) .toFixed(0), asset.metadata.decimals, ); diff --git a/screens/Trading/index.tsx b/screens/Trading/index.tsx index 1836429f..ad3dce65 100644 --- a/screens/Trading/index.tsx +++ b/screens/Trading/index.tsx @@ -241,12 +241,7 @@ const Trading = () => { onClick={handlePopupToggle} className="flex justify-center items-center" > -

- {currentTokenCate2?.metadata?.symbol || - (isMainStream - ? categoryAssets2[0]?.metadata.symbol - : categoryAssets2MEME[0]?.metadata.symbol)} -

+

{currentTokenCate2?.metadata?.symbol}

{showPopupCate2 && ( @@ -329,12 +324,7 @@ const Trading = () => { onClick={handlePopupToggle} className="flex justify-center items-center" > -

- {currentTokenCate2?.metadata?.symbol || - (isMainStream - ? categoryAssets2[0]?.metadata.symbol - : categoryAssets2MEME[0]?.metadata.symbol)} -

+

{currentTokenCate2?.metadata?.symbol}

{showPopupCate2 && ( diff --git a/transformers/asstets.ts b/transformers/asstets.ts index 8884f7b9..17bc8c3c 100644 --- a/transformers/asstets.ts +++ b/transformers/asstets.ts @@ -19,8 +19,9 @@ export function transformAssets({ asset.config.can_deposit = true; asset.config.can_withdraw = true; } - if (!assetMetadata?.icon && nearNativeTokens.includes(assetMetadata?.token_id)) { + if (nearNativeTokens.includes(assetMetadata?.token_id)) { assetMetadata.icon = nearMetadata.icon; + assetMetadata.symbol = nearMetadata.symbol; } map[asset.token_id] = omit( {