Merge branch 'add-memeContract' into add-memeContract-btcWallet

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);

screens/Trading/components/ChangeCollateralMobile.tsx

@@ -497,7 +497,7 @@ const ChangeCollateralMobile: FC<ChangeCollateralMobileProps> = ({ open, onClose
                     </div>
                     <div>
                       <div className="flex items-center justify-end">
-                        <img src={iconC} alt="" className="w-4 h-4" />
+                        <img src={iconC} alt="" className="w-4 h-4 rounded-full" />
                         <p className="text-base ml-1">{symbolC}</p>
                       </div>
                       <p className="text-xs text-gray-300 mt-1.5">
@@ -640,7 +640,7 @@ const ChangeCollateralMobile: FC<ChangeCollateralMobileProps> = ({ open, onClose
                     </div>
                     <div>
                       <div className="flex items-center justify-end">
-                        <img src={iconC} alt="" className="w-4 h-4" />
+                        <img src={iconC} alt="" className="w-4 h-4 rounded-full" />
                         <p className="text-base ml-1">{symbolC}</p>
                       </div>
                       <p className="text-xs text-gray-300 mt-1.5">

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<IConfirmMobileProps | any> = ({
@@ -48,7 +49,7 @@ const ConfirmMobile: React.FC<IConfirmMobileProps | any> = ({
   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<IConfirmMobileProps | any> = ({
     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<IConfirmMobileProps | any> = ({
       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;

screens/Trading/components/TradingOperate.tsx

@@ -336,7 +336,7 @@ const TradingOperate: React.FC<TradingOperateProps> = ({ 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<TradingOperateProps> = ({ onMobileClose, id }) =>
             />
             <div className="absolute top-2 right-2">
               <TradingToken
-                setOwnBanlance={setOwnBanlance}
+                setMaxInputBanlance={setMaxInputBanlance}
                 tokenList={isMainStream ? categoryAssets2 : categoryAssets2MEME}
                 type="cate2"
                 isMemeCategory={!isMainStream}
@@ -787,7 +787,7 @@ const TradingOperate: React.FC<TradingOperateProps> = ({ onMobileClose, id }) =>
             />
             <div className="absolute top-2 right-2">
               <TradingToken
-                setOwnBanlance={setOwnBanlance}
+                setMaxInputBanlance={setMaxInputBanlance}
                 tokenList={isMainStream ? categoryAssets2 : categoryAssets2MEME}
                 type="cate2"
                 isMemeCategory={!isMainStream}

screens/Trading/components/tokenbox.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useContext, useEffect } from "react";
+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";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
@@ -14,49 +16,50 @@ import { shrinkToken } from "../../../store";
 import { toInternationalCurrencySystem_number } from "../../../utils/uiNumber";
 import { getSymbolById } from "../../../transformers/nearSymbolTrans";
 import { nearTokenId } from "../../../utils";
+import { Asset } from "../../../redux/assetState";
 
 interface TradingTokenInter {
   tokenList: Array<any>;
   type: string;
-  setOwnBanlance?: (key: string) => void;
+  setMaxInputBanlance?: (key: string) => void;
   setForceUpdate?: () => void;
   isMemeCategory?: boolean;
 }
 const TradingToken: React.FC<TradingTokenInter> = ({
   tokenList,
   type,
-  setOwnBanlance,
+  setMaxInputBanlance,
   setForceUpdate,
   isMemeCategory,
 }) => {
   let timer: NodeJS.Timeout;
   const dispatch = useAppDispatch();
   const account = useAppSelector(getAccountCategory(isMemeCategory));
   const { ReduxcategoryAssets1, ReduxcategoryAssets2 } = useAppSelector((state) => state.category);
-  const [ownBalance, setOwnBalance] = useState<string>("-");
-  const [ownBalanceDetail, setOwnBalanceDetail] = useState<string>("");
+  const [selectedTokenBalance, setSelectedTokenBalance] = useState<string>("");
   const [showModal, setShowModal] = useState<boolean>(false);
   const accountId = useAppSelector(getAccountId);
   const [selectedItem, setSelectedItem] = useState<any>(
     type === "cate1" ? ReduxcategoryAssets1 : ReduxcategoryAssets2,
   );
+  const typeDispatchMap: Record<string, ((item: any) => 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 +76,16 @@ const TradingToken: React.FC<TradingTokenInter> = ({
     }
     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<string, ((item: any) => 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 +102,28 @@ const TradingToken: React.FC<TradingTokenInter> = ({
     }, 200);
   };
   const sendBalance = () => {
-    if (setOwnBanlance) {
-      setOwnBanlance(ownBalanceDetail);
+    if (setMaxInputBanlance) {
+      setMaxInputBanlance(selectedTokenBalance);
     }
   };
+  function getTokenBalance(asset: Asset) {
+    if (_.isEmpty(account?.balances)) return "";
+    if (asset.token_id == nearTokenId) {
+      return shrinkToken(
+        new Decimal(account?.balances?.[asset.metadata.token_id] || 0)
+          .plus(account?.balances?.["near"] || 0)
+          .toFixed(0),
+        asset.metadata.decimals,
+      );
+    }
+    return shrinkToken(account.balances[asset.metadata.token_id], asset.metadata.decimals);
+  }
   return (
     <div
       className={`relative ${type === "cate2" ? "cursor-pointer" : "cursor-default"} w-fit`}
       onMouseLeave={handleMouseLeave}
     >
+      {/* selected token symbol */}
       <div
         className={`flex items-center justify-end ${
           type === "cate2" ? "hover:bg-gray-1250" : ""
@@ -136,13 +147,18 @@ const TradingToken: React.FC<TradingTokenInter> = ({
         </div>
         {type === "cate2" && <TokenThinArrow />}
       </div>
-
+      {/* selected token balance */}
       {type === "cate2" && (
         <div onClick={sendBalance} className="text-xs flex justify-end text-gray-300">
           Balance:&nbsp;
-          <span className="text-white border-b border-dark-800">{ownBalance}</span>
+          <span className="text-white border-b border-dark-800">
+            {selectedTokenBalance
+              ? toInternationalCurrencySystem_number(selectedTokenBalance)
+              : "-"}
+          </span>
         </div>
       )}
+      {/* token list */}
       {showModal && type === "cate2" && (
         <div
           className="absolute top-10 right-0 py-1.5 bg-dark-250 border border-dark-500 rounded-md z-80 w-52"
@@ -165,9 +181,7 @@ const TradingToken: React.FC<TradingTokenInter> = ({
               </p>
               {selectedItem?.metadata?.symbol === token.metadata.symbol && <TokenSelected />}
               <p className="ml-auto text-sm">
-                {toInternationalCurrencySystem_number(
-                  shrinkToken(account.balances[token.metadata.token_id], token.metadata.decimals),
-                )}
+                {toInternationalCurrencySystem_number(getTokenBalance(token))}
               </p>
             </div>
           ))}

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);
@@ -240,12 +241,7 @@ const Trading = () => {
                         onClick={handlePopupToggle}
                         className="flex justify-center items-center"
                       >
-                        <p className="mr-1">
-                          {currentTokenCate2?.metadata?.symbol ||
-                            (isMainStream
-                              ? categoryAssets2[0]?.metadata.symbol
-                              : categoryAssets2MEME[0]?.metadata.symbol)}
-                        </p>
+                        <p className="mr-1">{currentTokenCate2?.metadata?.symbol}</p>
                         <TokenArrow />
                       </div>
                       {showPopupCate2 && (
@@ -328,12 +324,7 @@ const Trading = () => {
                             onClick={handlePopupToggle}
                             className="flex justify-center items-center"
                           >
-                            <p className="mr-1">
-                              {currentTokenCate2?.metadata?.symbol ||
-                                (isMainStream
-                                  ? categoryAssets2[0]?.metadata.symbol
-                                  : categoryAssets2MEME[0]?.metadata.symbol)}
-                            </p>
+                            <p className="mr-1">{currentTokenCate2?.metadata?.symbol}</p>
                             <TokenArrow />
                           </div>
                           {showPopupCate2 && (
@@ -393,6 +384,7 @@ const Trading = () => {
               {id && <TradingOperate id={id} />}
             </div>
           </div>
+          {/* for mobile */}
           <div className="lg:hidden fixed bottom-0 left-0 right-0 w-full h-[116px] rounded-t-[8px] px-[26px] flex flex-col justify-center items-center bg-[#383A56] z-[12]">
             <div
               className="w-full flex items-center justify-center h-[46px] bg-primary rounded-[6px] text-[#14162B] text-base font-bold"

store/marginActions/openPosition.ts

@@ -1,4 +1,5 @@
 import BN from "bn.js";
+import Decimal from "decimal.js";
 import { getBurrow, nearTokenId } from "../../utils";
 import { expandTokenDecimal } from "../helper";
 import {
@@ -12,6 +13,7 @@ import { prepareAndExecuteTransactions } from "../tokens";
 import { Assets } from "../../redux/assetState";
 import getConfig from "../../api/get-config";
 import getMemeConfig from "../../api/get-config-meme";
+import type { AccountState } from "../../redux/accountState";
 
 export async function openPosition({
   token_c_id,
@@ -22,6 +24,7 @@ export async function openPosition({
   min_token_p_amount,
   swap_indication,
   assets,
+  account,
   isMeme,
 }: {
   token_c_id: string;
@@ -32,6 +35,7 @@ export async function openPosition({
   min_token_p_amount: string;
   swap_indication: any;
   assets: Assets;
+  account: AccountState;
   isMeme?: boolean;
 }) {
   const { logicContract, oracleContract, memeOracleContract, logicMEMEContract } =
@@ -57,15 +61,21 @@ export async function openPosition({
   const expanded_d_amount = token_d_amount;
   const transactions: Transaction[] = [];
   const logicContractId = isMeme ? logicMEMEContract.contractId : logicContract.contractId;
+  let toWrapAmount = new Decimal(0);
+  if (isNEAR) {
+    const wrap_near_balance = account.balances[nearTokenId];
+    // const near_balance = account.balances["near"];
+    toWrapAmount = expanded_token_c_amount.minus(wrap_near_balance);
+  }
   transactions.push({
     receiverId: token_c_id,
     functionCalls: [
-      ...(isNEAR
+      ...(isNEAR && toWrapAmount.gt(0)
         ? [
             {
               methodName: ChangeMethodsNearToken[ChangeMethodsNearToken.near_deposit],
               gas: new BN("100000000000000"),
-              attachedDeposit: new BN(expanded_token_c_amount.toFixed(0, 2)),
+              attachedDeposit: new BN(toWrapAmount.toFixed(0, Decimal.ROUND_CEIL)), // up
             },
           ]
         : []),

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(
       {