From ce3e254e69a3c5d855f7d9b8b0d5b257c7b6e03b Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Wed, 6 Sep 2023 23:16:49 +0100
Subject: [PATCH] refactor: replace TextHint with Alert from bloom-ui

---
 .../BurnNativeTokensConfirmationPopup.svelte  |  6 +-
 .../popups/BurnNativeTokensPopup.svelte       |  5 +-
 .../popups/CheckForUpdatesPopup.svelte        | 11 ++--
 .../popups/ConfirmationPopup.svelte           |  8 ++-
 .../popups/ConnectLedgerPopup.svelte          | 13 ++--
 .../popups/DeepLinkErrorPopup.svelte          |  5 +-
 .../popups/DeleteAccountPopup.svelte          |  5 +-
 .../popups/ManageVotingPowerPopup.svelte      |  9 +--
 .../popups/RemoveProposalPopup.svelte         | 11 ++--
 .../components/popups/RevotePopup.svelte      |  9 +--
 .../components/popups/SignMessagePopup.svelte | 24 ++++---
 .../components/popups/StopVotingPopup.svelte  | 11 ++--
 .../popups/TokenInformationPopup.svelte       |  6 +-
 .../VerifyLedgerTransactionPopup.svelte       | 12 ++--
 .../popups/VoteForProposalPopup.svelte        | 10 +--
 .../popups/VotingPowerToZeroPopup.svelte      | 11 ++--
 .../popups/WalletFinderPopup.svelte           |  6 +-
 .../views/RemoveContactDrawer.svelte          | 12 ++--
 .../views/RemoveNetworkAddressesDrawer.svelte | 15 ++---
 .../components/DappInformationCard.svelte     |  5 +-
 .../views/ConnectedDappsDrawer.svelte         |  9 +--
 .../views/InputConnectionCodeDrawer.svelte    | 11 ++--
 .../views/ProposalDetailsView.svelte          | 12 ++--
 .../views/login/views/EnterPinView.svelte     |  5 +-
 .../views/FinishOnboardingView.svelte         |  5 +-
 .../views/ChangePasswordView.svelte           |  5 +-
 .../views/UpdateBackupView.svelte             |  5 +-
 .../shared/src/components/TextHint.svelte     | 63 -------------------
 packages/shared/src/components/index.js       |  1 -
 29 files changed, 131 insertions(+), 179 deletions(-)
 delete mode 100644 packages/shared/src/components/TextHint.svelte

diff --git a/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte b/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte
index d4cbc90956..ded05d9cd6 100644
--- a/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte
+++ b/packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { selectedAccount } from '@core/account/stores'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
@@ -7,7 +7,7 @@
     import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
     import { burnToken } from '@core/wallet'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { Button, ButtonVariant, FontWeight, Text, TextHint, TextType } from '@ui'
+    import { Button, ButtonVariant, FontWeight, Text, TextType } from '@ui'
     import { onMount } from 'svelte'
 
     export let token: ITokenWithBalance
@@ -68,7 +68,7 @@
                 },
             ]}
         />
-        <TextHint warning text={localize('actions.confirmTokenBurn.hint')} />
+        <Alert variant="warning" text={localize('actions.confirmTokenBurn.hint')} />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-full" outline onClick={onBackClick}>{localize('actions.back')}</Button>
diff --git a/packages/desktop/components/popups/BurnNativeTokensPopup.svelte b/packages/desktop/components/popups/BurnNativeTokensPopup.svelte
index 2744bf5c05..fcfcf5e95d 100644
--- a/packages/desktop/components/popups/BurnNativeTokensPopup.svelte
+++ b/packages/desktop/components/popups/BurnNativeTokensPopup.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+    import { Alert } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { ITokenWithBalance } from '@core/token'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { Button, FontWeight, Text, TextHint, TextType, TokenAmountWithSliderInput } from '@ui'
+    import { Button, FontWeight, Text, TextType, TokenAmountWithSliderInput } from '@ui'
 
     export let token: ITokenWithBalance
     export let rawAmount: string = '0'
@@ -32,7 +33,7 @@
     </Text>
     <div class="space-y-4">
         <TokenAmountWithSliderInput bind:this={tokenAmountInput} bind:rawAmount {token} />
-        <TextHint warning text={localize('actions.confirmTokenBurn.hint')} />
+        <Alert variant="warning" text={localize('actions.confirmTokenBurn.hint')} />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-full" outline onClick={closePopup}>{localize('actions.cancel')}</Button>
diff --git a/packages/desktop/components/popups/CheckForUpdatesPopup.svelte b/packages/desktop/components/popups/CheckForUpdatesPopup.svelte
index f121236b61..46f14e847a 100644
--- a/packages/desktop/components/popups/CheckForUpdatesPopup.svelte
+++ b/packages/desktop/components/popups/CheckForUpdatesPopup.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { APP_STAGE, OS, checkForAppUpdate, openUrlInBrowser } from '@core/app'
     import { downloadAppUpdate } from '@core/app/actions'
     import { appUpdateState, appVersionDetails } from '@core/app/stores'
     import { formatDate, localize } from '@core/i18n'
     import { closePopup } from '@desktop/auxiliary/popup'
     import features from '@features/features'
-    import { Button, Text, TextHint, TextType } from '@ui'
+    import { Button, Text, TextType } from '@ui'
     import { onMount } from 'svelte'
 
     let hasAutoUpdate = false
@@ -48,7 +48,7 @@
             ]}
         />
         {#if $appVersionDetails.upToDate}
-            <TextHint success classes="w-full" text={localize('popups.appUpdate.latestInstalled')} />
+            <Alert variant="success" text={localize('popups.appUpdate.latestInstalled')} />
         {:else}
             <Table
                 items={[
@@ -65,9 +65,8 @@
                     },
                 ]}
             />
