Hotfix swap estimate (#474)

* fix swap estimate issue * add log * fix swap issue * remove log * fix ui bugs * add link for Top Farm APY --------- Co-authored-by: xieqian <[email protected]>
ref-finance · Feb 6, 2024 · 9e07574 · 9e07574
1 parent 6d44c7a
commit 9e07574
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 53 deletions.
diff --git a/src/components/meme/Overview.tsx b/src/components/meme/Overview.tsx
@@ -40,16 +40,24 @@ const Overview = () => {
     const list = Object.entries(lpSeeds);
     if (!list.length) return [];
     return list.reduce((acc, cur) => {
-      const [, seed] = cur;
+      const [seedId, seed] = cur;
       const apr = getSeedApr(seed);
-      if (!acc[0]) return [seed, apr];
+      if (!acc[0]) return [seed, apr, seedId];
       if (Big(acc[1]).gt(apr)) {
         return acc;
       } else {
-        return [seed, apr];
+        return [seed, apr, seedId];
       }
     }, []);
   }, [lpSeeds]);
+  function goFarmDetail(seed_id: string) {
+    const lpSeed = lpSeeds[seed_id];
+    if (lpSeed.farmList[0].status == 'Ended') {
+      window.open(`/v2farms/${lpSeed.pool.id}-e`);
+    } else {
+      window.open(`/v2farms/${lpSeed.pool.id}-r`);
+    }
+  }
   const is_mobile = isMobile();
   return (
     <>
@@ -81,7 +89,14 @@ const Overview = () => {
               <span className="text-xl gotham_bold text-white">-</span>
             )}
           </TemplateMobile>
