feat: add permit2 subSteps

lib/modules/transactions/transaction-steps/lib.tsx

@@ -69,9 +69,15 @@ type Executable = {
   setTxConfig?: any
 }
 
+export type SubSteps = {
+  tokens: string[]
+  gas: number
+}
+
 export type TransactionStep = {
   id: string
   stepType: StepType
+  subSteps?: SubSteps
   labels: TransactionLabels
   isComplete: () => boolean
   renderAction: () => ReactNode

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

@@ -13,7 +13,7 @@ type Props = {
 
 export function DesktopStepTracker({ chain, transactionSteps }: Props) {
   return (
-    <Card padding={0} width="200px" right="-224px" position="absolute">
+    <Card padding={0} width="250px" right="-274px" position="absolute">
       <VStack alignItems="flex-start" w="full">
         <HStack p="sm" pb="0" justify="space-between" w="full">
           <Heading fontWeight="bold" size="h6">

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

@@ -1,21 +1,31 @@
-import { CircularProgress, CircularProgressLabel, HStack, Text, VStack } from '@chakra-ui/react'
+import {
+  Box,
+  CircularProgress,
+  CircularProgressLabel,
+  HStack,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
 import { StepProps, getStepSettings } from './getStepSettings'
 import { Check } from 'react-feather'
 import { ManagedResult } from '../lib'
+import type { SubSteps } from '../lib'
 import { useTransactionState } from '../TransactionStateProvider'
+import { indexToLetter } from '@/lib/shared/labels'
 
 export function Step(props: StepProps) {
   const { getTransaction } = useTransactionState()
   const transaction = getTransaction(props.step.id)
   const { color, isActive, title } = getStepSettings(props, transaction)
 
   return (
-    <HStack alignItems="center">
+    <HStack alignItems="flex-start">
       <StepIndicator transaction={transaction} {...props}></StepIndicator>
       <VStack spacing="0" alignItems="start">
         <Text mt={isActive ? -0.3 : 0} color={color}>
           {title}
         </Text>
+        {props.step?.subSteps && <SubSteps color={color} subSteps={props.step.subSteps} />}
       </VStack>
     </HStack>
   )
@@ -58,3 +68,34 @@ export function StepIndicator({
     </CircularProgress>
   )
 }
+
+function SubSteps({ 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 &&
+        subSteps.tokens.map((subStep, index) => (
+          <HStack mt="1" key={subStep}>
+            <SubStepIndicator color={color} label={indexToLetter(index)} />
+            <Text fontSize="sm" color={color}>
+              {subStep}
+            </Text>
+          </HStack>
+        ))}
+    </Box>
+  )
+}
+
+function SubStepIndicator({ color, label }: { color: string; label: string }) {
+  return (
+    <CircularProgress value={100} trackColor="border.base" thickness="8" size="5" color={color}>
+      <CircularProgressLabel fontSize="sm" fontWeight="bold" color={color}>
+        {label}
+      </CircularProgressLabel>
+    </CircularProgress>
+  )
+}

lib/modules/transactions/transaction-steps/step-tracker/Steps.tsx

@@ -1,4 +1,4 @@
-import { Box, VStack } from '@chakra-ui/react'
+import { VStack } from '@chakra-ui/react'
 import { Step } from './Step'
 import { useThemeColorMode } from '@/lib/shared/services/chakra/useThemeColorMode'
 import { TransactionStepsResponse } from '../useTransactionSteps'
@@ -23,9 +23,9 @@ export function Steps({ transactionSteps }: Props) {
               colorMode={colorMode}
               isLastStep={isLastStep(index)}
             />
-            {!isLastStep(index) && (
+            {/* {!isLastStep(index) && (
               <Box h="4" w="1" rounded="full" background="border.base" ml="3" mt="1" />
-            )}
+            )} */}
           </div>
         ))}
     </VStack>

lib/modules/transactions/transaction-steps/useSignPermit2Step.tsx

@@ -10,17 +10,20 @@ import {
   useSignPermit2Transfer,
 } from '../../tokens/approvals/permit2/useSignPermit2Transfer'
 import { useChainSwitch } from '../../web3/useChainSwitch'
-import { TransactionStep } from './lib'
+import { SubSteps, TransactionStep } from './lib'
 import { usePermit2Nonces } from '../../tokens/approvals/permit2/usePermit2Nonces'
 import { getChainId } from '@/lib/config/app.config'
 import { SignatureState } from '../../web3/signatures/signature.helpers'
+import { getTokenAddresses, getTokenSymbols } from '../../pool/actions/LiquidityActionHelpers'
+import { useTokens } from '../../tokens/TokensProvider'
 
 export function useSignPermit2Step(params: AddLiquidityPermit2Params): TransactionStep {
   const { isConnected, userAddress } = useUserAccount()
+  const { getToken } = useTokens()
 
   const { isLoadingNonces, nonces } = usePermit2Nonces({
     chainId: getChainId(params.pool.chain),
-    tokenAddresses: params.queryOutput?.sdkQueryOutput.amountsIn.map(t => t.token.address),
+    tokenAddresses: getTokenAddresses(params.queryOutput),
     owner: userAddress,
     enabled: params.isPermit2,
   })
@@ -37,10 +40,12 @@ export function useSignPermit2Step(params: AddLiquidityPermit2Params): Transacti
     getChainId(params.pool.chain)
   )
 
-  const isLoading = isLoadingTransfer || isLoadingNonces
+  const isLoading =
+    isLoadingTransfer || isLoadingNonces || signPermit2State === SignatureState.Confirming
 
   const SignPermitButton = () => (
     <VStack width="full">
+      <div>signPermit2State: {signPermit2State}</div>
       {error && <BalAlert status="error" content={error} />}
       {!isConnected && <ConnectWallet width="full" isLoading={isLoading} />}
       {shouldChangeNetwork && isConnected && <NetworkSwitchButton {...networkSwitchButtonProps} />}
@@ -63,13 +68,18 @@ export function useSignPermit2Step(params: AddLiquidityPermit2Params): Transacti
 
   const isComplete = () => signPermit2State === SignatureState.Completed
 
+  const subSteps: SubSteps = {
+    gas: 0,
+    tokens: getTokenSymbols(getToken, params.pool.chain, params.queryOutput),
+  }
+
   return useMemo(
     () => ({
       id: 'sign-permit2',
       stepType: 'signPermit2',
+      subSteps,
       labels: {
-        // TODO: display nested permit tokens in Step Tracker
-        title: `Permit on balancer`,
+        title: getTitle(subSteps),
         init: `Permit transfer`,
         tooltip: 'Sign permit2 transfer',
       },
@@ -80,3 +90,9 @@ export function useSignPermit2Step(params: AddLiquidityPermit2Params): Transacti
     [signPermit2State, isLoading, isConnected]
   )
 }
+
+function getTitle(subSteps?: SubSteps): string {
+  if (!subSteps) return `Permit on balancer`
+  if (subSteps.tokens.length === 1) return `${subSteps.tokens[0]}: Permit on balancer`
+  return 'Permit tokens on balancer'
+}

lib/shared/labels.ts

@@ -1,4 +1,10 @@
-// Common labels used in app, helps keep common text consitent and easy to change.
+// Common labels used in app, helps keep common text consistent and easy to change.
 export const LABELS = {
   walletNotConnected: 'Wallet not connected',
 }
+
+// Converts an index to a letter. 0 is A, 1 is B, etc.
+export function indexToLetter(index: number): string {
+  if (index >= 0 && index <= 25) return String.fromCharCode(index + 65)
+  throw new Error('index but be between 0 and 25')
+}