-            <TextHint
-                info
-                classes="w-full"
+            <Alert
+                variant="info"
                 text={localize(`popups.appUpdate.${hasAutoUpdate ? 'updateAvailable' : 'updatesDisabled'}`)}
             />
         {/if}
diff --git a/packages/desktop/components/popups/ConfirmationPopup.svelte b/packages/desktop/components/popups/ConfirmationPopup.svelte
index 4178b3742e..6b9685ae20 100644
--- a/packages/desktop/components/popups/ConfirmationPopup.svelte
+++ b/packages/desktop/components/popups/ConfirmationPopup.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { Button, Text, TextHint, FontWeight, TextType, ButtonVariant } from '@ui'
+    import { Alert } from '@bloomwalletio/ui'
+    import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
     import { closePopup } from '@desktop/auxiliary/popup'
-    import { handleError } from '@core/error/handlers'
+    import { Button, ButtonVariant, FontWeight, Text, TextType } from '@ui'
     import { onMount } from 'svelte'
 
     export let title: string
@@ -18,6 +19,7 @@
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
 
     let isBusy = false
+    $: variant = info ? 'info' : success ? 'success' : warning ? 'warning' : danger ? 'danger' : 'info'
 
     async function onConfirmClick(): Promise<void> {
         isBusy = true
@@ -58,7 +60,7 @@
             <Text fontSize="14" classes="text-left break-words">{description}</Text>
         {/if}
         {#if hint}
-            <TextHint {info} {success} {warning} {danger} text={hint} />
+            <Alert {variant} text={hint} />
         {/if}
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
diff --git a/packages/desktop/components/popups/ConnectLedgerPopup.svelte b/packages/desktop/components/popups/ConnectLedgerPopup.svelte
index 2c2bdcce55..9a44be8f36 100644
--- a/packages/desktop/components/popups/ConnectLedgerPopup.svelte
+++ b/packages/desktop/components/popups/ConnectLedgerPopup.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
+    import { Alert } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import {
-        LedgerConnectionState,
         LedgerAppName,
+        LedgerConnectionState,
         determineLedgerConnectionState,
         ledgerNanoStatus,
     } from '@core/ledger'
     import { isFunction } from '@core/utils'
-    import { Button, LedgerAnimation, Text, TextHint, FontWeight, TextType } from '@ui'
     import { closePopup } from '@desktop/auxiliary/popup'
+    import { Button, FontWeight, LedgerAnimation, Text, TextType } from '@ui'
 
     export let ledgerAppName: LedgerAppName
     export let onCancel: () => void
@@ -61,13 +62,13 @@
     </Text>
     <LedgerAnimation {animation} />
     {#if isNotConnected}
-        <TextHint danger text={localize('popups.ledgerNotConnected.notConnected')} />
+        <Alert variant="danger" text={localize('popups.ledgerNotConnected.notConnected')} />
     {:else if isLocked}
-        <TextHint warning text={localize('popups.ledgerNotConnected.locked')} />
+        <Alert variant="warning" text={localize('popups.ledgerNotConnected.locked')} />
     {:else if isAppNotOpen}
-        <TextHint info text={localize('popups.ledgerNotConnected.appNotOpen', { appName: ledgerAppName })} />
+        <Alert variant="info" text={localize('popups.ledgerNotConnected.appNotOpen', { appName: ledgerAppName })} />
     {:else if isCorrectAppOpen}
-        <TextHint success text={localize('popups.ledgerNotConnected.correctAppOpen')} />
+        <Alert variant="success" text={localize('popups.ledgerNotConnected.correctAppOpen')} />
     {/if}
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-full" outline onClick={onCancelClick}>
diff --git a/packages/desktop/components/popups/DeepLinkErrorPopup.svelte b/packages/desktop/components/popups/DeepLinkErrorPopup.svelte
index 9708f070e2..09dcb4b0e0 100644
--- a/packages/desktop/components/popups/DeepLinkErrorPopup.svelte
+++ b/packages/desktop/components/popups/DeepLinkErrorPopup.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+    import { Alert } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { Text, Button, TextHint, FontWeight } from '@ui'
     import { closePopup } from '@desktop/auxiliary/popup'
+    import { Button, FontWeight, Text } from '@ui'
 
     export let error: Error
 </script>
@@ -12,7 +13,7 @@
     </Text>
     <div class="flex flex-col space-y-4">
         <Text fontSize="15" color="gray-700" classes="text-left">{localize('popups.deeplinkError.body')}</Text>
-        <TextHint danger text={error.message} />
+        <Alert variant="danger" text={error.message} />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-1/2" secondary onClick={closePopup}>{localize('actions.close')}</Button>
diff --git a/packages/desktop/components/popups/DeleteAccountPopup.svelte b/packages/desktop/components/popups/DeleteAccountPopup.svelte
index deb0cde620..d726421a1a 100644
--- a/packages/desktop/components/popups/DeleteAccountPopup.svelte
+++ b/packages/desktop/components/popups/DeleteAccountPopup.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+    import { Alert } from '@bloomwalletio/ui'
     import { selectedAccount } from '@core/account/stores'
     import { handleError } from '@core/error/handlers/handleError'
     import { localize } from '@core/i18n'
     import { setStrongholdPassword } from '@core/profile-manager'
     import { isSoftwareProfile } from '@core/profile/stores'
     import { closePopup } from '@desktop/auxiliary/popup'
-    import { Button, ButtonVariant, Error, HTMLButtonType, PasswordInput, Text, TextHint, TextType } from '@ui'
+    import { Button, ButtonVariant, Error, HTMLButtonType, PasswordInput, Text, TextType } from '@ui'
 
     export let deleteAccount: (index: number) => Promise<void> = async () => {}
 
@@ -47,7 +48,7 @@
 </div>
 <form on:submit|preventDefault={onDeleteClick} class="flex w-full flex-col space-y-5">
     <Text secondary>{localize('popups.deleteAccount.body')}</Text>
-    <TextHint info text={localize('popups.deleteAccount.hint')} />
+    <Alert variant="info" text={localize('popups.deleteAccount.hint')} />
     <div class="flex w-full flex-col space-y-3">
         {#if $isSoftwareProfile}
             <Text secondary>{localize('popups.deleteAccount.typePassword')}</Text>
diff --git a/packages/desktop/components/popups/ManageVotingPowerPopup.svelte b/packages/desktop/components/popups/ManageVotingPowerPopup.svelte
index bc1ab297e6..df9b66d133 100644
--- a/packages/desktop/components/popups/ManageVotingPowerPopup.svelte
+++ b/packages/desktop/components/popups/ManageVotingPowerPopup.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
+    import { Alert } from '@bloomwalletio/ui'
     import { setVotingPower } from '@contexts/governance/actions'
     import { isAccountVoting } from '@contexts/governance/utils'
     import { selectedAccount } from '@core/account/stores'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
-    import { activeProfile } from '@core/profile/stores'
     import { checkActiveProfileAuth } from '@core/profile/actions'
-    import { visibleSelectedAccountTokens } from '@core/token/stores'
+    import { activeProfile } from '@core/profile/stores'
     import { convertToRawAmount } from '@core/token'
+    import { visibleSelectedAccountTokens } from '@core/token/stores'
     import { PopupId, closePopup, openPopup, popupState } from '@desktop/auxiliary/popup'
-    import { Button, Text, TextHint, TokenAmountWithSliderInput } from '@ui'
+    import { Button, Text, TokenAmountWithSliderInput } from '@ui'
     import { HTMLButtonType, TextType } from '@ui/enums'
     import { onMount } from 'svelte'
 
@@ -86,7 +87,7 @@
             disabled={hasTransactionInProgress}
             {votingPower}
         />
-        <TextHint info text={localize('popups.manageVotingPower.hint')} />
+        <Alert variant="info" text={localize('popups.manageVotingPower.hint')} />
     </div>
     <div class="flex flex-row flex-nowrap w-full space-x-4">
         <Button outline disabled={hasTransactionInProgress} classes="w-full" onClick={onCancelClick}>
diff --git a/packages/desktop/components/popups/RemoveProposalPopup.svelte b/packages/desktop/components/popups/RemoveProposalPopup.svelte
index cf65a91304..7bfa63b8fc 100644
--- a/packages/desktop/components/popups/RemoveProposalPopup.svelte
+++ b/packages/desktop/components/popups/RemoveProposalPopup.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { showNotification } from '@auxiliary/notification'
+    import { Alert } from '@bloomwalletio/ui'
     import { ProposalStatus } from '@contexts/governance/enums'
     import {
         clearSelectedParticipationEventStatus,
@@ -7,13 +8,13 @@
         selectedProposal,
         selectedProposalId,
     } from '@contexts/governance/stores'
-    import { closePopup } from '@desktop/auxiliary/popup'
     import { selectedAccount } from '@core/account/stores'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
     import { updateActiveAccountPersistedData } from '@core/profile/actions'
     import { governanceRouter } from '@core/router'
-    import { Button, Text, TextHint, TextType } from '@ui'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import { Button, Text, TextType } from '@ui'
     import { ButtonVariant } from '@ui/enums'
 
     function onCancelClick(): void {
@@ -45,7 +46,7 @@
     }
 
     // TODO: User can only remove a proposal when he is not voting for it
-    $: isTextHintVisible =
+    $: showAlert =
         $selectedProposal?.status === ProposalStatus.Commencing || $selectedProposal?.status === ProposalStatus.Holding
 </script>
 
@@ -53,8 +54,8 @@
     <Text type={TextType.h3}>{localize('popups.removeProposal.title')}</Text>
     <div class="flex flex-col w-full space-y-4 mt-6">
         <Text fontSize="15">{localize('popups.removeProposal.body')}</Text>
-        {#if isTextHintVisible}
-            <TextHint info text={localize('popups.removeProposal.hint')} />
+        {#if showAlert}
+            <Alert variant="info" text={localize('popups.removeProposal.hint')} />
         {/if}
     </div>
     <div class="flex w-full space-x-4 mt-6">
diff --git a/packages/desktop/components/popups/RevotePopup.svelte b/packages/desktop/components/popups/RevotePopup.svelte
index 4f37440c17..3035a816fe 100644
--- a/packages/desktop/components/popups/RevotePopup.svelte
+++ b/packages/desktop/components/popups/RevotePopup.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { Button, Text, TextHint, HTMLButtonType, TextType } from '@ui'
+    import { Alert } from '@bloomwalletio/ui'
+    import { vote } from '@contexts/governance/actions'
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
-    import { closePopup } from '@desktop/auxiliary/popup'
     import { checkActiveProfileAuth } from '@core/profile/actions'
-    import { vote } from '@contexts/governance/actions'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import { Button, HTMLButtonType, Text, TextType } from '@ui'
 
     $: hasGovernanceTransactionInProgress =
         $selectedAccount?.hasVotingPowerTransactionInProgress || $selectedAccount?.hasVotingTransactionInProgress
@@ -20,7 +21,7 @@
 <form id="manage-voting-power" class="space-y-5" on:submit|preventDefault={onSubmit}>
     <Text type={TextType.h4} classes="mb-3">{localize('popups.revote.title')}</Text>
     <Text type={TextType.p}>{localize('popups.revote.body')}</Text>
-    <TextHint info text={localize('popups.revote.hint')} />
+    <Alert variant="info" text={localize('popups.revote.hint')} />
     <Button
         type={HTMLButtonType.Submit}
         disabled={hasGovernanceTransactionInProgress}
diff --git a/packages/desktop/components/popups/SignMessagePopup.svelte b/packages/desktop/components/popups/SignMessagePopup.svelte
index 43501aa6f6..1d85fdd34b 100644
--- a/packages/desktop/components/popups/SignMessagePopup.svelte
+++ b/packages/desktop/components/popups/SignMessagePopup.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-    import { Button, Text, TextHint, FontWeight, TextType, AccountLabel } from '@ui'
-    import { localize } from '@core/i18n'
-    import { closePopup } from '@desktop/auxiliary/popup'
-    import { handleError } from '@core/error/handlers'
-    import { onMount } from 'svelte'
-    import { selectedAccount } from '@core/account/stores'
-    import { sleep, truncateString } from '@core/utils'
     import { IConnectedDapp } from '@auxiliary/wallet-connect/interface'
+    import { CallbackParameters } from '@auxiliary/wallet-connect/types'
+    import { Alert } from '@bloomwalletio/ui'
     import { IAccountState } from '@core/account'
+    import { selectedAccount } from '@core/account/stores'
+    import { handleError } from '@core/error/handlers'
+    import { localize } from '@core/i18n'
     import { IChain } from '@core/network'
-    import { CallbackParameters } from '@auxiliary/wallet-connect/types'
+    import { sleep, truncateString } from '@core/utils'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import { AccountLabel, Button, FontWeight, Text, TextType } from '@ui'
+    import { onMount } from 'svelte'
 
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
     export let message: string
@@ -84,9 +85,12 @@
             </Text>
         </section>
         {#if dapp}
-            <TextHint info text={localize('popups.signMessage.hint', { dappName: dapp.metadata?.name ?? 'Unkown' })} />
+            <Alert
+                variant="info"
+                text={localize('popups.signMessage.hint', { dappName: dapp.metadata?.name ?? 'Unkown' })}
+            />
         {:else}
-            <TextHint warning text={localize('popups.signMessage.warning')} />
+            <Alert variant="warning" text={localize('popups.signMessage.warning')} />
         {/if}
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
diff --git a/packages/desktop/components/popups/StopVotingPopup.svelte b/packages/desktop/components/popups/StopVotingPopup.svelte
index 1f0984c1f0..f2e6baf727 100644
--- a/packages/desktop/components/popups/StopVotingPopup.svelte
+++ b/packages/desktop/components/popups/StopVotingPopup.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-    import { Button, Text, TextType, TextHint } from '@ui'
-    import { ButtonVariant } from '@ui/enums'
-    import { closePopup } from '@desktop/auxiliary/popup'
+    import { Alert } from '@bloomwalletio/ui'
     import { stopVotingForProposal } from '@contexts/governance/actions'
     import { selectedProposal } from '@contexts/governance/stores'
-    import { localize } from '@core/i18n'
     import { selectedAccount } from '@core/account/stores'
+    import { localize } from '@core/i18n'
     import { checkActiveProfileAuth } from '@core/profile/actions'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import { Button, Text, TextType } from '@ui'
+    import { ButtonVariant } from '@ui/enums'
 
     $: hasGovernanceTransactionInProgress =
         $selectedAccount?.hasVotingPowerTransactionInProgress || $selectedAccount?.hasVotingTransactionInProgress
@@ -29,7 +30,7 @@
         <Text fontSize="15"
             >{localize('popups.stopVoting.body', { values: { proposalName: $selectedProposal?.title } })}</Text
         >
-        <TextHint info text={localize('popups.stopVoting.hint')} />
+        <Alert variant="info" text={localize('popups.stopVoting.hint')} />
     </div>
     <div class="flex w-full space-x-4 mt-6">
         <Button outline classes="w-full" disabled={hasGovernanceTransactionInProgress} onClick={onCancelClick}
diff --git a/packages/desktop/components/popups/TokenInformationPopup.svelte b/packages/desktop/components/popups/TokenInformationPopup.svelte
index e8cf32b1b9..d69344620d 100644
--- a/packages/desktop/components/popups/TokenInformationPopup.svelte
+++ b/packages/desktop/components/popups/TokenInformationPopup.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { BASE_TOKEN_ID, ITokenWithBalance, NotVerifiedStatus, TokenStandard, VerifiedStatus } from '@core/token'
     import { unverifyToken, verifyToken } from '@core/token/stores'
     import { SendFlowType, setSendFlowParameters } from '@core/wallet'
     import { PopupId, openPopup, updatePopupProps } from '@desktop/auxiliary/popup'
     import { Icon as IconEnum } from '@lib/auxiliary/icon'
-    import { Button, FontWeight, Text, TextHint, TextType, TokenActionsButton, TokenAmountTile, TooltipIcon } from '@ui'
+    import { Button, FontWeight, Text, TextType, TokenActionsButton, TokenAmountTile, TooltipIcon } from '@ui'
     import { SendFlowRoute, SendFlowRouter, sendFlowRouter } from '@views/dashboard/send-flow'
 
     export let token: ITokenWithBalance | undefined
@@ -110,7 +110,7 @@
         />
 
         {#if !token.verification?.verified && token.verification?.status === NotVerifiedStatus.New}
-            <TextHint warning text={localize('popups.tokenInformation.verificationWarning')} />
+            <Alert variant="warning" text={localize('popups.tokenInformation.verificationWarning')} />
         {/if}
 
         <div class="flex flex-row flex-nowrap w-full space-x-4">
diff --git a/packages/desktop/components/popups/VerifyLedgerTransactionPopup.svelte b/packages/desktop/components/popups/VerifyLedgerTransactionPopup.svelte
index 101b01f98b..d34b1616d2 100644
--- a/packages/desktop/components/popups/VerifyLedgerTransactionPopup.svelte
+++ b/packages/desktop/components/popups/VerifyLedgerTransactionPopup.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
-    import { Text, TextHint, LedgerAnimation, TextType } from '@ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
+    import { resetShowInternalVerificationPopup, showInternalVerificationPopup } from '@core/ledger'
+    import { getBaseToken } from '@core/profile/actions'
+    import { formatTokenAmountBestMatch } from '@core/token/utils'
     import { formatHexString } from '@core/utils'
+    import { LedgerAnimation, Text, TextType } from '@ui'
     import { onDestroy } from 'svelte'
-    import { showInternalVerificationPopup, resetShowInternalVerificationPopup } from '@core/ledger'
-    import { formatTokenAmountBestMatch } from '@core/token/utils'
-    import { getBaseToken } from '@core/profile/actions'
 
     export let isEvmTransaction: boolean
     export let useBlindSigning: boolean
@@ -80,6 +80,6 @@
             ]}
         />
     {:else if $showInternalVerificationPopup}
-        <TextHint info text={localize('popups.verifyInternalLedgerTransaction.hint')} />
+        <Alert variant="info" text={localize('popups.verifyInternalLedgerTransaction.hint')} />
     {/if}
 </div>
diff --git a/packages/desktop/components/popups/VoteForProposalPopup.svelte b/packages/desktop/components/popups/VoteForProposalPopup.svelte
index acb05d1c4c..527511cba4 100644
--- a/packages/desktop/components/popups/VoteForProposalPopup.svelte
+++ b/packages/desktop/components/popups/VoteForProposalPopup.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { vote } from '@contexts/governance/actions'
     import { ABSTAIN_VOTE_VALUE } from '@contexts/governance/constants'
     import { selectedProposal } from '@contexts/governance/stores'
@@ -8,7 +8,7 @@
     import { checkActiveProfileAuth, getBaseToken } from '@core/profile/actions'
     import { formatTokenAmountBestMatch } from '@core/token'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { Button, FontWeight, Text, TextHint, TextType } from '@ui'
+    import { Button, FontWeight, Text, TextType } from '@ui'
     import { HTMLButtonType } from '@ui/enums'
 
     export let selectedAnswerValues: number[]
@@ -52,10 +52,10 @@
     <div class="space-y-4">
         <Table items={[{ key: localize('popups.voteForProposal.key'), value: formattedVotingPower }]} />
         {#if !hasVotingPower}
-            <TextHint danger text={localize('popups.voteForProposal.noVotingPower')} />
+            <Alert variant="danger" text={localize('popups.voteForProposal.noVotingPower')} />
         {:else if numberOfAbstainedQuestions > 0}
-            <TextHint
-                warning
+            <Alert
+                variant="warning"
                 text={localize('popups.voteForProposal.hasAbstained', {
                     values: { numberOfQuestions: numberOfAbstainedQuestions },
                 })}
diff --git a/packages/desktop/components/popups/VotingPowerToZeroPopup.svelte b/packages/desktop/components/popups/VotingPowerToZeroPopup.svelte
index eda5f57f8a..ab517987cc 100644
--- a/packages/desktop/components/popups/VotingPowerToZeroPopup.svelte
+++ b/packages/desktop/components/popups/VotingPowerToZeroPopup.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-    import { Button, Text, TextHint } from '@ui'
-    import { HTMLButtonType, TextType } from '@ui/enums'
+    import { Alert } from '@bloomwalletio/ui'
+    import { setVotingPower } from '@contexts/governance/actions'
     import { selectedAccount } from '@core/account/stores'
     import { handleError } from '@core/error/handlers'
-    import { setVotingPower } from '@contexts/governance/actions'
     import { localize } from '@core/i18n'
     import { checkActiveProfileAuth } from '@core/profile/actions'
-    import { closePopup, openPopup, PopupId, popupState } from '@desktop/auxiliary/popup'
+    import { PopupId, closePopup, openPopup, popupState } from '@desktop/auxiliary/popup'
+    import { Button, Text } from '@ui'
+    import { HTMLButtonType, TextType } from '@ui/enums'
 
     const ZERO_VOTING_POWER = '0'
 
@@ -37,7 +38,7 @@
 
 <form class="space-y-4" on:submit|preventDefault={onSubmit}>
     <Text type={TextType.h4} classes="mb-3">{localize('popups.manageVotingPower.title')}</Text>
-    <TextHint warning text={localize('popups.manageVotingPower.amountZero')} />
+    <Alert variant="warning" text={localize('popups.manageVotingPower.amountZero')} />
     <div class="flex flex-row flex-nowrap w-full space-x-4">
         <Button outline classes="w-full" onClick={onCancelClick}>
             {localize('actions.cancel')}
diff --git a/packages/desktop/components/popups/WalletFinderPopup.svelte b/packages/desktop/components/popups/WalletFinderPopup.svelte
index 2a0ce301e9..d0769444ff 100644
--- a/packages/desktop/components/popups/WalletFinderPopup.svelte
+++ b/packages/desktop/components/popups/WalletFinderPopup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
     import { showNotification } from '@auxiliary/notification'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { sumBalanceForAccounts } from '@core/account'
     import { DEFAULT_SYNC_OPTIONS } from '@core/account/constants'
     import { generateAndStoreActivitiesForAllAccounts } from '@core/activity/actions'
@@ -13,7 +13,7 @@
     import { formatTokenAmountBestMatch } from '@core/token'
     import { refreshAccountTokensForActiveProfile } from '@core/token/actions'
     import { closePopup } from '@desktop/auxiliary/popup'
-    import { Button, FontWeight, Text, TextHint, TextType } from '@ui'
+    import { Button, FontWeight, Text, TextType } from '@ui'
     import { onDestroy, onMount } from 'svelte'
 
     export let searchForBalancesOnLoad = false
@@ -113,7 +113,7 @@
     </div>
 
     {#if hasUsedWalletFinder}
-        <TextHint info icon="exclamation" text={localize('popups.walletFinder.searchAgainHint')} />
+        <Alert variant="info" text={localize('popups.walletFinder.searchAgainHint')} />
     {/if}
 </div>
 
diff --git a/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveContactDrawer.svelte b/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveContactDrawer.svelte
index 0ec457521f..640d6bd074 100644
--- a/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveContactDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveContactDrawer.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-    import { ContactBookRoute } from '../contact-book-route.enum'
-
-    import { Button } from '@bloomwalletio/ui'
+    import { Alert, Button } from '@bloomwalletio/ui'
     import { DrawerTemplate } from '@components'
-    import { Text, TextHint } from '@ui'
     import { ContactManager, doesProfileHaveContacts, selectedContact } from '@core/contact'
     import { localize } from '@core/i18n'
     import { activeProfile } from '@core/profile/stores'
     import { Router } from '@core/router'
     import { closeDrawer } from '@desktop/auxiliary/drawer'
+    import { Text } from '@ui'
+    import { ContactBookRoute } from '../contact-book-route.enum'
 
     export let drawerRouter: Router<unknown>
 
@@ -34,9 +33,8 @@
         <Text>
             {localize(`views.dashboard.drawers.contactBook.${ContactBookRoute.RemoveContact}.body`)}
         </Text>
-        <TextHint
-            icon="exclamation"
-            warning
+        <Alert
+            variant="warning"
             text={localize(`views.dashboard.drawers.contactBook.${ContactBookRoute.RemoveContact}.hint`)}
         />
     </remove-contact>
diff --git a/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveNetworkAddressesDrawer.svelte b/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveNetworkAddressesDrawer.svelte
index 72acd00349..343db3e284 100644
--- a/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveNetworkAddressesDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/contact-book/views/RemoveNetworkAddressesDrawer.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { ContactBookRoute } from '../contact-book-route.enum'
-
-    import { Button } from '@bloomwalletio/ui'
-    import { Text, TextHint } from '@ui'
+    import { Alert, Button } from '@bloomwalletio/ui'
     import { DrawerTemplate } from '@components'
-
     import { ContactManager, selectedContact, selectedContactNetworkId } from '@core/contact'
     import { localize } from '@core/i18n'
-    import { Router } from '@core/router'
     import { getNameFromNetworkId } from '@core/network'
+    import { Router } from '@core/router'
+    import { Text } from '@ui'
+    import { ContactBookRoute } from '../contact-book-route.enum'
 
     export let drawerRouter: Router<unknown>
 
@@ -32,9 +30,8 @@
                 values: { network: getNameFromNetworkId($selectedContactNetworkId) },
             })}
         </Text>
-        <TextHint
-            icon="exclamation"
-            warning
+        <Alert
+            variant="warning"
             text={localize(`views.dashboard.drawers.contactBook.${ContactBookRoute.RemoveNetworkAddresses}.hint`)}
         />
     </remove-addresses>
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/DappInformationCard.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/DappInformationCard.svelte
index 3b94bb3ebd..b36693f0c3 100644
--- a/packages/desktop/views/dashboard/drawers/dapp-config/components/DappInformationCard.svelte
+++ b/packages/desktop/views/dashboard/drawers/dapp-config/components/DappInformationCard.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { sessionProposal } from '@auxiliary/wallet-connect/stores'
+    import { Alert } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { Tile, FontWeight, Text, TextHint } from '@ui'
+    import { FontWeight, Text, Tile } from '@ui'
 
     $: metadata = $sessionProposal?.params.proposer.metadata
 </script>
@@ -19,7 +20,7 @@
                 </Text>
             </div>
         </div>
-        <TextHint warning text={localize('views.dashboard.drawers.dapps.confirmConnection.hint')} />
+        <Alert variant="warning" text={localize('views.dashboard.drawers.dapps.confirmConnection.hint')} />
     </div>
 </Tile>
 
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectedDappsDrawer.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectedDappsDrawer.svelte
index aa7dd44f1b..84cc42b4f3 100644
--- a/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectedDappsDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectedDappsDrawer.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { Icon, TextHint } from '@ui'
     import { Icon as IconEnum } from '@auxiliary/icon'
+    import { connectedDapps } from '@auxiliary/wallet-connect/stores'
+    import { Alert } from '@bloomwalletio/ui'
+    import { DrawerTemplate } from '@components'
     import { localize } from '@core/i18n'
     import { Router } from '@core/router'
-    import { DrawerTemplate } from '@components'
-    import { connectedDapps } from '@auxiliary/wallet-connect/stores'
+    import { Icon } from '@ui'
     import DappCard from '../components/DappCard.svelte'
     import { DappConfigRoute } from '../dapp-config-route.enum'
 
@@ -25,7 +26,7 @@
             {/each}
         </connected-dapps>
     {:else}
-        <TextHint info text={localize('views.dashboard.drawers.dapps.dappsList.hint')} />
+        <Alert variant="info" text={localize('views.dashboard.drawers.dapps.dappsList.hint')} />
     {/if}
 
     <button
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/InputConnectionCodeDrawer.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/InputConnectionCodeDrawer.svelte
index b4153a2379..22875a2090 100644
--- a/packages/desktop/views/dashboard/drawers/dapp-config/views/InputConnectionCodeDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/dapp-config/views/InputConnectionCodeDrawer.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { Button, TextInput, TextHint } from '@ui'
+    import { pairWithNewDapp } from '@auxiliary/wallet-connect/actions'
+    import { validateConnectionCode } from '@auxiliary/wallet-connect/utils/validateConnectionCode'
+    import { Alert } from '@bloomwalletio/ui'
+    import { DrawerTemplate } from '@components'
     import { localize } from '@core/i18n'
     import { Router } from '@core/router'
-    import { DrawerTemplate } from '@components'
-    import { validateConnectionCode } from '@auxiliary/wallet-connect/utils/validateConnectionCode'
-    import { pairWithNewDapp } from '@auxiliary/wallet-connect/actions'
+    import { Button, TextInput } from '@ui'
 
     export let drawerRouter: Router<unknown>
 
@@ -25,7 +26,7 @@
 
 <DrawerTemplate title={localize('views.dashboard.drawers.dapps.inputConnectionCode.title')} {drawerRouter}>
     <div class="flex flex-col gap-4">
-        <TextHint info text={localize('views.dashboard.drawers.dapps.inputConnectionCode.hint')} />
+        <Alert variant="info" text={localize('views.dashboard.drawers.dapps.inputConnectionCode.hint')} />
 
         <TextInput
             bind:value={walletConnectUri}
diff --git a/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
index c53f9adbc4..9e588d22e7 100644
--- a/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
+++ b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Table } from '@bloomwalletio/ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { ProposalDetailsButton, ProposalInformationPane, ProposalQuestion } from '@components'
     import { getVotingEvent } from '@contexts/governance/actions'
     import {
@@ -31,7 +31,7 @@
     import { getBestTimeDuration, milestoneToDate } from '@core/utils'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
     import { ParticipationEventType, TrackedParticipationOverview, VotingEventPayload } from '@iota/wallet/out/types'
-    import { Button, MarkdownBlock, Pane, ProposalStatusPill, Text, TextHint, TextType } from '@ui'
+    import { Button, MarkdownBlock, Pane, ProposalStatusPill, Text, TextType } from '@ui'
     import { onDestroy, onMount } from 'svelte'
 
     const { metadata } = $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin ?? {}
@@ -41,7 +41,7 @@
     let votingPayload: VotingEventPayload
     let totalVotes = 0
     let hasMounted = false
-    let textHintString = ''
+    let alertText = ''
     let proposalQuestions: HTMLElement
     let isVotingForProposal: boolean = false
     let statusLoaded: boolean = false
@@ -70,7 +70,7 @@
         ]
     }
 
-    $: $selectedParticipationEventStatus, (textHintString = getTextHintString())
+    $: $selectedParticipationEventStatus, (alertText = getAlertText())
 
     $: hasGovernanceTransactionInProgress =
         $selectedAccount?.hasVotingPowerTransactionInProgress || $selectedAccount?.hasVotingTransactionInProgress
@@ -176,7 +176,7 @@
         }, 250)
     }
 