-          <TemplateMobile title="Top Farm APY">
+          <TemplateMobile
+            title="Top Farm APY"
+            onClick={() => {
+              if (topApyFarm[0]) {
+                goFarmDetail(topApyFarm[2]);
+              }
+            }}
+          >
             {topApyFarm[0] ? (
               <div className="flex items-center gap-2">
                 <div className="flex items-center">
@@ -130,7 +145,15 @@ const Overview = () => {
               <span className="text-3xl gotham_bold text-white">-</span>
             )}
           </Template>
-          <Template title="Top Farm APY">
+          <Template
+            title="Top Farm APY"
+            className="cursor-pointer"
+            onClick={() => {
+              if (topApyFarm[0]) {
+                goFarmDetail(topApyFarm[2]);
+              }
+            }}
+          >
             {topApyFarm[0] ? (
               <div className="flex items-center gap-2">
                 <div className="flex items-center">
@@ -166,20 +189,24 @@ const Overview = () => {
   );
 };
 
-function Template({ title, children }: any) {
+function Template({ title, children, className, ...props }: any) {
   return (
     <div
-      className="flex flex-grow flex-col items-center justify-center border border-memeBorderColor bg-swapCardGradient rounded-2xl"
+      {...props}
+      className={`flex flex-grow flex-col items-center justify-center border border-memeBorderColor bg-swapCardGradient rounded-2xl ${
+        className ? className : ''
+      }`}
       style={{ height: '110px' }}
     >
       <span className="text-base text-white">{title}</span>
       {children}
     </div>
   );
 }
-function TemplateMobile({ title, children }: any) {
+function TemplateMobile({ title, children, ...props }: any) {
   return (
     <div
+      {...props}
       className="flex flex-grow flex-col justify-center w-full gap-1.5"
       style={{ height: '80px' }}
     >

diff --git a/src/components/meme/SeedsBox.tsx b/src/components/meme/SeedsBox.tsx
@@ -237,45 +237,25 @@ const SeedsBox = () => {
                   <span className="text-xl gotham_bold text-white">
                     {seed.token_meta_data.symbol}
                   </span>
-                  {/* {hasLpSeed ? (
-                    <div
-                      onClick={() => {
-                        goFarmDetail(seed_id);
-                      }}
-                      className="flex items-center border border-memePoolBoxBorderColor gap-2 rounded-lg h-8 px-2 cursor-pointer"
-                    >
-                      <span className="text-xs text-white">
-                        {seed.token_meta_data.symbol}/NEAR
-                      </span>
-                      <ArrowRightIcon />
-                    </div>
-                  ) : (
-                    <div
-                      data-class="reactTip"
-                      data-tooltip-id={`lp_farm_${seed_id}`}
-                      data-place="top"
-                      data-tooltip-html={comeSoonTip()}
-                    >
-                      <div className="flex items-center border border-memePoolBoxBorderColor gap-2 rounded-lg h-8 px-2 opacity-30 cursor-not-allowed">
-                        <span className="text-xs text-white">
-                          {seed.token_meta_data.symbol}/NEAR
-                        </span>
-                        <ArrowRightIcon />
-                      </div>
-                      <CustomTooltip id={`lp_farm_${seed_id}`} />
-                    </div>
-                  )} */}
                   <div
                     data-class="reactTip"
                     data-tooltip-id={`lp_farm_${seed_id}`}
                     data-place="top"
-                    data-tooltip-html={getFarmAPYTip(seed_id)}
+                    data-tooltip-html={
+                      hasLpSeed ? getFarmAPYTip(seed_id) : comeSoonTip()
+                    }
                   >
                     <div
                       onClick={() => {
-                        goFarmDetail(seed_id);
+                        if (hasLpSeed) {
+                          goFarmDetail(seed_id);
+                        }
                       }}
-                      className="flex items-center border border-memePoolBoxBorderColor gap-2 rounded-lg h-8 px-2 cursor-pointer"
+                      className={`flex items-center border border-memePoolBoxBorderColor gap-2 rounded-lg h-8 px-2 ${
+                        hasLpSeed
+                          ? 'cursor-pointer'
+                          : 'opacity-30 cursor-not-allowed'
+                      }`}
                     >
                       <span className="text-xs text-white">
                         {seed.token_meta_data.symbol}/NEAR

diff --git a/src/pages/Orderly/components/AllOrders/index.tsx b/src/pages/Orderly/components/AllOrders/index.tsx
@@ -4389,6 +4389,7 @@ function HistoryOrders({
               hasMore={hasMore}
               dataLength={records}
               loader={null}
+              style={{ overflow: 'static' }}
               scrollableTarget={isMobile() ? null : 'all-orders-body-history'}
             >
               {data.slice(0, records)}

diff --git a/src/pages/Orderly/components/AssetModal/index.tsx b/src/pages/Orderly/components/AssetModal/index.tsx
@@ -51,6 +51,7 @@ import { usePerpData } from '../UserBoardPerp/state';
 import { OrderAsset, useOrderAssets } from './state';
 const configV2 = getConfigV2();
 import CustomTooltip from 'src/components/customTooltip/customTooltip';
+import { index } from 'mathjs';
 
 function getTipAsset() {
   const intl = useIntl();
@@ -756,9 +757,10 @@ export function AssetModal(props: Modal.Props & { curHoldingOut }) {
                 maxHeight: '50vh',
               }}
             >
-              {sortedBalances.map((b: OrderAsset) => {
+              {sortedBalances.map((b: OrderAsset, index) => {
                 return (
                   <AssetLine
+                    key={index}
                     tokenInfo={tokenInfo}
                     {...b}
                     freeCollateral={freeCollateral}
@@ -780,7 +782,13 @@ export function AssetModal(props: Modal.Props & { curHoldingOut }) {
                   scrollableTarget="mobile-asset-body"
                 >
                   {records.map((r) => {
-                    return <RecordLine {...r} tokenInfo={tokenInfo} />;
+                    return (
+                      <RecordLine
+                        key={r.id + index}
+                        {...r}
+                        tokenInfo={tokenInfo}
+                      />
+                    );
                   })}
                 </InfiniteScroll>
               </section>
@@ -794,7 +802,13 @@ export function AssetModal(props: Modal.Props & { curHoldingOut }) {
                   curPage * DEFAULT_PAGE_SIZE
                 )
                 .map((r) => {
-                  return <RecordLine tokenInfo={tokenInfo} {...r} />;
+                  return (
+                    <RecordLine
+                      key={r.id + index + 1}
+                      tokenInfo={tokenInfo}
+                      {...r}
+                    />
+                  );
                 })
             ))}
 

diff --git a/src/pages/pools/DetailsPage.tsx b/src/pages/pools/DetailsPage.tsx
@@ -1434,7 +1434,7 @@ export function RecentTransactions({
     }
   }
 
-  const renderSwapTransactions = swapTransaction.map((tx) => {
+  const renderSwapTransactions = swapTransaction.map((tx, index) => {
     const swapIn = tokens.find((t) => t.id === tx.token_in);
 
     const swapOut = tokens.find((t) => t.id === tx.token_out);
@@ -1465,14 +1465,15 @@ export function RecentTransactions({
     );
     return (
       <tr
+        key={tx.receipt_id + index}
         className={`text-sm lg:grid lg:grid-cols-3 text-primaryText hover:text-white hover:bg-poolRecentHover`}
       >
-        <td className="gap-1 p-4 lg:flex items-center">
-          <span className="col-span-1 text-white" title={swapInAmount}>
+        <td className="gap-1 p-4 lg:flex lg:flex-wrap items-center">
+          <span className="col-span-1 text-white mr-1" title={swapInAmount}>
             {displayInAmount}
           </span>
 
-          <span className="ml-1 text-primaryText">
+          <span className="text-primaryText">
             {toRealSymbol(swapIn.symbol)}
           </span>
         </td>
@@ -1516,7 +1517,7 @@ export function RecentTransactions({
     );
   });
 
-  const renderLiquidityTransactions = liquidityTransactions.map((tx) => {
+  const renderLiquidityTransactions = liquidityTransactions.map((tx, index) => {
     const { amounts } = tx;
     const renderTokens: any[] = [];
     const amountsObj: any[] = JSON.parse(amounts.replace(/\'/g, '"'));
@@ -1539,6 +1540,7 @@ export function RecentTransactions({
 
     return (
       <tr
+        key={tx.receipt_id + index}
         className={`text-sm lg:grid  overflow-hidden lg:grid-cols-${
           tab == 'swap' ? 3 : 5
         } text-primaryText hover:text-white hover:bg-poolRecentHover`}

diff --git a/src/state/swap.tsx b/src/state/swap.tsx
@@ -400,7 +400,7 @@ export const useSwap = ({
 }: SwapOptions) => {
   const [pool, setPool] = useState<Pool>();
   const [canSwap, setCanSwap] = useState<boolean>();
-
+  const [estimateInOut, setEstimateInOut] = useState<string[]>([]);
   const [tokenOutAmount, setTokenOutAmount] = useState<string>('');
   const [swapError, setSwapError] = useState<Error>();
   const [swapsToDo, setSwapsToDo] = useState<EstimateSwapView[]>();
@@ -504,7 +504,6 @@ export const useSwap = ({
                 ),
               new Big(0)
             );
-
             const tokenPriceListForCal = !!tokenPriceList?.NEAR
               ? tokenPriceList
               : (await getTokenPriceListFromCache()).reduce(
@@ -532,6 +531,7 @@ export const useSwap = ({
               scientificNotationToString(expectedOut.toString())
             );
             setSwapsToDo(estimates);
+            setEstimateInOut([tokenInAmount, expectedOut.toString()]);
             setCanSwap(true);
             setQuoteDone(true);
           }
@@ -686,6 +686,7 @@ export const useSwap = ({
     priceImpactValue: scientificNotationToString(
       new Big(priceImpactValue).minus(new Big((avgFee || 0) / 100)).toString()
     ),
+    estimateInOut,
   };
 };
 export const useSwapV3 = ({
@@ -1499,7 +1500,7 @@ export const useRefSwap = ({
 }: SwapOptions): ExchangeEstimate => {
   const {
     canSwap,
-    tokenOutAmount,
+    // tokenOutAmount,
     minAmountOut,
     swapError,
     makeSwap: makeSwapV1,
@@ -1508,6 +1509,7 @@ export const useRefSwap = ({
     quoteDone,
     priceImpactValue,
     tokenInAmount: tokenInAmountV1,
+    estimateInOut,
   } = useSwap({
     tokenIn,
     tokenInAmount,
@@ -1523,6 +1525,7 @@ export const useRefSwap = ({
     reEstimateTrigger,
     supportLedger,
   });
+  const [estimateInAmount, tokenOutAmount] = estimateInOut;
 
   const {
     makeSwap: makeSwapV2,
@@ -1548,8 +1551,10 @@ export const useRefSwap = ({
     reEstimateTrigger,
   });
 
-  const quoteDoneRef = quoteDoneV2 && quoteDone;
-
+  const quoteDoneRef =
+    quoteDoneV2 &&
+    quoteDone &&
+    Big(estimateInAmount || 0).eq(tokenInAmount || 0);
   if (!quoteDoneRef)
     return {
       quoteDone: false,
@@ -1560,7 +1565,6 @@ export const useRefSwap = ({
       market: 'ref',
       tokenOutAmount: '0',
     };
-
   const bestSwap =
     new Big(tokenOutAmountV2 || '0').gte(tokenOutAmount || '0') &&
     canSwapV2 &&