chore: actioned beard ui feedback

shapeshift · Oct 18, 2024 · 3dba081 · 3dba081
1 parent 2a2b465
commit 3dba081
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -907,7 +907,7 @@
       }
     },
     "permit2": {
-      "title": "Permit token transfer",
+      "title": "Permit token transfer:",
       "description": "Grant the smart contract permission to use %{symbol} on your behalf.",
       "tooltip": "This trade has an added security feature called 'Permit2' which requires you to grant permission for the application to complete the trade on your behalf.",
       "error": "A problem occurred signing Permit2 message",

diff --git a/...de/components/MultiHopTradeConfirm/components/ApprovalStep/components/ApprovalContent.tsx b/...de/components/MultiHopTradeConfirm/components/ApprovalStep/components/ApprovalContent.tsx
@@ -1,4 +1,5 @@
 import { Box, Button, Card, CircularProgress, Icon, Tooltip, VStack } from '@chakra-ui/react'
+import type { InterpolationOptions } from 'node-polyglot'
 import { FaInfoCircle } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { Row } from 'components/Row/Row'
@@ -9,6 +10,7 @@ export type ApprovalContentProps = {
   buttonTranslation: string
   isDisabled: boolean
   isLoading: boolean
+  subHeadingTranslation?: string | [string, InterpolationOptions]
   titleTranslation: string
   tooltipTranslation: string
   topRightContent?: JSX.Element
@@ -21,6 +23,7 @@ export const ApprovalContent = ({
   buttonTranslation,
   isDisabled,
   isLoading,
+  subHeadingTranslation,
   titleTranslation,
   tooltipTranslation,
   topRightContent,
@@ -35,7 +38,7 @@ export const ApprovalContent = ({
       <VStack width='full'>
         <Row px={2}>
           <Row.Label display='flex' alignItems='center'>
-            <Text color='text.subtle' translation={titleTranslation} />
+            <Text color='text.subtle' translation={titleTranslation} fontWeight='bold' />
             <Tooltip label={translate(tooltipTranslation)}>
               <Box ml={1}>
                 <Icon as={FaInfoCircle} color='text.subtle' fontSize='0.7em' />
@@ -48,6 +51,13 @@ export const ApprovalContent = ({
             </Row.Value>
           )}
         </Row>
+        {subHeadingTranslation && (
+          <Row px={2}>
+            <Row.Label textAlign='left' display='flex'>
+              <Text color='text.subtle' translation={subHeadingTranslation} />
+            </Row.Label>
+          </Row>
+        )}
         {children}
         <Button
           width='full'

diff --git a/...Trade/components/MultiHopTradeConfirm/components/ApprovalStep/hooks/usePermit2Content.tsx b/...Trade/components/MultiHopTradeConfirm/components/ApprovalStep/hooks/usePermit2Content.tsx
@@ -2,7 +2,6 @@ import type { TradeQuote, TradeQuoteStep } from '@shapeshiftoss/swapper'
 import { isSome } from '@shapeshiftoss/utils'
 import type { InterpolationOptions } from 'node-polyglot'
 import { useMemo } from 'react'
-import { Text } from 'components/Text'
 import { selectHopExecutionMetadata } from 'state/slices/tradeQuoteSlice/selectors'
 import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppSelector } from 'state/store'
@@ -50,24 +49,28 @@ export const usePermit2Content = ({
     return isDisabled
   }, [permit2.state, hopExecutionState])
 
+  const subHeadingTranslation: [string, InterpolationOptions] = useMemo(() => {
+    return ['trade.permit2.description', { symbol: tradeQuoteStep.sellAsset.symbol }]
+  }, [tradeQuoteStep])
+
   const content = useMemo(() => {
     if (hopExecutionState !== HopExecutionState.AwaitingPermit2) return
     return (
       <ApprovalContent
         buttonTranslation='trade.permit2.signMessage'
         isDisabled={isButtonDisabled}
-        isLoading={false /* TODO: loading state when signature in progress */}
+        isLoading={
+          /* NOTE: No loading state when signature in progress because it's instant */
+          false
+        }
+        subHeadingTranslation={subHeadingTranslation}
         titleTranslation='trade.permit2.title'
         tooltipTranslation='trade.permit2.tooltip'
         transactionExecutionState={permit2.state}
         onSubmit={signPermit2}
       />
     )
-  }, [hopExecutionState, isButtonDisabled, permit2.state, signPermit2])
-
-  const descriptionTranslation: [string, InterpolationOptions] = useMemo(() => {
-    return ['trade.permit2.description', { symbol: tradeQuoteStep.sellAsset.symbol }]
-  }, [tradeQuoteStep])
+  }, [hopExecutionState, isButtonDisabled, permit2.state, signPermit2, subHeadingTranslation])
 
   const description = useMemo(() => {
     const txLines = [
@@ -87,17 +90,9 @@ export const usePermit2Content = ({
         txLines={txLines}
         isError={permit2.state === TransactionExecutionState.Failed}
         errorTranslation='trade.permit2.error'
-      >
-        <Text color='text.subtle' translation={descriptionTranslation} fontWeight='bold' />
-      </SharedApprovalDescription>
+      />
     )
-  }, [
-    allowanceApproval.txHash,
-    allowanceReset.txHash,
-    descriptionTranslation,
-    permit2.state,
-    tradeQuoteStep,
-  ])
+  }, [allowanceApproval.txHash, allowanceReset.txHash, permit2.state, tradeQuoteStep])
 
   return {
     content,