chore: add nested gas details

balancer · Oct 3, 2024 · deb70ff · deb70ff
1 parent 9ab3a5a
commit deb70ff
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/lib/modules/transactions/transaction-steps/lib.tsx b/lib/modules/transactions/transaction-steps/lib.tsx
@@ -70,8 +70,8 @@ type Executable = {
 }
 
 export type SubSteps = {
-  tokens: string[]
-  gas: number
+  gasless: boolean
+  tokens?: string[]
 }
 
 export type TransactionStep = {

diff --git a/lib/modules/transactions/transaction-steps/step-tracker/Step.tsx b/lib/modules/transactions/transaction-steps/step-tracker/Step.tsx
@@ -8,8 +8,7 @@ import {
 } from '@chakra-ui/react'
 import { StepProps, getStepSettings } from './getStepSettings'
 import { Check } from 'react-feather'
-import { ManagedResult } from '../lib'
-import type { SubSteps } from '../lib'
+import { ManagedResult, SubSteps } from '../lib'
 import { useTransactionState } from '../TransactionStateProvider'
 import { indexToLetter } from '@/lib/shared/labels'
 
@@ -25,7 +24,7 @@ export function Step(props: StepProps) {
         <Text mt={isActive ? -0.3 : 0} color={color}>
           {title}
         </Text>
-        {props.step?.subSteps && <SubSteps color={color} subSteps={props.step.subSteps} />}
+        <NestedInfo color={color} subSteps={props.step.subSteps} />
       </VStack>
     </HStack>
   )
@@ -69,15 +68,15 @@ export function StepIndicator({
   )
 }
 
-function SubSteps({ color, subSteps }: { color: string; subSteps: SubSteps }) {
+function NestedInfo({ color, subSteps }: { color: string; subSteps?: SubSteps }) {
   return (
     <Box mt="1" pl="2" p="1">
-      {subSteps.gas === 0 && (
-        <Text fontSize="sm" color={color} mb="1">
-          Signature: Free
-        </Text>
-      )}
-      {subSteps.tokens.length > 1 &&
+      <Text fontSize="sm" color={color} mb="1">
+        {subSteps?.gasless ? 'Signature: Free' : 'Gas transaction'}
+      </Text>
+
+      {subSteps?.tokens &&
+        subSteps.tokens.length > 1 &&
         subSteps.tokens.map((subStep, index) => (
           <HStack mt="1" key={subStep}>
             <SubStepIndicator color={color} label={indexToLetter(index)} />

diff --git a/lib/modules/transactions/transaction-steps/useSignPermit2Step.tsx b/lib/modules/transactions/transaction-steps/useSignPermit2Step.tsx
@@ -68,7 +68,7 @@ export function useSignPermit2Step(params: AddLiquidityPermit2Params): Transacti
   const isComplete = () => signPermit2State === SignatureState.Completed
 
   const subSteps: SubSteps = {
-    gas: 0,
+    gasless: true,
     tokens: getTokenSymbols(getToken, params.pool.chain, params.queryOutput),
   }
 
@@ -91,7 +91,7 @@ export function useSignPermit2Step(params: AddLiquidityPermit2Params): Transacti
 }
 
 function getTitle(subSteps?: SubSteps): string {
-  if (!subSteps) return `Permit on balancer`
+  if (!subSteps?.tokens) return `Permit on balancer`
   if (subSteps.tokens.length === 1) return `${subSteps.tokens[0]}: Permit on balancer`
   return 'Permit tokens on balancer'
 }
diff --git a/lib/modules/transactions/transaction-steps/useSignRelayerStep.tsx b/lib/modules/transactions/transaction-steps/useSignRelayerStep.tsx
@@ -53,6 +53,7 @@ export function useSignRelayerStep(chain: GqlChain): TransactionStep {
     () => ({
       id: 'sign-relayer',
       stepType: 'signBatchRelayer',
+      subSteps: { gasless: true },
       labels: {
         title: 'Sign relayer',
         init: 'Sign relayer',