Add stable pool usdcw new (#569)

* feat: usdcw pool * update token meta data * feat: add stable pool * update usdc.w bg color * remove log and add farm config --------- Co-authored-by: deep-path <[email protected]>
ref-finance · Jul 20, 2024 · c7ce262 · c7ce262
1 parent c2a6c1f
commit c7ce262
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 51 deletions.
diff --git a/src/components/icon/Common.tsx b/src/components/icon/Common.tsx
diff --git a/src/components/stableswap/CommonComp.tsx b/src/components/stableswap/CommonComp.tsx
@@ -30,6 +30,7 @@ import { REF_FI_POOL_ACTIVE_TAB } from '../../pages/pools/utils';
 import CustomTooltip from 'src/components/customTooltip/customTooltip';
 import { TknIcon } from '../icon/Common';
 import { TokenPriceListContext } from 'src/pages/pools/LiquidityPage/constLiquidityPage';
+import { USDCWIcon } from '../icon/Common';
 
 export function BackToStablePoolList() {
   const history = useHistory();
@@ -84,6 +85,7 @@ export const TknImages = ({
     : [...new Set<string>(tokens?.map((t) => t?.id))].map((id) =>
         tokens.find((t) => t?.id === id)
       );
+
   const is_vertical = layout == 'vertical' && displayTokens?.length == 4;
   return (
     <div
@@ -95,14 +97,17 @@ export const TknImages = ({
         displayTokens
           ?.slice(0, isRewardDisplay ? 5 : displayTokens.length)
           ?.map((token, index) => {
-            const icon = token?.icon;
+            const icon =
+              token.id == '16.contract.portalbridge.near'
+                ? 'usdcw'
+                : token?.icon;
             const id = token?.id;
             const isRisk = riskTokens.some((riskToken) => riskToken.id === id);
             if (icon)
               return (
                 <div
                   key={token?.id + index}
-                  className={`inline-block flex-shrink-0 ${
+                  className={`inline-block flex-shrink-0 frcc ${
                     is_vertical && index > 1 ? '-mt-3' : 'relative z-10'
                   }  h-${size || 10} w-${size || 10} rounded-full ${
                     tokens?.length > 1 ? (noverlap ? 'ml-0' : '-ml-1') : ''
@@ -111,20 +116,30 @@ export const TknImages = ({
                     border: borderStyle || 'none',
                   }}
                 >
-                  <img
-                    key={
-                      (id || 0) +
-                      '-' +
-                      index +
-                      '-' +
-                      token?.id +
-                      '-' +
-                      uId +
-                      Date.now()
-                    }
-                    src={icon}
-                    className="rounded-full"
-                  />
+                  {token.id == '16.contract.portalbridge.near' ? (
+                    <USDCWIcon
+                      className={`inline-block flex-shrink-0 frcc ${
+                        is_vertical && index > 1 ? '-mt-3' : 'relative z-10'
+                      }  h-${size || 10} w-${size || 10} rounded-full ${
+                        tokens?.length > 1 ? (noverlap ? 'ml-0' : '-ml-1') : ''
+                      } bg-cardBg`}
+                    />
+                  ) : (
+                    <img
+                      key={
+                        (id || 0) +
+                        '-' +
+                        index +
+                        '-' +
+                        token?.id +
+                        '-' +
+                        uId +
+                        Date.now()
+                      }
+                      src={icon}
+                      className="rounded-full"
+                    />
+                  )}
                   {isRisk && (
                     <div
                       className="absolute z-40"
@@ -205,10 +220,23 @@ export const Images = ({
         displayTokens
           ?.slice(0, isRewardDisplay ? 5 : displayTokens.length)
           ?.map((token, index) => {
-            const icon = token?.icon;
+            const icon =
+              token?.id == '16.contract.portalbridge.near'
+                ? '16.contract.portalbridge.near'
+                : token?.icon;
             const id = token?.id;
             if (icon)
-              return (
+              return icon == '16.contract.portalbridge.near' ? (
+                <USDCWIcon
+                  className={`inline-block flex-shrink-0 ${
+                    is_vertical && index > 1 ? '-mt-3' : 'relative z-10'
+                  }  h-${size || 10} w-${size || 10} rounded-full border ${
+                    border ? 'border' : ''
+                  } border-gradientFromHover ${
+                    tokens?.length > 1 ? (noverlap ? 'ml-0' : '-ml-1') : ''
+                  } bg-cardBg`}
+                />
+              ) : (
                 <img
                   key={
                     (id || 0) +
@@ -286,7 +314,9 @@ export const Symbols = ({
       {tokens?.map((token, index) => (
         <span key={token?.id + '-' + index}>
           {index ? separator || '-' : ''}
-          {toRealSymbol(token?.symbol || '')}
+          {token?.id == '16.contract.portalbridge.near'
+            ? 'USDC.w'
+            : toRealSymbol(token?.symbol || '')}
         </span>
       ))}
       {withArrow ? <span className="ml-1.5">{'>'}</span> : null}

diff --git a/src/components/stableswap/StableTokenListUSN.tsx b/src/components/stableswap/StableTokenListUSN.tsx
@@ -14,6 +14,7 @@ import { SmallWallet } from '../icon/SmallWallet';
 import { getMax } from '../../utils/numbers';
 import { NEARXIDS } from '../../services/near';
 import { WalletContext } from '../../utils/wallets-integration';
+import { USDCWIcon } from '../../components/icon/Common';
 
 export function Icon(props: {
   icon?: string;
@@ -74,12 +75,18 @@ export default function StableTokenListUSN(props: {
       </div>
       <div className="flex items-center ">
         <div className="flex items-center w-28 xs:w-24 md:w-24 xs:flex-shrink-0 md:xs:flex-shrink-0">
-          <Icon
-            icon={tokens[0].icon}
-            className="h-9 w-9 xs:h-7 md:h-7 xs:w-7 md:w-7 mr-2"
-          />
+          {tokens[0].id == '16.contract.portalbridge.near' ? (
+            <USDCWIcon className="h-9 w-9 xs:h-7 md:h-7 xs:w-7 md:w-7 mr-2"></USDCWIcon>
+          ) : (
+            <Icon
+              icon={tokens[0].icon}
+              className="h-9 w-9 xs:h-7 md:h-7 xs:w-7 md:w-7 mr-2"
+            />
+          )}
           <div className="text-white text-base" title={tokens[0].id}>
-            {toRealSymbol(tokens[0].symbol)}
+            {tokens[0].id == '16.contract.portalbridge.near'
+              ? 'USDC.w'
+              : toRealSymbol(tokens[0].symbol)}
           </div>
         </div>
         <InputAmount
@@ -166,13 +173,20 @@ export function StableTokensSymbolUSN(props: {
           tokens[0].id === NEARXIDS[0] ? 'hidden' : ''
         } md:flex-col xs:items-center md:items-center`}
       >
-        <Icon
-          icon={tokens[0].icon}
-          className="inline-block h-9 w-9 xs:h-7 xs:w-7 md:h-7 md:w-7 mr-2 xs:mr-0.5 md:mr-0.5"
-        />
+        {tokens[0].id == '16.contract.portalbridge.near' ? (
+          <USDCWIcon className="inline-block h-9 w-9 xs:h-7 xs:w-7 md:h-7 md:w-7 mr-2 xs:mr-0.5 md:mr-0.5" />
+        ) : (
+          <Icon
+            icon={tokens[0].icon}
+            className="inline-block h-9 w-9 xs:h-7 xs:w-7 md:h-7 md:w-7 mr-2 xs:mr-0.5 md:mr-0.5"
+          />
+        )}
+
         <div className="ml-2 inline-block xs:ml-0 md:ml-0">
           <p className="text-sm xs:text-center md:text-center xs:my-1 md:my-1">
-            {toRealSymbol(tokens[0].symbol)}
+            {tokens[0].id == '16.contract.portalbridge.near'
+              ? 'USDC.w'
+              : toRealSymbol(tokens[0].symbol)}
           </p>
           <div className="text-xs xs:text-center md:text-center">
             {calcTokenReceived(receiveAmounts[0], tokens[0])}
@@ -192,13 +206,19 @@ export function StableTokensSymbolUSN(props: {
           tokens[1].id === NEARXIDS[0] ? 'hidden' : ''
         } md:flex-col xs:items-center md:items-center`}
       >
-        <Icon
-          icon={tokens[1].icon}
-          className="inline-block h-9 w-9 xs:h-7 xs:w-7 md:h-7 md:w-7 mr-2 xs:mr-0.5 md:mr-0.5"
-        />
+        {tokens[1].id == '16.contract.portalbridge.near' ? (
+          <USDCWIcon className="inline-block h-9 w-9 xs:h-7 xs:w-7 md:h-7 md:w-7 mr-2 xs:mr-0.5 md:mr-0.5" />
+        ) : (
+          <Icon
+            icon={tokens[1].icon}
+            className="inline-block h-9 w-9 xs:h-7 xs:w-7 md:h-7 md:w-7 mr-2 xs:mr-0.5 md:mr-0.5"
+          />
+        )}
         <div className="ml-2 inline-block xs:ml-0 md:ml-0">
           <p className="text-sm xs:text-center md:text-center xs:my-1 md:my-1">
-            {toRealSymbol(tokens[1].symbol)}
+            {tokens[1].id == '16.contract.portalbridge.near'
+              ? 'USDC.w'
+              : toRealSymbol(tokens[1].symbol)}
           </p>
           <div className="text-xs xs:text-center md:text-center">
             {calcTokenReceived(receiveAmounts[1], tokens[1])}

diff --git a/src/components/stableswap/TokenReserves.tsx b/src/components/stableswap/TokenReserves.tsx
@@ -85,6 +85,7 @@ function TokenChart({
     'USDC.e': '#2B6EB7',
     USDC: '#2FA7DB',
     USDt: '#45D0C0',
+    'USDC.w': '#2B6EB7',
   };
 
   const noBorderTokens = ['LINEAR', 'USDt'];

diff --git a/src/pages/pools/LiquidityPage/LiquidityPage.tsx b/src/pages/pools/LiquidityPage/LiquidityPage.tsx
@@ -59,6 +59,7 @@ import {
   USDTT_USDCC_USDT_USDC_POOL_ID,
   USDT_USDC_POOL_ID,
   FRAX_USDC_POOL_ID,
+  USDCW_POOL_ID,
 } from '../../../services/near';
 import { WatchListStartFull } from '../../../components/icon/WatchListStar';
 import _, { orderBy, sortBy, filter } from 'lodash';
@@ -158,6 +159,7 @@ import {
 } from './constLiquidityPage';
 import { useRiskTokens } from '../../../state/token';
 import { format_apy } from '../../../utils/uiNumber';
+import { USDCWIcon } from 'src/components/icon/Common';
 
 const HIDE_LOW_TVL = 'REF_FI_HIDE_LOW_TVL';
 
@@ -2313,6 +2315,8 @@ function TokenChart({
     'USDC.e': '#2B6EB7',
     USDC: '#2FA7DB',
     USDt: '#45D0C0',
+    'USD Coin': '#2FA7DB',
+    'USDC.w': '#2B6EB7',
   };
 
   const colorLight = {
@@ -2332,6 +2336,7 @@ function TokenChart({
     NearXC: '#4d5971',
     NearX: '#00676D',
     USDt: '#0E8585',
+    'USD Coin': 'rgba(0, 163, 255, 1)',
   };
 
   const innerRadius = 30;
@@ -2450,11 +2455,15 @@ const RenderDisplayTokensAmounts = ({
               }`}
             >
               <span className="mr-1.5 flex-shrink-0">
-                <img
-                  src={token.icon}
-                  alt=""
-                  className="w-4 h-4 border border-gradientFrom rounded-full flex-1 flex-shrink-0"
-                />
+                {token.id == '16.contract.portalbridge.near' ? (
+                  <USDCWIcon className="w-4 h-4 border border-gradientFrom rounded-full flex-1 flex-shrink-0" />
+                ) : (
+                  <img
+                    src={token.icon}
+                    alt=""
+                    className="w-4 h-4 border border-gradientFrom rounded-full flex-1 flex-shrink-0"
+                  />
+                )}
               </span>
 
               <span
@@ -2537,7 +2546,8 @@ function StablePoolCard({
   const is_new_pool =
     poolData.pool.id == USDTT_USDCC_USDT_USDC_POOL_ID ||
     poolData.pool.id == USDT_USDC_POOL_ID ||
-    poolData.pool.id == FRAX_USDC_POOL_ID;
+    poolData.pool.id == FRAX_USDC_POOL_ID ||
+    poolData.pool.id == USDCW_POOL_ID;
 
   const atRiskTokens = curRowTokens.filter((token) =>
     riskTokens.some((riskToken) => riskToken.id === token.id)
@@ -2906,7 +2916,12 @@ function StablePoolList({
 
     return b1 && b2;
   };
-  const pinned_pool_ids = [USDTT_USDCC_USDT_USDC_POOL_ID, FRAX_USDC_POOL_ID];
+  const pinned_pool_ids = [
+    USDTT_USDCC_USDT_USDC_POOL_ID,
+    FRAX_USDC_POOL_ID,
+    USDCW_POOL_ID,
+  ];
+
   const sortingFunc = (p1: PoolData, p2: PoolData) => {
     const v1 = Number(p1?.poolTVL?.toString() || 0);
     const v2 = Number(p2?.poolTVL?.toString() || 0);
@@ -2931,9 +2946,27 @@ function StablePoolList({
     const is_p1_sort_top = pinned_pool_ids.includes(p1.pool.id);
     const is_p2_sort_top = pinned_pool_ids.includes(p2.pool.id);
 
+    const p1_pinned_index = is_p1_sort_top
+      ? pinned_pool_ids.indexOf(p1.pool.id)
+      : p1.pool.id === USDCW_POOL_ID
+      ? 2
+      : Number.MAX_SAFE_INTEGER;
+    const p2_pinned_index = is_p2_sort_top
+      ? pinned_pool_ids.indexOf(p2.pool.id)
+      : p2.pool.id === USDCW_POOL_ID
+      ? 2
+      : Number.MAX_SAFE_INTEGER;
+
+    if (is_p1_sort_top && is_p2_sort_top) {
+      return p1_pinned_index - p2_pinned_index;
+    }
+
     if (is_p1_sort_top) return -1;
     if (is_p2_sort_top) return 1;
 
+    if (p1_pinned_index === 2) return -1;
+    if (p2_pinned_index === 2) return 1;
+
     if (orderStable === 'desc') {
       if (sortBy === 'tvl') {
         return v2 - v1;

diff --git a/src/pages/pools/poolsComponents/StablePoolList.tsx b/src/pages/pools/poolsComponents/StablePoolList.tsx
@@ -8,6 +8,7 @@ import {
   USDTT_USDCC_USDT_USDC_POOL_ID,
   USDT_USDC_POOL_ID,
   FRAX_USDC_POOL_ID,
+  USDCW_POOL_ID,
 } from 'src/services/near';
 import _, { find } from 'lodash';
 import { FormattedMessage } from 'react-intl';
@@ -355,7 +356,8 @@ function StablePoolCard({
   const is_new_pool =
     poolData.pool.id == USDTT_USDCC_USDT_USDC_POOL_ID ||
     poolData.pool.id == USDT_USDC_POOL_ID ||
-    poolData.pool.id == FRAX_USDC_POOL_ID;
+    poolData.pool.id == FRAX_USDC_POOL_ID ||
+    poolData.pool.id == USDCW_POOL_ID;
 
   const atRiskTokens = curRowTokens.filter((token) =>
     riskTokens.some((riskToken) => riskToken.id === token.id)
@@ -782,7 +784,7 @@ function TokenChart({
     return {
       name: token.symbol,
       value: Number(coinsAmounts[token.id]),
-      token: token,
+      token,
       displayV: tokensData[token.id].display2,
     };
   });
@@ -803,6 +805,7 @@ function TokenChart({
     'USDC.e': '#2B6EB7',
     USDC: '#2FA7DB',
     USDt: '#45D0C0',
+    'USDC.w': '#2B6EB7',
   };
 
   const colorLight = {
@@ -824,9 +827,9 @@ function TokenChart({
     USDt: '#0E8585',
   };
 
-  let innerRadius = 30;
-  let outerRadius = 40;
-  let width = 80;
+  const innerRadius = 30;
+  const outerRadius = 40;
+  const width = 80;
 
   const renderActiveShape = (props: any) => {
     const RADIAN = Math.PI / 180;
@@ -909,7 +912,7 @@ const calculateTokenValueAndShare = (
   coinsAmounts: { [id: string]: BigNumber },
   tokensMap: { [id: string]: TokenMetadata }
 ): Record<string, any> => {
-  let result: Record<string, any> = {};
+  const result: Record<string, any> = {};
   const totalShares = _.sumBy(Object.values(coinsAmounts), (o) => Number(o));
 
   let otherTokenNumber = '0';