feat(ui-toolkit,tailwindcss-config): healthbar auction level indicator (#4406)

libs/announcements/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/announcements",
-  "version": "0.0.1"
+  "version": "0.0.2"
 }

libs/i18n/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vegaprotocol/i18n",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "commonjs"
 }

libs/react-helpers/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/react-helpers",
-  "version": "0.2.4"
+  "version": "0.2.5"
 }

libs/tailwindcss-config/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/tailwindcss-config",
-  "version": "0.0.3"
+  "version": "0.0.4"
 }

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -51,6 +51,12 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.rtl-dir': {
       direction: 'rtl',
     },
+    '.dashed-background': {
+      background: `repeating-linear-gradient(0deg, transparent, transparent 2px, ${colors.neutral[900]} 2px, ${colors.neutral[900]} 4px)`,
+    },
+    '.dark .dashed-background': {
+      background: `repeating-linear-gradient(0deg, transparent, transparent 2px, ${colors.neutral[200]} 2px, ${colors.neutral[200]} 4px)`,
+    },
   });
 });
 

libs/types/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/types",
-  "version": "0.0.3"
+  "version": "0.0.4"
 }

libs/ui-toolkit/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.12.6"
+  "version": "0.12.7"
 }

libs/ui-toolkit/src/components/healthbar/healthbar.tsx

@@ -43,7 +43,55 @@ const Target = ({
       >
         <div
           className={classNames(
-            'health-target w-0.5 bg-black group-hover:scale-x-150 group-hover:scale-y-108',
+            'health-target w-0.5 bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-x-150 group-hover:scale-y-108',
+            {
+              'h-6': !isLarge,
+              'h-12': isLarge,
+            }
+          )}
+        />
+      </div>
+    </Tooltip>
+  );
+};
+
+const AuctionTarget = ({
+  trigger,
+  isLarge,
+  rangeLimit,
+  decimals,
+}: {
+  isLarge: boolean;
+  trigger: number;
+  rangeLimit: number;
+  decimals: number;
+}) => {
+  const leftPosition = new BigNumber(trigger).div(rangeLimit).multipliedBy(100);
+  return (
+    <Tooltip
+      description={
+        <div className="text-vega-dark-100 dark:text-vega-light-200">
+          <div className="mt-1.5 inline-flex">
+            <Indicator variant={Intent.None} />
+          </div>
+          <span>
+            {t('Auction Trigger stake')}{' '}
+            {addDecimalsFormatNumber(trigger, decimals)}
+          </span>
+        </div>
+      }
+    >
+      <div
+        className={classNames(
+          'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
+        )}
+        style={{
+          left: `${leftPosition}%`,
+        }}
+      >
+        <div
+          className={classNames(
+            'health-target w-0.5 group-hover:scale-x-150 group-hover:scale-y-108 dashed-background',
             {
               'h-6': !isLarge,
               'h-12': isLarge,
@@ -133,16 +181,21 @@ export const HealthBar = ({
   levels,
   size = 'small',
   intent,
+  triggerRatio,
 }: {
   target: string;
   decimals: number;
   levels: Levels[];
   size?: 'small' | 'large';
   intent: Intent;
+  triggerRatio?: string;
 }) => {
   const targetNumber = parseInt(target, 10);
   const rangeLimit = targetNumber * 2;
 
+  const triggerRatioNumber = triggerRatio ? parseFloat(triggerRatio) : 0;
+  const auctionTrigger = targetNumber * triggerRatioNumber;
+
   let lastVisibleLevel = 0;
   const committedNumber = levels
     .reduce((total, current, index) => {
@@ -174,7 +227,10 @@ export const HealthBar = ({
         >
           <Full />
 
-          <div className="health-bars h-[inherit] flex w-full gap-0.5">
+          <div
+            className="health-bars h-[inherit] flex w-full
+              gap-0.5 outline outline-vega-light-200 dark:outline-vega-dark-200"
+          >
             {levels.map((p, index) => {
               const { commitmentAmount, fee } = p;
               const prevLevel = levels[index - 1]?.commitmentAmount;
@@ -206,6 +262,15 @@ export const HealthBar = ({
             )}
           </div>
         </div>
+        {triggerRatio && (
+          <AuctionTarget
+            isLarge={isLarge}
+            trigger={auctionTrigger}
+            rangeLimit={rangeLimit}
+            decimals={decimals}
+          />
+        )}
+
         <Target isLarge={isLarge} target={target} decimals={decimals} />
       </div>
     </div>

libs/utils/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vegaprotocol/utils",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "commonjs"
 }