feat/PRO-3182/portfolio-tile-refactor

src/apps/pillarx-app/components/EditorialTile/test/__snapshots__/EditorialTile.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<EditorialTile /> renders correctly and matches snapshot 1`] = `
 <div
-  className="flex bg-container_grey rounded-2xl flex-col desktop:p-10 desktop:pt-[30px] tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23]"
+  className="flex bg-container_grey rounded-3xl flex-col desktop:p-10 desktop:pt-[30px] tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23]"
   id="editorial-tile"
 >
   <a

src/apps/pillarx-app/components/GenericBannerTile/test/__snapshots__/GenericBannerTile.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<GenericBannerTile /> renders correctly and matches snapshot 1`] = `
 <div
-  className="flex bg-container_grey rounded-2xl p-1 flex-col false"
+  className="flex bg-container_grey rounded-3xl p-1 flex-col false"
   id="generic-banner-tile"
 >
   <a

src/apps/pillarx-app/components/HighlightedMediaGridTile/test/__snapshots__/HighlightedMediaGridTile.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<HighlightedMediaGridTile /> renders correctly and matches snapshot 1`] = `
 <div>
   <div
-    className="flex bg-container_grey rounded-2xl flex-col p-10 pt-[30px] tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23]"
+    className="flex bg-container_grey rounded-3xl flex-col p-10 pt-[30px] tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23]"
     id="pillarx-feed-highlighted-media-grid-tile"
   >
     <p

src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap

@@ -23,69 +23,67 @@ exports[`<DisplayCollectionImage /> renders correctly and matches snapshot witho
     data-testid="random-avatar"
     fill="none"
     role="img"
-    viewBox="0 0 80 80"
+    viewBox="0 0 36 36"
     xmlns="http://www.w3.org/2000/svg"
   >
     <mask
-      height={80}
+      height={36}
       id=":r0:"
       maskUnits="userSpaceOnUse"
-      width={80}
+      width={36}
       x={0}
       y={0}
     >
       <rect
         fill="#FFFFFF"
-        height={80}
-        width={80}
+        height={36}
+        width={36}
       />
     </mask>
     <g
       mask="url(#:r0:)"
     >
-      <path
-        d="M0 0h80v40H0z"
-        fill="url(#gradient_paint0_linear_image-name)"
+      <rect
+        fill="#92A1C6"
+        height={36}
+        width={36}
       />
-      <path
-        d="M0 40h80v40H0z"
-        fill="url(#gradient_paint1_linear_image-name)"
+      <rect
+        fill="#F0AB3D"
+        height={36}
+        rx={36}
+        transform="translate(-3 7) rotate(307 18 18) scale(1.1)"
+        width={36}
+        x="0"
+        y="0"
       />
-    </g>
-    <defs>
-      <linearGradient
-        gradientUnits="userSpaceOnUse"
-        id="gradient_paint0_linear_image-name"
-        x1={40}
-        x2={40}
-        y1={0}
-        y2={40}
+      <g
+        transform="translate(-3 3.5) rotate(-7 18 18)"
       >
-        <stop
-          stopColor="#F0AB3D"
+        <path
+          d="M13,20 a1,0.75 0 0,0 10,0"
+          fill="#000000"
         />
-        <stop
-          offset={1}
-          stopColor="#C271B4"
+        <rect
+          fill="#000000"
+          height={2}
+          rx={1}
+          stroke="none"
+          width={1.5}
+          x={12}
+          y={14}
         />
-      </linearGradient>
-      <linearGradient
-        gradientUnits="userSpaceOnUse"
-        id="gradient_paint1_linear_image-name"
-        x1={40}
-        x2={40}
-        y1={40}
-        y2={80}
-      >
-        <stop
-          stopColor="#C20D90"
-        />
-        <stop
-          offset={1}
-          stopColor="#92A1C6"
+        <rect
+          fill="#000000"
+          height={2}
+          rx={1}
+          stroke="none"
+          width={1.5}
+          x={22}
+          y={14}
         />
-      </linearGradient>
-    </defs>
+      </g>
+    </g>
   </svg>
 </div>
 `;

src/apps/pillarx-app/components/PortfolioOverview/test/__snapshots__/PortfolioOverview.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`<PortfolioOverview /> displays loading skeleton when data is loading 1`
 }
 
 <div
-  className="flex bg-container_grey rounded-2xl p-10 gap-20 tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23] mobile:flex-col mobile:gap-4"
+  className="flex bg-container_grey rounded-3xl p-10 gap-20 tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23] mobile:flex-col mobile:gap-4"
   id="wallet-portfolio-tile-loader"
 >
   <div
