refactor: replace TextHint with Alert from bloom-ui

packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte

@@ -1,13 +1,13 @@
 <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'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     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>

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>

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}

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">

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}>

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>

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>

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}>

packages/desktop/components/popups/RemoveProposalPopup.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
     import { showNotification } from '@auxiliary/notification'
+    import { Alert } from '@bloomwalletio/ui'
     import { ProposalStatus } from '@contexts/governance/enums'
     import {
         clearSelectedParticipationEventStatus,
         removePersistedProposal,
         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,16 +46,16 @@
     }
 
     // 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>
 
 <remove-proposal>
     <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">

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}

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">

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}

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, TokenAmountTile, TooltipIcon } from '@ui'
+    import { Button, FontWeight, Text, TextType, TokenAmountTile, TooltipIcon } from '@ui'
     import { SendFlowRoute, SendFlowRouter, sendFlowRouter } from '@views/dashboard/send-flow'
     import { TokenActionsMenu } from '../menus'
 
@@ -111,7 +111,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">