Merge pull request #1717 from balancer/fix/gas-estimate-speed-label

fix: gas estimate speed label

Author: groninge01

packages/lib/modules/transactions/transaction-steps/step-tracker/DesktopStepTracker.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 export function DesktopStepTracker({ chain, transactionSteps, isTxBatch, extraStyles }: Props) {
   return (
-    <Card padding={0} position="absolute" right="-300px" top="10px" width="280px" {...extraStyles}>
+    <Card padding={0} position="absolute" right="-320px" top="10px" width="300px" {...extraStyles}>
       <VStack alignItems="flex-start" gap="0" w="full">
         <HStack justify="space-between" px="ms" py="sm" w="full">
           <Heading fontWeight="bold" size="h6">

packages/lib/modules/transactions/transaction-steps/step-tracker/Step.tsx

@@ -15,7 +15,7 @@ import { getPendingNestedSteps, hasSomePendingNestedTxInBatch } from '../safe/sa
 import { useTransactionGasCost } from '../useTransactionGasCost'
 import { getBlockExplorerTxUrl } from '@repo/lib/shared/utils/blockExplorer'
 import { getGqlChain } from '@repo/lib/config/app.config'
-import { SMALL_AMOUNT_LABEL } from '@repo/lib/shared/utils/numbers'
+import { TxnSpeedSetting } from './TxnSpeedSetting'
 
 export function Step(props: StepProps) {
   const transaction = props.step.transaction
@@ -121,7 +121,7 @@ function NestedInfo({
 }) {
   const gasCostData = useTransactionGasCost(transaction)
 
-  const isSmallAmount = gasCostData && gasCostData.costUsd?.replace('$', '') === SMALL_AMOUNT_LABEL
+  const isActual = gasCostData && gasCostData.isActual
 
   const textProps = {
     fontSize: 'sm',
@@ -133,11 +133,13 @@ function NestedInfo({
     <Box mb="0" mt="0" p="0.5" pl="0">
       <HStack align="start" gap="xxs">
         {!details?.gasless && gasCostData && gasCostData.costUsd != null ? (
-          <Text {...textProps} p="0">
-            {gasCostData.isActual ? 'Final gas: ' : 'Estimated gas: '}
-            {(!isSmallAmount || !gasCostData.isActual) && '~'}
-            {gasCostData.costUsd}
-          </Text>
+          <HStack gap="0">
+            <Text {...textProps} mr="sm" p="0">
+              {isActual ? 'Final gas: ' : 'Estimated gas: '}
+              {gasCostData.costUsd}
+            </Text>
+            {!isActual && <TxnSpeedSetting />}
+          </HStack>
         ) : step.isComplete() ? (
           <Text {...textProps}>Previously approved</Text>
         ) : (

packages/lib/modules/transactions/transaction-steps/step-tracker/TxnSpeedSetting.tsx

@@ -0,0 +1,58 @@
+import {
+  Box,
+  Popover,
+  PopoverTrigger,
+  HStack,
+  Image,
+  PopoverContent,
+  PopoverArrow,
+  Text,
+} from '@chakra-ui/react'
+import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
+import { SpeedIcon } from '@repo/lib/shared/components/icons/SpeedIcon'
+import { WalletIcon } from '@repo/lib/shared/components/icons/WalletIcon'
+
+function getSpeedSettingLabel(id: string = 'default') {
+  switch (id) {
+    case 'rabby':
+    case 'io.rabby':
+      return 'Normal'
+    case 'metaMaskSDK':
+      return 'Low'
+    default:
+      return 'Slow'
+  }
+}
+
+export function TxnSpeedSetting() {
+  const { connector } = useUserAccount()
+
+  const speedSettingLabel = getSpeedSettingLabel(connector?.id)
+  const userWalletLabel = connector?.name || 'your wallet'
+
+  return (
+    <Popover placement="top" trigger="hover">
+      <PopoverTrigger>
+        <HStack gap="xs">
+          {connector && connector.icon ? (
+            <Image height="14px" src={connector.icon} width="14px" />
+          ) : (
+            <WalletIcon size={14} />
+          )}
+          <Box color="font.secondary" position="relative" top="0px">
+            <SpeedIcon size={14} />
+          </Box>
+          <Text color="grayText" cursor="pointer" fontSize="xs">
+            {speedSettingLabel}
+          </Text>
+        </HStack>
+      </PopoverTrigger>
+      <PopoverContent p="2" shadow="2xl" width="250px" zIndex="popover">
+        <PopoverArrow bg="background.level3" />
+        <Text color="grayText" fontSize="sm">
+          {`This is a general estimate to give you a sense of the cost based on a '${speedSettingLabel}' speed transaction on your ${userWalletLabel}. This UI can’t access your wallet’s transaction speed, so the estimate may be inaccurate if your wallet is set to a higher speed.`}
+        </Text>
+      </PopoverContent>
+    </Popover>
+  )
+}

packages/lib/modules/transactions/transaction-steps/step-tracker/step-tracker.utils.ts

@@ -1,5 +1,5 @@
 import { ModalContentProps } from '@chakra-ui/react'
 
 export function getStylesForModalContentWithStepTracker(isDesktop: boolean): ModalContentProps {
-  return isDesktop ? { left: '-100px', position: 'relative' } : {}
+  return isDesktop ? { left: '-160px', position: 'relative' } : {}
 }

packages/lib/shared/components/icons/SpeedIcon.tsx

@@ -0,0 +1,24 @@
+export function SpeedIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg
+      fill="none"
+      height={size}
+      viewBox="0 0 14 14"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.757 11.743a6 6 0 1 1 8.486 0"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9.667 4.828 7 7.495"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  )
+}