feat: add Yield+ feature

Author: therealemjy

.changeset/chilly-pugs-trade.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+add Yield+ page structure

.changeset/dark-doodles-hug.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+refactor input components

.changeset/early-peas-create.md

@@ -0,0 +1,6 @@
+---
+"@venusprotocol/ui": minor
+"@venusprotocol/evm": minor
+---
+
+add Increase form

.changeset/fast-radios-vanish.md

@@ -0,0 +1,6 @@
+---
+"@venusprotocol/ui": minor
+"@venusprotocol/evm": minor
+---
+
+add Open Yield+ position form

apps/evm/package.json

@@ -62,6 +62,7 @@
     "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "immer": "^10.1.1",
+    "klinecharts": "^10.0.0-beta1",
     "lodash": "^4.17.21",
     "lodash.merge": "^4.6.2",
     "motion": "^12.0.3",

apps/evm/src/App/Routes/index.tsx

@@ -30,12 +30,14 @@ const Bridge = safeLazyLoad(() => import('pages/Bridge'));
 const Skills = safeLazyLoad(() => import('pages/Skills'));
 const PrivacyPolicy = safeLazyLoad(() => import('pages/PrivacyPolicy'));
 const TermsOfUse = safeLazyLoad(() => import('pages/TermsOfUse'));
+const YieldPlus = safeLazyLoad(() => import('pages/YieldPlus'));
 
 const AppRoutes = () => {
   const location = useLocation();
   const swapRouteEnabled = useIsFeatureEnabled({ name: 'swapRoute' });
   const vaiRouteEnabled = useIsFeatureEnabled({ name: 'vaiRoute' });
   const bridgeEnabled = useIsFeatureEnabled({ name: 'bridgeRoute' });
+  const yieldPlusRouteEnabled = useIsFeatureEnabled({ name: 'yieldPlus' });
   const primeCalculatorEnabled = useIsFeatureEnabled({
     name: 'primeCalculator',
   });
@@ -176,6 +178,17 @@ const AppRoutes = () => {
           }
         />
 
+        {yieldPlusRouteEnabled && (
+          <Route
+            path={Subdirectory.YIELD_PLUS}
+            element={
+              <PageSuspense>
+                <YieldPlus />
+              </PageSuspense>
+            }
+          />
+        )}
+
         {swapRouteEnabled && (
           <Route
             path={Subdirectory.SWAP}

apps/evm/src/App/index.tsx

@@ -1,5 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query';
-import { queryClient } from 'clients/api';
+import { queryClient } from 'clients/api/queryClient';
 import config from 'config';
 import { AnalyticProvider } from 'libs/analytics';
 import { ErrorBoundary } from 'libs/errors';

apps/evm/src/__mocks__/models/swap.ts

@@ -1,4 +1,4 @@
-import type { ExactInSwapQuote } from 'types';
+import type { ApproximateOutSwapQuote, ExactInSwapQuote } from 'types';
 import { lisUsd, usdc } from './tokens';
 
 export const exactInSwapQuote: ExactInSwapQuote = {
@@ -11,3 +11,14 @@ export const exactInSwapQuote: ExactInSwapQuote = {
   minimumToTokenAmountReceivedMantissa: 100000000n,
   callData: '0x',
 };
+
+export const approximateOutSwapQuote: ApproximateOutSwapQuote = {
+  fromToken: lisUsd,
+  toToken: usdc,
+  direction: 'approximate-out',
+  priceImpactPercentage: 0.1,
+  fromTokenAmountSoldMantissa: 100000000n,
+  expectedToTokenAmountReceivedMantissa: 100000000n,
+  minimumToTokenAmountReceivedMantissa: 100000000n,
+  callData: '0x',
+};

apps/evm/src/__mocks__/models/transactions.ts

@@ -88,22 +88,6 @@ export const transactions = {
       token: usdt,
       txType: 'exit_market',
     },
-    {
-      accountAddress: '0x3d759121234cd36F8124C21aFe1c6852d2bEd848',
-      amountCents: new BigNumber('0'),
-      amountTokens: new BigNumber(
-        '115792089237316195423570985008687907853269984665640564039457584007913129639935',
-      ),
-      blockNumber: '41114008',
-      blockTimestamp: new Date('2024-08-02T02:18:00.000Z'),
-      chainId: 97,
-      contractAddress: '0xb7526572FFE56AB9D7489838Bf2E18e3323b441A',
-      hash: '0xb0435b135762a7ca2ad7dccb9aa6c7f50237c6139b16a76348d6c64dfece110e',
-      poolName: 'Metaverse',
-      vTokenSymbol: vUsdtCorePool.symbol,
-      token: vUsdtCorePool,
-      txType: 'approve',
-    },
   ],
   count: 7,
 };

apps/evm/src/__mocks__/models/yieldPlus.ts

@@ -0,0 +1,52 @@
+import BigNumber from 'bignumber.js';
+
+import fakeAddress, { altAddress } from '__mocks__/models/address';
+import { poolData } from '__mocks__/models/pools';
+import type { YieldPlusPosition } from 'types';
+import { convertTokensToMantissa } from 'utilities';
+import { formatToYieldPlusPosition } from 'utilities/formatToYieldPlusPosition';
+
+const pool = poolData[0];
+const xvsAsset = pool.assets[0];
+const usdcAsset = pool.assets[1];
+const usdtAsset = pool.assets[2];
+const busdAsset = pool.assets[3];
+
+export const yieldPlusPositions: YieldPlusPosition[] = [
+  formatToYieldPlusPosition({
+    pool,
+    chainId: busdAsset.vToken.underlyingToken.chainId,
+    positionAccountAddress: fakeAddress,
+    dsaVTokenAddress: xvsAsset.vToken.address,
+    dsaBalanceMantissa: convertTokensToMantissa({
+      value: xvsAsset.userSupplyBalanceTokens,
+      token: xvsAsset.vToken.underlyingToken,
+    }),
+    longVTokenAddress: usdtAsset.vToken.address,
+    shortVTokenAddress: busdAsset.vToken.address,
+    leverageFactor: 2,
+    unrealizedPnlCents: 0,
+    unrealizedPnlPercentage: 0,
+    averageEntryRatio: 1,
+    totalShortOpenedMantissa: new BigNumber(0),
+    totalLongReceivedMantissa: new BigNumber(0),
+  })!,
+  formatToYieldPlusPosition({
+    pool,
+    chainId: busdAsset.vToken.underlyingToken.chainId,
+    positionAccountAddress: altAddress,
+    dsaVTokenAddress: usdcAsset.vToken.address,
+    dsaBalanceMantissa: convertTokensToMantissa({
+      value: usdcAsset.userSupplyBalanceTokens,
+      token: usdcAsset.vToken.underlyingToken,
+    }),
+    longVTokenAddress: usdtAsset.vToken.address,
+    shortVTokenAddress: busdAsset.vToken.address,
+    leverageFactor: 3,
+    unrealizedPnlCents: 150,
+    unrealizedPnlPercentage: 1.2,
+    averageEntryRatio: 1.1,
+    totalShortOpenedMantissa: new BigNumber(0),
+    totalLongReceivedMantissa: new BigNumber(0),
+  })!,
+];