> For the complete documentation index, see [llms.txt](https://lunes-labs.gitbook.io/dao-lunes-labs-pt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lunes-labs.gitbook.io/dao-lunes-labs-pt/developers/para-desenvolvedores/smart-contract-ink-4.x/frontend-development/useink-notifications/tonotificationlevel.md).

# toNotificationLevel

An opinionated utility function to convert nofication `type` to a simplified severity level. There are four levels: `info`, `warning`, `success`, and `error`. This function is useful for mapping transaction status to colors in your UI.

Note that for transactions the `Finalized` status will convert to `success`, but this does not necessarily mean that the transaction was successful in the user's eyes. It means that the transaction has been processed, gas has been removed from the caller's balance, and the block has been finalized.

```javascript
import { MyCustomSnackbar } from './MyCustomSnackbar'
import { useNotifications } from 'useink/notifications'

export const MyNotifications = ({ children }) => {
  const { notifications } = useNotifications()

  return (
    <ul>
      {notifications.map((n) => (
        <li key={n.id}>
          <MyCustomSnackbar
            message={n.message}
            type={
              // e.g. `info` might have a blue background, and `error` a red one.
              toNotificationLevel(n.type)
            } 
          /> 
        </li>
      ))}
    </ul>
  )
}
```

### Notification `type` Conversion List[​](https://use.ink/frontend/notifications/toNotificationLevel#notification-type-conversion-list) <a href="#notification-type-conversion-list" id="notification-type-conversion-list"></a>

```javascript
case 'None':
  return 'info';

case 'DryRun':
  return 'info';

case 'PendingSignature':
  return 'info';

case 'Future':
  return 'info';

case 'Ready':
  return 'info';

case 'Broadcast':
  return 'info';

// We optomistically assume that `InBlock` means that the transaction is `success`. 
// This will almost always end up reaching `Finalized` status.
case 'InBlock':
  return 'success';

case 'Retracted':
  return 'warning';

case 'FinalityTimeout':
  return 'error';

case 'Finalized':
  return 'success';

case 'Usurped':
  return 'error';

case 'Dropped':
  return 'error';

case 'Invalid':
  return 'warning';

case 'Errored':
  return 'error';

case 'WalletConnected':
  return 'info';

case 'WalletDisconnected':
  return 'info';

default:
  return 'info';
```

### Return Type[​](https://use.ink/frontend/notifications/toNotificationLevel#return-type) <a href="#return-type" id="return-type"></a>

```javascript
type NotificationLevel = 'success' | 'error' | 'warning' | 'info';
```