# TransactionBadge

A component to get a badge based on a transaction.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { TransactionBadge } from '@aragon/ui'

function App() {
  return <TransactionBadge transaction="0x281c36aee91…c31ef3fc115" />
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-5dfa549756d9fa2b24d8a2b894a457173690315c%2FSchermata%202022-06-25%20alle%2022.41.43.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `transaction` <a href="#transaction" id="transaction"></a>

| TYPE     | DEFAULT VALUE   |
| -------- | --------------- |
| `String` | None (required) |

The transaction hash.

If this is not supplied or an invalid transaction hash is supplied, the badge will display "Invalid".

#### `shorten` <a href="#shorten" id="shorten"></a>

| TYPE   | DEFAULT VALUE |
| ------ | ------------- |
| `Bool` | `true`        |

If true, only render the first and last four characters of the transaction hash (excluding the '0x' prefix).

#### `networkType` <a href="#networktype" id="networktype"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | `main`        |

Checks the type of network to get Etherscan's URL.

#### `disabled` <a href="#disabled" id="disabled"></a>

| TYPE   | DEFAULT VALUE |
| ------ | ------------- |
| `Bool` | `true`        |

Disable the link.