-    function getTextHintString(): string {
+    function getAlertText(): string {
         if (!$selectedProposal) {
             return ''
         }
@@ -261,7 +261,7 @@
             {/if}
         </proposal-questions>
         {#if $selectedProposal?.status === ProposalStatus.Upcoming}
-            <TextHint info text={textHintString} />
+            <Alert variant="info" text={alertText} />
         {:else if [ProposalStatus.Commencing, ProposalStatus.Holding].includes($selectedProposal?.status)}
             {@const isLoaded = questions && overviewLoaded && statusLoaded}
             {@const isStoppingVote = lastAction === 'stopVote' && hasGovernanceTransactionInProgress}
diff --git a/packages/desktop/views/login/views/EnterPinView.svelte b/packages/desktop/views/login/views/EnterPinView.svelte
index 0cd9d95b0e..649a04fd22 100644
--- a/packages/desktop/views/login/views/EnterPinView.svelte
+++ b/packages/desktop/views/login/views/EnterPinView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Icon as IconEnum } from '@auxiliary/icon'
+    import { Alert } from '@bloomwalletio/ui'
     import {
         Platform,
         isLatestStrongholdVersion,
@@ -14,7 +15,7 @@
     import { isValidPin } from '@core/utils'
     import { PopupId, openPopup, popupState } from '@desktop/auxiliary/popup'
     import features from '@features/features'
-    import { Icon, PinInput, Profile, Text, TextHint } from '@ui'
+    import { Icon, PinInput, Profile, Text } from '@ui'
     import { onDestroy } from 'svelte'
 
     let attempts: number = 0
@@ -126,7 +127,7 @@
             <div class="flex flex-col gap-8 w-full items-center">
                 <Profile profile={$activeProfile} {updateRequired} />
                 {#if updateRequired}
-                    <TextHint warning text={localize('views.login.hintStronghold')} />
+                    <Alert variant="warning" text={localize('views.login.hintStronghold')} />
                 {/if}
                 <div class="flex w-full items-center">
                     <div class="relative h-6">
diff --git a/packages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte b/packages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte
index 6b36c4b66b..01e5c2d920 100644
--- a/packages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte
+++ b/packages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+    import { Alert } from '@bloomwalletio/ui'
     import { OnboardingLayout } from '@components'
     import { completeOnboardingProcess, isOnboardingLedgerProfile } from '@contexts/onboarding'
     import { localize } from '@core/i18n'
     import { checkOrConnectLedger } from '@core/ledger'
-    import { Animation, Button, Icon, Text, TextHint } from '@ui'
+    import { Animation, Button, Icon, Text } from '@ui'
     import { onboardingRouter } from '@views/onboarding/onboarding-router'
 
     function onContinueClick(): void {
@@ -33,7 +34,7 @@
             >
         </div>
         {#if $isOnboardingLedgerProfile}
-            <TextHint warning text={localize('views.onboarding.congratulations.ledgerHint')} />
+            <Alert variant="warning" text={localize('views.onboarding.congratulations.ledgerHint')} />
         {/if}
     </div>
     <div slot="leftpane__action">
diff --git a/packages/desktop/views/update-stronghold/views/ChangePasswordView.svelte b/packages/desktop/views/update-stronghold/views/ChangePasswordView.svelte
index 42a207d483..44dff184bb 100644
--- a/packages/desktop/views/update-stronghold/views/ChangePasswordView.svelte
+++ b/packages/desktop/views/update-stronghold/views/ChangePasswordView.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { showNotification } from '@auxiliary/notification'
+    import { Alert } from '@bloomwalletio/ui'
     import { OnboardingLayout } from '@components'
     import { onboardingProfile, updateOnboardingProfile } from '@contexts/onboarding'
     import { handleError } from '@core/error/handlers'
@@ -12,7 +13,7 @@
     import { unlockStronghold } from '@core/profile/actions'
     import { activeProfile, updateActiveProfile } from '@core/profile/stores'
     import { PASSWORD_REASON_MAP } from '@core/stronghold'
-    import { Animation, Button, PasswordInput, Text, TextHint } from '@ui'
+    import { Animation, Button, PasswordInput, Text } from '@ui'
     import { HTMLButtonType, TextType } from '@ui/enums'
     import { onMount } from 'svelte'
     import zxcvbn from 'zxcvbn'
@@ -122,7 +123,7 @@
         </Text>
     </div>
     <div slot="leftpane__content">
-        <TextHint warning text={localize('views.updateStronghold.changePassword.hint')} />
+        <Alert variant="warning" text={localize('views.updateStronghold.changePassword.hint')} />
         <form on:submit|preventDefault={onSubmit} id="update-stronghold-form" class="mt-12">
             <PasswordInput
                 bind:value={newPassword}
diff --git a/packages/desktop/views/update-stronghold/views/UpdateBackupView.svelte b/packages/desktop/views/update-stronghold/views/UpdateBackupView.svelte
index 84a0ca6aa5..74a853615e 100644
--- a/packages/desktop/views/update-stronghold/views/UpdateBackupView.svelte
+++ b/packages/desktop/views/update-stronghold/views/UpdateBackupView.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { Icon as IconEnum } from '@auxiliary/icon'
     import { showNotification } from '@auxiliary/notification'
+    import { Alert } from '@bloomwalletio/ui'
     import { OnboardingLayout } from '@components'
     import { updateOnboardingProfile } from '@contexts/onboarding/stores'
     import { exportStronghold } from '@contexts/settings/actions'
     import { localize } from '@core/i18n'
     import { login } from '@core/profile/actions'
-    import { Animation, Button, Icon, Text, TextHint, TextType } from '@ui'
+    import { Animation, Button, Icon, Text, TextType } from '@ui'
     import { updateStrongholdRouter } from '../update-stronghold-router'
 
     export let busy = false
@@ -78,7 +79,7 @@
                 {localize(`views.updateStronghold.updateBackup.${isRecovery ? 'recoveryBody' : 'loginBody'}`)}
             </Text>
         </div>
-        <TextHint warning text={localize('views.updateStronghold.updateBackup.hint')} />
+        <Alert variant="warning" text={localize('views.updateStronghold.updateBackup.hint')} />
     </div>
     <div slot="leftpane__action">
         <Button
diff --git a/packages/shared/src/components/TextHint.svelte b/packages/shared/src/components/TextHint.svelte
deleted file mode 100644
index b1b1fc7add..0000000000
--- a/packages/shared/src/components/TextHint.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import { Icon, Text } from '@ui'
-
-    export let primary = false
-    export let secondary = false
-    export let success = false
-    export let danger = false
-    export let warning = false
-    export let info = false
-    export let classes: string = ''
-    export let icon: 'info' | 'exclamation' | undefined = undefined
-    export let iconClasses: string = ''
-    export let iconSize: string = ''
-    export let text: string = ''
-    export let textClasses: string = ''
-    export let textColor = 'gray-700'
-    export let textDarkColor = 'gray-400'
-
-    let _classes: string
-    let _icon: string
-    let _iconClasses: string
-
-    function setClasses(): void {
-        if (primary) {
-            _classes = 'bg-gray-50 dark:bg-gray-800'
-        } else if (secondary) {
-            _classes = 'bg-gray-50 dark:bg-gray-800'
-        } else if (success) {
-            _classes = 'bg-green-50 dark:bg-green-500'
-            _icon = 'checkmark-filled'
-            _iconClasses = 'text-green-700 dark:text-green-700'
-        } else if (danger) {
-            _classes = 'bg-red-50 dark:bg-red-500'
-            _icon = 'error-filled'
-            _iconClasses = 'text-red-500 dark:text-red-500'
-        } else if (warning) {
-            _classes = 'bg-yellow-50 dark:bg-yellow-500'
-            _icon = 'exclamation-filled'
-            _iconClasses = 'text-yellow-700 dark:text-yellow-700'
-        } else if (info) {
-            _classes = 'bg-blue-50 dark:bg-blue-500'
-            _icon = 'info-filled'
-            _iconClasses = 'text-blue-600 dark:text-blue-600'
-        }
-    }
-
-    $: $$props, setClasses()
-</script>
-
-{#if text}
-    <div class="flex flex-row items-center p-4 rounded-lg dark:bg-opacity-10 {_classes} {classes}">
-        <Icon
-            icon={icon ?? _icon}
-            height={iconSize}
-            width={iconSize}
-            primaryColor="white"
-            classes="mr-3 fill-current {_iconClasses} {iconClasses}"
-        />
-        <Text fontSize="14" lineHeight="5" color={textColor} darkColor={textDarkColor} classes={textClasses}>
-            {text}
-        </Text>
-    </div>
-{/if}
diff --git a/packages/shared/src/components/index.js b/packages/shared/src/components/index.js
index b499199d42..58a7aae523 100644
--- a/packages/shared/src/components/index.js
+++ b/packages/shared/src/components/index.js
@@ -16,7 +16,6 @@ export { default as RecoveryPhrase } from './RecoveryPhrase.svelte'
 export { default as Spinner } from './Spinner.svelte'
 export { default as Swiper } from './Swiper.svelte'
 export { default as Text } from './Text.svelte'
-export { default as TextHint } from './TextHint.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as ToastWrapper } from './ToastWrapper.svelte'
 export { default as Tooltip } from './Tooltip.svelte'