diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/components/ApprovalContent.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/components/ApprovalContent.tsx index e99bfb9b3c1..6e41a03db5c 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/components/ApprovalContent.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/components/ApprovalContent.tsx @@ -12,7 +12,7 @@ export type ApprovalContentProps = { isLoading: boolean subHeadingTranslation?: string | [string, InterpolationOptions] titleTranslation: string - tooltipTranslation: string + tooltipTranslation: string | [string, InterpolationOptions] topRightContent?: JSX.Element transactionExecutionState: TransactionExecutionState onSubmit: () => void diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/hooks/usePermit2Content.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/hooks/usePermit2Content.tsx index c1509d26eda..a5e5c6b6a71 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/hooks/usePermit2Content.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep/hooks/usePermit2Content.tsx @@ -3,7 +3,10 @@ import { isSome } from '@shapeshiftoss/utils' import type { InterpolationOptions } from 'node-polyglot' import { useMemo } from 'react' import { useGetTradeQuotes } from 'components/MultiHopTrade/hooks/useGetTradeQuotes/useGetTradeQuotes' -import { selectHopExecutionMetadata } from 'state/slices/tradeQuoteSlice/selectors' +import { + selectActiveSwapperName, + selectHopExecutionMetadata, +} from 'state/slices/tradeQuoteSlice/selectors' import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types' import { useAppSelector } from 'state/store' @@ -37,6 +40,8 @@ export const usePermit2Content = ({ allowanceApproval, } = useAppSelector(state => selectHopExecutionMetadata(state, hopExecutionMetadataFilter)) + const swapperName = useAppSelector(selectActiveSwapperName) + const { signPermit2 } = useSignPermit2(tradeQuoteStep, hopIndex, activeTradeId) const { isLoading: isTradeQuotesLoading } = useGetTradeQuotes() @@ -55,6 +60,10 @@ export const usePermit2Content = ({ return ['trade.permit2Allowance.description', { symbol: tradeQuoteStep.sellAsset.symbol }] }, [tradeQuoteStep]) + const tooltipTranslation: [string, InterpolationOptions] = useMemo(() => { + return ['trade.permit2Eip712.tooltip', { swapperName }] + }, [swapperName]) + const content = useMemo(() => { if (hopExecutionState !== HopExecutionState.AwaitingPermit2Eip712Sign) return return ( @@ -66,8 +75,8 @@ export const usePermit2Content = ({ isTradeQuotesLoading } subHeadingTranslation={subHeadingTranslation} - titleTranslation='trade.permit2Allowance.title' - tooltipTranslation='trade.permit2Allowance.tooltip' + titleTranslation='trade.permit2Eip712.title' + tooltipTranslation={tooltipTranslation} transactionExecutionState={permit2.state} onSubmit={signPermit2} /> @@ -79,6 +88,7 @@ export const usePermit2Content = ({ permit2.state, signPermit2, subHeadingTranslation, + tooltipTranslation, ]) const description = useMemo(() => {