Set the right description in WalletInteractionModal

dapp/src/components/TransactionModal/WalletInteractionModal.tsx

@@ -10,7 +10,8 @@ import {
   ProgressProps,
 } from "@chakra-ui/react"
 import { AcreSignIcon } from "#/assets/icons"
-import { useConnector } from "#/hooks"
+import { useActionFlowType, useConnector } from "#/hooks"
+import { ACTION_FLOW_TYPES } from "#/types"
 import { Alert, AlertIcon } from "../shared/Alert"
 import { TextMd } from "../shared/Typography"
 
@@ -23,16 +24,20 @@ type WalletInteractionStep = "opening-wallet" | "awaiting-transaction"
 
 const DATA: Record<
   WalletInteractionStep,
-  { header: string; description: string; progressProps?: ProgressProps }
+  {
+    header: string
+    description: (action: string) => string
+    progressProps?: ProgressProps
+  }
 > = {
   "opening-wallet": {
     header: "Opening your wallet for signature",
-    description:
-      "Confirm the deposit by signing the transaction with your wallet.",
+    description: (action) =>
+      `Confirm the ${action} by signing the transaction with your wallet.`,
   },
   "awaiting-transaction": {
     header: "Awaiting signature confirmation",
-    description: "Waiting for your wallet to confirm the transaction.",
+    description: () => "Waiting for your wallet to confirm the transaction.",
     progressProps: { transform: "scaleX(-1)" },
   },
 }
@@ -42,6 +47,7 @@ export default function WalletInteractionModal({
 }: {
   step: WalletInteractionStep
 }) {
+  const type = useActionFlowType()
   const connector = useConnector()
   const { header, description, progressProps } = DATA[step]
 
@@ -63,7 +69,11 @@ export default function WalletInteractionModal({
           />
           <Image src={connector?.icon} p={2} bg="black" {...ICON_STYLES} />
         </HStack>
-        <TextMd>{description}</TextMd>
+        <TextMd>
+          {description(
+            type === ACTION_FLOW_TYPES.STAKE ? "deposit" : "withdraw",
+          )}
+        </TextMd>
         {step === "awaiting-transaction" && (
           <Alert variant="elevated">
             <AlertIcon />