chore: update copies for multiple chains

src/components/Modal/TransactionModal/TransactionIsPending.tsx

@@ -1,51 +1,58 @@
 import { FC } from "react"
-import { Box, ModalBody, ModalHeader, ModalFooter } from "@chakra-ui/react"
-import { BodyLg, BodySm } from "@threshold-network/components"
+import {
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  BodyLg,
+  BodySm,
+  VStack,
+} from "@threshold-network/components"
 import ViewInBlockExplorer from "../../ViewInBlockExplorer"
 import { ExplorerDataType } from "../../../networks/enums/networks"
-import withBaseModal from "../withBaseModal"
-import { BaseModalProps } from "../../../types"
-import InfoBox from "../../InfoBox"
-import { ThresholdSpinner } from "../../ThresholdSpinner/ThresholdSpinner"
-import ModalCloseButton from "../ModalCloseButton"
-import { useIsActive } from "../../../hooks/useIsActive"
+import { useWeb3React } from "@web3-react/core"
+import { useNonEVMConnection } from "../../../hooks/useNonEVMConnection"
 
-interface TransactionIsPendingProps extends BaseModalProps {
-  pendingText?: string
+interface Props {
   transactionHash: string
 }
 
-const TransactionIsPending: FC<TransactionIsPendingProps> = ({
-  transactionHash,
-  pendingText = "Pending...",
-}) => {
-  const { chainId } = useIsActive()
+const TransactionIsPending: FC<Props> = ({ transactionHash }) => {
+  const { chainId } = useWeb3React()
+  const { isNonEVMActive } = useNonEVMConnection()
 
   return (
     <>
-      <ModalHeader>Confirm (pending)</ModalHeader>
-      <ModalCloseButton />
+      <ModalHeader>Transaction is pending</ModalHeader>
       <ModalBody>
-        <InfoBox py={12} variant="modal">
-          <ThresholdSpinner />
-          <BodyLg align="center" mt={8}>
-            {pendingText}
+        <VStack spacing={8}>
+          <Spinner
+            size="xl"
+            thickness="4px"
+            speed="0.65s"
+            emptyColor="gray.200"
+            color="brand.500"
+          />
+          <BodyLg>
+            Please wait a moment for your transaction to be confirmed.
           </BodyLg>
-        </InfoBox>
+        </VStack>
       </ModalBody>
-      <ModalFooter justifyContent="center">
-        <BodySm>
-          <ViewInBlockExplorer
-            text="View"
-            id={transactionHash}
-            type={ExplorerDataType.TRANSACTION}
-            ethereumNetworkChainId={chainId}
-          />{" "}
-          transaction on Etherscan
-        </BodySm>
-      </ModalFooter>
+      {!isNonEVMActive && (
+        <ModalFooter justifyContent="center">
+          <BodySm>
+            <ViewInBlockExplorer
+              text="View"
+              id={transactionHash}
+              type={ExplorerDataType.TRANSACTION}
+              ethereumNetworkChainId={chainId}
+            />{" "}
+            transaction on Etherscan
+          </BodySm>
+        </ModalFooter>
+      )}
     </>
   )
 }
 
-export default withBaseModal(TransactionIsPending)
+export default TransactionIsPending

src/pages/tBTC/Bridge/DepositDetails.tsx

@@ -76,6 +76,8 @@ import { BridgeProcessDetailsPageSkeleton } from "./components/BridgeProcessDeta
 import { DepositState } from "@keep-network/tbtc-v2.ts"
 import { getParameterNameFromChainId } from "../../../networks/utils"
 import { useIsActive } from "../../../hooks/useIsActive"
+import { getChainDisplayInfo } from "../../../utils/chainTextUtils"
+import { useThreshold } from "../../../contexts/ThresholdContext"
 
 export const DepositDetails: PageComponent = () => {
   const { depositKey } = useParams()
@@ -527,6 +529,15 @@ const StepSwitcher: FC = () => {
     isCrossChainDeposit,
   } = useDepositDetailsPageContext()
   const { chainId } = useIsActive()
+  const threshold = useThreshold()
+
+  // Get the non-EVM chain name for cross-chain deposits
+  const nonEVMChainName =
+    (isCrossChainDeposit && threshold?.tbtc?.crossChainConfig?.chainName) ||
+    null
+
+  // Get chain display info
+  const chainInfo = getChainDisplayInfo(nonEVMChainName, chainId)
 
   const onComplete = useCallback(() => {
     if (step === "completed") return
@@ -578,8 +589,8 @@ const StepSwitcher: FC = () => {
           {isCrossChainDeposit ? (
             <BodyMd mt="2">
               Your tokens have been minted and bridged to the depositor wallet
-              on the {getParameterNameFromChainId(chainId)} network - This
-              action usually takes a few minutes to complete this process.
+              on the {chainInfo.chainName} network - This action usually takes a
+              few minutes to complete this process.
             </BodyMd>
           ) : (
             <BodyMd mt="2">

src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx

@@ -16,6 +16,9 @@ import { Toast } from "../../../../components/Toast"
 import { useModal } from "../../../../hooks/useModal"
 import { PosthogButtonId } from "../../../../types/posthog"
 import SubmitTxButton from "../../../../components/SubmitTxButton"
+import { useIsActive } from "../../../../hooks/useIsActive"
+import { useNonEVMConnection } from "../../../../hooks/useNonEVMConnection"
+import { getChainDisplayInfo } from "../../../../utils/chainTextUtils"
 
 const InitiateMintingComponent: FC<{
   utxo: BitcoinUtxo
@@ -24,6 +27,10 @@ const InitiateMintingComponent: FC<{
   const { tBTCMintAmount, updateState } = useTbtcState()
   const threshold = useThreshold()
   const { closeModal } = useModal()
+  const { chainId } = useIsActive()
+  const { nonEVMChainName } = useNonEVMConnection()
+
+  const chainInfo = getChainDisplayInfo(nonEVMChainName, chainId)
 
   const onSuccessfulDepositReveal = () => {
     updateState("mintingStep", MintingStep.MintingSuccess)
@@ -90,11 +97,7 @@ const InitiateMintingComponent: FC<{
             />
           </Skeleton>
         </H5>
-        <BodyLg>
-          Receiving tBTC requires a single transaction and takes approximately 2
-          hours. The bridging can be initiated before you get all your Bitcoin
-          deposit confirmations.
-        </BodyLg>
+        <BodyLg>{chainInfo.mintingProcessDescription}</BodyLg>
       </InfoBox>
       <MintingTransactionDetails />
       <SubmitTxButton

src/pages/tBTC/Bridge/Minting/MakeDeposit.tsx

@@ -37,6 +37,9 @@ import {
   SendBitcoinsToDepositAddressForm,
   SendBitcoinsToDepositAddressFormValues,
 } from "../../../../components/tBTC"
+import { useIsActive } from "../../../../hooks/useIsActive"
+import { useNonEVMConnection } from "../../../../hooks/useNonEVMConnection"
+import { getChainDisplayInfo } from "../../../../utils/chainTextUtils"
 
 const AddressRow: FC<
   { address: string; text: string } & Pick<ViewInBlockExplorerProps, "chain">
@@ -66,9 +69,10 @@ const BTCAddressCard: FC<ComponentProps<typeof Card>> = ({
   )
 }
 
-const BTCAddressSection: FC<{ btcDepositAddress: string }> = ({
-  btcDepositAddress,
-}) => {
+const BTCAddressSection: FC<{
+  btcDepositAddress: string
+  chainName: string
+}> = ({ btcDepositAddress, chainName }) => {
   const titleColor = useColorModeValue("gray.700", "gray.100")
   const btcAddressColor = useColorModeValue("brand.500", "white")
 
@@ -93,7 +97,7 @@ const BTCAddressSection: FC<{ btcDepositAddress: string }> = ({
         <BodyMd color={titleColor}>BTC Deposit Address</BodyMd>
         <TooltipIcon
           color={titleColor}
-          label="This is a unique BTC address generated based on the ETH address and Recovery address you provided. Send your BTC funds to this address in order to mint tBTC."
+          label={`This is a unique BTC address generated based on the ${chainName} address and Recovery address you provided. Send your BTC funds to this address in order to mint tBTC.`}
         />
       </HStack>
       <BTCAddressCard p="2.5" display="flex" justifyContent="center">
@@ -143,6 +147,10 @@ const MakeDepositComponent: FC<{
     btcRecoveryAddress,
     updateState,
   } = useTbtcState()
+  const { chainId } = useIsActive()
+  const { nonEVMChainName } = useNonEVMConnection()
+
+  const chainInfo = getChainDisplayInfo(nonEVMChainName, chainId)
 
   // ↓ Ledger Live App ↓
   const { isEmbed } = useIsEmbed()
@@ -194,7 +202,10 @@ const MakeDepositComponent: FC<{
         This address is single use only. To make a second deposit, please
         generate a new address.
       </BodyMd>
-      <BTCAddressSection btcDepositAddress={btcDepositAddress} />
+      <BTCAddressSection
+        btcDepositAddress={btcDepositAddress}
+        chainName={chainInfo.chainName}
+      />
       <Alert status="info" mt={6}>
         <AlertIcon />
         <BodySm>

src/pages/tBTC/Bridge/Minting/MintingTimeline.tsx

@@ -11,6 +11,12 @@ import { useTbtcState } from "../../../../hooks/useTbtcState"
 import { MintingStep } from "../../../../types/tbtc"
 import Link from "../../../../components/Link"
 import { ExternalHref } from "../../../../enums"
+import { useIsActive } from "../../../../hooks/useIsActive"
+import { useNonEVMConnection } from "../../../../hooks/useNonEVMConnection"
+import {
+  getGenericWalletLabel,
+  getChainDisplayInfo,
+} from "../../../../utils/chainTextUtils"
 
 type MintingTimelineItemBaseProps = {
   isActive: boolean
@@ -80,6 +86,10 @@ export const MintingTimelineStep1: FC<MintingTimelineItemProps> = ({
   isComplete,
   ...restProps
 }) => {
+  const { chainId } = useIsActive()
+  const { nonEVMChainName } = useNonEVMConnection()
+  const walletLabel = getGenericWalletLabel(nonEVMChainName, chainId)
+
   return (
     <MintingTimelineItem
       isActive={isActive}
@@ -88,7 +98,7 @@ export const MintingTimelineStep1: FC<MintingTimelineItemProps> = ({
       label="Provide a Deposit Address"
       description={
         <>
-          Provide an ETH address and a BTC Return address to generate a unique
+          Provide a {walletLabel} and a BTC Return address to generate a unique
           BTC deposit address. <br />
           <Link isExternal href={ExternalHref.btcRecoveryAddress}>
             Read more
@@ -122,14 +132,18 @@ export const MintingTimelineStep3: FC<MintingTimelineItemProps> = ({
   isComplete,
   ...restProps
 }) => {
+  const { chainId } = useIsActive()
+  const { nonEVMChainName } = useNonEVMConnection()
+  const chainInfo = getChainDisplayInfo(nonEVMChainName, chainId)
+
   return (
     <MintingTimelineItem
       isActive={isActive}
       // we never render the complete state for this step
       isComplete={isComplete}
       stepNumber={3}
       label="Initiate minting"
-      description="Minting tBTC does not require you to wait for the Bitcoin confirmations. Sign an Ethereum transaction in your wallet and your tBTC will arrive in around 1 to 3 hours."
+      description={`Minting tBTC does not require you to wait for the Bitcoin confirmations. Sign a transaction in your ${chainInfo.chainName} wallet and your tBTC will arrive in around 1 to 3 hours.`}
       {...restProps}
     />
   )

src/pages/tBTC/Bridge/Minting/ProvideData.tsx

@@ -50,6 +50,7 @@ import { RootState } from "../../../../store"
 import { tbtcSlice } from "../../../../store/tbtc/tbtcSlice"
 import { accountSlice } from "../../../../store/account/slice"
 import { useNonEVMConnection } from "../../../../hooks/useNonEVMConnection"
+import { getChainDisplayInfo } from "../../../../utils/chainTextUtils"
 
 export interface FormValues {
   userWalletAddress: string
@@ -72,6 +73,10 @@ const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
 }) => {
   const dispatch = useAppDispatch()
   const threshold = useThreshold()
+  const { chainId } = useIsActive()
+  const { nonEVMChainName } = useNonEVMConnection()
+
+  const chainInfo = getChainDisplayInfo(nonEVMChainName, chainId)
 
   const resolvedBTCAddressPrefix = getBridgeBTCSupportedAddressPrefixesText(
     "mint",
@@ -102,8 +107,8 @@ const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
       <FormikInput
         name="userWalletAddress"
         label="User Wallet Address"
-        placeholder="Address where you'll receive your tBTC"
-        tooltip="The address is prepopulated with your wallet address. This is the address where you'll receive your tBTC."
+        placeholder={`Address where you'll receive your tBTC on ${chainInfo.chainName}`}
+        tooltip={chainInfo.walletAddressTooltip}
         mb={6}
         isReadOnly={true}
       />

src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx

@@ -5,10 +5,18 @@ import {
 } from "../../../../components/TransactionDetails"
 import { useTbtcState } from "../../../../hooks/useTbtcState"
 import shortenAddress from "../../../../utils/shortenAddress"
+import { useIsActive } from "../../../../hooks/useIsActive"
+import { useNonEVMConnection } from "../../../../hooks/useNonEVMConnection"
+import { getChainDisplayInfo } from "../../../../utils/chainTextUtils"
 
 const MintingTransactionDetails = () => {
   const { tBTCMintAmount, mintingFee, thresholdNetworkFee, userWalletAddress } =
     useTbtcState()
+  const { chainId } = useIsActive()
+  const { nonEVMChainName } = useNonEVMConnection()
+
+  const chainInfo = getChainDisplayInfo(nonEVMChainName, chainId)
+
   return (
     <List spacing="2" mb="6">
       <TransactionDetailsAmountItem
@@ -31,7 +39,7 @@ const MintingTransactionDetails = () => {
         higherPrecision={8}
       />
       <TransactionDetailsItem
-        label="ETH address"
+        label={chainInfo.recipientLabel}
         value={shortenAddress(userWalletAddress)}
       />
     </List>