feat: enable Trade on mainnet (#5564)

* feat: enable Trade on BSC mainnet

* fix: incorrectly named API params

* feat: update doc URL

* feat: add ad banner

* fix: chart resizing

Author: therealemjy

.changeset/happy-maps-lead.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+enable Trade on BSC mainnet

apps/evm/src/clients/api/queries/getAccountTransactionHistory/__tests__/index.spec.ts

@@ -16,27 +16,49 @@ const fakeInput = {
   page: 1,
 };
 
-const fakeTradeFields = {
-  tradePositionAccountAddress: null,
-  tradeLongVTokenAddress: null,
-  tradeShortVTokenAddress: null,
-  tradeDsaVTokenAddress: null,
-  tradeCycleId: null,
-  tradeEffectiveLeverageRatio: null,
-  tradeInitialPrincipalMantissa: null,
-  tradePrincipalAmountMantissa: null,
-  tradeNewTotalPrincipalMantissa: null,
-  tradeRemainingPrincipalMantissa: null,
-  tradeShortAmountMantissa: null,
-  tradeLongAmountMantissa: null,
-  tradeAdditionalPrincipalMantissa: null,
-  tradeCloseFractionBps: null,
-  tradeAmountRepaidMantissa: null,
-  tradeAmountRedeemedMantissa: null,
-  tradeAmountRedeemedDsaMantissa: null,
-  tradeLongDustRedeemedMantissa: null,
-  tradeAmountConvertedToProfitMantissa: null,
-  tradeDsaProfitAmountMantissa: null,
+const fakeYieldPlusFields: Pick<
+  ApiAccountHistoricalTransaction,
+  | 'yieldPlusPositionAccountAddress'
+  | 'yieldPlusLongVTokenAddress'
+  | 'yieldPlusShortVTokenAddress'
+  | 'yieldPlusDsaVTokenAddress'
+  | 'yieldPlusCycleId'
+  | 'yieldPlusEffectiveLeverageRatio'
+  | 'yieldPlusInitialPrincipalMantissa'
+  | 'yieldPlusPrincipalAmountMantissa'
+  | 'yieldPlusNewTotalPrincipalMantissa'
+  | 'yieldPlusRemainingPrincipalMantissa'
+  | 'yieldPlusShortAmountMantissa'
+  | 'yieldPlusLongAmountMantissa'
+  | 'yieldPlusAdditionalPrincipalMantissa'
+  | 'yieldPlusCloseFractionBps'
+  | 'yieldPlusAmountRepaidMantissa'
+  | 'yieldPlusAmountRedeemedMantissa'
+  | 'yieldPlusAmountRedeemedDsaMantissa'
+  | 'yieldPlusLongDustRedeemedMantissa'
+  | 'yieldPlusAmountConvertedToProfitMantissa'
+  | 'yieldPlusDsaProfitAmountMantissa'
+> = {
+  yieldPlusPositionAccountAddress: null,
+  yieldPlusLongVTokenAddress: null,
+  yieldPlusShortVTokenAddress: null,
+  yieldPlusDsaVTokenAddress: null,
+  yieldPlusCycleId: null,
+  yieldPlusEffectiveLeverageRatio: null,
+  yieldPlusInitialPrincipalMantissa: null,
+  yieldPlusPrincipalAmountMantissa: null,
+  yieldPlusNewTotalPrincipalMantissa: null,
+  yieldPlusRemainingPrincipalMantissa: null,
+  yieldPlusShortAmountMantissa: null,
+  yieldPlusLongAmountMantissa: null,
+  yieldPlusAdditionalPrincipalMantissa: null,
+  yieldPlusCloseFractionBps: null,
+  yieldPlusAmountRepaidMantissa: null,
+  yieldPlusAmountRedeemedMantissa: null,
+  yieldPlusAmountRedeemedDsaMantissa: null,
+  yieldPlusLongDustRedeemedMantissa: null,
+  yieldPlusAmountConvertedToProfitMantissa: null,
+  yieldPlusDsaProfitAmountMantissa: null,
 };
 
 describe('getAccountTransactionHistory', () => {
@@ -57,7 +79,7 @@ describe('getAccountTransactionHistory', () => {
           chainId: ChainId.BSC_TESTNET,
           underlyingAddress: '0xa11c8d9dc9b66e209ef60f0c8d969d3Cd988782c',
           underlyingTokenPriceMantissa: '1000130000000000000',
-          ...fakeTradeFields,
+          ...fakeYieldPlusFields,
         },
         {
           id: 'b0435b135762a7ca2ad7dccb9aa6c7f50237c6139b16a76348d6c64dfece110e-119-56',
@@ -73,7 +95,7 @@ describe('getAccountTransactionHistory', () => {
           chainId: ChainId.BSC_TESTNET,
           underlyingAddress: '0xa11c8d9dc9b66e209ef60f0c8d969d3Cd988782c',
           underlyingTokenPriceMantissa: '1000391740000000000',
-          ...fakeTradeFields,
+          ...fakeYieldPlusFields,
         },
       ];
 
@@ -137,7 +159,7 @@ describe('getAccountTransactionHistory', () => {
             chainId: ChainId.BSC_TESTNET,
             underlyingAddress: '0xa11c8d9dc9b66e209ef60f0c8d969d3Cd988782c',
             underlyingTokenPriceMantissa: null,
-            ...fakeTradeFields,
+            ...fakeYieldPlusFields,
           },
           {
             id: 'borrow',
@@ -153,7 +175,7 @@ describe('getAccountTransactionHistory', () => {
             chainId: ChainId.BSC_TESTNET,
             underlyingAddress: '0xa11c8d9dc9b66e209ef60f0c8d969d3Cd988782c',
             underlyingTokenPriceMantissa: '1000130000000000000',
-            ...fakeTradeFields,
+            ...fakeYieldPlusFields,
           },
         ] satisfies ApiAccountHistoricalTransaction[],
       },

apps/evm/src/clients/api/queries/getAccountTransactionHistory/formatApiTransaction/formatToTradeTransaction/index.ts

@@ -20,102 +20,118 @@ export const formatToTradeTransaction = ({
     accountAddress,
     contractAddress,
     chainId,
-    tradeLongVTokenAddress,
-    tradeShortVTokenAddress,
-    tradeDsaVTokenAddress,
-    tradePrincipalAmountMantissa,
-    tradeShortAmountMantissa,
-    tradeLongAmountMantissa,
-    tradeAmountRepaidMantissa,
-    tradeAmountRedeemedMantissa,
-    tradeAmountRedeemedDsaMantissa,
-    tradeDsaProfitAmountMantissa,
-    tradeCycleId,
+    yieldPlusLongVTokenAddress,
+    yieldPlusShortVTokenAddress,
+    yieldPlusDsaVTokenAddress,
+    yieldPlusPrincipalAmountMantissa,
+    yieldPlusShortAmountMantissa,
+    yieldPlusLongAmountMantissa,
+    yieldPlusAmountRepaidMantissa,
+    yieldPlusAmountRedeemedMantissa,
+    yieldPlusAmountRedeemedDsaMantissa,
+    yieldPlusDsaProfitAmountMantissa,
+    yieldPlusCycleId,
   } = apiTransaction;
 
   const amounts: TxAmount[] = [];
 
-  const dsaPoolAsset = tradeDsaVTokenAddress
-    ? vTokenAssetMapping[tradeDsaVTokenAddress.toLowerCase() as Address]
+  const dsaPoolAsset = yieldPlusDsaVTokenAddress
+    ? vTokenAssetMapping[yieldPlusDsaVTokenAddress.toLowerCase() as Address]
     : undefined;
 
-  const shortPoolAsset = tradeShortVTokenAddress
-    ? vTokenAssetMapping[tradeShortVTokenAddress.toLowerCase() as Address]
+  const shortPoolAsset = yieldPlusShortVTokenAddress
+    ? vTokenAssetMapping[yieldPlusShortVTokenAddress.toLowerCase() as Address]
     : undefined;
 
-  const longPoolAsset = tradeLongVTokenAddress
-    ? vTokenAssetMapping[tradeLongVTokenAddress.toLowerCase() as Address]
+  const longPoolAsset = yieldPlusLongVTokenAddress
+    ? vTokenAssetMapping[yieldPlusLongVTokenAddress.toLowerCase() as Address]
     : undefined;
 
-  if (tradePrincipalAmountMantissa && Number(tradePrincipalAmountMantissa) > 0 && dsaPoolAsset) {
+  if (
+    yieldPlusPrincipalAmountMantissa &&
+    Number(yieldPlusPrincipalAmountMantissa) > 0 &&
+    dsaPoolAsset
+  ) {
     amounts.push(
       formatToAmount({
         asset: dsaPoolAsset,
-        amountMantissa: tradePrincipalAmountMantissa,
+        amountMantissa: yieldPlusPrincipalAmountMantissa,
       }),
     );
   }
 
   if (
-    tradeAmountRedeemedDsaMantissa &&
-    Number(tradeAmountRedeemedDsaMantissa) > 0 &&
+    yieldPlusAmountRedeemedDsaMantissa &&
+    Number(yieldPlusAmountRedeemedDsaMantissa) > 0 &&
     dsaPoolAsset
   ) {
     amounts.push(
       formatToAmount({
         asset: dsaPoolAsset,
-        amountMantissa: BigInt(tradeAmountRedeemedDsaMantissa) * -1n,
+        amountMantissa: BigInt(yieldPlusAmountRedeemedDsaMantissa) * -1n,
       }),
     );
   }
 
-  if (tradeDsaProfitAmountMantissa && Number(tradeDsaProfitAmountMantissa) > 0 && dsaPoolAsset) {
+  if (
+    yieldPlusDsaProfitAmountMantissa &&
+    Number(yieldPlusDsaProfitAmountMantissa) > 0 &&
+    dsaPoolAsset
+  ) {
     amounts.push(
       formatToAmount({
         asset: dsaPoolAsset,
-        amountMantissa: tradeDsaProfitAmountMantissa,
+        amountMantissa: yieldPlusDsaProfitAmountMantissa,
       }),
     );
   }
 
-  if (tradeLongAmountMantissa && Number(tradeLongAmountMantissa) > 0 && longPoolAsset) {
+  if (yieldPlusLongAmountMantissa && Number(yieldPlusLongAmountMantissa) > 0 && longPoolAsset) {
     amounts.push(
       formatToAmount({
         asset: longPoolAsset,
-        amountMantissa: tradeLongAmountMantissa,
+        amountMantissa: yieldPlusLongAmountMantissa,
       }),
     );
   }
 
-  if (tradeAmountRedeemedMantissa && Number(tradeAmountRedeemedMantissa) > 0 && longPoolAsset) {
+  if (
+    yieldPlusAmountRedeemedMantissa &&
+    Number(yieldPlusAmountRedeemedMantissa) > 0 &&
+    longPoolAsset
+  ) {
     amounts.push(
       formatToAmount({
         asset: longPoolAsset,
-        amountMantissa: BigInt(tradeAmountRedeemedMantissa) * -1n,
+        amountMantissa: BigInt(yieldPlusAmountRedeemedMantissa) * -1n,
       }),
     );
   }
 
-  if (tradeShortAmountMantissa && Number(tradeShortAmountMantissa) > 0 && shortPoolAsset) {
+  if (yieldPlusShortAmountMantissa && Number(yieldPlusShortAmountMantissa) > 0 && shortPoolAsset) {
     amounts.push(
       formatToAmount({
         asset: shortPoolAsset,
-        amountMantissa: tradeShortAmountMantissa,
+        amountMantissa: yieldPlusShortAmountMantissa,
       }),
     );
   }
 
-  if (tradeAmountRepaidMantissa && Number(tradeAmountRepaidMantissa) > 0 && shortPoolAsset) {
+  if (
+    yieldPlusAmountRepaidMantissa &&
+    Number(yieldPlusAmountRepaidMantissa) > 0 &&
+    shortPoolAsset
+  ) {
     amounts.push(
       formatToAmount({
         asset: shortPoolAsset,
-        amountMantissa: BigInt(tradeAmountRepaidMantissa) * -1n,
+        amountMantissa: BigInt(yieldPlusAmountRepaidMantissa) * -1n,
       }),
     );
   }
 
   const transaction: TradeTx = {
-    cycleId: tradeCycleId || '1',
+    cycleId: yieldPlusCycleId || '1',
     txType,
     hash,
     blockTimestamp,

apps/evm/src/clients/api/queries/getAccountTransactionHistory/types.ts

@@ -34,26 +34,26 @@ export interface ApiAccountHistoricalTransaction {
   amountUnderlyingMantissa: string | null;
   underlyingAddress: Address;
   underlyingTokenPriceMantissa: string | null;
-  tradePositionAccountAddress: Address | null;
-  tradeLongVTokenAddress: Address | null;
-  tradeShortVTokenAddress: Address | null;
-  tradeDsaVTokenAddress: Address | null;
-  tradeCycleId: string | null;
-  tradeEffectiveLeverageRatio: string | null;
-  tradeInitialPrincipalMantissa: string | null;
-  tradePrincipalAmountMantissa: string | null;
-  tradeNewTotalPrincipalMantissa: string | null;
-  tradeRemainingPrincipalMantissa: string | null;
-  tradeShortAmountMantissa: string | null;
-  tradeLongAmountMantissa: string | null;
-  tradeAdditionalPrincipalMantissa: string | null;
-  tradeCloseFractionBps: string | null;
-  tradeAmountRepaidMantissa: string | null;
-  tradeAmountRedeemedMantissa: string | null;
-  tradeAmountRedeemedDsaMantissa: string | null;
-  tradeLongDustRedeemedMantissa: string | null;
-  tradeAmountConvertedToProfitMantissa: string | null;
-  tradeDsaProfitAmountMantissa: string | null;
+  yieldPlusPositionAccountAddress: Address | null;
+  yieldPlusLongVTokenAddress: Address | null;
+  yieldPlusShortVTokenAddress: Address | null;
+  yieldPlusDsaVTokenAddress: Address | null;
+  yieldPlusCycleId: string | null;
+  yieldPlusEffectiveLeverageRatio: string | null;
+  yieldPlusInitialPrincipalMantissa: string | null;
+  yieldPlusPrincipalAmountMantissa: string | null;
+  yieldPlusNewTotalPrincipalMantissa: string | null;
+  yieldPlusRemainingPrincipalMantissa: string | null;
+  yieldPlusShortAmountMantissa: string | null;
+  yieldPlusLongAmountMantissa: string | null;
+  yieldPlusAdditionalPrincipalMantissa: string | null;
+  yieldPlusCloseFractionBps: string | null;
+  yieldPlusAmountRepaidMantissa: string | null;
+  yieldPlusAmountRedeemedMantissa: string | null;
+  yieldPlusAmountRedeemedDsaMantissa: string | null;
+  yieldPlusLongDustRedeemedMantissa: string | null;
+  yieldPlusAmountConvertedToProfitMantissa: string | null;
+  yieldPlusDsaProfitAmountMantissa: string | null;
 }
 
 export interface AccountTransactionHistoryApiResponse {

apps/evm/src/clients/api/queries/getSwapQuote/useGetSwapQuote.ts

@@ -36,7 +36,7 @@ type Options = QueryObserverOptions<
   QueryKey
 >;
 
-const refetchInterval = generatePseudoRandomRefetchInterval('fast');
+const refetchInterval = generatePseudoRandomRefetchInterval();
 
 export const useGetSwapQuote = (input: TrimmedGetSwapQuoteInput, options?: Partial<Options>) => {
   const { chainId } = useChainId();

apps/evm/src/clients/api/queries/getTradeReduceSwapQuotes/useGetTradeReduceSwapQuotes/index.ts

@@ -33,7 +33,7 @@ type Options = QueryObserverOptions<
   QueryKey
 >;
 
-const refetchInterval = generatePseudoRandomRefetchInterval('fast');
+const refetchInterval = generatePseudoRandomRefetchInterval();
 
 export const useGetTradeReduceSwapQuotes = (
   input: TrimmedGetTradeReduceSwapQuotesInput,

apps/evm/src/components/AccountHealthBar/index.tsx

@@ -14,6 +14,7 @@ import {
   HEALTH_FACTOR_MODERATE_THRESHOLD,
   HEALTH_FACTOR_SAFE_THRESHOLD,
 } from 'constants/healthFactor';
+import { VENUS_DOC_URL } from 'constants/production';
 import { LabeledProgressBar } from '../LabeledProgressBar';
 
 const safeBorrowLimitPercentage = 100 / HEALTH_FACTOR_SAFE_THRESHOLD;
@@ -137,7 +138,7 @@ export const AccountHealthBar: React.FC<AccountHealthBarProps> = ({
               Link: (
                 // biome-ignore lint/a11y/useAnchorContent: content is injected by Trans component
                 <a
-                  href="https://docs-v4.venus.io/guides/liquidation"
+                  href={`${VENUS_DOC_URL}/guides/liquidation`}
                   target="_blank"
                   rel="noreferrer"
                   style={{ color: theme.colors.blue, textDecoration: 'underline' }}

apps/evm/src/components/KLineChart/index.tsx

@@ -47,7 +47,8 @@ export const KLineChart: React.FC<KLineChartProps> = ({
     }),
   );
 
-  const isFullScreenAvailable = document?.fullscreenEnabled || false;
+  const isFullScreenAvailable =
+    typeof document !== 'undefined' ? document.fullscreenEnabled : false;
 
   const toggleFullScreenMode = () => {
     if (document?.fullscreenElement) {
@@ -174,7 +175,10 @@ export const KLineChart: React.FC<KLineChartProps> = ({
 
   return (
     <>
-      <div className="bg-dark-blue w-full h-full flex flex-col" ref={fullScreenContainerRef}>
+      <div
+        className="bg-dark-blue w-full h-full min-h-0 flex flex-col"
+        ref={fullScreenContainerRef}
+      >
         <div className="flex items-center justify-between px-3 py-1">
           <div className="flex items-center gap-x-3">
             <Select
@@ -207,7 +211,7 @@ export const KLineChart: React.FC<KLineChartProps> = ({
           )}
         </div>
 
-        <div className={cn('grow', className)} ref={chartContainerRef} />
+        <div className={cn('grow min-h-0 min-w-0', className)} ref={chartContainerRef} />
       </div>
 
       <Modal

apps/evm/src/components/TransactionsList/TransactionRow/Events/Event/index.tsx

@@ -9,12 +9,12 @@ export interface EventProps {
 
 export const Event: React.FC<EventProps> = ({ token, title, description }) => (
   <div className="flex w-full items-center gap-x-2">
-    {token && <TokenIcon token={token} />}
+    {token && <TokenIcon className="shrink-0" token={token} />}
 
-    <div className="flex flex-col">
-      <span className="text-sm">{title}</span>
+    <div className="flex flex-col grow min-w-0">
+      <span className="text-sm truncate">{title}</span>
 
-      <span className="text-light-grey text-xs">{description}</span>
+      <span className="text-light-grey text-xs truncate">{description}</span>
     </div>
   </div>
 );