@@ -79,7 +79,7 @@ exports[`<PortfolioOverview /> displays loading skeleton when data is loading 1`
 
 exports[`<PortfolioOverview /> renders correctly and matches snapshot 1`] = `
 <div
-  className="flex bg-container_grey rounded-2xl p-10 gap-20 tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23] mobile:flex-col mobile:gap-4"
+  className="flex bg-container_grey rounded-3xl p-10 gap-20 tablet:p-5 mobile:p-0 mobile:bg-[#1F1D23] mobile:flex-col mobile:gap-4"
   id="wallet-portfolio-tile"
 >
   <div
@@ -195,19 +195,19 @@ exports[`<PortfolioOverview /> renders correctly and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      className="relative inline-block w-[254px] h-12 mb-4"
+      className="relative inline-block w-[254px] h-12"
       id="walletConnect-dropdown"
     >
       <div
-        className="flex w-full h-full items-center bg-medium_grey cursor-pointer rounded-md"
+        className="flex py-[9px] px-3 w-fit h-fit items-center justify-center border-x-2 border-t-2 border-b-4 rounded-[10px] border-[#121116] cursor-pointer"
         onClick={[Function]}
       >
         <div
-          className="flex w-full gap-2 h-full items-center px-3 border-r-2 border-purple_light/[.1]"
+          className="flex gap-2 items-center justify-center rounded-lg"
         >
           <img
             alt="wallet-connect-logo"
-            className="w-[24px]"
+            className="w-4"
             src={
               {
                 "ReactComponent": {
@@ -219,27 +219,30 @@ exports[`<PortfolioOverview /> renders correctly and matches snapshot 1`] = `
             }
           />
           <p
-            className="text-base font-medium text-white"
+            className="text-sm font-medium text-white"
           >
             WalletConnect
           </p>
-        </div>
-        <div
-          className="flex min-w-[46px] h-full items-center justify-center"
-        >
-          <img
-            alt="arrow-down"
-            className="w-3.5 transform "
-            src={
+          <svg
+            className="transform "
+            color="white"
+            fill="currentColor"
+            height={20}
+            stroke="currentColor"
+            strokeWidth="0"
+            style={
               {
-                "ReactComponent": {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "render": [Function],
-                },
-                "default": "arrow-down.svg",
+                "color": "white",
               }
             }
-          />
+            viewBox="0 0 24 24"
+            width={20}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"
+            />
+          </svg>
         </div>
       </div>
     </div>

src/apps/pillarx-app/components/PrimeTokensBalance/PrimeTokensBalance.tsx

@@ -0,0 +1,87 @@
+import { useMemo, useState } from 'react';
+
+// services
+import { getPrimeAssetsWithBalances } from '../../../../services/pillarXApiWalletPortfolio';
+
+// types
+import { PortfolioData } from '../../../../types/api';
+
+// utils
+import { limitDigitsNumber } from '../../../../utils/number';
+import { PRIME_ASSETS_MOBULA } from '../../utils/constants';
+
+// reducer
+import { useAppSelector } from '../../hooks/useReducerHooks';
+
+// images
+import PrimeTokensIcon from '../../images/prime-tokens-icon.png';
+import PrimeTokensQuestionIcon from '../../images/prime-tokens-question-icon.png';
+
+// components
+import BodySmall from '../Typography/BodySmall';
+
+const PrimeTokensBalance = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const walletPortfolio = useAppSelector(
+    (state) =>
+      state.walletPortfolio.walletPortfolio as PortfolioData | undefined
+  );
+
+  const primeAssetsBalance = useMemo(() => {
+    if (!walletPortfolio) return undefined;
+
+    const allPrimeAssets = getPrimeAssetsWithBalances(
+      walletPortfolio,
+      PRIME_ASSETS_MOBULA
+    );
+
+    const totalBalance = allPrimeAssets
+      .flatMap((assetGroup) => assetGroup.primeAssets)
+      .reduce((sum, asset) => sum + asset.usd_balance, 0);
+
+    return limitDigitsNumber(totalBalance);
+  }, [walletPortfolio]);
+
+  return (
+    <div className="flex items-center gap-[5px] relative">
+      <img
+        src={PrimeTokensIcon}
+        alt="prime-tokens-icon"
+        className={`w-4 h-4 ${((primeAssetsBalance && primeAssetsBalance === 0) || !primeAssetsBalance) && 'opacity-50'}`}
+      />
+      <BodySmall
+        className={`${((primeAssetsBalance && primeAssetsBalance === 0) || !primeAssetsBalance) && 'text-white text-opacity-50'}`}
+      >
+        Prime Tokens Balance: $
+        {primeAssetsBalance && primeAssetsBalance > 0
+          ? primeAssetsBalance
+          : '0.00'}
+      </BodySmall>
+
+      <div
+        className="relative flex items-center w-auto"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <img
+          src={PrimeTokensQuestionIcon}
+          alt="prime-tokens-question-icon"
+          className="w-3 h-3 cursor-pointer"
+        />
+
+        {isHovered && (
+          <div className="absolute bottom-full mb-2 left-1/2 -translate-x-[85%] desktop:-translate-x-1/2 z-10">
+            <div className="bg-lighter_container_grey text-white text-[10px] italic font-normal px-2.5 py-2 rounded shadow-lg border border-white/[.05] max-w-[270px] w-[calc(100vw-2rem)] break-words">
+              Prime Tokens are used for trading and paying gas fees across all
+              chains. You’ll use them when buying assets and receive them when
+              selling.
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PrimeTokensBalance;